From 9c949e8ac08b765342f79678b957d015c16cf5c9 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Tue, 18 Nov 2025 23:59:47 +0800
Subject: [PATCH 01/26] feat: add uniapp

---
 .gitignore                                    |    8 +
 .vscode/settings.json                         |    7 +-
 package.json                                  |    2 +
 packages/tdesign-uniapp-chat/.eslintignore    |   17 +
 packages/tdesign-uniapp-chat/.eslintrc.js     |   24 +
 .../tdesign-uniapp-chat/components/.npmrc     |    1 +
 .../components/CHANGELOG.md                   |   11 +
 .../tdesign-uniapp-chat/components/LICENSE    |    9 +
 .../tdesign-uniapp-chat/components/README.md  |  108 +
 .../components/attachments/README.en-US.md    |   21 +
 .../components/attachments/README.md          |   55 +
 .../attachments/_example/attachments.less     |    0
 .../attachments/_example/attachments.vue      |   57 +
 .../attachments/_example/base/index.vue       |   85 +
 .../_example/file-loading/index.vue           |   85 +
 .../attachments/_example/file/index.vue       |  136 ++
 .../_example/image-loading/index.vue          |   85 +
 .../components/attachments/attachments.less   |  250 ++
 .../components/attachments/attachments.vue    |  349 +++
 .../components/attachments/computed.js        |   49 +
 .../components/attachments/props.ts           |   45 +
 .../components/attachments/type.ts            |   57 +
 .../components/chat-actionbar/README.en-US.md |   22 +
 .../components/chat-actionbar/README.md       |   49 +
 .../chat-actionbar/_example/base/index.vue    |   88 +
 .../_example/chat-actionbar.less              |    8 +
 .../_example/chat-actionbar.vue               |   48 +
 .../chat-actionbar/_example/comment/index.vue |   89 +
 .../chat-actionbar/chat-actionbar.less        |   84 +
 .../chat-actionbar/chat-actionbar.vue         |  225 ++
 .../components/chat-actionbar/props.ts        |   54 +
 .../components/chat-actionbar/type.ts         |   47 +
 .../components/chat-content/README.en-US.md   |   18 +
 .../components/chat-content/README.md         |   41 +
 .../chat-content/_example/base/index.vue      |  105 +
 .../chat-content/_example/chat-content.less   |    0
 .../chat-content/_example/chat-content.vue    |   35 +
 .../components/chat-content/chat-content.less |   49 +
 .../components/chat-content/chat-content.vue  |  119 +
 .../components/chat-content/props.ts          |   39 +
 .../components/chat-content/type.ts           |   35 +
 .../components/chat-list/README.en-US.md      |   25 +
 .../components/chat-list/README.md            |   68 +
 .../chat-list/_example/agent/index.vue        |  601 +++++
 .../chat-list/_example/base/index.vue         |  330 +++
 .../_example/chart-component/index.vue        |   82 +
 .../chat-list/_example/chat-list.less         |    7 +
 .../chat-list/_example/chat-list.vue          |  101 +
 .../chat-list/_example/code/index.vue         |  389 +++
 .../chat-list/_example/custom/index.vue       |  399 +++
 .../chat-list/_example/docs/index.vue         |  373 +++
 .../_example/ec-canvas/ec-canvas.vue          |  319 +++
 .../chat-list/_example/ec-canvas/echarts.js   |   45 +
 .../chat-list/_example/ec-canvas/wx-canvas.js |  111 +
 .../_example/hook-component/index.vue         |  337 +++
 .../chat-list/_example/image/index.vue        |  460 ++++
 .../components/chat-list/_example/utils.ts    |   28 +
 .../components/chat-list/chat-list.less       |   35 +
 .../components/chat-list/chat-list.vue        |  177 ++
 .../components/chat-list/props.ts             |   41 +
 .../components/chat-list/type.ts              |   40 +
 .../components/chat-loading/README.en-US.md   |   11 +
 .../components/chat-loading/README.md         |   34 +
 .../chat-loading/_example/base/index.vue      |   43 +
 .../chat-loading/_example/chat-loading.less   |    0
 .../chat-loading/_example/chat-loading.vue    |   61 +
 .../chat-loading/_example/text/index.vue      |   30 +
 .../components/chat-loading/chat-loading.less |  171 ++
 .../components/chat-loading/chat-loading.vue  |   91 +
 .../components/chat-loading/props.ts          |   23 +
 .../components/chat-loading/type.ts           |   18 +
 .../chat-markdown-code.less                   |   96 +
 .../chat-markdown-code/chat-markdown-code.vue |   58 +
 .../chat-markdown-node.less                   |    0
 .../chat-markdown-node/chat-markdown-node.vue |  292 +++
 .../chat-markdown-table.less                  |   68 +
 .../chat-markdown-table.vue                   |   80 +
 .../components/chat-markdown/README.en-US.md  |   17 +
 .../components/chat-markdown/README.md        |   60 +
 .../chat-markdown/_example/base/index.vue     |   60 +
 .../chat-markdown/_example/base/mock2.js      |  104 +
 .../chat-markdown/_example/chat-markdown.less |   17 +
 .../chat-markdown/_example/chat-markdown.vue  |   68 +
 .../chat-markdown/_example/code/index.vue     |   47 +
 .../chat-markdown/_example/list/index.vue     |   50 +
 .../chat-markdown/_example/refer/index.vue    |   46 +
 .../chat-markdown/_example/sheet/index.vue    |   46 +
 .../chat-markdown/_example/url/index.vue      |   50 +
 .../chat-markdown/chat-markdown.less          |  192 ++
 .../chat-markdown/chat-markdown.vue           |   80 +
 .../components/chat-markdown/props.ts         |   24 +
 .../components/chat-markdown/type.ts          |   29 +
 .../components/chat-message/README.en-US.md   |   31 +
 .../components/chat-message/README.md         |   79 +
 .../chat-message/_example/base/index.vue      |   52 +
 .../chat-message/_example/chat-message.less   |    7 +
 .../chat-message/_example/chat-message.vue    |   70 +
 .../chat-message/_example/configure/index.vue |   70 +
 .../chat-message/_example/content/index.vue   |  244 ++
 .../chat-message/_example/error/index.vue     |   51 +
 .../chat-message/_example/status/index.vue    |   62 +
 .../chat-message/_example/style/index.vue     |   69 +
 .../components/chat-message/chat-message.less |  252 ++
 .../components/chat-message/chat-message.vue  |  176 ++
 .../components/chat-message/props.ts          |   82 +
 .../components/chat-message/type.ts           |   87 +
 .../components/chat-sender/README.en-US.md    |   39 +
 .../components/chat-sender/README.md          |   76 +
 .../_example/attachments/index.vue            |  425 ++++
 .../chat-sender/_example/base/index.vue       |  366 +++
 .../chat-sender/_example/chat-sender.less     |   17 +
 .../chat-sender/_example/chat-sender.vue      |   55 +
 .../_example/content-citation/index.vue       |  430 ++++
 .../_example/file-citation/index.vue          |  445 ++++
 .../chat-sender/_example/theme/index.vue      |  112 +
 .../components/chat-sender/chat-sender.less   |  284 +++
 .../components/chat-sender/chat-sender.vue    |  464 ++++
 .../components/chat-sender/computed.js        |   22 +
 .../components/chat-sender/props.ts           |  118 +
 .../components/chat-sender/type.ts            |  137 ++
 .../components/chat-thinking/README.en-US.md  |   21 +
 .../components/chat-thinking/README.md        |   71 +
 .../chat-thinking/_example/base/index.vue     |  134 ++
 .../chat-thinking/_example/chat-thinking.less |    0
 .../chat-thinking/_example/chat-thinking.vue  |   62 +
 .../chat-thinking/_example/complete/index.vue |   42 +
 .../chat-thinking/_example/layout/index.vue   |   69 +
 .../chat-thinking/_example/pending/index.vue  |   41 +
 .../chat-thinking/chat-thinking.less          |  101 +
 .../chat-thinking/chat-thinking.vue           |  122 +
 .../components/chat-thinking/props.ts         |   52 +
 .../components/chat-thinking/type.ts          |   40 +
 .../components/global.d.ts                    |   15 +
 .../components/npm/marked/index.js            |   72 +
 .../components/package.json                   |  157 ++
 .../components/script/postinstall.js          |   46 +
 .../tdesign-uniapp-chat/tdesign-uniapp.vue    |   11 +
 .../components/types/attachments.d.ts         |    7 +
 .../components/types/chat-actionbar.d.ts      |    7 +
 .../components/types/chat-content.d.ts        |    7 +
 .../components/types/chat-list.d.ts           |    7 +
 .../components/types/chat-loading.d.ts        |    7 +
 .../components/types/chat-markdown.d.ts       |    7 +
 .../components/types/chat-message.d.ts        |    7 +
 .../components/types/chat-sender.d.ts         |    7 +
 .../components/types/chat-thinking.d.ts       |    7 +
 .../components/types/index.d.ts               |    9 +
 packages/tdesign-uniapp-chat/package.json     |   98 +
 packages/tdesign-uniapp-chat/shims-uni.d.ts   |   12 +
 .../tdesign-uniapp-chat/site/.env.intranet    |    1 +
 .../tdesign-uniapp-chat/site/.env.preview     |    1 +
 .../tdesign-uniapp-chat/site/.env.production  |    1 +
 .../tdesign-uniapp-chat/site/docs.config.js   |  166 ++
 .../site/docs/custom-style.md                 |  117 +
 .../site/docs/custom-theme.md                 |   63 +
 .../site/docs/dark-mode.md                    |   95 +
 packages/tdesign-uniapp-chat/site/docs/faq.md |   28 +
 .../site/docs/getting-started.en-US.md        |   94 +
 .../site/docs/getting-started.md              |   73 +
 packages/tdesign-uniapp-chat/site/docs/sse.md |  199 ++
 packages/tdesign-uniapp-chat/site/index.html  |   38 +
 packages/tdesign-uniapp-chat/site/mobile.html |   37 +
 .../tdesign-uniapp-chat/site/package.json     |  136 ++
 .../site/styles/mixins/index.less             |   16 +
 .../site/styles/mixins/text.less              |   55 +
 .../site/styles/mobile/components.less        |  112 +
 .../site/styles/mobile/demo.less              |   61 +
 .../site/styles/mobile/index.less             |  152 ++
 .../tdesign-uniapp-chat/site/styles/vars.less |  125 +
 .../tdesign-uniapp-chat/site/vite.config.ts   |   94 +
 packages/tdesign-uniapp-chat/site/web/app.vue |  149 ++
 packages/tdesign-uniapp-chat/site/web/main.ts |   24 +
 .../changelog-to-json-core/components.ts      |  166 ++
 .../plugins/changelog-to-json-core/index.ts   |  194 ++
 .../plugins/changelog-to-json-core/libs.ts    |   23 +
 .../plugins/changelog-to-json-core/types.ts   |   29 +
 .../web/plugins/changelog-to-json/index.js    |   32 +
 .../site/web/plugins/plugin-tdoc/demo.js      |   42 +
 .../site/web/plugins/plugin-tdoc/index.js     |   38 +
 .../site/web/plugins/plugin-tdoc/md-to-vue.js |  212 ++
 .../web/plugins/plugin-tdoc/transforms.js     |   77 +
 .../tdesign-uniapp-chat/site/web/router.ts    |   68 +
 .../site/web/stackblitz/content.ts            |  237 ++
 .../site/web/stackblitz/index.vue             |  130 +
 .../site/web/test-coverage.js                 |   69 +
 .../tdesign-uniapp-chat/site/web/utils.ts     |   63 +
 .../tdesign-uniapp-chat/tsconfig.eslint.json  |   13 +
 packages/tdesign-uniapp-chat/tsconfig.json    |   40 +
 packages/tdesign-uniapp/.eslintignore         |   17 +
 packages/tdesign-uniapp/.eslintrc.js          |   24 +
 packages/tdesign-uniapp/components/.npmrc     |    1 +
 .../tdesign-uniapp/components/CHANGELOG.md    |   41 +
 packages/tdesign-uniapp/components/LICENSE    |    9 +
 packages/tdesign-uniapp/components/README.md  |  144 ++
 .../components/action-sheet/README.en-US.md   |   59 +
 .../components/action-sheet/README.md         |  130 +
 .../action-sheet/_example/action-sheet.less   |    7 +
 .../action-sheet/_example/action-sheet.vue    |   74 +
 .../action-sheet/_example/align/index.vue     |   75 +
 .../action-sheet/_example/grid/index.vue      |  106 +
 .../action-sheet/_example/list/index.vue      |  126 +
 .../action-sheet/_example/status/index.vue    |   69 +
 .../components/action-sheet/action-sheet.less |  156 ++
 .../components/action-sheet/action-sheet.vue  |  334 +++
 .../components/action-sheet/computed.js       |   15 +
 .../components/action-sheet/index.ts          |   13 +
 .../components/action-sheet/props.ts          |   86 +
 .../components/action-sheet/show.ts           |   52 +
 .../components/action-sheet/type.ts           |   92 +
 .../components/avatar-group/avatar-group.less |   66 +
 .../components/avatar-group/avatar-group.vue  |  121 +
 .../components/avatar-group/props.ts          |   44 +
 .../components/avatar-group/type.ts           |   38 +
 .../components/avatar/README.en-US.md         |  102 +
 .../components/avatar/README.md               |  152 ++
 .../avatar/_example/action/index.vue          |   54 +
 .../components/avatar/_example/avatar.less    |   13 +
 .../components/avatar/_example/avatar.vue     |  100 +
 .../avatar/_example/badge-avatar/index.vue    |   51 +
 .../_example/character-avatar/index.vue       |   48 +
 .../avatar/_example/exhibition/index.vue      |   42 +
 .../avatar/_example/icon-avatar/index.vue     |   34 +
 .../avatar/_example/image-avatar/index.vue    |   37 +
 .../components/avatar/_example/size/index.vue |  105 +
 .../avatar/_example/skyline/avatar.less       |    0
 .../avatar/_example/skyline/avatar.vue        |   22 +
 .../components/avatar/avatar.less             |  116 +
 .../components/avatar/avatar.vue              |  200 ++
 .../components/avatar/computed.js             |   32 +
 .../tdesign-uniapp/components/avatar/props.ts |   54 +
 .../tdesign-uniapp/components/avatar/type.ts  |   58 +
 .../components/back-top/README.en-US.md       |   49 +
 .../components/back-top/README.md             |   67 +
 .../back-top/_example/back-top.less           |   14 +
 .../components/back-top/_example/back-top.vue |  150 ++
 .../back-top/_example/base/index.vue          |   42 +
 .../back-top/_example/half-round/index.vue    |   42 +
 .../back-top/_example/skyline/back-top.less   |   14 +
 .../back-top/_example/skyline/back-top.vue    |  167 ++
 .../components/back-top/back-top.less         |   97 +
 .../components/back-top/back-top.vue          |  122 +
 .../components/back-top/props.ts              |   48 +
 .../components/back-top/type.ts               |   42 +
 .../components/badge/README.en-US.md          |   53 +
 .../tdesign-uniapp/components/badge/README.md |   84 +
 .../components/badge/_example/api.md          |   14 +
 .../components/badge/_example/badge.less      |    0
 .../components/badge/_example/badge.vue       |   43 +
 .../components/badge/_example/base/index.vue  |  114 +
 .../components/badge/_example/size/index.vue  |   47 +
 .../badge/_example/skyline/badge.less         |    0
 .../badge/_example/skyline/badge.vue          |   55 +
 .../components/badge/_example/theme/index.vue |  122 +
 .../components/badge/badge.less               |  123 +
 .../tdesign-uniapp/components/badge/badge.vue |  119 +
 .../components/badge/computed.js              |   66 +
 .../tdesign-uniapp/components/badge/props.ts  |   55 +
 .../tdesign-uniapp/components/badge/type.ts   |   52 +
 .../components/button/README.en-US.md         |  238 ++
 .../components/button/README.md               |  229 ++
 .../components/button/_example/base/index.vue |   77 +
 .../button/_example/block-btn/index.vue       |   32 +
 .../components/button/_example/button.less    |    3 +
 .../components/button/_example/button.vue     |   99 +
 .../button/_example/disabled/index.vue        |   84 +
 .../button/_example/ghost-btn/index.vue       |   48 +
 .../button/_example/group-btn/index.vue       |   55 +
 .../button/_example/icon-btn/index.vue        |   76 +
 .../button/_example/shape/index.vue           |   70 +
 .../components/button/_example/size/index.vue |   52 +
 .../button/_example/skyline/button.less       |   18 +
 .../button/_example/skyline/button.vue        |  107 +
 .../button/_example/theme/index.vue           |  121 +
 .../components/button/button.less             |  645 +++++
 .../components/button/button.vue              |  237 ++
 .../tdesign-uniapp/components/button/props.ts |  207 ++
 .../tdesign-uniapp/components/button/type.ts  |  192 ++
 .../components/calendar/README.en-US.md       |   62 +
 .../components/calendar/README.md             |  112 +
 .../calendar/_example/base/index.vue          |   52 +
 .../components/calendar/_example/calendar.css |    3 +
 .../components/calendar/_example/calendar.vue |   84 +
 .../components/calendar/_example/computed.js  |   24 +
 .../calendar/_example/custom-range/index.vue  |   55 +
 .../calendar/_example/custom-text/index.vue   |  109 +
 .../calendar/_example/local-text/index.vue    |   63 +
 .../calendar/_example/multiple/index.vue      |   64 +
 .../calendar/_example/range/index.vue         |   89 +
 .../calendar/_example/switch-mode/index.vue   |   56 +
 .../calendar/_example/without-popup/index.vue |   31 +
 .../calendar/calendar-header.props.js         |   42 +
 .../components/calendar/calendar-header.vue   |   98 +
 .../components/calendar/calendar.less         |  251 ++
 .../components/calendar/calendar.vue          |  445 ++++
 .../components/calendar/computed.js           |   42 +
 .../components/calendar/props.ts              |  111 +
 .../components/calendar/template.props.js     |   57 +
 .../components/calendar/template.vue          |  257 ++
 .../components/calendar/type.ts               |  136 ++
 .../components/calendar/utils.ts              |   18 +
 .../components/cascader/README.en-US.md       |   57 +
 .../components/cascader/README.md             |   97 +
 .../cascader/_example/base/index.vue          |  212 ++
 .../components/cascader/_example/cascader.vue |   70 +
 .../_example/check-strictly/index.vue         |  228 ++
 .../cascader/_example/keys/index.vue          |  215 ++
 .../cascader/_example/theme-tab/index.vue     |  205 ++
 .../cascader/_example/with-title/index.vue    |  205 ++
 .../cascader/_example/with-value/index.vue    |  205 ++
 .../components/cascader/cascader.less         |  123 +
 .../components/cascader/cascader.vue          |  516 ++++
 .../components/cascader/props.ts              |   73 +
 .../components/cascader/type.ts               |   75 +
 .../components/cell-group/_example/api.md     |    7 +
 .../cell-group/_example/cell-group.less       |    7 +
 .../cell-group/_example/cell-group.vue        |   55 +
 .../components/cell-group/cell-group.less     |   43 +
 .../components/cell-group/cell-group.vue      |   69 +
 .../components/cell-group/props.ts            |   25 +
 .../components/cell-group/type.ts             |   23 +
 .../components/cell/README.en-US.md           |  118 +
 .../tdesign-uniapp/components/cell/README.md  |  149 ++
 .../components/cell/_example/base/index.vue   |   75 +
 .../components/cell/_example/cell.less        |    0
 .../components/cell/_example/cell.vue         |   51 +
 .../cell/_example/multiple/index.vue          |  130 +
 .../cell/_example/skyline/cell.less           |    0
 .../components/cell/_example/skyline/cell.vue |   60 +
 .../components/cell/_example/theme/index.vue  |   42 +
 .../tdesign-uniapp/components/cell/cell.less  |  138 ++
 .../tdesign-uniapp/components/cell/cell.vue   |  260 ++
 .../tdesign-uniapp/components/cell/props.ts   |   87 +
 .../tdesign-uniapp/components/cell/type.ts    |   82 +
 .../components/check-tag/check-tag.less       |  193 ++
 .../components/check-tag/check-tag.vue        |  149 ++
 .../components/check-tag/props.ts             |   67 +
 .../components/check-tag/type.ts              |   63 +
 .../checkbox-group/checkbox-group.vue         |  245 ++
 .../components/checkbox-group/props.ts        |   58 +
 .../components/checkbox-group/type.ts         |   72 +
 .../components/checkbox/README.en-US.md       |  103 +
 .../components/checkbox/README.md             |  158 ++
 .../checkbox/_example/all/index.vue           |   53 +
 .../checkbox/_example/base/index.vue          |   57 +
 .../checkbox/_example/card/index.vue          |   62 +
 .../checkbox/_example/checkbox.less           |    0
 .../components/checkbox/_example/checkbox.vue |   97 +
 .../checkbox/_example/horizontal/index.vue    |   74 +
 .../checkbox/_example/right/index.vue         |   38 +
 .../checkbox/_example/skyline/checkbox.less   |    0
 .../checkbox/_example/skyline/checkbox.vue    |   22 +
 .../checkbox/_example/special/index.vue       |  195 ++
 .../checkbox/_example/status/index.vue        |   35 +
 .../checkbox/_example/type/index.vue          |   59 +
 .../components/checkbox/checkbox.less         |  229 ++
 .../components/checkbox/checkbox.vue          |  239 ++
 .../components/checkbox/props.ts              |   90 +
 .../components/checkbox/type.ts               |   96 +
 .../components/col/README.en-US.md            |   31 +
 .../tdesign-uniapp/components/col/README.md   |   60 +
 .../components/col/_example/base/index.vue    |   83 +
 .../components/col/_example/col.less          |   17 +
 .../components/col/_example/col.vue           |   49 +
 .../components/col/_example/offset/index.vue  |   55 +
 .../components/col/_example/skyline/col.less  |    0
 .../components/col/_example/skyline/col.vue   |   53 +
 .../tdesign-uniapp/components/col/col.less    |   21 +
 .../tdesign-uniapp/components/col/col.vue     |   51 +
 .../tdesign-uniapp/components/col/computed.js |   14 +
 .../tdesign-uniapp/components/col/props.ts    |   16 +
 .../tdesign-uniapp/components/col/type.ts     |   16 +
 .../collapse-panel/collapse-panel.less        |  133 +
 .../collapse-panel/collapse-panel.vue         |  237 ++
 .../components/collapse-panel/props.ts        |   48 +
 .../components/collapse-panel/type.ts         |   41 +
 .../components/collapse/README.en-US.md       |   81 +
 .../components/collapse/README.md             |  118 +
 .../collapse/_example/accordion/index.vue     |   53 +
 .../collapse/_example/action/index.vue        |   40 +
 .../collapse/_example/base/index.vue          |   41 +
 .../collapse/_example/collapse.less           |   45 +
 .../components/collapse/_example/collapse.vue |   71 +
 .../collapse/_example/placement/index.vue     |   41 +
 .../collapse/_example/theme/index.vue         |   53 +
 .../components/collapse/collapse.less         |    9 +
 .../components/collapse/collapse.vue          |  119 +
 .../components/collapse/props.ts              |   42 +
 .../components/collapse/type.ts               |   46 +
 .../components/color-picker/README.en-US.md   |   66 +
 .../components/color-picker/README.md         |  114 +
 .../color-picker/_example/base/index.vue      |   25 +
 .../color-picker/_example/color-picker.less   |    0
 .../color-picker/_example/color-picker.vue    |   66 +
 .../color-picker/_example/format/index.vue    |  114 +
 .../color-picker/_example/multiple/index.vue  |   33 +
 .../color-picker/_example/use-popup/index.vue |   54 +
 .../components/color-picker/color-picker.less |  366 +++
 .../components/color-picker/color-picker.vue  |  498 ++++
 .../components/color-picker/constants.ts      |   26 +
 .../components/color-picker/props.ts          |   75 +
 .../components/color-picker/template.props.js |   58 +
 .../components/color-picker/template.vue      |  198 ++
 .../components/color-picker/type.ts           |   96 +
 .../components/color-picker/utils.js          |    1 +
 .../tdesign-uniapp/components/common/bus.js   |   84 +
 .../components/common/canvas/index.js         |   53 +
 .../components/common/common.ts               |  173 ++
 .../components/common/config.js               |    9 +
 .../components/common/dom/index.js            |    1 +
 .../components/common/dom/select-component.js |   26 +
 .../components/common/event/dynamic.js        |   10 +
 .../components/common/functional/mixin.js     |   51 +
 .../components/common/relation/index.js       |    6 +
 .../components/common/relation/parent-map.js  |   24 +
 .../components/common/relation/relation.js    |  213 ++
 .../components/common/runtime/index.js        |    5 +
 .../components/common/runtime/relation.js     |    0
 .../components/common/runtime/wxs-polyfill.js |   16 +
 .../common/shared/calendar/index.ts           |  145 ++
 .../components/common/shared/calendar/type.ts |   14 +
 .../common/shared/color-picker/cmyk.ts        |   89 +
 .../common/shared/color-picker/color.ts       |  478 ++++
 .../common/shared/color-picker/gradient.ts    |  234 ++
 .../common/shared/color-picker/index.ts       |    3 +
 .../components/common/shared/date.ts          |   47 +
 .../common/shared/qrcode/qrcodegen.ts         | 1051 ++++++++
 .../components/common/shared/qrcode/types.ts  |   55 +
 .../components/common/shared/qrcode/utils.ts  |  157 ++
 .../components/common/src/control.js          |   66 +
 .../components/common/src/flatTool.js         |   99 +
 .../components/common/src/index.js            |    4 +
 .../common/src/instantiationDecorator.js      |  251 ++
 .../components/common/src/superComponent.js   |    5 +
 .../components/common/style/_variables.less   |  198 ++
 .../components/common/style/base.less         |    4 +
 .../components/common/style/icons.less        | 2132 +++++++++++++++++
 .../components/common/style/index.less        |    3 +
 .../common/style/mixins/_border.less          |   34 +
 .../common/style/mixins/_clearfix.less        |    7 +
 .../common/style/mixins/_cursor.less          |    6 +
 .../common/style/mixins/_ellipsis.less        |   15 +
 .../common/style/mixins/_hairline.less        |   55 +
 .../common/style/mixins/_index.less           |    6 +
 .../common/style/mixins/_other.less           |   14 +
 .../components/common/style/theme/index.css   |  354 +++
 .../components/common/style/theme/index.less  |   11 +
 .../common/style/theme/raw/_components.less   |   28 +
 .../common/style/theme/raw/_dark.less         |  176 ++
 .../common/style/theme/raw/_font.less         |   37 +
 .../common/style/theme/raw/_light.less        |  182 ++
 .../common/style/theme/raw/_radius.less       |   10 +
 .../common/style/theme/raw/_spacer.less       |   11 +
 .../common/style/utilities/_index.less        |   16 +
 .../tdesign-uniapp/components/common/utils.js |  335 +++
 .../components/common/utils.wxs.js            |  140 ++
 .../components/common/validator.js            |   30 +
 .../components/common/version.js              |   66 +
 .../components/common/wechat.js               |   20 +
 .../components/count-down/README.en-US.md     |   50 +
 .../components/count-down/README.md           |   76 +
 .../count-down/_example/base/index.vue        |  118 +
 .../count-down/_example/count-down.less       |   52 +
 .../count-down/_example/count-down.vue        |   55 +
 .../count-down/_example/size/index.vue        |  173 ++
 .../_example/skyline/count-down.less          |    3 +
 .../_example/skyline/count-down.vue           |   59 +
 .../components/count-down/computed.js         |    3 +
 .../components/count-down/count-down.less     |  150 ++
 .../components/count-down/count-down.vue      |  166 ++
 .../components/count-down/props.ts            |   62 +
 .../components/count-down/type.ts             |   64 +
 .../components/count-down/utils.ts            |   80 +
 .../date-time-picker/README.en-US.md          |   61 +
 .../components/date-time-picker/README.md     |  105 +
 .../_example/date-all/index.vue               |   75 +
 .../_example/date-time-picker.less            |    0
 .../_example/date-time-picker.vue             |   74 +
 .../_example/skyline/date-time-picker.less    |    0
 .../_example/skyline/date-time-picker.vue     |   74 +
 .../date-time-picker/_example/steps/index.vue |   66 +
 .../date-time-picker/_example/time/index.vue  |  104 +
 .../_example/without-popup/index.vue          |   59 +
 .../_example/year-month-date/index.vue        |  136 ++
 .../_example/year-month/index.vue             |   78 +
 .../date-time-picker/date-time-picker.less    |   12 +
 .../date-time-picker/date-time-picker.vue     |  569 +++++
 .../date-time-picker/locale/dayjs.ts          |   81 +
 .../components/date-time-picker/locale/en.ts  |   12 +
 .../components/date-time-picker/locale/ja.ts  |   12 +
 .../components/date-time-picker/locale/ko.ts  |   12 +
 .../components/date-time-picker/locale/ru.ts  |   12 +
 .../components/date-time-picker/locale/tc.ts  |   12 +
 .../components/date-time-picker/locale/zh.ts  |   12 +
 .../components/date-time-picker/props.ts      |  114 +
 .../components/date-time-picker/type.ts       |  134 ++
 .../components/demo-header/demo-header.vue    |   60 +
 .../components/demo-header/index.less         |   25 +
 .../tdesign-uniapp/components/demo/demo.vue   |   97 +
 .../tdesign-uniapp/components/demo/index.less |   58 +
 .../components/dialog/README.en-US.md         |   71 +
 .../components/dialog/README.md               |  122 +
 .../components/dialog/_example/base/index.vue |  158 ++
 .../dialog/_example/button/index.vue          |   65 +
 .../dialog/_example/command/index.vue         |   50 +
 .../dialog/_example/confirm/index.vue         |  103 +
 .../components/dialog/_example/dialog.less    |    3 +
 .../components/dialog/_example/dialog.vue     |   97 +
 .../dialog/_example/skyline/dialog.less       |    3 +
 .../dialog/_example/skyline/dialog.vue        |  106 +
 .../dialog/_example/status/index.vue          |  189 ++
 .../dialog/_example/with-image/index.vue      |  231 ++
 .../dialog/_example/with-input/index.vue      |  130 +
 .../components/dialog/computed.js             |   15 +
 .../components/dialog/dialog.less             |  144 ++
 .../components/dialog/dialog.vue              |  425 ++++
 .../tdesign-uniapp/components/dialog/index.ts |  127 +
 .../tdesign-uniapp/components/dialog/props.ts |   94 +
 .../tdesign-uniapp/components/dialog/type.ts  |   97 +
 .../components/divider/README.en-US.md        |   41 +
 .../components/divider/README.md              |   65 +
 .../divider/_example/base/index.vue           |   70 +
 .../components/divider/_example/divider.less  |    3 +
 .../components/divider/_example/divider.vue   |   50 +
 .../divider/_example/skyline/divider.less     |    3 +
 .../divider/_example/skyline/divider.vue      |   58 +
 .../divider/_example/theme/index.vue          |   63 +
 .../components/divider/divider.less           |   79 +
 .../components/divider/divider.vue            |   79 +
 .../components/divider/props.ts               |   33 +
 .../tdesign-uniapp/components/divider/type.ts |   27 +
 .../components/draggable/draggable.less       |    5 +
 .../components/draggable/draggable.vue        |   92 +
 .../components/draggable/props.js             |   19 +
 .../components/drawer/README.en-US.md         |   55 +
 .../components/drawer/README.md               |   81 +
 .../components/drawer/_example/base/index.vue |   90 +
 .../components/drawer/_example/drawer.less    |    3 +
 .../components/drawer/_example/drawer.vue     |   67 +
 .../drawer/_example/footer/index.vue          |  115 +
 .../drawer/_example/icon-drawer/index.vue     |   95 +
 .../drawer/_example/skyline/drawer.less       |    2 +
 .../drawer/_example/skyline/drawer.vue        |   76 +
 .../drawer/_example/title/index.vue           |   85 +
 .../components/drawer/drawer.less             |   72 +
 .../components/drawer/drawer.vue              |  138 ++
 .../tdesign-uniapp/components/drawer/props.ts |   72 +
 .../tdesign-uniapp/components/drawer/type.ts  |   81 +
 .../components/dropdown-item/computed.js      |    6 +
 .../dropdown-item/dropdown-item.less          |  131 +
 .../dropdown-item/dropdown-item.vue           |  391 +++
 .../components/dropdown-item/props.ts         |   71 +
 .../components/dropdown-item/type.ts          |   76 +
 .../components/dropdown-menu/README.en-US.md  |  101 +
 .../components/dropdown-menu/README.md        |  131 +
 .../dropdown-menu/_example/dropdown-menu.less |    9 +
 .../dropdown-menu/_example/dropdown-menu.vue  |   78 +
 .../dropdown-menu/_example/multi/index.vue    |   95 +
 .../dropdown-menu/_example/single/index.vue   |   80 +
 .../dropdown-menu/_example/tree/index.vue     |   63 +
 .../dropdown-menu/dropdown-menu.less          |   65 +
 .../dropdown-menu/dropdown-menu.vue           |  174 ++
 .../components/dropdown-menu/props.ts         |   44 +
 .../components/dropdown-menu/type.ts          |   41 +
 .../components/empty/README.en-US.md          |   40 +
 .../tdesign-uniapp/components/empty/README.md |   70 +
 .../components/empty/_example/base/index.vue  |   24 +
 .../empty/_example/buttonEmpty/index.vue      |   39 +
 .../components/empty/_example/empty.less      |    3 +
 .../components/empty/_example/empty.vue       |   52 +
 .../empty/_example/imageEmpty/index.vue       |   36 +
 .../empty/_example/skyline/empty.less         |    3 +
 .../empty/_example/skyline/empty.vue          |   66 +
 .../components/empty/empty.less               |   37 +
 .../tdesign-uniapp/components/empty/empty.vue |  140 ++
 .../tdesign-uniapp/components/empty/props.ts  |   20 +
 .../tdesign-uniapp/components/empty/type.ts   |   20 +
 .../components/fab/README.en-US.md            |   37 +
 .../tdesign-uniapp/components/fab/README.md   |   81 +
 .../components/fab/_example/advance/index.vue |   36 +
 .../components/fab/_example/base/index.vue    |   27 +
 .../fab/_example/collapsible/index.vue        |  142 ++
 .../fab/_example/draggable/index.vue          |   41 +
 .../components/fab/_example/fab.less          |   14 +
 .../components/fab/_example/fab.vue           |  153 ++
 .../components/fab/_example/skyline/fab.less  |    7 +
 .../components/fab/_example/skyline/fab.vue   |  106 +
 .../tdesign-uniapp/components/fab/fab.less    |   15 +
 .../tdesign-uniapp/components/fab/fab.vue     |  239 ++
 .../tdesign-uniapp/components/fab/props.ts    |   54 +
 .../tdesign-uniapp/components/fab/type.ts     |   57 +
 .../components/footer/README.en-US.md         |   36 +
 .../components/footer/README.md               |   64 +
 .../components/footer/_example/base/index.vue |   24 +
 .../components/footer/_example/footer.less    |    3 +
 .../components/footer/_example/footer.vue     |   49 +
 .../components/footer/_example/link/index.vue |   57 +
 .../components/footer/_example/logo/index.vue |   40 +
 .../footer/_example/skyline/footer.less       |    3 +
 .../footer/_example/skyline/footer.vue        |   58 +
 .../components/footer/footer.less             |   79 +
 .../components/footer/footer.vue              |  117 +
 .../tdesign-uniapp/components/footer/props.ts |   23 +
 .../tdesign-uniapp/components/footer/type.ts  |   34 +
 .../components/form-item/README.en-US.md      |   30 +
 .../components/form-item/README.md            |   30 +
 .../components/form-item/form-item.less       |  158 ++
 .../components/form-item/form-item.vue        |  371 +++
 .../components/form-item/form-model.ts        |  198 ++
 .../components/form-item/props.ts             |   56 +
 .../components/form-item/type.ts              |    7 +
 .../components/form/README.en-US.md           |  135 ++
 .../tdesign-uniapp/components/form/README.md  |  144 ++
 .../components/form/_example/form.less        |   28 +
 .../components/form/_example/form.vue         |   91 +
 .../form/_example/horizontal/index.vue        |  623 +++++
 .../form/_example/vertical/index.vue          |  606 +++++
 .../components/form/form-item-props.ts        |   56 +
 .../tdesign-uniapp/components/form/form.less  |  261 ++
 .../tdesign-uniapp/components/form/form.vue   |  272 +++
 .../tdesign-uniapp/components/form/props.ts   |  100 +
 .../tdesign-uniapp/components/form/type.ts    |  376 +++
 .../tdesign-uniapp/components/global.d.ts     |   84 +
 .../components/grid-item/README.en-US.md      |   43 +
 .../components/grid-item/README.md            |   43 +
 .../components/grid-item/grid-item.less       |  157 ++
 .../components/grid-item/grid-item.vue        |  287 +++
 .../components/grid-item/props.ts             |   63 +
 .../components/grid-item/type.ts              |   56 +
 .../components/grid/README.en-US.md           |   94 +
 .../tdesign-uniapp/components/grid/README.md  |  145 ++
 .../components/grid/_example/badge/index.vue  |  115 +
 .../components/grid/_example/base/index.vue   |  124 +
 .../components/grid/_example/border/index.vue |   98 +
 .../components/grid/_example/card/index.vue   |  121 +
 .../grid/_example/description/index.vue       |   94 +
 .../components/grid/_example/grid.less        |   10 +
 .../components/grid/_example/grid.vue         |   82 +
 .../grid/_example/icon-grid/index.vue         |   82 +
 .../grid/_example/multiple/index.vue          |   94 +
 .../components/grid/_example/scroll/index.vue |   86 +
 .../tdesign-uniapp/components/grid/grid.less  |   20 +
 .../tdesign-uniapp/components/grid/grid.vue   |   94 +
 .../tdesign-uniapp/components/grid/props.ts   |   43 +
 .../tdesign-uniapp/components/grid/type.ts    |   43 +
 .../components/guide/README.en-US.md          |  109 +
 .../tdesign-uniapp/components/guide/README.md |  146 ++
 .../components/guide/_example/base/index.vue  |  156 ++
 .../guide/_example/content/index.vue          |  354 +++
 .../guide/_example/dialog/index.vue           |  192 ++
 .../components/guide/_example/guide.less      |    3 +
 .../components/guide/_example/guide.vue       |  265 ++
 .../guide/_example/multiple/index.vue         |  169 ++
 .../guide/_example/no-mask/index.vue          |  139 ++
 .../components/guide/content.vue              |  319 +++
 .../components/guide/guide.less               |  134 ++
 .../tdesign-uniapp/components/guide/guide.vue |  536 +++++
 .../tdesign-uniapp/components/guide/props.ts  |   98 +
 .../tdesign-uniapp/components/guide/type.ts   |  174 ++
 .../components/icon/README.en-US.md           |   32 +
 .../tdesign-uniapp/components/icon/README.md  |  109 +
 .../components/icon/_example/base/index.vue   |   69 +
 .../components/icon/_example/custom/index.vue |   97 +
 .../components/icon/_example/data.js          |    2 +
 .../components/icon/_example/icon.less        |    5 +
 .../components/icon/_example/icon.vue         |   47 +
 .../icon/_example/iconImage/index.vue         |   58 +
 .../components/icon/_example/iconfont.css     |   29 +
 .../icon/_example/skyline/icon.less           |    5 +
 .../components/icon/_example/skyline/icon.vue |   57 +
 .../tdesign-uniapp/components/icon/icon.less  |   50 +
 .../tdesign-uniapp/components/icon/icon.vue   |  121 +
 .../tdesign-uniapp/components/icon/props.ts   |   35 +
 .../tdesign-uniapp/components/icon/type.ts    |   32 +
 .../components/image-viewer/README.en-US.md   |   48 +
 .../components/image-viewer/README.md         |   77 +
 .../image-viewer/_example/base/index.vue      |   79 +
 .../image-viewer/_example/delete/index.vue    |   90 +
 .../image-viewer/_example/image-viewer.less   |    3 +
 .../image-viewer/_example/image-viewer.vue    |   50 +
 .../_example/skyline/image-viewer.vue         |    3 +
 .../components/image-viewer/computed.js       |    4 +
 .../components/image-viewer/image-viewer.less |  101 +
 .../components/image-viewer/image-viewer.vue  |  312 +++
 .../components/image-viewer/props.ts          |   65 +
 .../components/image-viewer/type.ts           |   70 +
 .../components/image/README.en-US.md          |   51 +
 .../tdesign-uniapp/components/image/README.md |   86 +
 .../components/image/_example/base/index.vue  |  117 +
 .../components/image/_example/image.less      |   57 +
 .../components/image/_example/image.vue       |   42 +
 .../image/_example/skyline/image.less         |    3 +
 .../image/_example/skyline/image.vue          |   53 +
 .../image/_example/status/index.vue           |  136 ++
 .../components/image/image.less               |   61 +
 .../tdesign-uniapp/components/image/image.vue |  200 ++
 .../tdesign-uniapp/components/image/props.ts  |   71 +
 .../tdesign-uniapp/components/image/type.ts   |   85 +
 .../components/indexes-anchor/README.en-US.md |   25 +
 .../components/indexes-anchor/README.md       |   29 +
 .../indexes-anchor/indexes-anchor.less        |   55 +
 .../indexes-anchor/indexes-anchor.vue         |   73 +
 .../components/indexes-anchor/props.ts        |   12 +
 .../components/indexes-anchor/type.ts         |   12 +
 .../components/indexes/README.en-US.md        |   78 +
 .../components/indexes/README.md              |  107 +
 .../indexes/_example/base/index.vue           |  158 ++
 .../indexes/_example/custom/index.vue         |  171 ++
 .../components/indexes/_example/indexes.less  |    7 +
 .../components/indexes/_example/indexes.vue   |   77 +
 .../components/indexes/computed.js            |    4 +
 .../indexes/indexes-anchor-props.ts           |   12 +
 .../components/indexes/indexes.less           |   72 +
 .../components/indexes/indexes.vue            |  377 +++
 .../components/indexes/props.ts               |   40 +
 .../tdesign-uniapp/components/indexes/type.ts |   38 +
 .../components/input/README.en-US.md          |  120 +
 .../tdesign-uniapp/components/input/README.md |  189 ++
 .../components/input/_example/align/index.vue |   34 +
 .../input/_example/banner/index.vue           |   31 +
 .../components/input/_example/base/index.vue  |   48 +
 .../input/_example/bordered/index.vue         |   44 +
 .../input/_example/custom/index.vue           |   35 +
 .../components/input/_example/input.less      |    8 +
 .../components/input/_example/input.vue       |  111 +
 .../components/input/_example/label/index.vue |   24 +
 .../input/_example/layout/index.vue           |   26 +
 .../input/_example/maxlength/index.vue        |   37 +
 .../input/_example/prefix/index.vue           |   30 +
 .../input/_example/skyline/input.less         |    8 +
 .../input/_example/skyline/input.vue          |  121 +
 .../input/_example/special/index.vue          |  148 ++
 .../input/_example/status/index.vue           |   50 +
 .../input/_example/suffix/index.vue           |   60 +
 .../components/input/computed.js              |   13 +
 .../components/input/input.less               |  206 ++
 .../tdesign-uniapp/components/input/input.vue |  388 +++
 .../tdesign-uniapp/components/input/props.ts  |  247 ++
 .../tdesign-uniapp/components/input/type.ts   |  237 ++
 .../tdesign-uniapp/components/input/utils.js  |   38 +
 .../components/link/README.en-US.md           |   67 +
 .../tdesign-uniapp/components/link/README.md  |  115 +
 .../link/_example/content/index.vue           |   38 +
 .../link/_example/disabled/index.vue          |   75 +
 .../components/link/_example/link.less        |    0
 .../components/link/_example/link.vue         |   83 +
 .../components/link/_example/prefix/index.vue |   40 +
 .../components/link/_example/size/index.vue   |   47 +
 .../link/_example/skyline/link.less           |    0
 .../components/link/_example/skyline/link.vue |   22 +
 .../components/link/_example/suffix/index.vue |   40 +
 .../components/link/_example/theme/index.vue  |   69 +
 .../link/_example/underline/index.vue         |   40 +
 .../tdesign-uniapp/components/link/link.less  |  123 +
 .../tdesign-uniapp/components/link/link.vue   |  175 ++
 .../tdesign-uniapp/components/link/props.ts   |   65 +
 .../tdesign-uniapp/components/link/type.ts    |   62 +
 .../components/loading/README.en-US.md        |   50 +
 .../components/loading/README.md              |   97 +
 .../loading/_example/base/index.vue           |   65 +
 .../loading/_example/duration/index.vue       |   62 +
 .../loading/_example/horizontal/index.vue     |   50 +
 .../components/loading/_example/loading.less  |    3 +
 .../components/loading/_example/loading.vue   |  100 +
 .../loading/_example/size/index.vue           |   61 +
 .../loading/_example/skyline/loading.less     |    3 +
 .../loading/_example/skyline/loading.vue      |   22 +
 .../loading/_example/text/index.vue           |   24 +
 .../loading/_example/vertical/index.vue       |   49 +
 .../components/loading/loading.less           |  215 ++
 .../components/loading/loading.vue            |  157 ++
 .../components/loading/props.ts               |   68 +
 .../tdesign-uniapp/components/loading/type.ts |   70 +
 .../components/message-item/computed.js       |   23 +
 .../components/message-item/index.ts          |   46 +
 .../components/message-item/message-item.less |   98 +
 .../components/message-item/message-item.vue  |  349 +++
 .../components/message/README.en-US.md        |   69 +
 .../components/message/README.md              |  105 +
 .../message/_example/base/index.vue           |  186 ++
 .../components/message/_example/message.less  |    5 +
 .../components/message/_example/message.vue   |   48 +
 .../message/_example/theme/index.vue          |  109 +
 .../components/message/config.ts              |   10 +
 .../components/message/index.ts               |   45 +
 .../components/message/message.interface.ts   |   28 +
 .../components/message/message.vue            |  275 +++
 .../components/message/props.ts               |  101 +
 .../tdesign-uniapp/components/message/type.ts |  101 +
 .../components/mixins/page-scroll.js          |  115 +
 .../components/mixins/skyline.js              |   12 +
 .../components/mixins/theme-change.js         |   37 +
 .../tdesign-uniapp/components/mixins/touch.js |   29 +
 .../components/mixins/transition.js           |  133 +
 .../components/mixins/using-custom-navbar.js  |   38 +
 .../components/navbar/README.en-US.md         |   73 +
 .../components/navbar/README.md               |  118 +
 .../navbar/_example/back-home/index.vue       |  101 +
 .../components/navbar/_example/base/index.vue |   43 +
 .../navbar/_example/custom-color/index.vue    |   31 +
 .../components/navbar/_example/img/index.vue  |   47 +
 .../navbar/_example/left-title/index.vue      |  102 +
 .../components/navbar/_example/navbar.less    |   22 +
 .../components/navbar/_example/navbar.vue     |   66 +
 .../navbar/_example/search/index.vue          |   48 +
 .../navbar/_example/skyline/navbar.less       |   21 +
 .../navbar/_example/skyline/navbar.vue        |   79 +
 .../components/navbar/navbar.less             |  156 ++
 .../components/navbar/navbar.vue              |  277 +++
 .../tdesign-uniapp/components/navbar/props.ts |   63 +
 .../tdesign-uniapp/components/navbar/type.ts  |   62 +
 .../components/notice-bar/README.en-US.md     |   62 +
 .../components/notice-bar/README.md           |  116 +
 .../notice-bar/_example/base/index.vue        |   28 +
 .../notice-bar/_example/custom/index.vue      |   39 +
 .../_example/customization/index.vue          |   61 +
 .../notice-bar/_example/event/index.vue       |   67 +
 .../notice-bar/_example/iconDemo/index.vue    |   37 +
 .../notice-bar/_example/notice-bar.less       |    7 +
 .../notice-bar/_example/notice-bar.vue        |   86 +
 .../notice-bar/_example/scrolling/index.vue   |   58 +
 .../notice-bar/_example/suffixIcon/index.vue  |   33 +
 .../notice-bar/_example/theme/index.vue       |   39 +
 .../components/notice-bar/notice-bar.less     |  115 +
 .../components/notice-bar/notice-bar.vue      |  326 +++
 .../components/notice-bar/props.ts            |   71 +
 .../components/notice-bar/type.ts             |   71 +
 .../components/npm/dayjs/esm/constant.js      |   25 +
 .../components/npm/dayjs/esm/index.js         |  541 +++++
 .../components/npm/dayjs/esm/locale/en.js     |   12 +
 .../components/npm/dayjs/esm/locale/ja.js     |   45 +
 .../components/npm/dayjs/esm/locale/ko.js     |   45 +
 .../components/npm/dayjs/esm/locale/ru.js     |   99 +
 .../components/npm/dayjs/esm/locale/zh-cn.js  |   67 +
 .../components/npm/dayjs/esm/locale/zh-tw.js  |   65 +
 .../npm/dayjs/esm/plugin/localeData/index.js  |  114 +
 .../dayjs/esm/plugin/localizedFormat/index.js |   20 +
 .../dayjs/esm/plugin/localizedFormat/utils.js |   20 +
 .../components/npm/dayjs/esm/utils.js         |   58 +
 .../npm/tinycolor2/esm/tinycolor.js           | 1180 +++++++++
 .../components/overlay/README.en-US.md        |   34 +
 .../components/overlay/README.md              |   54 +
 .../overlay/_example/base/index.vue           |   47 +
 .../components/overlay/_example/overlay.less  |    3 +
 .../components/overlay/_example/overlay.vue   |   42 +
 .../overlay/_example/skyline/overlay.less     |    3 +
 .../overlay/_example/skyline/overlay.vue      |   51 +
 .../components/overlay/overlay.less           |   25 +
 .../components/overlay/overlay.vue            |  105 +
 .../components/overlay/props.ts               |   37 +
 .../tdesign-uniapp/components/overlay/type.ts |   42 +
 .../tdesign-uniapp/components/package.json    |  499 ++++
 .../components/picker-item/README.en-US.md    |   16 +
 .../components/picker-item/README.md          |   16 +
 .../components/picker-item/picker-item.less   |   50 +
 .../components/picker-item/picker-item.vue    |  232 ++
 .../components/picker-item/props.ts           |   18 +
 .../components/picker-item/type.ts            |   23 +
 .../components/picker/README.en-US.md         |   81 +
 .../components/picker/README.md               |  116 +
 .../components/picker/_example/area/index.vue |  212 ++
 .../components/picker/_example/base/index.vue |  216 ++
 .../components/picker/_example/picker.less    |    0
 .../components/picker/_example/picker.vue     |   56 +
 .../picker/_example/skyline/picker.less       |    0
 .../picker/_example/skyline/picker.vue        |   65 +
 .../picker/_example/with-title/index.vue      |  133 +
 .../picker/_example/without-popup/index.vue   |   84 +
 .../components/picker/picker.less             |  108 +
 .../components/picker/picker.vue              |  274 +++
 .../tdesign-uniapp/components/picker/props.ts |   90 +
 .../tdesign-uniapp/components/picker/type.ts  |  109 +
 .../components/popup/README.en-US.md          |   53 +
 .../tdesign-uniapp/components/popup/README.md |   82 +
 .../components/popup/_example/base/index.vue  |  113 +
 .../popup/_example/custom-close/index.vue     |  106 +
 .../components/popup/_example/popup.less      |    4 +
 .../components/popup/_example/popup.vue       |   72 +
 .../popup/_example/skyline/popup.less         |    2 +
 .../popup/_example/skyline/popup.vue          |   63 +
 .../popup/_example/with-title/index.vue       |  124 +
 .../components/popup/computed.js              |   11 +
 .../components/popup/popup.less               |  104 +
 .../tdesign-uniapp/components/popup/popup.vue |  138 ++
 .../tdesign-uniapp/components/popup/props.ts  |   67 +
 .../tdesign-uniapp/components/popup/type.ts   |   72 +
 .../components/progress/README.en-US.md       |   53 +
 .../components/progress/README.md             |   88 +
 .../progress/_example/base/index.vue          |   70 +
 .../progress/_example/circle/index.vue        |   49 +
 .../progress/_example/custom/index.vue        |   40 +
 .../progress/_example/line/index.vue          |   38 +
 .../progress/_example/plump/index.vue         |   45 +
 .../progress/_example/progress.less           |    7 +
 .../components/progress/_example/progress.vue |   80 +
 .../progress/_example/skyline/progress.less   |    7 +
 .../progress/_example/skyline/progress.vue    |   22 +
 .../progress/_example/transition/index.vue    |   61 +
 .../components/progress/computed.js           |   81 +
 .../components/progress/progress.less         |  218 ++
 .../components/progress/progress.vue          |  259 ++
 .../components/progress/props.ts              |   55 +
 .../components/progress/type.ts               |   50 +
 .../components/progress/utils.ts              |   22 +
 .../pull-down-refresh/README.en-US.md         |   60 +
 .../components/pull-down-refresh/README.md    |   83 +
 .../pull-down-refresh/_example/base/index.vue |  202 ++
 .../_example/pull-down-refresh.less           |    3 +
 .../_example/pull-down-refresh.vue            |   29 +
 .../_example/skyline/pull-down-refresh.vue    |   30 +
 .../components/pull-down-refresh/props.ts     |  112 +
 .../pull-down-refresh/pull-down-refresh.less  |   38 +
 .../pull-down-refresh/pull-down-refresh.vue   |  366 +++
 .../components/pull-down-refresh/type.ts      |  118 +
 .../components/qrcode/README.en-US.md         |   40 +
 .../components/qrcode/README.md               |   97 +
 .../qrcode/_example/base/index.less           |    1 +
 .../components/qrcode/_example/base/index.vue |   22 +
 .../qrcode/_example/borderless/index.less     |    1 +
 .../qrcode/_example/borderless/index.vue      |   21 +
 .../qrcode/_example/color/index.less          |    9 +
 .../qrcode/_example/color/index.vue           |   37 +
 .../qrcode/_example/icon/index.less           |    1 +
 .../components/qrcode/_example/icon/index.vue |   21 +
 .../qrcode/_example/level/index.less          |    3 +
 .../qrcode/_example/level/index.vue           |   56 +
 .../components/qrcode/_example/qrcode.less    |    3 +
 .../components/qrcode/_example/qrcode.vue     |  101 +
 .../qrcode/_example/size/index.less           |   35 +
 .../components/qrcode/_example/size/index.vue |   62 +
 .../qrcode/_example/status/index.less         |    9 +
 .../qrcode/_example/status/index.vue          |   56 +
 .../qrcode/components/qrcode-canvas/props.ts  |   48 +
 .../qrcode-canvas/qrcode-canvas.less          |   12 +
 .../qrcode-canvas/qrcode-canvas.vue           |  413 ++++
 .../qrcode/components/qrcode-canvas/type.ts   |   22 +
 .../qrcode/components/qrcode-status/props.ts  |   22 +
 .../qrcode-status/qrcode-status.less          |   41 +
 .../qrcode-status/qrcode-status.vue           |   94 +
 .../qrcode/components/qrcode-status/type.ts   |   25 +
 .../components/qrcode/hooks/useQRCode.ts      |   51 +
 .../tdesign-uniapp/components/qrcode/props.ts |   66 +
 .../components/qrcode/qrcode.less             |   42 +
 .../components/qrcode/qrcode.vue              |  135 ++
 .../tdesign-uniapp/components/qrcode/type.ts  |   66 +
 .../components/radio-group/props.ts           |   68 +
 .../components/radio-group/radio-group.vue    |  191 ++
 .../components/radio-group/type.ts            |   79 +
 .../components/radio/README.en-US.md          |  105 +
 .../tdesign-uniapp/components/radio/README.md |  149 ++
 .../components/radio/_example/align/index.vue |   52 +
 .../components/radio/_example/base/index.vue  |   57 +
 .../components/radio/_example/card/index.vue  |   66 +
 .../radio/_example/horizontal/index.vue       |   73 +
 .../components/radio/_example/radio.less      |   10 +
 .../components/radio/_example/radio.vue       |   98 +
 .../radio/_example/skyline/radio.less         |    0
 .../radio/_example/skyline/radio.vue          |   22 +
 .../radio/_example/special/index.vue          |  181 ++
 .../radio/_example/status/index.vue           |   42 +
 .../components/radio/_example/theme/index.vue |   48 +
 .../tdesign-uniapp/components/radio/props.ts  |   86 +
 .../components/radio/radio.less               |  235 ++
 .../tdesign-uniapp/components/radio/radio.vue |  227 ++
 .../tdesign-uniapp/components/radio/type.ts   |   89 +
 .../components/rate/README.en-US.md           |   50 +
 .../tdesign-uniapp/components/rate/README.md  |  107 +
 .../components/rate/_example/action/index.vue |   75 +
 .../components/rate/_example/base/index.vue   |   57 +
 .../components/rate/_example/color/index.vue  |   66 +
 .../components/rate/_example/count/index.vue  |   57 +
 .../rate/_example/custom-prefix/index.vue     |   58 +
 .../components/rate/_example/custom/index.vue |   57 +
 .../components/rate/_example/iconfont.css     |   29 +
 .../components/rate/_example/rate.less        |    1 +
 .../components/rate/_example/rate.vue         |   98 +
 .../rate/_example/show-text/index.vue         |   87 +
 .../components/rate/_example/size/index.vue   |   70 +
 .../rate/_example/special/index.vue           |   61 +
 .../components/rate/computed.js               |   66 +
 .../tdesign-uniapp/components/rate/props.ts   |   85 +
 .../tdesign-uniapp/components/rate/rate.less  |  101 +
 .../tdesign-uniapp/components/rate/rate.vue   |  276 +++
 .../tdesign-uniapp/components/rate/type.ts    |   79 +
 .../components/result/README.en-US.md         |   49 +
 .../components/result/README.md               |   90 +
 .../result/_example/custom/index.vue          |   42 +
 .../result/_example/description/index.vue     |   58 +
 .../result/_example/result-page.less          |    7 +
 .../result/_example/result-page.vue           |   56 +
 .../components/result/_example/result.less    |    7 +
 .../components/result/_example/result.vue     |   72 +
 .../result/_example/skyline/result.less       |    7 +
 .../result/_example/skyline/result.vue        |   81 +
 .../result/_example/theme/index.vue           |   53 +
 .../tdesign-uniapp/components/result/props.ts |   36 +
 .../components/result/result.less             |   70 +
 .../components/result/result.vue              |  128 +
 .../tdesign-uniapp/components/result/type.ts  |   31 +
 .../tdesign-uniapp/components/row/computed.js |   13 +
 .../tdesign-uniapp/components/row/props.ts    |   12 +
 .../tdesign-uniapp/components/row/row.less    |    8 +
 .../tdesign-uniapp/components/row/row.vue     |   63 +
 .../tdesign-uniapp/components/row/type.ts     |   12 +
 .../components/script/postinstall.js          |   46 +
 .../components/scroll-view/scroll-view.vue    |   52 +
 .../components/search/README.en-US.md         |   87 +
 .../components/search/README.md               |  125 +
 .../search/_example/action/index.vue          |   52 +
 .../components/search/_example/base/index.vue |   48 +
 .../search/_example/maxlength/index.vue       |   36 +
 .../search/_example/other/index.vue           |   36 +
 .../components/search/_example/search.less    |    0
 .../components/search/_example/search.vue     |   66 +
 .../search/_example/shape/index.vue           |   44 +
 .../search/_example/skyline/search.less       |    0
 .../search/_example/skyline/search.vue        |   71 +
 .../components/search/computed.js             |    3 +
 .../tdesign-uniapp/components/search/props.ts |  166 ++
 .../components/search/search.less             |  114 +
 .../components/search/search.vue              |  284 +++
 .../tdesign-uniapp/components/search/type.ts  |  160 ++
 .../components/side-bar-item/props.ts         |   27 +
 .../side-bar-item/side-bar-item.less          |   88 +
 .../side-bar-item/side-bar-item.vue           |  157 ++
 .../components/side-bar-item/type.ts          |   32 +
 .../components/side-bar/README.en-US.md       |   60 +
 .../components/side-bar/README.md             |   91 +
 .../side-bar/_example/base/index.vue          |  256 ++
 .../side-bar/_example/custom/index.vue        |  257 ++
 .../side-bar/_example/side-bar.less           |    7 +
 .../components/side-bar/_example/side-bar.vue |  100 +
 .../side-bar/_example/switch/index.vue        |  238 ++
 .../side-bar/_example/with-icon/index.vue     |  258 ++
 .../components/side-bar/props.ts              |   26 +
 .../side-bar/side-bar-item-props.ts           |   27 +
 .../components/side-bar/side-bar.less         |   22 +
 .../components/side-bar/side-bar.vue          |   81 +
 .../components/side-bar/type.ts               |   24 +
 .../components/skeleton/README.en-US.md       |   45 +
 .../components/skeleton/README.md             |   83 +
 .../skeleton/_example/animation/index.vue     |   66 +
 .../skeleton/_example/cell-group/index.vue    |   79 +
 .../skeleton/_example/grid/index.vue          |   85 +
 .../skeleton/_example/image-group/index.vue   |   44 +
 .../skeleton/_example/skeleton.less           |    3 +
 .../components/skeleton/_example/skeleton.vue |   78 +
 .../skeleton/_example/skyline/skeleton.less   |    3 +
 .../skeleton/_example/skyline/skeleton.vue    |   86 +
 .../skeleton/_example/theme/index.vue         |   67 +
 .../components/skeleton/props.ts              |   41 +
 .../components/skeleton/skeleton.less         |  117 +
 .../components/skeleton/skeleton.vue          |  210 ++
 .../components/skeleton/type.ts               |   44 +
 .../components/slider/README.en-US.md         |   64 +
 .../components/slider/README.md               |  128 +
 .../components/slider/_example/base/index.vue |   33 +
 .../slider/_example/capsule/index.vue         |   76 +
 .../slider/_example/disabled/index.vue        |   58 +
 .../slider/_example/label/index.vue           |   55 +
 .../components/slider/_example/max/index.vue  |   44 +
 .../slider/_example/range/index.vue           |   37 +
 .../slider/_example/skyline/slider.less       |   18 +
 .../slider/_example/skyline/slider.vue        |   97 +
 .../components/slider/_example/slider.less    |   18 +
 .../components/slider/_example/slider.vue     |   88 +
 .../components/slider/_example/step/index.vue |   63 +
 .../slider/_example/vertical/index.vue        |   95 +
 .../components/slider/computed.js             |    9 +
 .../tdesign-uniapp/components/slider/props.ts |   79 +
 .../components/slider/slider.less             |  312 +++
 .../components/slider/slider.vue              |  716 ++++++
 .../tdesign-uniapp/components/slider/tool.ts  |   43 +
 .../tdesign-uniapp/components/slider/type.ts  |   81 +
 .../components/step-item/computed.js          |    4 +
 .../components/step-item/props.ts             |   36 +
 .../components/step-item/step-item.less       |  224 ++
 .../components/step-item/step-item.vue        |  175 ++
 .../components/step-item/type.ts              |   33 +
 .../components/stepper/README.en-US.md        |   49 +
 .../components/stepper/README.md              |   90 +
 .../stepper/_example/base/index.vue           |   28 +
 .../stepper/_example/min-max/index.vue        |   41 +
 .../stepper/_example/size/index.vue           |   50 +
 .../stepper/_example/skyline/stepper.less     |    0
 .../stepper/_example/skyline/stepper.vue      |   76 +
 .../stepper/_example/status/index.vue         |   28 +
 .../components/stepper/_example/stepper.less  |    0
 .../components/stepper/_example/stepper.vue   |   66 +
 .../stepper/_example/theme/index.vue          |   35 +
 .../components/stepper/props.ts               |   88 +
 .../components/stepper/stepper.less           |  159 ++
 .../components/stepper/stepper.vue            |  223 ++
 .../tdesign-uniapp/components/stepper/type.ts |   79 +
 .../components/steps/README.en-US.md          |   99 +
 .../tdesign-uniapp/components/steps/README.md |  157 ++
 .../steps/_example/horizontal/index.vue       |  103 +
 .../steps/_example/skyline/steps.less         |    0
 .../steps/_example/skyline/steps.vue          |   22 +
 .../steps/_example/special/index.vue          |  103 +
 .../steps/_example/status/index.vue           |   94 +
 .../components/steps/_example/steps.less      |   12 +
 .../components/steps/_example/steps.vue       |   63 +
 .../steps/_example/vertical/index.vue         |  140 ++
 .../tdesign-uniapp/components/steps/props.ts  |   63 +
 .../components/steps/steps.less               |   32 +
 .../tdesign-uniapp/components/steps/steps.vue |  122 +
 .../tdesign-uniapp/components/steps/type.ts   |   44 +
 .../components/sticky/README.en-US.md         |   32 +
 .../components/sticky/README.md               |   66 +
 .../components/sticky/_example/base/index.vue |   44 +
 .../sticky/_example/container/index.vue       |   77 +
 .../sticky/_example/offset/index.vue          |   45 +
 .../components/sticky/_example/sticky.less    |    3 +
 .../components/sticky/_example/sticky.vue     |   81 +
 .../tdesign-uniapp/components/sticky/props.ts |   30 +
 .../components/sticky/sticky.less             |    5 +
 .../components/sticky/sticky.vue              |  144 ++
 .../tdesign-uniapp/components/sticky/type.ts  |   31 +
 .../components/swipe-cell/README.en-US.md     |   29 +
 .../components/swipe-cell/README.md           |   66 +
 .../swipe-cell/_example/double/index.vue      |   69 +
 .../swipe-cell/_example/icon/index.vue        |  177 ++
 .../swipe-cell/_example/left/index.vue        |  164 ++
 .../swipe-cell/_example/right/index.vue       |   58 +
 .../swipe-cell/_example/swipe-cell.less       |   20 +
 .../swipe-cell/_example/swipe-cell.vue        |   55 +
 .../components/swipe-cell/computed.js         |  186 ++
 .../components/swipe-cell/props.ts            |   39 +
 .../components/swipe-cell/swipe-cell.less     |   40 +
 .../components/swipe-cell/swipe-cell.vue      |  235 ++
 .../components/swipe-cell/type.ts             |   48 +
 .../components/swiper-nav/props.ts            |   49 +
 .../components/swiper-nav/swiper-nav.less     |  173 ++
 .../components/swiper-nav/swiper-nav.vue      |   93 +
 .../components/swiper-nav/type.ts             |   45 +
 .../components/swiper/README.en-US.md         |   89 +
 .../components/swiper/README.md               |  139 ++
 .../components/swiper/_example/base/index.vue |   51 +
 .../swiper/_example/cards/index.vue           |   86 +
 .../swiper/_example/custom/index.vue          |   57 +
 .../swiper/_example/fraction/index.vue        |   45 +
 .../swiper/_example/nav-btn/index.vue         |   68 +
 .../swiper/_example/skyline/swiper.vue        |    3 +
 .../components/swiper/_example/swiper.less    |    3 +
 .../components/swiper/_example/swiper.vue     |   86 +
 .../swiper/_example/vertical/index.vue        |  184 ++
 .../components/swiper/computed.js             |   29 +
 .../tdesign-uniapp/components/swiper/props.ts |  117 +
 .../components/swiper/swiper.less             |   30 +
 .../components/swiper/swiper.vue              |  197 ++
 .../tdesign-uniapp/components/swiper/type.ts  |  112 +
 .../components/switch/README.en-US.md         |   70 +
 .../components/switch/README.md               |  104 +
 .../components/switch/_example/base/index.vue |   37 +
 .../switch/_example/color/index.vue           |   49 +
 .../switch/_example/label/index.vue           |   53 +
 .../components/switch/_example/size/index.vue |   58 +
 .../switch/_example/skyline/switch.less       |    3 +
 .../switch/_example/skyline/switch.vue        |   73 +
 .../switch/_example/status/index.vue          |   87 +
 .../components/switch/_example/switch.less    |    3 +
 .../components/switch/_example/switch.vue     |   67 +
 .../tdesign-uniapp/components/switch/props.ts |   53 +
 .../components/switch/switch.less             |  200 ++
 .../components/switch/switch.vue              |  122 +
 .../tdesign-uniapp/components/switch/type.ts  |   51 +
 .../components/tab-bar-item/props.ts          |   25 +
 .../components/tab-bar-item/tab-bar-item.less |  152 ++
 .../components/tab-bar-item/tab-bar-item.vue  |  222 ++
 .../components/tab-bar-item/type.ts           |   32 +
 .../components/tab-bar/README.en-US.md        |   64 +
 .../components/tab-bar/README.md              |  110 +
 .../tab-bar/_example/badge/index.vue          |  160 ++
 .../tab-bar/_example/base/index.vue           |   66 +
 .../tab-bar/_example/custom/index.vue         |   70 +
 .../tab-bar/_example/icon-only/index.vue      |   65 +
 .../tab-bar/_example/round/index.vue          |   66 +
 .../tab-bar/_example/skyline/tab-bar.less     |   16 +
 .../tab-bar/_example/skyline/tab-bar.vue      |  105 +
 .../components/tab-bar/_example/sub/index.vue |   71 +
 .../components/tab-bar/_example/tab-bar.less  |   16 +
 .../components/tab-bar/_example/tab-bar.vue   |   87 +
 .../tab-bar/_example/text-only/index.vue      |   61 +
 .../components/tab-bar/props.ts               |   60 +
 .../components/tab-bar/tab-bar.less           |   47 +
 .../components/tab-bar/tab-bar.vue            |  113 +
 .../tdesign-uniapp/components/tab-bar/type.ts |   50 +
 .../components/tab-panel/props.ts             |   34 +
 .../components/tab-panel/tab-panel.less       |   19 +
 .../components/tab-panel/tab-panel.vue        |  100 +
 .../components/tab-panel/type.ts              |   42 +
 .../components/tabs/README.en-US.md           |   89 +
 .../tdesign-uniapp/components/tabs/README.md  |  198 ++
 .../components/tabs/_example/base/index.vue   |  145 ++
 .../components/tabs/_example/scroll/index.vue |   42 +
 .../components/tabs/_example/size/index.vue   |   74 +
 .../components/tabs/_example/status/index.vue |   51 +
 .../components/tabs/_example/tabs.less        |    7 +
 .../components/tabs/_example/tabs.vue         |  105 +
 .../components/tabs/_example/theme/index.vue  |   47 +
 .../tabs/_example/with-badge/index.vue        |   38 +
 .../tabs/_example/with-content/index.vue      |   87 +
 .../tabs/_example/with-icon/index.vue         |   31 +
 .../components/tabs/computed.js               |   26 +
 .../tdesign-uniapp/components/tabs/props.ts   |   80 +
 .../tdesign-uniapp/components/tabs/tabs.less  |  237 ++
 .../tdesign-uniapp/components/tabs/tabs.vue   |  494 ++++
 .../tdesign-uniapp/components/tabs/type.ts    |   77 +
 .../components/tag/README.en-US.md            |  163 ++
 .../tdesign-uniapp/components/tag/README.md   |  201 ++
 .../tag/_example/checkable/index.vue          |   72 +
 .../tag/_example/closable/index.vue           |   54 +
 .../components/tag/_example/size/index.vue    |   98 +
 .../components/tag/_example/skyline/tag.less  |    3 +
 .../components/tag/_example/skyline/tag.vue   |   70 +
 .../components/tag/_example/tag.less          |    3 +
 .../components/tag/_example/tag.vue           |   61 +
 .../components/tag/_example/theme/index.vue   |  172 ++
 .../components/tag/_example/type/index.vue    |  123 +
 .../tdesign-uniapp/components/tag/props.ts    |   70 +
 .../tdesign-uniapp/components/tag/tag.less    |  210 ++
 .../tdesign-uniapp/components/tag/tag.vue     |  161 ++
 .../tdesign-uniapp/components/tag/type.ts     |   54 +
 .../tdesign-uniapp/tdesign-uniapp.vue         |   11 +
 .../components/textarea/README.en-US.md       |   78 +
 .../components/textarea/README.md             |  132 +
 .../textarea/_example/autosize/index.vue      |   36 +
 .../textarea/_example/base/index.vue          |   31 +
 .../textarea/_example/card/index.vue          |   42 +
 .../textarea/_example/custom/index.vue        |   54 +
 .../textarea/_example/disabled/index.vue      |   34 +
 .../textarea/_example/label/index.vue         |   32 +
 .../textarea/_example/maxcharacter/index.vue  |   34 +
 .../textarea/_example/maxlength/index.vue     |   34 +
 .../textarea/_example/skyline/textarea.less   |    0
 .../textarea/_example/skyline/textarea.vue    |   22 +
 .../textarea/_example/textarea.less           |    0
 .../components/textarea/_example/textarea.vue |   96 +
 .../components/textarea/computed.js           |   14 +
 .../components/textarea/props.ts              |  152 ++
 .../components/textarea/textarea.less         |  110 +
 .../components/textarea/textarea.vue          |  200 ++
 .../components/textarea/type.ts               |  167 ++
 .../components/toast/README.en-US.md          |   51 +
 .../tdesign-uniapp/components/toast/README.md |   78 +
 .../components/toast/_example/base/index.vue  |  119 +
 .../components/toast/_example/close/index.vue |   77 +
 .../components/toast/_example/cover/index.vue |   53 +
 .../toast/_example/skyline/toast.less         |   15 +
 .../toast/_example/skyline/toast.vue          |   74 +
 .../components/toast/_example/theme/index.vue |   85 +
 .../components/toast/_example/toast.less      |    9 +
 .../components/toast/_example/toast.vue       |   72 +
 .../tdesign-uniapp/components/toast/index.ts  |   45 +
 .../tdesign-uniapp/components/toast/props.ts  |   68 +
 .../components/toast/toast.less               |   95 +
 .../tdesign-uniapp/components/toast/toast.vue |  212 ++
 .../tdesign-uniapp/components/toast/type.ts   |   64 +
 .../components/transition/README.en-US.md     |   13 +
 .../components/transition/README.md           |   45 +
 .../components/transition/_example/api.md     |   10 +
 .../transition/_example/appear/index.vue      |   50 +
 .../transition/_example/base/index.vue        |   51 +
 .../transition/_example/custom/index.less     |   21 +
 .../transition/_example/custom/index.vue      |   49 +
 .../transition/_example/destroy/index.vue     |   48 +
 .../transition/_example/transition.less       |   28 +
 .../transition/_example/transition.vue        |   72 +
 .../components/transition/props.js            |   22 +
 .../components/transition/transition.less     |   18 +
 .../components/transition/transition.vue      |   51 +
 .../components/tree-select/README.en-US.md    |   48 +
 .../components/tree-select/README.md          |   78 +
 .../tree-select/_example/base/index.vue       |   49 +
 .../tree-select/_example/multiple/index.vue   |   50 +
 .../tree-select/_example/normal/index.vue     |  145 ++
 .../tree-select/_example/tree-select.vue      |   53 +
 .../components/tree-select/computed.js        |    6 +
 .../components/tree-select/props.ts           |   42 +
 .../components/tree-select/tree-select.less   |   63 +
 .../components/tree-select/tree-select.vue    |  318 +++
 .../components/tree-select/type.ts            |   49 +
 .../components/types/action-sheet.d.ts        |    7 +
 .../components/types/avatar-group.d.ts        |    7 +
 .../components/types/avatar.d.ts              |    7 +
 .../components/types/back-top.d.ts            |    7 +
 .../components/types/badge.d.ts               |    7 +
 .../components/types/button.d.ts              |    7 +
 .../components/types/calendar.d.ts            |    7 +
 .../components/types/cascader.d.ts            |    7 +
 .../components/types/cell-group.d.ts          |    7 +
 .../tdesign-uniapp/components/types/cell.d.ts |    7 +
 .../components/types/check-tag.d.ts           |    7 +
 .../components/types/checkbox-group.d.ts      |    7 +
 .../components/types/checkbox.d.ts            |    7 +
 .../tdesign-uniapp/components/types/col.d.ts  |    7 +
 .../components/types/collapse-panel.d.ts      |    7 +
 .../components/types/collapse.d.ts            |    7 +
 .../components/types/color-picker.d.ts        |    7 +
 .../components/types/count-down.d.ts          |    7 +
 .../components/types/date-time-picker.d.ts    |    7 +
 .../components/types/dialog.d.ts              |    7 +
 .../components/types/divider.d.ts             |    7 +
 .../components/types/drawer.d.ts              |    7 +
 .../components/types/dropdown-item.d.ts       |    7 +
 .../components/types/dropdown-menu.d.ts       |    7 +
 .../components/types/empty.d.ts               |    7 +
 .../tdesign-uniapp/components/types/fab.d.ts  |    7 +
 .../components/types/footer.d.ts              |    7 +
 .../components/types/form-item.d.ts           |    7 +
 .../tdesign-uniapp/components/types/form.d.ts |    7 +
 .../components/types/grid-item.d.ts           |    7 +
 .../tdesign-uniapp/components/types/grid.d.ts |    7 +
 .../components/types/guide.d.ts               |    7 +
 .../tdesign-uniapp/components/types/icon.d.ts |    7 +
 .../components/types/image-viewer.d.ts        |    7 +
 .../components/types/image.d.ts               |    7 +
 .../components/types/index.d.ts               |   77 +
 .../components/types/indexes-anchor.d.ts      |    7 +
 .../components/types/indexes.d.ts             |    7 +
 .../components/types/input.d.ts               |    7 +
 .../tdesign-uniapp/components/types/link.d.ts |    7 +
 .../components/types/loading.d.ts             |    7 +
 .../components/types/message.d.ts             |    7 +
 .../components/types/navbar.d.ts              |    7 +
 .../components/types/notice-bar.d.ts          |    7 +
 .../components/types/overlay.d.ts             |    7 +
 .../components/types/picker-item.d.ts         |    7 +
 .../components/types/picker.d.ts              |    7 +
 .../components/types/popup.d.ts               |    7 +
 .../components/types/progress.d.ts            |    7 +
 .../components/types/pull-down-refresh.d.ts   |    7 +
 .../components/types/qrcode.d.ts              |    7 +
 .../components/types/radio-group.d.ts         |    7 +
 .../components/types/radio.d.ts               |    7 +
 .../tdesign-uniapp/components/types/rate.d.ts |    7 +
 .../components/types/result.d.ts              |    7 +
 .../tdesign-uniapp/components/types/row.d.ts  |    7 +
 .../components/types/search.d.ts              |    7 +
 .../components/types/side-bar-item.d.ts       |    7 +
 .../components/types/side-bar.d.ts            |    7 +
 .../components/types/skeleton.d.ts            |    7 +
 .../components/types/slider.d.ts              |    7 +
 .../components/types/step-item.d.ts           |    7 +
 .../components/types/stepper.d.ts             |    7 +
 .../components/types/steps.d.ts               |    7 +
 .../components/types/sticky.d.ts              |    7 +
 .../components/types/swipe-cell.d.ts          |    7 +
 .../components/types/swiper-nav.d.ts          |    7 +
 .../components/types/swiper.d.ts              |    7 +
 .../components/types/switch.d.ts              |    7 +
 .../components/types/tab-bar-item.d.ts        |    7 +
 .../components/types/tab-bar.d.ts             |    7 +
 .../components/types/tab-panel.d.ts           |    7 +
 .../tdesign-uniapp/components/types/tabs.d.ts |    7 +
 .../tdesign-uniapp/components/types/tag.d.ts  |    7 +
 .../components/types/textarea.d.ts            |    7 +
 .../components/types/toast.d.ts               |    7 +
 .../components/types/tree-select.d.ts         |    7 +
 .../components/types/upload.d.ts              |    7 +
 .../components/types/watermark.d.ts           |    7 +
 .../components/upload/README.en-US.md         |   63 +
 .../components/upload/README.md               |  116 +
 .../components/upload/_example/drag/index.vue |   74 +
 .../upload/_example/messageFile/index.vue     |   56 +
 .../upload/_example/multiple/index.vue        |   79 +
 .../upload/_example/single/index.vue          |   76 +
 .../upload/_example/status/index.vue          |   78 +
 .../components/upload/_example/upload.less    |   11 +
 .../components/upload/_example/upload.vue     |  110 +
 .../components/upload/drag.computed.js        |  225 ++
 .../tdesign-uniapp/components/upload/props.ts |  136 ++
 .../tdesign-uniapp/components/upload/type.ts  |  197 ++
 .../components/upload/upload.computed.js      |   13 +
 .../components/upload/upload.less             |  146 ++
 .../components/upload/upload.vue              |  880 +++++++
 .../components/watermark/README.en-US.md      |   49 +
 .../components/watermark/README.md            |  101 +
 .../watermark/_example/base/index.vue         |   29 +
 .../watermark/_example/gray/index.vue         |   33 +
 .../watermark/_example/image/index.vue        |   31 +
 .../watermark/_example/layout/index.vue       |   46 +
 .../watermark/_example/move-image/index.vue   |   30 +
 .../watermark/_example/move-text/index.vue    |   30 +
 .../_example/multi-line-gray/index.vue        |   37 +
 .../watermark/_example/multi-line/index.vue   |   34 +
 .../watermark/_example/watermark.less         |    0
 .../watermark/_example/watermark.vue          |   72 +
 .../components/watermark/props.ts             |   82 +
 .../components/watermark/type.ts              |  121 +
 .../watermark/utils/generateBase64Url.js      |  360 +++
 .../watermark/utils/randomMovingStyle.js      |   27 +
 .../components/watermark/watermark.less       |   35 +
 .../components/watermark/watermark.vue        |  195 ++
 .../tdesign-uniapp/example/.env.production    |    1 +
 .../example/docs/img/github-pages.png         |  Bin 0 -> 23979 bytes
 .../example/docs/img/tdesign-uniapp-mp.png    |  Bin 0 -> 89667 bytes
 packages/tdesign-uniapp/example/index.html    |   28 +
 packages/tdesign-uniapp/example/package.json  |   87 +
 .../example/script/deploy/cdn.js              |   73 +
 .../example/script/deploy/local.env.js        |    8 +
 .../example/script/deploy/mine-doc.js         |   35 +
 .../example/script/deploy/publish.sh          |   32 +
 .../example/script/pages/config.js            |   36 +
 .../example/script/pages/index.js             |  107 +
 .../example/script/release/config.js          |   18 +
 .../example/script/release/core.js            |   31 +
 .../example/script/release/less.js            |   84 +
 .../example/script/release/prepare.js         |   64 +
 .../example/script/release/publish-core.js    |   27 +
 .../release/publish-tdesign-uniapp-chat.js    |   12 +
 .../script/release/publish-tdesign-uniapp.js  |   12 +
 .../example/script/sync/demo-vue-css.js       |   39 +
 .../example/script/sync/doc-common-design.js  |   26 +
 .../example/script/sync/doc-component.js      |   31 +
 .../example/script/sync/doc-format.js         |   32 +
 .../example/script/sync/less.js               |   34 +
 .../example/script/utils/components.js        |   24 +
 .../example/script/utils/utils.js             |    9 +
 .../example/script/watch/config.js            |   31 +
 .../example/script/watch/core.js              |   56 +
 .../example/script/watch/init.js              |   72 +
 .../example/script/watch/types.js             |  136 ++
 .../example/script/watch/watch.js             |   69 +
 packages/tdesign-uniapp/example/src/App.vue   |    9 +
 .../src/components/pull-down-list/index.less  |   60 +
 .../src/components/pull-down-list/index.vue   |   87 +
 .../src/components/trd-privacy/index.less     |  137 ++
 .../src/components/trd-privacy/index.vue      |  135 ++
 packages/tdesign-uniapp/example/src/env.d.ts  |    8 +
 packages/tdesign-uniapp/example/src/main.ts   |   22 +
 .../tdesign-uniapp/example/src/manifest.json  |  126 +
 .../example/src/mixins/demo-base.js           |   45 +
 .../example/src/mixins/skyline.js             |    1 +
 .../tdesign-uniapp/example/src/pages.json     |  580 +++++
 .../example/src/pages/home/data/base.json     |   64 +
 .../example/src/pages/home/data/chat.json     |   45 +
 .../example/src/pages/home/data/display.json  |  139 ++
 .../example/src/pages/home/data/form.json     |  110 +
 .../example/src/pages/home/data/index.ts      |   12 +
 .../example/src/pages/home/data/nav.json      |   66 +
 .../example/src/pages/home/data/ux.json       |   78 +
 .../example/src/pages/home/home.less          |   56 +
 .../example/src/pages/home/home.vue           |  184 ++
 .../src/pages/home/navigate-fail/index.less   |   25 +
 .../src/pages/home/navigate-fail/index.vue    |   32 +
 .../tdesign-uniapp/example/src/shime-uni.d.ts |    6 +
 .../tdesign-uniapp/example/src/style/app.less |   61 +
 packages/tdesign-uniapp/example/src/uni.scss  |   76 +
 .../tdesign-uniapp/example/vite.config.ts     |   68 +
 packages/tdesign-uniapp/package.json          |   98 +
 packages/tdesign-uniapp/shims-uni.d.ts        |   12 +
 packages/tdesign-uniapp/site/.env.intranet    |    1 +
 packages/tdesign-uniapp/site/.env.preview     |    1 +
 packages/tdesign-uniapp/site/.env.production  |    1 +
 packages/tdesign-uniapp/site/docs.config.js   |  626 +++++
 .../tdesign-uniapp/site/docs/custom-style.md  |  117 +
 .../tdesign-uniapp/site/docs/custom-theme.md  |   63 +
 .../tdesign-uniapp/site/docs/dark-mode.md     |   95 +
 .../site/docs/design/action-sheet.md          |   73 +
 .../tdesign-uniapp/site/docs/design/avatar.md |   61 +
 .../site/docs/design/back-top.md              |   33 +
 .../tdesign-uniapp/site/docs/design/badge.md  |   68 +
 .../tdesign-uniapp/site/docs/design/button.md |   81 +
 .../site/docs/design/calendar.md              |   51 +
 .../site/docs/design/cascader.md              |   59 +
 .../tdesign-uniapp/site/docs/design/cell.md   |   55 +
 .../site/docs/design/checkbox.md              |   50 +
 .../site/docs/design/collapse.md              |   63 +
 .../site/docs/design/count-down.md            |   50 +
 .../site/docs/design/date-time-picker.md      |   42 +
 .../tdesign-uniapp/site/docs/design/dialog.md |   72 +
 .../site/docs/design/divider.md               |   53 +
 .../tdesign-uniapp/site/docs/design/drawer.md |   55 +
 .../site/docs/design/dropdown-menu.md         |   48 +
 .../tdesign-uniapp/site/docs/design/empty.md  |   44 +
 .../tdesign-uniapp/site/docs/design/fab.md    |   80 +
 .../tdesign-uniapp/site/docs/design/footer.md |   59 +
 .../tdesign-uniapp/site/docs/design/grid.md   |   88 +
 .../site/docs/design/image-viewer.md          |   36 +
 .../tdesign-uniapp/site/docs/design/image.md  |   51 +
 .../site/docs/design/indexes.md               |   53 +
 .../tdesign-uniapp/site/docs/design/input.md  |   72 +
 .../tdesign-uniapp/site/docs/design/link.md   |   44 +
 .../site/docs/design/loading.md               |   58 +
 .../site/docs/design/message.md               |   50 +
 .../tdesign-uniapp/site/docs/design/navbar.md |   51 +
 .../site/docs/design/notice-bar.md            |   81 +
 .../tdesign-uniapp/site/docs/design/picker.md |   40 +
 .../tdesign-uniapp/site/docs/design/popup.md  |   53 +
 .../site/docs/design/progress.md              |   62 +
 .../site/docs/design/pull-down-refresh.md     |   60 +
 .../tdesign-uniapp/site/docs/design/radio.md  |   57 +
 .../tdesign-uniapp/site/docs/design/rate.md   |   51 +
 .../tdesign-uniapp/site/docs/design/result.md |   54 +
 .../tdesign-uniapp/site/docs/design/search.md |   51 +
 .../site/docs/design/side-bar.md              |   50 +
 .../site/docs/design/skeleton.md              |   27 +
 .../tdesign-uniapp/site/docs/design/slider.md |   59 +
 .../site/docs/design/stepper.md               |   50 +
 .../tdesign-uniapp/site/docs/design/steps.md  |   74 +
 .../site/docs/design/swipe-cell.md            |   75 +
 .../tdesign-uniapp/site/docs/design/swiper.md |   40 +
 .../tdesign-uniapp/site/docs/design/switch.md |   31 +
 .../site/docs/design/tab-bar.md               |   77 +
 .../tdesign-uniapp/site/docs/design/tabs.md   |  106 +
 .../tdesign-uniapp/site/docs/design/tag.md    |   86 +
 .../site/docs/design/textarea.md              |   59 +
 .../tdesign-uniapp/site/docs/design/toast.md  |   51 +
 .../site/docs/design/tree-select.md           |   27 +
 .../tdesign-uniapp/site/docs/design/upload.md |   43 +
 .../site/docs/design/watermark.md             |    1 +
 packages/tdesign-uniapp/site/docs/faq.md      |   83 +
 .../site/docs/getting-started.en-US.md        |   95 +
 .../site/docs/getting-started.md              |  137 ++
 .../site/docs/overview.en-US.md               |  487 ++++
 packages/tdesign-uniapp/site/docs/overview.md |  486 ++++
 packages/tdesign-uniapp/site/index.html       |   38 +
 packages/tdesign-uniapp/site/mobile.html      |   37 +
 packages/tdesign-uniapp/site/package.json     |  136 ++
 .../site/styles/mixins/index.less             |   16 +
 .../site/styles/mixins/text.less              |   55 +
 .../site/styles/mobile/components.less        |  112 +
 .../site/styles/mobile/demo.less              |   61 +
 .../site/styles/mobile/index.less             |  152 ++
 packages/tdesign-uniapp/site/styles/vars.less |  125 +
 packages/tdesign-uniapp/site/vite.config.ts   |   94 +
 packages/tdesign-uniapp/site/web/app.vue      |  149 ++
 packages/tdesign-uniapp/site/web/main.ts      |   24 +
 .../changelog-to-json-core/components.ts      |  166 ++
 .../plugins/changelog-to-json-core/index.ts   |  194 ++
 .../plugins/changelog-to-json-core/libs.ts    |   23 +
 .../plugins/changelog-to-json-core/types.ts   |   29 +
 .../web/plugins/changelog-to-json/index.js    |   32 +
 .../site/web/plugins/plugin-tdoc/demo.js      |   42 +
 .../site/web/plugins/plugin-tdoc/index.js     |   38 +
 .../site/web/plugins/plugin-tdoc/md-to-vue.js |  212 ++
 .../web/plugins/plugin-tdoc/transforms.js     |   77 +
 packages/tdesign-uniapp/site/web/router.ts    |   68 +
 .../site/web/stackblitz/content.ts            |  237 ++
 .../site/web/stackblitz/index.vue             |  129 +
 .../tdesign-uniapp/site/web/test-coverage.js  |   69 +
 packages/tdesign-uniapp/site/web/utils.ts     |   63 +
 packages/tdesign-uniapp/tsconfig.eslint.json  |   13 +
 tsconfig.json                                 |    1 +
 1545 files changed, 127964 insertions(+), 1 deletion(-)
 create mode 100644 packages/tdesign-uniapp-chat/.eslintignore
 create mode 100644 packages/tdesign-uniapp-chat/.eslintrc.js
 create mode 100644 packages/tdesign-uniapp-chat/components/.npmrc
 create mode 100644 packages/tdesign-uniapp-chat/components/CHANGELOG.md
 create mode 100644 packages/tdesign-uniapp-chat/components/LICENSE
 create mode 100644 packages/tdesign-uniapp-chat/components/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/attachments.less
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/attachments.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/file-loading/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/file/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/_example/image-loading/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/attachments.less
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/attachments.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/computed.js
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/attachments/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/_example/comment/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-actionbar/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/chat-content.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/chat-content.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-content/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/agent/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/chart-component/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/code/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/docs/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/ec-canvas.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/echarts.js
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/wx-canvas.js
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/hook-component/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/image/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/_example/utils.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/chat-list.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/chat-list.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-list/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/_example/text/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-loading/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/mock2.js
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/code/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/list/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/refer/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/sheet/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/_example/url/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-markdown/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/configure/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/content/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/error/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/_example/style/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/chat-message.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/chat-message.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-message/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/attachments/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/content-citation/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/file-citation/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/computed.js
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-sender/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/README.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/README.md
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/complete/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/layout/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/_example/pending/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.less
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/props.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/chat-thinking/type.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/global.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/npm/marked/index.js
 create mode 100644 packages/tdesign-uniapp-chat/components/package.json
 create mode 100644 packages/tdesign-uniapp-chat/components/script/postinstall.js
 create mode 100644 packages/tdesign-uniapp-chat/components/tdesign-uniapp-chat/tdesign-uniapp.vue
 create mode 100644 packages/tdesign-uniapp-chat/components/types/attachments.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-actionbar.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-content.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-list.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-loading.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-markdown.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-message.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-sender.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/chat-thinking.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/components/types/index.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/package.json
 create mode 100644 packages/tdesign-uniapp-chat/shims-uni.d.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/.env.intranet
 create mode 100644 packages/tdesign-uniapp-chat/site/.env.preview
 create mode 100644 packages/tdesign-uniapp-chat/site/.env.production
 create mode 100644 packages/tdesign-uniapp-chat/site/docs.config.js
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/custom-style.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/custom-theme.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/dark-mode.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/faq.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/getting-started.en-US.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/getting-started.md
 create mode 100644 packages/tdesign-uniapp-chat/site/docs/sse.md
 create mode 100644 packages/tdesign-uniapp-chat/site/index.html
 create mode 100644 packages/tdesign-uniapp-chat/site/mobile.html
 create mode 100644 packages/tdesign-uniapp-chat/site/package.json
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/mixins/index.less
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/mixins/text.less
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/mobile/components.less
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/mobile/demo.less
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/mobile/index.less
 create mode 100644 packages/tdesign-uniapp-chat/site/styles/vars.less
 create mode 100644 packages/tdesign-uniapp-chat/site/vite.config.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/app.vue
 create mode 100644 packages/tdesign-uniapp-chat/site/web/main.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/components.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/index.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/libs.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/types.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json/index.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/demo.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/index.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/transforms.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/router.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
 create mode 100644 packages/tdesign-uniapp-chat/site/web/stackblitz/index.vue
 create mode 100644 packages/tdesign-uniapp-chat/site/web/test-coverage.js
 create mode 100644 packages/tdesign-uniapp-chat/site/web/utils.ts
 create mode 100644 packages/tdesign-uniapp-chat/tsconfig.eslint.json
 create mode 100644 packages/tdesign-uniapp-chat/tsconfig.json
 create mode 100644 packages/tdesign-uniapp/.eslintignore
 create mode 100644 packages/tdesign-uniapp/.eslintrc.js
 create mode 100644 packages/tdesign-uniapp/components/.npmrc
 create mode 100644 packages/tdesign-uniapp/components/CHANGELOG.md
 create mode 100644 packages/tdesign-uniapp/components/LICENSE
 create mode 100644 packages/tdesign-uniapp/components/README.md
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/README.md
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.less
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/align/index.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/grid/index.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/list/index.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/action-sheet.less
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/action-sheet.vue
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/computed.js
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/index.ts
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/props.ts
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/show.ts
 create mode 100644 packages/tdesign-uniapp/components/action-sheet/type.ts
 create mode 100644 packages/tdesign-uniapp/components/avatar-group/avatar-group.less
 create mode 100644 packages/tdesign-uniapp/components/avatar-group/avatar-group.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar-group/props.ts
 create mode 100644 packages/tdesign-uniapp/components/avatar-group/type.ts
 create mode 100644 packages/tdesign-uniapp/components/avatar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/avatar/README.md
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/action/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/avatar.less
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/avatar.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/badge-avatar/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/character-avatar/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/exhibition/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/icon-avatar/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/image-avatar/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.less
 create mode 100644 packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/avatar.less
 create mode 100644 packages/tdesign-uniapp/components/avatar/avatar.vue
 create mode 100644 packages/tdesign-uniapp/components/avatar/computed.js
 create mode 100644 packages/tdesign-uniapp/components/avatar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/avatar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/back-top/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/back-top/README.md
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/back-top.less
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/back-top.vue
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/half-round/index.vue
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.less
 create mode 100644 packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.vue
 create mode 100644 packages/tdesign-uniapp/components/back-top/back-top.less
 create mode 100644 packages/tdesign-uniapp/components/back-top/back-top.vue
 create mode 100644 packages/tdesign-uniapp/components/back-top/props.ts
 create mode 100644 packages/tdesign-uniapp/components/back-top/type.ts
 create mode 100644 packages/tdesign-uniapp/components/badge/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/badge/README.md
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/api.md
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/badge.less
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/badge.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/skyline/badge.less
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/skyline/badge.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/badge.less
 create mode 100644 packages/tdesign-uniapp/components/badge/badge.vue
 create mode 100644 packages/tdesign-uniapp/components/badge/computed.js
 create mode 100644 packages/tdesign-uniapp/components/badge/props.ts
 create mode 100644 packages/tdesign-uniapp/components/badge/type.ts
 create mode 100644 packages/tdesign-uniapp/components/button/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/button/README.md
 create mode 100644 packages/tdesign-uniapp/components/button/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/block-btn/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/button.less
 create mode 100644 packages/tdesign-uniapp/components/button/_example/button.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/disabled/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/ghost-btn/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/group-btn/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/icon-btn/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/shape/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/skyline/button.less
 create mode 100644 packages/tdesign-uniapp/components/button/_example/skyline/button.vue
 create mode 100644 packages/tdesign-uniapp/components/button/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/button/button.less
 create mode 100644 packages/tdesign-uniapp/components/button/button.vue
 create mode 100644 packages/tdesign-uniapp/components/button/props.ts
 create mode 100644 packages/tdesign-uniapp/components/button/type.ts
 create mode 100644 packages/tdesign-uniapp/components/calendar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/calendar/README.md
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/calendar.css
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/calendar.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/computed.js
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/custom-range/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/custom-text/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/local-text/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/range/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/switch-mode/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/_example/without-popup/index.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/calendar-header.props.js
 create mode 100644 packages/tdesign-uniapp/components/calendar/calendar-header.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/calendar.less
 create mode 100644 packages/tdesign-uniapp/components/calendar/calendar.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/computed.js
 create mode 100644 packages/tdesign-uniapp/components/calendar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/calendar/template.props.js
 create mode 100644 packages/tdesign-uniapp/components/calendar/template.vue
 create mode 100644 packages/tdesign-uniapp/components/calendar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/calendar/utils.ts
 create mode 100644 packages/tdesign-uniapp/components/cascader/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/cascader/README.md
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/cascader.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/check-strictly/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/keys/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/theme-tab/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/with-title/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/_example/with-value/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/cascader.less
 create mode 100644 packages/tdesign-uniapp/components/cascader/cascader.vue
 create mode 100644 packages/tdesign-uniapp/components/cascader/props.ts
 create mode 100644 packages/tdesign-uniapp/components/cascader/type.ts
 create mode 100644 packages/tdesign-uniapp/components/cell-group/_example/api.md
 create mode 100644 packages/tdesign-uniapp/components/cell-group/_example/cell-group.less
 create mode 100644 packages/tdesign-uniapp/components/cell-group/_example/cell-group.vue
 create mode 100644 packages/tdesign-uniapp/components/cell-group/cell-group.less
 create mode 100644 packages/tdesign-uniapp/components/cell-group/cell-group.vue
 create mode 100644 packages/tdesign-uniapp/components/cell-group/props.ts
 create mode 100644 packages/tdesign-uniapp/components/cell-group/type.ts
 create mode 100644 packages/tdesign-uniapp/components/cell/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/cell/README.md
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/cell.less
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/cell.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/skyline/cell.less
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/skyline/cell.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/cell.less
 create mode 100644 packages/tdesign-uniapp/components/cell/cell.vue
 create mode 100644 packages/tdesign-uniapp/components/cell/props.ts
 create mode 100644 packages/tdesign-uniapp/components/cell/type.ts
 create mode 100644 packages/tdesign-uniapp/components/check-tag/check-tag.less
 create mode 100644 packages/tdesign-uniapp/components/check-tag/check-tag.vue
 create mode 100644 packages/tdesign-uniapp/components/check-tag/props.ts
 create mode 100644 packages/tdesign-uniapp/components/check-tag/type.ts
 create mode 100644 packages/tdesign-uniapp/components/checkbox-group/checkbox-group.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox-group/props.ts
 create mode 100644 packages/tdesign-uniapp/components/checkbox-group/type.ts
 create mode 100644 packages/tdesign-uniapp/components/checkbox/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/checkbox/README.md
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/all/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/card/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/checkbox.less
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/checkbox.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/horizontal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/right/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.less
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/special/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/_example/type/index.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/checkbox.less
 create mode 100644 packages/tdesign-uniapp/components/checkbox/checkbox.vue
 create mode 100644 packages/tdesign-uniapp/components/checkbox/props.ts
 create mode 100644 packages/tdesign-uniapp/components/checkbox/type.ts
 create mode 100644 packages/tdesign-uniapp/components/col/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/col/README.md
 create mode 100644 packages/tdesign-uniapp/components/col/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/col/_example/col.less
 create mode 100644 packages/tdesign-uniapp/components/col/_example/col.vue
 create mode 100644 packages/tdesign-uniapp/components/col/_example/offset/index.vue
 create mode 100644 packages/tdesign-uniapp/components/col/_example/skyline/col.less
 create mode 100644 packages/tdesign-uniapp/components/col/_example/skyline/col.vue
 create mode 100644 packages/tdesign-uniapp/components/col/col.less
 create mode 100644 packages/tdesign-uniapp/components/col/col.vue
 create mode 100644 packages/tdesign-uniapp/components/col/computed.js
 create mode 100644 packages/tdesign-uniapp/components/col/props.ts
 create mode 100644 packages/tdesign-uniapp/components/col/type.ts
 create mode 100644 packages/tdesign-uniapp/components/collapse-panel/collapse-panel.less
 create mode 100644 packages/tdesign-uniapp/components/collapse-panel/collapse-panel.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse-panel/props.ts
 create mode 100644 packages/tdesign-uniapp/components/collapse-panel/type.ts
 create mode 100644 packages/tdesign-uniapp/components/collapse/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/collapse/README.md
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/accordion/index.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/action/index.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/collapse.less
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/collapse.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/placement/index.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/collapse.less
 create mode 100644 packages/tdesign-uniapp/components/collapse/collapse.vue
 create mode 100644 packages/tdesign-uniapp/components/collapse/props.ts
 create mode 100644 packages/tdesign-uniapp/components/collapse/type.ts
 create mode 100644 packages/tdesign-uniapp/components/color-picker/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/color-picker/README.md
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/color-picker.less
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/color-picker.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/format/index.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/_example/use-popup/index.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/color-picker.less
 create mode 100644 packages/tdesign-uniapp/components/color-picker/color-picker.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/constants.ts
 create mode 100644 packages/tdesign-uniapp/components/color-picker/props.ts
 create mode 100644 packages/tdesign-uniapp/components/color-picker/template.props.js
 create mode 100644 packages/tdesign-uniapp/components/color-picker/template.vue
 create mode 100644 packages/tdesign-uniapp/components/color-picker/type.ts
 create mode 100644 packages/tdesign-uniapp/components/color-picker/utils.js
 create mode 100644 packages/tdesign-uniapp/components/common/bus.js
 create mode 100644 packages/tdesign-uniapp/components/common/canvas/index.js
 create mode 100644 packages/tdesign-uniapp/components/common/common.ts
 create mode 100644 packages/tdesign-uniapp/components/common/config.js
 create mode 100644 packages/tdesign-uniapp/components/common/dom/index.js
 create mode 100644 packages/tdesign-uniapp/components/common/dom/select-component.js
 create mode 100644 packages/tdesign-uniapp/components/common/event/dynamic.js
 create mode 100644 packages/tdesign-uniapp/components/common/functional/mixin.js
 create mode 100644 packages/tdesign-uniapp/components/common/relation/index.js
 create mode 100644 packages/tdesign-uniapp/components/common/relation/parent-map.js
 create mode 100644 packages/tdesign-uniapp/components/common/relation/relation.js
 create mode 100644 packages/tdesign-uniapp/components/common/runtime/index.js
 create mode 100644 packages/tdesign-uniapp/components/common/runtime/relation.js
 create mode 100644 packages/tdesign-uniapp/components/common/runtime/wxs-polyfill.js
 create mode 100644 packages/tdesign-uniapp/components/common/shared/calendar/index.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/calendar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/color-picker/cmyk.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/color-picker/color.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/color-picker/gradient.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/color-picker/index.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/date.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/qrcode/qrcodegen.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/qrcode/types.ts
 create mode 100644 packages/tdesign-uniapp/components/common/shared/qrcode/utils.ts
 create mode 100644 packages/tdesign-uniapp/components/common/src/control.js
 create mode 100644 packages/tdesign-uniapp/components/common/src/flatTool.js
 create mode 100644 packages/tdesign-uniapp/components/common/src/index.js
 create mode 100644 packages/tdesign-uniapp/components/common/src/instantiationDecorator.js
 create mode 100644 packages/tdesign-uniapp/components/common/src/superComponent.js
 create mode 100644 packages/tdesign-uniapp/components/common/style/_variables.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/base.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/icons.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/index.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_border.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_clearfix.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_cursor.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_ellipsis.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_hairline.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_index.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/mixins/_other.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/index.css
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/index.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_components.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_dark.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_font.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_light.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_radius.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/theme/raw/_spacer.less
 create mode 100644 packages/tdesign-uniapp/components/common/style/utilities/_index.less
 create mode 100644 packages/tdesign-uniapp/components/common/utils.js
 create mode 100644 packages/tdesign-uniapp/components/common/utils.wxs.js
 create mode 100644 packages/tdesign-uniapp/components/common/validator.js
 create mode 100644 packages/tdesign-uniapp/components/common/version.js
 create mode 100644 packages/tdesign-uniapp/components/common/wechat.js
 create mode 100644 packages/tdesign-uniapp/components/count-down/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/count-down/README.md
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/count-down.less
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/count-down.vue
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.less
 create mode 100644 packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.vue
 create mode 100644 packages/tdesign-uniapp/components/count-down/computed.js
 create mode 100644 packages/tdesign-uniapp/components/count-down/count-down.less
 create mode 100644 packages/tdesign-uniapp/components/count-down/count-down.vue
 create mode 100644 packages/tdesign-uniapp/components/count-down/props.ts
 create mode 100644 packages/tdesign-uniapp/components/count-down/type.ts
 create mode 100644 packages/tdesign-uniapp/components/count-down/utils.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/README.md
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/date-all/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.less
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.less
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/steps/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/time/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/without-popup/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/year-month-date/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/_example/year-month/index.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/date-time-picker.less
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/date-time-picker.vue
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/dayjs.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/en.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/ja.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/ko.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/ru.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/tc.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/locale/zh.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/props.ts
 create mode 100644 packages/tdesign-uniapp/components/date-time-picker/type.ts
 create mode 100644 packages/tdesign-uniapp/components/demo-header/demo-header.vue
 create mode 100644 packages/tdesign-uniapp/components/demo-header/index.less
 create mode 100644 packages/tdesign-uniapp/components/demo/demo.vue
 create mode 100644 packages/tdesign-uniapp/components/demo/index.less
 create mode 100644 packages/tdesign-uniapp/components/dialog/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/dialog/README.md
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/button/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/command/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/confirm/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/dialog.less
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/dialog.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.less
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/with-image/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/_example/with-input/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/computed.js
 create mode 100644 packages/tdesign-uniapp/components/dialog/dialog.less
 create mode 100644 packages/tdesign-uniapp/components/dialog/dialog.vue
 create mode 100644 packages/tdesign-uniapp/components/dialog/index.ts
 create mode 100644 packages/tdesign-uniapp/components/dialog/props.ts
 create mode 100644 packages/tdesign-uniapp/components/dialog/type.ts
 create mode 100644 packages/tdesign-uniapp/components/divider/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/divider/README.md
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/divider.less
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/divider.vue
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/skyline/divider.less
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/skyline/divider.vue
 create mode 100644 packages/tdesign-uniapp/components/divider/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/divider/divider.less
 create mode 100644 packages/tdesign-uniapp/components/divider/divider.vue
 create mode 100644 packages/tdesign-uniapp/components/divider/props.ts
 create mode 100644 packages/tdesign-uniapp/components/divider/type.ts
 create mode 100644 packages/tdesign-uniapp/components/draggable/draggable.less
 create mode 100644 packages/tdesign-uniapp/components/draggable/draggable.vue
 create mode 100644 packages/tdesign-uniapp/components/draggable/props.js
 create mode 100644 packages/tdesign-uniapp/components/drawer/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/drawer/README.md
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/drawer.less
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/drawer.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/footer/index.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/icon-drawer/index.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.less
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/_example/title/index.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/drawer.less
 create mode 100644 packages/tdesign-uniapp/components/drawer/drawer.vue
 create mode 100644 packages/tdesign-uniapp/components/drawer/props.ts
 create mode 100644 packages/tdesign-uniapp/components/drawer/type.ts
 create mode 100644 packages/tdesign-uniapp/components/dropdown-item/computed.js
 create mode 100644 packages/tdesign-uniapp/components/dropdown-item/dropdown-item.less
 create mode 100644 packages/tdesign-uniapp/components/dropdown-item/dropdown-item.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/dropdown-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/README.md
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.less
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/_example/multi/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/_example/single/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/_example/tree/index.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.less
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/props.ts
 create mode 100644 packages/tdesign-uniapp/components/dropdown-menu/type.ts
 create mode 100644 packages/tdesign-uniapp/components/empty/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/empty/README.md
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/buttonEmpty/index.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/empty.less
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/empty.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/imageEmpty/index.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/skyline/empty.less
 create mode 100644 packages/tdesign-uniapp/components/empty/_example/skyline/empty.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/empty.less
 create mode 100644 packages/tdesign-uniapp/components/empty/empty.vue
 create mode 100644 packages/tdesign-uniapp/components/empty/props.ts
 create mode 100644 packages/tdesign-uniapp/components/empty/type.ts
 create mode 100644 packages/tdesign-uniapp/components/fab/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/fab/README.md
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/advance/index.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/collapsible/index.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/draggable/index.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/fab.less
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/fab.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/skyline/fab.less
 create mode 100644 packages/tdesign-uniapp/components/fab/_example/skyline/fab.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/fab.less
 create mode 100644 packages/tdesign-uniapp/components/fab/fab.vue
 create mode 100644 packages/tdesign-uniapp/components/fab/props.ts
 create mode 100644 packages/tdesign-uniapp/components/fab/type.ts
 create mode 100644 packages/tdesign-uniapp/components/footer/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/footer/README.md
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/footer.less
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/footer.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/link/index.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/logo/index.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/skyline/footer.less
 create mode 100644 packages/tdesign-uniapp/components/footer/_example/skyline/footer.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/footer.less
 create mode 100644 packages/tdesign-uniapp/components/footer/footer.vue
 create mode 100644 packages/tdesign-uniapp/components/footer/props.ts
 create mode 100644 packages/tdesign-uniapp/components/footer/type.ts
 create mode 100644 packages/tdesign-uniapp/components/form-item/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/form-item/README.md
 create mode 100644 packages/tdesign-uniapp/components/form-item/form-item.less
 create mode 100644 packages/tdesign-uniapp/components/form-item/form-item.vue
 create mode 100644 packages/tdesign-uniapp/components/form-item/form-model.ts
 create mode 100644 packages/tdesign-uniapp/components/form-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/form-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/form/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/form/README.md
 create mode 100644 packages/tdesign-uniapp/components/form/_example/form.less
 create mode 100644 packages/tdesign-uniapp/components/form/_example/form.vue
 create mode 100644 packages/tdesign-uniapp/components/form/_example/horizontal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/form/_example/vertical/index.vue
 create mode 100644 packages/tdesign-uniapp/components/form/form-item-props.ts
 create mode 100644 packages/tdesign-uniapp/components/form/form.less
 create mode 100644 packages/tdesign-uniapp/components/form/form.vue
 create mode 100644 packages/tdesign-uniapp/components/form/props.ts
 create mode 100644 packages/tdesign-uniapp/components/form/type.ts
 create mode 100644 packages/tdesign-uniapp/components/global.d.ts
 create mode 100644 packages/tdesign-uniapp/components/grid-item/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/grid-item/README.md
 create mode 100644 packages/tdesign-uniapp/components/grid-item/grid-item.less
 create mode 100644 packages/tdesign-uniapp/components/grid-item/grid-item.vue
 create mode 100644 packages/tdesign-uniapp/components/grid-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/grid-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/grid/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/grid/README.md
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/badge/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/border/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/card/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/description/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/grid.less
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/grid.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/icon-grid/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/_example/scroll/index.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/grid.less
 create mode 100644 packages/tdesign-uniapp/components/grid/grid.vue
 create mode 100644 packages/tdesign-uniapp/components/grid/props.ts
 create mode 100644 packages/tdesign-uniapp/components/grid/type.ts
 create mode 100644 packages/tdesign-uniapp/components/guide/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/guide/README.md
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/content/index.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/dialog/index.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/guide.less
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/guide.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/_example/no-mask/index.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/content.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/guide.less
 create mode 100644 packages/tdesign-uniapp/components/guide/guide.vue
 create mode 100644 packages/tdesign-uniapp/components/guide/props.ts
 create mode 100644 packages/tdesign-uniapp/components/guide/type.ts
 create mode 100644 packages/tdesign-uniapp/components/icon/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/icon/README.md
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/data.js
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/icon.less
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/icon.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/iconImage/index.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/iconfont.css
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/skyline/icon.less
 create mode 100644 packages/tdesign-uniapp/components/icon/_example/skyline/icon.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/icon.less
 create mode 100644 packages/tdesign-uniapp/components/icon/icon.vue
 create mode 100644 packages/tdesign-uniapp/components/icon/props.ts
 create mode 100644 packages/tdesign-uniapp/components/icon/type.ts
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/README.md
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/_example/delete/index.vue
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.less
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.vue
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/_example/skyline/image-viewer.vue
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/computed.js
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/image-viewer.less
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/image-viewer.vue
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/props.ts
 create mode 100644 packages/tdesign-uniapp/components/image-viewer/type.ts
 create mode 100644 packages/tdesign-uniapp/components/image/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/image/README.md
 create mode 100644 packages/tdesign-uniapp/components/image/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/image/_example/image.less
 create mode 100644 packages/tdesign-uniapp/components/image/_example/image.vue
 create mode 100644 packages/tdesign-uniapp/components/image/_example/skyline/image.less
 create mode 100644 packages/tdesign-uniapp/components/image/_example/skyline/image.vue
 create mode 100644 packages/tdesign-uniapp/components/image/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/image/image.less
 create mode 100644 packages/tdesign-uniapp/components/image/image.vue
 create mode 100644 packages/tdesign-uniapp/components/image/props.ts
 create mode 100644 packages/tdesign-uniapp/components/image/type.ts
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/README.md
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.less
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.vue
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/props.ts
 create mode 100644 packages/tdesign-uniapp/components/indexes-anchor/type.ts
 create mode 100644 packages/tdesign-uniapp/components/indexes/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/indexes/README.md
 create mode 100644 packages/tdesign-uniapp/components/indexes/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/indexes/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/indexes/_example/indexes.less
 create mode 100644 packages/tdesign-uniapp/components/indexes/_example/indexes.vue
 create mode 100644 packages/tdesign-uniapp/components/indexes/computed.js
 create mode 100644 packages/tdesign-uniapp/components/indexes/indexes-anchor-props.ts
 create mode 100644 packages/tdesign-uniapp/components/indexes/indexes.less
 create mode 100644 packages/tdesign-uniapp/components/indexes/indexes.vue
 create mode 100644 packages/tdesign-uniapp/components/indexes/props.ts
 create mode 100644 packages/tdesign-uniapp/components/indexes/type.ts
 create mode 100644 packages/tdesign-uniapp/components/input/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/input/README.md
 create mode 100644 packages/tdesign-uniapp/components/input/_example/align/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/banner/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/bordered/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/input.less
 create mode 100644 packages/tdesign-uniapp/components/input/_example/input.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/label/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/layout/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/maxlength/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/prefix/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/skyline/input.less
 create mode 100644 packages/tdesign-uniapp/components/input/_example/skyline/input.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/special/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/_example/suffix/index.vue
 create mode 100644 packages/tdesign-uniapp/components/input/computed.js
 create mode 100644 packages/tdesign-uniapp/components/input/input.less
 create mode 100644 packages/tdesign-uniapp/components/input/input.vue
 create mode 100644 packages/tdesign-uniapp/components/input/props.ts
 create mode 100644 packages/tdesign-uniapp/components/input/type.ts
 create mode 100644 packages/tdesign-uniapp/components/input/utils.js
 create mode 100644 packages/tdesign-uniapp/components/link/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/link/README.md
 create mode 100644 packages/tdesign-uniapp/components/link/_example/content/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/disabled/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/link.less
 create mode 100644 packages/tdesign-uniapp/components/link/_example/link.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/prefix/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/skyline/link.less
 create mode 100644 packages/tdesign-uniapp/components/link/_example/skyline/link.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/suffix/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/_example/underline/index.vue
 create mode 100644 packages/tdesign-uniapp/components/link/link.less
 create mode 100644 packages/tdesign-uniapp/components/link/link.vue
 create mode 100644 packages/tdesign-uniapp/components/link/props.ts
 create mode 100644 packages/tdesign-uniapp/components/link/type.ts
 create mode 100644 packages/tdesign-uniapp/components/loading/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/loading/README.md
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/duration/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/horizontal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/loading.less
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/loading.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/skyline/loading.less
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/skyline/loading.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/text/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/_example/vertical/index.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/loading.less
 create mode 100644 packages/tdesign-uniapp/components/loading/loading.vue
 create mode 100644 packages/tdesign-uniapp/components/loading/props.ts
 create mode 100644 packages/tdesign-uniapp/components/loading/type.ts
 create mode 100644 packages/tdesign-uniapp/components/message-item/computed.js
 create mode 100644 packages/tdesign-uniapp/components/message-item/index.ts
 create mode 100644 packages/tdesign-uniapp/components/message-item/message-item.less
 create mode 100644 packages/tdesign-uniapp/components/message-item/message-item.vue
 create mode 100644 packages/tdesign-uniapp/components/message/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/message/README.md
 create mode 100644 packages/tdesign-uniapp/components/message/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/message/_example/message.less
 create mode 100644 packages/tdesign-uniapp/components/message/_example/message.vue
 create mode 100644 packages/tdesign-uniapp/components/message/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/message/config.ts
 create mode 100644 packages/tdesign-uniapp/components/message/index.ts
 create mode 100644 packages/tdesign-uniapp/components/message/message.interface.ts
 create mode 100644 packages/tdesign-uniapp/components/message/message.vue
 create mode 100644 packages/tdesign-uniapp/components/message/props.ts
 create mode 100644 packages/tdesign-uniapp/components/message/type.ts
 create mode 100644 packages/tdesign-uniapp/components/mixins/page-scroll.js
 create mode 100644 packages/tdesign-uniapp/components/mixins/skyline.js
 create mode 100644 packages/tdesign-uniapp/components/mixins/theme-change.js
 create mode 100644 packages/tdesign-uniapp/components/mixins/touch.js
 create mode 100644 packages/tdesign-uniapp/components/mixins/transition.js
 create mode 100644 packages/tdesign-uniapp/components/mixins/using-custom-navbar.js
 create mode 100644 packages/tdesign-uniapp/components/navbar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/navbar/README.md
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/back-home/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/custom-color/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/img/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/left-title/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/navbar.less
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/navbar.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/search/index.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.less
 create mode 100644 packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/navbar.less
 create mode 100644 packages/tdesign-uniapp/components/navbar/navbar.vue
 create mode 100644 packages/tdesign-uniapp/components/navbar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/navbar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/README.md
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/customization/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/event/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/iconDemo/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.less
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/scrolling/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/suffixIcon/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/notice-bar.less
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/notice-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/notice-bar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/constant.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/index.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/en.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ja.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ko.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ru.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-cn.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-tw.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localeData/index.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/index.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/utils.js
 create mode 100644 packages/tdesign-uniapp/components/npm/dayjs/esm/utils.js
 create mode 100644 packages/tdesign-uniapp/components/npm/tinycolor2/esm/tinycolor.js
 create mode 100644 packages/tdesign-uniapp/components/overlay/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/overlay/README.md
 create mode 100644 packages/tdesign-uniapp/components/overlay/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/overlay/_example/overlay.less
 create mode 100644 packages/tdesign-uniapp/components/overlay/_example/overlay.vue
 create mode 100644 packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.less
 create mode 100644 packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.vue
 create mode 100644 packages/tdesign-uniapp/components/overlay/overlay.less
 create mode 100644 packages/tdesign-uniapp/components/overlay/overlay.vue
 create mode 100644 packages/tdesign-uniapp/components/overlay/props.ts
 create mode 100644 packages/tdesign-uniapp/components/overlay/type.ts
 create mode 100644 packages/tdesign-uniapp/components/package.json
 create mode 100644 packages/tdesign-uniapp/components/picker-item/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/picker-item/README.md
 create mode 100644 packages/tdesign-uniapp/components/picker-item/picker-item.less
 create mode 100644 packages/tdesign-uniapp/components/picker-item/picker-item.vue
 create mode 100644 packages/tdesign-uniapp/components/picker-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/picker-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/picker/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/picker/README.md
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/area/index.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/picker.less
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/picker.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/skyline/picker.less
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/skyline/picker.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/with-title/index.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/_example/without-popup/index.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/picker.less
 create mode 100644 packages/tdesign-uniapp/components/picker/picker.vue
 create mode 100644 packages/tdesign-uniapp/components/picker/props.ts
 create mode 100644 packages/tdesign-uniapp/components/picker/type.ts
 create mode 100644 packages/tdesign-uniapp/components/popup/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/popup/README.md
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/custom-close/index.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/popup.less
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/popup.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/skyline/popup.less
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/skyline/popup.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/_example/with-title/index.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/computed.js
 create mode 100644 packages/tdesign-uniapp/components/popup/popup.less
 create mode 100644 packages/tdesign-uniapp/components/popup/popup.vue
 create mode 100644 packages/tdesign-uniapp/components/popup/props.ts
 create mode 100644 packages/tdesign-uniapp/components/popup/type.ts
 create mode 100644 packages/tdesign-uniapp/components/progress/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/progress/README.md
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/circle/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/line/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/plump/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/progress.less
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/progress.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/skyline/progress.less
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/skyline/progress.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/_example/transition/index.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/computed.js
 create mode 100644 packages/tdesign-uniapp/components/progress/progress.less
 create mode 100644 packages/tdesign-uniapp/components/progress/progress.vue
 create mode 100644 packages/tdesign-uniapp/components/progress/props.ts
 create mode 100644 packages/tdesign-uniapp/components/progress/type.ts
 create mode 100644 packages/tdesign-uniapp/components/progress/utils.ts
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/README.md
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.less
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.vue
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/_example/skyline/pull-down-refresh.vue
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/props.ts
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.less
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.vue
 create mode 100644 packages/tdesign-uniapp/components/pull-down-refresh/type.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/qrcode/README.md
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/base/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/borderless/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/borderless/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/color/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/color/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/icon/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/icon/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/level/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/level/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/qrcode.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/qrcode.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/size/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/status/index.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/props.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/type.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-status/props.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/hooks/useQRCode.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/props.ts
 create mode 100644 packages/tdesign-uniapp/components/qrcode/qrcode.less
 create mode 100644 packages/tdesign-uniapp/components/qrcode/qrcode.vue
 create mode 100644 packages/tdesign-uniapp/components/qrcode/type.ts
 create mode 100644 packages/tdesign-uniapp/components/radio-group/props.ts
 create mode 100644 packages/tdesign-uniapp/components/radio-group/radio-group.vue
 create mode 100644 packages/tdesign-uniapp/components/radio-group/type.ts
 create mode 100644 packages/tdesign-uniapp/components/radio/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/radio/README.md
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/align/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/card/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/horizontal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/radio.less
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/radio.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/skyline/radio.less
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/skyline/radio.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/special/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/props.ts
 create mode 100644 packages/tdesign-uniapp/components/radio/radio.less
 create mode 100644 packages/tdesign-uniapp/components/radio/radio.vue
 create mode 100644 packages/tdesign-uniapp/components/radio/type.ts
 create mode 100644 packages/tdesign-uniapp/components/rate/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/rate/README.md
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/action/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/color/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/count/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/custom-prefix/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/iconfont.css
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/rate.less
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/rate.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/show-text/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/_example/special/index.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/computed.js
 create mode 100644 packages/tdesign-uniapp/components/rate/props.ts
 create mode 100644 packages/tdesign-uniapp/components/rate/rate.less
 create mode 100644 packages/tdesign-uniapp/components/rate/rate.vue
 create mode 100644 packages/tdesign-uniapp/components/rate/type.ts
 create mode 100644 packages/tdesign-uniapp/components/result/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/result/README.md
 create mode 100644 packages/tdesign-uniapp/components/result/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/result/_example/description/index.vue
 create mode 100644 packages/tdesign-uniapp/components/result/_example/result-page.less
 create mode 100644 packages/tdesign-uniapp/components/result/_example/result-page.vue
 create mode 100644 packages/tdesign-uniapp/components/result/_example/result.less
 create mode 100644 packages/tdesign-uniapp/components/result/_example/result.vue
 create mode 100644 packages/tdesign-uniapp/components/result/_example/skyline/result.less
 create mode 100644 packages/tdesign-uniapp/components/result/_example/skyline/result.vue
 create mode 100644 packages/tdesign-uniapp/components/result/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/result/props.ts
 create mode 100644 packages/tdesign-uniapp/components/result/result.less
 create mode 100644 packages/tdesign-uniapp/components/result/result.vue
 create mode 100644 packages/tdesign-uniapp/components/result/type.ts
 create mode 100644 packages/tdesign-uniapp/components/row/computed.js
 create mode 100644 packages/tdesign-uniapp/components/row/props.ts
 create mode 100644 packages/tdesign-uniapp/components/row/row.less
 create mode 100644 packages/tdesign-uniapp/components/row/row.vue
 create mode 100644 packages/tdesign-uniapp/components/row/type.ts
 create mode 100644 packages/tdesign-uniapp/components/script/postinstall.js
 create mode 100644 packages/tdesign-uniapp/components/scroll-view/scroll-view.vue
 create mode 100644 packages/tdesign-uniapp/components/search/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/search/README.md
 create mode 100644 packages/tdesign-uniapp/components/search/_example/action/index.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/maxlength/index.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/other/index.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/search.less
 create mode 100644 packages/tdesign-uniapp/components/search/_example/search.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/shape/index.vue
 create mode 100644 packages/tdesign-uniapp/components/search/_example/skyline/search.less
 create mode 100644 packages/tdesign-uniapp/components/search/_example/skyline/search.vue
 create mode 100644 packages/tdesign-uniapp/components/search/computed.js
 create mode 100644 packages/tdesign-uniapp/components/search/props.ts
 create mode 100644 packages/tdesign-uniapp/components/search/search.less
 create mode 100644 packages/tdesign-uniapp/components/search/search.vue
 create mode 100644 packages/tdesign-uniapp/components/search/type.ts
 create mode 100644 packages/tdesign-uniapp/components/side-bar-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/side-bar-item/side-bar-item.less
 create mode 100644 packages/tdesign-uniapp/components/side-bar-item/side-bar-item.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/side-bar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/side-bar/README.md
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/side-bar.less
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/side-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/switch/index.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/_example/with-icon/index.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/side-bar/side-bar-item-props.ts
 create mode 100644 packages/tdesign-uniapp/components/side-bar/side-bar.less
 create mode 100644 packages/tdesign-uniapp/components/side-bar/side-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/side-bar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/skeleton/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/skeleton/README.md
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/animation/index.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/cell-group/index.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/grid/index.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/image-group/index.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/skeleton.less
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/skeleton.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.less
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/props.ts
 create mode 100644 packages/tdesign-uniapp/components/skeleton/skeleton.less
 create mode 100644 packages/tdesign-uniapp/components/skeleton/skeleton.vue
 create mode 100644 packages/tdesign-uniapp/components/skeleton/type.ts
 create mode 100644 packages/tdesign-uniapp/components/slider/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/slider/README.md
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/capsule/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/disabled/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/label/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/max/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/range/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/skyline/slider.less
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/skyline/slider.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/slider.less
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/slider.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/step/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/_example/vertical/index.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/computed.js
 create mode 100644 packages/tdesign-uniapp/components/slider/props.ts
 create mode 100644 packages/tdesign-uniapp/components/slider/slider.less
 create mode 100644 packages/tdesign-uniapp/components/slider/slider.vue
 create mode 100644 packages/tdesign-uniapp/components/slider/tool.ts
 create mode 100644 packages/tdesign-uniapp/components/slider/type.ts
 create mode 100644 packages/tdesign-uniapp/components/step-item/computed.js
 create mode 100644 packages/tdesign-uniapp/components/step-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/step-item/step-item.less
 create mode 100644 packages/tdesign-uniapp/components/step-item/step-item.vue
 create mode 100644 packages/tdesign-uniapp/components/step-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/stepper/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/stepper/README.md
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/min-max/index.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.less
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/stepper.less
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/stepper.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/props.ts
 create mode 100644 packages/tdesign-uniapp/components/stepper/stepper.less
 create mode 100644 packages/tdesign-uniapp/components/stepper/stepper.vue
 create mode 100644 packages/tdesign-uniapp/components/stepper/type.ts
 create mode 100644 packages/tdesign-uniapp/components/steps/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/steps/README.md
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/horizontal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/skyline/steps.less
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/skyline/steps.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/special/index.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/steps.less
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/steps.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/_example/vertical/index.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/props.ts
 create mode 100644 packages/tdesign-uniapp/components/steps/steps.less
 create mode 100644 packages/tdesign-uniapp/components/steps/steps.vue
 create mode 100644 packages/tdesign-uniapp/components/steps/type.ts
 create mode 100644 packages/tdesign-uniapp/components/sticky/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/sticky/README.md
 create mode 100644 packages/tdesign-uniapp/components/sticky/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/sticky/_example/container/index.vue
 create mode 100644 packages/tdesign-uniapp/components/sticky/_example/offset/index.vue
 create mode 100644 packages/tdesign-uniapp/components/sticky/_example/sticky.less
 create mode 100644 packages/tdesign-uniapp/components/sticky/_example/sticky.vue
 create mode 100644 packages/tdesign-uniapp/components/sticky/props.ts
 create mode 100644 packages/tdesign-uniapp/components/sticky/sticky.less
 create mode 100644 packages/tdesign-uniapp/components/sticky/sticky.vue
 create mode 100644 packages/tdesign-uniapp/components/sticky/type.ts
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/README.md
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/double/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/icon/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/left/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/right/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.less
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/computed.js
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/props.ts
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/swipe-cell.less
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/swipe-cell.vue
 create mode 100644 packages/tdesign-uniapp/components/swipe-cell/type.ts
 create mode 100644 packages/tdesign-uniapp/components/swiper-nav/props.ts
 create mode 100644 packages/tdesign-uniapp/components/swiper-nav/swiper-nav.less
 create mode 100644 packages/tdesign-uniapp/components/swiper-nav/swiper-nav.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper-nav/type.ts
 create mode 100644 packages/tdesign-uniapp/components/swiper/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/swiper/README.md
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/cards/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/fraction/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/nav-btn/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/skyline/swiper.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/swiper.less
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/swiper.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/_example/vertical/index.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/computed.js
 create mode 100644 packages/tdesign-uniapp/components/swiper/props.ts
 create mode 100644 packages/tdesign-uniapp/components/swiper/swiper.less
 create mode 100644 packages/tdesign-uniapp/components/swiper/swiper.vue
 create mode 100644 packages/tdesign-uniapp/components/swiper/type.ts
 create mode 100644 packages/tdesign-uniapp/components/switch/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/switch/README.md
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/color/index.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/label/index.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/skyline/switch.less
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/skyline/switch.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/switch.less
 create mode 100644 packages/tdesign-uniapp/components/switch/_example/switch.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/props.ts
 create mode 100644 packages/tdesign-uniapp/components/switch/switch.less
 create mode 100644 packages/tdesign-uniapp/components/switch/switch.vue
 create mode 100644 packages/tdesign-uniapp/components/switch/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-bar-item/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.less
 create mode 100644 packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar-item/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/README.md
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/badge/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/icon-only/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/round/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.less
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/sub/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.less
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/_example/text-only/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/tab-bar.less
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/tab-bar.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-bar/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-panel/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tab-panel/tab-panel.less
 create mode 100644 packages/tdesign-uniapp/components/tab-panel/tab-panel.vue
 create mode 100644 packages/tdesign-uniapp/components/tab-panel/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tabs/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/tabs/README.md
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/scroll/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/tabs.less
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/tabs.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/with-badge/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/with-content/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/_example/with-icon/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/computed.js
 create mode 100644 packages/tdesign-uniapp/components/tabs/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tabs/tabs.less
 create mode 100644 packages/tdesign-uniapp/components/tabs/tabs.vue
 create mode 100644 packages/tdesign-uniapp/components/tabs/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tag/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/tag/README.md
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/checkable/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/closable/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/size/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/skyline/tag.less
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/skyline/tag.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/tag.less
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/tag.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/_example/type/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tag/tag.less
 create mode 100644 packages/tdesign-uniapp/components/tag/tag.vue
 create mode 100644 packages/tdesign-uniapp/components/tag/type.ts
 create mode 100644 packages/tdesign-uniapp/components/tdesign-uniapp/tdesign-uniapp.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/textarea/README.md
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/autosize/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/card/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/disabled/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/label/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/maxcharacter/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/maxlength/index.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.less
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/textarea.less
 create mode 100644 packages/tdesign-uniapp/components/textarea/_example/textarea.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/computed.js
 create mode 100644 packages/tdesign-uniapp/components/textarea/props.ts
 create mode 100644 packages/tdesign-uniapp/components/textarea/textarea.less
 create mode 100644 packages/tdesign-uniapp/components/textarea/textarea.vue
 create mode 100644 packages/tdesign-uniapp/components/textarea/type.ts
 create mode 100644 packages/tdesign-uniapp/components/toast/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/toast/README.md
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/close/index.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/cover/index.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/skyline/toast.less
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/skyline/toast.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/theme/index.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/toast.less
 create mode 100644 packages/tdesign-uniapp/components/toast/_example/toast.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/index.ts
 create mode 100644 packages/tdesign-uniapp/components/toast/props.ts
 create mode 100644 packages/tdesign-uniapp/components/toast/toast.less
 create mode 100644 packages/tdesign-uniapp/components/toast/toast.vue
 create mode 100644 packages/tdesign-uniapp/components/toast/type.ts
 create mode 100644 packages/tdesign-uniapp/components/transition/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/transition/README.md
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/api.md
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/appear/index.vue
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/custom/index.less
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/custom/index.vue
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/destroy/index.vue
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/transition.less
 create mode 100644 packages/tdesign-uniapp/components/transition/_example/transition.vue
 create mode 100644 packages/tdesign-uniapp/components/transition/props.js
 create mode 100644 packages/tdesign-uniapp/components/transition/transition.less
 create mode 100644 packages/tdesign-uniapp/components/transition/transition.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/tree-select/README.md
 create mode 100644 packages/tdesign-uniapp/components/tree-select/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/_example/normal/index.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/_example/tree-select.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/computed.js
 create mode 100644 packages/tdesign-uniapp/components/tree-select/props.ts
 create mode 100644 packages/tdesign-uniapp/components/tree-select/tree-select.less
 create mode 100644 packages/tdesign-uniapp/components/tree-select/tree-select.vue
 create mode 100644 packages/tdesign-uniapp/components/tree-select/type.ts
 create mode 100644 packages/tdesign-uniapp/components/types/action-sheet.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/avatar-group.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/avatar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/back-top.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/badge.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/button.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/calendar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/cascader.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/cell-group.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/cell.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/check-tag.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/checkbox-group.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/checkbox.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/col.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/collapse-panel.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/collapse.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/color-picker.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/count-down.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/date-time-picker.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/dialog.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/divider.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/drawer.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/dropdown-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/dropdown-menu.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/empty.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/fab.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/footer.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/form-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/form.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/grid-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/grid.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/guide.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/icon.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/image-viewer.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/image.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/index.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/indexes-anchor.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/indexes.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/input.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/link.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/loading.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/message.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/navbar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/notice-bar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/overlay.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/picker-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/picker.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/popup.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/progress.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/pull-down-refresh.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/qrcode.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/radio-group.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/radio.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/rate.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/result.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/row.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/search.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/side-bar-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/side-bar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/skeleton.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/slider.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/step-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/stepper.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/steps.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/sticky.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/swipe-cell.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/swiper-nav.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/swiper.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/switch.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tab-bar-item.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tab-bar.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tab-panel.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tabs.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tag.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/textarea.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/toast.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/tree-select.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/upload.d.ts
 create mode 100644 packages/tdesign-uniapp/components/types/watermark.d.ts
 create mode 100644 packages/tdesign-uniapp/components/upload/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/upload/README.md
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/drag/index.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/messageFile/index.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/multiple/index.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/single/index.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/status/index.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/upload.less
 create mode 100644 packages/tdesign-uniapp/components/upload/_example/upload.vue
 create mode 100644 packages/tdesign-uniapp/components/upload/drag.computed.js
 create mode 100644 packages/tdesign-uniapp/components/upload/props.ts
 create mode 100644 packages/tdesign-uniapp/components/upload/type.ts
 create mode 100644 packages/tdesign-uniapp/components/upload/upload.computed.js
 create mode 100644 packages/tdesign-uniapp/components/upload/upload.less
 create mode 100644 packages/tdesign-uniapp/components/upload/upload.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/README.en-US.md
 create mode 100644 packages/tdesign-uniapp/components/watermark/README.md
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/base/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/gray/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/image/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/layout/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/move-image/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/move-text/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/multi-line-gray/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/multi-line/index.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/watermark.less
 create mode 100644 packages/tdesign-uniapp/components/watermark/_example/watermark.vue
 create mode 100644 packages/tdesign-uniapp/components/watermark/props.ts
 create mode 100644 packages/tdesign-uniapp/components/watermark/type.ts
 create mode 100644 packages/tdesign-uniapp/components/watermark/utils/generateBase64Url.js
 create mode 100644 packages/tdesign-uniapp/components/watermark/utils/randomMovingStyle.js
 create mode 100644 packages/tdesign-uniapp/components/watermark/watermark.less
 create mode 100644 packages/tdesign-uniapp/components/watermark/watermark.vue
 create mode 100644 packages/tdesign-uniapp/example/.env.production
 create mode 100644 packages/tdesign-uniapp/example/docs/img/github-pages.png
 create mode 100644 packages/tdesign-uniapp/example/docs/img/tdesign-uniapp-mp.png
 create mode 100644 packages/tdesign-uniapp/example/index.html
 create mode 100644 packages/tdesign-uniapp/example/package.json
 create mode 100644 packages/tdesign-uniapp/example/script/deploy/cdn.js
 create mode 100644 packages/tdesign-uniapp/example/script/deploy/local.env.js
 create mode 100644 packages/tdesign-uniapp/example/script/deploy/mine-doc.js
 create mode 100644 packages/tdesign-uniapp/example/script/deploy/publish.sh
 create mode 100644 packages/tdesign-uniapp/example/script/pages/config.js
 create mode 100644 packages/tdesign-uniapp/example/script/pages/index.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/config.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/core.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/less.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/prepare.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/publish-core.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp-chat.js
 create mode 100644 packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
 create mode 100644 packages/tdesign-uniapp/example/script/sync/demo-vue-css.js
 create mode 100644 packages/tdesign-uniapp/example/script/sync/doc-common-design.js
 create mode 100644 packages/tdesign-uniapp/example/script/sync/doc-component.js
 create mode 100644 packages/tdesign-uniapp/example/script/sync/doc-format.js
 create mode 100644 packages/tdesign-uniapp/example/script/sync/less.js
 create mode 100644 packages/tdesign-uniapp/example/script/utils/components.js
 create mode 100644 packages/tdesign-uniapp/example/script/utils/utils.js
 create mode 100644 packages/tdesign-uniapp/example/script/watch/config.js
 create mode 100644 packages/tdesign-uniapp/example/script/watch/core.js
 create mode 100644 packages/tdesign-uniapp/example/script/watch/init.js
 create mode 100644 packages/tdesign-uniapp/example/script/watch/types.js
 create mode 100644 packages/tdesign-uniapp/example/script/watch/watch.js
 create mode 100644 packages/tdesign-uniapp/example/src/App.vue
 create mode 100644 packages/tdesign-uniapp/example/src/components/pull-down-list/index.less
 create mode 100644 packages/tdesign-uniapp/example/src/components/pull-down-list/index.vue
 create mode 100644 packages/tdesign-uniapp/example/src/components/trd-privacy/index.less
 create mode 100644 packages/tdesign-uniapp/example/src/components/trd-privacy/index.vue
 create mode 100644 packages/tdesign-uniapp/example/src/env.d.ts
 create mode 100644 packages/tdesign-uniapp/example/src/main.ts
 create mode 100644 packages/tdesign-uniapp/example/src/manifest.json
 create mode 100644 packages/tdesign-uniapp/example/src/mixins/demo-base.js
 create mode 100644 packages/tdesign-uniapp/example/src/mixins/skyline.js
 create mode 100644 packages/tdesign-uniapp/example/src/pages.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/base.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/chat.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/display.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/form.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/index.ts
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/nav.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/data/ux.json
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/home.less
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/home.vue
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.less
 create mode 100644 packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.vue
 create mode 100644 packages/tdesign-uniapp/example/src/shime-uni.d.ts
 create mode 100644 packages/tdesign-uniapp/example/src/style/app.less
 create mode 100644 packages/tdesign-uniapp/example/src/uni.scss
 create mode 100644 packages/tdesign-uniapp/example/vite.config.ts
 create mode 100644 packages/tdesign-uniapp/package.json
 create mode 100644 packages/tdesign-uniapp/shims-uni.d.ts
 create mode 100644 packages/tdesign-uniapp/site/.env.intranet
 create mode 100644 packages/tdesign-uniapp/site/.env.preview
 create mode 100644 packages/tdesign-uniapp/site/.env.production
 create mode 100644 packages/tdesign-uniapp/site/docs.config.js
 create mode 100644 packages/tdesign-uniapp/site/docs/custom-style.md
 create mode 100644 packages/tdesign-uniapp/site/docs/custom-theme.md
 create mode 100644 packages/tdesign-uniapp/site/docs/dark-mode.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/action-sheet.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/avatar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/back-top.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/badge.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/button.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/calendar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/cascader.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/cell.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/checkbox.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/collapse.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/count-down.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/date-time-picker.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/dialog.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/divider.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/drawer.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/dropdown-menu.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/empty.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/fab.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/footer.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/grid.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/image-viewer.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/image.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/indexes.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/input.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/link.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/loading.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/message.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/navbar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/notice-bar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/picker.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/popup.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/progress.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/pull-down-refresh.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/radio.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/rate.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/result.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/search.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/side-bar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/skeleton.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/slider.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/stepper.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/steps.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/swipe-cell.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/swiper.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/switch.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/tab-bar.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/tabs.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/tag.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/textarea.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/toast.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/tree-select.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/upload.md
 create mode 100644 packages/tdesign-uniapp/site/docs/design/watermark.md
 create mode 100644 packages/tdesign-uniapp/site/docs/faq.md
 create mode 100644 packages/tdesign-uniapp/site/docs/getting-started.en-US.md
 create mode 100644 packages/tdesign-uniapp/site/docs/getting-started.md
 create mode 100644 packages/tdesign-uniapp/site/docs/overview.en-US.md
 create mode 100644 packages/tdesign-uniapp/site/docs/overview.md
 create mode 100644 packages/tdesign-uniapp/site/index.html
 create mode 100644 packages/tdesign-uniapp/site/mobile.html
 create mode 100644 packages/tdesign-uniapp/site/package.json
 create mode 100644 packages/tdesign-uniapp/site/styles/mixins/index.less
 create mode 100644 packages/tdesign-uniapp/site/styles/mixins/text.less
 create mode 100644 packages/tdesign-uniapp/site/styles/mobile/components.less
 create mode 100644 packages/tdesign-uniapp/site/styles/mobile/demo.less
 create mode 100644 packages/tdesign-uniapp/site/styles/mobile/index.less
 create mode 100644 packages/tdesign-uniapp/site/styles/vars.less
 create mode 100644 packages/tdesign-uniapp/site/vite.config.ts
 create mode 100644 packages/tdesign-uniapp/site/web/app.vue
 create mode 100644 packages/tdesign-uniapp/site/web/main.ts
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/components.ts
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/index.ts
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/libs.ts
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/types.ts
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/changelog-to-json/index.js
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/demo.js
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/index.js
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
 create mode 100644 packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/transforms.js
 create mode 100644 packages/tdesign-uniapp/site/web/router.ts
 create mode 100644 packages/tdesign-uniapp/site/web/stackblitz/content.ts
 create mode 100644 packages/tdesign-uniapp/site/web/stackblitz/index.vue
 create mode 100644 packages/tdesign-uniapp/site/web/test-coverage.js
 create mode 100644 packages/tdesign-uniapp/site/web/utils.ts
 create mode 100644 packages/tdesign-uniapp/tsconfig.eslint.json

diff --git a/.gitignore b/.gitignore
index dd585b279..886d7061a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@ _wechatide
 _example
 !packages/components/**/_example/
 !packages/pro-components/**/_example/
+!packages/tdesign-uniapp/**/_example/
+!packages/tdesign-uniapp-chat/**/_example/
 
 packages/tdesign-miniprogram/example/pages/*
 !packages/tdesign-miniprogram/example/pages/gulp-error
@@ -14,6 +16,12 @@ packages/tdesign-miniprogram/test/e2e
 packages/tdesign-miniprogram/test/unit
 packages/tdesign-miniprogram/test/unit-virtualHost
 
+packages/tdesign-uniapp/example/src/_tdesign
+packages/tdesign-uniapp/example/src/_tdesign-raw/
+packages/tdesign-uniapp/example/src/pages-more/
+packages/tdesign-uniapp/npm_dist/
+packages/tdesign-uniapp-chat/npm_dist/
+
 .DS_Store
 node_modules
 package-lock.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 130dfdf9d..81d8aba50 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -46,5 +46,10 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["stylelint", "cascader"]
+  "cSpell.words": [
+    "stylelint", 
+    "cascader",
+    "tdesign",
+    "uniapp",
+  ]
 }
diff --git a/package.json b/package.json
index 07ab535f8..72abe6683 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "cross-env NODE_ENV=development gulp dev --gulpfile script/gulpfile.js --cwd ./",
+    "uniapp": "pnpm -C packages/tdesign-uniapp",
+    "uniapp:chat": "pnpm -C packages/tdesign-uniapp",
     "build": "cross-env NODE_ENV=production gulp build --gulpfile script/gulpfile.js --cwd ./",
     "build:dist": "gulp --gulpfile script/gulpfile.dist.js --cwd ./",
     "build:example": "gulp --gulpfile script/gulpfile.example.js --cwd ./",
diff --git a/packages/tdesign-uniapp-chat/.eslintignore b/packages/tdesign-uniapp-chat/.eslintignore
new file mode 100644
index 000000000..865dc3fbd
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/.eslintignore
@@ -0,0 +1,17 @@
+unpackage
+node_modules/
+coverage
+static/common/*
+
+dist/
+/log/
+!.vuepress
+
+uni_modules/
+miniprogram_npm/
+packages/tdesign/npm/
+packages/tdesign-uniapp-chat/npm/
+packages/tdesign-uniapp-chat/chat-list/_example/ec-canvas/echarts.js
+
+*.html
+!.stylelintrc.js
diff --git a/packages/tdesign-uniapp-chat/.eslintrc.js b/packages/tdesign-uniapp-chat/.eslintrc.js
new file mode 100644
index 000000000..ff525544c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  extends: ['eslint-config-light-vue3'],
+  globals: {
+    getCurrentPages: true,
+    uni: true,
+    globalThis: true,
+    qq: true,
+    weex: true,
+    plus: true,
+    getApp: true,
+  },
+  parserOptions: {
+    project: 'tsconfig.eslint.json',
+    // https://stackoverflow.com/questions/77792745/fatalerror-error-ts6046-argument-for-moduleresolution-option-must-be-nod
+    tsconfigRootDir: __dirname,
+
+    ecmaVersion: 'latest',
+    extraFileExtensions: ['.vue'],
+  },
+  rules: {
+    'vue/no-v-text-v-html-on-component': 0,
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/.npmrc b/packages/tdesign-uniapp-chat/components/.npmrc
new file mode 100644
index 000000000..214c29d13
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/packages/tdesign-uniapp-chat/components/CHANGELOG.md b/packages/tdesign-uniapp-chat/components/CHANGELOG.md
new file mode 100644
index 000000000..373129337
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/CHANGELOG.md
@@ -0,0 +1,11 @@
+---
+title: 更新日志
+spline: explain
+toc: false
+docClass: timeline
+---
+
+## 🌈 0.1.1 `2025-11-17` 
+### 🐞 Bug Fixes
+- `Attachments`: 修复图标点击事件冒泡问题 @novlan1 ([#72](https://github.com/novlan1/tdesign-uniapp/pull/72))
+
diff --git a/packages/tdesign-uniapp-chat/components/LICENSE b/packages/tdesign-uniapp-chat/components/LICENSE
new file mode 100644
index 000000000..bce416bd7
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2021-present novlan1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/tdesign-uniapp-chat/components/README.md b/packages/tdesign-uniapp-chat/components/README.md
new file mode 100644
index 000000000..ef0b45ec9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/README.md
@@ -0,0 +1,108 @@
+
+<p align="center">
+  <a href="https://tdesign.tencent.com/" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/site/TDesign.png">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/novlan1/tdesign-uniapp/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-uniapp.svg?sanitize=true" alt="License">
+  </a>
+  <a href="https://www.npmjs.com/package/tdesign-uniapp">
+    <img src="https://img.shields.io/npm/v/tdesign-uniapp.svg?sanitize=true" alt="Version">
+  </a>
+  <a href="https://www.npmjs.com/package/tdesign-uniapp-chat">
+    <img src="https://img.shields.io/npm/dm/tdesign-uniapp-chat" alt="Downloads">
+  </a>
+  <a href="https://pkg.pr.new/~/novlan1/tdesign-uniapp">
+    <img src="https://pkg.pr.new/badge/novlan1/tdesign-uniapp?style=flat&color=000&logoSize=auto" alt="Downloads">
+  </a>
+  <a href="https://deepwiki.com/novlan1/tdesign-uniapp">
+    <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki">
+  </a>
+</p>
+
+[TDesign Chat](https://github.com/Tencent/tdesign) 适配 [uniapp](https://uniapp.dcloud.net.cn/) 的组件库。
+
+## 文档
+
+[点此查看](https://uwayfly.com/tdesign-uniapp-chat/)
+
+## 预览
+
+扫码查看 ↓
+
+<img src="https://cdn.uwayfly.com/tdesign-uniapp/tdesign-uniapp-qrcodes.png?a=3" width="600" />
+
+> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
+
+## 安装
+
+### NPM 方式
+
+```bash
+npm i tdesign-uniapp-chat
+```
+
+### UNI_MODULES 方式
+
+已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp-chat) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
+
+## 使用
+
+1. 在 `main.ts` 中引入样式文件
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+2. 在文件中使用
+
+```html
+<template>
+  <t-chat-list />
+</template>
+
+<script lang="ts" setup>
+import TChatList from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+</script>
+```
+
+只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+
+## 编辑器提示
+
+安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+
+推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/tdesign-uniapp-chat/global.d.ts`，即可实现该效果。
+
+## 平台兼容性
+
+| 平台         | Vue2 | Vue3 | H5  | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
+| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
+| **支持情况** | ✅    | ✅    | ✅   | ✅       | ✅   | ⚠️        | ✅          |  ⚠️        |
+
+## 浏览器兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |[<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" />]()<br/>Android Browser|
+| --------- | --------- | --------- | --------- | --------- |--------- |
+| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
+
+详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
+
+## 反馈
+
+有任何问题，建议通过 [Github issues](https://github.com/novlan1/tdesign-uniapp/issues) 反馈或扫码加入用户微信群。
+
+<img src="https://raw.githubusercontent.com/Tencent/tdesign/main/packages/site-components/src/images/groups/wx-group.png" width="200" />
+
+## 开源协议
+
+TDesign 遵循 [MIT 协议](https://github.com/novlan1/tdesign-uniapp/blob/develop/LICENSE)。
diff --git a/packages/tdesign-uniapp-chat/components/attachments/README.en-US.md b/packages/tdesign-uniapp-chat/components/attachments/README.en-US.md
new file mode 100644
index 000000000..28ce14ca8
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/README.en-US.md
@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+
+### Attachments Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+addable | Boolean | true | \- | N
+image-viewer | Boolean | true | \- | N
+items | Array | [] | required。Typescript: `FileItem[]` `interface FileItem { fileType: 'image'\|'video'\|'audio'\|'pdf'\|'doc'\|'ppt'\|'txt'; name: string; url: string; size: number; status?: 'success'\|'fail'\|'pending'\|'error'; progress?: number; errorMessage?: string; fileIcon?: string; width?: number; height?: number; mode?: 'aspectFit' \| 'aspectFill' \| 'widthFix' \| 'heightFix' \| 'scaleToFill'}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/attachments/type.ts) | Y
+removable | Boolean | true | \- | N
+
+### Attachments Events
+
+name | params | description
+-- | -- | --
+add | \- | \-
+file-click | `(item: FileItem)` | \-
+remove | `(item: FileItem, index: number)` | \-
diff --git a/packages/tdesign-uniapp-chat/components/attachments/README.md b/packages/tdesign-uniapp-chat/components/attachments/README.md
new file mode 100644
index 000000000..b9c7d47ed
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/README.md
@@ -0,0 +1,55 @@
+---
+title: Attachments 文件附件
+description: 用于聊天场景中上传、预览和管理附件的组件。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+```
+
+### 01 组件类型
+
+#### 图片类型
+
+{{ base }}
+
+#### 文件类型
+
+{{ file }}
+
+### 02 组件状态
+
+#### 图片类型加载状态
+
+{{ image-loading }}
+
+#### 文件类型加载状态
+
+{{ file-loading }}
+
+## API
+
+### Attachments Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+addable | Boolean | true | 【讨论中】是否显示添加按钮 | N
+image-viewer | Boolean | true | 是否启用图片预览功能 | N
+items | Array | [] | 必需。附件列表。TS 类型：`FileItem[]` `interface FileItem { fileType: 'image'\|'video'\|'audio'\|'pdf'\|'doc'\|'ppt'\|'txt'; name: string; url: string; size: number; status?: 'success'\|'fail'\|'pending'\|'error'; progress?: number; errorMessage?: string; fileIcon?: string; width?: number; height?: number; mode?: 'aspectFit' \| 'aspectFill' \| 'widthFix' \| 'heightFix' \| 'scaleToFill'}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/attachments/type.ts) | Y
+removable | Boolean | true | 是否显示删除按钮 | N
+
+### Attachments Events
+
+名称 | 参数 | 描述
+-- | -- | --
+add | \- | 点击添加按钮时触发
+file-click | `(item: FileItem)` | 点击文件时触发
+remove | `(item: FileItem, index: number)` | 点击删除按钮时触发
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/attachments.less b/packages/tdesign-uniapp-chat/components/attachments/_example/attachments.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/attachments.vue b/packages/tdesign-uniapp-chat/components/attachments/_example/attachments.vue
new file mode 100644
index 000000000..0bba80c35
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/_example/attachments.vue
@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="Attachments"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="Attachments 文件附件"
+        desc="用于聊天场景中上传、预览和管理附件的组件。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="图片类型"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="文件类型">
+        <file />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="图片类型加载状态"
+      >
+        <imageLoading />
+      </t-demo>
+      <t-demo desc="文件类型加载状态">
+        <fileLoading />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import baseDemo from './base/index.vue';
+import fileLoading from './file-loading/index.vue';
+import imageLoading from './image-loading/index.vue';
+import file from './file/index.vue';
+
+export default {
+  components: {
+    baseDemo,
+    fileLoading,
+    imageLoading,
+    file,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './attachments.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/attachments/_example/base/index.vue
new file mode 100644
index 000000000..fdde200a6
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/_example/base/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-attachments
+        :items="items"
+        @fileClick="onFileClick"
+        @remove="onRemove"
+        @add="onAdd"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+export default {
+  components: {
+    tAttachments,
+  },
+  data() {
+    return {
+      items: [
+        {
+          fileType: 'image',
+          name: 'sample-image.jpg',
+          url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+          size: 1024,
+          status: 'success',
+        },
+      ],
+    };
+  },
+  methods: {
+    onFileClick(e) {
+      const { item } = e;
+      console.log('点击文件:', item);
+      uni.showToast({
+        title: `点击了${item.name}`,
+        icon: 'none',
+      });
+    },
+
+    onRemove(e) {
+      const { item, index } = e;
+      console.log('删除文件:', e, item, '索引:', index);
+
+      // 从列表中移除文件
+      const newItems = [...this.items];
+      newItems.splice(index, 1);
+      this.items = newItems;
+
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+      });
+    },
+
+    onAdd() {
+      console.log('点击添加按钮');
+      uni.showToast({
+        title: '点击了添加按钮',
+        icon: 'none',
+      });
+
+      // 模拟添加新文件
+      const newFile = {
+        fileType: 'txt',
+        name: `新文件${this.items.length + 1}.txt`,
+        url: 'https://example.com/newfile.txt',
+        size: 256,
+        status: 'success',
+      };
+
+      this.items = [...this.items, newFile];
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/file-loading/index.vue b/packages/tdesign-uniapp-chat/components/attachments/_example/file-loading/index.vue
new file mode 100644
index 000000000..a791d60ad
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/_example/file-loading/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-attachments
+        :items="items"
+        @fileClick="onFileClick"
+        @remove="onRemove"
+        @add="onAdd"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+export default {
+  components: {
+    tAttachments,
+  },
+  data() {
+    return {
+      items: [
+        {
+          fileType: 'doc',
+          name: 'word-file.doc',
+          url: 'https://example.com/word-file.doc',
+          size: 222859,
+          status: 'pending',
+        },
+      ],
+    };
+  },
+  methods: {
+    onFileClick(e) {
+      const { item } = e;
+      console.log('点击文件:', item);
+      uni.showToast({
+        title: `点击了${item.name}`,
+        icon: 'none',
+      });
+    },
+
+    onRemove(e) {
+      const { item, index } = e;
+      console.log('删除文件:', e, item, '索引:', index);
+
+      // 从列表中移除文件
+      const newItems = [...this.items];
+      newItems.splice(index, 1);
+
+      this.items = newItems;
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+      });
+    },
+
+    onAdd() {
+      console.log('点击添加按钮');
+      uni.showToast({
+        title: '点击了添加按钮',
+        icon: 'none',
+      });
+
+      // 模拟添加新文件
+      const newFile = {
+        fileType: 'txt',
+        name: `新文件${this.items.length + 1}.txt`,
+        url: 'https://example.com/newfile.txt',
+        size: 256,
+        status: 'success',
+      };
+
+      this.items = [...this.items, newFile];
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/file/index.vue b/packages/tdesign-uniapp-chat/components/attachments/_example/file/index.vue
new file mode 100644
index 000000000..e5f10afc4
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/_example/file/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <view class="chat-example">
+    <!-- 有效的示例，呈现效果为 单行滚动 -->
+    <!-- <view class="chat-example-block">
+    <t-attachments items="{{items}}" bind:fileClick="onFileClick" bind:remove="onRemove" bind:add="onAdd" />
+  </view> -->
+
+    <view
+      v-for="(item, index) in items"
+      :key="index"
+      class="chat-example-block"
+    >
+      <t-attachments
+        :items="[item]"
+        @fileClick="onFileClick"
+        @remove="onRemove"
+        @add="onAdd"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+export default {
+  components: {
+    tAttachments,
+  },
+  data() {
+    return {
+      items: [
+        {
+          fileType: 'doc',
+          name: 'word-file.doc',
+          url: 'https://example.com/word-file.doc',
+          size: 222859,
+          status: 'success',
+        },
+        {
+          fileType: 'excel',
+          name: 'excel-file.xlsx',
+          url: 'https://example.com/excel-file.xlsx',
+          size: 222859,
+          status: 'success',
+        },
+        {
+          fileType: 'pdf',
+          name: 'pdf-file.pdf',
+          url: 'https://example.com/pdf-file.pdf',
+          size: 222859,
+          status: 'success',
+        },
+        {
+          fileType: 'ppt',
+          name: 'ppt-file.pptx',
+          url: 'https://example.com/ppt-file.pptx',
+          size: 222859,
+          status: 'success',
+        },
+        {
+          fileType: 'video',
+          name: 'video-file.mp4',
+          url: 'https://example.com/video-file.mp4',
+          size: 222859,
+          status: 'success',
+        },
+        {
+          fileType: 'file',
+          name: 'file',
+          url: 'https://example.com/audio-file.mp3',
+          size: 222859,
+          status: 'success',
+        },
+      ],
+    };
+  },
+  methods: {
+    onFileClick(e) {
+      const { item } = e;
+      console.log('点击文件:', item);
+      uni.showToast({
+        title: `点击了${item.name}`,
+        icon: 'none',
+      });
+    },
+
+    onRemove(e) {
+      const { item, index } = e;
+      console.log('删除文件:', e, item, '索引:', index);
+
+      // 从列表中移除文件
+      const newItems = [...this.items];
+      newItems.splice(index, 1);
+
+      this.items = newItems;
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+      });
+    },
+
+    onAdd() {
+      console.log('点击添加按钮');
+      uni.showToast({
+        title: '点击了添加按钮',
+        icon: 'none',
+      });
+
+      // 模拟添加新文件
+      const newFile = {
+        fileType: 'txt',
+        name: `新文件${this.items.length + 1}.txt`,
+        url: 'https://example.com/newfile.txt',
+        size: 256,
+        status: 'success',
+      };
+
+      this.items = [...this.items, newFile];
+    },
+  },
+};
+</script>
+<style>
+.chat-example {
+    padding: 32rpx;
+    box-sizing: border-box;
+    background-color: var(--td-bg-color-container);
+}
+
+.chat-example-block {
+    display: inline-flex;
+    width: 336rpx;
+    margin-bottom: 26rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/_example/image-loading/index.vue b/packages/tdesign-uniapp-chat/components/attachments/_example/image-loading/index.vue
new file mode 100644
index 000000000..629341e6b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/_example/image-loading/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-attachments
+        :items="items"
+        @fileClick="onFileClick"
+        @remove="onRemove"
+        @add="onAdd"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+export default {
+  components: {
+    tAttachments,
+  },
+  data() {
+    return {
+      items: [
+        {
+          fileType: 'image',
+          name: 'sample-image.jpg',
+          url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+          size: 1024,
+          status: 'pending',
+        },
+      ],
+    };
+  },
+  methods: {
+    onFileClick(e) {
+      const { item } = e;
+      console.log('点击文件:', item);
+      uni.showToast({
+        title: `点击了${item.name}`,
+        icon: 'none',
+      });
+    },
+
+    onRemove(e) {
+      const { item, index } = e;
+      console.log('删除文件:', e, item, '索引:', index);
+
+      // 从列表中移除文件
+      const newItems = [...this.items];
+      newItems.splice(index, 1);
+
+      this.items = newItems;
+      uni.showToast({
+        title: '删除成功',
+        icon: 'success',
+      });
+    },
+
+    onAdd() {
+      console.log('点击添加按钮');
+      uni.showToast({
+        title: '点击了添加按钮',
+        icon: 'none',
+      });
+
+      // 模拟添加新文件
+      const newFile = {
+        fileType: 'txt',
+        name: `新文件${this.items.length + 1}.txt`,
+        url: 'https://example.com/newfile.txt',
+        size: 256,
+        status: 'success',
+      };
+
+      this.items = [...this.items, newFile];
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/attachments.less b/packages/tdesign-uniapp-chat/components/attachments/attachments.less
new file mode 100644
index 000000000..30c80c21c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/attachments.less
@@ -0,0 +1,250 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@attachments: ~'@{prefix}-attachments';
+
+@attachments-background-color: @bg-color-secondarycontainer;
+@attachments-file-margin: 16rpx;
+@attachments-file-margin-tiny: 8rpx;
+@attachments-file-padding: 24rpx;
+@attachments-file-image-size: 104rpx;
+@attachments-file-width: 256rpx;
+@attachments-file-height: 104rpx;
+@attachments-file-icon-size: 64rpx;
+@attachments-title-color: @text-color-primary;
+@attachments-desc-color: @text-color-placeholder;
+@attachments-title-font-size: 28rpx;
+@attachments-desc-font-size: 24rpx;
+@attachments-title-line-height: 44rpx;
+@attachments-desc-line-height: 40rpx;
+@attachments-title-margin-bottom: -2rpx;
+
+.@{attachments} {
+  display: flex;
+  width: 100%;
+  height: auto;
+
+  // 可滚动内容区域
+  &__scrollable {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  // 滚动容器样式
+  .scroll-x {
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Chrome, Safari, Opera */
+    }
+  }
+
+  // 换行容器样式
+  .wrap {
+    flex-wrap: wrap;
+    overflow-x: hidden;
+  }
+
+  // 左侧内容区域
+  &__left {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  // 文件状态样式
+  &__file {
+    &--pending,
+    &--fail,
+    &--error,
+    &--success {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      border-radius: @radius-extraLarge;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // 文件包装器
+  &__files {
+    box-sizing: border-box;
+    margin-left: @attachments-file-margin;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+
+  // 文件项样式
+  &__file {
+    border-radius: @radius-extraLarge;
+    display: block;
+    position: relative;
+    background-color: @attachments-background-color;
+
+    // 仅当有删除按钮时，增加上边距
+    &--removable {
+      margin-top: @attachments-file-margin-tiny;
+    }
+
+    // 删除按钮样式
+    .@{attachments}__remove {
+      background-color: @text-color-primary;
+      color: @bg-color-container;
+      border-radius: @radius-circle;
+      position: absolute;
+      right: -4px;
+      top: -4px;
+    }
+
+    // 图片文件样式 适配图片附件在聊天中的特殊样式
+    &.file-image {
+      width: @attachments-file-image-size;
+      height: @attachments-file-image-size;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        border-radius: @radius-extraLarge;
+      }
+    }
+
+    // 普通文件样式
+    &.file {
+      width: @attachments-file-width;
+      height: @attachments-file-height;
+      display: flex;
+      align-items: stretch;
+      justify-content: flex-start;
+      padding: 0 @attachments-file-padding;
+
+      .image {
+        width: @attachments-file-icon-size;
+        height: auto;
+        box-sizing: border-box;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .@{attachments}__content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        margin-left: @attachments-file-margin;
+
+        .@{attachments}__title {
+          width: 100%;
+          color: @attachments-title-color;
+          font-size: @attachments-title-font-size;
+          font-style: normal;
+          font-weight: 400;
+          line-height: @attachments-title-line-height;
+          /* 核心：单行溢出隐藏 + 显示省略号（兼容全浏览器） */
+          white-space: nowrap; /* 强制文字在一行显示，不换行 */
+          overflow: hidden; /* 超出容器部分隐藏 */
+          text-overflow: ellipsis; /* 超出部分显示“...” */
+          /* 移除冗余属性：原 -webkit-box 相关属性与 nowrap 冲突，且单行场景无需 */
+          margin-bottom: @attachments-title-margin-bottom;
+          padding: 0;
+        }
+
+        .@{attachments}__desc {
+          width: 100%;
+          color: @attachments-desc-color;
+          font-size: @attachments-desc-font-size;
+          font-style: normal;
+          font-weight: 400;
+          line-height: @attachments-desc-line-height;
+          margin-top: -4rpx;
+        }
+      }
+    }
+  }
+}
+
+// 对话中附件样式覆盖
+.@{attachments}--chatting {
+
+  &.all_images {
+    width: 100%;
+
+    .file-image.@{attachments}__file {
+      background-color: transparent !important;
+    }
+    .file-image {
+      width: auto;
+      height: auto;
+
+      .image {
+        max-width: 400rpx;
+        max-height: 400rpx;
+        border-radius: @radius-extraLarge;
+      }
+    }
+  }
+
+  &.all_files {
+    width: auto;
+
+    .@{attachments}__files:not(:last-child) {
+      margin-bottom: @attachments-file-margin;
+    }
+
+    .file-image.@{attachments}__file {
+      background-color: transparent !important;
+    }
+    .file-image {
+      width: auto;
+      height: auto;
+
+      .image {
+        max-width: 400rpx;
+        max-height: 400rpx;
+        border-radius: @radius-extraLarge;
+      }
+    }
+    .@{attachments}__files {
+      margin-left: 0;
+    }
+    .@{attachments}__scrollable {
+      display: contents;
+    }
+    .file.@{attachments}__file {
+      width: 352rpx;
+    }
+  }
+}
+
+// 右侧布局下的附件样式
+.@{prefix}-chat__inner.right {
+  .@{attachments}--chatting {
+    .file-image.@{attachments}__file {
+      text-align: right;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/attachments/attachments.vue b/packages/tdesign-uniapp-chat/components/attachments/attachments.vue
new file mode 100644
index 000000000..528eef471
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/attachments.vue
@@ -0,0 +1,349 @@
+<template>
+  <view
+    :class="[classPrefix, inChat ? classPrefix + '--chatting' : '', getFileTypeClass(inChat, files)]"
+    :style="_._style([customStyle])"
+  >
+    <view :class="classPrefix + '__left'">
+      <view :class="classPrefix + '__scrollable scroll-x'">
+        <block
+          v-for="(item, index) in files"
+          :key="index"
+        >
+          <view
+            :class="classPrefix + '__files'"
+            :data-index="index"
+            @click.stop="onFileWrapTap"
+          >
+            <block v-if="item.fileType === 'image'">
+              <view :class="'file-image ' + classPrefix + '__file ' + (removable ? classPrefix + '__file--removable' : '')">
+                <block v-if="item.status === 'pending' || item.status === 'fail' || item.status === 'error'">
+                  <view :class="item.status + ' ' + classPrefix + '__file--' + item.status">
+                    <t-loading
+                      theme="circular"
+                      size="48rpx"
+                    />
+                  </view>
+                </block>
+                <block v-else>
+                  <image
+                    class="image"
+                    :src="item.url"
+                    :mode="getImageMode(item)"
+                    :lazy-load="false"
+                    :style="inChat ? imageStyle(item) : ''"
+                  />
+                </block>
+                <view
+                  v-if="removable"
+                  :class="classPrefix + '__remove'"
+                  @click.stop="onRemoveTap($event, { index })"
+                >
+                  <t-icon
+                    :data-index="index"
+                    name="multiply"
+                    size="16px"
+                  />
+                </view>
+              </view>
+            </block>
+            <block v-else>
+              <view :class="'file ' + classPrefix + '__file ' + (removable ? classPrefix + '__file--removable' : '')">
+                <view class="image">
+                  <block v-if="item.status === 'pending'">
+                    <view :class="'loading ' + classPrefix + '__file--pending'">
+                      <t-loading
+                        theme="circular"
+                        size="48rpx"
+                      />
+                    </view>
+                  </block>
+                  <block v-else-if="item.status === 'fail'">
+                    <view :class="'fail ' + classPrefix + '__file--fail'">
+                      <t-loading
+                        theme="circular"
+                        size="48rpx"
+                      />
+                    </view>
+                  </block>
+                  <block v-else-if="item.status === 'error'">
+                    <view :class="'error ' + classPrefix + '__file--error'">
+                      <t-loading
+                        theme="circular"
+                        size="48rpx"
+                      />
+                    </view>
+                  </block>
+                  <block v-else>
+                    <t-icon
+                      :name="item.fileIcon.name"
+                      :color="item.fileIcon.color"
+                      size="48rpx"
+                    />
+                  </block>
+                </view>
+                <view :class="classPrefix + '__content'">
+                  <view :class="classPrefix + '__title'">
+                    {{ item.name }}
+                  </view>
+                  <view
+                    v-if="item.status === 'pending'"
+                    :class="classPrefix + '__desc'"
+                  >
+                    上传中...{{ item.progress || 0 + '%' }}
+                  </view>
+                  <view
+                    v-else-if="item.status === 'fail'"
+                    :class="classPrefix + '__desc'"
+                  >
+                    上传失败
+                  </view>
+                  <view
+                    v-else-if="item.status === 'error'"
+                    :class="classPrefix + '__desc'"
+                  >
+                    {{ item.errorMessage }}
+                  </view>
+                  <view
+                    v-else
+                    :class="classPrefix + '__desc'"
+                  >
+                    {{ item.desc }}
+                  </view>
+                </view>
+                <view
+                  v-if="removable"
+                  :class="classPrefix + '__remove'"
+                  @click.stop="onRemoveTap($event, { index })"
+                >
+                  <t-icon
+                    :data-index="index"
+                    name="multiply"
+                    size="16px"
+                  />
+                </view>
+              </view>
+            </block>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+import { imageStyle, getFileTypeClass, getImageMode } from './computed';
+
+
+const name = `${prefix}-attachments`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tIcon,
+    tImage,
+    tLoading,
+  },
+
+  props: {
+    ...props,
+    inChat: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'fileClick',
+    'remove',
+  ],
+
+  data() {
+    return {
+      classPrefix: name,
+      _,
+      files: [],
+    };
+  },
+
+  watch: {
+    items: {
+      handler() {
+        this.setFiles();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  created() {
+  },
+  mounted() {
+    this.setFiles();
+  },
+
+  methods: {
+    imageStyle,
+    getFileTypeClass,
+    getImageMode,
+
+    onFileWrapTap(e) {
+      const { index } = e.currentTarget.dataset || {};
+      const item = this.files?.[index];
+      if (item) {
+        this.handleFileClick(item);
+      }
+    },
+    onRemoveTap(e, { index }) {
+      const item = this.files?.[index];
+      if (item !== undefined) {
+        this.handleRemove(item, index);
+      }
+    },
+    handleFileClick(item) {
+      if (this.imageViewer && item.fileType === 'image') {
+        wx.previewImage({
+          urls: [item.url],
+        });
+      }
+      this.$emit('fileClick', {
+        item,
+      });
+    },
+    handleRemove(item, index) {
+      this.$emit('remove', {
+        item,
+        index,
+      });
+    },
+    renderDesc(item) {
+      const sizeInBytes = item.size || 0;
+      let formattedSize;
+      let unit;
+
+      if (sizeInBytes < 1024) {
+        // 小于1KB，显示B
+        formattedSize = sizeInBytes;
+        unit = 'B';
+      } else if (sizeInBytes < 1024 * 1024) {
+        // 大于等于1KB小于1MB，显示KB
+        const sizeInKB = sizeInBytes / 1024;
+        formattedSize = sizeInKB % 1 === 0 ? sizeInKB : sizeInKB.toFixed(2);
+        unit = 'KB';
+      } else {
+        // 大于等于1MB，显示MB
+        const sizeInMB = sizeInBytes / (1024 * 1024);
+        formattedSize = sizeInMB % 1 === 0 ? sizeInMB : sizeInMB.toFixed(2);
+        unit = 'MB';
+      }
+      return `${formattedSize} ${unit}`;
+    },
+    renderIcon(item) {
+      const fileIcons = {
+        file: {
+          name: 'file-zip-filled',
+          color: '#E37318',
+        },
+        video: {
+          name: 'video-filled',
+          color: '#D54941',
+        },
+        pdf: {
+          name: 'file-pdf-filled',
+          color: '#D54941',
+        },
+        doc: {
+          name: 'file-word-filled',
+          color: '#0052d9',
+        },
+        excel: {
+          name: 'file-excel-filled',
+          color: '#2BA471',
+        },
+        ppt: {
+          name: 'file-powerpoint-filled',
+          color: '#E37318',
+        },
+        audio: {
+          name: 'video-filled',
+          color: '#D54941',
+        },
+      };
+      return fileIcons[item.fileType] || fileIcons.file;
+    },
+
+    renderFileType(item) {
+      const type = ['image', 'video', 'audio', 'pdf', 'doc', 'ppt', 'txt', 'excel'];
+      if (item.fileType) {
+        return item.fileType;
+      }
+      if (type.includes(item.type)) {
+        return item.fileType;
+      }
+      const url = item.url || '';
+      const lastDotIndex = url.lastIndexOf('.');
+      const extension = lastDotIndex !== -1 ? url.substring(lastDotIndex + 1).toLowerCase() : '';
+      const extensionToType = {
+        // 图片类型
+        jpg: 'image',
+        jpeg: 'image',
+        png: 'image',
+        gif: 'image',
+        bmp: 'image',
+        webp: 'image',
+        // 视频类型
+        mp4: 'video',
+        mov: 'video',
+        avi: 'video',
+        mkv: 'video',
+        webm: 'video',
+        // 音频类型
+        mp3: 'audio',
+        wav: 'audio',
+        ogg: 'audio',
+        aac: 'audio',
+        // 文档类型
+        pdf: 'pdf',
+        doc: 'doc',
+        docx: 'doc',
+        ppt: 'ppt',
+        pptx: 'ppt',
+        xls: 'excel',
+        xlsx: 'excel',
+        txt: 'txt',
+      };
+      return extensionToType[extension] || '';
+    },
+    renderExtension(item) {
+      if (item.extension) {
+        return item.extension;
+      }
+      const extension = item.extension || (item.url ? item.url.split('.').pop()
+        .toLowerCase() : '');
+      return extension;
+    },
+    setFiles() {
+      this.files = this.items.map(item => ({
+        ...item,
+        fileType: this.renderFileType(item),
+        desc: this.renderDesc(item),
+        fileIcon: this.renderIcon(item),
+      }));
+    },
+  },
+});
+</script>
+<style scoped>
+@import './attachments.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/attachments/computed.js b/packages/tdesign-uniapp-chat/components/attachments/computed.js
new file mode 100644
index 000000000..668ab4fc1
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/computed.js
@@ -0,0 +1,49 @@
+import utils from 'tdesign-uniapp/common/utils.wxs';
+
+export function imageStyle(imageProps) {
+  if (imageProps && imageProps.width && imageProps.height) {
+    return utils._style({
+      width: utils.addUnit(imageProps.width),
+      height: utils.addUnit(imageProps.height),
+    });
+  }
+  // 兜底逻辑：没有传入 width 和 height 时，使用默认最大宽高尺寸
+  return utils._style({
+    width: '400rpx',
+    height: '400rpx',
+  });
+}
+
+export function getImageMode(imageProps) {
+  if (imageProps && imageProps.width && imageProps.height) {
+    return imageProps.width > imageProps.height ? 'widthFix' : 'heightFix';
+  }
+  // 兜底逻辑：没有传入 width 和 height 时，使用 aspectFit 保持图片比例
+  return imageProps && imageProps.mode ? imageProps.mode : 'scaleToFill';
+}
+
+
+export function getFileTypeClass(inChat, files) {
+  // 如果 inChat 不为 true，返回空字符串
+  if (!inChat) {
+    return '';
+  }
+
+  // 如果 files 为空或不存在，返回空字符串
+  if (!files || files.length === 0) {
+    return '';
+  }
+
+  // 检查是否所有文件的 fileType 都是 'image'
+  let allImages = true;
+  for (let i = 0; i < files.length; i++) {
+    if (files[i].fileType !== 'image') {
+      allImages = false;
+      break;
+    }
+  }
+
+  // 根据判断结果返回相应的类名
+  return allImages ? 'all_images' : 'all_files';
+}
+
diff --git a/packages/tdesign-uniapp-chat/components/attachments/props.ts b/packages/tdesign-uniapp-chat/components/attachments/props.ts
new file mode 100644
index 000000000..0666e8b5e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/props.ts
@@ -0,0 +1,45 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAttachmentsProps } from './type';
+export default {
+  /** 【讨论中】是否显示添加按钮 */
+  addable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否启用图片预览功能 */
+  imageViewer: {
+    type: Boolean,
+    default: true,
+  },
+  /** 附件列表 */
+  items: {
+    type: Array,
+    default: (): TdAttachmentsProps['items'] => [],
+    required: true,
+  },
+  /** 是否显示删除按钮 */
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 点击添加按钮时触发 */
+  onAdd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击文件时触发 */
+  onFileClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击删除按钮时触发 */
+  onRemove: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/attachments/type.ts b/packages/tdesign-uniapp-chat/components/attachments/type.ts
new file mode 100644
index 000000000..8ead94c6e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/attachments/type.ts
@@ -0,0 +1,57 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdAttachmentsProps {
+  /**
+   * 【讨论中】是否显示添加按钮
+   * @default true
+   */
+  addable?: boolean;
+  /**
+   * 是否启用图片预览功能
+   * @default true
+   */
+  imageViewer?: boolean;
+  /**
+   * 附件列表
+   * @default []
+   */
+  items: FileItem[];
+  /**
+   * 是否显示删除按钮
+   * @default true
+   */
+  removable?: boolean;
+  /**
+   * 点击添加按钮时触发
+   * @default ''
+   */
+  onAdd?: () => void;
+  /**
+   * 点击文件时触发
+   * @default ''
+   */
+  onFileClick?: (item: FileItem) => void;
+  /**
+   * 点击删除按钮时触发
+   * @default ''
+   */
+  onRemove?: (item: FileItem, index: number) => void;
+}
+
+export interface FileItem {
+  fileType: 'image' | 'video' | 'audio' | 'pdf' | 'doc' | 'ppt' | 'txt';
+  name: string;
+  url: string;
+  size: number;
+  status?: 'success' | 'fail' | 'pending' | 'error';
+  progress?: number;
+  errorMessage?: string;
+  fileIcon?: string;
+  width?: number;
+  height?: number;
+  mode?: 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'scaleToFill';
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-actionbar/README.en-US.md
new file mode 100644
index 000000000..e92848e8a
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/README.en-US.md
@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatActionbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+action-bar | Array | () => ['replay', 'copy', 'good', 'bad', 'share'] | Typescript: `Array<'replay'\|'copy'\|'good'\|'bad'\|'share'>` | N
+chat-id | String | - | \- | N
+comment | String | - | \- | N
+content | String | - | \- | N
+copy-mode | String | markdown | options: markdown/text | N
+disabled | Boolean | false | \- | N
+placement | String | start | options: start/end/space-around/space-between | N
+
+### ChatActionbar Events
+
+name | params | description
+-- | -- | --
+actions | `(context: {name: string, active: boolean})` | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/README.md b/packages/tdesign-uniapp-chat/components/chat-actionbar/README.md
new file mode 100644
index 000000000..7d22c1df1
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/README.md
@@ -0,0 +1,49 @@
+---
+title: ChatActionbar 对话操作
+description: 包含重新生成，点赞，点踩，复制按钮。 内置 Clipboard 可以复制聊天内容，提供按钮的交互样式，监听 actions 相关事件由业务层实现具体逻辑。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+```
+
+### 01 组件类型
+
+#### 基础类型
+
+{{ base }}
+
+### 02 组件状态
+
+#### 手动初始化状态
+
+{{ comment }}
+
+
+## API
+
+### ChatActionbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+action-bar | Array | () => ['replay', 'copy', 'good', 'bad', 'share'] | 操作栏配置。TS 类型：`Array<'replay'\|'copy'\|'good'\|'bad'\|'share'>` | N
+chat-id | String | - | 【实验】聊天消息的唯一标识 | N
+comment | String | - | 评价内容 | N
+content | String | - | 被复制的内容 | N
+copy-mode | String | markdown | 【实验】复制内容的模式，可选 'markdown'（复制markdown原文）或 'text'（复制纯文本）。可选项：markdown/text | N
+disabled | Boolean | false | 【讨论中】操作按钮是否可点击 | N
+placement | String | start | 【实验】操作栏位置。可选项：start/end/space-around/space-between | N
+
+### ChatActionbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+actions | `(context: {name: string, active: boolean})` | 点击点赞，点踩，复制，分享，重新生成按钮时触发发
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/base/index.vue
new file mode 100644
index 000000000..5a057a706
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/base/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <view>
+    <t-toast ref="t-toast" />
+    <view class="container">
+      <t-chat-actionbar
+        :content="content"
+        @actions="handleAction"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+
+export default {
+  components: {
+    tChatActionbar,
+    tToast,
+  },
+  data() {
+    return {
+      content: '这是一段可以被复制的内容，支持markdown格式。\n\n**粗体文本**\n*斜体文本*\n\n- 列表项1\n- 列表项2',
+    };
+  },
+  created() {},
+  methods: {
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.container {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+.layout-btn {
+    margin: 16rpx 0;
+    padding: 12rpx 24rpx;
+    background-color: #0052d9;
+    color: #fff;
+    border: none;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+}
+
+.demo-text {
+    padding: 16rpx 0;
+}
+
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.less b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.less
new file mode 100644
index 000000000..8e74b1185
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.less
@@ -0,0 +1,8 @@
+// .demo-block__title {
+//   font-size: 32rpx;
+//   font-weight: bold;
+//   color: #333;
+//   margin-bottom: 24rpx;
+//   padding-bottom: 16rpx;
+//   border-bottom: 1rpx solid #e7e7e7;
+// }
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.vue b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.vue
new file mode 100644
index 000000000..aa7776875
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/chat-actionbar.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatActionbar"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatActionbar 对话操作"
+        desc="包含重新生成，点赞，点踩，复制按钮。 内置 Clipboard 可以复制聊天内容，提供按钮的交互样式，监听 actions 相关事件由业务层实现具体逻辑。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础类型"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="手动初始化状态"
+      >
+        <comment />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseDemo from './base/index.vue';
+import comment from './comment/index.vue';
+
+
+export default {
+  components: {
+    baseDemo,
+    comment,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-actionbar.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/comment/index.vue b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/comment/index.vue
new file mode 100644
index 000000000..185e12925
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/_example/comment/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <view>
+    <t-toast ref="t-toast" />
+    <view class="container">
+      <t-chat-actionbar
+        :content="content"
+        :comment="comment"
+        @actions="handleAction"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+
+export default {
+  components: {
+    tChatActionbar,
+    tToast,
+  },
+  data() {
+    return {
+      content: '这是一段可以被复制的内容，支持markdown格式。\n\n**粗体文本**\n*斜体文本*\n\n- 列表项1\n- 列表项2',
+      comment: 'good',
+    };
+  },
+  methods: {
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.container {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+.layout-btn {
+    margin: 16rpx 0;
+    padding: 12rpx 24rpx;
+    background-color: #0052d9;
+    color: #fff;
+    border: none;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+}
+
+.demo-text {
+    padding: 16rpx 0;
+}
+
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.less b/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.less
new file mode 100644
index 000000000..99a3b6160
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.less
@@ -0,0 +1,84 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-actionbar: ~'@{prefix}-chat-actionbar';
+
+@chat-actionbar-padding: var(--chat-actionbar-padding, 0);
+@chat-actionbar-item-padding: var(--chat-actionbar-item-padding, 16rpx 28rpx);
+@chat-actionbar-item-color: @text-color-primary;
+@chat-actionbar-item-active: @brand-color;
+
+// TODO: 长按弹出层样式
+@chat-actionbar-popover-background: @mask-active;
+@chat-actionbar-popover-radius: 32rpx;
+@chat-actionbar-popover-padding: 45rpx;
+
+.@{chat-actionbar} {
+  display: flex;
+  padding: @chat-actionbar-padding;
+
+  // 对齐方式
+  &.start {
+    justify-content: flex-start;
+  }
+
+  &.end {
+    justify-content: flex-end;
+  }
+
+  // 内部容器
+  &__inner {
+    background-color: @bg-color-secondarycontainer;
+    border: 2rpx solid @component-border;
+    box-sizing: border-box;
+    border-radius: @radius-default;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    // 列布局
+    &--column {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    // 弹出层
+    &--popover {
+      padding: @chat-actionbar-popover-padding;
+      background-color: @chat-actionbar-popover-background;
+      border-radius: @chat-actionbar-popover-radius;
+      color: @font-white-1;
+    }
+  }
+
+  // 左侧内容
+  &__left {
+    &:empty {
+      display: none;
+    }
+  }
+
+  // 操作项
+  &__item {
+    color: @chat-actionbar-item-color;
+    margin: 12rpx 0;
+    padding: 4rpx 28rpx;
+    border-right: 2rpx solid @component-stroke;
+    background-color: unset;
+    outline: none;
+
+    &:after {
+      display: none;
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+
+    // 激活状态
+    &--active {
+      color: @chat-actionbar-item-active;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.vue b/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.vue
new file mode 100644
index 000000000..e64fcf3bf
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/chat-actionbar.vue
@@ -0,0 +1,225 @@
+<template>
+  <view
+    :class="[classPrefix, placement === 'longpress' ? classPrefix + '__inner--popover' : '']"
+    :style="_._style([customStyle])"
+  >
+    <view :class="classPrefix + '__inner ' + classPrefix + '__inner--column'">
+      <view :class="classPrefix + '__item ' + classPrefix + '__left'">
+        <slot name="prefix" />
+      </view>
+      <block
+        v-for="(item, index) in actions"
+        :key="index"
+      >
+        <!-- 分享按钮使用 button 标签 -->
+
+        <button
+          v-if="item.name === 'share'"
+          :data-name="item.name"
+          :class="_.cls(classPrefix + '__item', [['active', item.isActive]])"
+          :open-type="content ? 'share' : 'none'"
+          :data-chat-id="chatId"
+          @click="handleActionClick"
+        >
+          <t-icon
+            :name="item.isActive ? iconActiveMap[item.name] : iconMap[item.name]"
+            size="40rpx"
+          />
+        </button>
+
+        <!-- 其他按钮使用 view 标签 -->
+
+        <view
+          v-else
+          :data-name="item.name"
+          :class="_.cls(classPrefix + '__item', [['active', item.isActive]])"
+          @click.stop="handleActionClick"
+        >
+          <t-icon
+            :name="item.isActive ? iconActiveMap[item.name] : iconMap[item.name]"
+            size="40rpx"
+          />
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+
+const name = `${prefix}-chat-actionbar`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tIcon,
+  },
+
+  props: {
+    ...props,
+  },
+
+  data() {
+    return {
+      actions: [],
+      classPrefix: name,
+      pComment: '',
+      iconMap: {
+        good: 'thumb-up',
+        bad: 'thumb-down',
+        replay: 'refresh',
+        copy: 'copy',
+        share: 'share-1',
+      },
+      iconActiveMap: {
+        good: 'thumb-up-filled',
+        bad: 'thumb-down-filled',
+      },
+
+      _,
+    };
+  },
+
+  watch: {
+    comment: {
+      handler(newVal) {
+        this.pComment = newVal || '';
+      },
+      immediate: true,
+      deep: true,
+    },
+    actionBar: {
+      handler() {
+        this.setActions();
+      },
+      immediate: true,
+      deep: true,
+    },
+    pComment: {
+      handler() {
+        this.setActions();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  mounted() {
+    this.pComment = this.comment || '';
+    this.setActions();
+  },
+
+  methods: {
+    filterSpecialChars(content) {
+      // 保留段落、换行和缩进 - 不处理换行符和行首空白
+      let result = content;
+
+      // 先处理表格格式 - 保留表格语法
+      const tableRegex = /^(\s*\|.*\|.*\n\s*\|[-: ]+\|.*\n(\s*\|.*\|.*\n)*)/gm;
+      const tables = [];
+      result = result.replace(tableRegex, (match) => {
+        // 在表格内容中去除特殊引用格式和强调语法
+        const cleanedTable = match
+          .replace(/\[\d+(?:,\d+)*\]\(@ref\)/g, '')
+          .replace(/(\*\*|__)(.*?)\1|(\*|_)(.*?)\3/g, '$2$4')
+        // 替换表格中的<br>标签为换行符
+          .replace(/<br\s*\/?>/gi, '\n');
+        tables.push(cleanedTable);
+        return `%%TABLE${tables.length - 1}%%`; // 用占位符临时替换表格
+      });
+
+      // 替换标题（保留行首缩进）
+      result = result.replace(/^(\s*)#{1,6}\s+/gm, '$1');
+      // 替换强调语法
+      result = result.replace(/(\*\*|__)(.*?)\1|(\*|_)(.*?)\3/g, '$2$4');
+      // 替换图片
+      result = result.replace(/!\[.*?\]\(.*?\)/g, '');
+      // 处理特殊引用格式（非表格部分）
+      result = result.replace(/\[\d+(?:,\d+)*\]\(@ref\)/g, '');
+      // 处理其他特殊字符但保留列表标记(-*+)、换行符和缩进
+      const specialChars = /(\\|`|\{|\}|\[|\]|\(|\)|\||！|@ref|\([@#]\w+\))/g;
+      result = result.replace(specialChars, '');
+      // 处理可能剩余的 [数字] 格式
+      result = result.replace(/\[\d+\]/g, '');
+      // 替换非表格部分的<br>标签为换行符
+      result = result.replace(/<br\s*\/?>/gi, '\n');
+
+      // 恢复表格格式
+      result = result.replace(/%%TABLE(\d+)%%/g, (match, index) => tables[parseInt(index, 10)] || '');
+
+      // 清理多余的空行但保留单个换行和缩进
+      return result.replace(/\n{3,}/g, '\n\n').trim();
+    },
+
+    handleActionClick(e) {
+      const { name } = e.currentTarget.dataset;
+      if (name === 'copy' && this.content) {
+        this.handleCopy();
+      } else if (name === 'good') {
+        const isActive = this.pComment === 'good';
+        this.pComment = isActive ? undefined : 'good';
+
+        this.$emit('actions', {
+          name,
+          active: !isActive,
+        });
+      } else if (name === 'bad') {
+        const isActive = this.pComment === 'bad';
+        this.pComment = isActive ? undefined : 'bad';
+
+        this.$emit('actions', {
+          name,
+          active: !isActive,
+        });
+      } else {
+        this.$emit('actions', {
+          name,
+        });
+      }
+    },
+
+    handleCopy() {
+      if (!this.content) return;
+      const copyContent = this.copyMode === 'markdown' ? this.content : this.filterSpecialChars(this.content);
+      this.$emit('actions', {
+        name: 'copy',
+        data: copyContent,
+      });
+    },
+
+    setActions() {
+      const baseActions = [];
+      if (Array.isArray(this.actionBar)) {
+        this.actionBar.forEach((item) => {
+          if (item === 'good' || item === 'bad') {
+            baseActions.push({
+              name: item,
+              isActive: this.pComment === item,
+            });
+          } else {
+            baseActions.push({
+              name: item,
+              isActive: false,
+            });
+          }
+        });
+      }
+      this.actions = baseActions;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './chat-actionbar.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/props.ts b/packages/tdesign-uniapp-chat/components/chat-actionbar/props.ts
new file mode 100644
index 000000000..ba7d425cd
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/props.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatActionbarProps } from './type';
+export default {
+  /** 操作栏配置 */
+  actionBar: {
+    type: Array,
+    default: () => ['replay', 'copy', 'good', 'bad', 'share'],
+  },
+  /** 【实验】聊天消息的唯一标识 */
+  chatId: {
+    type: String,
+    default: '',
+  },
+  /** 评价内容 */
+  comment: {
+    type: String,
+    default: '',
+  },
+  /** 被复制的内容 */
+  content: {
+    type: String,
+    default: '',
+  },
+  /** 【实验】复制内容的模式，可选 'markdown'（复制markdown原文）或 'text'（复制纯文本） */
+  copyMode: {
+    type: String,
+    default: 'markdown' as TdChatActionbarProps['copyMode'],
+    validator(val: TdChatActionbarProps['copyMode']): boolean {
+      if (!val) return true;
+      return ['markdown', 'text'].includes(val);
+    },
+  },
+  /** 【讨论中】操作按钮是否可点击 */
+  disabled: Boolean,
+  /** 【实验】操作栏位置 */
+  placement: {
+    type: String,
+    default: 'start' as TdChatActionbarProps['placement'],
+    validator(val: TdChatActionbarProps['placement']): boolean {
+      if (!val) return true;
+      return ['start', 'end', 'space-around', 'space-between'].includes(val);
+    },
+  },
+  /** 点击点赞，点踩，复制，分享，重新生成按钮时触发发 */
+  onActions: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-actionbar/type.ts b/packages/tdesign-uniapp-chat/components/chat-actionbar/type.ts
new file mode 100644
index 000000000..88e27f424
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-actionbar/type.ts
@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdChatActionbarProps {
+  /**
+   * 操作栏配置
+   * @default () => ['replay', 'copy', 'good', 'bad', 'share']
+   */
+  actionBar?: Array<'replay' | 'copy' | 'good' | 'bad' | 'share'>;
+  /**
+   * 【实验】聊天消息的唯一标识
+   * @default ''
+   */
+  chatId?: string;
+  /**
+   * 评价内容
+   * @default ''
+   */
+  comment?: string;
+  /**
+   * 被复制的内容
+   * @default ''
+   */
+  content?: string;
+  /**
+   * 【实验】复制内容的模式，可选 'markdown'（复制markdown原文）或 'text'（复制纯文本）
+   * @default markdown
+   */
+  copyMode?: 'markdown' | 'text';
+  /**
+   * 【讨论中】操作按钮是否可点击
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 【实验】操作栏位置
+   * @default start
+   */
+  placement?: 'start' | 'end' | 'space-around' | 'space-between';
+  /**
+   * 点击点赞，点踩，复制，分享，重新生成按钮时触发发
+   */
+  onActions?: (context: { name: string; active: boolean }) => void;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-content/README.en-US.md
new file mode 100644
index 000000000..8b53b0734
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/README.en-US.md
@@ -0,0 +1,18 @@
+
+## API
+
+### ChatContent Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | Object | - | required。Typescript: `TdChatContentType ` `interface TdChatContentType { type: 'text' \| 'markdown'; data: string; }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-content/type.ts) | Y
+markdown-props | Object | - | Typescript: `ChatMarkdownProps`，[ChatMarkdown API Documents](./chat-markdown?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-content/type.ts) | N
+role | String | - | required。options: user/assistant/system | Y
+status | String | - | options: error / '' | N
+
+### ChatContent Events
+
+name | params | description
+-- | -- | --
+click | `(context: {detail:{event, node}, currentTarget, target})` | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/README.md b/packages/tdesign-uniapp-chat/components/chat-content/README.md
new file mode 100644
index 000000000..94fdb48a5
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/README.md
@@ -0,0 +1,41 @@
+---
+title: ChatContent 对话正文
+description: ChatContent 用于在聊天对话中渲染不同类型的聊天内容。它支持纯文本和Markdown格式的内容渲染，能够根据内容类型自动选择合适的渲染方式。
+spline: base
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatContent from 'tdesign-uniapp-chat/chat-content/chat-content.vue';
+```
+
+### 01 组件类型
+
+- 对大模型返回的 markdown 数据自动渲染。markdown 会内置调用 `t-chat-markdown` 渲染，同时可根据 role（user/assistant）切换样式。
+- 用户发送的消息保持默认格式显示，纯文本会做 HTML 转义并用 rich-text 渲染；
+
+
+{{ base }}
+
+
+## API
+
+### ChatContent Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | Object | - | 必需。聊天内容对象。TS 类型：`TdChatContentType ` `interface TdChatContentType { type: 'text' \| 'markdown'; data: string; }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-content/type.ts) | Y
+markdown-props | Object | - | marked 解析器的配置选项。TS 类型：`ChatMarkdownProps`，[ChatMarkdown API Documents](./chat-markdown?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-content/type.ts) | N
+role | String | - | 必需。消息角色，用于区分用户和助手的消息样式	。可选项：user/assistant/system | Y
+status | String | - | 正文状态。可选项：error / '' | N
+
+### ChatContent Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: {detail:{event, node}, currentTarget, target})` | 点击链接时触发
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-content/_example/base/index.vue
new file mode 100644
index 000000000..ab2fde68e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/_example/base/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <view>
+    <view class="chat-example">
+      <view class="title">
+        用户内容纯文本支持HTML转义
+      </view>
+      <view class="chat-example-block">
+        <t-chat-content
+          :content="userContent"
+          role="user"
+        />
+      </view>
+    </view>
+
+    <view class="chat-example">
+      <view class="title">
+        助手内容（Markdown）
+      </view>
+      <view class="chat-example-block">
+        <t-chat-content
+          :content="assistantContent"
+          role="assistant"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatContent from 'tdesign-uniapp-chat/chat-content/chat-content.vue';
+
+
+const markdownData = `# Markdown功能测试 (H1标题)
+
+## 基础语法测试 (H2标题)
+
+### 列表测试
+
+- 无序列表项1
+- 无序列表项2
+    - 缩进列表项1（4个空格缩进）
+    - 缩进列表项2（4个空格缩进）
+
+1. 有序列表项1
+2. 有序列表项2
+    1. 缩进有序列表项1（4个空格缩进）
+    2. 缩进有序列表项2（4个空格缩进）
+
+### 代码块测试
+
+\`\`\`javascript
+// JavaScript 代码块
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+greet('Markdown');
+\`\`\`
+
+### 其他元素
+
+> 引用文本块
+> 多行引用内容
+
+**加粗文字** _斜体文字_ ~~删除线~~
+
+这是一个链接 [TDesign](https://tdesign.tencent.com)。
+`;
+
+export default {
+  components: {
+    tChatContent,
+  },
+  data() {
+    return {
+      userContent: {
+        type: 'text',
+        data: '这是用户发送的普通文本内容',
+      },
+      assistantContent: {
+        type: 'markdown',
+        data: markdownData,
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    margin-bottom: 32rpx;
+}
+
+.chat-example-block {
+    padding: 32rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+.title {
+    padding: 0 32rpx 32rpx;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--bg-color-demo-desc);
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.less b/packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.vue b/packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.vue
new file mode 100644
index 000000000..1298e9bef
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/_example/chat-content.vue
@@ -0,0 +1,35 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatContent"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatContent 对话正文"
+        desc="支持 markdown 格式的渲染。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo title="01 组件类型">
+        <baseDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import baseDemo from './base/index.vue';
+export default {
+  components: {
+    baseDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-content.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/chat-content.less b/packages/tdesign-uniapp-chat/components/chat-content/chat-content.less
new file mode 100644
index 000000000..02efe78bb
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/chat-content.less
@@ -0,0 +1,49 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-content: ~'@{prefix}-chat-content';
+
+@chat-content-user-text-color: var(--td-chat-content-user-text-color, @text-color-primary);
+@chat-content-assistant-text-color: var(--td-chat-content-assistant-text-color, @text-color-primary);
+@chat-content-error-text-color: var(--td-chat-content-error-text-color, @error-color);
+
+.@{chat-content} {
+  font-size: 32rpx;
+  line-height: 48rpx;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  width: fit-content;
+
+  &__user {
+    color: @chat-content-user-text-color;
+
+    ._pre {
+      margin: 0;
+      white-space: pre-wrap;
+    }
+  }
+
+  &__assistant {
+    color: @chat-content-assistant-text-color;
+
+    ._ol {
+      -webkit-padding-start: 40rpx;
+      padding-inline-start: 40rpx;
+
+      ._li {
+        list-style: decimal;
+      }
+    }
+
+    ._img {
+      max-width: 100%;
+      margin: 8rpx 0;
+      border-radius: @radius-small;
+    }
+  }
+// 错误状态样式
+  &__error {
+    color: @chat-content-error-text-color;
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/chat-content.vue b/packages/tdesign-uniapp-chat/components/chat-content/chat-content.vue
new file mode 100644
index 000000000..bf5c21c8b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/chat-content.vue
@@ -0,0 +1,119 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="_._style([customStyle])"
+  >
+    <block v-if="status === 'error' || content.type === 'text'">
+      <view :class="classPrefix + '__' + role + ' ' + classPrefix + '__' + status">
+        <view class="_pre">
+          <rich-text :nodes="textInfo" />
+        </view>
+      </view>
+    </block>
+    <block v-else>
+      <view :class="classPrefix + '__assistant'">
+        <t-chat-markdown
+          :content="textInfo"
+          :options="markdownProps && markdownProps.options"
+          @click="onClick"
+        />
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import tChatMarkdown from '../chat-markdown/chat-markdown.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+const name = `${prefix}-chat-content`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tChatMarkdown,
+  },
+
+  props: {
+    ...props,
+  },
+
+  emits: [
+    'click',
+  ],
+
+  data() {
+    return {
+      classPrefix: name,
+      textInfo: '',
+      _,
+    };
+  },
+
+  watch: {
+    content: {
+      handler() {
+        this.setTextInfo();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  mounted() {
+    this.setTextInfo();
+  },
+
+  methods: {
+    getEscapeReplacement(ch) {
+      const escapeReplacements = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        '\'': '&#39;',
+      };
+      return escapeReplacements[ch];
+    },
+    escape(html, encode = false) {
+      const escapeTest = /[&<>"']/;
+      const escapeReplace = new RegExp(escapeTest.source, 'g');
+      const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
+      const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
+      if (encode) {
+        if (escapeTest.test(html)) {
+          return html.replace(escapeReplace, this.getEscapeReplacement);
+        }
+      } else if (escapeTestNoEncode.test(html)) {
+        return html.replace(escapeReplaceNoEncode, this.getEscapeReplacement);
+      }
+      return html;
+    },
+
+    setTextInfo() {
+      // error 状态下统一按纯文本处理，避免走 markdown 渲染
+      if (this.content.type === 'text' || this.status === 'error') {
+        this.textInfo = this.escape(this.content.data || '');
+      } else {
+        this.textInfo = this.content.data;
+      }
+    },
+
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './chat-content.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/props.ts b/packages/tdesign-uniapp-chat/components/chat-content/props.ts
new file mode 100644
index 000000000..20026d24d
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/props.ts
@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatContentProps } from './type';
+export default {
+  /** 聊天内容对象 */
+  content: {
+    type: Object,
+    required: true,
+  },
+  /** marked 解析器的配置选项 */
+  markdownProps: {
+    type: Object,
+  },
+  /** 消息角色，用于区分用户和助手的消息样式	 */
+  role: {
+    type: String,
+    required: true,
+    validator(val: TdChatContentProps['role']): boolean {
+            return ['user', 'assistant', 'system'].includes(val);
+    },
+  },
+  /** 正文状态 */
+  status: {
+    type: String,
+    validator(val: TdChatContentProps['status']): boolean {
+      if (!val) return true;
+      return ['error', ''].includes(val);
+    },
+  },
+  /** 点击链接时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-content/type.ts b/packages/tdesign-uniapp-chat/components/chat-content/type.ts
new file mode 100644
index 000000000..63206debf
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-content/type.ts
@@ -0,0 +1,35 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatMarkdownProps as ChatMarkdownProps } from '../chat-markdown/type';
+
+export interface TdChatContentProps {
+  /**
+   * 聊天内容对象
+   */
+  content: TdChatContentType;
+  /**
+   * marked 解析器的配置选项
+   */
+  markdownProps?: ChatMarkdownProps;
+  /**
+   * 消息角色，用于区分用户和助手的消息样式
+   */
+  role: 'user' | 'assistant' | 'system';
+  /**
+   * 正文状态
+   */
+  status?: 'error' | '';
+  /**
+   * 点击链接时触发
+   */
+  onClick?: (context: { detail: { event; node }; currentTarget; target }) => void;
+}
+
+export interface TdChatContentType {
+  type: 'text' | 'markdown';
+  data: string;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-list/README.en-US.md
new file mode 100644
index 000000000..a4545e985
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/README.en-US.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatList Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | String | skeleton | options: skeleton/moving/gradient/dot | N
+data | Array | - | Typescript: `Array<TdChatItemMeta>` ` interface TdChatItemMeta { avatar?: string; name?:string; role?:string; datetime?: string; content?: string; status?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-list/type.ts) | N
+layout | String | both | options: both/single | N
+reverse | Boolean | true | \- | N
+
+### ChatList Events
+
+name | params | description
+-- | -- | --
+scroll | `(context: {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})` | \-
+
+### ChatList Slots
+
+name | Description
+-- | --
+actionbar | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/README.md b/packages/tdesign-uniapp-chat/components/chat-list/README.md
new file mode 100644
index 000000000..f0751da6f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/README.md
@@ -0,0 +1,68 @@
+---
+title: ChatList 对话列表
+description: 用于展示对话或者普通对话场景的组件。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatList from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+```
+
+
+### 组件类型
+
+#### 基础使用
+
+{{ base }}
+
+#### 组合式用法
+
+{{ hook-component }}
+
+#### 自定义
+
+`t-chat-message`支持`content`自定义，使用建议：渲染聊天消息统一用 `t-chat-content`；仅在需要“单独使用 Markdown 组件”或自定义管线时使用 `t-chat-markdown`。也支持别的 markdown 渲染组件，选择其他 markdown 渲染库由用户自行安装。
+
+{{ custom }}
+
+#### 文案助手
+
+{{ docs }}
+
+#### 图像生成
+
+{{ image }}
+
+#### 任务规划
+
+{{ agent }}
+
+## API
+
+### ChatList Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | String | skeleton | 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种。可选项：skeleton/moving/gradient/dot | N
+data | Array | - | 对话列表的数据。TS 类型：`Array<TdChatItemMeta>` ` interface TdChatItemMeta { avatar?: string; name?:string; role?:string; datetime?: string; content?: string; status?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-list/type.ts) | N
+layout | String | both | 对话布局形式，支持两侧对齐与左对齐。使用插槽自定义对话内容时不生效，得用`t-chat-message`的`placement`属性。可选项：both/single | N
+reverse | Boolean | true | 是否表现为倒序 | N
+
+### ChatList Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(context: {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})` | 滚动事件的回调
+
+### ChatList Slots
+
+名称 | 描述
+-- | --
+actionbar | 自定义操作按钮的插槽
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/agent/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/agent/index.vue
new file mode 100644
index 000000000..6bf007448
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/agent/index.vue
@@ -0,0 +1,601 @@
+<template>
+  <view>
+    <view
+      class="chat-box"
+      :style="'height: ' + contentHeightClone + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item, chatIndex) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :role="item.message.role"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #content>
+              <block
+                v-for="(contentItem, contentIndex) in item.message.content"
+                :key="contentIndex"
+              >
+                <t-chat-content
+                  v-if="contentItem.type === 'text' || contentItem.type === 'markdown'"
+                  :content="contentItem"
+                  :role="item.message.role"
+                />
+
+                <view
+                  v-if="contentItem.type === 'agent'"
+                  class="step"
+                >
+                  <t-steps
+                    layout="vertical"
+                    :current="contentItem.content.steps.length"
+                  >
+                    <t-step-item
+                      v-for="(item, index) in contentItem.content.steps"
+                      :key="index"
+                      :title="item.step"
+                    >
+                      <template #content>
+                        <view
+                          class="step-text-list"
+                        >
+                          <view
+                            v-for="(taskItem, index1) in item.tasks"
+                            :key="index1"
+                            :class="'step-text ' + taskItem.type"
+                          >
+                            <t-icon
+                              v-if="taskItem.type === 'command'"
+                              name="control-platform"
+                              size="32rpx"
+                              t-class="step-icon"
+                            />
+
+                            {{ taskItem.text }}
+                          </view>
+                        </view>
+                      </template>
+                    </t-step-item>
+                  </t-steps>
+                </view>
+              </block>
+            </template>
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :render-presets="renderPresets"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChatContent from 'tdesign-uniapp-chat/chat-content/chat-content.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tSteps from 'tdesign-uniapp/steps/steps.vue';
+import tStepItem from 'tdesign-uniapp/step-item/step-item.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+export default {
+  components: {
+    tChatMessage,
+    tChatContent,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tSteps,
+    tStepItem,
+    tIcon,
+    tToast,
+  },
+  props: {
+    contentHeight: {
+      type: String,
+      default: '100vh',
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '欢迎使用TDesign Agent家庭活动策划助手，请给我布置任务吧～',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      // 输入框动态样式
+      inputStyle: '',
+
+      chatIndex: 0,
+      contentIndex: 0,
+
+      contentItem: {
+        type: '',
+
+        content: {
+          steps: [],
+        },
+      },
+
+      taskItem: {
+        type: '',
+      },
+
+      contentHeightClone: '',
+    };
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  watch: {
+    isActive: {
+      handler(v) {
+        this.value = v ? '请帮我做一个5岁儿童生日聚会的规划' : '';// 输入框的值
+      },
+
+      immediate: true,
+    },
+
+    contentHeight: {
+      handler(newVal) {
+        this.contentHeightClone = newVal;
+      },
+
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      /**
+       * 计算内容区域高度
+       * 生成CSS calc表达式：calc(100vh - 96rpx - 导航高度 - 底部安全区域高度)
+       */
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeightClone = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.contentHeightClone = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              data: value.trim(),
+            },
+          ],
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.loading = false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+      const assistantMessage = {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        key: getUniqueKey(),
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'markdown',
+              data: '',
+            },
+          ],
+        },
+      };
+      this.chatList = [assistantMessage, ...this.chatList];
+
+      const that = this;
+      this.$nextTick(async () => {
+        await fetchStream('为5岁小朋友准备一场生日派对，我会根据要求准备合适方案，计划从以下几个步骤进行准备：', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push({
+          type: 'agent',
+          id: 'task1',
+          content: {
+            text: '',
+            steps: [],
+          },
+        });
+        await fetchStream('生日聚会规划任务已分解为3个执行阶段', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps.push({
+          step: '确定派对餐饮方案',
+          agent_id: 'a1',
+          tasks: [
+            {
+              type: 'command',
+              text: '',
+            },
+          ],
+          status: 'finish',
+        });
+        await fetchStream('调用智能搜索工具', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[0].tasks[0].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps[0].tasks.push({
+          type: 'command',
+          text: '',
+        });
+        await fetchStream('已筛选出3种高性价比菜单方案，开始进行营养匹配', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[0].tasks[1].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps[0].tasks.push({
+          type: 'result',
+          text: '',
+        });
+        await fetchStream('主菜是香草烤鸡（无麸质），准备耗时45分钟；', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[0].tasks[2].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps.push({
+          step: '准备派对现场布置',
+          agent_id: 'a2',
+          tasks: [
+            {
+              type: 'command',
+              text: '',
+            },
+          ],
+          status: 'finish',
+        });
+        await fetchStream('调用智能搜索工具，搜索儿童派对用品清单', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[1].tasks[0].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps[1].tasks.push({
+          type: 'result',
+          text: '',
+        });
+        await fetchStream('推荐现场布置方案：餐具（一次性纸盘、刀叉套装）、杯子、纸巾、一次性桌布，装饰气球、横幅、礼帽等', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[1].tasks[1].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps.push({
+          step: '策划派对活动',
+          agent_id: 'a1',
+          tasks: [
+            {
+              type: 'command',
+              text: '',
+            },
+          ],
+          status: 'finish',
+        });
+        await fetchStream('搜索儿童派对游戏', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[2].tasks[0].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps[2].tasks.push({
+          type: 'command',
+          text: '',
+        });
+        await fetchStream('整理信息并进行合理性分析，安全性评估', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[2].tasks[1].text += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content[1].content.steps[2].tasks.push({
+          type: 'result',
+          text: '',
+        });
+        await fetchStream('派对总时长建议控制在1.5小时，符合5岁儿童注意力持续时间，每位小朋友到达时可以在拍照区留影，可设置一个签到', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].content.steps[2].tasks[2].text += result;
+          },
+          complete() {},
+        });
+        that.chatList[0].message.status = 'complete';
+        that.loading = false;
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+.preview {
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid var(--td-component-border);
+}
+
+.step {
+    padding-top: 24rpx;
+}
+
+.step-text-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+}
+
+.step-text {
+    text-align: start;
+}
+
+.step-text.command {
+    padding: 16rpx;
+    border-radius: 16rpx;
+    background-color: var(--td-bg-color-secondarycontainer);
+    display: flex;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-secondary);
+}
+
+.step-text.result {
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-primary);
+}
+
+.chat-box :deep(.step-icon) {
+    margin-right: 12rpx;
+    margin-top: 6rpx;
+}
+
+.chat-box :deep(.t-steps-item__circle--finish) {
+    background-color: transparent;
+    color: var(--td-text-color-primary);
+    border: 1px solid var(--td-text-color-primary);
+    width: 16px;
+    height: 16px;
+}
+
+.chat-box :deep(.t-steps-item__circle--finish) .t-icon {
+    font-size: 12px;
+}
+
+.chat-box :deep(.t-steps-item__line--finish) {
+    background-color: var(--td-component-border);
+}
+
+.chat-box :deep(.t-steps-item__title--finish) {
+    color: var(--td-text-color-primary);
+    font-weight: 600;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/base/index.vue
new file mode 100644
index 000000000..5043d7fd6
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/base/index.vue
@@ -0,0 +1,330 @@
+<template>
+  <view>
+    <view
+      class="chat-box"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat
+        id="chatList"
+        @scroll="onScroll($event, { tagId: 'chatList' })"
+      >
+        <block
+          v-for="(item) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :content="item.content"
+            :role="item.role"
+            :placement="item.role === 'user' ? 'right' : 'left'"
+            :status="item.status || ''"
+          >
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.status === 'complete' && item.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+
+        <template #footer>
+          <t-chat-sender
+            v-model:value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :auto-rise-with-keyboard="true"
+            :render-presets="renderPresets"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+      <!-- 内置虚拟列表优化性能仅在data属性中使用 -->
+      <!-- <t-chat id="chatList" bindscroll="onScroll" data="{{chatList}}"></t-chat> -->
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const mockData = `南极的自动提款机并没有一个特定的专属名称，但历史上确实有一台ATM机曾短暂存在于南极的**麦克默多站**（McMurdo Station）。这台ATM由美国**富兰克林国家银行**（Wells Fargo）于1998年安装，主要供驻扎在该站的科研人员使用。不过，由于南极的极端环境和极低的人口密度，这台ATM机并未长期运行，最终被移除。
+
+**背景补充：**
+- **麦克默多站**是美国在南极最大的科研基地，夏季人口可达约1,000人，冬季约200人。
+- 该ATM机更多是作为一种象征性服务存在，实际使用频率极低，因为南极科考人员通常依靠预支资金或电子支付。
+- 目前南极已无长期运行的ATM机，现代科考站更多依赖非现金交易方式。
+
+南极作为非主权领土，其基础设施以科研和生活支持为主，商业金融服务非常有限。若有类似设施，通常是临时或实验性质的。`;
+
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+
+
+export default {
+  components: {
+    tChatMessage,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tToast,
+  },
+  data() {
+    return {
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          role: 'assistant',
+          status: 'complete',
+          key: getUniqueKey(),
+          content: [
+            {
+              type: 'text',
+              data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+            },
+          ],
+        },
+        {
+          role: 'user',
+          key: getUniqueKey(),
+          content: [
+            {
+              type: 'text',
+              data: '牛顿第一定律是否适用于所有参考系？',
+            },
+          ],
+        },
+      ],
+
+      value: '',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 输入框样式
+      contentHeight: '100vh',
+
+      // 内容高度
+      animation: 'dots',
+
+      chatIndex: '',
+    };
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeight = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+
+        this.contentHeight = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 调用chatList的滚动到底部方法
+    scrollToBottom() {
+      const chatListComponent = this.zpSelectComponent('#chatList');
+      if (chatListComponent && typeof chatListComponent.scrollToBottom === 'function') {
+        chatListComponent.scrollToBottom();
+      }
+    },
+
+    onScroll(e) {
+      console.log('监听滚动', e);
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        role: 'user',
+        key: getUniqueKey(),
+        content: [
+          {
+            type: 'text',
+            data: value.trim(),
+          },
+        ],
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      this.loading = false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 获取当前时间
+    getCurrentTime() {
+      const now = new Date();
+      const hours = now.getHours().toString()
+        .padStart(2, '0');
+      const minutes = now.getMinutes().toString()
+        .padStart(2, '0');
+      return `${hours}:${minutes}`;
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+
+      // 请求中
+      const assistantMessage = {
+        role: 'assistant',
+        key: getUniqueKey(),
+        content: [
+          {
+            type: 'markdown',
+            data: '',
+          },
+        ],
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        status: 'pending',
+      };
+      this.chatList = [assistantMessage, ...this.chatList];
+
+      const that = this;
+      this.$nextTick(() => {
+        fetchStream(mockData, {
+          success(result) {
+            // 生文中
+            that.chatList[0].status = 'streaming';
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].content[0].data += result;
+            // this.chatList = that.chatList;
+          },
+          complete() {
+            that.chatList[0].status = 'complete';
+            // this.chatList = that.chatList;
+
+            that.loading = false;
+          },
+        });
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/chart-component/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/chart-component/index.vue
new file mode 100644
index 000000000..c36053cd5
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/chart-component/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <view
+    v-if="ec"
+    class="container"
+  >
+    <ec-canvas
+      canvas-id="mychart-line"
+      :ec="ec"
+    />
+  </view>
+</template>
+
+<script>
+import ecCanvas from '../ec-canvas/ec-canvas';
+import * as echarts from 'echarts';
+function onInitNormalLine(opt) {
+  console.log('contentItem数据:', opt);
+
+  // 使用contentItem中的数据，如果没有则使用mockData2
+  const data = opt.data.options;
+  const normalLineOption = {
+    xAxis: data.xAxis,
+    yAxis: data.yAxis,
+    series: [
+      {
+        data: data.series[0].data,
+        type: 'line',
+      },
+    ],
+  };
+  return (canvas, width, height, dpr) => {
+    const chart = echarts.init(canvas, null, {
+      width,
+      height,
+      devicePixelRatio: dpr, // 像素比
+    });
+    canvas.setChart(chart);
+    chart.setOption(normalLineOption);
+    return chart;
+  };
+}
+export default {
+  components: {
+    ecCanvas,
+  },
+  props: {
+    options: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      ec: null,
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.ec = {
+        onInit: onInitNormalLine(this.options),
+      };
+    },
+  },
+};
+</script>
+<style>
+.container {
+    position: relative !important;
+    width: 100% !important;
+    height: 600rpx !important;
+}
+
+ec-canvas {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.less b/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.less
new file mode 100644
index 000000000..ed55cc1ab
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.demo {
+    padding-bottom: 0;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.vue
new file mode 100644
index 000000000..4262b9eff
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/chat-list.vue
@@ -0,0 +1,101 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatList"
+      left-arrow
+    />
+    <view class="demo">
+      <!-- 通过 isActive 为 chatSender 的 value 赋值，避免 textarea 在 ios 上无法被遮挡的问题 -->
+      <t-tabs
+        :space-evenly="false"
+        :swipeable="false"
+        :value="value"
+        @change="onTabsChange"
+      >
+        <t-tab-panel
+          label="基础使用"
+          :value="0"
+        >
+          <baseDemo />
+        </t-tab-panel>
+        <t-tab-panel
+          label="组合式用法"
+          :value="1"
+        >
+          <hook-component :is-active="value === 1" />
+        </t-tab-panel>
+        <!-- <t-tab-panel
+          label="自定义"
+          :value="2"
+        >
+          <custom :is-active="value === 2" />
+        </t-tab-panel> -->
+        <!-- 本次迭代先不上 -->
+        <!-- <t-tab-panel label="代码助手" value="{{3}}">
+      <codeDemo />
+    </t-tab-panel> -->
+        <t-tab-panel
+          label="文案助手"
+          :value="4"
+        >
+          <docs :is-active="value === 4" />
+        </t-tab-panel>
+        <t-tab-panel
+          label="图像生成"
+          :value="5"
+        >
+          <imageDemo :is-active="value === 5" />
+        </t-tab-panel>
+        <t-tab-panel
+          label="任务规划"
+          :value="6"
+        >
+          <agent :is-active="value === 6" />
+        </t-tab-panel>
+      </t-tabs>
+    </view>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+import baseDemo from './base/index.vue';
+import hookComponent from './hook-component/index.vue';
+// import custom from './custom/index.vue';
+// // import codeDemo from './code';
+import docs from './docs/index.vue';
+import imageDemo from './image/index.vue';
+import agent from './agent/index.vue';
+
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+    baseDemo,
+    hookComponent,
+    // custom,
+    // // codeDemo,
+    docs,
+    imageDemo,
+    agent,
+  },
+  data() {
+    return {
+      value: 0,
+    };
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  methods: {
+    onTabsChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './chat-list.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/code/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/code/index.vue
new file mode 100644
index 000000000..56a60967c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/code/index.vue
@@ -0,0 +1,389 @@
+<template>
+  <view>
+    <view
+      class="chat-box"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item, chatIndex) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :role="item.message.role"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #content>
+              <block
+                v-for="(contentItem, contentIndex) in item.message.content"
+                :key="contentIndex"
+              >
+                <t-chat-content
+                  v-if="contentItem.type === 'text' || contentItem.type === 'markdown'"
+                  :content="contentItem"
+                />
+
+                <!-- :slot="'custom-' + contentIndex" -->
+                <view
+                  v-if="contentItem.type === 'preview'"
+                  class="preview"
+                >
+                  <view>{{ contentItem.data.enName }}</view>
+                  <view>
+                    <span class="btn">复制代码</span>
+                    <span class="btn">预览</span>
+                  </view>
+                </view>
+              </block>
+            </template>
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const mockData1 = '```jsx\nimport { Form, Input, Button, Message } from \'tdesign-react\';\n\nconst LoginForm = () => {\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async ({ validateResult }) => {\n    if (validateResult === true) {\n      setLoading(true);\n      try {\n        // 登录逻辑\n        Message.success(\'登录成功\');\n      } catch {\n        Message.error(\'登录失败\');\n      } finally {\n        setLoading(false);\n      }\n    }\n  };\n\n  return (\n    <Form onSubmit={onSubmit}>\n      <Form.FormItem name="username" label="用户名" rules={[{ required: true }]}>\n        <Input placeholder="请输入用户名" />\n      </Form.FormItem>\n\n      <Form.FormItem name="password" label="密码" rules={[{ required: true }]}>\n        <Input type="password" />\n      </Form.FormItem>\n\n      <Form.FormItem>\n        <Button theme="primary" type="submit" loading={loading} block>\n          登录\n        </Button>\n      </Form.FormItem>\n    </Form>\n  );\n};\n```\n\n';
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+export default {
+  components: {
+    tChatMessage,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tToast,
+  },
+  data() {
+    return {
+      customActionBar: ['refresh', 'good', 'bad'],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '欢迎使用TDesign Chatbot智能代码助手，请输入你的问题',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '使用tdesign组件库实现一个登录表单的例子',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 动态样式
+      // 内容高度
+      contentHeight: '100vh',
+
+      chatIndex: 0,
+      contentIndex: 0,
+
+      contentItem: {
+        type: '',
+
+        data: {
+          enName: '',
+        },
+      },
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      /**
+             * 计算内容区域高度
+             * 生成CSS calc表达式：calc(100vh - 96rpx - 导航高度 - 底部安全区域高度)
+             */
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.setData({
+          contentHeight,
+        });
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.setData({
+          contentHeight: 'calc(100vh - 96rpx)',
+        });
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e.detail;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              data: value.trim(),
+            },
+          ],
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.setData({
+        chatList: [userMessage, ...this.chatList],
+        value: '', // 清空输入框
+      });
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.setData({
+        loading: false,
+      });
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.setData({
+        loading: true,
+      });
+      const assistantMessage = {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        key: getUniqueKey(),
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'markdown',
+              data: '',
+            },
+          ],
+        },
+      };
+      this.setData({
+        chatList: [assistantMessage, ...this.chatList],
+      });
+      const that = this;
+      this.$nextTick(async () => {
+        await fetchStream('下面是一个使用TDesign组件库实现的登录表单组件，以React版本为例：\n\n', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data += result;
+            that.setData({
+              chatList: that.chatList,
+            });
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push(
+          {
+            type: 'preview',
+            status: 'complete',
+            data: {
+              id: 1755774250585,
+              enName: 'tdesign-login-form.jsx',
+              cnName: '生产完成',
+              version: 'v1',
+            },
+          },
+          {
+            type: 'markdown',
+            data: '',
+          },
+        );
+        that.setData({
+          chatList: that.chatList,
+        });
+        await fetchStream(mockData1, {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[2].data += result;
+            that.setData({
+              chatList: that.chatList,
+            });
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push({
+          type: 'markdown',
+          data: '',
+        });
+        that.setData({
+          chatList: that.chatList,
+        });
+        await fetchStream('这个版本都包含了：\n1. 用户名和密码输入框\n2. 必填验证\n3. 加载状态\n4. 基本的登录提交逻辑\n5. 消息提示功能', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[3].data += result;
+            that.setData({
+              chatList: that.chatList,
+            });
+          },
+          complete() {
+            that.chatList[0].message.status = 'complete';
+            that.setData({
+              chatList: that.chatList,
+            });
+            that.setData({
+              loading: false,
+            });
+          },
+        });
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e.detail;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+.preview {
+    padding: 8rpx 16rpx;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #c5c5c5;
+    border-radius: 6rpx;
+    color: #181818;
+}
+
+.preview .btn {
+    color: #366ef4;
+    margin-left: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/custom/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/custom/index.vue
new file mode 100644
index 000000000..368f79261
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/custom/index.vue
@@ -0,0 +1,399 @@
+<template>
+  <view>
+    <view
+      class="chat-box chart-chat"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item, chatIndex) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :class="item.message.role"
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :role="item.message.role || 'assistant'"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #content>
+              <block
+                v-for="(contentItem, contentIndex) in item.message.content"
+                :key="contentIndex"
+              >
+                <t-chat-content
+                  v-if="contentItem.type === 'text' || contentItem.type === 'markdown'"
+                  :content="contentItem"
+                  :role="item.message.role"
+                />
+
+                <!-- 封装的图表组件见源码 -->
+
+                <ChartComponent
+                  v-if="contentItem.type === 'chart'"
+                  el="normalLine"
+                  :options="contentItem"
+                />
+              </block>
+            </template>
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :render-presets="renderPresets"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChatContent from 'tdesign-uniapp-chat/chat-content/chat-content.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+import ChartComponent from '../chart-component';
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+export default {
+  components: {
+    tToast,
+    tChatMessage,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    ChartComponent,
+    tChatContent,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '欢迎使用TDesign智能图表分析助手，请输入你的问题',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 动态样式
+      // 内容高度
+      contentHeight: '100vh',
+
+      chatIndex: 0,
+      contentIndex: 0,
+
+      contentItem: {
+        type: '',
+      },
+    };
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  watch: {
+    isActive: {
+      handler(v) {
+        this.value = v ? '南极的自动提款机叫什么名字' : '';// 输入框的值
+      },
+
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeight = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.contentHeight = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              data: value.trim(),
+            },
+          ],
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.loading = false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 获取当前时间
+    getCurrentTime() {
+      const now = new Date();
+      const hours = now.getHours().toString()
+        .padStart(2, '0');
+      const minutes = now.getMinutes().toString()
+        .padStart(2, '0');
+      return `${hours}:${minutes}`;
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+      const assistantMessage = {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        key: getUniqueKey(),
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'markdown',
+              data: '',
+            },
+          ],
+        },
+      };
+      const list = [assistantMessage, ...this.chatList];
+      this.chatList = list;
+      const that = this;
+      this.$nextTick(async () => {
+        await fetchStream('今日上午北京道路车辆通行状况9:00的峰值（1320),可能显示早高峰拥堵最严重时段10:00后缓慢回落，可以得出如下折线图：', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push(
+          {
+            type: 'chart',
+            data: {
+              id: 8379.117942106575,
+              chartType: 'line',
+              options: {
+                xAxis: {
+                  boundaryGap: true,
+                  type: 'category',
+                  data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00'],
+                },
+                yAxis: {
+                  type: 'value',
+                },
+                series: [
+                  {
+                    data: [500, 401, 382, 433, 560, 630, 720],
+                    type: 'line',
+                  },
+                ],
+              },
+            },
+          },
+          {
+            type: 'markdown',
+            data: '',
+          },
+        );
+        await fetchStream('今日晚上北京道路车辆通行状况18:00的峰值（1322),可能显示早高峰拥堵最严重时段21:00后缓慢回落，可以得出如下折线图：', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[2].data += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push({
+          type: 'chart',
+          data: {
+            id: 9954.694158956194,
+            chartType: 'line',
+            options: {
+              xAxis: {
+                boundaryGap: true,
+                type: 'category',
+                data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  data: [500, 401, 382, 433, 560, 630, 720],
+                  type: 'line',
+                },
+              ],
+            },
+          },
+          strategy: 'append',
+          status: 'complete',
+        });
+        that.chatList[0].message.status = 'complete';
+        this.loading = false;
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+.chart-chat .assistant .t-chat__detail {
+    width: 100%;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/docs/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/docs/index.vue
new file mode 100644
index 000000000..5029e1d21
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/docs/index.vue
@@ -0,0 +1,373 @@
+<template>
+  <view>
+    <view
+      class="chat-box"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item, chatIndex) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :content="item.message.content"
+            :role="item.message.role"
+            :chat-content-props="chatContentProps"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                :action-bar="customActionBar"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            v-model:visible="visible"
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :file-list="fileList"
+            :attachments-props="attachmentsProps"
+            :render-presets="renderPresets"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+            @keyboardheightchange="onkeyboardheightchange"
+            @updateVisible="onUpdateVisible"
+            @fileDelete="onFileDelete"
+            @fileChange="onFileChange"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+
+const mockData1 = '🌼宝子们，春天来啦，这些户外郊游打卡地你必须知道👏\n\n🌟郊野公园\n这里有大片的草地和各种花卉，随便一拍都是大片既视感📷。还能放风筝、野餐，享受惬意的春日时光。\n\n🌳植物园\n各种珍稀植物汇聚于此，仿佛置身于绿色的海洋。漫步其中，感受大自然的神奇与美丽。\n\n💧湖边湿地\n湖水清澈，周围生态环境优越。能看到很多候鸟和水生植物，是亲近自然的好去处。\n\n宝子们，赶紧收拾行囊，去这些地方打卡吧😜。\n\n#春天郊游 #打卡目的地 #户外之旅 #春日美景';
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+export default {
+  components: {
+    tChatMessage,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tToast,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      customActionBar: ['copy', 'good', 'bad'],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '欢迎使用TDesign文案写作助手，可以先上传你需要参考的文件，输入你要撰写的主题~',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 动态样式
+      attachmentsProps: {
+        items: [],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+
+      renderPresets: [
+        {
+          name: 'upload',
+          presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'],
+          status: '',
+        },
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      fileList: [],
+      visible: false,
+
+      // 是否显示选择文件面板
+      chatContentProps: {
+        thinking: {
+          maxHeight: 100,
+          collapsed: true,
+        },
+      },
+
+      // 内容高度
+      contentHeight: '100vh',
+
+      chatIndex: 0,
+    };
+  },
+  watch: {
+    isActive: {
+      handler(v) {
+        // 延迟 30ms，避免 hidden 场景下， value 变更无法触发 textarea 的自动换行
+        // 代码片段（iOS 真机可复现）：https://developers.weixin.qq.com/s/7UoAYgmr8G4k
+        setTimeout(() => {
+          this.value = v ? '根据所提供的材料总结一篇文章，推荐春天户外郊游打卡目的地，需要符合小红书平台写作风格' : ''; // 输入框的值
+        }, 30);
+      },
+
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeight = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.contentHeight = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const content = [
+        {
+          type: 'text',
+          data: value.trim(),
+        },
+      ];
+      const attachments = this.attachmentsProps.items.map(item => ({
+        ...item,
+        status: 'success',
+      }));
+      content.unshift({
+        type: 'attachment',
+        data: attachments,
+      });
+      this.attachmentsProps = {
+        ...this.attachmentsProps,
+        items: [],
+      };
+      this.fileList = [];
+
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content,
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.loading =  false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 打开选择文件界面
+    onUpdateVisible(e) {
+      const visible = e;
+      console.log('上传面板显示状态:', visible);
+      this.visible = visible;
+    },
+
+    onFileDelete() {
+      this.attachmentsProps = {
+        ...this.attachmentsProps,
+        items: [],
+      };
+    },
+
+    onFileChange(e) {
+      const { files } = e;
+      this.attachmentsProps = {
+        ...this.attachmentsProps,
+        items: files,
+      };
+      this.fileList = files;
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+      const assistantMessage = {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        key: getUniqueKey(),
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'markdown',
+              data: '',
+            },
+          ],
+        },
+      };
+      this.chatList = [assistantMessage, ...this.chatList];
+      const that = this;
+      this.$nextTick(() => {
+        fetchStream(mockData1, {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data += result;
+          },
+          complete() {
+            that.chatList[0].message.status = 'complete';
+            that.loading = false;
+          },
+        });
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+
+    onkeyboardheightchange() {
+      console.log('占位：函数 onkeyboardheightchange 未声明');
+    },
+  },
+};
+</script>
+<style>
+
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+.preview {
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid black;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/ec-canvas.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/ec-canvas.vue
new file mode 100644
index 000000000..808222d33
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/ec-canvas.vue
@@ -0,0 +1,319 @@
+<template>
+  <view>
+    <!-- 新的：接口对其了H5 -->
+    <canvas
+      v-if="isUseNewCanvas"
+      type="2d"
+      class="ec-canvas"
+      :canvas-id="canvasId"
+      @init="init"
+      @touchstart="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchStart')"
+      @touchmove="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchMove')"
+      @touchend="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchEnd')"
+    />
+    <!-- 旧的 -->
+    <canvas
+      v-else
+      class="ec-canvas"
+      :canvas-id="canvasId"
+      @init="init"
+      @touchstart="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchStart')"
+      @touchmove="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchMove')"
+      @touchend="parseEventDynamicCode($event, ec.disableTouch ? '' : 'touchEnd')"
+    />
+  </view>
+</template>
+
+<script>
+/* eslint-disable */
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts.js';
+
+console.log('echarts', echarts.registerPreprocessor)
+let ctx;
+function compareVersion(v1, v2) {
+    v1 = v1.split('.');
+    v2 = v2.split('.');
+    const len = Math.max(v1.length, v2.length);
+    while (v1.length < len) {
+        v1.push('0');
+    }
+    while (v2.length < len) {
+        v2.push('0');
+    }
+    for (let i = 0; i < len; i++) {
+        const num1 = parseInt(v1[i]);
+        const num2 = parseInt(v2[i]);
+        if (num1 > num2) {
+            return 1;
+        } else if (num1 < num2) {
+            return -1;
+        }
+    }
+    return 0;
+}
+export default {
+    data() {
+        return {
+            isUseNewCanvas: false
+        };
+    },
+    props: {
+        canvasId: {
+            type: String,
+            default: 'ec-canvas'
+        },
+        ec: {
+            type: Object
+        },
+        forceUseOldCanvas: {
+            type: Boolean,
+            default: false
+        }
+    },
+    mounted() {
+        // 处理小程序 ready 生命周期
+        this.$nextTick(() => this.ready());
+    },
+    methods: {
+        ready: function () {
+            // Disable prograssive because drawImage doesn't support DOM as parameter
+            // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+            echarts.registerPreprocessor?.((option) => {
+                if (option && option.series) {
+                    if (option.series.length > 0) {
+                        option.series.forEach((series) => {
+                            series.progressive = 0;
+                        });
+                    } else if (typeof option.series === 'object') {
+                        option.series.progressive = 0;
+                    }
+                }
+            });
+            if (!this.ec) {
+                console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+                return;
+            }
+            if (!this.ec.lazyLoad) {
+                this.init();
+            }
+        },
+
+        init: function (callback) {
+            const version = uni.getSystemInfoSync().SDKVersion;
+            const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
+            const forceUseOldCanvas = this.forceUseOldCanvas;
+            const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+                this.isUseNewCanvas = isUseNewCanvas;
+                
+            if (forceUseOldCanvas && canUseNewCanvas) {
+                console.warn('开发者强制使用旧canvas,建议关闭');
+            }
+            if (isUseNewCanvas) {
+                // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+                // 2.9.0 可以使用 <canvas type="2d"></canvas>
+                this.initByNewWay(callback);
+            } else {
+                const isValid = compareVersion(version, '1.9.91') >= 0;
+                if (!isValid) {
+                    console.error(
+                        '\u5FAE\u4FE1\u57FA\u7840\u5E93\u7248\u672C\u8FC7\u4F4E\uFF0C\u9700\u5927\u4E8E\u7B49\u4E8E 1.9.91\u3002\u53C2\u89C1\uFF1Ahttps://github.com/ecomfe/echarts-for-weixin#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'
+                    );
+                    return;
+                } else {
+                    console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
+                    this.initByOldWay(callback);
+                }
+            }
+        },
+
+        initByOldWay(callback) {
+            // 1.9.91 <= version < 2.9.0：原来的方式初始化
+            ctx = uni.createCanvasContext(this.canvasId, this);
+            const canvas = new WxCanvas(ctx, this.canvasId, false);
+            if (echarts.setPlatformAPI) {
+                echarts.setPlatformAPI({
+                    createCanvas: () => canvas
+                });
+            } else {
+                echarts.setCanvasCreator(() => canvas);
+            }
+            // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+            const canvasDpr = 1;
+            var query = uni.createSelectorQuery().in(this);
+            query
+                .select('.ec-canvas')
+                .boundingClientRect((res) => {
+                    if (typeof callback === 'function') {
+                        this.chart = callback(canvas, res.width, res.height, canvasDpr);
+                    } else if (this.ec && typeof this.ec.onInit === 'function') {
+                        this.chart = this.ec.onInit(canvas, res.width, res.height, canvasDpr);
+                    } else {
+                        this.$emit('init', {
+                            detail: {
+                                canvas: canvas,
+                                width: res.width,
+                                height: res.height,
+                                canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
+                            }
+                        });
+                    }
+                })
+                .exec();
+        },
+
+        initByNewWay(callback) {
+            // version >= 2.9.0：使用新的方式初始化
+            const query = uni.createSelectorQuery().in(this);
+            query
+                .select('.ec-canvas')
+                .fields({
+                    node: true,
+                    size: true
+                })
+                .exec((res) => {
+                    const canvasNode = res[0].node;
+                    this.canvasNode = canvasNode;
+                    const canvasDpr = uni.getSystemInfoSync().pixelRatio;
+                    const canvasWidth = res[0].width;
+                    const canvasHeight = res[0].height;
+                    const ctx = canvasNode.getContext('2d');
+                    const canvas = new WxCanvas(ctx, this.canvasId, true, canvasNode);
+                    if (echarts.setPlatformAPI) {
+                        echarts.setPlatformAPI({
+                            createCanvas: () => canvas,
+                            loadImage: (src, onload, onerror) => {
+                                if (canvasNode.createImage) {
+                                    const image = canvasNode.createImage();
+                                    image.onload = onload;
+                                    image.onerror = onerror;
+                                    image.src = src;
+                                    return image;
+                                }
+                                console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。');
+                                // PENDING fallback?
+                            }
+                        });
+                    } else {
+                        echarts.setCanvasCreator(() => canvas);
+                    }
+                    if (typeof callback === 'function') {
+                        this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
+                    } else if (this.ec && typeof this.ec.onInit === 'function') {
+                        this.chart = this.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr);
+                    } else {
+                        this.$emit('init', {
+                            detail: {
+                                canvas: canvas,
+                                width: canvasWidth,
+                                height: canvasHeight,
+                                dpr: canvasDpr
+                            }
+                        });
+                    }
+                });
+        },
+
+        canvasToTempFilePath(opt) {
+            if (this.isUseNewCanvas) {
+                // 新版
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.ec-canvas')
+                    .fields({
+                        node: true,
+                        size: true
+                    })
+                    .exec((res) => {
+                        const canvasNode = res[0].node;
+                        opt.canvas = canvasNode;
+                        uni.canvasToTempFilePath(opt);
+                    });
+            } else {
+                // 旧的
+                if (!opt.canvasId) {
+                    opt.canvasId = this.canvasId;
+                }
+                ctx.draw(true, () => {
+                    uni.canvasToTempFilePath(opt, this);
+                });
+            }
+        },
+
+        touchStart(e) {
+            if (this.chart && e.touches.length > 0) {
+                var touch = e.touches[0];
+                var handler = this.chart.getZr().handler;
+                handler.dispatch('mousedown', {
+                    zrX: touch.x,
+                    zrY: touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+                handler.dispatch('mousemove', {
+                    zrX: touch.x,
+                    zrY: touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+                handler.processGesture(wrapTouch(e), 'start');
+            }
+        },
+
+        touchMove(e) {
+            if (this.chart && e.touches.length > 0) {
+                var touch = e.touches[0];
+                var handler = this.chart.getZr().handler;
+                handler.dispatch('mousemove', {
+                    zrX: touch.x,
+                    zrY: touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+                handler.processGesture(wrapTouch(e), 'change');
+            }
+        },
+
+        touchEnd(e) {
+            if (this.chart) {
+                const touch = e.changedTouches ? e.changedTouches[0] : {};
+                var handler = this.chart.getZr().handler;
+                handler.dispatch('mouseup', {
+                    zrX: touch.x,
+                    zrY: touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+                handler.dispatch('click', {
+                    zrX: touch.x,
+                    zrY: touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+                handler.processGesture(wrapTouch(e), 'end');
+            }
+        }
+    },
+    created: function () {}
+};
+function wrapTouch(event) {
+    for (let i = 0; i < event.touches.length; ++i) {
+        const touch = event.touches[i];
+        touch.offsetX = touch.x;
+        touch.offsetY = touch.y;
+    }
+    return event;
+}
+</script>
+<style>
+.ec-canvas {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/echarts.js b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/echarts.js
new file mode 100644
index 000000000..0b1ab373f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/echarts.js
@@ -0,0 +1,45 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).echarts={})}(this,(function(t){"use strict";
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,n)};function n(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}var i=function(){this.firefox=!1,this.ie=!1,this.edge=!1,this.newEdge=!1,this.weChat=!1},r=new function(){this.browser=new i,this.node=!1,this.wxa=!1,this.worker=!1,this.svgSupported=!1,this.touchEventsSupported=!1,this.pointerEventsSupported=!1,this.domSupported=!1,this.transformSupported=!1,this.transform3dSupported=!1,this.hasGlobalWindow="undefined"!=typeof window};"object"==typeof wx&&"function"==typeof wx.getSystemInfoSync?(r.wxa=!0,r.touchEventsSupported=!0):"undefined"==typeof document&&"undefined"!=typeof self?r.worker=!0:"undefined"==typeof navigator?(r.node=!0,r.svgSupported=!0):function(t,e){var n=e.browser,i=t.match(/Firefox\/([\d.]+)/),r=t.match(/MSIE\s([\d.]+)/)||t.match(/Trident\/.+?rv:(([\d.]+))/),o=t.match(/Edge?\/([\d.]+)/),a=/micromessenger/i.test(t);i&&(n.firefox=!0,n.version=i[1]);r&&(n.ie=!0,n.version=r[1]);o&&(n.edge=!0,n.version=o[1],n.newEdge=+o[1].split(".")[0]>18);a&&(n.weChat=!0);e.svgSupported="undefined"!=typeof SVGRect,e.touchEventsSupported="ontouchstart"in window&&!n.ie&&!n.edge,e.pointerEventsSupported="onpointerdown"in window&&(n.edge||n.ie&&+n.version>=11),e.domSupported="undefined"!=typeof document;var s=document.documentElement.style;e.transform3dSupported=(n.ie&&"transition"in s||n.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||n.ie&&+n.version>=9}(navigator.userAgent,r);var o="sans-serif",a="12px sans-serif";var s,l,u=function(t){var e={};if("undefined"==typeof JSON)return e;for(var n=0;n<t.length;n++){var i=String.fromCharCode(n+32),r=(t.charCodeAt(n)-20)/100;e[i]=r}return e}("007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N"),h={createCanvas:function(){return"undefined"!=typeof document&&document.createElement("canvas")},measureText:function(t,e){if(!s){var n=h.createCanvas();s=n&&n.getContext("2d")}if(s)return l!==e&&(l=s.font=e||a),s.measureText(t);t=t||"";var i=/^([0-9]*?)px$/.exec(e=e||a),r=+(i&&i[1])||12,o=0;if(e.indexOf("mono")>=0)o=r*t.length;else for(var c=0;c<t.length;c++){var p=u[t[c]];o+=null==p?r:p*r}return{width:o}},loadImage:function(t,e,n){var i=new Image;return i.onload=e,i.onerror=n,i.src=t,i}};function c(t){for(var e in h)t[e]&&(h[e]=t[e])}var p=V(["Function","RegExp","Date","Error","CanvasGradient","CanvasPattern","Image","Canvas"],(function(t,e){return t["[object "+e+"]"]=!0,t}),{}),d=V(["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]=!0,t}),{}),f=Object.prototype.toString,g=Array.prototype,y=g.forEach,v=g.filter,m=g.slice,x=g.map,_=function(){}.constructor,b=_?_.prototype:null,w="__proto__",S=2311;function M(){return S++}function I(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];"undefined"!=typeof console&&console.error.apply(console,t)}function T(t){if(null==t||"object"!=typeof t)return t;var e=t,n=f.call(t);if("[object Array]"===n){if(!pt(t)){e=[];for(var i=0,r=t.length;i<r;i++)e[i]=T(t[i])}}else if(d[n]){if(!pt(t)){var o=t.constructor;if(o.from)e=o.from(t);else{e=new o(t.length);for(i=0,r=t.length;i<r;i++)e[i]=t[i]}}}else if(!p[n]&&!pt(t)&&!J(t))for(var a in e={},t)t.hasOwnProperty(a)&&a!==w&&(e[a]=T(t[a]));return e}function C(t,e,n){if(!q(e)||!q(t))return n?T(e):t;for(var i in e)if(e.hasOwnProperty(i)&&i!==w){var r=t[i],o=e[i];!q(o)||!q(r)||Y(o)||Y(r)||J(o)||J(r)||K(o)||K(r)||pt(o)||pt(r)?!n&&i in t||(t[i]=T(e[i])):C(r,o,n)}return t}function D(t,e){for(var n=t[0],i=1,r=t.length;i<r;i++)n=C(n,t[i],e);return n}function A(t,e){if(Object.assign)Object.assign(t,e);else for(var n in e)e.hasOwnProperty(n)&&n!==w&&(t[n]=e[n]);return t}function k(t,e,n){for(var i=G(e),r=0;r<i.length;r++){var o=i[r];(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}return t}var L=h.createCanvas;function P(t,e){if(t){if(t.indexOf)return t.indexOf(e);for(var n=0,i=t.length;n<i;n++)if(t[n]===e)return n}return-1}function O(t,e){var n=t.prototype;function i(){}for(var r in i.prototype=e.prototype,t.prototype=new i,n)n.hasOwnProperty(r)&&(t.prototype[r]=n[r]);t.prototype.constructor=t,t.superClass=e}function R(t,e,n){if(t="prototype"in t?t.prototype:t,e="prototype"in e?e.prototype:e,Object.getOwnPropertyNames)for(var i=Object.getOwnPropertyNames(e),r=0;r<i.length;r++){var o=i[r];"constructor"!==o&&(n?null!=e[o]:null==t[o])&&(t[o]=e[o])}else k(t,e,n)}function N(t){return!!t&&("string"!=typeof t&&"number"==typeof t.length)}function E(t,e,n){if(t&&e)if(t.forEach&&t.forEach===y)t.forEach(e,n);else if(t.length===+t.length)for(var i=0,r=t.length;i<r;i++)e.call(n,t[i],i,t);else for(var o in t)t.hasOwnProperty(o)&&e.call(n,t[o],o,t)}function z(t,e,n){if(!t)return[];if(!e)return at(t);if(t.map&&t.map===x)return t.map(e,n);for(var i=[],r=0,o=t.length;r<o;r++)i.push(e.call(n,t[r],r,t));return i}function V(t,e,n,i){if(t&&e){for(var r=0,o=t.length;r<o;r++)n=e.call(i,n,t[r],r,t);return n}}function B(t,e,n){if(!t)return[];if(!e)return at(t);if(t.filter&&t.filter===v)return t.filter(e,n);for(var i=[],r=0,o=t.length;r<o;r++)e.call(n,t[r],r,t)&&i.push(t[r]);return i}function F(t,e,n){if(t&&e)for(var i=0,r=t.length;i<r;i++)if(e.call(n,t[i],i,t))return t[i]}function G(t){if(!t)return[];if(Object.keys)return Object.keys(t);var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);return e}var W=b&&U(b.bind)?b.call.bind(b.bind):function(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];return function(){return t.apply(e,n.concat(m.call(arguments)))}};function H(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return function(){return t.apply(this,e.concat(m.call(arguments)))}}function Y(t){return Array.isArray?Array.isArray(t):"[object Array]"===f.call(t)}function U(t){return"function"==typeof t}function X(t){return"string"==typeof t}function Z(t){return"[object String]"===f.call(t)}function j(t){return"number"==typeof t}function q(t){var e=typeof t;return"function"===e||!!t&&"object"===e}function K(t){return!!p[f.call(t)]}function $(t){return!!d[f.call(t)]}function J(t){return"object"==typeof t&&"number"==typeof t.nodeType&&"object"==typeof t.ownerDocument}function Q(t){return null!=t.colorStops}function tt(t){return null!=t.image}function et(t){return"[object RegExp]"===f.call(t)}function nt(t){return t!=t}function it(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];for(var n=0,i=t.length;n<i;n++)if(null!=t[n])return t[n]}function rt(t,e){return null!=t?t:e}function ot(t,e,n){return null!=t?t:null!=e?e:n}function at(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return m.apply(t,e)}function st(t){if("number"==typeof t)return[t,t,t,t];var e=t.length;return 2===e?[t[0],t[1],t[0],t[1]]:3===e?[t[0],t[1],t[2],t[1]]:t}function lt(t,e){if(!t)throw new Error(e)}function ut(t){return null==t?null:"function"==typeof t.trim?t.trim():t.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}var ht="__ec_primitive__";function ct(t){t[ht]=!0}function pt(t){return t[ht]}var dt=function(){function t(e){this.data={};var n=Y(e);this.data={};var i=this;function r(t,e){n?i.set(t,e):i.set(e,t)}e instanceof t?e.each(r):e&&E(e,r)}return t.prototype.get=function(t){return this.data.hasOwnProperty(t)?this.data[t]:null},t.prototype.set=function(t,e){return this.data[t]=e},t.prototype.each=function(t,e){for(var n in this.data)this.data.hasOwnProperty(n)&&t.call(e,this.data[n],n)},t.prototype.keys=function(){return G(this.data)},t.prototype.removeKey=function(t){delete this.data[t]},t}();function ft(t){return new dt(t)}function gt(t,e){for(var n=new t.constructor(t.length+e.length),i=0;i<t.length;i++)n[i]=t[i];var r=t.length;for(i=0;i<e.length;i++)n[i+r]=e[i];return n}function yt(t,e){var n;if(Object.create)n=Object.create(t);else{var i=function(){};i.prototype=t,n=new i}return e&&A(n,e),n}function vt(t){var e=t.style;e.webkitUserSelect="none",e.userSelect="none",e.webkitTapHighlightColor="rgba(0,0,0,0)",e["-webkit-touch-callout"]="none"}function mt(t,e){return t.hasOwnProperty(e)}function xt(){}var _t=180/Math.PI,bt=Object.freeze({__proto__:null,guid:M,logError:I,clone:T,merge:C,mergeAll:D,extend:A,defaults:k,createCanvas:L,indexOf:P,inherits:O,mixin:R,isArrayLike:N,each:E,map:z,reduce:V,filter:B,find:F,keys:G,bind:W,curry:H,isArray:Y,isFunction:U,isString:X,isStringSafe:Z,isNumber:j,isObject:q,isBuiltInObject:K,isTypedArray:$,isDom:J,isGradientObject:Q,isImagePatternObject:tt,isRegExp:et,eqNaN:nt,retrieve:it,retrieve2:rt,retrieve3:ot,slice:at,normalizeCssArray:st,assert:lt,trim:ut,setAsPrimitive:ct,isPrimitive:pt,HashMap:dt,createHashMap:ft,concatArray:gt,createObject:yt,disableUserSelect:vt,hasOwn:mt,noop:xt,RADIAN_TO_DEGREE:_t});function wt(t,e){return null==t&&(t=0),null==e&&(e=0),[t,e]}function St(t,e){return t[0]=e[0],t[1]=e[1],t}function Mt(t){return[t[0],t[1]]}function It(t,e,n){return t[0]=e,t[1]=n,t}function Tt(t,e,n){return t[0]=e[0]+n[0],t[1]=e[1]+n[1],t}function Ct(t,e,n,i){return t[0]=e[0]+n[0]*i,t[1]=e[1]+n[1]*i,t}function Dt(t,e,n){return t[0]=e[0]-n[0],t[1]=e[1]-n[1],t}function At(t){return Math.sqrt(Lt(t))}var kt=At;function Lt(t){return t[0]*t[0]+t[1]*t[1]}var Pt=Lt;function Ot(t,e,n){return t[0]=e[0]*n,t[1]=e[1]*n,t}function Rt(t,e){var n=At(e);return 0===n?(t[0]=0,t[1]=0):(t[0]=e[0]/n,t[1]=e[1]/n),t}function Nt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}var Et=Nt;function zt(t,e){return(t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1])}var Vt=zt;function Bt(t,e,n,i){return t[0]=e[0]+i*(n[0]-e[0]),t[1]=e[1]+i*(n[1]-e[1]),t}function Ft(t,e,n){var i=e[0],r=e[1];return t[0]=n[0]*i+n[2]*r+n[4],t[1]=n[1]*i+n[3]*r+n[5],t}function Gt(t,e,n){return t[0]=Math.min(e[0],n[0]),t[1]=Math.min(e[1],n[1]),t}function Wt(t,e,n){return t[0]=Math.max(e[0],n[0]),t[1]=Math.max(e[1],n[1]),t}var Ht=Object.freeze({__proto__:null,create:wt,copy:St,clone:Mt,set:It,add:Tt,scaleAndAdd:Ct,sub:Dt,len:At,length:kt,lenSquare:Lt,lengthSquare:Pt,mul:function(t,e,n){return t[0]=e[0]*n[0],t[1]=e[1]*n[1],t},div:function(t,e,n){return t[0]=e[0]/n[0],t[1]=e[1]/n[1],t},dot:function(t,e){return t[0]*e[0]+t[1]*e[1]},scale:Ot,normalize:Rt,distance:Nt,dist:Et,distanceSquare:zt,distSquare:Vt,negate:function(t,e){return t[0]=-e[0],t[1]=-e[1],t},lerp:Bt,applyTransform:Ft,min:Gt,max:Wt}),Yt=function(t,e){this.target=t,this.topTarget=e&&e.topTarget},Ut=function(){function t(t){this.handler=t,t.on("mousedown",this._dragStart,this),t.on("mousemove",this._drag,this),t.on("mouseup",this._dragEnd,this)}return t.prototype._dragStart=function(t){for(var e=t.target;e&&!e.draggable;)e=e.parent||e.__hostTarget;e&&(this._draggingTarget=e,e.dragging=!0,this._x=t.offsetX,this._y=t.offsetY,this.handler.dispatchToElement(new Yt(e,t),"dragstart",t.event))},t.prototype._drag=function(t){var e=this._draggingTarget;if(e){var n=t.offsetX,i=t.offsetY,r=n-this._x,o=i-this._y;this._x=n,this._y=i,e.drift(r,o,t),this.handler.dispatchToElement(new Yt(e,t),"drag",t.event);var a=this.handler.findHover(n,i,e).target,s=this._dropTarget;this._dropTarget=a,e!==a&&(s&&a!==s&&this.handler.dispatchToElement(new Yt(s,t),"dragleave",t.event),a&&a!==s&&this.handler.dispatchToElement(new Yt(a,t),"dragenter",t.event))}},t.prototype._dragEnd=function(t){var e=this._draggingTarget;e&&(e.dragging=!1),this.handler.dispatchToElement(new Yt(e,t),"dragend",t.event),this._dropTarget&&this.handler.dispatchToElement(new Yt(this._dropTarget,t),"drop",t.event),this._draggingTarget=null,this._dropTarget=null},t}(),Xt=function(){function t(t){t&&(this._$eventProcessor=t)}return t.prototype.on=function(t,e,n,i){this._$handlers||(this._$handlers={});var r=this._$handlers;if("function"==typeof e&&(i=n,n=e,e=null),!n||!t)return this;var o=this._$eventProcessor;null!=e&&o&&o.normalizeQuery&&(e=o.normalizeQuery(e)),r[t]||(r[t]=[]);for(var a=0;a<r[t].length;a++)if(r[t][a].h===n)return this;var s={h:n,query:e,ctx:i||this,callAtLast:n.zrEventfulCallAtLast},l=r[t].length-1,u=r[t][l];return u&&u.callAtLast?r[t].splice(l,0,s):r[t].push(s),this},t.prototype.isSilent=function(t){var e=this._$handlers;return!e||!e[t]||!e[t].length},t.prototype.off=function(t,e){var n=this._$handlers;if(!n)return this;if(!t)return this._$handlers={},this;if(e){if(n[t]){for(var i=[],r=0,o=n[t].length;r<o;r++)n[t][r].h!==e&&i.push(n[t][r]);n[t]=i}n[t]&&0===n[t].length&&delete n[t]}else delete n[t];return this},t.prototype.trigger=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!this._$handlers)return this;var i=this._$handlers[t],r=this._$eventProcessor;if(i)for(var o=e.length,a=i.length,s=0;s<a;s++){var l=i[s];if(!r||!r.filter||null==l.query||r.filter(t,l.query))switch(o){case 0:l.h.call(l.ctx);break;case 1:l.h.call(l.ctx,e[0]);break;case 2:l.h.call(l.ctx,e[0],e[1]);break;default:l.h.apply(l.ctx,e)}}return r&&r.afterTrigger&&r.afterTrigger(t),this},t.prototype.triggerWithContext=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!this._$handlers)return this;var i=this._$handlers[t],r=this._$eventProcessor;if(i)for(var o=e.length,a=e[o-1],s=i.length,l=0;l<s;l++){var u=i[l];if(!r||!r.filter||null==u.query||r.filter(t,u.query))switch(o){case 0:u.h.call(a);break;case 1:u.h.call(a,e[0]);break;case 2:u.h.call(a,e[0],e[1]);break;default:u.h.apply(a,e.slice(1,o-1))}}return r&&r.afterTrigger&&r.afterTrigger(t),this},t}(),Zt=Math.log(2);function jt(t,e,n,i,r,o){var a=i+"-"+r,s=t.length;if(o.hasOwnProperty(a))return o[a];if(1===e){var l=Math.round(Math.log((1<<s)-1&~r)/Zt);return t[n][l]}for(var u=i|1<<n,h=n+1;i&1<<h;)h++;for(var c=0,p=0,d=0;p<s;p++){var f=1<<p;f&r||(c+=(d%2?-1:1)*t[n][p]*jt(t,e-1,h,u,r|f,o),d++)}return o[a]=c,c}function qt(t,e){var n=[[t[0],t[1],1,0,0,0,-e[0]*t[0],-e[0]*t[1]],[0,0,0,t[0],t[1],1,-e[1]*t[0],-e[1]*t[1]],[t[2],t[3],1,0,0,0,-e[2]*t[2],-e[2]*t[3]],[0,0,0,t[2],t[3],1,-e[3]*t[2],-e[3]*t[3]],[t[4],t[5],1,0,0,0,-e[4]*t[4],-e[4]*t[5]],[0,0,0,t[4],t[5],1,-e[5]*t[4],-e[5]*t[5]],[t[6],t[7],1,0,0,0,-e[6]*t[6],-e[6]*t[7]],[0,0,0,t[6],t[7],1,-e[7]*t[6],-e[7]*t[7]]],i={},r=jt(n,8,0,0,0,i);if(0!==r){for(var o=[],a=0;a<8;a++)for(var s=0;s<8;s++)null==o[s]&&(o[s]=0),o[s]+=((a+s)%2?-1:1)*jt(n,7,0===a?1:0,1<<a,1<<s,i)/r*e[a];return function(t,e,n){var i=e*o[6]+n*o[7]+1;t[0]=(e*o[0]+n*o[1]+o[2])/i,t[1]=(e*o[3]+n*o[4]+o[5])/i}}}var Kt=[];function $t(t,e,n,i,o){if(e.getBoundingClientRect&&r.domSupported&&!Jt(e)){var a=e.___zrEVENTSAVED||(e.___zrEVENTSAVED={}),s=function(t,e,n){for(var i=n?"invTrans":"trans",r=e[i],o=e.srcCoords,a=[],s=[],l=!0,u=0;u<4;u++){var h=t[u].getBoundingClientRect(),c=2*u,p=h.left,d=h.top;a.push(p,d),l=l&&o&&p===o[c]&&d===o[c+1],s.push(t[u].offsetLeft,t[u].offsetTop)}return l&&r?r:(e.srcCoords=a,e[i]=n?qt(s,a):qt(a,s))}(function(t,e){var n=e.markers;if(n)return n;n=e.markers=[];for(var i=["left","right"],r=["top","bottom"],o=0;o<4;o++){var a=document.createElement("div"),s=o%2,l=(o>>1)%2;a.style.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",i[s]+":0",r[l]+":0",i[1-s]+":auto",r[1-l]+":auto",""].join("!important;"),t.appendChild(a),n.push(a)}return n}(e,a),a,o);if(s)return s(t,n,i),!0}return!1}function Jt(t){return"CANVAS"===t.nodeName.toUpperCase()}var Qt=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,te=[],ee=r.browser.firefox&&+r.browser.version.split(".")[0]<39;function ne(t,e,n,i){return n=n||{},i?ie(t,e,n):ee&&null!=e.layerX&&e.layerX!==e.offsetX?(n.zrX=e.layerX,n.zrY=e.layerY):null!=e.offsetX?(n.zrX=e.offsetX,n.zrY=e.offsetY):ie(t,e,n),n}function ie(t,e,n){if(r.domSupported&&t.getBoundingClientRect){var i=e.clientX,o=e.clientY;if(Jt(t)){var a=t.getBoundingClientRect();return n.zrX=i-a.left,void(n.zrY=o-a.top)}if($t(te,t,i,o))return n.zrX=te[0],void(n.zrY=te[1])}n.zrX=n.zrY=0}function re(t){return t||window.event}function oe(t,e,n){if(null!=(e=re(e)).zrX)return e;var i=e.type;if(i&&i.indexOf("touch")>=0){var r="touchend"!==i?e.targetTouches[0]:e.changedTouches[0];r&&ne(t,r,e,n)}else{ne(t,e,e,n);var o=function(t){var e=t.wheelDelta;if(e)return e;var n=t.deltaX,i=t.deltaY;if(null==n||null==i)return e;return 3*(0!==i?Math.abs(i):Math.abs(n))*(i>0?-1:i<0?1:n>0?-1:1)}(e);e.zrDelta=o?o/120:-(e.detail||0)/3}var a=e.button;return null==e.which&&void 0!==a&&Qt.test(e.type)&&(e.which=1&a?1:2&a?3:4&a?2:0),e}function ae(t,e,n,i){t.addEventListener(e,n,i)}var se=function(t){t.preventDefault(),t.stopPropagation(),t.cancelBubble=!0};function le(t){return 2===t.which||3===t.which}var ue=function(){function t(){this._track=[]}return t.prototype.recognize=function(t,e,n){return this._doTrack(t,e,n),this._recognize(t)},t.prototype.clear=function(){return this._track.length=0,this},t.prototype._doTrack=function(t,e,n){var i=t.touches;if(i){for(var r={points:[],touches:[],target:e,event:t},o=0,a=i.length;o<a;o++){var s=i[o],l=ne(n,s,{});r.points.push([l.zrX,l.zrY]),r.touches.push(s)}this._track.push(r)}},t.prototype._recognize=function(t){for(var e in ce)if(ce.hasOwnProperty(e)){var n=ce[e](this._track,t);if(n)return n}},t}();function he(t){var e=t[1][0]-t[0][0],n=t[1][1]-t[0][1];return Math.sqrt(e*e+n*n)}var ce={pinch:function(t,e){var n=t.length;if(n){var i,r=(t[n-1]||{}).points,o=(t[n-2]||{}).points||r;if(o&&o.length>1&&r&&r.length>1){var a=he(r)/he(o);!isFinite(a)&&(a=1),e.pinchScale=a;var s=[((i=r)[0][0]+i[1][0])/2,(i[0][1]+i[1][1])/2];return e.pinchX=s[0],e.pinchY=s[1],{type:"pinch",target:t[0].target,event:e}}}}},pe="silent";function de(){se(this.event)}var fe=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.handler=null,e}return n(e,t),e.prototype.dispose=function(){},e.prototype.setCursor=function(){},e}(Xt),ge=function(t,e){this.x=t,this.y=e},ye=["click","dblclick","mousewheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],ve=function(t){function e(e,n,i,r){var o=t.call(this)||this;return o._hovered=new ge(0,0),o.storage=e,o.painter=n,o.painterRoot=r,i=i||new fe,o.proxy=null,o.setHandlerProxy(i),o._draggingMgr=new Ut(o),o}return n(e,t),e.prototype.setHandlerProxy=function(t){this.proxy&&this.proxy.dispose(),t&&(E(ye,(function(e){t.on&&t.on(e,this[e],this)}),this),t.handler=this),this.proxy=t},e.prototype.mousemove=function(t){var e=t.zrX,n=t.zrY,i=xe(this,e,n),r=this._hovered,o=r.target;o&&!o.__zr&&(o=(r=this.findHover(r.x,r.y)).target);var a=this._hovered=i?new ge(e,n):this.findHover(e,n),s=a.target,l=this.proxy;l.setCursor&&l.setCursor(s?s.cursor:"default"),o&&s!==o&&this.dispatchToElement(r,"mouseout",t),this.dispatchToElement(a,"mousemove",t),s&&s!==o&&this.dispatchToElement(a,"mouseover",t)},e.prototype.mouseout=function(t){var e=t.zrEventControl;"only_globalout"!==e&&this.dispatchToElement(this._hovered,"mouseout",t),"no_globalout"!==e&&this.trigger("globalout",{type:"globalout",event:t})},e.prototype.resize=function(){this._hovered=new ge(0,0)},e.prototype.dispatch=function(t,e){var n=this[t];n&&n.call(this,e)},e.prototype.dispose=function(){this.proxy.dispose(),this.storage=null,this.proxy=null,this.painter=null},e.prototype.setCursorStyle=function(t){var e=this.proxy;e.setCursor&&e.setCursor(t)},e.prototype.dispatchToElement=function(t,e,n){var i=(t=t||{}).target;if(!i||!i.silent){for(var r="on"+e,o=function(t,e,n){return{type:t,event:n,target:e.target,topTarget:e.topTarget,cancelBubble:!1,offsetX:n.zrX,offsetY:n.zrY,gestureEvent:n.gestureEvent,pinchX:n.pinchX,pinchY:n.pinchY,pinchScale:n.pinchScale,wheelDelta:n.zrDelta,zrByTouch:n.zrByTouch,which:n.which,stop:de}}(e,t,n);i&&(i[r]&&(o.cancelBubble=!!i[r].call(i,o)),i.trigger(e,o),i=i.__hostTarget?i.__hostTarget:i.parent,!o.cancelBubble););o.cancelBubble||(this.trigger(e,o),this.painter&&this.painter.eachOtherLayer&&this.painter.eachOtherLayer((function(t){"function"==typeof t[r]&&t[r].call(t,o),t.trigger&&t.trigger(e,o)})))}},e.prototype.findHover=function(t,e,n){for(var i=this.storage.getDisplayList(),r=new ge(t,e),o=i.length-1;o>=0;o--){var a=void 0;if(i[o]!==n&&!i[o].ignore&&(a=me(i[o],t,e))&&(!r.topTarget&&(r.topTarget=i[o]),a!==pe)){r.target=i[o];break}}return r},e.prototype.processGesture=function(t,e){this._gestureMgr||(this._gestureMgr=new ue);var n=this._gestureMgr;"start"===e&&n.clear();var i=n.recognize(t,this.findHover(t.zrX,t.zrY,null).target,this.proxy.dom);if("end"===e&&n.clear(),i){var r=i.type;t.gestureEvent=r;var o=new ge;o.target=i.target,this.dispatchToElement(o,r,i.event)}},e}(Xt);function me(t,e,n){if(t[t.rectHover?"rectContain":"contain"](e,n)){for(var i=t,r=void 0,o=!1;i;){if(i.ignoreClip&&(o=!0),!o){var a=i.getClipPath();if(a&&!a.contain(e,n))return!1;i.silent&&(r=!0)}var s=i.__hostTarget;i=s||i.parent}return!r||pe}return!1}function xe(t,e,n){var i=t.painter;return e<0||e>i.getWidth()||n<0||n>i.getHeight()}E(["click","mousedown","mouseup","mousewheel","dblclick","contextmenu"],(function(t){ve.prototype[t]=function(e){var n,i,r=e.zrX,o=e.zrY,a=xe(this,r,o);if("mouseup"===t&&a||(i=(n=this.findHover(r,o)).target),"mousedown"===t)this._downEl=i,this._downPoint=[e.zrX,e.zrY],this._upEl=i;else if("mouseup"===t)this._upEl=i;else if("click"===t){if(this._downEl!==this._upEl||!this._downPoint||Et(this._downPoint,[e.zrX,e.zrY])>4)return;this._downPoint=null}this.dispatchToElement(n,t,e)}}));function _e(t,e,n,i){var r=e+1;if(r===n)return 1;if(i(t[r++],t[e])<0){for(;r<n&&i(t[r],t[r-1])<0;)r++;!function(t,e,n){n--;for(;e<n;){var i=t[e];t[e++]=t[n],t[n--]=i}}(t,e,r)}else for(;r<n&&i(t[r],t[r-1])>=0;)r++;return r-e}function be(t,e,n,i,r){for(i===e&&i++;i<n;i++){for(var o,a=t[i],s=e,l=i;s<l;)r(a,t[o=s+l>>>1])<0?l=o:s=o+1;var u=i-s;switch(u){case 3:t[s+3]=t[s+2];case 2:t[s+2]=t[s+1];case 1:t[s+1]=t[s];break;default:for(;u>0;)t[s+u]=t[s+u-1],u--}t[s]=a}}function we(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])>0){for(s=i-r;l<s&&o(t,e[n+r+l])>0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}else{for(s=r+1;l<s&&o(t,e[n+r-l])<=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])>0?a=h+1:l=h}return l}function Se(t,e,n,i,r,o){var a=0,s=0,l=1;if(o(t,e[n+r])<0){for(s=r+1;l<s&&o(t,e[n+r-l])<0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s);var u=a;a=r-l,l=r-u}else{for(s=i-r;l<s&&o(t,e[n+r+l])>=0;)a=l,(l=1+(l<<1))<=0&&(l=s);l>s&&(l=s),a+=r,l+=r}for(a++;a<l;){var h=a+(l-a>>>1);o(t,e[n+h])<0?l=h:a=h+1}return l}function Me(t,e){var n,i,r=7,o=0;t.length;var a=[];function s(s){var l=n[s],u=i[s],h=n[s+1],c=i[s+1];i[s]=u+c,s===o-3&&(n[s+1]=n[s+2],i[s+1]=i[s+2]),o--;var p=Se(t[h],t,l,u,0,e);l+=p,0!==(u-=p)&&0!==(c=we(t[l+u-1],t,h,c,c-1,e))&&(u<=c?function(n,i,o,s){var l=0;for(l=0;l<i;l++)a[l]=t[n+l];var u=0,h=o,c=n;if(t[c++]=t[h++],0==--s){for(l=0;l<i;l++)t[c+l]=a[u+l];return}if(1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];return void(t[c+s]=a[u])}var p,d,f,g=r;for(;;){p=0,d=0,f=!1;do{if(e(t[h],a[u])<0){if(t[c++]=t[h++],d++,p=0,0==--s){f=!0;break}}else if(t[c++]=a[u++],p++,d=0,1==--i){f=!0;break}}while((p|d)<g);if(f)break;do{if(0!==(p=Se(t[h],a,u,i,0,e))){for(l=0;l<p;l++)t[c+l]=a[u+l];if(c+=p,u+=p,(i-=p)<=1){f=!0;break}}if(t[c++]=t[h++],0==--s){f=!0;break}if(0!==(d=we(a[u],t,h,s,0,e))){for(l=0;l<d;l++)t[c+l]=t[h+l];if(c+=d,h+=d,0===(s-=d)){f=!0;break}}if(t[c++]=a[u++],1==--i){f=!0;break}g--}while(p>=7||d>=7);if(f)break;g<0&&(g=0),g+=2}if((r=g)<1&&(r=1),1===i){for(l=0;l<s;l++)t[c+l]=t[h+l];t[c+s]=a[u]}else{if(0===i)throw new Error;for(l=0;l<i;l++)t[c+l]=a[u+l]}}(l,u,h,c):function(n,i,o,s){var l=0;for(l=0;l<s;l++)a[l]=t[o+l];var u=n+i-1,h=s-1,c=o+s-1,p=0,d=0;if(t[c--]=t[u--],0==--i){for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l];return}if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];return void(t[c]=a[h])}var f=r;for(;;){var g=0,y=0,v=!1;do{if(e(a[h],t[u])<0){if(t[c--]=t[u--],g++,y=0,0==--i){v=!0;break}}else if(t[c--]=a[h--],y++,g=0,1==--s){v=!0;break}}while((g|y)<f);if(v)break;do{if(0!==(g=i-Se(a[h],t,n,i,i-1,e))){for(i-=g,d=(c-=g)+1,p=(u-=g)+1,l=g-1;l>=0;l--)t[d+l]=t[p+l];if(0===i){v=!0;break}}if(t[c--]=a[h--],1==--s){v=!0;break}if(0!==(y=s-we(t[u],a,0,s,s-1,e))){for(s-=y,d=(c-=y)+1,p=(h-=y)+1,l=0;l<y;l++)t[d+l]=a[p+l];if(s<=1){v=!0;break}}if(t[c--]=t[u--],0==--i){v=!0;break}f--}while(g>=7||y>=7);if(v)break;f<0&&(f=0),f+=2}(r=f)<1&&(r=1);if(1===s){for(d=(c-=i)+1,p=(u-=i)+1,l=i-1;l>=0;l--)t[d+l]=t[p+l];t[c]=a[h]}else{if(0===s)throw new Error;for(p=c-(s-1),l=0;l<s;l++)t[p+l]=a[l]}}(l,u,h,c))}return n=[],i=[],{mergeRuns:function(){for(;o>1;){var t=o-2;if(t>=1&&i[t-1]<=i[t]+i[t+1]||t>=2&&i[t-2]<=i[t]+i[t-1])i[t-1]<i[t+1]&&t--;else if(i[t]>i[t+1])break;s(t)}},forceMergeRuns:function(){for(;o>1;){var t=o-2;t>0&&i[t-1]<i[t+1]&&t--,s(t)}},pushRun:function(t,e){n[o]=t,i[o]=e,o+=1}}}function Ie(t,e,n,i){n||(n=0),i||(i=t.length);var r=i-n;if(!(r<2)){var o=0;if(r<32)be(t,n,i,n+(o=_e(t,n,i,e)),e);else{var a=Me(t,e),s=function(t){for(var e=0;t>=32;)e|=1&t,t>>=1;return t+e}(r);do{if((o=_e(t,n,i,e))<s){var l=r;l>s&&(l=s),be(t,n,n+l,n+o,e),o=l}a.pushRun(n,o),a.mergeRuns(),r-=o,n+=o}while(0!==r);a.forceMergeRuns()}}}var Te=!1;function Ce(){Te||(Te=!0,console.warn("z / z2 / zlevel of displayable is invalid, which may cause unexpected errors"))}function De(t,e){return t.zlevel===e.zlevel?t.z===e.z?t.z2-e.z2:t.z-e.z:t.zlevel-e.zlevel}var Ae=function(){function t(){this._roots=[],this._displayList=[],this._displayListLen=0,this.displayableSortFunc=De}return t.prototype.traverse=function(t,e){for(var n=0;n<this._roots.length;n++)this._roots[n].traverse(t,e)},t.prototype.getDisplayList=function(t,e){e=e||!1;var n=this._displayList;return!t&&n.length||this.updateDisplayList(e),n},t.prototype.updateDisplayList=function(t){this._displayListLen=0;for(var e=this._roots,n=this._displayList,i=0,r=e.length;i<r;i++)this._updateAndAddDisplayable(e[i],null,t);n.length=this._displayListLen,Ie(n,De)},t.prototype._updateAndAddDisplayable=function(t,e,n){if(!t.ignore||n){t.beforeUpdate(),t.update(),t.afterUpdate();var i=t.getClipPath();if(t.ignoreClip)e=null;else if(i){e=e?e.slice():[];for(var r=i,o=t;r;)r.parent=o,r.updateTransform(),e.push(r),o=r,r=r.getClipPath()}if(t.childrenRef){for(var a=t.childrenRef(),s=0;s<a.length;s++){var l=a[s];t.__dirty&&(l.__dirty|=1),this._updateAndAddDisplayable(l,e,n)}t.__dirty=0}else{var u=t;e&&e.length?u.__clipPaths=e:u.__clipPaths&&u.__clipPaths.length>0&&(u.__clipPaths=[]),isNaN(u.z)&&(Ce(),u.z=0),isNaN(u.z2)&&(Ce(),u.z2=0),isNaN(u.zlevel)&&(Ce(),u.zlevel=0),this._displayList[this._displayListLen++]=u}var h=t.getDecalElement&&t.getDecalElement();h&&this._updateAndAddDisplayable(h,e,n);var c=t.getTextGuideLine();c&&this._updateAndAddDisplayable(c,e,n);var p=t.getTextContent();p&&this._updateAndAddDisplayable(p,e,n)}},t.prototype.addRoot=function(t){t.__zr&&t.__zr.storage===this||this._roots.push(t)},t.prototype.delRoot=function(t){if(t instanceof Array)for(var e=0,n=t.length;e<n;e++)this.delRoot(t[e]);else{var i=P(this._roots,t);i>=0&&this._roots.splice(i,1)}},t.prototype.delAllRoots=function(){this._roots=[],this._displayList=[],this._displayListLen=0},t.prototype.getRoots=function(){return this._roots},t.prototype.dispose=function(){this._displayList=null,this._roots=null},t}(),ke=r.hasGlobalWindow&&(window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.msRequestAnimationFrame&&window.msRequestAnimationFrame.bind(window)||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame)||function(t){return setTimeout(t,16)},Le={linear:function(t){return t},quadraticIn:function(t){return t*t},quadraticOut:function(t){return t*(2-t)},quadraticInOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)},cubicIn:function(t){return t*t*t},cubicOut:function(t){return--t*t*t+1},cubicInOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)},quarticIn:function(t){return t*t*t*t},quarticOut:function(t){return 1- --t*t*t*t},quarticInOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)},quinticIn:function(t){return t*t*t*t*t},quinticOut:function(t){return--t*t*t*t*t+1},quinticInOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)},sinusoidalIn:function(t){return 1-Math.cos(t*Math.PI/2)},sinusoidalOut:function(t){return Math.sin(t*Math.PI/2)},sinusoidalInOut:function(t){return.5*(1-Math.cos(Math.PI*t))},exponentialIn:function(t){return 0===t?0:Math.pow(1024,t-1)},exponentialOut:function(t){return 1===t?1:1-Math.pow(2,-10*t)},exponentialInOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))},circularIn:function(t){return 1-Math.sqrt(1-t*t)},circularOut:function(t){return Math.sqrt(1- --t*t)},circularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},elasticIn:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/.4))},elasticOut:function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/(2*Math.PI),n*Math.pow(2,-10*t)*Math.sin((t-e)*(2*Math.PI)/.4)+1)},elasticInOut:function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=i*Math.asin(1/n)/(2*Math.PI),(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*(2*Math.PI)/i)*.5+1)},backIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},backOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},backInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},bounceIn:function(t){return 1-Le.bounceOut(1-t)},bounceOut:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},bounceInOut:function(t){return t<.5?.5*Le.bounceIn(2*t):.5*Le.bounceOut(2*t-1)+.5}},Pe=Math.pow,Oe=Math.sqrt,Re=1e-8,Ne=1e-4,Ee=Oe(3),ze=1/3,Ve=wt(),Be=wt(),Fe=wt();function Ge(t){return t>-1e-8&&t<Re}function We(t){return t>Re||t<-1e-8}function He(t,e,n,i,r){var o=1-r;return o*o*(o*t+3*r*e)+r*r*(r*i+3*o*n)}function Ye(t,e,n,i,r){var o=1-r;return 3*(((e-t)*o+2*(n-e)*r)*o+(i-n)*r*r)}function Ue(t,e,n,i,r,o){var a=i+3*(e-n)-t,s=3*(n-2*e+t),l=3*(e-t),u=t-r,h=s*s-3*a*l,c=s*l-9*a*u,p=l*l-3*s*u,d=0;if(Ge(h)&&Ge(c)){if(Ge(s))o[0]=0;else(M=-l/s)>=0&&M<=1&&(o[d++]=M)}else{var f=c*c-4*h*p;if(Ge(f)){var g=c/h,y=-g/2;(M=-s/a+g)>=0&&M<=1&&(o[d++]=M),y>=0&&y<=1&&(o[d++]=y)}else if(f>0){var v=Oe(f),m=h*s+1.5*a*(-c+v),x=h*s+1.5*a*(-c-v);(M=(-s-((m=m<0?-Pe(-m,ze):Pe(m,ze))+(x=x<0?-Pe(-x,ze):Pe(x,ze))))/(3*a))>=0&&M<=1&&(o[d++]=M)}else{var _=(2*h*s-3*a*c)/(2*Oe(h*h*h)),b=Math.acos(_)/3,w=Oe(h),S=Math.cos(b),M=(-s-2*w*S)/(3*a),I=(y=(-s+w*(S+Ee*Math.sin(b)))/(3*a),(-s+w*(S-Ee*Math.sin(b)))/(3*a));M>=0&&M<=1&&(o[d++]=M),y>=0&&y<=1&&(o[d++]=y),I>=0&&I<=1&&(o[d++]=I)}}return d}function Xe(t,e,n,i,r){var o=6*n-12*e+6*t,a=9*e+3*i-3*t-9*n,s=3*e-3*t,l=0;if(Ge(a)){if(We(o))(h=-s/o)>=0&&h<=1&&(r[l++]=h)}else{var u=o*o-4*a*s;if(Ge(u))r[0]=-o/(2*a);else if(u>0){var h,c=Oe(u),p=(-o-c)/(2*a);(h=(-o+c)/(2*a))>=0&&h<=1&&(r[l++]=h),p>=0&&p<=1&&(r[l++]=p)}}return l}function Ze(t,e,n,i,r,o){var a=(e-t)*r+t,s=(n-e)*r+e,l=(i-n)*r+n,u=(s-a)*r+a,h=(l-s)*r+s,c=(h-u)*r+u;o[0]=t,o[1]=a,o[2]=u,o[3]=c,o[4]=c,o[5]=h,o[6]=l,o[7]=i}function je(t,e,n,i,r,o,a,s,l,u,h){var c,p,d,f,g,y=.005,v=1/0;Ve[0]=l,Ve[1]=u;for(var m=0;m<1;m+=.05)Be[0]=He(t,n,r,a,m),Be[1]=He(e,i,o,s,m),(f=Vt(Ve,Be))<v&&(c=m,v=f);v=1/0;for(var x=0;x<32&&!(y<Ne);x++)p=c-y,d=c+y,Be[0]=He(t,n,r,a,p),Be[1]=He(e,i,o,s,p),f=Vt(Be,Ve),p>=0&&f<v?(c=p,v=f):(Fe[0]=He(t,n,r,a,d),Fe[1]=He(e,i,o,s,d),g=Vt(Fe,Ve),d<=1&&g<v?(c=d,v=g):y*=.5);return h&&(h[0]=He(t,n,r,a,c),h[1]=He(e,i,o,s,c)),Oe(v)}function qe(t,e,n,i,r,o,a,s,l){for(var u=t,h=e,c=0,p=1/l,d=1;d<=l;d++){var f=d*p,g=He(t,n,r,a,f),y=He(e,i,o,s,f),v=g-u,m=y-h;c+=Math.sqrt(v*v+m*m),u=g,h=y}return c}function Ke(t,e,n,i){var r=1-i;return r*(r*t+2*i*e)+i*i*n}function $e(t,e,n,i){return 2*((1-i)*(e-t)+i*(n-e))}function Je(t,e,n){var i=t+n-2*e;return 0===i?.5:(t-e)/i}function Qe(t,e,n,i,r){var o=(e-t)*i+t,a=(n-e)*i+e,s=(a-o)*i+o;r[0]=t,r[1]=o,r[2]=s,r[3]=s,r[4]=a,r[5]=n}function tn(t,e,n,i,r,o,a,s,l){var u,h=.005,c=1/0;Ve[0]=a,Ve[1]=s;for(var p=0;p<1;p+=.05){Be[0]=Ke(t,n,r,p),Be[1]=Ke(e,i,o,p),(y=Vt(Ve,Be))<c&&(u=p,c=y)}c=1/0;for(var d=0;d<32&&!(h<Ne);d++){var f=u-h,g=u+h;Be[0]=Ke(t,n,r,f),Be[1]=Ke(e,i,o,f);var y=Vt(Be,Ve);if(f>=0&&y<c)u=f,c=y;else{Fe[0]=Ke(t,n,r,g),Fe[1]=Ke(e,i,o,g);var v=Vt(Fe,Ve);g<=1&&v<c?(u=g,c=v):h*=.5}}return l&&(l[0]=Ke(t,n,r,u),l[1]=Ke(e,i,o,u)),Oe(c)}function en(t,e,n,i,r,o,a){for(var s=t,l=e,u=0,h=1/a,c=1;c<=a;c++){var p=c*h,d=Ke(t,n,r,p),f=Ke(e,i,o,p),g=d-s,y=f-l;u+=Math.sqrt(g*g+y*y),s=d,l=f}return u}var nn=/cubic-bezier\(([0-9,\.e ]+)\)/;function rn(t){var e=t&&nn.exec(t);if(e){var n=e[1].split(","),i=+ut(n[0]),r=+ut(n[1]),o=+ut(n[2]),a=+ut(n[3]);if(isNaN(i+r+o+a))return;var s=[];return function(t){return t<=0?0:t>=1?1:Ue(0,i,o,1,t,s)&&He(0,r,a,1,s[0])}}}var on=function(){function t(t){this._inited=!1,this._startTime=0,this._pausedTime=0,this._paused=!1,this._life=t.life||1e3,this._delay=t.delay||0,this.loop=t.loop||!1,this.onframe=t.onframe||xt,this.ondestroy=t.ondestroy||xt,this.onrestart=t.onrestart||xt,t.easing&&this.setEasing(t.easing)}return t.prototype.step=function(t,e){if(this._inited||(this._startTime=t+this._delay,this._inited=!0),!this._paused){var n=this._life,i=t-this._startTime-this._pausedTime,r=i/n;r<0&&(r=0),r=Math.min(r,1);var o=this.easingFunc,a=o?o(r):r;if(this.onframe(a),1===r){if(!this.loop)return!0;var s=i%n;this._startTime=t-s,this._pausedTime=0,this.onrestart()}return!1}this._pausedTime+=e},t.prototype.pause=function(){this._paused=!0},t.prototype.resume=function(){this._paused=!1},t.prototype.setEasing=function(t){this.easing=t,this.easingFunc=U(t)?t:Le[t]||rn(t)},t}(),an=function(t){this.value=t},sn=function(){function t(){this._len=0}return t.prototype.insert=function(t){var e=new an(t);return this.insertEntry(e),e},t.prototype.insertEntry=function(t){this.head?(this.tail.next=t,t.prev=this.tail,t.next=null,this.tail=t):this.head=this.tail=t,this._len++},t.prototype.remove=function(t){var e=t.prev,n=t.next;e?e.next=n:this.head=n,n?n.prev=e:this.tail=e,t.next=t.prev=null,this._len--},t.prototype.len=function(){return this._len},t.prototype.clear=function(){this.head=this.tail=null,this._len=0},t}(),ln=function(){function t(t){this._list=new sn,this._maxSize=10,this._map={},this._maxSize=t}return t.prototype.put=function(t,e){var n=this._list,i=this._map,r=null;if(null==i[t]){var o=n.len(),a=this._lastRemovedEntry;if(o>=this._maxSize&&o>0){var s=n.head;n.remove(s),delete i[s.key],r=s.value,this._lastRemovedEntry=s}a?a.value=e:a=new an(e),a.key=t,n.insertEntry(a),i[t]=a}return r},t.prototype.get=function(t){var e=this._map[t],n=this._list;if(null!=e)return e!==n.tail&&(n.remove(e),n.insertEntry(e)),e.value},t.prototype.clear=function(){this._list.clear(),this._map={}},t.prototype.len=function(){return this._list.len()},t}(),un={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function hn(t){return(t=Math.round(t))<0?0:t>255?255:t}function cn(t){return t<0?0:t>1?1:t}function pn(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?hn(parseFloat(e)/100*255):hn(parseInt(e,10))}function dn(t){var e=t;return e.length&&"%"===e.charAt(e.length-1)?cn(parseFloat(e)/100):cn(parseFloat(e))}function fn(t,e,n){return n<0?n+=1:n>1&&(n-=1),6*n<1?t+(e-t)*n*6:2*n<1?e:3*n<2?t+(e-t)*(2/3-n)*6:t}function gn(t,e,n){return t+(e-t)*n}function yn(t,e,n,i,r){return t[0]=e,t[1]=n,t[2]=i,t[3]=r,t}function vn(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t}var mn=new ln(20),xn=null;function _n(t,e){xn&&vn(xn,e),xn=mn.put(t,xn||e.slice())}function bn(t,e){if(t){e=e||[];var n=mn.get(t);if(n)return vn(e,n);var i=(t+="").replace(/ /g,"").toLowerCase();if(i in un)return vn(e,un[i]),_n(t,e),e;var r,o=i.length;if("#"===i.charAt(0))return 4===o||5===o?(r=parseInt(i.slice(1,4),16))>=0&&r<=4095?(yn(e,(3840&r)>>4|(3840&r)>>8,240&r|(240&r)>>4,15&r|(15&r)<<4,5===o?parseInt(i.slice(4),16)/15:1),_n(t,e),e):void yn(e,0,0,0,1):7===o||9===o?(r=parseInt(i.slice(1,7),16))>=0&&r<=16777215?(yn(e,(16711680&r)>>16,(65280&r)>>8,255&r,9===o?parseInt(i.slice(7),16)/255:1),_n(t,e),e):void yn(e,0,0,0,1):void 0;var a=i.indexOf("("),s=i.indexOf(")");if(-1!==a&&s+1===o){var l=i.substr(0,a),u=i.substr(a+1,s-(a+1)).split(","),h=1;switch(l){case"rgba":if(4!==u.length)return 3===u.length?yn(e,+u[0],+u[1],+u[2],1):yn(e,0,0,0,1);h=dn(u.pop());case"rgb":return 3!==u.length?void yn(e,0,0,0,1):(yn(e,pn(u[0]),pn(u[1]),pn(u[2]),h),_n(t,e),e);case"hsla":return 4!==u.length?void yn(e,0,0,0,1):(u[3]=dn(u[3]),wn(u,e),_n(t,e),e);case"hsl":return 3!==u.length?void yn(e,0,0,0,1):(wn(u,e),_n(t,e),e);default:return}}yn(e,0,0,0,1)}}function wn(t,e){var n=(parseFloat(t[0])%360+360)%360/360,i=dn(t[1]),r=dn(t[2]),o=r<=.5?r*(i+1):r+i-r*i,a=2*r-o;return yn(e=e||[],hn(255*fn(a,o,n+1/3)),hn(255*fn(a,o,n)),hn(255*fn(a,o,n-1/3)),1),4===t.length&&(e[3]=t[3]),e}function Sn(t,e){var n=bn(t);if(n){for(var i=0;i<3;i++)n[i]=e<0?n[i]*(1-e)|0:(255-n[i])*e+n[i]|0,n[i]>255?n[i]=255:n[i]<0&&(n[i]=0);return kn(n,4===n.length?"rgba":"rgb")}}function Mn(t,e,n){if(e&&e.length&&t>=0&&t<=1){n=n||[];var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=e[r],s=e[o],l=i-r;return n[0]=hn(gn(a[0],s[0],l)),n[1]=hn(gn(a[1],s[1],l)),n[2]=hn(gn(a[2],s[2],l)),n[3]=cn(gn(a[3],s[3],l)),n}}var In=Mn;function Tn(t,e,n){if(e&&e.length&&t>=0&&t<=1){var i=t*(e.length-1),r=Math.floor(i),o=Math.ceil(i),a=bn(e[r]),s=bn(e[o]),l=i-r,u=kn([hn(gn(a[0],s[0],l)),hn(gn(a[1],s[1],l)),hn(gn(a[2],s[2],l)),cn(gn(a[3],s[3],l))],"rgba");return n?{color:u,leftIndex:r,rightIndex:o,value:i}:u}}var Cn=Tn;function Dn(t,e,n,i){var r=bn(t);if(t)return r=function(t){if(t){var e,n,i=t[0]/255,r=t[1]/255,o=t[2]/255,a=Math.min(i,r,o),s=Math.max(i,r,o),l=s-a,u=(s+a)/2;if(0===l)e=0,n=0;else{n=u<.5?l/(s+a):l/(2-s-a);var h=((s-i)/6+l/2)/l,c=((s-r)/6+l/2)/l,p=((s-o)/6+l/2)/l;i===s?e=p-c:r===s?e=1/3+h-p:o===s&&(e=2/3+c-h),e<0&&(e+=1),e>1&&(e-=1)}var d=[360*e,n,u];return null!=t[3]&&d.push(t[3]),d}}(r),null!=e&&(r[0]=function(t){return(t=Math.round(t))<0?0:t>360?360:t}(e)),null!=n&&(r[1]=dn(n)),null!=i&&(r[2]=dn(i)),kn(wn(r),"rgba")}function An(t,e){var n=bn(t);if(n&&null!=e)return n[3]=cn(e),kn(n,"rgba")}function kn(t,e){if(t&&t.length){var n=t[0]+","+t[1]+","+t[2];return"rgba"!==e&&"hsva"!==e&&"hsla"!==e||(n+=","+t[3]),e+"("+n+")"}}function Ln(t,e){var n=bn(t);return n?(.299*n[0]+.587*n[1]+.114*n[2])*n[3]/255+(1-n[3])*e:0}var Pn=Object.freeze({__proto__:null,parse:bn,lift:Sn,toHex:function(t){var e=bn(t);if(e)return((1<<24)+(e[0]<<16)+(e[1]<<8)+ +e[2]).toString(16).slice(1)},fastLerp:Mn,fastMapToColor:In,lerp:Tn,mapToColor:Cn,modifyHSL:Dn,modifyAlpha:An,stringify:kn,lum:Ln,random:function(){return kn([Math.round(255*Math.random()),Math.round(255*Math.random()),Math.round(255*Math.random())],"rgb")}}),On=Math.round;function Rn(t){var e;if(t&&"transparent"!==t){if("string"==typeof t&&t.indexOf("rgba")>-1){var n=bn(t);n&&(t="rgb("+n[0]+","+n[1]+","+n[2]+")",e=n[3])}}else t="none";return{color:t,opacity:null==e?1:e}}var Nn=1e-4;function En(t){return t<Nn&&t>-1e-4}function zn(t){return On(1e3*t)/1e3}function Vn(t){return On(1e4*t)/1e4}var Bn={left:"start",right:"end",center:"middle",middle:"middle"};function Fn(t){return t&&!!t.image}function Gn(t){return"linear"===t.type}function Wn(t){return"radial"===t.type}function Hn(t){return"url(#"+t+")"}function Yn(t){var e=t.getGlobalScale(),n=Math.max(e[0],e[1]);return Math.max(Math.ceil(Math.log(n)/Math.log(10)),1)}function Un(t){var e=t.x||0,n=t.y||0,i=(t.rotation||0)*_t,r=rt(t.scaleX,1),o=rt(t.scaleY,1),a=t.skewX||0,s=t.skewY||0,l=[];return(e||n)&&l.push("translate("+e+"px,"+n+"px)"),i&&l.push("rotate("+i+")"),1===r&&1===o||l.push("scale("+r+","+o+")"),(a||s)&&l.push("skew("+On(a*_t)+"deg, "+On(s*_t)+"deg)"),l.join(" ")}var Xn=r.hasGlobalWindow&&U(window.btoa)?function(t){return window.btoa(unescape(t))}:"undefined"!=typeof Buffer?function(t){return Buffer.from(t).toString("base64")}:function(t){return null},Zn=Array.prototype.slice;function jn(t,e,n){return(e-t)*n+t}function qn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=jn(e[o],n[o],i);return t}function Kn(t,e,n,i){for(var r=e.length,o=0;o<r;o++)t[o]=e[o]+n[o]*i;return t}function $n(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=e[a][s]+n[a][s]*i}return t}function Jn(t,e){for(var n=t.length,i=e.length,r=n>i?e:t,o=Math.min(n,i),a=r[o-1]||{color:[0,0,0,0],offset:0},s=o;s<Math.max(n,i);s++)r.push({offset:a.offset,color:a.color.slice()})}function Qn(t,e,n){var i=t,r=e;if(i.push&&r.push){var o=i.length,a=r.length;if(o!==a)if(o>a)i.length=a;else for(var s=o;s<a;s++)i.push(1===n?r[s]:Zn.call(r[s]));var l=i[0]&&i[0].length;for(s=0;s<i.length;s++)if(1===n)isNaN(i[s])&&(i[s]=r[s]);else for(var u=0;u<l;u++)isNaN(i[s][u])&&(i[s][u]=r[s][u])}}function ti(t){if(N(t)){var e=t.length;if(N(t[0])){for(var n=[],i=0;i<e;i++)n.push(Zn.call(t[i]));return n}return Zn.call(t)}return t}function ei(t){return t[0]=Math.floor(t[0])||0,t[1]=Math.floor(t[1])||0,t[2]=Math.floor(t[2])||0,t[3]=null==t[3]?1:t[3],"rgba("+t.join(",")+")"}function ni(t){return 4===t||5===t}function ii(t){return 1===t||2===t}var ri=[0,0,0,0],oi=function(){function t(t){this.keyframes=[],this.discrete=!1,this._invalid=!1,this._needsSort=!1,this._lastFr=0,this._lastFrP=0,this.propName=t}return t.prototype.isFinished=function(){return this._finished},t.prototype.setFinished=function(){this._finished=!0,this._additiveTrack&&this._additiveTrack.setFinished()},t.prototype.needsAnimate=function(){return this.keyframes.length>=1},t.prototype.getAdditiveTrack=function(){return this._additiveTrack},t.prototype.addKeyframe=function(t,e,n){this._needsSort=!0;var i=this.keyframes,r=i.length,o=!1,a=6,s=e;if(N(e)){var l=function(t){return N(t&&t[0])?2:1}(e);a=l,(1===l&&!j(e[0])||2===l&&!j(e[0][0]))&&(o=!0)}else if(j(e)&&!nt(e))a=0;else if(X(e))if(isNaN(+e)){var u=bn(e);u&&(s=u,a=3)}else a=0;else if(Q(e)){var h=A({},s);h.colorStops=z(e.colorStops,(function(t){return{offset:t.offset,color:bn(t.color)}})),Gn(e)?a=4:Wn(e)&&(a=5),s=h}0===r?this.valType=a:a===this.valType&&6!==a||(o=!0),this.discrete=this.discrete||o;var c={time:t,value:s,rawValue:e,percent:0};return n&&(c.easing=n,c.easingFunc=U(n)?n:Le[n]||rn(n)),i.push(c),c},t.prototype.prepare=function(t,e){var n=this.keyframes;this._needsSort&&n.sort((function(t,e){return t.time-e.time}));for(var i=this.valType,r=n.length,o=n[r-1],a=this.discrete,s=ii(i),l=ni(i),u=0;u<r;u++){var h=n[u],c=h.value,p=o.value;h.percent=h.time/t,a||(s&&u!==r-1?Qn(c,p,i):l&&Jn(c.colorStops,p.colorStops))}if(!a&&5!==i&&e&&this.needsAnimate()&&e.needsAnimate()&&i===e.valType&&!e._finished){this._additiveTrack=e;var d=n[0].value;for(u=0;u<r;u++)0===i?n[u].additiveValue=n[u].value-d:3===i?n[u].additiveValue=Kn([],n[u].value,d,-1):ii(i)&&(n[u].additiveValue=1===i?Kn([],n[u].value,d,-1):$n([],n[u].value,d,-1))}},t.prototype.step=function(t,e){if(!this._finished){this._additiveTrack&&this._additiveTrack._finished&&(this._additiveTrack=null);var n,i,r,o=null!=this._additiveTrack,a=o?"additiveValue":"value",s=this.valType,l=this.keyframes,u=l.length,h=this.propName,c=3===s,p=this._lastFr,d=Math.min;if(1===u)i=r=l[0];else{if(e<0)n=0;else if(e<this._lastFrP){for(n=d(p+1,u-1);n>=0&&!(l[n].percent<=e);n--);n=d(n,u-2)}else{for(n=p;n<u&&!(l[n].percent>e);n++);n=d(n-1,u-2)}r=l[n+1],i=l[n]}if(i&&r){this._lastFr=n,this._lastFrP=e;var f=r.percent-i.percent,g=0===f?1:d((e-i.percent)/f,1);r.easingFunc&&(g=r.easingFunc(g));var y=o?this._additiveValue:c?ri:t[h];if(!ii(s)&&!c||y||(y=this._additiveValue=[]),this.discrete)t[h]=g<1?i.rawValue:r.rawValue;else if(ii(s))1===s?qn(y,i[a],r[a],g):function(t,e,n,i){for(var r=e.length,o=r&&e[0].length,a=0;a<r;a++){t[a]||(t[a]=[]);for(var s=0;s<o;s++)t[a][s]=jn(e[a][s],n[a][s],i)}}(y,i[a],r[a],g);else if(ni(s)){var v=i[a],m=r[a],x=4===s;t[h]={type:x?"linear":"radial",x:jn(v.x,m.x,g),y:jn(v.y,m.y,g),colorStops:z(v.colorStops,(function(t,e){var n=m.colorStops[e];return{offset:jn(t.offset,n.offset,g),color:ei(qn([],t.color,n.color,g))}})),global:m.global},x?(t[h].x2=jn(v.x2,m.x2,g),t[h].y2=jn(v.y2,m.y2,g)):t[h].r=jn(v.r,m.r,g)}else if(c)qn(y,i[a],r[a],g),o||(t[h]=ei(y));else{var _=jn(i[a],r[a],g);o?this._additiveValue=_:t[h]=_}o&&this._addToTarget(t)}}},t.prototype._addToTarget=function(t){var e=this.valType,n=this.propName,i=this._additiveValue;0===e?t[n]=t[n]+i:3===e?(bn(t[n],ri),Kn(ri,ri,i,1),t[n]=ei(ri)):1===e?Kn(t[n],t[n],i,1):2===e&&$n(t[n],t[n],i,1)},t}(),ai=function(){function t(t,e,n,i){this._tracks={},this._trackKeys=[],this._maxTime=0,this._started=0,this._clip=null,this._target=t,this._loop=e,e&&i?I("Can' use additive animation on looped animation."):(this._additiveAnimators=i,this._allowDiscrete=n)}return t.prototype.getMaxTime=function(){return this._maxTime},t.prototype.getDelay=function(){return this._delay},t.prototype.getLoop=function(){return this._loop},t.prototype.getTarget=function(){return this._target},t.prototype.changeTarget=function(t){this._target=t},t.prototype.when=function(t,e,n){return this.whenWithKeys(t,e,G(e),n)},t.prototype.whenWithKeys=function(t,e,n,i){for(var r=this._tracks,o=0;o<n.length;o++){var a=n[o],s=r[a];if(!s){s=r[a]=new oi(a);var l=void 0,u=this._getAdditiveTrack(a);if(u){var h=u.keyframes,c=h[h.length-1];l=c&&c.value,3===u.valType&&l&&(l=ei(l))}else l=this._target[a];if(null==l)continue;t>0&&s.addKeyframe(0,ti(l),i),this._trackKeys.push(a)}s.addKeyframe(t,ti(e[a]),i)}return this._maxTime=Math.max(this._maxTime,t),this},t.prototype.pause=function(){this._clip.pause(),this._paused=!0},t.prototype.resume=function(){this._clip.resume(),this._paused=!1},t.prototype.isPaused=function(){return!!this._paused},t.prototype.duration=function(t){return this._maxTime=t,this._force=!0,this},t.prototype._doneCallback=function(){this._setTracksFinished(),this._clip=null;var t=this._doneCbs;if(t)for(var e=t.length,n=0;n<e;n++)t[n].call(this)},t.prototype._abortedCallback=function(){this._setTracksFinished();var t=this.animation,e=this._abortedCbs;if(t&&t.removeClip(this._clip),this._clip=null,e)for(var n=0;n<e.length;n++)e[n].call(this)},t.prototype._setTracksFinished=function(){for(var t=this._tracks,e=this._trackKeys,n=0;n<e.length;n++)t[e[n]].setFinished()},t.prototype._getAdditiveTrack=function(t){var e,n=this._additiveAnimators;if(n)for(var i=0;i<n.length;i++){var r=n[i].getTrack(t);r&&(e=r)}return e},t.prototype.start=function(t){if(!(this._started>0)){this._started=1;for(var e=this,n=[],i=this._maxTime||0,r=0;r<this._trackKeys.length;r++){var o=this._trackKeys[r],a=this._tracks[o],s=this._getAdditiveTrack(o),l=a.keyframes,u=l.length;if(a.prepare(i,s),a.needsAnimate())if(!this._allowDiscrete&&a.discrete){var h=l[u-1];h&&(e._target[a.propName]=h.rawValue),a.setFinished()}else n.push(a)}if(n.length||this._force){var c=new on({life:i,loop:this._loop,delay:this._delay||0,onframe:function(t){e._started=2;var i=e._additiveAnimators;if(i){for(var r=!1,o=0;o<i.length;o++)if(i[o]._clip){r=!0;break}r||(e._additiveAnimators=null)}for(o=0;o<n.length;o++)n[o].step(e._target,t);var a=e._onframeCbs;if(a)for(o=0;o<a.length;o++)a[o](e._target,t)},ondestroy:function(){e._doneCallback()}});this._clip=c,this.animation&&this.animation.addClip(c),t&&c.setEasing(t)}else this._doneCallback();return this}},t.prototype.stop=function(t){if(this._clip){var e=this._clip;t&&e.onframe(1),this._abortedCallback()}},t.prototype.delay=function(t){return this._delay=t,this},t.prototype.during=function(t){return t&&(this._onframeCbs||(this._onframeCbs=[]),this._onframeCbs.push(t)),this},t.prototype.done=function(t){return t&&(this._doneCbs||(this._doneCbs=[]),this._doneCbs.push(t)),this},t.prototype.aborted=function(t){return t&&(this._abortedCbs||(this._abortedCbs=[]),this._abortedCbs.push(t)),this},t.prototype.getClip=function(){return this._clip},t.prototype.getTrack=function(t){return this._tracks[t]},t.prototype.getTracks=function(){var t=this;return z(this._trackKeys,(function(e){return t._tracks[e]}))},t.prototype.stopTracks=function(t,e){if(!t.length||!this._clip)return!0;for(var n=this._tracks,i=this._trackKeys,r=0;r<t.length;r++){var o=n[t[r]];o&&!o.isFinished()&&(e?o.step(this._target,1):1===this._started&&o.step(this._target,0),o.setFinished())}var a=!0;for(r=0;r<i.length;r++)if(!n[i[r]].isFinished()){a=!1;break}return a&&this._abortedCallback(),a},t.prototype.saveTo=function(t,e,n){if(t){e=e||this._trackKeys;for(var i=0;i<e.length;i++){var r=e[i],o=this._tracks[r];if(o&&!o.isFinished()){var a=o.keyframes,s=a[n?0:a.length-1];s&&(t[r]=ti(s.rawValue))}}}},t.prototype.__changeFinalValue=function(t,e){e=e||G(t);for(var n=0;n<e.length;n++){var i=e[n],r=this._tracks[i];if(r){var o=r.keyframes;if(o.length>1){var a=o.pop();r.addKeyframe(a.time,t[i]),r.prepare(this._maxTime,r.getAdditiveTrack())}}}},t}();function si(){return(new Date).getTime()}var li,ui,hi=function(t){function e(e){var n=t.call(this)||this;return n._running=!1,n._time=0,n._pausedTime=0,n._pauseStart=0,n._paused=!1,e=e||{},n.stage=e.stage||{},n}return n(e,t),e.prototype.addClip=function(t){t.animation&&this.removeClip(t),this._head?(this._tail.next=t,t.prev=this._tail,t.next=null,this._tail=t):this._head=this._tail=t,t.animation=this},e.prototype.addAnimator=function(t){t.animation=this;var e=t.getClip();e&&this.addClip(e)},e.prototype.removeClip=function(t){if(t.animation){var e=t.prev,n=t.next;e?e.next=n:this._head=n,n?n.prev=e:this._tail=e,t.next=t.prev=t.animation=null}},e.prototype.removeAnimator=function(t){var e=t.getClip();e&&this.removeClip(e),t.animation=null},e.prototype.update=function(t){for(var e=si()-this._pausedTime,n=e-this._time,i=this._head;i;){var r=i.next;i.step(e,n)?(i.ondestroy(),this.removeClip(i),i=r):i=r}this._time=e,t||(this.trigger("frame",n),this.stage.update&&this.stage.update())},e.prototype._startLoop=function(){var t=this;this._running=!0,ke((function e(){t._running&&(ke(e),!t._paused&&t.update())}))},e.prototype.start=function(){this._running||(this._time=si(),this._pausedTime=0,this._startLoop())},e.prototype.stop=function(){this._running=!1},e.prototype.pause=function(){this._paused||(this._pauseStart=si(),this._paused=!0)},e.prototype.resume=function(){this._paused&&(this._pausedTime+=si()-this._pauseStart,this._paused=!1)},e.prototype.clear=function(){for(var t=this._head;t;){var e=t.next;t.prev=t.next=t.animation=null,t=e}this._head=this._tail=null},e.prototype.isFinished=function(){return null==this._head},e.prototype.animate=function(t,e){e=e||{},this.start();var n=new ai(t,e.loop);return this.addAnimator(n),n},e}(Xt),ci=r.domSupported,pi=(ui={pointerdown:1,pointerup:1,pointermove:1,pointerout:1},{mouse:li=["click","dblclick","mousewheel","wheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],touch:["touchstart","touchend","touchmove"],pointer:z(li,(function(t){var e=t.replace("mouse","pointer");return ui.hasOwnProperty(e)?e:t}))}),di=["mousemove","mouseup"],fi=["pointermove","pointerup"],gi=!1;function yi(t){var e=t.pointerType;return"pen"===e||"touch"===e}function vi(t){t&&(t.zrByTouch=!0)}function mi(t,e){for(var n=e,i=!1;n&&9!==n.nodeType&&!(i=n.domBelongToZr||n!==e&&n===t.painterRoot);)n=n.parentNode;return i}var xi=function(t,e){this.stopPropagation=xt,this.stopImmediatePropagation=xt,this.preventDefault=xt,this.type=e.type,this.target=this.currentTarget=t.dom,this.pointerType=e.pointerType,this.clientX=e.clientX,this.clientY=e.clientY},_i={mousedown:function(t){t=oe(this.dom,t),this.__mayPointerCapture=[t.zrX,t.zrY],this.trigger("mousedown",t)},mousemove:function(t){t=oe(this.dom,t);var e=this.__mayPointerCapture;!e||t.zrX===e[0]&&t.zrY===e[1]||this.__togglePointerCapture(!0),this.trigger("mousemove",t)},mouseup:function(t){t=oe(this.dom,t),this.__togglePointerCapture(!1),this.trigger("mouseup",t)},mouseout:function(t){mi(this,(t=oe(this.dom,t)).toElement||t.relatedTarget)||(this.__pointerCapturing&&(t.zrEventControl="no_globalout"),this.trigger("mouseout",t))},wheel:function(t){gi=!0,t=oe(this.dom,t),this.trigger("mousewheel",t)},mousewheel:function(t){gi||(t=oe(this.dom,t),this.trigger("mousewheel",t))},touchstart:function(t){vi(t=oe(this.dom,t)),this.__lastTouchMoment=new Date,this.handler.processGesture(t,"start"),_i.mousemove.call(this,t),_i.mousedown.call(this,t)},touchmove:function(t){vi(t=oe(this.dom,t)),this.handler.processGesture(t,"change"),_i.mousemove.call(this,t)},touchend:function(t){vi(t=oe(this.dom,t)),this.handler.processGesture(t,"end"),_i.mouseup.call(this,t),+new Date-+this.__lastTouchMoment<300&&_i.click.call(this,t)},pointerdown:function(t){_i.mousedown.call(this,t)},pointermove:function(t){yi(t)||_i.mousemove.call(this,t)},pointerup:function(t){_i.mouseup.call(this,t)},pointerout:function(t){yi(t)||_i.mouseout.call(this,t)}};E(["click","dblclick","contextmenu"],(function(t){_i[t]=function(e){e=oe(this.dom,e),this.trigger(t,e)}}));var bi={pointermove:function(t){yi(t)||bi.mousemove.call(this,t)},pointerup:function(t){bi.mouseup.call(this,t)},mousemove:function(t){this.trigger("mousemove",t)},mouseup:function(t){var e=this.__pointerCapturing;this.__togglePointerCapture(!1),this.trigger("mouseup",t),e&&(t.zrEventControl="only_globalout",this.trigger("mouseout",t))}};function wi(t,e){var n=e.domHandlers;r.pointerEventsSupported?E(pi.pointer,(function(i){Mi(e,i,(function(e){n[i].call(t,e)}))})):(r.touchEventsSupported&&E(pi.touch,(function(i){Mi(e,i,(function(r){n[i].call(t,r),function(t){t.touching=!0,null!=t.touchTimer&&(clearTimeout(t.touchTimer),t.touchTimer=null),t.touchTimer=setTimeout((function(){t.touching=!1,t.touchTimer=null}),700)}(e)}))})),E(pi.mouse,(function(i){Mi(e,i,(function(r){r=re(r),e.touching||n[i].call(t,r)}))})))}function Si(t,e){function n(n){Mi(e,n,(function(i){i=re(i),mi(t,i.target)||(i=function(t,e){return oe(t.dom,new xi(t,e),!0)}(t,i),e.domHandlers[n].call(t,i))}),{capture:!0})}r.pointerEventsSupported?E(fi,n):r.touchEventsSupported||E(di,n)}function Mi(t,e,n,i){t.mounted[e]=n,t.listenerOpts[e]=i,ae(t.domTarget,e,n,i)}function Ii(t){var e,n,i,r,o=t.mounted;for(var a in o)o.hasOwnProperty(a)&&(e=t.domTarget,n=a,i=o[a],r=t.listenerOpts[a],e.removeEventListener(n,i,r));t.mounted={}}var Ti=function(t,e){this.mounted={},this.listenerOpts={},this.touching=!1,this.domTarget=t,this.domHandlers=e},Ci=function(t){function e(e,n){var i=t.call(this)||this;return i.__pointerCapturing=!1,i.dom=e,i.painterRoot=n,i._localHandlerScope=new Ti(e,_i),ci&&(i._globalHandlerScope=new Ti(document,bi)),wi(i,i._localHandlerScope),i}return n(e,t),e.prototype.dispose=function(){Ii(this._localHandlerScope),ci&&Ii(this._globalHandlerScope)},e.prototype.setCursor=function(t){this.dom.style&&(this.dom.style.cursor=t||"default")},e.prototype.__togglePointerCapture=function(t){if(this.__mayPointerCapture=null,ci&&+this.__pointerCapturing^+t){this.__pointerCapturing=t;var e=this._globalHandlerScope;t?Si(this,e):Ii(e)}},e}(Xt),Di=1;r.hasGlobalWindow&&(Di=Math.max(window.devicePixelRatio||window.screen&&window.screen.deviceXDPI/window.screen.logicalXDPI||1,1));var Ai=Di,ki="#333",Li="#ccc";function Pi(){return[1,0,0,1,0,0]}function Oi(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=0,t[5]=0,t}function Ri(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t}function Ni(t,e,n){var i=e[0]*n[0]+e[2]*n[1],r=e[1]*n[0]+e[3]*n[1],o=e[0]*n[2]+e[2]*n[3],a=e[1]*n[2]+e[3]*n[3],s=e[0]*n[4]+e[2]*n[5]+e[4],l=e[1]*n[4]+e[3]*n[5]+e[5];return t[0]=i,t[1]=r,t[2]=o,t[3]=a,t[4]=s,t[5]=l,t}function Ei(t,e,n){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4]+n[0],t[5]=e[5]+n[1],t}function zi(t,e,n){var i=e[0],r=e[2],o=e[4],a=e[1],s=e[3],l=e[5],u=Math.sin(n),h=Math.cos(n);return t[0]=i*h+a*u,t[1]=-i*u+a*h,t[2]=r*h+s*u,t[3]=-r*u+h*s,t[4]=h*o+u*l,t[5]=h*l-u*o,t}function Vi(t,e,n){var i=n[0],r=n[1];return t[0]=e[0]*i,t[1]=e[1]*r,t[2]=e[2]*i,t[3]=e[3]*r,t[4]=e[4]*i,t[5]=e[5]*r,t}function Bi(t,e){var n=e[0],i=e[2],r=e[4],o=e[1],a=e[3],s=e[5],l=n*a-o*i;return l?(l=1/l,t[0]=a*l,t[1]=-o*l,t[2]=-i*l,t[3]=n*l,t[4]=(i*s-a*r)*l,t[5]=(o*r-n*s)*l,t):null}function Fi(t){var e=[1,0,0,1,0,0];return Ri(e,t),e}var Gi=Object.freeze({__proto__:null,create:Pi,identity:Oi,copy:Ri,mul:Ni,translate:Ei,rotate:zi,scale:Vi,invert:Bi,clone:Fi}),Wi=Oi,Hi=5e-5;function Yi(t){return t>Hi||t<-5e-5}var Ui=[],Xi=[],Zi=[1,0,0,1,0,0],ji=Math.abs,qi=function(){function t(){}return t.prototype.getLocalTransform=function(e){return t.getLocalTransform(this,e)},t.prototype.setPosition=function(t){this.x=t[0],this.y=t[1]},t.prototype.setScale=function(t){this.scaleX=t[0],this.scaleY=t[1]},t.prototype.setSkew=function(t){this.skewX=t[0],this.skewY=t[1]},t.prototype.setOrigin=function(t){this.originX=t[0],this.originY=t[1]},t.prototype.needLocalTransform=function(){return Yi(this.rotation)||Yi(this.x)||Yi(this.y)||Yi(this.scaleX-1)||Yi(this.scaleY-1)||Yi(this.skewX)||Yi(this.skewY)},t.prototype.updateTransform=function(){var t=this.parent&&this.parent.transform,e=this.needLocalTransform(),n=this.transform;e||t?(n=n||[1,0,0,1,0,0],e?this.getLocalTransform(n):Wi(n),t&&(e?Ni(n,t,n):Ri(n,t)),this.transform=n,this._resolveGlobalScaleRatio(n)):n&&Wi(n)},t.prototype._resolveGlobalScaleRatio=function(t){var e=this.globalScaleRatio;if(null!=e&&1!==e){this.getGlobalScale(Ui);var n=Ui[0]<0?-1:1,i=Ui[1]<0?-1:1,r=((Ui[0]-n)*e+n)/Ui[0]||0,o=((Ui[1]-i)*e+i)/Ui[1]||0;t[0]*=r,t[1]*=r,t[2]*=o,t[3]*=o}this.invTransform=this.invTransform||[1,0,0,1,0,0],Bi(this.invTransform,t)},t.prototype.getComputedTransform=function(){for(var t=this,e=[];t;)e.push(t),t=t.parent;for(;t=e.pop();)t.updateTransform();return this.transform},t.prototype.setLocalTransform=function(t){if(t){var e=t[0]*t[0]+t[1]*t[1],n=t[2]*t[2]+t[3]*t[3],i=Math.atan2(t[1],t[0]),r=Math.PI/2+i-Math.atan2(t[3],t[2]);n=Math.sqrt(n)*Math.cos(r),e=Math.sqrt(e),this.skewX=r,this.skewY=0,this.rotation=-i,this.x=+t[4],this.y=+t[5],this.scaleX=e,this.scaleY=n,this.originX=0,this.originY=0}},t.prototype.decomposeTransform=function(){if(this.transform){var t=this.parent,e=this.transform;t&&t.transform&&(Ni(Xi,t.invTransform,e),e=Xi);var n=this.originX,i=this.originY;(n||i)&&(Zi[4]=n,Zi[5]=i,Ni(Xi,e,Zi),Xi[4]-=n,Xi[5]-=i,e=Xi),this.setLocalTransform(e)}},t.prototype.getGlobalScale=function(t){var e=this.transform;return t=t||[],e?(t[0]=Math.sqrt(e[0]*e[0]+e[1]*e[1]),t[1]=Math.sqrt(e[2]*e[2]+e[3]*e[3]),e[0]<0&&(t[0]=-t[0]),e[3]<0&&(t[1]=-t[1]),t):(t[0]=1,t[1]=1,t)},t.prototype.transformCoordToLocal=function(t,e){var n=[t,e],i=this.invTransform;return i&&Ft(n,n,i),n},t.prototype.transformCoordToGlobal=function(t,e){var n=[t,e],i=this.transform;return i&&Ft(n,n,i),n},t.prototype.getLineScale=function(){var t=this.transform;return t&&ji(t[0]-1)>1e-10&&ji(t[3]-1)>1e-10?Math.sqrt(ji(t[0]*t[3]-t[2]*t[1])):1},t.prototype.copyTransform=function(t){$i(this,t)},t.getLocalTransform=function(t,e){e=e||[];var n=t.originX||0,i=t.originY||0,r=t.scaleX,o=t.scaleY,a=t.anchorX,s=t.anchorY,l=t.rotation||0,u=t.x,h=t.y,c=t.skewX?Math.tan(t.skewX):0,p=t.skewY?Math.tan(-t.skewY):0;if(n||i||a||s){var d=n+a,f=i+s;e[4]=-d*r-c*f*o,e[5]=-f*o-p*d*r}else e[4]=e[5]=0;return e[0]=r,e[3]=o,e[1]=p*r,e[2]=c*o,l&&zi(e,e,l),e[4]+=n+u,e[5]+=i+h,e},t.initDefaultProps=function(){var e=t.prototype;e.scaleX=e.scaleY=e.globalScaleRatio=1,e.x=e.y=e.originX=e.originY=e.skewX=e.skewY=e.rotation=e.anchorX=e.anchorY=0}(),t}(),Ki=["x","y","originX","originY","anchorX","anchorY","rotation","scaleX","scaleY","skewX","skewY"];function $i(t,e){for(var n=0;n<Ki.length;n++){var i=Ki[n];t[i]=e[i]}}var Ji=function(){function t(t,e){this.x=t||0,this.y=e||0}return t.prototype.copy=function(t){return this.x=t.x,this.y=t.y,this},t.prototype.clone=function(){return new t(this.x,this.y)},t.prototype.set=function(t,e){return this.x=t,this.y=e,this},t.prototype.equal=function(t){return t.x===this.x&&t.y===this.y},t.prototype.add=function(t){return this.x+=t.x,this.y+=t.y,this},t.prototype.scale=function(t){this.x*=t,this.y*=t},t.prototype.scaleAndAdd=function(t,e){this.x+=t.x*e,this.y+=t.y*e},t.prototype.sub=function(t){return this.x-=t.x,this.y-=t.y,this},t.prototype.dot=function(t){return this.x*t.x+this.y*t.y},t.prototype.len=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},t.prototype.lenSquare=function(){return this.x*this.x+this.y*this.y},t.prototype.normalize=function(){var t=this.len();return this.x/=t,this.y/=t,this},t.prototype.distance=function(t){var e=this.x-t.x,n=this.y-t.y;return Math.sqrt(e*e+n*n)},t.prototype.distanceSquare=function(t){var e=this.x-t.x,n=this.y-t.y;return e*e+n*n},t.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},t.prototype.transform=function(t){if(t){var e=this.x,n=this.y;return this.x=t[0]*e+t[2]*n+t[4],this.y=t[1]*e+t[3]*n+t[5],this}},t.prototype.toArray=function(t){return t[0]=this.x,t[1]=this.y,t},t.prototype.fromArray=function(t){this.x=t[0],this.y=t[1]},t.set=function(t,e,n){t.x=e,t.y=n},t.copy=function(t,e){t.x=e.x,t.y=e.y},t.len=function(t){return Math.sqrt(t.x*t.x+t.y*t.y)},t.lenSquare=function(t){return t.x*t.x+t.y*t.y},t.dot=function(t,e){return t.x*e.x+t.y*e.y},t.add=function(t,e,n){t.x=e.x+n.x,t.y=e.y+n.y},t.sub=function(t,e,n){t.x=e.x-n.x,t.y=e.y-n.y},t.scale=function(t,e,n){t.x=e.x*n,t.y=e.y*n},t.scaleAndAdd=function(t,e,n,i){t.x=e.x+n.x*i,t.y=e.y+n.y*i},t.lerp=function(t,e,n,i){var r=1-i;t.x=r*e.x+i*n.x,t.y=r*e.y+i*n.y},t}(),Qi=Math.min,tr=Math.max,er=new Ji,nr=new Ji,ir=new Ji,rr=new Ji,or=new Ji,ar=new Ji,sr=function(){function t(t,e,n,i){n<0&&(t+=n,n=-n),i<0&&(e+=i,i=-i),this.x=t,this.y=e,this.width=n,this.height=i}return t.prototype.union=function(t){var e=Qi(t.x,this.x),n=Qi(t.y,this.y);isFinite(this.x)&&isFinite(this.width)?this.width=tr(t.x+t.width,this.x+this.width)-e:this.width=t.width,isFinite(this.y)&&isFinite(this.height)?this.height=tr(t.y+t.height,this.y+this.height)-n:this.height=t.height,this.x=e,this.y=n},t.prototype.applyTransform=function(e){t.applyTransform(this,this,e)},t.prototype.calculateTransform=function(t){var e=this,n=t.width/e.width,i=t.height/e.height,r=[1,0,0,1,0,0];return Ei(r,r,[-e.x,-e.y]),Vi(r,r,[n,i]),Ei(r,r,[t.x,t.y]),r},t.prototype.intersect=function(e,n){if(!e)return!1;e instanceof t||(e=t.create(e));var i=this,r=i.x,o=i.x+i.width,a=i.y,s=i.y+i.height,l=e.x,u=e.x+e.width,h=e.y,c=e.y+e.height,p=!(o<l||u<r||s<h||c<a);if(n){var d=1/0,f=0,g=Math.abs(o-l),y=Math.abs(u-r),v=Math.abs(s-h),m=Math.abs(c-a),x=Math.min(g,y),_=Math.min(v,m);o<l||u<r?x>f&&(f=x,g<y?Ji.set(ar,-g,0):Ji.set(ar,y,0)):x<d&&(d=x,g<y?Ji.set(or,g,0):Ji.set(or,-y,0)),s<h||c<a?_>f&&(f=_,v<m?Ji.set(ar,0,-v):Ji.set(ar,0,m)):x<d&&(d=x,v<m?Ji.set(or,0,v):Ji.set(or,0,-m))}return n&&Ji.copy(n,p?or:ar),p},t.prototype.contain=function(t,e){var n=this;return t>=n.x&&t<=n.x+n.width&&e>=n.y&&e<=n.y+n.height},t.prototype.clone=function(){return new t(this.x,this.y,this.width,this.height)},t.prototype.copy=function(e){t.copy(this,e)},t.prototype.plain=function(){return{x:this.x,y:this.y,width:this.width,height:this.height}},t.prototype.isFinite=function(){return isFinite(this.x)&&isFinite(this.y)&&isFinite(this.width)&&isFinite(this.height)},t.prototype.isZero=function(){return 0===this.width||0===this.height},t.create=function(e){return new t(e.x,e.y,e.width,e.height)},t.copy=function(t,e){t.x=e.x,t.y=e.y,t.width=e.width,t.height=e.height},t.applyTransform=function(e,n,i){if(i){if(i[1]<1e-5&&i[1]>-1e-5&&i[2]<1e-5&&i[2]>-1e-5){var r=i[0],o=i[3],a=i[4],s=i[5];return e.x=n.x*r+a,e.y=n.y*o+s,e.width=n.width*r,e.height=n.height*o,e.width<0&&(e.x+=e.width,e.width=-e.width),void(e.height<0&&(e.y+=e.height,e.height=-e.height))}er.x=ir.x=n.x,er.y=rr.y=n.y,nr.x=rr.x=n.x+n.width,nr.y=ir.y=n.y+n.height,er.transform(i),rr.transform(i),nr.transform(i),ir.transform(i),e.x=Qi(er.x,nr.x,ir.x,rr.x),e.y=Qi(er.y,nr.y,ir.y,rr.y);var l=tr(er.x,nr.x,ir.x,rr.x),u=tr(er.y,nr.y,ir.y,rr.y);e.width=l-e.x,e.height=u-e.y}else e!==n&&t.copy(e,n)},t}(),lr={};function ur(t,e){var n=lr[e=e||a];n||(n=lr[e]=new ln(500));var i=n.get(t);return null==i&&(i=h.measureText(t,e).width,n.put(t,i)),i}function hr(t,e,n,i){var r=ur(t,e),o=fr(e),a=pr(0,r,n),s=dr(0,o,i);return new sr(a,s,r,o)}function cr(t,e,n,i){var r=((t||"")+"").split("\n");if(1===r.length)return hr(r[0],e,n,i);for(var o=new sr(0,0,0,0),a=0;a<r.length;a++){var s=hr(r[a],e,n,i);0===a?o.copy(s):o.union(s)}return o}function pr(t,e,n){return"right"===n?t-=e:"center"===n&&(t-=e/2),t}function dr(t,e,n){return"middle"===n?t-=e/2:"bottom"===n&&(t-=e),t}function fr(t){return ur("国",t)}function gr(t,e){return"string"==typeof t?t.lastIndexOf("%")>=0?parseFloat(t)/100*e:parseFloat(t):t}function yr(t,e,n){var i=e.position||"inside",r=null!=e.distance?e.distance:5,o=n.height,a=n.width,s=o/2,l=n.x,u=n.y,h="left",c="top";if(i instanceof Array)l+=gr(i[0],n.width),u+=gr(i[1],n.height),h=null,c=null;else switch(i){case"left":l-=r,u+=s,h="right",c="middle";break;case"right":l+=r+a,u+=s,c="middle";break;case"top":l+=a/2,u-=r,h="center",c="bottom";break;case"bottom":l+=a/2,u+=o+r,h="center";break;case"inside":l+=a/2,u+=s,h="center",c="middle";break;case"insideLeft":l+=r,u+=s,c="middle";break;case"insideRight":l+=a-r,u+=s,h="right",c="middle";break;case"insideTop":l+=a/2,u+=r,h="center";break;case"insideBottom":l+=a/2,u+=o-r,h="center",c="bottom";break;case"insideTopLeft":l+=r,u+=r;break;case"insideTopRight":l+=a-r,u+=r,h="right";break;case"insideBottomLeft":l+=r,u+=o-r,c="bottom";break;case"insideBottomRight":l+=a-r,u+=o-r,h="right",c="bottom"}return(t=t||{}).x=l,t.y=u,t.align=h,t.verticalAlign=c,t}var vr="__zr_normal__",mr=Ki.concat(["ignore"]),xr=V(Ki,(function(t,e){return t[e]=!0,t}),{ignore:!1}),_r={},br=new sr(0,0,0,0),wr=function(){function t(t){this.id=M(),this.animators=[],this.currentStates=[],this.states={},this._init(t)}return t.prototype._init=function(t){this.attr(t)},t.prototype.drift=function(t,e,n){switch(this.draggable){case"horizontal":e=0;break;case"vertical":t=0}var i=this.transform;i||(i=this.transform=[1,0,0,1,0,0]),i[4]+=t,i[5]+=e,this.decomposeTransform(),this.markRedraw()},t.prototype.beforeUpdate=function(){},t.prototype.afterUpdate=function(){},t.prototype.update=function(){this.updateTransform(),this.__dirty&&this.updateInnerText()},t.prototype.updateInnerText=function(t){var e=this._textContent;if(e&&(!e.ignore||t)){this.textConfig||(this.textConfig={});var n=this.textConfig,i=n.local,r=e.innerTransformable,o=void 0,a=void 0,s=!1;r.parent=i?this:null;var l=!1;if(r.copyTransform(e),null!=n.position){var u=br;n.layoutRect?u.copy(n.layoutRect):u.copy(this.getBoundingRect()),i||u.applyTransform(this.transform),this.calculateTextPosition?this.calculateTextPosition(_r,n,u):yr(_r,n,u),r.x=_r.x,r.y=_r.y,o=_r.align,a=_r.verticalAlign;var h=n.origin;if(h&&null!=n.rotation){var c=void 0,p=void 0;"center"===h?(c=.5*u.width,p=.5*u.height):(c=gr(h[0],u.width),p=gr(h[1],u.height)),l=!0,r.originX=-r.x+c+(i?0:u.x),r.originY=-r.y+p+(i?0:u.y)}}null!=n.rotation&&(r.rotation=n.rotation);var d=n.offset;d&&(r.x+=d[0],r.y+=d[1],l||(r.originX=-d[0],r.originY=-d[1]));var f=null==n.inside?"string"==typeof n.position&&n.position.indexOf("inside")>=0:n.inside,g=this._innerTextDefaultStyle||(this._innerTextDefaultStyle={}),y=void 0,v=void 0,m=void 0;f&&this.canBeInsideText()?(y=n.insideFill,v=n.insideStroke,null!=y&&"auto"!==y||(y=this.getInsideTextFill()),null!=v&&"auto"!==v||(v=this.getInsideTextStroke(y),m=!0)):(y=n.outsideFill,v=n.outsideStroke,null!=y&&"auto"!==y||(y=this.getOutsideFill()),null!=v&&"auto"!==v||(v=this.getOutsideStroke(y),m=!0)),(y=y||"#000")===g.fill&&v===g.stroke&&m===g.autoStroke&&o===g.align&&a===g.verticalAlign||(s=!0,g.fill=y,g.stroke=v,g.autoStroke=m,g.align=o,g.verticalAlign=a,e.setDefaultTextStyle(g)),e.__dirty|=1,s&&e.dirtyStyle(!0)}},t.prototype.canBeInsideText=function(){return!0},t.prototype.getInsideTextFill=function(){return"#fff"},t.prototype.getInsideTextStroke=function(t){return"#000"},t.prototype.getOutsideFill=function(){return this.__zr&&this.__zr.isDarkMode()?Li:ki},t.prototype.getOutsideStroke=function(t){var e=this.__zr&&this.__zr.getBackgroundColor(),n="string"==typeof e&&bn(e);n||(n=[255,255,255,1]);for(var i=n[3],r=this.__zr.isDarkMode(),o=0;o<3;o++)n[o]=n[o]*i+(r?0:255)*(1-i);return n[3]=1,kn(n,"rgba")},t.prototype.traverse=function(t,e){},t.prototype.attrKV=function(t,e){"textConfig"===t?this.setTextConfig(e):"textContent"===t?this.setTextContent(e):"clipPath"===t?this.setClipPath(e):"extra"===t?(this.extra=this.extra||{},A(this.extra,e)):this[t]=e},t.prototype.hide=function(){this.ignore=!0,this.markRedraw()},t.prototype.show=function(){this.ignore=!1,this.markRedraw()},t.prototype.attr=function(t,e){if("string"==typeof t)this.attrKV(t,e);else if(q(t))for(var n=G(t),i=0;i<n.length;i++){var r=n[i];this.attrKV(r,t[r])}return this.markRedraw(),this},t.prototype.saveCurrentToNormalState=function(t){this._innerSaveToNormal(t);for(var e=this._normalState,n=0;n<this.animators.length;n++){var i=this.animators[n],r=i.__fromStateTransition;if(!(i.getLoop()||r&&r!==vr)){var o=i.targetName,a=o?e[o]:e;i.saveTo(a)}}},t.prototype._innerSaveToNormal=function(t){var e=this._normalState;e||(e=this._normalState={}),t.textConfig&&!e.textConfig&&(e.textConfig=this.textConfig),this._savePrimaryToNormal(t,e,mr)},t.prototype._savePrimaryToNormal=function(t,e,n){for(var i=0;i<n.length;i++){var r=n[i];null==t[r]||r in e||(e[r]=this[r])}},t.prototype.hasState=function(){return this.currentStates.length>0},t.prototype.getState=function(t){return this.states[t]},t.prototype.ensureState=function(t){var e=this.states;return e[t]||(e[t]={}),e[t]},t.prototype.clearStates=function(t){this.useState(vr,!1,t)},t.prototype.useState=function(t,e,n,i){var r=t===vr;if(this.hasState()||!r){var o=this.currentStates,a=this.stateTransition;if(!(P(o,t)>=0)||!e&&1!==o.length){var s;if(this.stateProxy&&!r&&(s=this.stateProxy(t)),s||(s=this.states&&this.states[t]),s||r){r||this.saveCurrentToNormalState(s);var l=!!(s&&s.hoverLayer||i);l&&this._toggleHoverLayerFlag(!0),this._applyStateObj(t,s,this._normalState,e,!n&&!this.__inHover&&a&&a.duration>0,a);var u=this._textContent,h=this._textGuide;return u&&u.useState(t,e,n,l),h&&h.useState(t,e,n,l),r?(this.currentStates=[],this._normalState={}):e?this.currentStates.push(t):this.currentStates=[t],this._updateAnimationTargets(),this.markRedraw(),!l&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=-2),s}I("State "+t+" not exists.")}}},t.prototype.useStates=function(t,e,n){if(t.length){var i=[],r=this.currentStates,o=t.length,a=o===r.length;if(a)for(var s=0;s<o;s++)if(t[s]!==r[s]){a=!1;break}if(a)return;for(s=0;s<o;s++){var l=t[s],u=void 0;this.stateProxy&&(u=this.stateProxy(l,t)),u||(u=this.states[l]),u&&i.push(u)}var h=i[o-1],c=!!(h&&h.hoverLayer||n);c&&this._toggleHoverLayerFlag(!0);var p=this._mergeStates(i),d=this.stateTransition;this.saveCurrentToNormalState(p),this._applyStateObj(t.join(","),p,this._normalState,!1,!e&&!this.__inHover&&d&&d.duration>0,d);var f=this._textContent,g=this._textGuide;f&&f.useStates(t,e,c),g&&g.useStates(t,e,c),this._updateAnimationTargets(),this.currentStates=t.slice(),this.markRedraw(),!c&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=-2)}else this.clearStates()},t.prototype._updateAnimationTargets=function(){for(var t=0;t<this.animators.length;t++){var e=this.animators[t];e.targetName&&e.changeTarget(this[e.targetName])}},t.prototype.removeState=function(t){var e=P(this.currentStates,t);if(e>=0){var n=this.currentStates.slice();n.splice(e,1),this.useStates(n)}},t.prototype.replaceState=function(t,e,n){var i=this.currentStates.slice(),r=P(i,t),o=P(i,e)>=0;r>=0?o?i.splice(r,1):i[r]=e:n&&!o&&i.push(e),this.useStates(i)},t.prototype.toggleState=function(t,e){e?this.useState(t,!0):this.removeState(t)},t.prototype._mergeStates=function(t){for(var e,n={},i=0;i<t.length;i++){var r=t[i];A(n,r),r.textConfig&&A(e=e||{},r.textConfig)}return e&&(n.textConfig=e),n},t.prototype._applyStateObj=function(t,e,n,i,r,o){var a=!(e&&i);e&&e.textConfig?(this.textConfig=A({},i?this.textConfig:n.textConfig),A(this.textConfig,e.textConfig)):a&&n.textConfig&&(this.textConfig=n.textConfig);for(var s={},l=!1,u=0;u<mr.length;u++){var h=mr[u],c=r&&xr[h];e&&null!=e[h]?c?(l=!0,s[h]=e[h]):this[h]=e[h]:a&&null!=n[h]&&(c?(l=!0,s[h]=n[h]):this[h]=n[h])}if(!r)for(u=0;u<this.animators.length;u++){var p=this.animators[u],d=p.targetName;p.getLoop()||p.__changeFinalValue(d?(e||n)[d]:e||n)}l&&this._transitionState(t,s,o)},t.prototype._attachComponent=function(t){if((!t.__zr||t.__hostTarget)&&t!==this){var e=this.__zr;e&&t.addSelfToZr(e),t.__zr=e,t.__hostTarget=this}},t.prototype._detachComponent=function(t){t.__zr&&t.removeSelfFromZr(t.__zr),t.__zr=null,t.__hostTarget=null},t.prototype.getClipPath=function(){return this._clipPath},t.prototype.setClipPath=function(t){this._clipPath&&this._clipPath!==t&&this.removeClipPath(),this._attachComponent(t),this._clipPath=t,this.markRedraw()},t.prototype.removeClipPath=function(){var t=this._clipPath;t&&(this._detachComponent(t),this._clipPath=null,this.markRedraw())},t.prototype.getTextContent=function(){return this._textContent},t.prototype.setTextContent=function(t){var e=this._textContent;e!==t&&(e&&e!==t&&this.removeTextContent(),t.innerTransformable=new qi,this._attachComponent(t),this._textContent=t,this.markRedraw())},t.prototype.setTextConfig=function(t){this.textConfig||(this.textConfig={}),A(this.textConfig,t),this.markRedraw()},t.prototype.removeTextConfig=function(){this.textConfig=null,this.markRedraw()},t.prototype.removeTextContent=function(){var t=this._textContent;t&&(t.innerTransformable=null,this._detachComponent(t),this._textContent=null,this._innerTextDefaultStyle=null,this.markRedraw())},t.prototype.getTextGuideLine=function(){return this._textGuide},t.prototype.setTextGuideLine=function(t){this._textGuide&&this._textGuide!==t&&this.removeTextGuideLine(),this._attachComponent(t),this._textGuide=t,this.markRedraw()},t.prototype.removeTextGuideLine=function(){var t=this._textGuide;t&&(this._detachComponent(t),this._textGuide=null,this.markRedraw())},t.prototype.markRedraw=function(){this.__dirty|=1;var t=this.__zr;t&&(this.__inHover?t.refreshHover():t.refresh()),this.__hostTarget&&this.__hostTarget.markRedraw()},t.prototype.dirty=function(){this.markRedraw()},t.prototype._toggleHoverLayerFlag=function(t){this.__inHover=t;var e=this._textContent,n=this._textGuide;e&&(e.__inHover=t),n&&(n.__inHover=t)},t.prototype.addSelfToZr=function(t){if(this.__zr!==t){this.__zr=t;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.addAnimator(e[n]);this._clipPath&&this._clipPath.addSelfToZr(t),this._textContent&&this._textContent.addSelfToZr(t),this._textGuide&&this._textGuide.addSelfToZr(t)}},t.prototype.removeSelfFromZr=function(t){if(this.__zr){this.__zr=null;var e=this.animators;if(e)for(var n=0;n<e.length;n++)t.animation.removeAnimator(e[n]);this._clipPath&&this._clipPath.removeSelfFromZr(t),this._textContent&&this._textContent.removeSelfFromZr(t),this._textGuide&&this._textGuide.removeSelfFromZr(t)}},t.prototype.animate=function(t,e,n){var i=t?this[t]:this;var r=new ai(i,e,n);return t&&(r.targetName=t),this.addAnimator(r,t),r},t.prototype.addAnimator=function(t,e){var n=this.__zr,i=this;t.during((function(){i.updateDuringAnimation(e)})).done((function(){var e=i.animators,n=P(e,t);n>=0&&e.splice(n,1)})),this.animators.push(t),n&&n.animation.addAnimator(t),n&&n.wakeUp()},t.prototype.updateDuringAnimation=function(t){this.markRedraw()},t.prototype.stopAnimation=function(t,e){for(var n=this.animators,i=n.length,r=[],o=0;o<i;o++){var a=n[o];t&&t!==a.scope?r.push(a):a.stop(e)}return this.animators=r,this},t.prototype.animateTo=function(t,e,n){Sr(this,t,e,n)},t.prototype.animateFrom=function(t,e,n){Sr(this,t,e,n,!0)},t.prototype._transitionState=function(t,e,n,i){for(var r=Sr(this,e,n,i),o=0;o<r.length;o++)r[o].__fromStateTransition=t},t.prototype.getBoundingRect=function(){return null},t.prototype.getPaintRect=function(){return null},t.initDefaultProps=function(){var e=t.prototype;e.type="element",e.name="",e.ignore=e.silent=e.isGroup=e.draggable=e.dragging=e.ignoreClip=e.__inHover=!1,e.__dirty=1;function n(t,n,i,r){function o(t,e){Object.defineProperty(e,0,{get:function(){return t[i]},set:function(e){t[i]=e}}),Object.defineProperty(e,1,{get:function(){return t[r]},set:function(e){t[r]=e}})}Object.defineProperty(e,t,{get:function(){this[n]||o(this,this[n]=[]);return this[n]},set:function(t){this[i]=t[0],this[r]=t[1],this[n]=t,o(this,t)}})}Object.defineProperty&&(n("position","_legacyPos","x","y"),n("scale","_legacyScale","scaleX","scaleY"),n("origin","_legacyOrigin","originX","originY"))}(),t}();function Sr(t,e,n,i,r){var o=[];Tr(t,"",t,e,n=n||{},i,o,r);var a=o.length,s=!1,l=n.done,u=n.aborted,h=function(){s=!0,--a<=0&&(s?l&&l():u&&u())},c=function(){--a<=0&&(s?l&&l():u&&u())};a||l&&l(),o.length>0&&n.during&&o[0].during((function(t,e){n.during(e)}));for(var p=0;p<o.length;p++){var d=o[p];h&&d.done(h),c&&d.aborted(c),n.force&&d.duration(n.duration),d.start(n.easing)}return o}function Mr(t,e,n){for(var i=0;i<n;i++)t[i]=e[i]}function Ir(t,e,n){if(N(e[n]))if(N(t[n])||(t[n]=[]),$(e[n])){var i=e[n].length;t[n].length!==i&&(t[n]=new e[n].constructor(i),Mr(t[n],e[n],i))}else{var r=e[n],o=t[n],a=r.length;if(N(r[0]))for(var s=r[0].length,l=0;l<a;l++)o[l]?Mr(o[l],r[l],s):o[l]=Array.prototype.slice.call(r[l]);else Mr(o,r,a);o.length=r.length}else t[n]=e[n]}function Tr(t,e,n,i,r,o,a,s){for(var l=G(i),u=r.duration,h=r.delay,c=r.additive,p=r.setToFinal,d=!q(o),f=t.animators,g=[],y=0;y<l.length;y++){var v=l[y],m=i[v];if(null!=m&&null!=n[v]&&(d||o[v]))if(!q(m)||N(m)||Q(m))g.push(v);else{if(e){s||(n[v]=m,t.updateDuringAnimation(e));continue}Tr(t,v,n[v],m,r,o&&o[v],a,s)}else s||(n[v]=m,t.updateDuringAnimation(e),g.push(v))}var x=g.length;if(!c&&x)for(var _=0;_<f.length;_++){if((w=f[_]).targetName===e)if(w.stopTracks(g)){var b=P(f,w);f.splice(b,1)}}if(r.force||(x=(g=B(g,(function(t){return e=i[t],r=n[t],!(e===r||N(e)&&N(r)&&function(t,e){var n=t.length;if(n!==e.length)return!1;for(var i=0;i<n;i++)if(t[i]!==e[i])return!1;return!0}(e,r));var e,r}))).length),x>0||r.force&&!a.length){var w,S=void 0,M=void 0,I=void 0;if(s){M={},p&&(S={});for(_=0;_<x;_++){M[v=g[_]]=n[v],p?S[v]=i[v]:n[v]=i[v]}}else if(p){I={};for(_=0;_<x;_++){I[v=g[_]]=ti(n[v]),Ir(n,i,v)}}(w=new ai(n,!1,!1,c?B(f,(function(t){return t.targetName===e})):null)).targetName=e,r.scope&&(w.scope=r.scope),p&&S&&w.whenWithKeys(0,S,g),I&&w.whenWithKeys(0,I,g),w.whenWithKeys(null==u?500:u,s?M:i,g).delay(h||0),t.addAnimator(w,e),a.push(w)}}R(wr,Xt),R(wr,qi);var Cr=function(t){function e(e){var n=t.call(this)||this;return n.isGroup=!0,n._children=[],n.attr(e),n}return n(e,t),e.prototype.childrenRef=function(){return this._children},e.prototype.children=function(){return this._children.slice()},e.prototype.childAt=function(t){return this._children[t]},e.prototype.childOfName=function(t){for(var e=this._children,n=0;n<e.length;n++)if(e[n].name===t)return e[n]},e.prototype.childCount=function(){return this._children.length},e.prototype.add=function(t){return t&&t!==this&&t.parent!==this&&(this._children.push(t),this._doAdd(t)),this},e.prototype.addBefore=function(t,e){if(t&&t!==this&&t.parent!==this&&e&&e.parent===this){var n=this._children,i=n.indexOf(e);i>=0&&(n.splice(i,0,t),this._doAdd(t))}return this},e.prototype.replace=function(t,e){var n=P(this._children,t);return n>=0&&this.replaceAt(e,n),this},e.prototype.replaceAt=function(t,e){var n=this._children,i=n[e];if(t&&t!==this&&t.parent!==this&&t!==i){n[e]=t,i.parent=null;var r=this.__zr;r&&i.removeSelfFromZr(r),this._doAdd(t)}return this},e.prototype._doAdd=function(t){t.parent&&t.parent.remove(t),t.parent=this;var e=this.__zr;e&&e!==t.__zr&&t.addSelfToZr(e),e&&e.refresh()},e.prototype.remove=function(t){var e=this.__zr,n=this._children,i=P(n,t);return i<0||(n.splice(i,1),t.parent=null,e&&t.removeSelfFromZr(e),e&&e.refresh()),this},e.prototype.removeAll=function(){for(var t=this._children,e=this.__zr,n=0;n<t.length;n++){var i=t[n];e&&i.removeSelfFromZr(e),i.parent=null}return t.length=0,this},e.prototype.eachChild=function(t,e){for(var n=this._children,i=0;i<n.length;i++){var r=n[i];t.call(e,r,i)}return this},e.prototype.traverse=function(t,e){for(var n=0;n<this._children.length;n++){var i=this._children[n],r=t.call(e,i);i.isGroup&&!r&&i.traverse(t,e)}return this},e.prototype.addSelfToZr=function(e){t.prototype.addSelfToZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].addSelfToZr(e)}},e.prototype.removeSelfFromZr=function(e){t.prototype.removeSelfFromZr.call(this,e);for(var n=0;n<this._children.length;n++){this._children[n].removeSelfFromZr(e)}},e.prototype.getBoundingRect=function(t){for(var e=new sr(0,0,0,0),n=t||this._children,i=[],r=null,o=0;o<n.length;o++){var a=n[o];if(!a.ignore&&!a.invisible){var s=a.getBoundingRect(),l=a.getLocalTransform(i);l?(sr.applyTransform(e,s,l),(r=r||e.clone()).union(e)):(r=r||s.clone()).union(s)}}return r||e},e}(wr);Cr.prototype.type="group";
+/*!
+    * ZRender, a high performance 2d drawing library.
+    *
+    * Copyright (c) 2013, Baidu Inc.
+    * All rights reserved.
+    *
+    * LICENSE
+    * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
+    */
+var Dr={},Ar={};var kr=function(){function t(t,e,n){var i=this;this._sleepAfterStill=10,this._stillFrameAccum=0,this._needsRefresh=!0,this._needsRefreshHover=!0,this._darkMode=!1,n=n||{},this.dom=e,this.id=t;var o=new Ae,a=n.renderer||"canvas";Dr[a]||(a=G(Dr)[0]),n.useDirtyRect=null!=n.useDirtyRect&&n.useDirtyRect;var s=new Dr[a](e,o,n,t),l=n.ssr||s.ssrOnly;this.storage=o,this.painter=s;var u=r.node||r.worker||l?null:new Ci(s.getViewportRoot(),s.root);this.handler=new ve(o,s,u,s.root),this.animation=new hi({stage:{update:l?null:function(){return i._flush(!0)}}}),l||this.animation.start()}return t.prototype.add=function(t){t&&(this.storage.addRoot(t),t.addSelfToZr(this),this.refresh())},t.prototype.remove=function(t){t&&(this.storage.delRoot(t),t.removeSelfFromZr(this),this.refresh())},t.prototype.configLayer=function(t,e){this.painter.configLayer&&this.painter.configLayer(t,e),this.refresh()},t.prototype.setBackgroundColor=function(t){this.painter.setBackgroundColor&&this.painter.setBackgroundColor(t),this.refresh(),this._backgroundColor=t,this._darkMode=function(t){if(!t)return!1;if("string"==typeof t)return Ln(t,1)<.4;if(t.colorStops){for(var e=t.colorStops,n=0,i=e.length,r=0;r<i;r++)n+=Ln(e[r].color,1);return(n/=i)<.4}return!1}(t)},t.prototype.getBackgroundColor=function(){return this._backgroundColor},t.prototype.setDarkMode=function(t){this._darkMode=t},t.prototype.isDarkMode=function(){return this._darkMode},t.prototype.refreshImmediately=function(t){t||this.animation.update(!0),this._needsRefresh=!1,this.painter.refresh(),this._needsRefresh=!1},t.prototype.refresh=function(){this._needsRefresh=!0,this.animation.start()},t.prototype.flush=function(){this._flush(!1)},t.prototype._flush=function(t){var e,n=si();this._needsRefresh&&(e=!0,this.refreshImmediately(t)),this._needsRefreshHover&&(e=!0,this.refreshHoverImmediately());var i=si();e?(this._stillFrameAccum=0,this.trigger("rendered",{elapsedTime:i-n})):this._sleepAfterStill>0&&(this._stillFrameAccum++,this._stillFrameAccum>this._sleepAfterStill&&this.animation.stop())},t.prototype.setSleepAfterStill=function(t){this._sleepAfterStill=t},t.prototype.wakeUp=function(){this.animation.start(),this._stillFrameAccum=0},t.prototype.refreshHover=function(){this._needsRefreshHover=!0},t.prototype.refreshHoverImmediately=function(){this._needsRefreshHover=!1,this.painter.refreshHover&&"canvas"===this.painter.getType()&&this.painter.refreshHover()},t.prototype.resize=function(t){t=t||{},this.painter.resize(t.width,t.height),this.handler.resize()},t.prototype.clearAnimation=function(){this.animation.clear()},t.prototype.getWidth=function(){return this.painter.getWidth()},t.prototype.getHeight=function(){return this.painter.getHeight()},t.prototype.setCursorStyle=function(t){this.handler.setCursorStyle(t)},t.prototype.findHover=function(t,e){return this.handler.findHover(t,e)},t.prototype.on=function(t,e,n){return this.handler.on(t,e,n),this},t.prototype.off=function(t,e){this.handler.off(t,e)},t.prototype.trigger=function(t,e){this.handler.trigger(t,e)},t.prototype.clear=function(){for(var t=this.storage.getRoots(),e=0;e<t.length;e++)t[e]instanceof Cr&&t[e].removeSelfFromZr(this);this.storage.delAllRoots(),this.painter.clear()},t.prototype.dispose=function(){var t;this.animation.stop(),this.clear(),this.storage.dispose(),this.painter.dispose(),this.handler.dispose(),this.animation=this.storage=this.painter=this.handler=null,t=this.id,delete Ar[t]},t}();function Lr(t,e){var n=new kr(M(),t,e);return Ar[n.id]=n,n}function Pr(t,e){Dr[t]=e}var Or=Object.freeze({__proto__:null,init:Lr,dispose:function(t){t.dispose()},disposeAll:function(){for(var t in Ar)Ar.hasOwnProperty(t)&&Ar[t].dispose();Ar={}},getInstance:function(t){return Ar[t]},registerPainter:Pr,version:"5.3.2"}),Rr=1e-4;function Nr(t,e,n,i){var r=e[0],o=e[1],a=n[0],s=n[1],l=o-r,u=s-a;if(0===l)return 0===u?a:(a+s)/2;if(i)if(l>0){if(t<=r)return a;if(t>=o)return s}else{if(t>=r)return a;if(t<=o)return s}else{if(t===r)return a;if(t===o)return s}return(t-r)/l*u+a}function Er(t,e){switch(t){case"center":case"middle":t="50%";break;case"left":case"top":t="0%";break;case"right":case"bottom":t="100%"}return X(t)?(n=t,n.replace(/^\s+|\s+$/g,"")).match(/%$/)?parseFloat(t)/100*e:parseFloat(t):null==t?NaN:+t;var n}function zr(t,e,n){return null==e&&(e=10),e=Math.min(Math.max(0,e),20),t=(+t).toFixed(e),n?t:+t}function Vr(t){return t.sort((function(t,e){return t-e})),t}function Br(t){if(t=+t,isNaN(t))return 0;if(t>1e-14)for(var e=1,n=0;n<15;n++,e*=10)if(Math.round(t*e)/e===t)return n;return Fr(t)}function Fr(t){var e=t.toString().toLowerCase(),n=e.indexOf("e"),i=n>0?+e.slice(n+1):0,r=n>0?n:e.length,o=e.indexOf("."),a=o<0?0:r-1-o;return Math.max(0,a-i)}function Gr(t,e){var n=Math.log,i=Math.LN10,r=Math.floor(n(t[1]-t[0])/i),o=Math.round(n(Math.abs(e[1]-e[0]))/i),a=Math.min(Math.max(-r+o,0),20);return isFinite(a)?a:20}function Wr(t,e,n){if(!t[e])return 0;var i=V(t,(function(t,e){return t+(isNaN(e)?0:e)}),0);if(0===i)return 0;for(var r=Math.pow(10,n),o=z(t,(function(t){return(isNaN(t)?0:t)/i*r*100})),a=100*r,s=z(o,(function(t){return Math.floor(t)})),l=V(s,(function(t,e){return t+e}),0),u=z(o,(function(t,e){return t-s[e]}));l<a;){for(var h=Number.NEGATIVE_INFINITY,c=null,p=0,d=u.length;p<d;++p)u[p]>h&&(h=u[p],c=p);++s[c],u[c]=0,++l}return s[e]/r}function Hr(t,e){var n=Math.max(Br(t),Br(e)),i=t+e;return n>20?i:zr(i,n)}var Yr=9007199254740991;function Ur(t){var e=2*Math.PI;return(t%e+e)%e}function Xr(t){return t>-1e-4&&t<Rr}var Zr=/^(?:(\d{4})(?:[-\/](\d{1,2})(?:[-\/](\d{1,2})(?:[T ](\d{1,2})(?::(\d{1,2})(?::(\d{1,2})(?:[.,](\d+))?)?)?(Z|[\+\-]\d\d:?\d\d)?)?)?)?)?$/;function jr(t){if(t instanceof Date)return t;if(X(t)){var e=Zr.exec(t);if(!e)return new Date(NaN);if(e[8]){var n=+e[4]||0;return"Z"!==e[8].toUpperCase()&&(n-=+e[8].slice(0,3)),new Date(Date.UTC(+e[1],+(e[2]||1)-1,+e[3]||1,n,+(e[5]||0),+e[6]||0,e[7]?+e[7].substring(0,3):0))}return new Date(+e[1],+(e[2]||1)-1,+e[3]||1,+e[4]||0,+(e[5]||0),+e[6]||0,e[7]?+e[7].substring(0,3):0)}return null==t?new Date(NaN):new Date(Math.round(t))}function qr(t){return Math.pow(10,Kr(t))}function Kr(t){if(0===t)return 0;var e=Math.floor(Math.log(t)/Math.LN10);return t/Math.pow(10,e)>=10&&e++,e}function $r(t,e){var n=Kr(t),i=Math.pow(10,n),r=t/i;return t=(e?r<1.5?1:r<2.5?2:r<4?3:r<7?5:10:r<1?1:r<2?2:r<3?3:r<5?5:10)*i,n>=-20?+t.toFixed(n<0?-n:0):t}function Jr(t,e){var n=(t.length-1)*e+1,i=Math.floor(n),r=+t[i-1],o=n-i;return o?r+o*(t[i]-r):r}function Qr(t){t.sort((function(t,e){return s(t,e,0)?-1:1}));for(var e=-1/0,n=1,i=0;i<t.length;){for(var r=t[i].interval,o=t[i].close,a=0;a<2;a++)r[a]<=e&&(r[a]=e,o[a]=a?1:1-n),e=r[a],n=o[a];r[0]===r[1]&&o[0]*o[1]!=1?t.splice(i,1):i++}return t;function s(t,e,n){return t.interval[n]<e.interval[n]||t.interval[n]===e.interval[n]&&(t.close[n]-e.close[n]==(n?-1:1)||!n&&s(t,e,1))}}function to(t){var e=parseFloat(t);return e==t&&(0!==e||!X(t)||t.indexOf("x")<=0)?e:NaN}function eo(t){return!isNaN(to(t))}function no(){return Math.round(9*Math.random())}function io(t,e){return 0===e?t:io(e,t%e)}function ro(t,e){return null==t?e:null==e?t:t*e/io(t,e)}"undefined"!=typeof console&&console.warn&&console.log;function oo(t){0}function ao(t){throw new Error(t)}function so(t,e,n){return(e-t)*n+t}var lo="series\0",uo="\0_ec_\0";function ho(t){return t instanceof Array?t:null==t?[]:[t]}function co(t,e,n){if(t){t[e]=t[e]||{},t.emphasis=t.emphasis||{},t.emphasis[e]=t.emphasis[e]||{};for(var i=0,r=n.length;i<r;i++){var o=n[i];!t.emphasis[e].hasOwnProperty(o)&&t[e].hasOwnProperty(o)&&(t.emphasis[e][o]=t[e][o])}}}var po=["fontStyle","fontWeight","fontSize","fontFamily","rich","tag","color","textBorderColor","textBorderWidth","width","height","lineHeight","align","verticalAlign","baseline","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY","textShadowColor","textShadowBlur","textShadowOffsetX","textShadowOffsetY","backgroundColor","borderColor","borderWidth","borderRadius","padding"];function fo(t){return!q(t)||Y(t)||t instanceof Date?t:t.value}function go(t){return q(t)&&!(t instanceof Array)}function yo(t,e,n){var i="normalMerge"===n,r="replaceMerge"===n,o="replaceAll"===n;t=t||[],e=(e||[]).slice();var a=ft();E(e,(function(t,n){q(t)||(e[n]=null)}));var s,l,u=function(t,e,n){var i=[];if("replaceAll"===n)return i;for(var r=0;r<t.length;r++){var o=t[r];o&&null!=o.id&&e.set(o.id,r),i.push({existing:"replaceMerge"===n||bo(o)?null:o,newOption:null,keyInfo:null,brandNew:null})}return i}(t,a,n);return(i||r)&&function(t,e,n,i){E(i,(function(r,o){if(r&&null!=r.id){var a=mo(r.id),s=n.get(a);if(null!=s){var l=t[s];lt(!l.newOption,'Duplicated option on id "'+a+'".'),l.newOption=r,l.existing=e[s],i[o]=null}}}))}(u,t,a,e),i&&function(t,e){E(e,(function(n,i){if(n&&null!=n.name)for(var r=0;r<t.length;r++){var o=t[r].existing;if(!t[r].newOption&&o&&(null==o.id||null==n.id)&&!bo(n)&&!bo(o)&&vo("name",o,n))return t[r].newOption=n,void(e[i]=null)}}))}(u,e),i||r?function(t,e,n){E(e,(function(e){if(e){for(var i,r=0;(i=t[r])&&(i.newOption||bo(i.existing)||i.existing&&null!=e.id&&!vo("id",e,i.existing));)r++;i?(i.newOption=e,i.brandNew=n):t.push({newOption:e,brandNew:n,existing:null,keyInfo:null}),r++}}))}(u,e,r):o&&function(t,e){E(e,(function(e){t.push({newOption:e,brandNew:!0,existing:null,keyInfo:null})}))}(u,e),s=u,l=ft(),E(s,(function(t){var e=t.existing;e&&l.set(e.id,t)})),E(s,(function(t){var e=t.newOption;lt(!e||null==e.id||!l.get(e.id)||l.get(e.id)===t,"id duplicates: "+(e&&e.id)),e&&null!=e.id&&l.set(e.id,t),!t.keyInfo&&(t.keyInfo={})})),E(s,(function(t,e){var n=t.existing,i=t.newOption,r=t.keyInfo;if(q(i)){if(r.name=null!=i.name?mo(i.name):n?n.name:lo+e,n)r.id=mo(n.id);else if(null!=i.id)r.id=mo(i.id);else{var o=0;do{r.id="\0"+r.name+"\0"+o++}while(l.get(r.id))}l.set(r.id,t)}})),u}function vo(t,e,n){var i=xo(e[t],null),r=xo(n[t],null);return null!=i&&null!=r&&i===r}function mo(t){return xo(t,"")}function xo(t,e){return null==t?e:X(t)?t:j(t)||Z(t)?t+"":e}function _o(t){var e=t.name;return!(!e||!e.indexOf(lo))}function bo(t){return t&&null!=t.id&&0===mo(t.id).indexOf(uo)}function wo(t,e){return null!=e.dataIndexInside?e.dataIndexInside:null!=e.dataIndex?Y(e.dataIndex)?z(e.dataIndex,(function(e){return t.indexOfRawIndex(e)})):t.indexOfRawIndex(e.dataIndex):null!=e.name?Y(e.name)?z(e.name,(function(e){return t.indexOfName(e)})):t.indexOfName(e.name):void 0}function So(){var t="__ec_inner_"+Mo++;return function(e){return e[t]||(e[t]={})}}var Mo=no();function Io(t,e,n){var i=To(e,n),r=i.mainTypeSpecified,o=i.queryOptionMap,a=i.others,s=n?n.defaultMainType:null;return!r&&s&&o.set(s,{}),o.each((function(e,i){var r=Ao(t,i,e,{useDefault:s===i,enableAll:!n||null==n.enableAll||n.enableAll,enableNone:!n||null==n.enableNone||n.enableNone});a[i+"Models"]=r.models,a[i+"Model"]=r.models[0]})),a}function To(t,e){var n;if(X(t)){var i={};i[t+"Index"]=0,n=i}else n=t;var r=ft(),o={},a=!1;return E(n,(function(t,n){if("dataIndex"!==n&&"dataIndexInside"!==n){var i=n.match(/^(\w+)(Index|Id|Name)$/)||[],s=i[1],l=(i[2]||"").toLowerCase();if(s&&l&&!(e&&e.includeMainTypes&&P(e.includeMainTypes,s)<0))a=a||!!s,(r.get(s)||r.set(s,{}))[l]=t}else o[n]=t})),{mainTypeSpecified:a,queryOptionMap:r,others:o}}var Co={useDefault:!0,enableAll:!1,enableNone:!1},Do={useDefault:!1,enableAll:!0,enableNone:!0};function Ao(t,e,n,i){i=i||Co;var r=n.index,o=n.id,a=n.name,s={models:null,specified:null!=r||null!=o||null!=a};if(!s.specified){var l=void 0;return s.models=i.useDefault&&(l=t.getComponent(e))?[l]:[],s}return"none"===r||!1===r?(lt(i.enableNone,'`"none"` or `false` is not a valid value on index option.'),s.models=[],s):("all"===r&&(lt(i.enableAll,'`"all"` is not a valid value on index option.'),r=o=a=null),s.models=t.queryComponents({mainType:e,index:r,id:o,name:a}),s)}function ko(t,e,n){t.setAttribute?t.setAttribute(e,n):t[e]=n}function Lo(t,e){var n=ft(),i=[];return E(t,(function(t){var r=e(t);(n.get(r)||(i.push(r),n.set(r,[]))).push(t)})),{keys:i,buckets:n}}function Po(t,e,n,i,r){var o=null==e||"auto"===e;if(null==i)return i;if(j(i))return zr(f=so(n||0,i,r),o?Math.max(Br(n||0),Br(i)):e);if(X(i))return r<1?n:i;for(var a=[],s=n,l=i,u=Math.max(s?s.length:0,l.length),h=0;h<u;++h){var c=t.getDimensionInfo(h);if(c&&"ordinal"===c.type)a[h]=(r<1&&s?s:l)[h];else{var p=s&&s[h]?s[h]:0,d=l[h],f=so(p,d,r);a[h]=zr(f,o?Math.max(Br(p),Br(d)):e)}}return a}var Oo="___EC__COMPONENT__CONTAINER___",Ro="___EC__EXTENDED_CLASS___";function No(t){var e={main:"",sub:""};if(t){var n=t.split(".");e.main=n[0]||"",e.sub=n[1]||""}return e}function Eo(t,e){t.$constructor=t,t.extend=function(t){var e,i,r=this;return U(i=r)&&/^class\s/.test(Function.prototype.toString.call(i))?e=function(t){function e(){return t.apply(this,arguments)||this}return n(e,t),e}(r):O(e=function(){(t.$constructor||r).apply(this,arguments)},this),A(e.prototype,t),e[Ro]=!0,e.extend=this.extend,e.superCall=Bo,e.superApply=Fo,e.superClass=r,e}}function zo(t,e){t.extend=e.extend}var Vo=Math.round(10*Math.random());function Bo(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];return this.superClass.prototype[e].apply(t,n)}function Fo(t,e,n){return this.superClass.prototype[e].apply(t,n)}function Go(t){var e={};t.registerClass=function(t){var n,i=t.type||t.prototype.type;if(i){lt(/^[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)?$/.test(n=i),'componentType "'+n+'" illegal'),t.prototype.type=i;var r=No(i);if(r.sub){if(r.sub!==Oo){(function(t){var n=e[t.main];n&&n[Oo]||((n=e[t.main]={})[Oo]=!0);return n}(r))[r.sub]=t}}else e[r.main]=t}return t},t.getClass=function(t,n,i){var r=e[t];if(r&&r[Oo]&&(r=n?r[n]:null),i&&!r)throw new Error(n?"Component "+t+"."+(n||"")+" is used but not imported.":t+".type should be specified.");return r},t.getClassesByMainType=function(t){var n=No(t),i=[],r=e[n.main];return r&&r[Oo]?E(r,(function(t,e){e!==Oo&&i.push(t)})):i.push(r),i},t.hasClass=function(t){var n=No(t);return!!e[n.main]},t.getAllClassMainTypes=function(){var t=[];return E(e,(function(e,n){t.push(n)})),t},t.hasSubTypes=function(t){var n=No(t),i=e[n.main];return i&&i[Oo]}}function Wo(t,e){for(var n=0;n<t.length;n++)t[n][1]||(t[n][1]=t[n][0]);return e=e||!1,function(n,i,r){for(var o={},a=0;a<t.length;a++){var s=t[a][1];if(!(i&&P(i,s)>=0||r&&P(r,s)<0)){var l=n.getShallow(s,e);null!=l&&(o[t[a][0]]=l)}}return o}}var Ho=Wo([["fill","color"],["shadowBlur"],["shadowOffsetX"],["shadowOffsetY"],["opacity"],["shadowColor"]]),Yo=function(){function t(){}return t.prototype.getAreaStyle=function(t,e){return Ho(this,t,e)},t}(),Uo=new ln(50);function Xo(t){if("string"==typeof t){var e=Uo.get(t);return e&&e.image}return t}function Zo(t,e,n,i,r){if(t){if("string"==typeof t){if(e&&e.__zrImageSrc===t||!n)return e;var o=Uo.get(t),a={hostEl:n,cb:i,cbPayload:r};return o?!qo(e=o.image)&&o.pending.push(a):((e=h.loadImage(t,jo,jo)).__zrImageSrc=t,Uo.put(t,e.__cachedImgObj={image:e,pending:[a]})),e}return t}return e}function jo(){var t=this.__cachedImgObj;this.onload=this.onerror=this.__cachedImgObj=null;for(var e=0;e<t.pending.length;e++){var n=t.pending[e],i=n.cb;i&&i(this,n.cbPayload),n.hostEl.dirty()}t.pending.length=0}function qo(t){return t&&t.width&&t.height}var Ko=/\{([a-zA-Z0-9_]+)\|([^}]*)\}/g;function $o(t,e,n,i,r){if(!e)return"";var o=(t+"").split("\n");r=Jo(e,n,i,r);for(var a=0,s=o.length;a<s;a++)o[a]=Qo(o[a],r);return o.join("\n")}function Jo(t,e,n,i){var r=A({},i=i||{});r.font=e,n=rt(n,"..."),r.maxIterations=rt(i.maxIterations,2);var o=r.minChar=rt(i.minChar,0);r.cnCharWidth=ur("国",e);var a=r.ascCharWidth=ur("a",e);r.placeholder=rt(i.placeholder,"");for(var s=t=Math.max(0,t-1),l=0;l<o&&s>=a;l++)s-=a;var u=ur(n,e);return u>s&&(n="",u=0),s=t-u,r.ellipsis=n,r.ellipsisWidth=u,r.contentWidth=s,r.containerWidth=t,r}function Qo(t,e){var n=e.containerWidth,i=e.font,r=e.contentWidth;if(!n)return"";var o=ur(t,i);if(o<=n)return t;for(var a=0;;a++){if(o<=r||a>=e.maxIterations){t+=e.ellipsis;break}var s=0===a?ta(t,r,e.ascCharWidth,e.cnCharWidth):o>0?Math.floor(t.length*r/o):0;o=ur(t=t.substr(0,s),i)}return""===t&&(t=e.placeholder),t}function ta(t,e,n,i){for(var r=0,o=0,a=t.length;o<a&&r<e;o++){var s=t.charCodeAt(o);r+=0<=s&&s<=127?n:i}return o}var ea=function(){},na=function(t){this.tokens=[],t&&(this.tokens=t)},ia=function(){this.width=0,this.height=0,this.contentWidth=0,this.contentHeight=0,this.outerWidth=0,this.outerHeight=0,this.lines=[]};function ra(t,e,n,i,r){var o,a,s=""===e,l=r&&n.rich[r]||{},u=t.lines,h=l.font||n.font,c=!1;if(i){var p=l.padding,d=p?p[1]+p[3]:0;if(null!=l.width&&"auto"!==l.width){var f=gr(l.width,i.width)+d;u.length>0&&f+i.accumWidth>i.width&&(o=e.split("\n"),c=!0),i.accumWidth=f}else{var g=sa(e,h,i.width,i.breakAll,i.accumWidth);i.accumWidth=g.accumWidth+d,a=g.linesWidths,o=g.lines}}else o=e.split("\n");for(var y=0;y<o.length;y++){var v=o[y],m=new ea;if(m.styleName=r,m.text=v,m.isLineHolder=!v&&!s,"number"==typeof l.width?m.width=l.width:m.width=a?a[y]:ur(v,h),y||c)u.push(new na([m]));else{var x=(u[u.length-1]||(u[0]=new na)).tokens,_=x.length;1===_&&x[0].isLineHolder?x[0]=m:(v||!_||s)&&x.push(m)}}}var oa=V(",&?/;] ".split(""),(function(t,e){return t[e]=!0,t}),{});function aa(t){return!function(t){var e=t.charCodeAt(0);return e>=33&&e<=383}(t)||!!oa[t]}function sa(t,e,n,i,r){for(var o=[],a=[],s="",l="",u=0,h=0,c=0;c<t.length;c++){var p=t.charAt(c);if("\n"!==p){var d=ur(p,e),f=!i&&!aa(p);(o.length?h+d>n:r+h+d>n)?h?(s||l)&&(f?(s||(s=l,l="",h=u=0),o.push(s),a.push(h-u),l+=p,s="",h=u+=d):(l&&(s+=l,l="",u=0),o.push(s),a.push(h),s=p,h=d)):f?(o.push(l),a.push(u),l=p,u=d):(o.push(p),a.push(d)):(h+=d,f?(l+=p,u+=d):(l&&(s+=l,l="",u=0),s+=p))}else l&&(s+=l,h+=u),o.push(s),a.push(h),s="",l="",u=0,h=0}return o.length||s||(s=t,l="",u=0),l&&(s+=l),s&&(o.push(s),a.push(h)),1===o.length&&(h+=r),{accumWidth:h,lines:o,linesWidths:a}}var la="__zr_style_"+Math.round(10*Math.random()),ua={shadowBlur:0,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"#000",opacity:1,blend:"source-over"},ha={style:{shadowBlur:!0,shadowOffsetX:!0,shadowOffsetY:!0,shadowColor:!0,opacity:!0}};ua[la]=!0;var ca=["z","z2","invisible"],pa=["invisible"],da=function(t){function e(e){return t.call(this,e)||this}var i;return n(e,t),e.prototype._init=function(e){for(var n=G(e),i=0;i<n.length;i++){var r=n[i];"style"===r?this.useStyle(e[r]):t.prototype.attrKV.call(this,r,e[r])}this.style||this.useStyle({})},e.prototype.beforeBrush=function(){},e.prototype.afterBrush=function(){},e.prototype.innerBeforeBrush=function(){},e.prototype.innerAfterBrush=function(){},e.prototype.shouldBePainted=function(t,e,n,i){var r=this.transform;if(this.ignore||this.invisible||0===this.style.opacity||this.culling&&function(t,e,n){fa.copy(t.getBoundingRect()),t.transform&&fa.applyTransform(t.transform);return ga.width=e,ga.height=n,!fa.intersect(ga)}(this,t,e)||r&&!r[0]&&!r[3])return!1;if(n&&this.__clipPaths)for(var o=0;o<this.__clipPaths.length;++o)if(this.__clipPaths[o].isZeroArea())return!1;if(i&&this.parent)for(var a=this.parent;a;){if(a.ignore)return!1;a=a.parent}return!0},e.prototype.contain=function(t,e){return this.rectContain(t,e)},e.prototype.traverse=function(t,e){t.call(e,this)},e.prototype.rectContain=function(t,e){var n=this.transformCoordToLocal(t,e);return this.getBoundingRect().contain(n[0],n[1])},e.prototype.getPaintRect=function(){var t=this._paintRect;if(!this._paintRect||this.__dirty){var e=this.transform,n=this.getBoundingRect(),i=this.style,r=i.shadowBlur||0,o=i.shadowOffsetX||0,a=i.shadowOffsetY||0;t=this._paintRect||(this._paintRect=new sr(0,0,0,0)),e?sr.applyTransform(t,n,e):t.copy(n),(r||o||a)&&(t.width+=2*r+Math.abs(o),t.height+=2*r+Math.abs(a),t.x=Math.min(t.x,t.x+o-r),t.y=Math.min(t.y,t.y+a-r));var s=this.dirtyRectTolerance;t.isZero()||(t.x=Math.floor(t.x-s),t.y=Math.floor(t.y-s),t.width=Math.ceil(t.width+1+2*s),t.height=Math.ceil(t.height+1+2*s))}return t},e.prototype.setPrevPaintRect=function(t){t?(this._prevPaintRect=this._prevPaintRect||new sr(0,0,0,0),this._prevPaintRect.copy(t)):this._prevPaintRect=null},e.prototype.getPrevPaintRect=function(){return this._prevPaintRect},e.prototype.animateStyle=function(t){return this.animate("style",t)},e.prototype.updateDuringAnimation=function(t){"style"===t?this.dirtyStyle():this.markRedraw()},e.prototype.attrKV=function(e,n){"style"!==e?t.prototype.attrKV.call(this,e,n):this.style?this.setStyle(n):this.useStyle(n)},e.prototype.setStyle=function(t,e){return"string"==typeof t?this.style[t]=e:A(this.style,t),this.dirtyStyle(),this},e.prototype.dirtyStyle=function(t){t||this.markRedraw(),this.__dirty|=2,this._rect&&(this._rect=null)},e.prototype.dirty=function(){this.dirtyStyle()},e.prototype.styleChanged=function(){return!!(2&this.__dirty)},e.prototype.styleUpdated=function(){this.__dirty&=-3},e.prototype.createStyle=function(t){return yt(ua,t)},e.prototype.useStyle=function(t){t[la]||(t=this.createStyle(t)),this.__inHover?this.__hoverStyle=t:this.style=t,this.dirtyStyle()},e.prototype.isStyleObject=function(t){return t[la]},e.prototype._innerSaveToNormal=function(e){t.prototype._innerSaveToNormal.call(this,e);var n=this._normalState;e.style&&!n.style&&(n.style=this._mergeStyle(this.createStyle(),this.style)),this._savePrimaryToNormal(e,n,ca)},e.prototype._applyStateObj=function(e,n,i,r,o,a){t.prototype._applyStateObj.call(this,e,n,i,r,o,a);var s,l=!(n&&r);if(n&&n.style?o?r?s=n.style:(s=this._mergeStyle(this.createStyle(),i.style),this._mergeStyle(s,n.style)):(s=this._mergeStyle(this.createStyle(),r?this.style:i.style),this._mergeStyle(s,n.style)):l&&(s=i.style),s)if(o){var u=this.style;if(this.style=this.createStyle(l?{}:u),l)for(var h=G(u),c=0;c<h.length;c++){(d=h[c])in s&&(s[d]=s[d],this.style[d]=u[d])}var p=G(s);for(c=0;c<p.length;c++){var d=p[c];this.style[d]=this.style[d]}this._transitionState(e,{style:s},a,this.getAnimationStyleProps())}else this.useStyle(s);var f=this.__inHover?pa:ca;for(c=0;c<f.length;c++){d=f[c];n&&null!=n[d]?this[d]=n[d]:l&&null!=i[d]&&(this[d]=i[d])}},e.prototype._mergeStates=function(e){for(var n,i=t.prototype._mergeStates.call(this,e),r=0;r<e.length;r++){var o=e[r];o.style&&(n=n||{},this._mergeStyle(n,o.style))}return n&&(i.style=n),i},e.prototype._mergeStyle=function(t,e){return A(t,e),t},e.prototype.getAnimationStyleProps=function(){return ha},e.initDefaultProps=((i=e.prototype).type="displayable",i.invisible=!1,i.z=0,i.z2=0,i.zlevel=0,i.culling=!1,i.cursor="pointer",i.rectHover=!1,i.incremental=!1,i._rect=null,i.dirtyRectTolerance=0,void(i.__dirty=3)),e}(wr),fa=new sr(0,0,0,0),ga=new sr(0,0,0,0);var ya=Math.min,va=Math.max,ma=Math.sin,xa=Math.cos,_a=2*Math.PI,ba=wt(),wa=wt(),Sa=wt();function Ma(t,e,n){if(0!==t.length){for(var i=t[0],r=i[0],o=i[0],a=i[1],s=i[1],l=1;l<t.length;l++)i=t[l],r=ya(r,i[0]),o=va(o,i[0]),a=ya(a,i[1]),s=va(s,i[1]);e[0]=r,e[1]=a,n[0]=o,n[1]=s}}function Ia(t,e,n,i,r,o){r[0]=ya(t,n),r[1]=ya(e,i),o[0]=va(t,n),o[1]=va(e,i)}var Ta=[],Ca=[];function Da(t,e,n,i,r,o,a,s,l,u){var h=Xe,c=He,p=h(t,n,r,a,Ta);l[0]=1/0,l[1]=1/0,u[0]=-1/0,u[1]=-1/0;for(var d=0;d<p;d++){var f=c(t,n,r,a,Ta[d]);l[0]=ya(f,l[0]),u[0]=va(f,u[0])}p=h(e,i,o,s,Ca);for(d=0;d<p;d++){var g=c(e,i,o,s,Ca[d]);l[1]=ya(g,l[1]),u[1]=va(g,u[1])}l[0]=ya(t,l[0]),u[0]=va(t,u[0]),l[0]=ya(a,l[0]),u[0]=va(a,u[0]),l[1]=ya(e,l[1]),u[1]=va(e,u[1]),l[1]=ya(s,l[1]),u[1]=va(s,u[1])}function Aa(t,e,n,i,r,o,a,s){var l=Je,u=Ke,h=va(ya(l(t,n,r),1),0),c=va(ya(l(e,i,o),1),0),p=u(t,n,r,h),d=u(e,i,o,c);a[0]=ya(t,r,p),a[1]=ya(e,o,d),s[0]=va(t,r,p),s[1]=va(e,o,d)}function ka(t,e,n,i,r,o,a,s,l){var u=Gt,h=Wt,c=Math.abs(r-o);if(c%_a<1e-4&&c>1e-4)return s[0]=t-n,s[1]=e-i,l[0]=t+n,void(l[1]=e+i);if(ba[0]=xa(r)*n+t,ba[1]=ma(r)*i+e,wa[0]=xa(o)*n+t,wa[1]=ma(o)*i+e,u(s,ba,wa),h(l,ba,wa),(r%=_a)<0&&(r+=_a),(o%=_a)<0&&(o+=_a),r>o&&!a?o+=_a:r<o&&a&&(r+=_a),a){var p=o;o=r,r=p}for(var d=0;d<o;d+=Math.PI/2)d>r&&(Sa[0]=xa(d)*n+t,Sa[1]=ma(d)*i+e,u(s,Sa,s),h(l,Sa,l))}var La={M:1,L:2,C:3,Q:4,A:5,Z:6,R:7},Pa=[],Oa=[],Ra=[],Na=[],Ea=[],za=[],Va=Math.min,Ba=Math.max,Fa=Math.cos,Ga=Math.sin,Wa=Math.abs,Ha=Math.PI,Ya=2*Ha,Ua="undefined"!=typeof Float32Array,Xa=[];function Za(t){return Math.round(t/Ha*1e8)/1e8%2*Ha}function ja(t,e){var n=Za(t[0]);n<0&&(n+=Ya);var i=n-t[0],r=t[1];r+=i,!e&&r-n>=Ya?r=n+Ya:e&&n-r>=Ya?r=n-Ya:!e&&n>r?r=n+(Ya-Za(n-r)):e&&n<r&&(r=n-(Ya-Za(r-n))),t[0]=n,t[1]=r}var qa=function(){function t(t){this.dpr=1,this._xi=0,this._yi=0,this._x0=0,this._y0=0,this._len=0,t&&(this._saveData=!1),this._saveData&&(this.data=[])}return t.prototype.increaseVersion=function(){this._version++},t.prototype.getVersion=function(){return this._version},t.prototype.setScale=function(t,e,n){(n=n||0)>0&&(this._ux=Wa(n/Ai/t)||0,this._uy=Wa(n/Ai/e)||0)},t.prototype.setDPR=function(t){this.dpr=t},t.prototype.setContext=function(t){this._ctx=t},t.prototype.getContext=function(){return this._ctx},t.prototype.beginPath=function(){return this._ctx&&this._ctx.beginPath(),this.reset(),this},t.prototype.reset=function(){this._saveData&&(this._len=0),this._pathSegLen&&(this._pathSegLen=null,this._pathLen=0),this._version++},t.prototype.moveTo=function(t,e){return this._drawPendingPt(),this.addData(La.M,t,e),this._ctx&&this._ctx.moveTo(t,e),this._x0=t,this._y0=e,this._xi=t,this._yi=e,this},t.prototype.lineTo=function(t,e){var n=Wa(t-this._xi),i=Wa(e-this._yi),r=n>this._ux||i>this._uy;if(this.addData(La.L,t,e),this._ctx&&r&&this._ctx.lineTo(t,e),r)this._xi=t,this._yi=e,this._pendingPtDist=0;else{var o=n*n+i*i;o>this._pendingPtDist&&(this._pendingPtX=t,this._pendingPtY=e,this._pendingPtDist=o)}return this},t.prototype.bezierCurveTo=function(t,e,n,i,r,o){return this._drawPendingPt(),this.addData(La.C,t,e,n,i,r,o),this._ctx&&this._ctx.bezierCurveTo(t,e,n,i,r,o),this._xi=r,this._yi=o,this},t.prototype.quadraticCurveTo=function(t,e,n,i){return this._drawPendingPt(),this.addData(La.Q,t,e,n,i),this._ctx&&this._ctx.quadraticCurveTo(t,e,n,i),this._xi=n,this._yi=i,this},t.prototype.arc=function(t,e,n,i,r,o){this._drawPendingPt(),Xa[0]=i,Xa[1]=r,ja(Xa,o),i=Xa[0];var a=(r=Xa[1])-i;return this.addData(La.A,t,e,n,n,i,a,0,o?0:1),this._ctx&&this._ctx.arc(t,e,n,i,r,o),this._xi=Fa(r)*n+t,this._yi=Ga(r)*n+e,this},t.prototype.arcTo=function(t,e,n,i,r){return this._drawPendingPt(),this._ctx&&this._ctx.arcTo(t,e,n,i,r),this},t.prototype.rect=function(t,e,n,i){return this._drawPendingPt(),this._ctx&&this._ctx.rect(t,e,n,i),this.addData(La.R,t,e,n,i),this},t.prototype.closePath=function(){this._drawPendingPt(),this.addData(La.Z);var t=this._ctx,e=this._x0,n=this._y0;return t&&t.closePath(),this._xi=e,this._yi=n,this},t.prototype.fill=function(t){t&&t.fill(),this.toStatic()},t.prototype.stroke=function(t){t&&t.stroke(),this.toStatic()},t.prototype.len=function(){return this._len},t.prototype.setData=function(t){var e=t.length;this.data&&this.data.length===e||!Ua||(this.data=new Float32Array(e));for(var n=0;n<e;n++)this.data[n]=t[n];this._len=e},t.prototype.appendPath=function(t){t instanceof Array||(t=[t]);for(var e=t.length,n=0,i=this._len,r=0;r<e;r++)n+=t[r].len();Ua&&this.data instanceof Float32Array&&(this.data=new Float32Array(i+n));for(r=0;r<e;r++)for(var o=t[r].data,a=0;a<o.length;a++)this.data[i++]=o[a];this._len=i},t.prototype.addData=function(t,e,n,i,r,o,a,s,l){if(this._saveData){var u=this.data;this._len+arguments.length>u.length&&(this._expandData(),u=this.data);for(var h=0;h<arguments.length;h++)u[this._len++]=arguments[h]}},t.prototype._drawPendingPt=function(){this._pendingPtDist>0&&(this._ctx&&this._ctx.lineTo(this._pendingPtX,this._pendingPtY),this._pendingPtDist=0)},t.prototype._expandData=function(){if(!(this.data instanceof Array)){for(var t=[],e=0;e<this._len;e++)t[e]=this.data[e];this.data=t}},t.prototype.toStatic=function(){if(this._saveData){this._drawPendingPt();var t=this.data;t instanceof Array&&(t.length=this._len,Ua&&this._len>11&&(this.data=new Float32Array(t)))}},t.prototype.getBoundingRect=function(){Ra[0]=Ra[1]=Ea[0]=Ea[1]=Number.MAX_VALUE,Na[0]=Na[1]=za[0]=za[1]=-Number.MAX_VALUE;var t,e=this.data,n=0,i=0,r=0,o=0;for(t=0;t<this._len;){var a=e[t++],s=1===t;switch(s&&(r=n=e[t],o=i=e[t+1]),a){case La.M:n=r=e[t++],i=o=e[t++],Ea[0]=r,Ea[1]=o,za[0]=r,za[1]=o;break;case La.L:Ia(n,i,e[t],e[t+1],Ea,za),n=e[t++],i=e[t++];break;case La.C:Da(n,i,e[t++],e[t++],e[t++],e[t++],e[t],e[t+1],Ea,za),n=e[t++],i=e[t++];break;case La.Q:Aa(n,i,e[t++],e[t++],e[t],e[t+1],Ea,za),n=e[t++],i=e[t++];break;case La.A:var l=e[t++],u=e[t++],h=e[t++],c=e[t++],p=e[t++],d=e[t++]+p;t+=1;var f=!e[t++];s&&(r=Fa(p)*h+l,o=Ga(p)*c+u),ka(l,u,h,c,p,d,f,Ea,za),n=Fa(d)*h+l,i=Ga(d)*c+u;break;case La.R:Ia(r=n=e[t++],o=i=e[t++],r+e[t++],o+e[t++],Ea,za);break;case La.Z:n=r,i=o}Gt(Ra,Ra,Ea),Wt(Na,Na,za)}return 0===t&&(Ra[0]=Ra[1]=Na[0]=Na[1]=0),new sr(Ra[0],Ra[1],Na[0]-Ra[0],Na[1]-Ra[1])},t.prototype._calculateLength=function(){var t=this.data,e=this._len,n=this._ux,i=this._uy,r=0,o=0,a=0,s=0;this._pathSegLen||(this._pathSegLen=[]);for(var l=this._pathSegLen,u=0,h=0,c=0;c<e;){var p=t[c++],d=1===c;d&&(a=r=t[c],s=o=t[c+1]);var f=-1;switch(p){case La.M:r=a=t[c++],o=s=t[c++];break;case La.L:var g=t[c++],y=(x=t[c++])-o;(Wa(A=g-r)>n||Wa(y)>i||c===e-1)&&(f=Math.sqrt(A*A+y*y),r=g,o=x);break;case La.C:var v=t[c++],m=t[c++],x=(g=t[c++],t[c++]),_=t[c++],b=t[c++];f=qe(r,o,v,m,g,x,_,b,10),r=_,o=b;break;case La.Q:f=en(r,o,v=t[c++],m=t[c++],g=t[c++],x=t[c++],10),r=g,o=x;break;case La.A:var w=t[c++],S=t[c++],M=t[c++],I=t[c++],T=t[c++],C=t[c++],D=C+T;c+=1;t[c++];d&&(a=Fa(T)*M+w,s=Ga(T)*I+S),f=Ba(M,I)*Va(Ya,Math.abs(C)),r=Fa(D)*M+w,o=Ga(D)*I+S;break;case La.R:a=r=t[c++],s=o=t[c++],f=2*t[c++]+2*t[c++];break;case La.Z:var A=a-r;y=s-o;f=Math.sqrt(A*A+y*y),r=a,o=s}f>=0&&(l[h++]=f,u+=f)}return this._pathLen=u,u},t.prototype.rebuildPath=function(t,e){var n,i,r,o,a,s,l,u,h,c,p=this.data,d=this._ux,f=this._uy,g=this._len,y=e<1,v=0,m=0,x=0;if(!y||(this._pathSegLen||this._calculateLength(),l=this._pathSegLen,u=e*this._pathLen))t:for(var _=0;_<g;){var b=p[_++],w=1===_;switch(w&&(n=r=p[_],i=o=p[_+1]),b!==La.L&&x>0&&(t.lineTo(h,c),x=0),b){case La.M:n=r=p[_++],i=o=p[_++],t.moveTo(r,o);break;case La.L:a=p[_++],s=p[_++];var S=Wa(a-r),M=Wa(s-o);if(S>d||M>f){if(y){if(v+(j=l[m++])>u){var I=(u-v)/j;t.lineTo(r*(1-I)+a*I,o*(1-I)+s*I);break t}v+=j}t.lineTo(a,s),r=a,o=s,x=0}else{var T=S*S+M*M;T>x&&(h=a,c=s,x=T)}break;case La.C:var C=p[_++],D=p[_++],A=p[_++],k=p[_++],L=p[_++],P=p[_++];if(y){if(v+(j=l[m++])>u){Ze(r,C,A,L,I=(u-v)/j,Pa),Ze(o,D,k,P,I,Oa),t.bezierCurveTo(Pa[1],Oa[1],Pa[2],Oa[2],Pa[3],Oa[3]);break t}v+=j}t.bezierCurveTo(C,D,A,k,L,P),r=L,o=P;break;case La.Q:C=p[_++],D=p[_++],A=p[_++],k=p[_++];if(y){if(v+(j=l[m++])>u){Qe(r,C,A,I=(u-v)/j,Pa),Qe(o,D,k,I,Oa),t.quadraticCurveTo(Pa[1],Oa[1],Pa[2],Oa[2]);break t}v+=j}t.quadraticCurveTo(C,D,A,k),r=A,o=k;break;case La.A:var O=p[_++],R=p[_++],N=p[_++],E=p[_++],z=p[_++],V=p[_++],B=p[_++],F=!p[_++],G=N>E?N:E,W=Wa(N-E)>.001,H=z+V,Y=!1;if(y)v+(j=l[m++])>u&&(H=z+V*(u-v)/j,Y=!0),v+=j;if(W&&t.ellipse?t.ellipse(O,R,N,E,B,z,H,F):t.arc(O,R,G,z,H,F),Y)break t;w&&(n=Fa(z)*N+O,i=Ga(z)*E+R),r=Fa(H)*N+O,o=Ga(H)*E+R;break;case La.R:n=r=p[_],i=o=p[_+1],a=p[_++],s=p[_++];var U=p[_++],X=p[_++];if(y){if(v+(j=l[m++])>u){var Z=u-v;t.moveTo(a,s),t.lineTo(a+Va(Z,U),s),(Z-=U)>0&&t.lineTo(a+U,s+Va(Z,X)),(Z-=X)>0&&t.lineTo(a+Ba(U-Z,0),s+X),(Z-=U)>0&&t.lineTo(a,s+Ba(X-Z,0));break t}v+=j}t.rect(a,s,U,X);break;case La.Z:if(y){var j;if(v+(j=l[m++])>u){I=(u-v)/j;t.lineTo(r*(1-I)+n*I,o*(1-I)+i*I);break t}v+=j}t.closePath(),r=n,o=i}}},t.prototype.clone=function(){var e=new t,n=this.data;return e.data=n.slice?n.slice():Array.prototype.slice.call(n),e._len=this._len,e},t.CMD=La,t.initDefaultProps=function(){var e=t.prototype;e._saveData=!0,e._ux=0,e._uy=0,e._pendingPtDist=0,e._version=0}(),t}();function Ka(t,e,n,i,r,o,a){if(0===r)return!1;var s=r,l=0;if(a>e+s&&a>i+s||a<e-s&&a<i-s||o>t+s&&o>n+s||o<t-s&&o<n-s)return!1;if(t===n)return Math.abs(o-t)<=s/2;var u=(l=(e-i)/(t-n))*o-a+(t*i-n*e)/(t-n);return u*u/(l*l+1)<=s/2*s/2}function $a(t,e,n,i,r,o,a,s,l,u,h){if(0===l)return!1;var c=l;return!(h>e+c&&h>i+c&&h>o+c&&h>s+c||h<e-c&&h<i-c&&h<o-c&&h<s-c||u>t+c&&u>n+c&&u>r+c&&u>a+c||u<t-c&&u<n-c&&u<r-c&&u<a-c)&&je(t,e,n,i,r,o,a,s,u,h,null)<=c/2}function Ja(t,e,n,i,r,o,a,s,l){if(0===a)return!1;var u=a;return!(l>e+u&&l>i+u&&l>o+u||l<e-u&&l<i-u&&l<o-u||s>t+u&&s>n+u&&s>r+u||s<t-u&&s<n-u&&s<r-u)&&tn(t,e,n,i,r,o,s,l,null)<=u/2}var Qa=2*Math.PI;function ts(t){return(t%=Qa)<0&&(t+=Qa),t}var es=2*Math.PI;function ns(t,e,n,i,r,o,a,s,l){if(0===a)return!1;var u=a;s-=t,l-=e;var h=Math.sqrt(s*s+l*l);if(h-u>n||h+u<n)return!1;if(Math.abs(i-r)%es<1e-4)return!0;if(o){var c=i;i=ts(r),r=ts(c)}else i=ts(i),r=ts(r);i>r&&(r+=es);var p=Math.atan2(l,s);return p<0&&(p+=es),p>=i&&p<=r||p+es>=i&&p+es<=r}function is(t,e,n,i,r,o){if(o>e&&o>i||o<e&&o<i)return 0;if(i===e)return 0;var a=(o-e)/(i-e),s=i<e?1:-1;1!==a&&0!==a||(s=i<e?.5:-.5);var l=a*(n-t)+t;return l===r?1/0:l>r?s:0}var rs=qa.CMD,os=2*Math.PI;var as=[-1,-1,-1],ss=[-1,-1];function ls(t,e,n,i,r,o,a,s,l,u){if(u>e&&u>i&&u>o&&u>s||u<e&&u<i&&u<o&&u<s)return 0;var h,c=Ue(e,i,o,s,u,as);if(0===c)return 0;for(var p=0,d=-1,f=void 0,g=void 0,y=0;y<c;y++){var v=as[y],m=0===v||1===v?.5:1;He(t,n,r,a,v)<l||(d<0&&(d=Xe(e,i,o,s,ss),ss[1]<ss[0]&&d>1&&(h=void 0,h=ss[0],ss[0]=ss[1],ss[1]=h),f=He(e,i,o,s,ss[0]),d>1&&(g=He(e,i,o,s,ss[1]))),2===d?v<ss[0]?p+=f<e?m:-m:v<ss[1]?p+=g<f?m:-m:p+=s<g?m:-m:v<ss[0]?p+=f<e?m:-m:p+=s<f?m:-m)}return p}function us(t,e,n,i,r,o,a,s){if(s>e&&s>i&&s>o||s<e&&s<i&&s<o)return 0;var l=function(t,e,n,i,r){var o=t-2*e+n,a=2*(e-t),s=t-i,l=0;if(Ge(o))We(a)&&(h=-s/a)>=0&&h<=1&&(r[l++]=h);else{var u=a*a-4*o*s;if(Ge(u))(h=-a/(2*o))>=0&&h<=1&&(r[l++]=h);else if(u>0){var h,c=Oe(u),p=(-a-c)/(2*o);(h=(-a+c)/(2*o))>=0&&h<=1&&(r[l++]=h),p>=0&&p<=1&&(r[l++]=p)}}return l}(e,i,o,s,as);if(0===l)return 0;var u=Je(e,i,o);if(u>=0&&u<=1){for(var h=0,c=Ke(e,i,o,u),p=0;p<l;p++){var d=0===as[p]||1===as[p]?.5:1;Ke(t,n,r,as[p])<a||(as[p]<u?h+=c<e?d:-d:h+=o<c?d:-d)}return h}d=0===as[0]||1===as[0]?.5:1;return Ke(t,n,r,as[0])<a?0:o<e?d:-d}function hs(t,e,n,i,r,o,a,s){if((s-=e)>n||s<-n)return 0;var l=Math.sqrt(n*n-s*s);as[0]=-l,as[1]=l;var u=Math.abs(i-r);if(u<1e-4)return 0;if(u>=os-1e-4){i=0,r=os;var h=o?1:-1;return a>=as[0]+t&&a<=as[1]+t?h:0}if(i>r){var c=i;i=r,r=c}i<0&&(i+=os,r+=os);for(var p=0,d=0;d<2;d++){var f=as[d];if(f+t>a){var g=Math.atan2(s,f);h=o?1:-1;g<0&&(g=os+g),(g>=i&&g<=r||g+os>=i&&g+os<=r)&&(g>Math.PI/2&&g<1.5*Math.PI&&(h=-h),p+=h)}}return p}function cs(t,e,n,i,r){for(var o,a,s,l,u=t.data,h=t.len(),c=0,p=0,d=0,f=0,g=0,y=0;y<h;){var v=u[y++],m=1===y;switch(v===rs.M&&y>1&&(n||(c+=is(p,d,f,g,i,r))),m&&(f=p=u[y],g=d=u[y+1]),v){case rs.M:p=f=u[y++],d=g=u[y++];break;case rs.L:if(n){if(Ka(p,d,u[y],u[y+1],e,i,r))return!0}else c+=is(p,d,u[y],u[y+1],i,r)||0;p=u[y++],d=u[y++];break;case rs.C:if(n){if($a(p,d,u[y++],u[y++],u[y++],u[y++],u[y],u[y+1],e,i,r))return!0}else c+=ls(p,d,u[y++],u[y++],u[y++],u[y++],u[y],u[y+1],i,r)||0;p=u[y++],d=u[y++];break;case rs.Q:if(n){if(Ja(p,d,u[y++],u[y++],u[y],u[y+1],e,i,r))return!0}else c+=us(p,d,u[y++],u[y++],u[y],u[y+1],i,r)||0;p=u[y++],d=u[y++];break;case rs.A:var x=u[y++],_=u[y++],b=u[y++],w=u[y++],S=u[y++],M=u[y++];y+=1;var I=!!(1-u[y++]);o=Math.cos(S)*b+x,a=Math.sin(S)*w+_,m?(f=o,g=a):c+=is(p,d,o,a,i,r);var T=(i-x)*w/b+x;if(n){if(ns(x,_,w,S,S+M,I,e,T,r))return!0}else c+=hs(x,_,w,S,S+M,I,T,r);p=Math.cos(S+M)*b+x,d=Math.sin(S+M)*w+_;break;case rs.R:if(f=p=u[y++],g=d=u[y++],o=f+u[y++],a=g+u[y++],n){if(Ka(f,g,o,g,e,i,r)||Ka(o,g,o,a,e,i,r)||Ka(o,a,f,a,e,i,r)||Ka(f,a,f,g,e,i,r))return!0}else c+=is(o,g,o,a,i,r),c+=is(f,a,f,g,i,r);break;case rs.Z:if(n){if(Ka(p,d,f,g,e,i,r))return!0}else c+=is(p,d,f,g,i,r);p=f,d=g}}return n||(s=d,l=g,Math.abs(s-l)<1e-4)||(c+=is(p,d,f,g,i,r)||0),0!==c}var ps=k({fill:"#000",stroke:null,strokePercent:1,fillOpacity:1,strokeOpacity:1,lineDashOffset:0,lineWidth:1,lineCap:"butt",miterLimit:10,strokeNoScale:!1,strokeFirst:!1},ua),ds={style:k({fill:!0,stroke:!0,strokePercent:!0,fillOpacity:!0,strokeOpacity:!0,lineDashOffset:!0,lineWidth:!0,miterLimit:!0},ha.style)},fs=Ki.concat(["invisible","culling","z","z2","zlevel","parent"]),gs=function(t){function e(e){return t.call(this,e)||this}var i;return n(e,t),e.prototype.update=function(){var n=this;t.prototype.update.call(this);var i=this.style;if(i.decal){var r=this._decalEl=this._decalEl||new e;r.buildPath===e.prototype.buildPath&&(r.buildPath=function(t){n.buildPath(t,n.shape)}),r.silent=!0;var o=r.style;for(var a in i)o[a]!==i[a]&&(o[a]=i[a]);o.fill=i.fill?i.decal:null,o.decal=null,o.shadowColor=null,i.strokeFirst&&(o.stroke=null);for(var s=0;s<fs.length;++s)r[fs[s]]=this[fs[s]];r.__dirty|=1}else this._decalEl&&(this._decalEl=null)},e.prototype.getDecalElement=function(){return this._decalEl},e.prototype._init=function(e){var n=G(e);this.shape=this.getDefaultShape();var i=this.getDefaultStyle();i&&this.useStyle(i);for(var r=0;r<n.length;r++){var o=n[r],a=e[o];"style"===o?this.style?A(this.style,a):this.useStyle(a):"shape"===o?A(this.shape,a):t.prototype.attrKV.call(this,o,a)}this.style||this.useStyle({})},e.prototype.getDefaultStyle=function(){return null},e.prototype.getDefaultShape=function(){return{}},e.prototype.canBeInsideText=function(){return this.hasFill()},e.prototype.getInsideTextFill=function(){var t=this.style.fill;if("none"!==t){if(X(t)){var e=Ln(t,0);return e>.5?ki:e>.2?"#eee":Li}if(t)return Li}return ki},e.prototype.getInsideTextStroke=function(t){var e=this.style.fill;if(X(e)){var n=this.__zr;if(!(!n||!n.isDarkMode())===Ln(t,0)<.4)return e}},e.prototype.buildPath=function(t,e,n){},e.prototype.pathUpdated=function(){this.__dirty&=-5},e.prototype.getUpdatedPathProxy=function(t){return!this.path&&this.createPathProxy(),this.path.beginPath(),this.buildPath(this.path,this.shape,t),this.path},e.prototype.createPathProxy=function(){this.path=new qa(!1)},e.prototype.hasStroke=function(){var t=this.style,e=t.stroke;return!(null==e||"none"===e||!(t.lineWidth>0))},e.prototype.hasFill=function(){var t=this.style.fill;return null!=t&&"none"!==t},e.prototype.getBoundingRect=function(){var t=this._rect,e=this.style,n=!t;if(n){var i=!1;this.path||(i=!0,this.createPathProxy());var r=this.path;(i||4&this.__dirty)&&(r.beginPath(),this.buildPath(r,this.shape,!1),this.pathUpdated()),t=r.getBoundingRect()}if(this._rect=t,this.hasStroke()&&this.path&&this.path.len()>0){var o=this._rectStroke||(this._rectStroke=t.clone());if(this.__dirty||n){o.copy(t);var a=e.strokeNoScale?this.getLineScale():1,s=e.lineWidth;if(!this.hasFill()){var l=this.strokeContainThreshold;s=Math.max(s,null==l?4:l)}a>1e-10&&(o.width+=s/a,o.height+=s/a,o.x-=s/a/2,o.y-=s/a/2)}return o}return t},e.prototype.contain=function(t,e){var n=this.transformCoordToLocal(t,e),i=this.getBoundingRect(),r=this.style;if(t=n[0],e=n[1],i.contain(t,e)){var o=this.path;if(this.hasStroke()){var a=r.lineWidth,s=r.strokeNoScale?this.getLineScale():1;if(s>1e-10&&(this.hasFill()||(a=Math.max(a,this.strokeContainThreshold)),function(t,e,n,i){return cs(t,e,!0,n,i)}(o,a/s,t,e)))return!0}if(this.hasFill())return function(t,e,n){return cs(t,0,!1,e,n)}(o,t,e)}return!1},e.prototype.dirtyShape=function(){this.__dirty|=4,this._rect&&(this._rect=null),this._decalEl&&this._decalEl.dirtyShape(),this.markRedraw()},e.prototype.dirty=function(){this.dirtyStyle(),this.dirtyShape()},e.prototype.animateShape=function(t){return this.animate("shape",t)},e.prototype.updateDuringAnimation=function(t){"style"===t?this.dirtyStyle():"shape"===t?this.dirtyShape():this.markRedraw()},e.prototype.attrKV=function(e,n){"shape"===e?this.setShape(n):t.prototype.attrKV.call(this,e,n)},e.prototype.setShape=function(t,e){var n=this.shape;return n||(n=this.shape={}),"string"==typeof t?n[t]=e:A(n,t),this.dirtyShape(),this},e.prototype.shapeChanged=function(){return!!(4&this.__dirty)},e.prototype.createStyle=function(t){return yt(ps,t)},e.prototype._innerSaveToNormal=function(e){t.prototype._innerSaveToNormal.call(this,e);var n=this._normalState;e.shape&&!n.shape&&(n.shape=A({},this.shape))},e.prototype._applyStateObj=function(e,n,i,r,o,a){t.prototype._applyStateObj.call(this,e,n,i,r,o,a);var s,l=!(n&&r);if(n&&n.shape?o?r?s=n.shape:(s=A({},i.shape),A(s,n.shape)):(s=A({},r?this.shape:i.shape),A(s,n.shape)):l&&(s=i.shape),s)if(o){this.shape=A({},this.shape);for(var u={},h=G(s),c=0;c<h.length;c++){var p=h[c];"object"==typeof s[p]?this.shape[p]=s[p]:u[p]=s[p]}this._transitionState(e,{shape:u},a)}else this.shape=s,this.dirtyShape()},e.prototype._mergeStates=function(e){for(var n,i=t.prototype._mergeStates.call(this,e),r=0;r<e.length;r++){var o=e[r];o.shape&&(n=n||{},this._mergeStyle(n,o.shape))}return n&&(i.shape=n),i},e.prototype.getAnimationStyleProps=function(){return ds},e.prototype.isZeroArea=function(){return!1},e.extend=function(t){var i=function(e){function i(n){var i=e.call(this,n)||this;return t.init&&t.init.call(i,n),i}return n(i,e),i.prototype.getDefaultStyle=function(){return T(t.style)},i.prototype.getDefaultShape=function(){return T(t.shape)},i}(e);for(var r in t)"function"==typeof t[r]&&(i.prototype[r]=t[r]);return i},e.initDefaultProps=((i=e.prototype).type="path",i.strokeContainThreshold=5,i.segmentIgnoreThreshold=0,i.subPixelOptimize=!1,i.autoBatch=!1,void(i.__dirty=7)),e}(da),ys=k({strokeFirst:!0,font:a,x:0,y:0,textAlign:"left",textBaseline:"top",miterLimit:2},ps),vs=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.hasStroke=function(){var t=this.style,e=t.stroke;return null!=e&&"none"!==e&&t.lineWidth>0},e.prototype.hasFill=function(){var t=this.style.fill;return null!=t&&"none"!==t},e.prototype.createStyle=function(t){return yt(ys,t)},e.prototype.setBoundingRect=function(t){this._rect=t},e.prototype.getBoundingRect=function(){var t=this.style;if(!this._rect){var e=t.text;null!=e?e+="":e="";var n=cr(e,t.font,t.textAlign,t.textBaseline);if(n.x+=t.x||0,n.y+=t.y||0,this.hasStroke()){var i=t.lineWidth;n.x-=i/2,n.y-=i/2,n.width+=i,n.height+=i}this._rect=n}return this._rect},e.initDefaultProps=void(e.prototype.dirtyRectTolerance=10),e}(da);vs.prototype.type="tspan";var ms=k({x:0,y:0},ua),xs={style:k({x:!0,y:!0,width:!0,height:!0,sx:!0,sy:!0,sWidth:!0,sHeight:!0},ha.style)};var _s=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.createStyle=function(t){return yt(ms,t)},e.prototype._getSize=function(t){var e=this.style,n=e[t];if(null!=n)return n;var i,r=(i=e.image)&&"string"!=typeof i&&i.width&&i.height?e.image:this.__image;if(!r)return 0;var o="width"===t?"height":"width",a=e[o];return null==a?r[t]:r[t]/r[o]*a},e.prototype.getWidth=function(){return this._getSize("width")},e.prototype.getHeight=function(){return this._getSize("height")},e.prototype.getAnimationStyleProps=function(){return xs},e.prototype.getBoundingRect=function(){var t=this.style;return this._rect||(this._rect=new sr(t.x||0,t.y||0,this.getWidth(),this.getHeight())),this._rect},e}(da);_s.prototype.type="image";var bs=Math.round;function ws(t,e,n){if(e){var i=e.x1,r=e.x2,o=e.y1,a=e.y2;t.x1=i,t.x2=r,t.y1=o,t.y2=a;var s=n&&n.lineWidth;return s?(bs(2*i)===bs(2*r)&&(t.x1=t.x2=Ms(i,s,!0)),bs(2*o)===bs(2*a)&&(t.y1=t.y2=Ms(o,s,!0)),t):t}}function Ss(t,e,n){if(e){var i=e.x,r=e.y,o=e.width,a=e.height;t.x=i,t.y=r,t.width=o,t.height=a;var s=n&&n.lineWidth;return s?(t.x=Ms(i,s,!0),t.y=Ms(r,s,!0),t.width=Math.max(Ms(i+o,s,!1)-t.x,0===o?0:1),t.height=Math.max(Ms(r+a,s,!1)-t.y,0===a?0:1),t):t}}function Ms(t,e,n){if(!e)return t;var i=bs(2*t);return(i+bs(e))%2==0?i/2:(i+(n?1:-1))/2}var Is=function(){this.x=0,this.y=0,this.width=0,this.height=0},Ts={},Cs=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new Is},e.prototype.buildPath=function(t,e){var n,i,r,o;if(this.subPixelOptimize){var a=Ss(Ts,e,this.style);n=a.x,i=a.y,r=a.width,o=a.height,a.r=e.r,e=a}else n=e.x,i=e.y,r=e.width,o=e.height;e.r?function(t,e){var n,i,r,o,a,s=e.x,l=e.y,u=e.width,h=e.height,c=e.r;u<0&&(s+=u,u=-u),h<0&&(l+=h,h=-h),"number"==typeof c?n=i=r=o=c:c instanceof Array?1===c.length?n=i=r=o=c[0]:2===c.length?(n=r=c[0],i=o=c[1]):3===c.length?(n=c[0],i=o=c[1],r=c[2]):(n=c[0],i=c[1],r=c[2],o=c[3]):n=i=r=o=0,n+i>u&&(n*=u/(a=n+i),i*=u/a),r+o>u&&(r*=u/(a=r+o),o*=u/a),i+r>h&&(i*=h/(a=i+r),r*=h/a),n+o>h&&(n*=h/(a=n+o),o*=h/a),t.moveTo(s+n,l),t.lineTo(s+u-i,l),0!==i&&t.arc(s+u-i,l+i,i,-Math.PI/2,0),t.lineTo(s+u,l+h-r),0!==r&&t.arc(s+u-r,l+h-r,r,0,Math.PI/2),t.lineTo(s+o,l+h),0!==o&&t.arc(s+o,l+h-o,o,Math.PI/2,Math.PI),t.lineTo(s,l+n),0!==n&&t.arc(s+n,l+n,n,Math.PI,1.5*Math.PI)}(t,e):t.rect(n,i,r,o)},e.prototype.isZeroArea=function(){return!this.shape.width||!this.shape.height},e}(gs);Cs.prototype.type="rect";var Ds={fill:"#000"},As={style:k({fill:!0,stroke:!0,fillOpacity:!0,strokeOpacity:!0,lineWidth:!0,fontSize:!0,lineHeight:!0,width:!0,height:!0,textShadowColor:!0,textShadowBlur:!0,textShadowOffsetX:!0,textShadowOffsetY:!0,backgroundColor:!0,padding:!0,borderColor:!0,borderWidth:!0,borderRadius:!0},ha.style)},ks=function(t){function e(e){var n=t.call(this)||this;return n.type="text",n._children=[],n._defaultStyle=Ds,n.attr(e),n}return n(e,t),e.prototype.childrenRef=function(){return this._children},e.prototype.update=function(){t.prototype.update.call(this),this.styleChanged()&&this._updateSubTexts();for(var e=0;e<this._children.length;e++){var n=this._children[e];n.zlevel=this.zlevel,n.z=this.z,n.z2=this.z2,n.culling=this.culling,n.cursor=this.cursor,n.invisible=this.invisible}},e.prototype.updateTransform=function(){var e=this.innerTransformable;e?(e.updateTransform(),e.transform&&(this.transform=e.transform)):t.prototype.updateTransform.call(this)},e.prototype.getLocalTransform=function(e){var n=this.innerTransformable;return n?n.getLocalTransform(e):t.prototype.getLocalTransform.call(this,e)},e.prototype.getComputedTransform=function(){return this.__hostTarget&&(this.__hostTarget.getComputedTransform(),this.__hostTarget.updateInnerText(!0)),t.prototype.getComputedTransform.call(this)},e.prototype._updateSubTexts=function(){var t;this._childCursor=0,zs(t=this.style),E(t.rich,zs),this.style.rich?this._updateRichTexts():this._updatePlainTexts(),this._children.length=this._childCursor,this.styleUpdated()},e.prototype.addSelfToZr=function(e){t.prototype.addSelfToZr.call(this,e);for(var n=0;n<this._children.length;n++)this._children[n].__zr=e},e.prototype.removeSelfFromZr=function(e){t.prototype.removeSelfFromZr.call(this,e);for(var n=0;n<this._children.length;n++)this._children[n].__zr=null},e.prototype.getBoundingRect=function(){if(this.styleChanged()&&this._updateSubTexts(),!this._rect){for(var t=new sr(0,0,0,0),e=this._children,n=[],i=null,r=0;r<e.length;r++){var o=e[r],a=o.getBoundingRect(),s=o.getLocalTransform(n);s?(t.copy(a),t.applyTransform(s),(i=i||t.clone()).union(t)):(i=i||a.clone()).union(a)}this._rect=i||t}return this._rect},e.prototype.setDefaultTextStyle=function(t){this._defaultStyle=t||Ds},e.prototype.setTextContent=function(t){0},e.prototype._mergeStyle=function(t,e){if(!e)return t;var n=e.rich,i=t.rich||n&&{};return A(t,e),n&&i?(this._mergeRich(i,n),t.rich=i):i&&(t.rich=i),t},e.prototype._mergeRich=function(t,e){for(var n=G(e),i=0;i<n.length;i++){var r=n[i];t[r]=t[r]||{},A(t[r],e[r])}},e.prototype.getAnimationStyleProps=function(){return As},e.prototype._getOrCreateChild=function(t){var e=this._children[this._childCursor];return e&&e instanceof t||(e=new t),this._children[this._childCursor++]=e,e.__zr=this.__zr,e.parent=this,e},e.prototype._updatePlainTexts=function(){var t=this.style,e=t.font||a,n=t.padding,i=function(t,e){null!=t&&(t+="");var n,i=e.overflow,r=e.padding,o=e.font,a="truncate"===i,s=fr(o),l=rt(e.lineHeight,s),u=!!e.backgroundColor,h="truncate"===e.lineOverflow,c=e.width,p=(n=null==c||"break"!==i&&"breakAll"!==i?t?t.split("\n"):[]:t?sa(t,e.font,c,"breakAll"===i,0).lines:[]).length*l,d=rt(e.height,p);if(p>d&&h){var f=Math.floor(d/l);n=n.slice(0,f)}if(t&&a&&null!=c)for(var g=Jo(c,o,e.ellipsis,{minChar:e.truncateMinChar,placeholder:e.placeholder}),y=0;y<n.length;y++)n[y]=Qo(n[y],g);var v=d,m=0;for(y=0;y<n.length;y++)m=Math.max(ur(n[y],o),m);null==c&&(c=m);var x=m;return r&&(v+=r[0]+r[2],x+=r[1]+r[3],c+=r[1]+r[3]),u&&(x=c),{lines:n,height:d,outerWidth:x,outerHeight:v,lineHeight:l,calculatedLineHeight:s,contentWidth:m,contentHeight:p,width:c}}(Gs(t),t),r=Ws(t),o=!!t.backgroundColor,s=i.outerHeight,l=i.outerWidth,u=i.contentWidth,h=i.lines,c=i.lineHeight,p=this._defaultStyle,d=t.x||0,f=t.y||0,g=t.align||p.align||"left",y=t.verticalAlign||p.verticalAlign||"top",v=d,m=dr(f,i.contentHeight,y);if(r||n){var x=pr(d,l,g),_=dr(f,s,y);r&&this._renderBackground(t,t,x,_,l,s)}m+=c/2,n&&(v=Fs(d,g,n),"top"===y?m+=n[0]:"bottom"===y&&(m-=n[2]));for(var b=0,w=!1,S=(Bs("fill"in t?t.fill:(w=!0,p.fill))),M=(Vs("stroke"in t?t.stroke:o||p.autoStroke&&!w?null:(b=2,p.stroke))),I=t.textShadowBlur>0,T=null!=t.width&&("truncate"===t.overflow||"break"===t.overflow||"breakAll"===t.overflow),C=i.calculatedLineHeight,D=0;D<h.length;D++){var A=this._getOrCreateChild(vs),k=A.createStyle();A.useStyle(k),k.text=h[D],k.x=v,k.y=m,g&&(k.textAlign=g),k.textBaseline="middle",k.opacity=t.opacity,k.strokeFirst=!0,I&&(k.shadowBlur=t.textShadowBlur||0,k.shadowColor=t.textShadowColor||"transparent",k.shadowOffsetX=t.textShadowOffsetX||0,k.shadowOffsetY=t.textShadowOffsetY||0),k.stroke=M,k.fill=S,M&&(k.lineWidth=t.lineWidth||b,k.lineDash=t.lineDash,k.lineDashOffset=t.lineDashOffset||0),k.font=e,Ns(k,t),m+=c,T&&A.setBoundingRect(new sr(pr(k.x,t.width,k.textAlign),dr(k.y,C,k.textBaseline),u,C))}},e.prototype._updateRichTexts=function(){var t=this.style,e=function(t,e){var n=new ia;if(null!=t&&(t+=""),!t)return n;for(var i,r=e.width,o=e.height,a=e.overflow,s="break"!==a&&"breakAll"!==a||null==r?null:{width:r,accumWidth:0,breakAll:"breakAll"===a},l=Ko.lastIndex=0;null!=(i=Ko.exec(t));){var u=i.index;u>l&&ra(n,t.substring(l,u),e,s),ra(n,i[2],e,s,i[1]),l=Ko.lastIndex}l<t.length&&ra(n,t.substring(l,t.length),e,s);var h=[],c=0,p=0,d=e.padding,f="truncate"===a,g="truncate"===e.lineOverflow;function y(t,e,n){t.width=e,t.lineHeight=n,c+=n,p=Math.max(p,e)}t:for(var v=0;v<n.lines.length;v++){for(var m=n.lines[v],x=0,_=0,b=0;b<m.tokens.length;b++){var w=(P=m.tokens[b]).styleName&&e.rich[P.styleName]||{},S=P.textPadding=w.padding,M=S?S[1]+S[3]:0,I=P.font=w.font||e.font;P.contentHeight=fr(I);var T=rt(w.height,P.contentHeight);if(P.innerHeight=T,S&&(T+=S[0]+S[2]),P.height=T,P.lineHeight=ot(w.lineHeight,e.lineHeight,T),P.align=w&&w.align||e.align,P.verticalAlign=w&&w.verticalAlign||"middle",g&&null!=o&&c+P.lineHeight>o){b>0?(m.tokens=m.tokens.slice(0,b),y(m,_,x),n.lines=n.lines.slice(0,v+1)):n.lines=n.lines.slice(0,v);break t}var C=w.width,D=null==C||"auto"===C;if("string"==typeof C&&"%"===C.charAt(C.length-1))P.percentWidth=C,h.push(P),P.contentWidth=ur(P.text,I);else{if(D){var A=w.backgroundColor,k=A&&A.image;k&&qo(k=Xo(k))&&(P.width=Math.max(P.width,k.width*T/k.height))}var L=f&&null!=r?r-_:null;null!=L&&L<P.width?!D||L<M?(P.text="",P.width=P.contentWidth=0):(P.text=$o(P.text,L-M,I,e.ellipsis,{minChar:e.truncateMinChar}),P.width=P.contentWidth=ur(P.text,I)):P.contentWidth=ur(P.text,I)}P.width+=M,_+=P.width,w&&(x=Math.max(x,P.lineHeight))}y(m,_,x)}for(n.outerWidth=n.width=rt(r,p),n.outerHeight=n.height=rt(o,c),n.contentHeight=c,n.contentWidth=p,d&&(n.outerWidth+=d[1]+d[3],n.outerHeight+=d[0]+d[2]),v=0;v<h.length;v++){var P,O=(P=h[v]).percentWidth;P.width=parseInt(O,10)/100*n.width}return n}(Gs(t),t),n=e.width,i=e.outerWidth,r=e.outerHeight,o=t.padding,a=t.x||0,s=t.y||0,l=this._defaultStyle,u=t.align||l.align,h=t.verticalAlign||l.verticalAlign,c=pr(a,i,u),p=dr(s,r,h),d=c,f=p;o&&(d+=o[3],f+=o[0]);var g=d+n;Ws(t)&&this._renderBackground(t,t,c,p,i,r);for(var y=!!t.backgroundColor,v=0;v<e.lines.length;v++){for(var m=e.lines[v],x=m.tokens,_=x.length,b=m.lineHeight,w=m.width,S=0,M=d,I=g,T=_-1,C=void 0;S<_&&(!(C=x[S]).align||"left"===C.align);)this._placeToken(C,t,b,f,M,"left",y),w-=C.width,M+=C.width,S++;for(;T>=0&&"right"===(C=x[T]).align;)this._placeToken(C,t,b,f,I,"right",y),w-=C.width,I-=C.width,T--;for(M+=(n-(M-d)-(g-I)-w)/2;S<=T;)C=x[S],this._placeToken(C,t,b,f,M+C.width/2,"center",y),M+=C.width,S++;f+=b}},e.prototype._placeToken=function(t,e,n,i,r,o,s){var l=e.rich[t.styleName]||{};l.text=t.text;var u=t.verticalAlign,h=i+n/2;"top"===u?h=i+t.height/2:"bottom"===u&&(h=i+n-t.height/2),!t.isLineHolder&&Ws(l)&&this._renderBackground(l,e,"right"===o?r-t.width:"center"===o?r-t.width/2:r,h-t.height/2,t.width,t.height);var c=!!l.backgroundColor,p=t.textPadding;p&&(r=Fs(r,o,p),h-=t.height/2-p[0]-t.innerHeight/2);var d=this._getOrCreateChild(vs),f=d.createStyle();d.useStyle(f);var g=this._defaultStyle,y=!1,v=0,m=Bs("fill"in l?l.fill:"fill"in e?e.fill:(y=!0,g.fill)),x=Vs("stroke"in l?l.stroke:"stroke"in e?e.stroke:c||s||g.autoStroke&&!y?null:(v=2,g.stroke)),_=l.textShadowBlur>0||e.textShadowBlur>0;f.text=t.text,f.x=r,f.y=h,_&&(f.shadowBlur=l.textShadowBlur||e.textShadowBlur||0,f.shadowColor=l.textShadowColor||e.textShadowColor||"transparent",f.shadowOffsetX=l.textShadowOffsetX||e.textShadowOffsetX||0,f.shadowOffsetY=l.textShadowOffsetY||e.textShadowOffsetY||0),f.textAlign=o,f.textBaseline="middle",f.font=t.font||a,f.opacity=ot(l.opacity,e.opacity,1),Ns(f,l),x&&(f.lineWidth=ot(l.lineWidth,e.lineWidth,v),f.lineDash=rt(l.lineDash,e.lineDash),f.lineDashOffset=e.lineDashOffset||0,f.stroke=x),m&&(f.fill=m);var b=t.contentWidth,w=t.contentHeight;d.setBoundingRect(new sr(pr(f.x,b,f.textAlign),dr(f.y,w,f.textBaseline),b,w))},e.prototype._renderBackground=function(t,e,n,i,r,o){var a,s,l,u=t.backgroundColor,h=t.borderWidth,c=t.borderColor,p=u&&u.image,d=u&&!p,f=t.borderRadius,g=this;if(d||t.lineHeight||h&&c){(a=this._getOrCreateChild(Cs)).useStyle(a.createStyle()),a.style.fill=null;var y=a.shape;y.x=n,y.y=i,y.width=r,y.height=o,y.r=f,a.dirtyShape()}if(d)(l=a.style).fill=u||null,l.fillOpacity=rt(t.fillOpacity,1);else if(p){(s=this._getOrCreateChild(_s)).onload=function(){g.dirtyStyle()};var v=s.style;v.image=u.image,v.x=n,v.y=i,v.width=r,v.height=o}h&&c&&((l=a.style).lineWidth=h,l.stroke=c,l.strokeOpacity=rt(t.strokeOpacity,1),l.lineDash=t.borderDash,l.lineDashOffset=t.borderDashOffset||0,a.strokeContainThreshold=0,a.hasFill()&&a.hasStroke()&&(l.strokeFirst=!0,l.lineWidth*=2));var m=(a||s).style;m.shadowBlur=t.shadowBlur||0,m.shadowColor=t.shadowColor||"transparent",m.shadowOffsetX=t.shadowOffsetX||0,m.shadowOffsetY=t.shadowOffsetY||0,m.opacity=ot(t.opacity,e.opacity,1)},e.makeFont=function(t){var e="";return Es(t)&&(e=[t.fontStyle,t.fontWeight,Rs(t.fontSize),t.fontFamily||"sans-serif"].join(" ")),e&&ut(e)||t.textFont||t.font},e}(da),Ls={left:!0,right:1,center:1},Ps={top:1,bottom:1,middle:1},Os=["fontStyle","fontWeight","fontSize","fontFamily"];function Rs(t){return"string"!=typeof t||-1===t.indexOf("px")&&-1===t.indexOf("rem")&&-1===t.indexOf("em")?isNaN(+t)?"12px":t+"px":t}function Ns(t,e){for(var n=0;n<Os.length;n++){var i=Os[n],r=e[i];null!=r&&(t[i]=r)}}function Es(t){return null!=t.fontSize||t.fontFamily||t.fontWeight}function zs(t){if(t){t.font=ks.makeFont(t);var e=t.align;"middle"===e&&(e="center"),t.align=null==e||Ls[e]?e:"left";var n=t.verticalAlign;"center"===n&&(n="middle"),t.verticalAlign=null==n||Ps[n]?n:"top",t.padding&&(t.padding=st(t.padding))}}function Vs(t,e){return null==t||e<=0||"transparent"===t||"none"===t?null:t.image||t.colorStops?"#000":t}function Bs(t){return null==t||"none"===t?null:t.image||t.colorStops?"#000":t}function Fs(t,e,n){return"right"===e?t-n[1]:"center"===e?t+n[3]/2-n[1]/2:t+n[3]}function Gs(t){var e=t.text;return null!=e&&(e+=""),e}function Ws(t){return!!(t.backgroundColor||t.lineHeight||t.borderWidth&&t.borderColor)}var Hs=So(),Ys=function(t,e,n,i){if(i){var r=Hs(i);r.dataIndex=n,r.dataType=e,r.seriesIndex=t,"group"===i.type&&i.traverse((function(i){var r=Hs(i);r.seriesIndex=t,r.dataIndex=n,r.dataType=e}))}},Us=1,Xs={},Zs=So(),js=So(),qs=["emphasis","blur","select"],Ks=["normal","emphasis","blur","select"],$s=10,Js="highlight",Qs="downplay",tl="select",el="unselect",nl="toggleSelect";function il(t){return null!=t&&"none"!==t}var rl=new ln(100);function ol(t){if(X(t)){var e=rl.get(t);return e||(e=Sn(t,-.1),rl.put(t,e)),e}if(Q(t)){var n=A({},t);return n.colorStops=z(t.colorStops,(function(t){return{offset:t.offset,color:Sn(t.color,-.1)}})),n}return t}function al(t,e,n){t.onHoverStateChange&&(t.hoverState||0)!==n&&t.onHoverStateChange(e),t.hoverState=n}function sl(t){al(t,"emphasis",2)}function ll(t){2===t.hoverState&&al(t,"normal",0)}function ul(t){al(t,"blur",1)}function hl(t){1===t.hoverState&&al(t,"normal",0)}function cl(t){t.selected=!0}function pl(t){t.selected=!1}function dl(t,e,n){e(t,n)}function fl(t,e,n){dl(t,e,n),t.isGroup&&t.traverse((function(t){dl(t,e,n)}))}function gl(t,e){switch(e){case"emphasis":t.hoverState=2;break;case"normal":t.hoverState=0;break;case"blur":t.hoverState=1;break;case"select":t.selected=!0}}function yl(t,e){var n=this.states[t];if(this.style){if("emphasis"===t)return function(t,e,n,i){var r=n&&P(n,"select")>=0,o=!1;if(t instanceof gs){var a=Zs(t),s=r&&a.selectFill||a.normalFill,l=r&&a.selectStroke||a.normalStroke;if(il(s)||il(l)){var u=(i=i||{}).style||{};"inherit"===u.fill?(o=!0,i=A({},i),(u=A({},u)).fill=s):!il(u.fill)&&il(s)?(o=!0,i=A({},i),(u=A({},u)).fill=ol(s)):!il(u.stroke)&&il(l)&&(o||(i=A({},i),u=A({},u)),u.stroke=ol(l)),i.style=u}}if(i&&null==i.z2){o||(i=A({},i));var h=t.z2EmphasisLift;i.z2=t.z2+(null!=h?h:$s)}return i}(this,0,e,n);if("blur"===t)return function(t,e,n){var i=P(t.currentStates,e)>=0,r=t.style.opacity,o=i?null:function(t,e,n,i){for(var r=t.style,o={},a=0;a<e.length;a++){var s=e[a],l=r[s];o[s]=null==l?i&&i[s]:l}for(a=0;a<t.animators.length;a++){var u=t.animators[a];u.__fromStateTransition&&u.__fromStateTransition.indexOf(n)<0&&"style"===u.targetName&&u.saveTo(o,e)}return o}(t,["opacity"],e,{opacity:1}),a=(n=n||{}).style||{};return null==a.opacity&&(n=A({},n),a=A({opacity:i?r:.1*o.opacity},a),n.style=a),n}(this,t,n);if("select"===t)return function(t,e,n){if(n&&null==n.z2){n=A({},n);var i=t.z2SelectLift;n.z2=t.z2+(null!=i?i:9)}return n}(this,0,n)}return n}function vl(t){t.stateProxy=yl;var e=t.getTextContent(),n=t.getTextGuideLine();e&&(e.stateProxy=yl),n&&(n.stateProxy=yl)}function ml(t,e){!Tl(t,e)&&!t.__highByOuter&&fl(t,sl)}function xl(t,e){!Tl(t,e)&&!t.__highByOuter&&fl(t,ll)}function _l(t,e){t.__highByOuter|=1<<(e||0),fl(t,sl)}function bl(t,e){!(t.__highByOuter&=~(1<<(e||0)))&&fl(t,ll)}function wl(t){fl(t,ul)}function Sl(t){fl(t,hl)}function Ml(t){fl(t,cl)}function Il(t){fl(t,pl)}function Tl(t,e){return t.__highDownSilentOnTouch&&e.zrByTouch}function Cl(t){var e=t.getModel(),n=[],i=[];e.eachComponent((function(e,r){var o=js(r),a="series"===e,s=a?t.getViewOfSeriesModel(r):t.getViewOfComponentModel(r);!a&&i.push(s),o.isBlured&&(s.group.traverse((function(t){hl(t)})),a&&n.push(r)),o.isBlured=!1})),E(i,(function(t){t&&t.toggleBlurSeries&&t.toggleBlurSeries(n,!1,e)}))}function Dl(t,e,n,i){var r=i.getModel();function o(t,e){for(var n=0;n<e.length;n++){var i=t.getItemGraphicEl(e[n]);i&&Sl(i)}}if(n=n||"coordinateSystem",null!=t&&e&&"none"!==e){var a=r.getSeriesByIndex(t),s=a.coordinateSystem;s&&s.master&&(s=s.master);var l=[];r.eachSeries((function(t){var r=a===t,u=t.coordinateSystem;if(u&&u.master&&(u=u.master),!("series"===n&&!r||"coordinateSystem"===n&&!(u&&s?u===s:r)||"series"===e&&r)){if(i.getViewOfSeriesModel(t).group.traverse((function(t){ul(t)})),N(e))o(t.getData(),e);else if(q(e))for(var h=G(e),c=0;c<h.length;c++)o(t.getData(h[c]),e[h[c]]);l.push(t),js(t).isBlured=!0}})),r.eachComponent((function(t,e){if("series"!==t){var n=i.getViewOfComponentModel(e);n&&n.toggleBlurSeries&&n.toggleBlurSeries(l,!0,r)}}))}}function Al(t,e,n){if(null!=t&&null!=e){var i=n.getModel().getComponent(t,e);if(i){js(i).isBlured=!0;var r=n.getViewOfComponentModel(i);r&&r.focusBlurEnabled&&r.group.traverse((function(t){ul(t)}))}}}function kl(t,e,n,i){var r={focusSelf:!1,dispatchers:null};if(null==t||"series"===t||null==e||null==n)return r;var o=i.getModel().getComponent(t,e);if(!o)return r;var a=i.getViewOfComponentModel(o);if(!a||!a.findHighDownDispatchers)return r;for(var s,l=a.findHighDownDispatchers(n),u=0;u<l.length;u++)if("self"===Hs(l[u]).focus){s=!0;break}return{focusSelf:s,dispatchers:l}}function Ll(t){E(t.getAllData(),(function(e){var n=e.data,i=e.type;n.eachItemGraphicEl((function(e,n){t.isSelected(n,i)?Ml(e):Il(e)}))}))}function Pl(t){var e=[];return t.eachSeries((function(t){E(t.getAllData(),(function(n){n.data;var i=n.type,r=t.getSelectedDataIndices();if(r.length>0){var o={dataIndex:r,seriesIndex:t.seriesIndex};null!=i&&(o.dataType=i),e.push(o)}}))})),e}function Ol(t,e,n){Bl(t,!0),fl(t,vl),Nl(t,e,n)}function Rl(t,e,n,i){i?function(t){Bl(t,!1)}(t):Ol(t,e,n)}function Nl(t,e,n){var i=Hs(t);null!=e?(i.focus=e,i.blurScope=n):i.focus&&(i.focus=null)}var El=["emphasis","blur","select"],zl={itemStyle:"getItemStyle",lineStyle:"getLineStyle",areaStyle:"getAreaStyle"};function Vl(t,e,n,i){n=n||"itemStyle";for(var r=0;r<El.length;r++){var o=El[r],a=e.getModel([o,n]);t.ensureState(o).style=i?i(a):a[zl[n]]()}}function Bl(t,e){var n=!1===e,i=t;t.highDownSilentOnTouch&&(i.__highDownSilentOnTouch=t.highDownSilentOnTouch),n&&!i.__highDownDispatcher||(i.__highByOuter=i.__highByOuter||0,i.__highDownDispatcher=!n)}function Fl(t){return!(!t||!t.__highDownDispatcher)}function Gl(t){var e=t.type;return e===tl||e===el||e===nl}function Wl(t){var e=t.type;return e===Js||e===Qs}var Hl=qa.CMD,Yl=[[],[],[]],Ul=Math.sqrt,Xl=Math.atan2;function Zl(t,e){if(e){var n,i,r,o,a,s,l=t.data,u=t.len(),h=Hl.M,c=Hl.C,p=Hl.L,d=Hl.R,f=Hl.A,g=Hl.Q;for(r=0,o=0;r<u;){switch(n=l[r++],o=r,i=0,n){case h:case p:i=1;break;case c:i=3;break;case g:i=2;break;case f:var y=e[4],v=e[5],m=Ul(e[0]*e[0]+e[1]*e[1]),x=Ul(e[2]*e[2]+e[3]*e[3]),_=Xl(-e[1]/x,e[0]/m);l[r]*=m,l[r++]+=y,l[r]*=x,l[r++]+=v,l[r++]*=m,l[r++]*=x,l[r++]+=_,l[r++]+=_,o=r+=2;break;case d:s[0]=l[r++],s[1]=l[r++],Ft(s,s,e),l[o++]=s[0],l[o++]=s[1],s[0]+=l[r++],s[1]+=l[r++],Ft(s,s,e),l[o++]=s[0],l[o++]=s[1]}for(a=0;a<i;a++){var b=Yl[a];b[0]=l[r++],b[1]=l[r++],Ft(b,b,e),l[o++]=b[0],l[o++]=b[1]}}t.increaseVersion()}}var jl=Math.sqrt,ql=Math.sin,Kl=Math.cos,$l=Math.PI;function Jl(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])}function Ql(t,e){return(t[0]*e[0]+t[1]*e[1])/(Jl(t)*Jl(e))}function tu(t,e){return(t[0]*e[1]<t[1]*e[0]?-1:1)*Math.acos(Ql(t,e))}function eu(t,e,n,i,r,o,a,s,l,u,h){var c=l*($l/180),p=Kl(c)*(t-n)/2+ql(c)*(e-i)/2,d=-1*ql(c)*(t-n)/2+Kl(c)*(e-i)/2,f=p*p/(a*a)+d*d/(s*s);f>1&&(a*=jl(f),s*=jl(f));var g=(r===o?-1:1)*jl((a*a*(s*s)-a*a*(d*d)-s*s*(p*p))/(a*a*(d*d)+s*s*(p*p)))||0,y=g*a*d/s,v=g*-s*p/a,m=(t+n)/2+Kl(c)*y-ql(c)*v,x=(e+i)/2+ql(c)*y+Kl(c)*v,_=tu([1,0],[(p-y)/a,(d-v)/s]),b=[(p-y)/a,(d-v)/s],w=[(-1*p-y)/a,(-1*d-v)/s],S=tu(b,w);if(Ql(b,w)<=-1&&(S=$l),Ql(b,w)>=1&&(S=0),S<0){var M=Math.round(S/$l*1e6)/1e6;S=2*$l+M%2*$l}h.addData(u,m,x,a,s,_,S,c,o)}var nu=/([mlvhzcqtsa])([^mlvhzcqtsa]*)/gi,iu=/-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;var ru=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.applyTransform=function(t){},e}(gs);function ou(t){return null!=t.setData}function au(t,e){var n=function(t){var e=new qa;if(!t)return e;var n,i=0,r=0,o=i,a=r,s=qa.CMD,l=t.match(nu);if(!l)return e;for(var u=0;u<l.length;u++){for(var h=l[u],c=h.charAt(0),p=void 0,d=h.match(iu)||[],f=d.length,g=0;g<f;g++)d[g]=parseFloat(d[g]);for(var y=0;y<f;){var v=void 0,m=void 0,x=void 0,_=void 0,b=void 0,w=void 0,S=void 0,M=i,I=r,T=void 0,C=void 0;switch(c){case"l":i+=d[y++],r+=d[y++],p=s.L,e.addData(p,i,r);break;case"L":i=d[y++],r=d[y++],p=s.L,e.addData(p,i,r);break;case"m":i+=d[y++],r+=d[y++],p=s.M,e.addData(p,i,r),o=i,a=r,c="l";break;case"M":i=d[y++],r=d[y++],p=s.M,e.addData(p,i,r),o=i,a=r,c="L";break;case"h":i+=d[y++],p=s.L,e.addData(p,i,r);break;case"H":i=d[y++],p=s.L,e.addData(p,i,r);break;case"v":r+=d[y++],p=s.L,e.addData(p,i,r);break;case"V":r=d[y++],p=s.L,e.addData(p,i,r);break;case"C":p=s.C,e.addData(p,d[y++],d[y++],d[y++],d[y++],d[y++],d[y++]),i=d[y-2],r=d[y-1];break;case"c":p=s.C,e.addData(p,d[y++]+i,d[y++]+r,d[y++]+i,d[y++]+r,d[y++]+i,d[y++]+r),i+=d[y-2],r+=d[y-1];break;case"S":v=i,m=r,T=e.len(),C=e.data,n===s.C&&(v+=i-C[T-4],m+=r-C[T-3]),p=s.C,M=d[y++],I=d[y++],i=d[y++],r=d[y++],e.addData(p,v,m,M,I,i,r);break;case"s":v=i,m=r,T=e.len(),C=e.data,n===s.C&&(v+=i-C[T-4],m+=r-C[T-3]),p=s.C,M=i+d[y++],I=r+d[y++],i+=d[y++],r+=d[y++],e.addData(p,v,m,M,I,i,r);break;case"Q":M=d[y++],I=d[y++],i=d[y++],r=d[y++],p=s.Q,e.addData(p,M,I,i,r);break;case"q":M=d[y++]+i,I=d[y++]+r,i+=d[y++],r+=d[y++],p=s.Q,e.addData(p,M,I,i,r);break;case"T":v=i,m=r,T=e.len(),C=e.data,n===s.Q&&(v+=i-C[T-4],m+=r-C[T-3]),i=d[y++],r=d[y++],p=s.Q,e.addData(p,v,m,i,r);break;case"t":v=i,m=r,T=e.len(),C=e.data,n===s.Q&&(v+=i-C[T-4],m+=r-C[T-3]),i+=d[y++],r+=d[y++],p=s.Q,e.addData(p,v,m,i,r);break;case"A":x=d[y++],_=d[y++],b=d[y++],w=d[y++],S=d[y++],eu(M=i,I=r,i=d[y++],r=d[y++],w,S,x,_,b,p=s.A,e);break;case"a":x=d[y++],_=d[y++],b=d[y++],w=d[y++],S=d[y++],eu(M=i,I=r,i+=d[y++],r+=d[y++],w,S,x,_,b,p=s.A,e)}}"z"!==c&&"Z"!==c||(p=s.Z,e.addData(p),i=o,r=a),n=p}return e.toStatic(),e}(t),i=A({},e);return i.buildPath=function(t){if(ou(t)){t.setData(n.data),(e=t.getContext())&&t.rebuildPath(e,1)}else{var e=t;n.rebuildPath(e,1)}},i.applyTransform=function(t){Zl(n,t),this.dirtyShape()},i}function su(t,e){return new ru(au(t,e))}function lu(t,e){e=e||{};var n=new gs;return t.shape&&n.setShape(t.shape),n.setStyle(t.style),e.bakeTransform?Zl(n.path,t.getComputedTransform()):e.toLocal?n.setLocalTransform(t.getComputedTransform()):n.copyTransform(t),n.buildPath=t.buildPath,n.applyTransform=n.applyTransform,n.z=t.z,n.z2=t.z2,n.zlevel=t.zlevel,n}var uu=function(){this.cx=0,this.cy=0,this.r=0},hu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new uu},e.prototype.buildPath=function(t,e){t.moveTo(e.cx+e.r,e.cy),t.arc(e.cx,e.cy,e.r,0,2*Math.PI)},e}(gs);hu.prototype.type="circle";var cu=function(){this.cx=0,this.cy=0,this.rx=0,this.ry=0},pu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new cu},e.prototype.buildPath=function(t,e){var n=.5522848,i=e.cx,r=e.cy,o=e.rx,a=e.ry,s=o*n,l=a*n;t.moveTo(i-o,r),t.bezierCurveTo(i-o,r-l,i-s,r-a,i,r-a),t.bezierCurveTo(i+s,r-a,i+o,r-l,i+o,r),t.bezierCurveTo(i+o,r+l,i+s,r+a,i,r+a),t.bezierCurveTo(i-s,r+a,i-o,r+l,i-o,r),t.closePath()},e}(gs);pu.prototype.type="ellipse";var du=Math.PI,fu=2*du,gu=Math.sin,yu=Math.cos,vu=Math.acos,mu=Math.atan2,xu=Math.abs,_u=Math.sqrt,bu=Math.max,wu=Math.min,Su=1e-4;function Mu(t,e,n,i,r,o,a){var s=t-n,l=e-i,u=(a?o:-o)/_u(s*s+l*l),h=u*l,c=-u*s,p=t+h,d=e+c,f=n+h,g=i+c,y=(p+f)/2,v=(d+g)/2,m=f-p,x=g-d,_=m*m+x*x,b=r-o,w=p*g-f*d,S=(x<0?-1:1)*_u(bu(0,b*b*_-w*w)),M=(w*x-m*S)/_,I=(-w*m-x*S)/_,T=(w*x+m*S)/_,C=(-w*m+x*S)/_,D=M-y,A=I-v,k=T-y,L=C-v;return D*D+A*A>k*k+L*L&&(M=T,I=C),{cx:M,cy:I,x0:-h,y0:-c,x1:M*(r/b-1),y1:I*(r/b-1)}}function Iu(t,e){var n,i=bu(e.r,0),r=bu(e.r0||0,0),o=i>0;if(o||r>0){if(o||(i=r,r=0),r>i){var a=i;i=r,r=a}var s=e.startAngle,l=e.endAngle;if(!isNaN(s)&&!isNaN(l)){var u=e.cx,h=e.cy,c=!!e.clockwise,p=xu(l-s),d=p>fu&&p%fu;if(d>Su&&(p=d),i>Su)if(p>fu-Su)t.moveTo(u+i*yu(s),h+i*gu(s)),t.arc(u,h,i,s,l,!c),r>Su&&(t.moveTo(u+r*yu(l),h+r*gu(l)),t.arc(u,h,r,l,s,c));else{var f=void 0,g=void 0,y=void 0,v=void 0,m=void 0,x=void 0,_=void 0,b=void 0,w=void 0,S=void 0,M=void 0,I=void 0,T=void 0,C=void 0,D=void 0,A=void 0,k=i*yu(s),L=i*gu(s),P=r*yu(l),O=r*gu(l),R=p>Su;if(R){var N=e.cornerRadius;N&&(f=(n=function(t){var e;if(Y(t)){var n=t.length;if(!n)return t;e=1===n?[t[0],t[0],0,0]:2===n?[t[0],t[0],t[1],t[1]]:3===n?t.concat(t[2]):t}else e=[t,t,t,t];return e}(N))[0],g=n[1],y=n[2],v=n[3]);var E=xu(i-r)/2;if(m=wu(E,y),x=wu(E,v),_=wu(E,f),b=wu(E,g),M=w=bu(m,x),I=S=bu(_,b),(w>Su||S>Su)&&(T=i*yu(l),C=i*gu(l),D=r*yu(s),A=r*gu(s),p<du)){var z=function(t,e,n,i,r,o,a,s){var l=n-t,u=i-e,h=a-r,c=s-o,p=c*l-h*u;if(!(p*p<Su))return[t+(p=(h*(e-o)-c*(t-r))/p)*l,e+p*u]}(k,L,D,A,T,C,P,O);if(z){var V=k-z[0],B=L-z[1],F=T-z[0],G=C-z[1],W=1/gu(vu((V*F+B*G)/(_u(V*V+B*B)*_u(F*F+G*G)))/2),H=_u(z[0]*z[0]+z[1]*z[1]);M=wu(w,(i-H)/(W+1)),I=wu(S,(r-H)/(W-1))}}}if(R)if(M>Su){var U=wu(y,M),X=wu(v,M),Z=Mu(D,A,k,L,i,U,c),j=Mu(T,C,P,O,i,X,c);t.moveTo(u+Z.cx+Z.x0,h+Z.cy+Z.y0),M<w&&U===X?t.arc(u+Z.cx,h+Z.cy,M,mu(Z.y0,Z.x0),mu(j.y0,j.x0),!c):(U>0&&t.arc(u+Z.cx,h+Z.cy,U,mu(Z.y0,Z.x0),mu(Z.y1,Z.x1),!c),t.arc(u,h,i,mu(Z.cy+Z.y1,Z.cx+Z.x1),mu(j.cy+j.y1,j.cx+j.x1),!c),X>0&&t.arc(u+j.cx,h+j.cy,X,mu(j.y1,j.x1),mu(j.y0,j.x0),!c))}else t.moveTo(u+k,h+L),t.arc(u,h,i,s,l,!c);else t.moveTo(u+k,h+L);if(r>Su&&R)if(I>Su){U=wu(f,I),Z=Mu(P,O,T,C,r,-(X=wu(g,I)),c),j=Mu(k,L,D,A,r,-U,c);t.lineTo(u+Z.cx+Z.x0,h+Z.cy+Z.y0),I<S&&U===X?t.arc(u+Z.cx,h+Z.cy,I,mu(Z.y0,Z.x0),mu(j.y0,j.x0),!c):(X>0&&t.arc(u+Z.cx,h+Z.cy,X,mu(Z.y0,Z.x0),mu(Z.y1,Z.x1),!c),t.arc(u,h,r,mu(Z.cy+Z.y1,Z.cx+Z.x1),mu(j.cy+j.y1,j.cx+j.x1),c),U>0&&t.arc(u+j.cx,h+j.cy,U,mu(j.y1,j.x1),mu(j.y0,j.x0),!c))}else t.lineTo(u+P,h+O),t.arc(u,h,r,l,s,c);else t.lineTo(u+P,h+O)}else t.moveTo(u,h);t.closePath()}}}var Tu=function(){this.cx=0,this.cy=0,this.r0=0,this.r=0,this.startAngle=0,this.endAngle=2*Math.PI,this.clockwise=!0,this.cornerRadius=0},Cu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new Tu},e.prototype.buildPath=function(t,e){Iu(t,e)},e.prototype.isZeroArea=function(){return this.shape.startAngle===this.shape.endAngle||this.shape.r===this.shape.r0},e}(gs);Cu.prototype.type="sector";var Du=function(){this.cx=0,this.cy=0,this.r=0,this.r0=0},Au=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new Du},e.prototype.buildPath=function(t,e){var n=e.cx,i=e.cy,r=2*Math.PI;t.moveTo(n+e.r,i),t.arc(n,i,e.r,0,r,!1),t.moveTo(n+e.r0,i),t.arc(n,i,e.r0,0,r,!0)},e}(gs);function ku(t,e,n){var i=e.smooth,r=e.points;if(r&&r.length>=2){if(i){var o=function(t,e,n,i){var r,o,a,s,l=[],u=[],h=[],c=[];if(i){a=[1/0,1/0],s=[-1/0,-1/0];for(var p=0,d=t.length;p<d;p++)Gt(a,a,t[p]),Wt(s,s,t[p]);Gt(a,a,i[0]),Wt(s,s,i[1])}for(p=0,d=t.length;p<d;p++){var f=t[p];if(n)r=t[p?p-1:d-1],o=t[(p+1)%d];else{if(0===p||p===d-1){l.push(Mt(t[p]));continue}r=t[p-1],o=t[p+1]}Dt(u,o,r),Ot(u,u,e);var g=Nt(f,r),y=Nt(f,o),v=g+y;0!==v&&(g/=v,y/=v),Ot(h,u,-g),Ot(c,u,y);var m=Tt([],f,h),x=Tt([],f,c);i&&(Wt(m,m,a),Gt(m,m,s),Wt(x,x,a),Gt(x,x,s)),l.push(m),l.push(x)}return n&&l.push(l.shift()),l}(r,i,n,e.smoothConstraint);t.moveTo(r[0][0],r[0][1]);for(var a=r.length,s=0;s<(n?a:a-1);s++){var l=o[2*s],u=o[2*s+1],h=r[(s+1)%a];t.bezierCurveTo(l[0],l[1],u[0],u[1],h[0],h[1])}}else{t.moveTo(r[0][0],r[0][1]);s=1;for(var c=r.length;s<c;s++)t.lineTo(r[s][0],r[s][1])}n&&t.closePath()}}Au.prototype.type="ring";var Lu=function(){this.points=null,this.smooth=0,this.smoothConstraint=null},Pu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new Lu},e.prototype.buildPath=function(t,e){ku(t,e,!0)},e}(gs);Pu.prototype.type="polygon";var Ou=function(){this.points=null,this.percent=1,this.smooth=0,this.smoothConstraint=null},Ru=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new Ou},e.prototype.buildPath=function(t,e){ku(t,e,!1)},e}(gs);Ru.prototype.type="polyline";var Nu={},Eu=function(){this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.percent=1},zu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new Eu},e.prototype.buildPath=function(t,e){var n,i,r,o;if(this.subPixelOptimize){var a=ws(Nu,e,this.style);n=a.x1,i=a.y1,r=a.x2,o=a.y2}else n=e.x1,i=e.y1,r=e.x2,o=e.y2;var s=e.percent;0!==s&&(t.moveTo(n,i),s<1&&(r=n*(1-s)+r*s,o=i*(1-s)+o*s),t.lineTo(r,o))},e.prototype.pointAt=function(t){var e=this.shape;return[e.x1*(1-t)+e.x2*t,e.y1*(1-t)+e.y2*t]},e}(gs);zu.prototype.type="line";var Vu=[],Bu=function(){this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.cpx1=0,this.cpy1=0,this.percent=1};function Fu(t,e,n){var i=t.cpx2,r=t.cpy2;return null!=i||null!=r?[(n?Ye:He)(t.x1,t.cpx1,t.cpx2,t.x2,e),(n?Ye:He)(t.y1,t.cpy1,t.cpy2,t.y2,e)]:[(n?$e:Ke)(t.x1,t.cpx1,t.x2,e),(n?$e:Ke)(t.y1,t.cpy1,t.y2,e)]}var Gu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new Bu},e.prototype.buildPath=function(t,e){var n=e.x1,i=e.y1,r=e.x2,o=e.y2,a=e.cpx1,s=e.cpy1,l=e.cpx2,u=e.cpy2,h=e.percent;0!==h&&(t.moveTo(n,i),null==l||null==u?(h<1&&(Qe(n,a,r,h,Vu),a=Vu[1],r=Vu[2],Qe(i,s,o,h,Vu),s=Vu[1],o=Vu[2]),t.quadraticCurveTo(a,s,r,o)):(h<1&&(Ze(n,a,l,r,h,Vu),a=Vu[1],l=Vu[2],r=Vu[3],Ze(i,s,u,o,h,Vu),s=Vu[1],u=Vu[2],o=Vu[3]),t.bezierCurveTo(a,s,l,u,r,o)))},e.prototype.pointAt=function(t){return Fu(this.shape,t,!1)},e.prototype.tangentAt=function(t){var e=Fu(this.shape,t,!0);return Rt(e,e)},e}(gs);Gu.prototype.type="bezier-curve";var Wu=function(){this.cx=0,this.cy=0,this.r=0,this.startAngle=0,this.endAngle=2*Math.PI,this.clockwise=!0},Hu=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new Wu},e.prototype.buildPath=function(t,e){var n=e.cx,i=e.cy,r=Math.max(e.r,0),o=e.startAngle,a=e.endAngle,s=e.clockwise,l=Math.cos(o),u=Math.sin(o);t.moveTo(l*r+n,u*r+i),t.arc(n,i,r,o,a,!s)},e}(gs);Hu.prototype.type="arc";var Yu=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="compound",e}return n(e,t),e.prototype._updatePathDirty=function(){for(var t=this.shape.paths,e=this.shapeChanged(),n=0;n<t.length;n++)e=e||t[n].shapeChanged();e&&this.dirtyShape()},e.prototype.beforeBrush=function(){this._updatePathDirty();for(var t=this.shape.paths||[],e=this.getGlobalScale(),n=0;n<t.length;n++)t[n].path||t[n].createPathProxy(),t[n].path.setScale(e[0],e[1],t[n].segmentIgnoreThreshold)},e.prototype.buildPath=function(t,e){for(var n=e.paths||[],i=0;i<n.length;i++)n[i].buildPath(t,n[i].shape,!0)},e.prototype.afterBrush=function(){for(var t=this.shape.paths||[],e=0;e<t.length;e++)t[e].pathUpdated()},e.prototype.getBoundingRect=function(){return this._updatePathDirty.call(this),gs.prototype.getBoundingRect.call(this)},e}(gs),Uu=function(){function t(t){this.colorStops=t||[]}return t.prototype.addColorStop=function(t,e){this.colorStops.push({offset:t,color:e})},t}(),Xu=function(t){function e(e,n,i,r,o,a){var s=t.call(this,o)||this;return s.x=null==e?0:e,s.y=null==n?0:n,s.x2=null==i?1:i,s.y2=null==r?0:r,s.type="linear",s.global=a||!1,s}return n(e,t),e}(Uu),Zu=function(t){function e(e,n,i,r,o){var a=t.call(this,r)||this;return a.x=null==e?.5:e,a.y=null==n?.5:n,a.r=null==i?.5:i,a.type="radial",a.global=o||!1,a}return n(e,t),e}(Uu),ju=[0,0],qu=[0,0],Ku=new Ji,$u=new Ji,Ju=function(){function t(t,e){this._corners=[],this._axes=[],this._origin=[0,0];for(var n=0;n<4;n++)this._corners[n]=new Ji;for(n=0;n<2;n++)this._axes[n]=new Ji;t&&this.fromBoundingRect(t,e)}return t.prototype.fromBoundingRect=function(t,e){var n=this._corners,i=this._axes,r=t.x,o=t.y,a=r+t.width,s=o+t.height;if(n[0].set(r,o),n[1].set(a,o),n[2].set(a,s),n[3].set(r,s),e)for(var l=0;l<4;l++)n[l].transform(e);Ji.sub(i[0],n[1],n[0]),Ji.sub(i[1],n[3],n[0]),i[0].normalize(),i[1].normalize();for(l=0;l<2;l++)this._origin[l]=i[l].dot(n[0])},t.prototype.intersect=function(t,e){var n=!0,i=!e;return Ku.set(1/0,1/0),$u.set(0,0),!this._intersectCheckOneSide(this,t,Ku,$u,i,1)&&(n=!1,i)||!this._intersectCheckOneSide(t,this,Ku,$u,i,-1)&&(n=!1,i)||i||Ji.copy(e,n?Ku:$u),n},t.prototype._intersectCheckOneSide=function(t,e,n,i,r,o){for(var a=!0,s=0;s<2;s++){var l=this._axes[s];if(this._getProjMinMaxOnAxis(s,t._corners,ju),this._getProjMinMaxOnAxis(s,e._corners,qu),ju[1]<qu[0]||ju[0]>qu[1]){if(a=!1,r)return a;var u=Math.abs(qu[0]-ju[1]),h=Math.abs(ju[0]-qu[1]);Math.min(u,h)>i.len()&&(u<h?Ji.scale(i,l,-u*o):Ji.scale(i,l,h*o))}else if(n){u=Math.abs(qu[0]-ju[1]),h=Math.abs(ju[0]-qu[1]);Math.min(u,h)<n.len()&&(u<h?Ji.scale(n,l,u*o):Ji.scale(n,l,-h*o))}}return a},t.prototype._getProjMinMaxOnAxis=function(t,e,n){for(var i=this._axes[t],r=this._origin,o=e[0].dot(i)+r[t],a=o,s=o,l=1;l<e.length;l++){var u=e[l].dot(i)+r[t];a=Math.min(u,a),s=Math.max(u,s)}n[0]=a,n[1]=s},t}(),Qu=[],th=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.notClear=!0,e.incremental=!0,e._displayables=[],e._temporaryDisplayables=[],e._cursor=0,e}return n(e,t),e.prototype.traverse=function(t,e){t.call(e,this)},e.prototype.useStyle=function(){this.style={}},e.prototype.getCursor=function(){return this._cursor},e.prototype.innerAfterBrush=function(){this._cursor=this._displayables.length},e.prototype.clearDisplaybles=function(){this._displayables=[],this._temporaryDisplayables=[],this._cursor=0,this.markRedraw(),this.notClear=!1},e.prototype.clearTemporalDisplayables=function(){this._temporaryDisplayables=[]},e.prototype.addDisplayable=function(t,e){e?this._temporaryDisplayables.push(t):this._displayables.push(t),this.markRedraw()},e.prototype.addDisplayables=function(t,e){e=e||!1;for(var n=0;n<t.length;n++)this.addDisplayable(t[n],e)},e.prototype.getDisplayables=function(){return this._displayables},e.prototype.getTemporalDisplayables=function(){return this._temporaryDisplayables},e.prototype.eachPendingDisplayable=function(t){for(var e=this._cursor;e<this._displayables.length;e++)t&&t(this._displayables[e]);for(e=0;e<this._temporaryDisplayables.length;e++)t&&t(this._temporaryDisplayables[e])},e.prototype.update=function(){this.updateTransform();for(var t=this._cursor;t<this._displayables.length;t++){(e=this._displayables[t]).parent=this,e.update(),e.parent=null}for(t=0;t<this._temporaryDisplayables.length;t++){var e;(e=this._temporaryDisplayables[t]).parent=this,e.update(),e.parent=null}},e.prototype.getBoundingRect=function(){if(!this._rect){for(var t=new sr(1/0,1/0,-1/0,-1/0),e=0;e<this._displayables.length;e++){var n=this._displayables[e],i=n.getBoundingRect().clone();n.needLocalTransform()&&i.applyTransform(n.getLocalTransform(Qu)),t.union(i)}this._rect=t}return this._rect},e.prototype.contain=function(t,e){var n=this.transformCoordToLocal(t,e);if(this.getBoundingRect().contain(n[0],n[1]))for(var i=0;i<this._displayables.length;i++){if(this._displayables[i].contain(t,e))return!0}return!1},e}(da),eh=So();function nh(t,e,n,i,r){var o;if(e&&e.ecModel){var a=e.ecModel.getUpdatePayload();o=a&&a.animation}var s="update"===t;if(e&&e.isAnimationEnabled()){var l=void 0,u=void 0,h=void 0;return i?(l=rt(i.duration,200),u=rt(i.easing,"cubicOut"),h=0):(l=e.getShallow(s?"animationDurationUpdate":"animationDuration"),u=e.getShallow(s?"animationEasingUpdate":"animationEasing"),h=e.getShallow(s?"animationDelayUpdate":"animationDelay")),o&&(null!=o.duration&&(l=o.duration),null!=o.easing&&(u=o.easing),null!=o.delay&&(h=o.delay)),U(h)&&(h=h(n,r)),U(l)&&(l=l(n)),{duration:l||0,delay:h,easing:u}}return null}function ih(t,e,n,i,r,o,a){var s,l=!1;U(r)?(a=o,o=r,r=null):q(r)&&(o=r.cb,a=r.during,l=r.isFrom,s=r.removeOpt,r=r.dataIndex);var u="leave"===t;u||e.stopAnimation("leave");var h=nh(t,i,r,u?s||{}:null,i&&i.getAnimationDelayParams?i.getAnimationDelayParams(e,r):null);if(h&&h.duration>0){var c={duration:h.duration,delay:h.delay||0,easing:h.easing,done:o,force:!!o||!!a,setToFinal:!u,scope:t,during:a};l?e.animateFrom(n,c):e.animateTo(n,c)}else e.stopAnimation(),!l&&e.attr(n),a&&a(1),o&&o()}function rh(t,e,n,i,r,o){ih("update",t,e,n,i,r,o)}function oh(t,e,n,i,r,o){ih("enter",t,e,n,i,r,o)}function ah(t){if(!t.__zr)return!0;for(var e=0;e<t.animators.length;e++){if("leave"===t.animators[e].scope)return!0}return!1}function sh(t,e,n,i,r,o){ah(t)||ih("leave",t,e,n,i,r,o)}function lh(t,e,n,i){t.removeTextContent(),t.removeTextGuideLine(),sh(t,{style:{opacity:0}},e,n,i)}function uh(t,e,n){function i(){t.parent&&t.parent.remove(t)}t.isGroup?t.traverse((function(t){t.isGroup||lh(t,e,n,i)})):lh(t,e,n,i)}function hh(t){eh(t).oldStyle=t.style}var ch=Math.max,ph=Math.min,dh={};function fh(t){return gs.extend(t)}var gh=function(t,e){var i=au(t,e);return function(t){function e(e){var n=t.call(this,e)||this;return n.applyTransform=i.applyTransform,n.buildPath=i.buildPath,n}return n(e,t),e}(ru)};function yh(t,e){return gh(t,e)}function vh(t,e){dh[t]=e}function mh(t){if(dh.hasOwnProperty(t))return dh[t]}function xh(t,e,n,i){var r=su(t,e);return n&&("center"===i&&(n=bh(n,r.getBoundingRect())),Sh(r,n)),r}function _h(t,e,n){var i=new _s({style:{image:t,x:e.x,y:e.y,width:e.width,height:e.height},onload:function(t){if("center"===n){var r={width:t.width,height:t.height};i.setStyle(bh(e,r))}}});return i}function bh(t,e){var n,i=e.width/e.height,r=t.height*i;return n=r<=t.width?t.height:(r=t.width)/i,{x:t.x+t.width/2-r/2,y:t.y+t.height/2-n/2,width:r,height:n}}var wh=function(t,e){for(var n=[],i=t.length,r=0;r<i;r++){var o=t[r];n.push(o.getUpdatedPathProxy(!0))}var a=new gs(e);return a.createPathProxy(),a.buildPath=function(t){if(ou(t)){t.appendPath(n);var e=t.getContext();e&&t.rebuildPath(e,1)}},a};function Sh(t,e){if(t.applyTransform){var n=t.getBoundingRect().calculateTransform(e);t.applyTransform(n)}}var Mh=Ms;function Ih(t,e){for(var n=Oi([]);t&&t!==e;)Ni(n,t.getLocalTransform(),n),t=t.parent;return n}function Th(t,e,n){return e&&!N(e)&&(e=qi.getLocalTransform(e)),n&&(e=Bi([],e)),Ft([],t,e)}function Ch(t,e,n){var i=0===e[4]||0===e[5]||0===e[0]?1:Math.abs(2*e[4]/e[0]),r=0===e[4]||0===e[5]||0===e[2]?1:Math.abs(2*e[4]/e[2]),o=["left"===t?-i:"right"===t?i:0,"top"===t?-r:"bottom"===t?r:0];return o=Th(o,e,n),Math.abs(o[0])>Math.abs(o[1])?o[0]>0?"right":"left":o[1]>0?"bottom":"top"}function Dh(t){return!t.isGroup}function Ah(t,e,n){if(t&&e){var i,r=(i={},t.traverse((function(t){Dh(t)&&t.anid&&(i[t.anid]=t)})),i);e.traverse((function(t){if(Dh(t)&&t.anid){var e=r[t.anid];if(e){var i=o(t);t.attr(o(e)),rh(t,i,n,Hs(t).dataIndex)}}}))}function o(t){var e={x:t.x,y:t.y,rotation:t.rotation};return function(t){return null!=t.shape}(t)&&(e.shape=A({},t.shape)),e}}function kh(t,e){return z(t,(function(t){var n=t[0];n=ch(n,e.x),n=ph(n,e.x+e.width);var i=t[1];return i=ch(i,e.y),[n,i=ph(i,e.y+e.height)]}))}function Lh(t,e){var n=ch(t.x,e.x),i=ph(t.x+t.width,e.x+e.width),r=ch(t.y,e.y),o=ph(t.y+t.height,e.y+e.height);if(i>=n&&o>=r)return{x:n,y:r,width:i-n,height:o-r}}function Ph(t,e,n){var i=A({rectHover:!0},e),r=i.style={strokeNoScale:!0};if(n=n||{x:-1,y:-1,width:2,height:2},t)return 0===t.indexOf("image://")?(r.image=t.slice(8),k(r,n),new _s(i)):xh(t.replace("path://",""),i,n,"center")}function Oh(t,e,n,i,r){for(var o=0,a=r[r.length-1];o<r.length;o++){var s=r[o];if(Rh(t,e,n,i,s[0],s[1],a[0],a[1]))return!0;a=s}}function Rh(t,e,n,i,r,o,a,s){var l,u=n-t,h=i-e,c=a-r,p=s-o,d=Nh(c,p,u,h);if((l=d)<=1e-6&&l>=-1e-6)return!1;var f=t-r,g=e-o,y=Nh(f,g,u,h)/d;if(y<0||y>1)return!1;var v=Nh(f,g,c,p)/d;return!(v<0||v>1)}function Nh(t,e,n,i){return t*i-n*e}function Eh(t){var e=t.itemTooltipOption,n=t.componentModel,i=t.itemName,r=X(e)?{formatter:e}:e,o=n.mainType,a=n.componentIndex,s={componentType:o,name:i,$vars:["name"]};s[o+"Index"]=a;var l=t.formatterParamsExtra;l&&E(G(l),(function(t){mt(s,t)||(s[t]=l[t],s.$vars.push(t))}));var u=Hs(t.el);u.componentMainType=o,u.componentIndex=a,u.tooltipConfig={name:i,option:k({content:i,formatterParams:s},r)}}function zh(t,e){var n;t.isGroup&&(n=e(t)),n||t.traverse(e)}function Vh(t,e){if(t)if(Y(t))for(var n=0;n<t.length;n++)zh(t[n],e);else zh(t,e)}vh("circle",hu),vh("ellipse",pu),vh("sector",Cu),vh("ring",Au),vh("polygon",Pu),vh("polyline",Ru),vh("rect",Cs),vh("line",zu),vh("bezierCurve",Gu),vh("arc",Hu);var Bh=Object.freeze({__proto__:null,updateProps:rh,initProps:oh,removeElement:sh,removeElementWithFadeOut:uh,isElementRemoved:ah,extendShape:fh,extendPath:yh,registerShape:vh,getShapeClass:mh,makePath:xh,makeImage:_h,mergePath:wh,resizePath:Sh,subPixelOptimizeLine:function(t){return ws(t.shape,t.shape,t.style),t},subPixelOptimizeRect:function(t){return Ss(t.shape,t.shape,t.style),t},subPixelOptimize:Mh,getTransform:Ih,applyTransform:Th,transformDirection:Ch,groupTransition:Ah,clipPointsByRect:kh,clipRectByRect:Lh,createIcon:Ph,linePolygonIntersect:Oh,lineLineIntersect:Rh,setTooltipConfig:Eh,traverseElements:Vh,Group:Cr,Image:_s,Text:ks,Circle:hu,Ellipse:pu,Sector:Cu,Ring:Au,Polygon:Pu,Polyline:Ru,Rect:Cs,Line:zu,BezierCurve:Gu,Arc:Hu,IncrementalDisplayable:th,CompoundPath:Yu,LinearGradient:Xu,RadialGradient:Zu,BoundingRect:sr,OrientedBoundingRect:Ju,Point:Ji,Path:gs}),Fh={};function Gh(t,e){for(var n=0;n<qs.length;n++){var i=qs[n],r=e[i],o=t.ensureState(i);o.style=o.style||{},o.style.text=r}var a=t.currentStates.slice();t.clearStates(!0),t.setStyle({text:e.normal}),t.useStates(a,!0)}function Wh(t,e,n){var i,r=t.labelFetcher,o=t.labelDataIndex,a=t.labelDimIndex,s=e.normal;r&&(i=r.getFormattedLabel(o,"normal",null,a,s&&s.get("formatter"),null!=n?{interpolatedValue:n}:null)),null==i&&(i=U(t.defaultText)?t.defaultText(o,t,n):t.defaultText);for(var l={normal:i},u=0;u<qs.length;u++){var h=qs[u],c=e[h];l[h]=rt(r?r.getFormattedLabel(o,h,null,a,c&&c.get("formatter")):null,i)}return l}function Hh(t,e,n,i){n=n||Fh;for(var r=t instanceof ks,o=!1,a=0;a<Ks.length;a++){if((p=e[Ks[a]])&&p.getShallow("show")){o=!0;break}}var s=r?t:t.getTextContent();if(o){r||(s||(s=new ks,t.setTextContent(s)),t.stateProxy&&(s.stateProxy=t.stateProxy));var l=Wh(n,e),u=e.normal,h=!!u.getShallow("show"),c=Uh(u,i&&i.normal,n,!1,!r);c.text=l.normal,r||t.setTextConfig(Xh(u,n,!1));for(a=0;a<qs.length;a++){var p,d=qs[a];if(p=e[d]){var f=s.ensureState(d),g=!!rt(p.getShallow("show"),h);if(g!==h&&(f.ignore=!g),f.style=Uh(p,i&&i[d],n,!0,!r),f.style.text=l[d],!r)t.ensureState(d).textConfig=Xh(p,n,!0)}}s.silent=!!u.getShallow("silent"),null!=s.style.x&&(c.x=s.style.x),null!=s.style.y&&(c.y=s.style.y),s.ignore=!h,s.useStyle(c),s.dirty(),n.enableTextSetter&&(Jh(s).setLabelText=function(t){var i=Wh(n,e,t);Gh(s,i)})}else s&&(s.ignore=!0);t.dirty()}function Yh(t,e){e=e||"label";for(var n={normal:t.getModel(e)},i=0;i<qs.length;i++){var r=qs[i];n[r]=t.getModel([r,e])}return n}function Uh(t,e,n,i,r){var o={};return function(t,e,n,i,r){n=n||Fh;var o,a=e.ecModel,s=a&&a.option.textStyle,l=function(t){var e;for(;t&&t!==t.ecModel;){var n=(t.option||Fh).rich;if(n){e=e||{};for(var i=G(n),r=0;r<i.length;r++){e[i[r]]=1}}t=t.parentModel}return e}(e);if(l)for(var u in o={},l)if(l.hasOwnProperty(u)){var h=e.getModel(["rich",u]);Kh(o[u]={},h,s,n,i,r,!1,!0)}o&&(t.rich=o);var c=e.get("overflow");c&&(t.overflow=c);var p=e.get("minMargin");null!=p&&(t.margin=p);Kh(t,e,s,n,i,r,!0,!1)}(o,t,n,i,r),e&&A(o,e),o}function Xh(t,e,n){e=e||{};var i,r={},o=t.getShallow("rotate"),a=rt(t.getShallow("distance"),n?null:5),s=t.getShallow("offset");return"outside"===(i=t.getShallow("position")||(n?null:"inside"))&&(i=e.defaultOutsidePosition||"top"),null!=i&&(r.position=i),null!=s&&(r.offset=s),null!=o&&(o*=Math.PI/180,r.rotation=o),null!=a&&(r.distance=a),r.outsideFill="inherit"===t.get("color")?e.inheritColor||null:"auto",r}var Zh=["fontStyle","fontWeight","fontSize","fontFamily","textShadowColor","textShadowBlur","textShadowOffsetX","textShadowOffsetY"],jh=["align","lineHeight","width","height","tag","verticalAlign"],qh=["padding","borderWidth","borderRadius","borderDashOffset","backgroundColor","borderColor","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY"];function Kh(t,e,n,i,r,o,a,s){n=!r&&n||Fh;var l=i&&i.inheritColor,u=e.getShallow("color"),h=e.getShallow("textBorderColor"),c=rt(e.getShallow("opacity"),n.opacity);"inherit"!==u&&"auto"!==u||(u=l||null),"inherit"!==h&&"auto"!==h||(h=l||null),o||(u=u||n.color,h=h||n.textBorderColor),null!=u&&(t.fill=u),null!=h&&(t.stroke=h);var p=rt(e.getShallow("textBorderWidth"),n.textBorderWidth);null!=p&&(t.lineWidth=p);var d=rt(e.getShallow("textBorderType"),n.textBorderType);null!=d&&(t.lineDash=d);var f=rt(e.getShallow("textBorderDashOffset"),n.textBorderDashOffset);null!=f&&(t.lineDashOffset=f),r||null!=c||s||(c=i&&i.defaultOpacity),null!=c&&(t.opacity=c),r||o||null==t.fill&&i.inheritColor&&(t.fill=i.inheritColor);for(var g=0;g<Zh.length;g++){var y=Zh[g];null!=(m=rt(e.getShallow(y),n[y]))&&(t[y]=m)}for(g=0;g<jh.length;g++){y=jh[g];null!=(m=e.getShallow(y))&&(t[y]=m)}if(null==t.verticalAlign){var v=e.getShallow("baseline");null!=v&&(t.verticalAlign=v)}if(!a||!i.disableBox){for(g=0;g<qh.length;g++){var m;y=qh[g];null!=(m=e.getShallow(y))&&(t[y]=m)}var x=e.getShallow("borderType");null!=x&&(t.borderDash=x),"auto"!==t.backgroundColor&&"inherit"!==t.backgroundColor||!l||(t.backgroundColor=l),"auto"!==t.borderColor&&"inherit"!==t.borderColor||!l||(t.borderColor=l)}}function $h(t,e){var n=e&&e.getModel("textStyle");return ut([t.fontStyle||n&&n.getShallow("fontStyle")||"",t.fontWeight||n&&n.getShallow("fontWeight")||"",(t.fontSize||n&&n.getShallow("fontSize")||12)+"px",t.fontFamily||n&&n.getShallow("fontFamily")||"sans-serif"].join(" "))}var Jh=So();function Qh(t,e,n,i){if(t){var r=Jh(t);r.prevValue=r.value,r.value=n;var o=e.normal;r.valueAnimation=o.get("valueAnimation"),r.valueAnimation&&(r.precision=o.get("precision"),r.defaultInterpolatedText=i,r.statesModels=e)}}function tc(t,e,n,i,r){var o=Jh(t);if(o.valueAnimation&&o.prevValue!==o.value){var a=o.defaultInterpolatedText,s=rt(o.interpolatedValue,o.prevValue),l=o.value;t.percent=0,(null==o.prevValue?oh:rh)(t,{percent:1},i,e,null,(function(i){var u=Po(n,o.precision,s,l,i);o.interpolatedValue=1===i?null:u;var h=Wh({labelDataIndex:e,labelFetcher:r,defaultText:a?a(u):u+""},o.statesModels,u);Gh(t,h)}))}}var ec,nc,ic=["textStyle","color"],rc=["fontStyle","fontWeight","fontSize","fontFamily","padding","lineHeight","rich","width","height","overflow"],oc=new ks,ac=function(){function t(){}return t.prototype.getTextColor=function(t){var e=this.ecModel;return this.getShallow("color")||(!t&&e?e.get(ic):null)},t.prototype.getFont=function(){return $h({fontStyle:this.getShallow("fontStyle"),fontWeight:this.getShallow("fontWeight"),fontSize:this.getShallow("fontSize"),fontFamily:this.getShallow("fontFamily")},this.ecModel)},t.prototype.getTextRect=function(t){for(var e={text:t,verticalAlign:this.getShallow("verticalAlign")||this.getShallow("baseline")},n=0;n<rc.length;n++)e[rc[n]]=this.getShallow(rc[n]);return oc.useStyle(e),oc.update(),oc.getBoundingRect()},t}(),sc=[["lineWidth","width"],["stroke","color"],["opacity"],["shadowBlur"],["shadowOffsetX"],["shadowOffsetY"],["shadowColor"],["lineDash","type"],["lineDashOffset","dashOffset"],["lineCap","cap"],["lineJoin","join"],["miterLimit"]],lc=Wo(sc),uc=function(){function t(){}return t.prototype.getLineStyle=function(t){return lc(this,t)},t}(),hc=[["fill","color"],["stroke","borderColor"],["lineWidth","borderWidth"],["opacity"],["shadowBlur"],["shadowOffsetX"],["shadowOffsetY"],["shadowColor"],["lineDash","borderType"],["lineDashOffset","borderDashOffset"],["lineCap","borderCap"],["lineJoin","borderJoin"],["miterLimit","borderMiterLimit"]],cc=Wo(hc),pc=function(){function t(){}return t.prototype.getItemStyle=function(t,e){return cc(this,t,e)},t}(),dc=function(){function t(t,e,n){this.parentModel=e,this.ecModel=n,this.option=t}return t.prototype.init=function(t,e,n){for(var i=[],r=3;r<arguments.length;r++)i[r-3]=arguments[r]},t.prototype.mergeOption=function(t,e){C(this.option,t,!0)},t.prototype.get=function(t,e){return null==t?this.option:this._doGet(this.parsePath(t),!e&&this.parentModel)},t.prototype.getShallow=function(t,e){var n=this.option,i=null==n?n:n[t];if(null==i&&!e){var r=this.parentModel;r&&(i=r.getShallow(t))}return i},t.prototype.getModel=function(e,n){var i=null!=e,r=i?this.parsePath(e):null;return new t(i?this._doGet(r):this.option,n=n||this.parentModel&&this.parentModel.getModel(this.resolveParentPath(r)),this.ecModel)},t.prototype.isEmpty=function(){return null==this.option},t.prototype.restoreData=function(){},t.prototype.clone=function(){return new(0,this.constructor)(T(this.option))},t.prototype.parsePath=function(t){return"string"==typeof t?t.split("."):t},t.prototype.resolveParentPath=function(t){return t},t.prototype.isAnimationEnabled=function(){if(!r.node&&this.option){if(null!=this.option.animation)return!!this.option.animation;if(this.parentModel)return this.parentModel.isAnimationEnabled()}},t.prototype._doGet=function(t,e){var n=this.option;if(!t)return n;for(var i=0;i<t.length&&(!t[i]||null!=(n=n&&"object"==typeof n?n[t[i]]:null));i++);return null==n&&e&&(n=e._doGet(this.resolveParentPath(t),e.parentModel)),n},t}();Eo(dc),ec=dc,nc=["__\0is_clz",Vo++].join("_"),ec.prototype[nc]=!0,ec.isInstance=function(t){return!(!t||!t[nc])},R(dc,uc),R(dc,pc),R(dc,Yo),R(dc,ac);var fc=Math.round(10*Math.random());function gc(t){return[t||"",fc++].join("_")}function yc(t,e){return C(C({},t,!0),e,!0)}var vc="ZH",mc="EN",xc=mc,_c={},bc={},wc=r.domSupported&&(document.documentElement.lang||navigator.language||navigator.browserLanguage).toUpperCase().indexOf(vc)>-1?vc:xc;function Sc(t,e){t=t.toUpperCase(),bc[t]=new dc(e),_c[t]=e}function Mc(t){return bc[t]}Sc(mc,{time:{month:["January","February","March","April","May","June","July","August","September","October","November","December"],monthAbbr:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],dayOfWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dayOfWeekAbbr:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]},legend:{selector:{all:"All",inverse:"Inv"}},toolbox:{brush:{title:{rect:"Box Select",polygon:"Lasso Select",lineX:"Horizontally Select",lineY:"Vertically Select",keep:"Keep Selections",clear:"Clear Selections"}},dataView:{title:"Data View",lang:["Data View","Close","Refresh"]},dataZoom:{title:{zoom:"Zoom",back:"Zoom Reset"}},magicType:{title:{line:"Switch to Line Chart",bar:"Switch to Bar Chart",stack:"Stack",tiled:"Tile"}},restore:{title:"Restore"},saveAsImage:{title:"Save as Image",lang:["Right Click to Save Image"]}},series:{typeNames:{pie:"Pie chart",bar:"Bar chart",line:"Line chart",scatter:"Scatter plot",effectScatter:"Ripple scatter plot",radar:"Radar chart",tree:"Tree",treemap:"Treemap",boxplot:"Boxplot",candlestick:"Candlestick",k:"K line chart",heatmap:"Heat map",map:"Map",parallel:"Parallel coordinate map",lines:"Line graph",graph:"Relationship graph",sankey:"Sankey diagram",funnel:"Funnel chart",gauge:"Gauge",pictorialBar:"Pictorial bar",themeRiver:"Theme River Map",sunburst:"Sunburst"}},aria:{general:{withTitle:'This is a chart about "{title}"',withoutTitle:"This is a chart"},series:{single:{prefix:"",withName:" with type {seriesType} named {seriesName}.",withoutName:" with type {seriesType}."},multiple:{prefix:". It consists of {seriesCount} series count.",withName:" The {seriesId} series is a {seriesType} representing {seriesName}.",withoutName:" The {seriesId} series is a {seriesType}.",separator:{middle:"",end:""}}},data:{allData:"The data is as follows: ",partialData:"The first {displayCnt} items are: ",withName:"the data for {name} is {value}",withoutName:"{value}",separator:{middle:", ",end:". "}}}}),Sc(vc,{time:{month:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthAbbr:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],dayOfWeek:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],dayOfWeekAbbr:["日","一","二","三","四","五","六"]},legend:{selector:{all:"全选",inverse:"反选"}},toolbox:{brush:{title:{rect:"矩形选择",polygon:"圈选",lineX:"横向选择",lineY:"纵向选择",keep:"保持选择",clear:"清除选择"}},dataView:{title:"数据视图",lang:["数据视图","关闭","刷新"]},dataZoom:{title:{zoom:"区域缩放",back:"区域缩放还原"}},magicType:{title:{line:"切换为折线图",bar:"切换为柱状图",stack:"切换为堆叠",tiled:"切换为平铺"}},restore:{title:"还原"},saveAsImage:{title:"保存为图片",lang:["右键另存为图片"]}},series:{typeNames:{pie:"饼图",bar:"柱状图",line:"折线图",scatter:"散点图",effectScatter:"涟漪散点图",radar:"雷达图",tree:"树图",treemap:"矩形树图",boxplot:"箱型图",candlestick:"K线图",k:"K线图",heatmap:"热力图",map:"地图",parallel:"平行坐标图",lines:"线图",graph:"关系图",sankey:"桑基图",funnel:"漏斗图",gauge:"仪表盘图",pictorialBar:"象形柱图",themeRiver:"主题河流图",sunburst:"旭日图"}},aria:{general:{withTitle:"这是一个关于“{title}”的图表。",withoutTitle:"这是一个图表，"},series:{single:{prefix:"",withName:"图表类型是{seriesType}，表示{seriesName}。",withoutName:"图表类型是{seriesType}。"},multiple:{prefix:"它由{seriesCount}个图表系列组成。",withName:"第{seriesId}个系列是一个表示{seriesName}的{seriesType}，",withoutName:"第{seriesId}个系列是一个{seriesType}，",separator:{middle:"；",end:"。"}}},data:{allData:"其数据是——",partialData:"其中，前{displayCnt}项是——",withName:"{name}的数据是{value}",withoutName:"{value}",separator:{middle:"，",end:""}}}});var Ic=1e3,Tc=6e4,Cc=36e5,Dc=864e5,Ac=31536e6,kc={year:"{yyyy}",month:"{MMM}",day:"{d}",hour:"{HH}:{mm}",minute:"{HH}:{mm}",second:"{HH}:{mm}:{ss}",millisecond:"{HH}:{mm}:{ss} {SSS}",none:"{yyyy}-{MM}-{dd} {HH}:{mm}:{ss} {SSS}"},Lc="{yyyy}-{MM}-{dd}",Pc={year:"{yyyy}",month:"{yyyy}-{MM}",day:Lc,hour:"{yyyy}-{MM}-{dd} "+kc.hour,minute:"{yyyy}-{MM}-{dd} "+kc.minute,second:"{yyyy}-{MM}-{dd} "+kc.second,millisecond:kc.none},Oc=["year","month","day","hour","minute","second","millisecond"],Rc=["year","half-year","quarter","month","week","half-week","day","half-day","quarter-day","hour","minute","second","millisecond"];function Nc(t,e){return"0000".substr(0,e-(t+="").length)+t}function Ec(t){switch(t){case"half-year":case"quarter":return"month";case"week":case"half-week":return"day";case"half-day":case"quarter-day":return"hour";default:return t}}function zc(t){return t===Ec(t)}function Vc(t,e,n,i){var r=jr(t),o=r[Gc(n)](),a=r[Wc(n)]()+1,s=Math.floor((a-1)/3)+1,l=r[Hc(n)](),u=r["get"+(n?"UTC":"")+"Day"](),h=r[Yc(n)](),c=(h-1)%12+1,p=r[Uc(n)](),d=r[Xc(n)](),f=r[Zc(n)](),g=(i instanceof dc?i:Mc(i||wc)||bc.EN).getModel("time"),y=g.get("month"),v=g.get("monthAbbr"),m=g.get("dayOfWeek"),x=g.get("dayOfWeekAbbr");return(e||"").replace(/{yyyy}/g,o+"").replace(/{yy}/g,o%100+"").replace(/{Q}/g,s+"").replace(/{MMMM}/g,y[a-1]).replace(/{MMM}/g,v[a-1]).replace(/{MM}/g,Nc(a,2)).replace(/{M}/g,a+"").replace(/{dd}/g,Nc(l,2)).replace(/{d}/g,l+"").replace(/{eeee}/g,m[u]).replace(/{ee}/g,x[u]).replace(/{e}/g,u+"").replace(/{HH}/g,Nc(h,2)).replace(/{H}/g,h+"").replace(/{hh}/g,Nc(c+"",2)).replace(/{h}/g,c+"").replace(/{mm}/g,Nc(p,2)).replace(/{m}/g,p+"").replace(/{ss}/g,Nc(d,2)).replace(/{s}/g,d+"").replace(/{SSS}/g,Nc(f,3)).replace(/{S}/g,f+"")}function Bc(t,e){var n=jr(t),i=n[Wc(e)]()+1,r=n[Hc(e)](),o=n[Yc(e)](),a=n[Uc(e)](),s=n[Xc(e)](),l=0===n[Zc(e)](),u=l&&0===s,h=u&&0===a,c=h&&0===o,p=c&&1===r;return p&&1===i?"year":p?"month":c?"day":h?"hour":u?"minute":l?"second":"millisecond"}function Fc(t,e,n){var i=j(t)?jr(t):t;switch(e=e||Bc(t,n)){case"year":return i[Gc(n)]();case"half-year":return i[Wc(n)]()>=6?1:0;case"quarter":return Math.floor((i[Wc(n)]()+1)/4);case"month":return i[Wc(n)]();case"day":return i[Hc(n)]();case"half-day":return i[Yc(n)]()/24;case"hour":return i[Yc(n)]();case"minute":return i[Uc(n)]();case"second":return i[Xc(n)]();case"millisecond":return i[Zc(n)]()}}function Gc(t){return t?"getUTCFullYear":"getFullYear"}function Wc(t){return t?"getUTCMonth":"getMonth"}function Hc(t){return t?"getUTCDate":"getDate"}function Yc(t){return t?"getUTCHours":"getHours"}function Uc(t){return t?"getUTCMinutes":"getMinutes"}function Xc(t){return t?"getUTCSeconds":"getSeconds"}function Zc(t){return t?"getUTCMilliseconds":"getMilliseconds"}function jc(t){return t?"setUTCFullYear":"setFullYear"}function qc(t){return t?"setUTCMonth":"setMonth"}function Kc(t){return t?"setUTCDate":"setDate"}function $c(t){return t?"setUTCHours":"setHours"}function Jc(t){return t?"setUTCMinutes":"setMinutes"}function Qc(t){return t?"setUTCSeconds":"setSeconds"}function tp(t){return t?"setUTCMilliseconds":"setMilliseconds"}function ep(t){if(!eo(t))return X(t)?t:"-";var e=(t+"").split(".");return e[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,"$1,")+(e.length>1?"."+e[1]:"")}function np(t,e){return t=(t||"").toLowerCase().replace(/-(.)/g,(function(t,e){return e.toUpperCase()})),e&&t&&(t=t.charAt(0).toUpperCase()+t.slice(1)),t}var ip=st,rp=/([&<>"'])/g,op={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function ap(t){return null==t?"":(t+"").replace(rp,(function(t,e){return op[e]}))}function sp(t,e,n){function i(t){return t&&ut(t)?t:"-"}function r(t){return!(null==t||isNaN(t)||!isFinite(t))}var o="time"===e,a=t instanceof Date;if(o||a){var s=o?jr(t):t;if(!isNaN(+s))return Vc(s,"{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}",n);if(a)return"-"}if("ordinal"===e)return Z(t)?i(t):j(t)&&r(t)?t+"":"-";var l=to(t);return r(l)?ep(l):Z(t)?i(t):"boolean"==typeof t?t+"":"-"}var lp=["a","b","c","d","e","f","g"],up=function(t,e){return"{"+t+(null==e?"":e)+"}"};function hp(t,e,n){Y(e)||(e=[e]);var i=e.length;if(!i)return"";for(var r=e[0].$vars||[],o=0;o<r.length;o++){var a=lp[o];t=t.replace(up(a),up(a,0))}for(var s=0;s<i;s++)for(var l=0;l<r.length;l++){var u=e[s][r[l]];t=t.replace(up(lp[l],s),n?ap(u):u)}return t}function cp(t,e){var n=X(t)?{color:t,extraCssText:e}:t||{},i=n.color,r=n.type;e=n.extraCssText;var o=n.renderMode||"html";return i?"html"===o?"subItem"===r?'<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:'+ap(i)+";"+(e||"")+'"></span>':'<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:'+ap(i)+";"+(e||"")+'"></span>':{renderMode:o,content:"{"+(n.markerId||"markerX")+"|}  ",style:"subItem"===r?{width:4,height:4,borderRadius:2,backgroundColor:i}:{width:10,height:10,borderRadius:5,backgroundColor:i}}:""}function pp(t,e){return e=e||"transparent",X(t)?t:q(t)&&t.colorStops&&(t.colorStops[0]||{}).color||e}function dp(t,e){if("_blank"===e||"blank"===e){var n=window.open();n.opener=null,n.location.href=t}else window.open(t,e)}var fp=E,gp=["left","right","top","bottom","width","height"],yp=[["width","left","right"],["height","top","bottom"]];function vp(t,e,n,i,r){var o=0,a=0;null==i&&(i=1/0),null==r&&(r=1/0);var s=0;e.eachChild((function(l,u){var h,c,p=l.getBoundingRect(),d=e.childAt(u+1),f=d&&d.getBoundingRect();if("horizontal"===t){var g=p.width+(f?-f.x+p.x:0);(h=o+g)>i||l.newline?(o=0,h=g,a+=s+n,s=p.height):s=Math.max(s,p.height)}else{var y=p.height+(f?-f.y+p.y:0);(c=a+y)>r||l.newline?(o+=s+n,a=0,c=y,s=p.width):s=Math.max(s,p.width)}l.newline||(l.x=o,l.y=a,l.markRedraw(),"horizontal"===t?o=h+n:a=c+n)}))}var mp=vp;H(vp,"vertical"),H(vp,"horizontal");function xp(t,e,n){n=ip(n||0);var i=e.width,r=e.height,o=Er(t.left,i),a=Er(t.top,r),s=Er(t.right,i),l=Er(t.bottom,r),u=Er(t.width,i),h=Er(t.height,r),c=n[2]+n[0],p=n[1]+n[3],d=t.aspect;switch(isNaN(u)&&(u=i-s-p-o),isNaN(h)&&(h=r-l-c-a),null!=d&&(isNaN(u)&&isNaN(h)&&(d>i/r?u=.8*i:h=.8*r),isNaN(u)&&(u=d*h),isNaN(h)&&(h=u/d)),isNaN(o)&&(o=i-s-u-p),isNaN(a)&&(a=r-l-h-c),t.left||t.right){case"center":o=i/2-u/2-n[3];break;case"right":o=i-u-p}switch(t.top||t.bottom){case"middle":case"center":a=r/2-h/2-n[0];break;case"bottom":a=r-h-c}o=o||0,a=a||0,isNaN(u)&&(u=i-p-o-(s||0)),isNaN(h)&&(h=r-c-a-(l||0));var f=new sr(o+n[3],a+n[0],u,h);return f.margin=n,f}function _p(t,e,n,i,r,o){var a,s=!r||!r.hv||r.hv[0],l=!r||!r.hv||r.hv[1],u=r&&r.boundingMode||"all";if((o=o||t).x=t.x,o.y=t.y,!s&&!l)return!1;if("raw"===u)a="group"===t.type?new sr(0,0,+e.width||0,+e.height||0):t.getBoundingRect();else if(a=t.getBoundingRect(),t.needLocalTransform()){var h=t.getLocalTransform();(a=a.clone()).applyTransform(h)}var c=xp(k({width:a.width,height:a.height},e),n,i),p=s?c.x-a.x:0,d=l?c.y-a.y:0;return"raw"===u?(o.x=p,o.y=d):(o.x+=p,o.y+=d),o===t&&t.markRedraw(),!0}function bp(t){var e=t.layoutMode||t.constructor.layoutMode;return q(e)?e:e?{type:e}:null}function wp(t,e,n){var i=n&&n.ignoreSize;!Y(i)&&(i=[i,i]);var r=a(yp[0],0),o=a(yp[1],1);function a(n,r){var o={},a=0,u={},h=0;if(fp(n,(function(e){u[e]=t[e]})),fp(n,(function(t){s(e,t)&&(o[t]=u[t]=e[t]),l(o,t)&&a++,l(u,t)&&h++})),i[r])return l(e,n[1])?u[n[2]]=null:l(e,n[2])&&(u[n[1]]=null),u;if(2!==h&&a){if(a>=2)return o;for(var c=0;c<n.length;c++){var p=n[c];if(!s(o,p)&&s(t,p)){o[p]=t[p];break}}return o}return u}function s(t,e){return t.hasOwnProperty(e)}function l(t,e){return null!=t[e]&&"auto"!==t[e]}function u(t,e,n){fp(t,(function(t){e[t]=n[t]}))}u(yp[0],t,r),u(yp[1],t,o)}function Sp(t){return Mp({},t)}function Mp(t,e){return e&&t&&fp(gp,(function(n){e.hasOwnProperty(n)&&(t[n]=e[n])})),t}var Ip=So(),Tp=function(t){function e(e,n,i){var r=t.call(this,e,n,i)||this;return r.uid=gc("ec_cpt_model"),r}return n(e,t),e.prototype.init=function(t,e,n){this.mergeDefaultAndTheme(t,n)},e.prototype.mergeDefaultAndTheme=function(t,e){var n=bp(this),i=n?Sp(t):{};C(t,e.getTheme().get(this.mainType)),C(t,this.getDefaultOption()),n&&wp(t,i,n)},e.prototype.mergeOption=function(t,e){C(this.option,t,!0);var n=bp(this);n&&wp(this.option,t,n)},e.prototype.optionUpdated=function(t,e){},e.prototype.getDefaultOption=function(){var t=this.constructor;if(!function(t){return!(!t||!t[Ro])}(t))return t.defaultOption;var e=Ip(this);if(!e.defaultOption){for(var n=[],i=t;i;){var r=i.prototype.defaultOption;r&&n.push(r),i=i.superClass}for(var o={},a=n.length-1;a>=0;a--)o=C(o,n[a],!0);e.defaultOption=o}return e.defaultOption},e.prototype.getReferringComponents=function(t,e){var n=t+"Index",i=t+"Id";return Ao(this.ecModel,t,{index:this.get(n,!0),id:this.get(i,!0)},e)},e.prototype.getBoxLayoutParams=function(){var t=this;return{left:t.get("left"),top:t.get("top"),right:t.get("right"),bottom:t.get("bottom"),width:t.get("width"),height:t.get("height")}},e.prototype.getZLevelKey=function(){return""},e.prototype.setZLevel=function(t){this.option.zlevel=t},e.protoInitialize=function(){var t=e.prototype;t.type="component",t.id="",t.name="",t.mainType="",t.subType="",t.componentIndex=0}(),e}(dc);zo(Tp,dc),Go(Tp),function(t){var e={};t.registerSubTypeDefaulter=function(t,n){var i=No(t);e[i.main]=n},t.determineSubType=function(n,i){var r=i.type;if(!r){var o=No(n).main;t.hasSubTypes(n)&&e[o]&&(r=e[o](i))}return r}}(Tp),function(t,e){function n(t,e){return t[e]||(t[e]={predecessor:[],successor:[]}),t[e]}t.topologicalTravel=function(t,i,r,o){if(t.length){var a=function(t){var i={},r=[];return E(t,(function(o){var a=n(i,o),s=function(t,e){var n=[];return E(t,(function(t){P(e,t)>=0&&n.push(t)})),n}(a.originalDeps=e(o),t);a.entryCount=s.length,0===a.entryCount&&r.push(o),E(s,(function(t){P(a.predecessor,t)<0&&a.predecessor.push(t);var e=n(i,t);P(e.successor,t)<0&&e.successor.push(o)}))})),{graph:i,noEntryList:r}}(i),s=a.graph,l=a.noEntryList,u={};for(E(t,(function(t){u[t]=!0}));l.length;){var h=l.pop(),c=s[h],p=!!u[h];p&&(r.call(o,h,c.originalDeps.slice()),delete u[h]),E(c.successor,p?f:d)}E(u,(function(){var t="";throw new Error(t)}))}function d(t){s[t].entryCount--,0===s[t].entryCount&&l.push(t)}function f(t){u[t]=!0,d(t)}}}(Tp,(function(t){var e=[];E(Tp.getClassesByMainType(t),(function(t){e=e.concat(t.dependencies||t.prototype.dependencies||[])})),e=z(e,(function(t){return No(t).main})),"dataset"!==t&&P(e,"dataset")<=0&&e.unshift("dataset");return e}));var Cp="";"undefined"!=typeof navigator&&(Cp=navigator.platform||"");var Dp="rgba(0, 0, 0, 0.2)",Ap={darkMode:"auto",colorBy:"series",color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],gradientColor:["#f6efa6","#d88273","#bf444c"],aria:{decal:{decals:[{color:Dp,dashArrayX:[1,0],dashArrayY:[2,5],symbolSize:1,rotation:Math.PI/6},{color:Dp,symbol:"circle",dashArrayX:[[8,8],[0,8,8,0]],dashArrayY:[6,0],symbolSize:.8},{color:Dp,dashArrayX:[1,0],dashArrayY:[4,3],rotation:-Math.PI/4},{color:Dp,dashArrayX:[[6,6],[0,6,6,0]],dashArrayY:[6,0]},{color:Dp,dashArrayX:[[1,0],[1,6]],dashArrayY:[1,0,6,0],rotation:Math.PI/4},{color:Dp,symbol:"triangle",dashArrayX:[[9,9],[0,9,9,0]],dashArrayY:[7,2],symbolSize:.75}]}},textStyle:{fontFamily:Cp.match(/^Win/)?"Microsoft YaHei":"sans-serif",fontSize:12,fontStyle:"normal",fontWeight:"normal"},blendMode:null,stateAnimation:{duration:300,easing:"cubicOut"},animation:"auto",animationDuration:1e3,animationDurationUpdate:500,animationEasing:"cubicInOut",animationEasingUpdate:"cubicInOut",animationThreshold:2e3,progressiveThreshold:3e3,progressive:400,hoverLayerThreshold:3e3,useUTC:!1},kp=ft(["tooltip","label","itemName","itemId","itemGroupId","seriesName"]),Lp="original",Pp="arrayRows",Op="objectRows",Rp="keyedColumns",Np="typedArray",Ep="unknown",zp="column",Vp="row",Bp=1,Fp=2,Gp=3,Wp=So();function Hp(t,e,n){var i={},r=Up(e);if(!r||!t)return i;var o,a,s=[],l=[],u=e.ecModel,h=Wp(u).datasetMap,c=r.uid+"_"+n.seriesLayoutBy;E(t=t.slice(),(function(e,n){var r=q(e)?e:t[n]={name:e};"ordinal"===r.type&&null==o&&(o=n,a=f(r)),i[r.name]=[]}));var p=h.get(c)||h.set(c,{categoryWayDim:a,valueWayDim:0});function d(t,e,n){for(var i=0;i<n;i++)t.push(e+i)}function f(t){var e=t.dimsDef;return e?e.length:1}return E(t,(function(t,e){var n=t.name,r=f(t);if(null==o){var a=p.valueWayDim;d(i[n],a,r),d(l,a,r),p.valueWayDim+=r}else if(o===e)d(i[n],0,r),d(s,0,r);else{a=p.categoryWayDim;d(i[n],a,r),d(l,a,r),p.categoryWayDim+=r}})),s.length&&(i.itemName=s),l.length&&(i.seriesName=l),i}function Yp(t,e,n){var i={};if(!Up(t))return i;var r,o=e.sourceFormat,a=e.dimensionsDefine;o!==Op&&o!==Rp||E(a,(function(t,e){"name"===(q(t)?t.name:t)&&(r=e)}));var s=function(){for(var t={},i={},s=[],l=0,u=Math.min(5,n);l<u;l++){var h=Zp(e.data,o,e.seriesLayoutBy,a,e.startIndex,l);s.push(h);var c=h===Gp;if(c&&null==t.v&&l!==r&&(t.v=l),(null==t.n||t.n===t.v||!c&&s[t.n]===Gp)&&(t.n=l),p(t)&&s[t.n]!==Gp)return t;c||(h===Fp&&null==i.v&&l!==r&&(i.v=l),null!=i.n&&i.n!==i.v||(i.n=l))}function p(t){return null!=t.v&&null!=t.n}return p(t)?t:p(i)?i:null}();if(s){i.value=[s.v];var l=null!=r?r:s.n;i.itemName=[l],i.seriesName=[l]}return i}function Up(t){if(!t.get("data",!0))return Ao(t.ecModel,"dataset",{index:t.get("datasetIndex",!0),id:t.get("datasetId",!0)},Co).models[0]}function Xp(t,e){return Zp(t.data,t.sourceFormat,t.seriesLayoutBy,t.dimensionsDefine,t.startIndex,e)}function Zp(t,e,n,i,r,o){var a,s,l;if($(t))return Gp;if(i){var u=i[o];q(u)?(s=u.name,l=u.type):X(u)&&(s=u)}if(null!=l)return"ordinal"===l?Bp:Gp;if(e===Pp){var h=t;if(n===Vp){for(var c=h[o],p=0;p<(c||[]).length&&p<5;p++)if(null!=(a=m(c[r+p])))return a}else for(p=0;p<h.length&&p<5;p++){var d=h[r+p];if(d&&null!=(a=m(d[o])))return a}}else if(e===Op){var f=t;if(!s)return Gp;for(p=0;p<f.length&&p<5;p++){if((y=f[p])&&null!=(a=m(y[s])))return a}}else if(e===Rp){if(!s)return Gp;if(!(c=t[s])||$(c))return Gp;for(p=0;p<c.length&&p<5;p++)if(null!=(a=m(c[p])))return a}else if(e===Lp){var g=t;for(p=0;p<g.length&&p<5;p++){var y,v=fo(y=g[p]);if(!Y(v))return Gp;if(null!=(a=m(v[o])))return a}}function m(t){var e=X(t);return null!=t&&isFinite(t)&&""!==t?e?Fp:Gp:e&&"-"!==t?Bp:void 0}return Gp}var jp=ft();var qp,Kp,$p,Jp=So(),Qp=So(),td=function(){function t(){}return t.prototype.getColorFromPalette=function(t,e,n){var i=ho(this.get("color",!0)),r=this.get("colorLayer",!0);return nd(this,Jp,i,r,t,e,n)},t.prototype.clearColorPalette=function(){!function(t,e){e(t).paletteIdx=0,e(t).paletteNameMap={}}(this,Jp)},t}();function ed(t,e,n,i){var r=ho(t.get(["aria","decal","decals"]));return nd(t,Qp,r,null,e,n,i)}function nd(t,e,n,i,r,o,a){var s=e(o=o||t),l=s.paletteIdx||0,u=s.paletteNameMap=s.paletteNameMap||{};if(u.hasOwnProperty(r))return u[r];var h=null!=a&&i?function(t,e){for(var n=t.length,i=0;i<n;i++)if(t[i].length>e)return t[i];return t[n-1]}(i,a):n;if((h=h||n)&&h.length){var c=h[l];return r&&(u[r]=c),s.paletteIdx=(l+1)%h.length,c}}var id=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.init=function(t,e,n,i,r,o){i=i||{},this.option=null,this._theme=new dc(i),this._locale=new dc(r),this._optionManager=o},e.prototype.setOption=function(t,e,n){var i=ad(e);this._optionManager.setOption(t,n,i),this._resetOption(null,i)},e.prototype.resetOption=function(t,e){return this._resetOption(t,ad(e))},e.prototype._resetOption=function(t,e){var n=!1,i=this._optionManager;if(!t||"recreate"===t){var r=i.mountOption("recreate"===t);0,this.option&&"recreate"!==t?(this.restoreData(),this._mergeOption(r,e)):$p(this,r),n=!0}if("timeline"!==t&&"media"!==t||this.restoreData(),!t||"recreate"===t||"timeline"===t){var o=i.getTimelineOption(this);o&&(n=!0,this._mergeOption(o,e))}if(!t||"recreate"===t||"media"===t){var a=i.getMediaOption(this);a.length&&E(a,(function(t){n=!0,this._mergeOption(t,e)}),this)}return n},e.prototype.mergeOption=function(t){this._mergeOption(t,null)},e.prototype._mergeOption=function(t,e){var n=this.option,i=this._componentsMap,r=this._componentsCount,o=[],a=ft(),s=e&&e.replaceMergeMainTypeMap;Wp(this).datasetMap=ft(),E(t,(function(t,e){null!=t&&(Tp.hasClass(e)?e&&(o.push(e),a.set(e,!0)):n[e]=null==n[e]?T(t):C(n[e],t,!0))})),s&&s.each((function(t,e){Tp.hasClass(e)&&!a.get(e)&&(o.push(e),a.set(e,!0))})),Tp.topologicalTravel(o,Tp.getAllClassMainTypes(),(function(e){var o=function(t,e,n){var i=jp.get(e);if(!i)return n;var r=i(t);return r?n.concat(r):n}(this,e,ho(t[e])),a=i.get(e),l=a?s&&s.get(e)?"replaceMerge":"normalMerge":"replaceAll",u=yo(a,o,l);(function(t,e,n){E(t,(function(t){var i=t.newOption;q(i)&&(t.keyInfo.mainType=e,t.keyInfo.subType=function(t,e,n,i){return e.type?e.type:n?n.subType:i.determineSubType(t,e)}(e,i,t.existing,n))}))})(u,e,Tp),n[e]=null,i.set(e,null),r.set(e,0);var h,c=[],p=[],d=0;E(u,(function(t,n){var i=t.existing,r=t.newOption;if(r){var o="series"===e,a=Tp.getClass(e,t.keyInfo.subType,!o);if(!a)return;if("tooltip"===e){if(h)return void 0;h=!0}if(i&&i.constructor===a)i.name=t.keyInfo.name,i.mergeOption(r,this),i.optionUpdated(r,!1);else{var s=A({componentIndex:n},t.keyInfo);A(i=new a(r,this,this,s),s),t.brandNew&&(i.__requireNewView=!0),i.init(r,this,this),i.optionUpdated(null,!0)}}else i&&(i.mergeOption({},this),i.optionUpdated({},!1));i?(c.push(i.option),p.push(i),d++):(c.push(void 0),p.push(void 0))}),this),n[e]=c,i.set(e,p),r.set(e,d),"series"===e&&qp(this)}),this),this._seriesIndices||qp(this)},e.prototype.getOption=function(){var t=T(this.option);return E(t,(function(e,n){if(Tp.hasClass(n)){for(var i=ho(e),r=i.length,o=!1,a=r-1;a>=0;a--)i[a]&&!bo(i[a])?o=!0:(i[a]=null,!o&&r--);i.length=r,t[n]=i}})),delete t["\0_ec_inner"],t},e.prototype.getTheme=function(){return this._theme},e.prototype.getLocaleModel=function(){return this._locale},e.prototype.setUpdatePayload=function(t){this._payload=t},e.prototype.getUpdatePayload=function(){return this._payload},e.prototype.getComponent=function(t,e){var n=this._componentsMap.get(t);if(n){var i=n[e||0];if(i)return i;if(null==e)for(var r=0;r<n.length;r++)if(n[r])return n[r]}},e.prototype.queryComponents=function(t){var e=t.mainType;if(!e)return[];var n,i=t.index,r=t.id,o=t.name,a=this._componentsMap.get(e);return a&&a.length?(null!=i?(n=[],E(ho(i),(function(t){a[t]&&n.push(a[t])}))):n=null!=r?rd("id",r,a):null!=o?rd("name",o,a):B(a,(function(t){return!!t})),od(n,t)):[]},e.prototype.findComponents=function(t){var e,n,i,r,o,a=t.query,s=t.mainType,l=(n=s+"Index",i=s+"Id",r=s+"Name",!(e=a)||null==e[n]&&null==e[i]&&null==e[r]?null:{mainType:s,index:e[n],id:e[i],name:e[r]}),u=l?this.queryComponents(l):B(this._componentsMap.get(s),(function(t){return!!t}));return o=od(u,t),t.filter?B(o,t.filter):o},e.prototype.eachComponent=function(t,e,n){var i=this._componentsMap;if(U(t)){var r=e,o=t;i.each((function(t,e){for(var n=0;t&&n<t.length;n++){var i=t[n];i&&o.call(r,e,i,i.componentIndex)}}))}else for(var a=X(t)?i.get(t):q(t)?this.findComponents(t):null,s=0;a&&s<a.length;s++){var l=a[s];l&&e.call(n,l,l.componentIndex)}},e.prototype.getSeriesByName=function(t){var e=xo(t,null);return B(this._componentsMap.get("series"),(function(t){return!!t&&null!=e&&t.name===e}))},e.prototype.getSeriesByIndex=function(t){return this._componentsMap.get("series")[t]},e.prototype.getSeriesByType=function(t){return B(this._componentsMap.get("series"),(function(e){return!!e&&e.subType===t}))},e.prototype.getSeries=function(){return B(this._componentsMap.get("series"),(function(t){return!!t}))},e.prototype.getSeriesCount=function(){return this._componentsCount.get("series")},e.prototype.eachSeries=function(t,e){Kp(this),E(this._seriesIndices,(function(n){var i=this._componentsMap.get("series")[n];t.call(e,i,n)}),this)},e.prototype.eachRawSeries=function(t,e){E(this._componentsMap.get("series"),(function(n){n&&t.call(e,n,n.componentIndex)}))},e.prototype.eachSeriesByType=function(t,e,n){Kp(this),E(this._seriesIndices,(function(i){var r=this._componentsMap.get("series")[i];r.subType===t&&e.call(n,r,i)}),this)},e.prototype.eachRawSeriesByType=function(t,e,n){return E(this.getSeriesByType(t),e,n)},e.prototype.isSeriesFiltered=function(t){return Kp(this),null==this._seriesIndicesMap.get(t.componentIndex)},e.prototype.getCurrentSeriesIndices=function(){return(this._seriesIndices||[]).slice()},e.prototype.filterSeries=function(t,e){Kp(this);var n=[];E(this._seriesIndices,(function(i){var r=this._componentsMap.get("series")[i];t.call(e,r,i)&&n.push(i)}),this),this._seriesIndices=n,this._seriesIndicesMap=ft(n)},e.prototype.restoreData=function(t){qp(this);var e=this._componentsMap,n=[];e.each((function(t,e){Tp.hasClass(e)&&n.push(e)})),Tp.topologicalTravel(n,Tp.getAllClassMainTypes(),(function(n){E(e.get(n),(function(e){!e||"series"===n&&function(t,e){if(e){var n=e.seriesIndex,i=e.seriesId,r=e.seriesName;return null!=n&&t.componentIndex!==n||null!=i&&t.id!==i||null!=r&&t.name!==r}}(e,t)||e.restoreData()}))}))},e.internalField=(qp=function(t){var e=t._seriesIndices=[];E(t._componentsMap.get("series"),(function(t){t&&e.push(t.componentIndex)})),t._seriesIndicesMap=ft(e)},Kp=function(t){},void($p=function(t,e){t.option={},t.option["\0_ec_inner"]=1,t._componentsMap=ft({series:[]}),t._componentsCount=ft();var n=e.aria;q(n)&&null==n.enabled&&(n.enabled=!0),function(t,e){var n=t.color&&!t.colorLayer;E(e,(function(e,i){"colorLayer"===i&&n||Tp.hasClass(i)||("object"==typeof e?t[i]=t[i]?C(t[i],e,!1):T(e):null==t[i]&&(t[i]=e))}))}(e,t._theme.option),C(e,Ap,!1),t._mergeOption(e,null)})),e}(dc);function rd(t,e,n){if(Y(e)){var i=ft();return E(e,(function(t){null!=t&&(null!=xo(t,null)&&i.set(t,!0))})),B(n,(function(e){return e&&i.get(e[t])}))}var r=xo(e,null);return B(n,(function(e){return e&&null!=r&&e[t]===r}))}function od(t,e){return e.hasOwnProperty("subType")?B(t,(function(t){return t&&t.subType===e.subType})):t}function ad(t){var e=ft();return t&&E(ho(t.replaceMerge),(function(t){e.set(t,!0)})),{replaceMergeMainTypeMap:e}}R(id,td);var sd=["getDom","getZr","getWidth","getHeight","getDevicePixelRatio","dispatchAction","isSSR","isDisposed","on","off","getDataURL","getConnectedDataURL","getOption","getId","updateLabelLayout"],ld=function(t){E(sd,(function(e){this[e]=W(t[e],t)}),this)},ud={},hd=function(){function t(){this._coordinateSystems=[]}return t.prototype.create=function(t,e){var n=[];E(ud,(function(i,r){var o=i.create(t,e);n=n.concat(o||[])})),this._coordinateSystems=n},t.prototype.update=function(t,e){E(this._coordinateSystems,(function(n){n.update&&n.update(t,e)}))},t.prototype.getCoordinateSystems=function(){return this._coordinateSystems.slice()},t.register=function(t,e){ud[t]=e},t.get=function(t){return ud[t]},t}(),cd=/^(min|max)?(.+)$/,pd=function(){function t(t){this._timelineOptions=[],this._mediaList=[],this._currentMediaIndices=[],this._api=t}return t.prototype.setOption=function(t,e,n){t&&(E(ho(t.series),(function(t){t&&t.data&&$(t.data)&&ct(t.data)})),E(ho(t.dataset),(function(t){t&&t.source&&$(t.source)&&ct(t.source)}))),t=T(t);var i=this._optionBackup,r=function(t,e,n){var i,r,o=[],a=t.baseOption,s=t.timeline,l=t.options,u=t.media,h=!!t.media,c=!!(l||s||a&&a.timeline);a?(r=a).timeline||(r.timeline=s):((c||h)&&(t.options=t.media=null),r=t);h&&Y(u)&&E(u,(function(t){t&&t.option&&(t.query?o.push(t):i||(i=t))}));function p(t){E(e,(function(e){e(t,n)}))}return p(r),E(l,(function(t){return p(t)})),E(o,(function(t){return p(t.option)})),{baseOption:r,timelineOptions:l||[],mediaDefault:i,mediaList:o}}(t,e,!i);this._newBaseOption=r.baseOption,i?(r.timelineOptions.length&&(i.timelineOptions=r.timelineOptions),r.mediaList.length&&(i.mediaList=r.mediaList),r.mediaDefault&&(i.mediaDefault=r.mediaDefault)):this._optionBackup=r},t.prototype.mountOption=function(t){var e=this._optionBackup;return this._timelineOptions=e.timelineOptions,this._mediaList=e.mediaList,this._mediaDefault=e.mediaDefault,this._currentMediaIndices=[],T(t?e.baseOption:this._newBaseOption)},t.prototype.getTimelineOption=function(t){var e,n=this._timelineOptions;if(n.length){var i=t.getComponent("timeline");i&&(e=T(n[i.getCurrentIndex()]))}return e},t.prototype.getMediaOption=function(t){var e,n,i=this._api.getWidth(),r=this._api.getHeight(),o=this._mediaList,a=this._mediaDefault,s=[],l=[];if(!o.length&&!a)return l;for(var u=0,h=o.length;u<h;u++)dd(o[u].query,i,r)&&s.push(u);return!s.length&&a&&(s=[-1]),s.length&&(e=s,n=this._currentMediaIndices,e.join(",")!==n.join(","))&&(l=z(s,(function(t){return T(-1===t?a.option:o[t].option)}))),this._currentMediaIndices=s,l},t}();function dd(t,e,n){var i={width:e,height:n,aspectratio:e/n},r=!0;return E(t,(function(t,e){var n=e.match(cd);if(n&&n[1]&&n[2]){var o=n[1],a=n[2].toLowerCase();(function(t,e,n){return"min"===n?t>=e:"max"===n?t<=e:t===e})(i[a],t,o)||(r=!1)}})),r}var fd=E,gd=q,yd=["areaStyle","lineStyle","nodeStyle","linkStyle","chordStyle","label","labelLine"];function vd(t){var e=t&&t.itemStyle;if(e)for(var n=0,i=yd.length;n<i;n++){var r=yd[n],o=e.normal,a=e.emphasis;o&&o[r]&&(t[r]=t[r]||{},t[r].normal?C(t[r].normal,o[r]):t[r].normal=o[r],o[r]=null),a&&a[r]&&(t[r]=t[r]||{},t[r].emphasis?C(t[r].emphasis,a[r]):t[r].emphasis=a[r],a[r]=null)}}function md(t,e,n){if(t&&t[e]&&(t[e].normal||t[e].emphasis)){var i=t[e].normal,r=t[e].emphasis;i&&(n?(t[e].normal=t[e].emphasis=null,k(t[e],i)):t[e]=i),r&&(t.emphasis=t.emphasis||{},t.emphasis[e]=r,r.focus&&(t.emphasis.focus=r.focus),r.blurScope&&(t.emphasis.blurScope=r.blurScope))}}function xd(t){md(t,"itemStyle"),md(t,"lineStyle"),md(t,"areaStyle"),md(t,"label"),md(t,"labelLine"),md(t,"upperLabel"),md(t,"edgeLabel")}function _d(t,e){var n=gd(t)&&t[e],i=gd(n)&&n.textStyle;if(i){0;for(var r=0,o=po.length;r<o;r++){var a=po[r];i.hasOwnProperty(a)&&(n[a]=i[a])}}}function bd(t){t&&(xd(t),_d(t,"label"),t.emphasis&&_d(t.emphasis,"label"))}function wd(t){return Y(t)?t:t?[t]:[]}function Sd(t){return(Y(t)?t[0]:t)||{}}function Md(t,e){fd(wd(t.series),(function(t){gd(t)&&function(t){if(gd(t)){vd(t),xd(t),_d(t,"label"),_d(t,"upperLabel"),_d(t,"edgeLabel"),t.emphasis&&(_d(t.emphasis,"label"),_d(t.emphasis,"upperLabel"),_d(t.emphasis,"edgeLabel"));var e=t.markPoint;e&&(vd(e),bd(e));var n=t.markLine;n&&(vd(n),bd(n));var i=t.markArea;i&&bd(i);var r=t.data;if("graph"===t.type){r=r||t.nodes;var o=t.links||t.edges;if(o&&!$(o))for(var a=0;a<o.length;a++)bd(o[a]);E(t.categories,(function(t){xd(t)}))}if(r&&!$(r))for(a=0;a<r.length;a++)bd(r[a]);if((e=t.markPoint)&&e.data){var s=e.data;for(a=0;a<s.length;a++)bd(s[a])}if((n=t.markLine)&&n.data){var l=n.data;for(a=0;a<l.length;a++)Y(l[a])?(bd(l[a][0]),bd(l[a][1])):bd(l[a])}"gauge"===t.type?(_d(t,"axisLabel"),_d(t,"title"),_d(t,"detail")):"treemap"===t.type?(md(t.breadcrumb,"itemStyle"),E(t.levels,(function(t){xd(t)}))):"tree"===t.type&&xd(t.leaves)}}(t)}));var n=["xAxis","yAxis","radiusAxis","angleAxis","singleAxis","parallelAxis","radar"];e&&n.push("valueAxis","categoryAxis","logAxis","timeAxis"),fd(n,(function(e){fd(wd(t[e]),(function(t){t&&(_d(t,"axisLabel"),_d(t.axisPointer,"label"))}))})),fd(wd(t.parallel),(function(t){var e=t&&t.parallelAxisDefault;_d(e,"axisLabel"),_d(e&&e.axisPointer,"label")})),fd(wd(t.calendar),(function(t){md(t,"itemStyle"),_d(t,"dayLabel"),_d(t,"monthLabel"),_d(t,"yearLabel")})),fd(wd(t.radar),(function(t){_d(t,"name"),t.name&&null==t.axisName&&(t.axisName=t.name,delete t.name),null!=t.nameGap&&null==t.axisNameGap&&(t.axisNameGap=t.nameGap,delete t.nameGap)})),fd(wd(t.geo),(function(t){gd(t)&&(bd(t),fd(wd(t.regions),(function(t){bd(t)})))})),fd(wd(t.timeline),(function(t){bd(t),md(t,"label"),md(t,"itemStyle"),md(t,"controlStyle",!0);var e=t.data;Y(e)&&E(e,(function(t){q(t)&&(md(t,"label"),md(t,"itemStyle"))}))})),fd(wd(t.toolbox),(function(t){md(t,"iconStyle"),fd(t.feature,(function(t){md(t,"iconStyle")}))})),_d(Sd(t.axisPointer),"label"),_d(Sd(t.tooltip).axisPointer,"label")}function Id(t){t&&E(Td,(function(e){e[0]in t&&!(e[1]in t)&&(t[e[1]]=t[e[0]])}))}var Td=[["x","left"],["y","top"],["x2","right"],["y2","bottom"]],Cd=["grid","geo","parallel","legend","toolbox","title","visualMap","dataZoom","timeline"],Dd=[["borderRadius","barBorderRadius"],["borderColor","barBorderColor"],["borderWidth","barBorderWidth"]];function Ad(t){var e=t&&t.itemStyle;if(e)for(var n=0;n<Dd.length;n++){var i=Dd[n][1],r=Dd[n][0];null!=e[i]&&(e[r]=e[i])}}function kd(t){t&&"edge"===t.alignTo&&null!=t.margin&&null==t.edgeDistance&&(t.edgeDistance=t.margin)}function Ld(t){t&&t.downplay&&!t.blur&&(t.blur=t.downplay)}function Pd(t,e){if(t)for(var n=0;n<t.length;n++)e(t[n]),t[n]&&Pd(t[n].children,e)}function Od(t,e){Md(t,e),t.series=ho(t.series),E(t.series,(function(t){if(q(t)){var e=t.type;if("line"===e)null!=t.clipOverflow&&(t.clip=t.clipOverflow);else if("pie"===e||"gauge"===e){if(null!=t.clockWise&&(t.clockwise=t.clockWise),kd(t.label),(r=t.data)&&!$(r))for(var n=0;n<r.length;n++)kd(r[n]);null!=t.hoverOffset&&(t.emphasis=t.emphasis||{},(t.emphasis.scaleSize=null)&&(t.emphasis.scaleSize=t.hoverOffset))}else if("gauge"===e){var i=function(t,e){for(var n=e.split(","),i=t,r=0;r<n.length&&null!=(i=i&&i[n[r]]);r++);return i}(t,"pointer.color");null!=i&&function(t,e,n,i){for(var r,o=e.split(","),a=t,s=0;s<o.length-1;s++)null==a[r=o[s]]&&(a[r]={}),a=a[r];(i||null==a[o[s]])&&(a[o[s]]=n)}(t,"itemStyle.color",i)}else if("bar"===e){var r;if(Ad(t),Ad(t.backgroundStyle),Ad(t.emphasis),(r=t.data)&&!$(r))for(n=0;n<r.length;n++)"object"==typeof r[n]&&(Ad(r[n]),Ad(r[n]&&r[n].emphasis))}else if("sunburst"===e){var o=t.highlightPolicy;o&&(t.emphasis=t.emphasis||{},t.emphasis.focus||(t.emphasis.focus=o)),Ld(t),Pd(t.data,Ld)}else"graph"===e||"sankey"===e?function(t){t&&null!=t.focusNodeAdjacency&&(t.emphasis=t.emphasis||{},null==t.emphasis.focus&&(t.emphasis.focus="adjacency"))}(t):"map"===e&&(t.mapType&&!t.map&&(t.map=t.mapType),t.mapLocation&&k(t,t.mapLocation));null!=t.hoverAnimation&&(t.emphasis=t.emphasis||{},t.emphasis&&null==t.emphasis.scale&&(t.emphasis.scale=t.hoverAnimation)),Id(t)}})),t.dataRange&&(t.visualMap=t.dataRange),E(Cd,(function(e){var n=t[e];n&&(Y(n)||(n=[n]),E(n,(function(t){Id(t)})))}))}function Rd(t){E(t,(function(e,n){var i=[],r=[NaN,NaN],o=[e.stackResultDimension,e.stackedOverDimension],a=e.data,s=e.isStackedByIndex,l=e.seriesModel.get("stackStrategy")||"samesign";a.modify(o,(function(o,u,h){var c,p,d=a.get(e.stackedDimension,h);if(isNaN(d))return r;s?p=a.getRawIndex(h):c=a.get(e.stackedByDimension,h);for(var f=NaN,g=n-1;g>=0;g--){var y=t[g];if(s||(p=y.data.rawIndexOf(y.stackedByDimension,c)),p>=0){var v=y.data.getByRawIndex(y.stackResultDimension,p);if("all"===l||"positive"===l&&v>0||"negative"===l&&v<0||"samesign"===l&&d>=0&&v>0||"samesign"===l&&d<=0&&v<0){d=Hr(d,v),f=v;break}}}return i[0]=d,i[1]=f,i}))}))}var Nd,Ed,zd,Vd,Bd,Fd=function(t){this.data=t.data||(t.sourceFormat===Rp?{}:[]),this.sourceFormat=t.sourceFormat||Ep,this.seriesLayoutBy=t.seriesLayoutBy||zp,this.startIndex=t.startIndex||0,this.dimensionsDetectedCount=t.dimensionsDetectedCount,this.metaRawOption=t.metaRawOption;var e=this.dimensionsDefine=t.dimensionsDefine;if(e)for(var n=0;n<e.length;n++){var i=e[n];null==i.type&&Xp(this,n)===Bp&&(i.type="ordinal")}};function Gd(t){return t instanceof Fd}function Wd(t,e,n){n=n||Yd(t);var i=e.seriesLayoutBy,r=function(t,e,n,i,r){var o,a;if(!t)return{dimensionsDefine:Ud(r),startIndex:a,dimensionsDetectedCount:o};if(e===Pp){var s=t;"auto"===i||null==i?Xd((function(t){null!=t&&"-"!==t&&(X(t)?null==a&&(a=1):a=0)}),n,s,10):a=j(i)?i:i?1:0,r||1!==a||(r=[],Xd((function(t,e){r[e]=null!=t?t+"":""}),n,s,1/0)),o=r?r.length:n===Vp?s.length:s[0]?s[0].length:null}else if(e===Op)r||(r=function(t){var e,n=0;for(;n<t.length&&!(e=t[n++]););if(e){var i=[];return E(e,(function(t,e){i.push(e)})),i}}(t));else if(e===Rp)r||(r=[],E(t,(function(t,e){r.push(e)})));else if(e===Lp){var l=fo(t[0]);o=Y(l)&&l.length||1}return{startIndex:a,dimensionsDefine:Ud(r),dimensionsDetectedCount:o}}(t,n,i,e.sourceHeader,e.dimensions);return new Fd({data:t,sourceFormat:n,seriesLayoutBy:i,dimensionsDefine:r.dimensionsDefine,startIndex:r.startIndex,dimensionsDetectedCount:r.dimensionsDetectedCount,metaRawOption:T(e)})}function Hd(t){return new Fd({data:t,sourceFormat:$(t)?Np:Lp})}function Yd(t){var e=Ep;if($(t))e=Np;else if(Y(t)){0===t.length&&(e=Pp);for(var n=0,i=t.length;n<i;n++){var r=t[n];if(null!=r){if(Y(r)){e=Pp;break}if(q(r)){e=Op;break}}}}else if(q(t))for(var o in t)if(mt(t,o)&&N(t[o])){e=Rp;break}return e}function Ud(t){if(t){var e=ft();return z(t,(function(t,n){var i={name:(t=q(t)?t:{name:t}).name,displayName:t.displayName,type:t.type};if(null==i.name)return i;i.name+="",null==i.displayName&&(i.displayName=i.name);var r=e.get(i.name);return r?i.name+="-"+r.count++:e.set(i.name,{count:1}),i}))}}function Xd(t,e,n,i){if(e===Vp)for(var r=0;r<n.length&&r<i;r++)t(n[r]?n[r][0]:null,r);else{var o=n[0]||[];for(r=0;r<o.length&&r<i;r++)t(o[r],r)}}function Zd(t){var e=t.sourceFormat;return e===Op||e===Rp}var jd=function(){function t(t,e){var n=Gd(t)?t:Hd(t);this._source=n;var i=this._data=n.data;n.sourceFormat===Np&&(this._offset=0,this._dimSize=e,this._data=i),Bd(this,i,n)}return t.prototype.getSource=function(){return this._source},t.prototype.count=function(){return 0},t.prototype.getItem=function(t,e){},t.prototype.appendData=function(t){},t.prototype.clean=function(){},t.protoInitialize=function(){var e=t.prototype;e.pure=!1,e.persistent=!0}(),t.internalField=function(){var t;Bd=function(t,r,o){var a=o.sourceFormat,s=o.seriesLayoutBy,l=o.startIndex,u=o.dimensionsDefine,h=Vd[of(a,s)];if(A(t,h),a===Np)t.getItem=e,t.count=i,t.fillStorage=n;else{var c=$d(a,s);t.getItem=W(c,null,r,l,u);var p=tf(a,s);t.count=W(p,null,r,l,u)}};var e=function(t,e){t-=this._offset,e=e||[];for(var n=this._data,i=this._dimSize,r=i*t,o=0;o<i;o++)e[o]=n[r+o];return e},n=function(t,e,n,i){for(var r=this._data,o=this._dimSize,a=0;a<o;a++){for(var s=i[a],l=null==s[0]?1/0:s[0],u=null==s[1]?-1/0:s[1],h=e-t,c=n[a],p=0;p<h;p++){var d=r[p*o+a];c[t+p]=d,d<l&&(l=d),d>u&&(u=d)}s[0]=l,s[1]=u}},i=function(){return this._data?this._data.length/this._dimSize:0};function r(t){for(var e=0;e<t.length;e++)this._data.push(t[e])}(t={}).arrayRows_column={pure:!0,appendData:r},t.arrayRows_row={pure:!0,appendData:function(){throw new Error('Do not support appendData when set seriesLayoutBy: "row".')}},t.objectRows={pure:!0,appendData:r},t.keyedColumns={pure:!0,appendData:function(t){var e=this._data;E(t,(function(t,n){for(var i=e[n]||(e[n]=[]),r=0;r<(t||[]).length;r++)i.push(t[r])}))}},t.original={appendData:r},t.typedArray={persistent:!1,pure:!0,appendData:function(t){this._data=t},clean:function(){this._offset+=this.count(),this._data=null}},Vd=t}(),t}(),qd=function(t,e,n,i){return t[i]},Kd=((Nd={}).arrayRows_column=function(t,e,n,i){return t[i+e]},Nd.arrayRows_row=function(t,e,n,i,r){i+=e;for(var o=r||[],a=t,s=0;s<a.length;s++){var l=a[s];o[s]=l?l[i]:null}return o},Nd.objectRows=qd,Nd.keyedColumns=function(t,e,n,i,r){for(var o=r||[],a=0;a<n.length;a++){var s=n[a].name;0;var l=t[s];o[a]=l?l[i]:null}return o},Nd.original=qd,Nd);function $d(t,e){var n=Kd[of(t,e)];return n}var Jd=function(t,e,n){return t.length},Qd=((Ed={}).arrayRows_column=function(t,e,n){return Math.max(0,t.length-e)},Ed.arrayRows_row=function(t,e,n){var i=t[0];return i?Math.max(0,i.length-e):0},Ed.objectRows=Jd,Ed.keyedColumns=function(t,e,n){var i=n[0].name;var r=t[i];return r?r.length:0},Ed.original=Jd,Ed);function tf(t,e){var n=Qd[of(t,e)];return n}var ef=function(t,e,n){return t[e]},nf=((zd={}).arrayRows=ef,zd.objectRows=function(t,e,n){return t[n]},zd.keyedColumns=ef,zd.original=function(t,e,n){var i=fo(t);return i instanceof Array?i[e]:i},zd.typedArray=ef,zd);function rf(t){var e=nf[t];return e}function of(t,e){return t===Pp?t+"_"+e:t}function af(t,e,n){if(t){var i=t.getRawDataItem(e);if(null!=i){var r=t.getStore(),o=r.getSource().sourceFormat;if(null!=n){var a=t.getDimensionIndex(n),s=r.getDimensionProperty(a);return rf(o)(i,a,s)}var l=i;return o===Lp&&(l=fo(i)),l}}}var sf=/\{@(.+?)\}/g,lf=function(){function t(){}return t.prototype.getDataParams=function(t,e){var n=this.getData(e),i=this.getRawValue(t,e),r=n.getRawIndex(t),o=n.getName(t),a=n.getRawDataItem(t),s=n.getItemVisual(t,"style"),l=s&&s[n.getItemVisual(t,"drawType")||"fill"],u=s&&s.stroke,h=this.mainType,c="series"===h,p=n.userOutput&&n.userOutput.get();return{componentType:h,componentSubType:this.subType,componentIndex:this.componentIndex,seriesType:c?this.subType:null,seriesIndex:this.seriesIndex,seriesId:c?this.id:null,seriesName:c?this.name:null,name:o,dataIndex:r,data:a,dataType:e,value:i,color:l,borderColor:u,dimensionNames:p?p.fullDimensions:null,encode:p?p.encode:null,$vars:["seriesName","name","value"]}},t.prototype.getFormattedLabel=function(t,e,n,i,r,o){e=e||"normal";var a=this.getData(n),s=this.getDataParams(t,n);(o&&(s.value=o.interpolatedValue),null!=i&&Y(s.value)&&(s.value=s.value[i]),r)||(r=a.getItemModel(t).get("normal"===e?["label","formatter"]:[e,"label","formatter"]));return U(r)?(s.status=e,s.dimensionIndex=i,r(s)):X(r)?hp(r,s).replace(sf,(function(e,n){var i=n.length,r=n;"["===r.charAt(0)&&"]"===r.charAt(i-1)&&(r=+r.slice(1,i-1));var s=af(a,t,r);if(o&&Y(o.interpolatedValue)){var l=a.getDimensionIndex(r);l>=0&&(s=o.interpolatedValue[l])}return null!=s?s+"":""})):void 0},t.prototype.getRawValue=function(t,e){return af(this.getData(e),t)},t.prototype.formatTooltip=function(t,e,n){},t}();function uf(t){var e,n;return q(t)?t.type&&(n=t):e=t,{text:e,frag:n}}function hf(t){return new cf(t)}var cf=function(){function t(t){t=t||{},this._reset=t.reset,this._plan=t.plan,this._count=t.count,this._onDirty=t.onDirty,this._dirty=!0}return t.prototype.perform=function(t){var e,n=this._upstream,i=t&&t.skip;if(this._dirty&&n){var r=this.context;r.data=r.outputData=n.context.outputData}this.__pipeline&&(this.__pipeline.currentTask=this),this._plan&&!i&&(e=this._plan(this.context));var o,a=h(this._modBy),s=this._modDataCount||0,l=h(t&&t.modBy),u=t&&t.modDataCount||0;function h(t){return!(t>=1)&&(t=1),t}a===l&&s===u||(e="reset"),(this._dirty||"reset"===e)&&(this._dirty=!1,o=this._doReset(i)),this._modBy=l,this._modDataCount=u;var c=t&&t.step;if(this._dueEnd=n?n._outputDueEnd:this._count?this._count(this.context):1/0,this._progress){var p=this._dueIndex,d=Math.min(null!=c?this._dueIndex+c:1/0,this._dueEnd);if(!i&&(o||p<d)){var f=this._progress;if(Y(f))for(var g=0;g<f.length;g++)this._doProgress(f[g],p,d,l,u);else this._doProgress(f,p,d,l,u)}this._dueIndex=d;var y=null!=this._settedOutputEnd?this._settedOutputEnd:d;0,this._outputDueEnd=y}else this._dueIndex=this._outputDueEnd=null!=this._settedOutputEnd?this._settedOutputEnd:this._dueEnd;return this.unfinished()},t.prototype.dirty=function(){this._dirty=!0,this._onDirty&&this._onDirty(this.context)},t.prototype._doProgress=function(t,e,n,i,r){pf.reset(e,n,i,r),this._callingProgress=t,this._callingProgress({start:e,end:n,count:n-e,next:pf.next},this.context)},t.prototype._doReset=function(t){var e,n;this._dueIndex=this._outputDueEnd=this._dueEnd=0,this._settedOutputEnd=null,!t&&this._reset&&((e=this._reset(this.context))&&e.progress&&(n=e.forceFirstProgress,e=e.progress),Y(e)&&!e.length&&(e=null)),this._progress=e,this._modBy=this._modDataCount=null;var i=this._downstream;return i&&i.dirty(),n},t.prototype.unfinished=function(){return this._progress&&this._dueIndex<this._dueEnd},t.prototype.pipe=function(t){(this._downstream!==t||this._dirty)&&(this._downstream=t,t._upstream=this,t.dirty())},t.prototype.dispose=function(){this._disposed||(this._upstream&&(this._upstream._downstream=null),this._downstream&&(this._downstream._upstream=null),this._dirty=!1,this._disposed=!0)},t.prototype.getUpstream=function(){return this._upstream},t.prototype.getDownstream=function(){return this._downstream},t.prototype.setOutputEnd=function(t){this._outputDueEnd=this._settedOutputEnd=t},t}(),pf=function(){var t,e,n,i,r,o={reset:function(l,u,h,c){e=l,t=u,n=h,i=c,r=Math.ceil(i/n),o.next=n>1&&i>0?s:a}};return o;function a(){return e<t?e++:null}function s(){var o=e%r*n+Math.ceil(e/r),a=e>=t?null:o<i?o:e;return e++,a}}();function df(t,e){var n=e&&e.type;return"ordinal"===n?t:("time"!==n||j(t)||null==t||"-"===t||(t=+jr(t)),null==t||""===t?NaN:+t)}var ff=ft({number:function(t){return parseFloat(t)},time:function(t){return+jr(t)},trim:function(t){return X(t)?ut(t):t}});function gf(t){return ff.get(t)}var yf={lt:function(t,e){return t<e},lte:function(t,e){return t<=e},gt:function(t,e){return t>e},gte:function(t,e){return t>=e}},vf=function(){function t(t,e){if(!j(e)){var n="";0,ao(n)}this._opFn=yf[t],this._rvalFloat=to(e)}return t.prototype.evaluate=function(t){return j(t)?this._opFn(t,this._rvalFloat):this._opFn(to(t),this._rvalFloat)},t}(),mf=function(){function t(t,e){var n="desc"===t;this._resultLT=n?1:-1,null==e&&(e=n?"min":"max"),this._incomparable="min"===e?-1/0:1/0}return t.prototype.evaluate=function(t,e){var n=j(t)?t:to(t),i=j(e)?e:to(e),r=isNaN(n),o=isNaN(i);if(r&&(n=this._incomparable),o&&(i=this._incomparable),r&&o){var a=X(t),s=X(e);a&&(n=s?t:0),s&&(i=a?e:0)}return n<i?this._resultLT:n>i?-this._resultLT:0},t}(),xf=function(){function t(t,e){this._rval=e,this._isEQ=t,this._rvalTypeof=typeof e,this._rvalFloat=to(e)}return t.prototype.evaluate=function(t){var e=t===this._rval;if(!e){var n=typeof t;n===this._rvalTypeof||"number"!==n&&"number"!==this._rvalTypeof||(e=to(t)===this._rvalFloat)}return this._isEQ?e:!e},t}();function _f(t,e){return"eq"===t||"ne"===t?new xf("eq"===t,e):mt(yf,t)?new vf(t,e):null}var bf=function(){function t(){}return t.prototype.getRawData=function(){throw new Error("not supported")},t.prototype.getRawDataItem=function(t){throw new Error("not supported")},t.prototype.cloneRawData=function(){},t.prototype.getDimensionInfo=function(t){},t.prototype.cloneAllDimensionInfo=function(){},t.prototype.count=function(){},t.prototype.retrieveValue=function(t,e){},t.prototype.retrieveValueFromItem=function(t,e){},t.prototype.convertValue=function(t,e){return df(t,e)},t}();function wf(t){var e=t.sourceFormat;if(!Df(e)){var n="";0,ao(n)}return t.data}function Sf(t){var e=t.sourceFormat,n=t.data;if(!Df(e)){var i="";0,ao(i)}if(e===Pp){for(var r=[],o=0,a=n.length;o<a;o++)r.push(n[o].slice());return r}if(e===Op){for(r=[],o=0,a=n.length;o<a;o++)r.push(A({},n[o]));return r}}function Mf(t,e,n){if(null!=n)return j(n)||!isNaN(n)&&!mt(e,n)?t[n]:mt(e,n)?e[n]:void 0}function If(t){return T(t)}var Tf=ft();function Cf(t,e,n,i){var r="";e.length||ao(r),q(t)||ao(r);var o=t.type,a=Tf.get(o);a||ao(r);var s=z(e,(function(t){return function(t,e){var n=new bf,i=t.data,r=n.sourceFormat=t.sourceFormat,o=t.startIndex,a="";t.seriesLayoutBy!==zp&&ao(a);var s=[],l={},u=t.dimensionsDefine;if(u)E(u,(function(t,e){var n=t.name,i={index:e,name:n,displayName:t.displayName};if(s.push(i),null!=n){var r="";mt(l,n)&&ao(r),l[n]=i}}));else for(var h=0;h<t.dimensionsDetectedCount;h++)s.push({index:h});var c=$d(r,zp);e.__isBuiltIn&&(n.getRawDataItem=function(t){return c(i,o,s,t)},n.getRawData=W(wf,null,t)),n.cloneRawData=W(Sf,null,t);var p=tf(r,zp);n.count=W(p,null,i,o,s);var d=rf(r);n.retrieveValue=function(t,e){var n=c(i,o,s,t);return f(n,e)};var f=n.retrieveValueFromItem=function(t,e){if(null!=t){var n=s[e];return n?d(t,e,n.name):void 0}};return n.getDimensionInfo=W(Mf,null,s,l),n.cloneAllDimensionInfo=W(If,null,s),n}(t,a)})),l=ho(a.transform({upstream:s[0],upstreamList:s,config:T(t.config)}));return z(l,(function(t,n){var i,r="";q(t)||ao(r),t.data||ao(r),Df(Yd(t.data))||ao(r);var o=e[0];if(o&&0===n&&!t.dimensions){var a=o.startIndex;a&&(t.data=o.data.slice(0,a).concat(t.data)),i={seriesLayoutBy:zp,sourceHeader:a,dimensions:o.metaRawOption.dimensions}}else i={seriesLayoutBy:zp,sourceHeader:0,dimensions:t.dimensions};return Wd(t.data,i,null)}))}function Df(t){return t===Pp||t===Op}var Af,kf="undefined",Lf=typeof Uint32Array===kf?Array:Uint32Array,Pf=typeof Uint16Array===kf?Array:Uint16Array,Of=typeof Int32Array===kf?Array:Int32Array,Rf=typeof Float64Array===kf?Array:Float64Array,Nf={float:Rf,int:Of,ordinal:Array,number:Array,time:Rf};function Ef(t){return t>65535?Lf:Pf}function zf(t,e,n,i,r){var o=Nf[n||"float"];if(r){var a=t[e],s=a&&a.length;if(s!==i){for(var l=new o(i),u=0;u<s;u++)l[u]=a[u];t[e]=l}}else t[e]=new o(i)}var Vf=function(){function t(){this._chunks=[],this._rawExtent=[],this._extent=[],this._count=0,this._rawCount=0,this._calcDimNameToIdx=ft()}return t.prototype.initData=function(t,e,n){this._provider=t,this._chunks=[],this._indices=null,this.getRawIndex=this._getRawIdxIdentity;var i=t.getSource(),r=this.defaultDimValueGetter=Af[i.sourceFormat];this._dimValueGetter=n||r,this._rawExtent=[];Zd(i);this._dimensions=z(e,(function(t){return{type:t.type,property:t.property}})),this._initDataFromProvider(0,t.count())},t.prototype.getProvider=function(){return this._provider},t.prototype.getSource=function(){return this._provider.getSource()},t.prototype.ensureCalculationDimension=function(t,e){var n=this._calcDimNameToIdx,i=this._dimensions,r=n.get(t);if(null!=r){if(i[r].type===e)return r}else r=i.length;return i[r]={type:e},n.set(t,r),this._chunks[r]=new Nf[e||"float"](this._rawCount),this._rawExtent[r]=[1/0,-1/0],r},t.prototype.collectOrdinalMeta=function(t,e){var n=this._chunks[t],i=this._dimensions[t],r=this._rawExtent,o=i.ordinalOffset||0,a=n.length;0===o&&(r[t]=[1/0,-1/0]);for(var s=r[t],l=o;l<a;l++){var u=n[l]=e.parseAndCollect(n[l]);isNaN(u)||(s[0]=Math.min(u,s[0]),s[1]=Math.max(u,s[1]))}i.ordinalMeta=e,i.ordinalOffset=a,i.type="ordinal"},t.prototype.getOrdinalMeta=function(t){return this._dimensions[t].ordinalMeta},t.prototype.getDimensionProperty=function(t){var e=this._dimensions[t];return e&&e.property},t.prototype.appendData=function(t){var e=this._provider,n=this.count();e.appendData(t);var i=e.count();return e.persistent||(i+=n),n<i&&this._initDataFromProvider(n,i,!0),[n,i]},t.prototype.appendValues=function(t,e){for(var n=this._chunks,i=this._dimensions,r=i.length,o=this._rawExtent,a=this.count(),s=a+Math.max(t.length,e||0),l=0;l<r;l++){zf(n,l,(d=i[l]).type,s,!0)}for(var u=[],h=a;h<s;h++)for(var c=h-a,p=0;p<r;p++){var d=i[p],f=Af.arrayRows.call(this,t[c]||u,d.property,c,p);n[p][h]=f;var g=o[p];f<g[0]&&(g[0]=f),f>g[1]&&(g[1]=f)}return this._rawCount=this._count=s,{start:a,end:s}},t.prototype._initDataFromProvider=function(t,e,n){for(var i=this._provider,r=this._chunks,o=this._dimensions,a=o.length,s=this._rawExtent,l=z(o,(function(t){return t.property})),u=0;u<a;u++){var h=o[u];s[u]||(s[u]=[1/0,-1/0]),zf(r,u,h.type,e,n)}if(i.fillStorage)i.fillStorage(t,e,r,s);else for(var c=[],p=t;p<e;p++){c=i.getItem(p,c);for(var d=0;d<a;d++){var f=r[d],g=this._dimValueGetter(c,l[d],p,d);f[p]=g;var y=s[d];g<y[0]&&(y[0]=g),g>y[1]&&(y[1]=g)}}!i.persistent&&i.clean&&i.clean(),this._rawCount=this._count=e,this._extent=[]},t.prototype.count=function(){return this._count},t.prototype.get=function(t,e){if(!(e>=0&&e<this._count))return NaN;var n=this._chunks[t];return n?n[this.getRawIndex(e)]:NaN},t.prototype.getValues=function(t,e){var n=[],i=[];if(null==e){e=t,t=[];for(var r=0;r<this._dimensions.length;r++)i.push(r)}else i=t;r=0;for(var o=i.length;r<o;r++)n.push(this.get(i[r],e));return n},t.prototype.getByRawIndex=function(t,e){if(!(e>=0&&e<this._rawCount))return NaN;var n=this._chunks[t];return n?n[e]:NaN},t.prototype.getSum=function(t){var e=0;if(this._chunks[t])for(var n=0,i=this.count();n<i;n++){var r=this.get(t,n);isNaN(r)||(e+=r)}return e},t.prototype.getMedian=function(t){var e=[];this.each([t],(function(t){isNaN(t)||e.push(t)}));var n=e.sort((function(t,e){return t-e})),i=this.count();return 0===i?0:i%2==1?n[(i-1)/2]:(n[i/2]+n[i/2-1])/2},t.prototype.indexOfRawIndex=function(t){if(t>=this._rawCount||t<0)return-1;if(!this._indices)return t;var e=this._indices,n=e[t];if(null!=n&&n<this._count&&n===t)return t;for(var i=0,r=this._count-1;i<=r;){var o=(i+r)/2|0;if(e[o]<t)i=o+1;else{if(!(e[o]>t))return o;r=o-1}}return-1},t.prototype.indicesOfNearest=function(t,e,n){var i=this._chunks[t],r=[];if(!i)return r;null==n&&(n=1/0);for(var o=1/0,a=-1,s=0,l=0,u=this.count();l<u;l++){var h=e-i[this.getRawIndex(l)],c=Math.abs(h);c<=n&&((c<o||c===o&&h>=0&&a<0)&&(o=c,a=h,s=0),h===a&&(r[s++]=l))}return r.length=s,r},t.prototype.getIndices=function(){var t,e=this._indices;if(e){var n=e.constructor,i=this._count;if(n===Array){t=new n(i);for(var r=0;r<i;r++)t[r]=e[r]}else t=new n(e.buffer,0,i)}else{t=new(n=Ef(this._rawCount))(this.count());for(r=0;r<t.length;r++)t[r]=r}return t},t.prototype.filter=function(t,e){if(!this._count)return this;for(var n=this.clone(),i=n.count(),r=new(Ef(n._rawCount))(i),o=[],a=t.length,s=0,l=t[0],u=n._chunks,h=0;h<i;h++){var c=void 0,p=n.getRawIndex(h);if(0===a)c=e(h);else if(1===a){c=e(u[l][p],h)}else{for(var d=0;d<a;d++)o[d]=u[t[d]][p];o[d]=h,c=e.apply(null,o)}c&&(r[s++]=p)}return s<i&&(n._indices=r),n._count=s,n._extent=[],n._updateGetRawIdx(),n},t.prototype.selectRange=function(t){var e=this.clone(),n=e._count;if(!n)return this;var i=G(t),r=i.length;if(!r)return this;var o=e.count(),a=new(Ef(e._rawCount))(o),s=0,l=i[0],u=t[l][0],h=t[l][1],c=e._chunks,p=!1;if(!e._indices){var d=0;if(1===r){for(var f=c[i[0]],g=0;g<n;g++){((x=f[g])>=u&&x<=h||isNaN(x))&&(a[s++]=d),d++}p=!0}else if(2===r){f=c[i[0]];var y=c[i[1]],v=t[i[1]][0],m=t[i[1]][1];for(g=0;g<n;g++){var x=f[g],_=y[g];(x>=u&&x<=h||isNaN(x))&&(_>=v&&_<=m||isNaN(_))&&(a[s++]=d),d++}p=!0}}if(!p)if(1===r)for(g=0;g<o;g++){var b=e.getRawIndex(g);((x=c[i[0]][b])>=u&&x<=h||isNaN(x))&&(a[s++]=b)}else for(g=0;g<o;g++){for(var w=!0,S=(b=e.getRawIndex(g),0);S<r;S++){var M=i[S];((x=c[M][b])<t[M][0]||x>t[M][1])&&(w=!1)}w&&(a[s++]=e.getRawIndex(g))}return s<o&&(e._indices=a),e._count=s,e._extent=[],e._updateGetRawIdx(),e},t.prototype.map=function(t,e){var n=this.clone(t);return this._updateDims(n,t,e),n},t.prototype.modify=function(t,e){this._updateDims(this,t,e)},t.prototype._updateDims=function(t,e,n){for(var i=t._chunks,r=[],o=e.length,a=t.count(),s=[],l=t._rawExtent,u=0;u<e.length;u++)l[e[u]]=[1/0,-1/0];for(var h=0;h<a;h++){for(var c=t.getRawIndex(h),p=0;p<o;p++)s[p]=i[e[p]][c];s[o]=h;var d=n&&n.apply(null,s);if(null!=d){"object"!=typeof d&&(r[0]=d,d=r);for(u=0;u<d.length;u++){var f=e[u],g=d[u],y=l[f],v=i[f];v&&(v[c]=g),g<y[0]&&(y[0]=g),g>y[1]&&(y[1]=g)}}}},t.prototype.lttbDownSample=function(t,e){var n,i,r,o=this.clone([t],!0),a=o._chunks[t],s=this.count(),l=0,u=Math.floor(1/e),h=this.getRawIndex(0),c=new(Ef(this._rawCount))(Math.min(2*(Math.ceil(s/u)+2),s));c[l++]=h;for(var p=1;p<s-1;p+=u){for(var d=Math.min(p+u,s-1),f=Math.min(p+2*u,s),g=(f+d)/2,y=0,v=d;v<f;v++){var m=a[I=this.getRawIndex(v)];isNaN(m)||(y+=m)}y/=f-d;var x=p,_=Math.min(p+u,s),b=p-1,w=a[h];n=-1,r=x;var S=-1,M=0;for(v=x;v<_;v++){var I;m=a[I=this.getRawIndex(v)];isNaN(m)?(M++,S<0&&(S=I)):(i=Math.abs((b-g)*(m-w)-(b-v)*(y-w)))>n&&(n=i,r=I)}M>0&&M<_-x&&(c[l++]=Math.min(S,r),r=Math.max(S,r)),c[l++]=r,h=r}return c[l++]=this.getRawIndex(s-1),o._count=l,o._indices=c,o.getRawIndex=this._getRawIdx,o},t.prototype.downSample=function(t,e,n,i){for(var r=this.clone([t],!0),o=r._chunks,a=[],s=Math.floor(1/e),l=o[t],u=this.count(),h=r._rawExtent[t]=[1/0,-1/0],c=new(Ef(this._rawCount))(Math.ceil(u/s)),p=0,d=0;d<u;d+=s){s>u-d&&(s=u-d,a.length=s);for(var f=0;f<s;f++){var g=this.getRawIndex(d+f);a[f]=l[g]}var y=n(a),v=this.getRawIndex(Math.min(d+i(a,y)||0,u-1));l[v]=y,y<h[0]&&(h[0]=y),y>h[1]&&(h[1]=y),c[p++]=v}return r._count=p,r._indices=c,r._updateGetRawIdx(),r},t.prototype.each=function(t,e){if(this._count)for(var n=t.length,i=this._chunks,r=0,o=this.count();r<o;r++){var a=this.getRawIndex(r);switch(n){case 0:e(r);break;case 1:e(i[t[0]][a],r);break;case 2:e(i[t[0]][a],i[t[1]][a],r);break;default:for(var s=0,l=[];s<n;s++)l[s]=i[t[s]][a];l[s]=r,e.apply(null,l)}}},t.prototype.getDataExtent=function(t){var e=this._chunks[t],n=[1/0,-1/0];if(!e)return n;var i,r=this.count();if(!this._indices)return this._rawExtent[t].slice();if(i=this._extent[t])return i.slice();for(var o=(i=n)[0],a=i[1],s=0;s<r;s++){var l=e[this.getRawIndex(s)];l<o&&(o=l),l>a&&(a=l)}return i=[o,a],this._extent[t]=i,i},t.prototype.getRawDataItem=function(t){var e=this.getRawIndex(t);if(this._provider.persistent)return this._provider.getItem(e);for(var n=[],i=this._chunks,r=0;r<i.length;r++)n.push(i[r][e]);return n},t.prototype.clone=function(e,n){var i,r,o=new t,a=this._chunks,s=e&&V(e,(function(t,e){return t[e]=!0,t}),{});if(s)for(var l=0;l<a.length;l++)o._chunks[l]=s[l]?(i=a[l],r=void 0,(r=i.constructor)===Array?i.slice():new r(i)):a[l];else o._chunks=a;return this._copyCommonProps(o),n||(o._indices=this._cloneIndices()),o._updateGetRawIdx(),o},t.prototype._copyCommonProps=function(t){t._count=this._count,t._rawCount=this._rawCount,t._provider=this._provider,t._dimensions=this._dimensions,t._extent=T(this._extent),t._rawExtent=T(this._rawExtent)},t.prototype._cloneIndices=function(){if(this._indices){var t=this._indices.constructor,e=void 0;if(t===Array){var n=this._indices.length;e=new t(n);for(var i=0;i<n;i++)e[i]=this._indices[i]}else e=new t(this._indices);return e}return null},t.prototype._getRawIdxIdentity=function(t){return t},t.prototype._getRawIdx=function(t){return t<this._count&&t>=0?this._indices[t]:-1},t.prototype._updateGetRawIdx=function(){this.getRawIndex=this._indices?this._getRawIdx:this._getRawIdxIdentity},t.internalField=function(){function t(t,e,n,i){return df(t[i],this._dimensions[i])}Af={arrayRows:t,objectRows:function(t,e,n,i){return df(t[e],this._dimensions[i])},keyedColumns:t,original:function(t,e,n,i){var r=t&&(null==t.value?t:t.value);return df(r instanceof Array?r[i]:r,this._dimensions[i])},typedArray:function(t,e,n,i){return t[i]}}}(),t}(),Bf=function(){function t(t){this._sourceList=[],this._storeList=[],this._upstreamSignList=[],this._versionSignBase=0,this._dirty=!0,this._sourceHost=t}return t.prototype.dirty=function(){this._setLocalSource([],[]),this._storeList=[],this._dirty=!0},t.prototype._setLocalSource=function(t,e){this._sourceList=t,this._upstreamSignList=e,this._versionSignBase++,this._versionSignBase>9e10&&(this._versionSignBase=0)},t.prototype._getVersionSign=function(){return this._sourceHost.uid+"_"+this._versionSignBase},t.prototype.prepareSource=function(){this._isDirty()&&(this._createSource(),this._dirty=!1)},t.prototype._createSource=function(){this._setLocalSource([],[]);var t,e,n=this._sourceHost,i=this._getUpstreamSourceManagers(),r=!!i.length;if(Gf(n)){var o=n,a=void 0,s=void 0,l=void 0;if(r){var u=i[0];u.prepareSource(),a=(l=u.getSource()).data,s=l.sourceFormat,e=[u._getVersionSign()]}else s=$(a=o.get("data",!0))?Np:Lp,e=[];var h=this._getSourceMetaRawOption()||{},c=l&&l.metaRawOption||{},p=rt(h.seriesLayoutBy,c.seriesLayoutBy)||null,d=rt(h.sourceHeader,c.sourceHeader),f=rt(h.dimensions,c.dimensions);t=p!==c.seriesLayoutBy||!!d!=!!c.sourceHeader||f?[Wd(a,{seriesLayoutBy:p,sourceHeader:d,dimensions:f},s)]:[]}else{var g=n;if(r){var y=this._applyTransform(i);t=y.sourceList,e=y.upstreamSignList}else{t=[Wd(g.get("source",!0),this._getSourceMetaRawOption(),null)],e=[]}}this._setLocalSource(t,e)},t.prototype._applyTransform=function(t){var e,n=this._sourceHost,i=n.get("transform",!0),r=n.get("fromTransformResult",!0);if(null!=r){var o="";1!==t.length&&Wf(o)}var a,s=[],l=[];return E(t,(function(t){t.prepareSource();var e=t.getSource(r||0),n="";null==r||e||Wf(n),s.push(e),l.push(t._getVersionSign())})),i?e=function(t,e,n){var i=ho(t),r=i.length,o="";r||ao(o);for(var a=0,s=r;a<s;a++)e=Cf(i[a],e),a!==s-1&&(e.length=Math.max(e.length,1));return e}(i,s,n.componentIndex):null!=r&&(e=[(a=s[0],new Fd({data:a.data,sourceFormat:a.sourceFormat,seriesLayoutBy:a.seriesLayoutBy,dimensionsDefine:T(a.dimensionsDefine),startIndex:a.startIndex,dimensionsDetectedCount:a.dimensionsDetectedCount}))]),{sourceList:e,upstreamSignList:l}},t.prototype._isDirty=function(){if(this._dirty)return!0;for(var t=this._getUpstreamSourceManagers(),e=0;e<t.length;e++){var n=t[e];if(n._isDirty()||this._upstreamSignList[e]!==n._getVersionSign())return!0}},t.prototype.getSource=function(t){t=t||0;var e=this._sourceList[t];if(!e){var n=this._getUpstreamSourceManagers();return n[0]&&n[0].getSource(t)}return e},t.prototype.getSharedDataStore=function(t){var e=t.makeStoreSchema();return this._innerGetDataStore(e.dimensions,t.source,e.hash)},t.prototype._innerGetDataStore=function(t,e,n){var i=this._storeList,r=i[0];r||(r=i[0]={});var o=r[n];if(!o){var a=this._getUpstreamSourceManagers()[0];Gf(this._sourceHost)&&a?o=a._innerGetDataStore(t,e,n):(o=new Vf).initData(new jd(e,t.length),t),r[n]=o}return o},t.prototype._getUpstreamSourceManagers=function(){var t=this._sourceHost;if(Gf(t)){var e=Up(t);return e?[e.getSourceManager()]:[]}return z(function(t){return t.get("transform",!0)||t.get("fromTransformResult",!0)?Ao(t.ecModel,"dataset",{index:t.get("fromDatasetIndex",!0),id:t.get("fromDatasetId",!0)},Co).models:[]}(t),(function(t){return t.getSourceManager()}))},t.prototype._getSourceMetaRawOption=function(){var t,e,n,i=this._sourceHost;if(Gf(i))t=i.get("seriesLayoutBy",!0),e=i.get("sourceHeader",!0),n=i.get("dimensions",!0);else if(!this._getUpstreamSourceManagers().length){var r=i;t=r.get("seriesLayoutBy",!0),e=r.get("sourceHeader",!0),n=r.get("dimensions",!0)}return{seriesLayoutBy:t,sourceHeader:e,dimensions:n}},t}();function Ff(t){t.option.transform&&ct(t.option.transform)}function Gf(t){return"series"===t.mainType}function Wf(t){throw new Error(t)}function Hf(t,e){var n=t.color||"#6e7079",i=t.fontSize||12,r=t.fontWeight||"400",o=t.color||"#464646",a=t.fontSize||14,s=t.fontWeight||"900";return"html"===e?{nameStyle:"font-size:"+ap(i+"")+"px;color:"+ap(n)+";font-weight:"+ap(r+""),valueStyle:"font-size:"+ap(a+"")+"px;color:"+ap(o)+";font-weight:"+ap(s+"")}:{nameStyle:{fontSize:i,fill:n,fontWeight:r},valueStyle:{fontSize:a,fill:o,fontWeight:s}}}var Yf=[0,10,20,30],Uf=["","\n","\n\n","\n\n\n"];function Xf(t,e){return e.type=t,e}function Zf(t){return"section"===t.type}function jf(t){return Zf(t)?Kf:$f}function qf(t){if(Zf(t)){var e=0,n=t.blocks.length,i=n>1||n>0&&!t.noHeader;return E(t.blocks,(function(t){var n=qf(t);n>=e&&(e=n+ +(i&&(!n||Zf(t)&&!t.noHeader)))})),e}return 0}function Kf(t,e,n,i){var r,o=e.noHeader,a=(r=qf(e),{html:Yf[r],richText:Uf[r]}),s=[],l=e.blocks||[];lt(!l||Y(l)),l=l||[];var u=t.orderMode;if(e.sortBlocks&&u){l=l.slice();var h={valueAsc:"asc",valueDesc:"desc"};if(mt(h,u)){var c=new mf(h[u],null);l.sort((function(t,e){return c.evaluate(t.sortParam,e.sortParam)}))}else"seriesDesc"===u&&l.reverse()}E(l,(function(n,r){var o=e.valueFormatter,l=jf(n)(o?A(A({},t),{valueFormatter:o}):t,n,r>0?a.html:0,i);null!=l&&s.push(l)}));var p="richText"===t.renderMode?s.join(a.richText):Qf(s.join(""),o?n:a.html);if(o)return p;var d=sp(e.header,"ordinal",t.useUTC),f=Hf(i,t.renderMode).nameStyle;return"richText"===t.renderMode?tg(t,d,f)+a.richText+p:Qf('<div style="'+f+";"+'line-height:1;">'+ap(d)+"</div>"+p,n)}function $f(t,e,n,i){var r=t.renderMode,o=e.noName,a=e.noValue,s=!e.markerType,l=e.name,u=t.useUTC,h=e.valueFormatter||t.valueFormatter||function(t){return z(t=Y(t)?t:[t],(function(t,e){return sp(t,Y(d)?d[e]:d,u)}))};if(!o||!a){var c=s?"":t.markupStyleCreator.makeTooltipMarker(e.markerType,e.markerColor||"#333",r),p=o?"":sp(l,"ordinal",u),d=e.valueType,f=a?[]:h(e.value),g=!s||!o,y=!s&&o,v=Hf(i,r),m=v.nameStyle,x=v.valueStyle;return"richText"===r?(s?"":c)+(o?"":tg(t,p,m))+(a?"":function(t,e,n,i,r){var o=[r],a=i?10:20;return n&&o.push({padding:[0,0,0,a],align:"right"}),t.markupStyleCreator.wrapRichTextStyle(Y(e)?e.join("  "):e,o)}(t,f,g,y,x)):Qf((s?"":c)+(o?"":function(t,e,n){return'<span style="'+n+";"+(e?"margin-left:2px":"")+'">'+ap(t)+"</span>"}(p,!s,m))+(a?"":function(t,e,n,i){var r=n?"10px":"20px",o=e?"float:right;margin-left:"+r:"";return t=Y(t)?t:[t],'<span style="'+o+";"+i+'">'+z(t,(function(t){return ap(t)})).join("&nbsp;&nbsp;")+"</span>"}(f,g,y,x)),n)}}function Jf(t,e,n,i,r,o){if(t)return jf(t)({useUTC:r,renderMode:n,orderMode:i,markupStyleCreator:e,valueFormatter:t.valueFormatter},t,0,o)}function Qf(t,e){return'<div style="'+("margin: "+e+"px 0 0")+";"+'line-height:1;">'+t+'<div style="clear:both"></div></div>'}function tg(t,e,n){return t.markupStyleCreator.wrapRichTextStyle(e,n)}function eg(t,e){return pp(t.getData().getItemVisual(e,"style")[t.visualDrawType])}function ng(t,e){var n=t.get("padding");return null!=n?n:"richText"===e?[8,10]:10}var ig=function(){function t(){this.richTextStyles={},this._nextStyleNameId=no()}return t.prototype._generateStyleName=function(){return"__EC_aUTo_"+this._nextStyleNameId++},t.prototype.makeTooltipMarker=function(t,e,n){var i="richText"===n?this._generateStyleName():null,r=cp({color:e,type:t,renderMode:n,markerId:i});return X(r)?r:(this.richTextStyles[i]=r.style,r.content)},t.prototype.wrapRichTextStyle=function(t,e){var n={};Y(e)?E(e,(function(t){return A(n,t)})):A(n,e);var i=this._generateStyleName();return this.richTextStyles[i]=n,"{"+i+"|"+t+"}"},t}();function rg(t){var e,n,i,r,o=t.series,a=t.dataIndex,s=t.multipleSeries,l=o.getData(),u=l.mapDimensionsAll("defaultedTooltip"),h=u.length,c=o.getRawValue(a),p=Y(c),d=eg(o,a);if(h>1||p&&!h){var f=function(t,e,n,i,r){var o=e.getData(),a=V(t,(function(t,e,n){var i=o.getDimensionInfo(n);return t||i&&!1!==i.tooltip&&null!=i.displayName}),!1),s=[],l=[],u=[];function h(t,e){var n=o.getDimensionInfo(e);n&&!1!==n.otherDims.tooltip&&(a?u.push(Xf("nameValue",{markerType:"subItem",markerColor:r,name:n.displayName,value:t,valueType:n.type})):(s.push(t),l.push(n.type)))}return i.length?E(i,(function(t){h(af(o,n,t),t)})):E(t,h),{inlineValues:s,inlineValueTypes:l,blocks:u}}(c,o,a,u,d);e=f.inlineValues,n=f.inlineValueTypes,i=f.blocks,r=f.inlineValues[0]}else if(h){var g=l.getDimensionInfo(u[0]);r=e=af(l,a,u[0]),n=g.type}else r=e=p?c[0]:c;var y=_o(o),v=y&&o.name||"",m=l.getName(a),x=s?v:m;return Xf("section",{header:v,noHeader:s||!y,sortParam:r,blocks:[Xf("nameValue",{markerType:"item",markerColor:d,name:x,noName:!ut(x),value:e,valueType:n})].concat(i||[])})}var og=So();function ag(t,e){return t.getName(e)||t.getId(e)}var sg=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._selectedDataIndicesMap={},e}return n(e,t),e.prototype.init=function(t,e,n){this.seriesIndex=this.componentIndex,this.dataTask=hf({count:ug,reset:hg}),this.dataTask.context={model:this},this.mergeDefaultAndTheme(t,n),(og(this).sourceManager=new Bf(this)).prepareSource();var i=this.getInitialData(t,n);pg(i,this),this.dataTask.context.data=i,og(this).dataBeforeProcessed=i,lg(this),this._initSelectedMapFromData(i)},e.prototype.mergeDefaultAndTheme=function(t,e){var n=bp(this),i=n?Sp(t):{},r=this.subType;Tp.hasClass(r)&&(r+="Series"),C(t,e.getTheme().get(this.subType)),C(t,this.getDefaultOption()),co(t,"label",["show"]),this.fillDataTextStyle(t.data),n&&wp(t,i,n)},e.prototype.mergeOption=function(t,e){t=C(this.option,t,!0),this.fillDataTextStyle(t.data);var n=bp(this);n&&wp(this.option,t,n);var i=og(this).sourceManager;i.dirty(),i.prepareSource();var r=this.getInitialData(t,e);pg(r,this),this.dataTask.dirty(),this.dataTask.context.data=r,og(this).dataBeforeProcessed=r,lg(this),this._initSelectedMapFromData(r)},e.prototype.fillDataTextStyle=function(t){if(t&&!$(t))for(var e=["show"],n=0;n<t.length;n++)t[n]&&t[n].label&&co(t[n],"label",e)},e.prototype.getInitialData=function(t,e){},e.prototype.appendData=function(t){this.getRawData().appendData(t.data)},e.prototype.getData=function(t){var e=fg(this);if(e){var n=e.context.data;return null==t?n:n.getLinkedData(t)}return og(this).data},e.prototype.getAllData=function(){var t=this.getData();return t&&t.getLinkedDataAll?t.getLinkedDataAll():[{data:t}]},e.prototype.setData=function(t){var e=fg(this);if(e){var n=e.context;n.outputData=t,e!==this.dataTask&&(n.data=t)}og(this).data=t},e.prototype.getEncode=function(){var t=this.get("encode",!0);if(t)return ft(t)},e.prototype.getSourceManager=function(){return og(this).sourceManager},e.prototype.getSource=function(){return this.getSourceManager().getSource()},e.prototype.getRawData=function(){return og(this).dataBeforeProcessed},e.prototype.getColorBy=function(){return this.get("colorBy")||"series"},e.prototype.isColorBySeries=function(){return"series"===this.getColorBy()},e.prototype.getBaseAxis=function(){var t=this.coordinateSystem;return t&&t.getBaseAxis&&t.getBaseAxis()},e.prototype.formatTooltip=function(t,e,n){return rg({series:this,dataIndex:t,multipleSeries:e})},e.prototype.isAnimationEnabled=function(){var t=this.ecModel;if(r.node&&(!t||!t.ssr))return!1;var e=this.getShallow("animation");return e&&this.getData().count()>this.getShallow("animationThreshold")&&(e=!1),!!e},e.prototype.restoreData=function(){this.dataTask.dirty()},e.prototype.getColorFromPalette=function(t,e,n){var i=this.ecModel,r=td.prototype.getColorFromPalette.call(this,t,e,n);return r||(r=i.getColorFromPalette(t,e,n)),r},e.prototype.coordDimToDataDim=function(t){return this.getRawData().mapDimensionsAll(t)},e.prototype.getProgressive=function(){return this.get("progressive")},e.prototype.getProgressiveThreshold=function(){return this.get("progressiveThreshold")},e.prototype.select=function(t,e){this._innerSelect(this.getData(e),t)},e.prototype.unselect=function(t,e){var n=this.option.selectedMap;if(n){var i=this.option.selectedMode,r=this.getData(e);if("series"===i||"all"===n)return this.option.selectedMap={},void(this._selectedDataIndicesMap={});for(var o=0;o<t.length;o++){var a=ag(r,t[o]);n[a]=!1,this._selectedDataIndicesMap[a]=-1}}},e.prototype.toggleSelect=function(t,e){for(var n=[],i=0;i<t.length;i++)n[0]=t[i],this.isSelected(t[i],e)?this.unselect(n,e):this.select(n,e)},e.prototype.getSelectedDataIndices=function(){if("all"===this.option.selectedMap)return[].slice.call(this.getData().getIndices());for(var t=this._selectedDataIndicesMap,e=G(t),n=[],i=0;i<e.length;i++){var r=t[e[i]];r>=0&&n.push(r)}return n},e.prototype.isSelected=function(t,e){var n=this.option.selectedMap;if(!n)return!1;var i=this.getData(e);return("all"===n||n[ag(i,t)])&&!i.getItemModel(t).get(["select","disabled"])},e.prototype.isUniversalTransitionEnabled=function(){if(this.__universalTransitionEnabled)return!0;var t=this.option.universalTransition;return!!t&&(!0===t||t&&t.enabled)},e.prototype._innerSelect=function(t,e){var n,i,r=this.option,o=r.selectedMode,a=e.length;if(o&&a)if("series"===o)r.selectedMap="all";else if("multiple"===o){q(r.selectedMap)||(r.selectedMap={});for(var s=r.selectedMap,l=0;l<a;l++){var u=e[l];s[c=ag(t,u)]=!0,this._selectedDataIndicesMap[c]=t.getRawIndex(u)}}else if("single"===o||!0===o){var h=e[a-1],c=ag(t,h);r.selectedMap=((n={})[c]=!0,n),this._selectedDataIndicesMap=((i={})[c]=t.getRawIndex(h),i)}},e.prototype._initSelectedMapFromData=function(t){if(!this.option.selectedMap){var e=[];t.hasItemOption&&t.each((function(n){var i=t.getRawDataItem(n);i&&i.selected&&e.push(n)})),e.length>0&&this._innerSelect(t,e)}},e.registerClass=function(t){return Tp.registerClass(t)},e.protoInitialize=function(){var t=e.prototype;t.type="series.__base__",t.seriesIndex=0,t.ignoreStyleOnData=!1,t.hasSymbolVisual=!1,t.defaultSymbol="circle",t.visualStyleAccessPath="itemStyle",t.visualDrawType="fill"}(),e}(Tp);function lg(t){var e=t.name;_o(t)||(t.name=function(t){var e=t.getRawData(),n=e.mapDimensionsAll("seriesName"),i=[];return E(n,(function(t){var n=e.getDimensionInfo(t);n.displayName&&i.push(n.displayName)})),i.join(" ")}(t)||e)}function ug(t){return t.model.getRawData().count()}function hg(t){var e=t.model;return e.setData(e.getRawData().cloneShallow()),cg}function cg(t,e){e.outputData&&t.end>e.outputData.count()&&e.model.getRawData().cloneShallow(e.outputData)}function pg(t,e){E(gt(t.CHANGABLE_METHODS,t.DOWNSAMPLE_METHODS),(function(n){t.wrapMethod(n,H(dg,e))}))}function dg(t,e){var n=fg(t);return n&&n.setOutputEnd((e||this).count()),e}function fg(t){var e=(t.ecModel||{}).scheduler,n=e&&e.getPipeline(t.uid);if(n){var i=n.currentTask;if(i){var r=i.agentStubMap;r&&(i=r.get(t.uid))}return i}}R(sg,lf),R(sg,td),zo(sg,Tp);var gg=function(){function t(){this.group=new Cr,this.uid=gc("viewComponent")}return t.prototype.init=function(t,e){},t.prototype.render=function(t,e,n,i){},t.prototype.dispose=function(t,e){},t.prototype.updateView=function(t,e,n,i){},t.prototype.updateLayout=function(t,e,n,i){},t.prototype.updateVisual=function(t,e,n,i){},t.prototype.toggleBlurSeries=function(t,e,n){},t.prototype.eachRendered=function(t){var e=this.group;e&&e.traverse(t)},t}();function yg(){var t=So();return function(e){var n=t(e),i=e.pipelineContext,r=!!n.large,o=!!n.progressiveRender,a=n.large=!(!i||!i.large),s=n.progressiveRender=!(!i||!i.progressiveRender);return!(r===a&&o===s)&&"reset"}}Eo(gg),Go(gg);var vg=So(),mg=yg(),xg=function(){function t(){this.group=new Cr,this.uid=gc("viewChart"),this.renderTask=hf({plan:wg,reset:Sg}),this.renderTask.context={view:this}}return t.prototype.init=function(t,e){},t.prototype.render=function(t,e,n,i){0},t.prototype.highlight=function(t,e,n,i){var r=t.getData(i&&i.dataType);r&&bg(r,i,"emphasis")},t.prototype.downplay=function(t,e,n,i){var r=t.getData(i&&i.dataType);r&&bg(r,i,"normal")},t.prototype.remove=function(t,e){this.group.removeAll()},t.prototype.dispose=function(t,e){},t.prototype.updateView=function(t,e,n,i){this.render(t,e,n,i)},t.prototype.updateLayout=function(t,e,n,i){this.render(t,e,n,i)},t.prototype.updateVisual=function(t,e,n,i){this.render(t,e,n,i)},t.prototype.eachRendered=function(t){Vh(this.group,t)},t.markUpdateMethod=function(t,e){vg(t).updateMethod=e},t.protoInitialize=void(t.prototype.type="chart"),t}();function _g(t,e,n){t&&Fl(t)&&("emphasis"===e?_l:bl)(t,n)}function bg(t,e,n){var i=wo(t,e),r=e&&null!=e.highlightKey?function(t){var e=Xs[t];return null==e&&Us<=32&&(e=Xs[t]=Us++),e}(e.highlightKey):null;null!=i?E(ho(i),(function(e){_g(t.getItemGraphicEl(e),n,r)})):t.eachItemGraphicEl((function(t){_g(t,n,r)}))}function wg(t){return mg(t.model)}function Sg(t){var e=t.model,n=t.ecModel,i=t.api,r=t.payload,o=e.pipelineContext.progressiveRender,a=t.view,s=r&&vg(r).updateMethod,l=o?"incrementalPrepareRender":s&&a[s]?s:"render";return"render"!==l&&a[l](e,n,i,r),Mg[l]}Eo(xg),Go(xg);var Mg={incrementalPrepareRender:{progress:function(t,e){e.view.incrementalRender(t,e.model,e.ecModel,e.api,e.payload)}},render:{forceFirstProgress:!0,progress:function(t,e){e.view.render(e.model,e.ecModel,e.api,e.payload)}}},Ig="\0__throttleOriginMethod",Tg="\0__throttleRate",Cg="\0__throttleType";function Dg(t,e,n){var i,r,o,a,s,l=0,u=0,h=null;function c(){u=(new Date).getTime(),h=null,t.apply(o,a||[])}e=e||0;var p=function(){for(var t=[],p=0;p<arguments.length;p++)t[p]=arguments[p];i=(new Date).getTime(),o=this,a=t;var d=s||e,f=s||n;s=null,r=i-(f?l:u)-d,clearTimeout(h),f?h=setTimeout(c,d):r>=0?c():h=setTimeout(c,-r),l=i};return p.clear=function(){h&&(clearTimeout(h),h=null)},p.debounceNextCall=function(t){s=t},p}function Ag(t,e,n,i){var r=t[e];if(r){var o=r[Ig]||r,a=r[Cg];if(r[Tg]!==n||a!==i){if(null==n||!i)return t[e]=o;(r=t[e]=Dg(o,n,"debounce"===i))[Ig]=o,r[Cg]=i,r[Tg]=n}return r}}function kg(t,e){var n=t[e];n&&n[Ig]&&(n.clear&&n.clear(),t[e]=n[Ig])}var Lg=So(),Pg={itemStyle:Wo(hc,!0),lineStyle:Wo(sc,!0)},Og={lineStyle:"stroke",itemStyle:"fill"};function Rg(t,e){var n=t.visualStyleMapper||Pg[e];return n||(console.warn("Unkown style type '"+e+"'."),Pg.itemStyle)}function Ng(t,e){var n=t.visualDrawType||Og[e];return n||(console.warn("Unkown style type '"+e+"'."),"fill")}var Eg={createOnAllSeries:!0,performRawSeries:!0,reset:function(t,e){var n=t.getData(),i=t.visualStyleAccessPath||"itemStyle",r=t.getModel(i),o=Rg(t,i)(r),a=r.getShallow("decal");a&&(n.setVisual("decal",a),a.dirty=!0);var s=Ng(t,i),l=o[s],u=U(l)?l:null,h="auto"===o.fill||"auto"===o.stroke;if(!o[s]||u||h){var c=t.getColorFromPalette(t.name,null,e.getSeriesCount());o[s]||(o[s]=c,n.setVisual("colorFromPalette",!0)),o.fill="auto"===o.fill||U(o.fill)?c:o.fill,o.stroke="auto"===o.stroke||U(o.stroke)?c:o.stroke}if(n.setVisual("style",o),n.setVisual("drawType",s),!e.isSeriesFiltered(t)&&u)return n.setVisual("colorFromPalette",!1),{dataEach:function(e,n){var i=t.getDataParams(n),r=A({},o);r[s]=u(i),e.setItemVisual(n,"style",r)}}}},zg=new dc,Vg={createOnAllSeries:!0,performRawSeries:!0,reset:function(t,e){if(!t.ignoreStyleOnData&&!e.isSeriesFiltered(t)){var n=t.getData(),i=t.visualStyleAccessPath||"itemStyle",r=Rg(t,i),o=n.getVisual("drawType");return{dataEach:n.hasItemOption?function(t,e){var n=t.getRawDataItem(e);if(n&&n[i]){zg.option=n[i];var a=r(zg);A(t.ensureUniqueItemVisual(e,"style"),a),zg.option.decal&&(t.setItemVisual(e,"decal",zg.option.decal),zg.option.decal.dirty=!0),o in a&&t.setItemVisual(e,"colorFromPalette",!1)}}:null}}}},Bg={performRawSeries:!0,overallReset:function(t){var e=ft();t.eachSeries((function(t){var n=t.getColorBy();if(!t.isColorBySeries()){var i=t.type+"-"+n,r=e.get(i);r||(r={},e.set(i,r)),Lg(t).scope=r}})),t.eachSeries((function(e){if(!e.isColorBySeries()&&!t.isSeriesFiltered(e)){var n=e.getRawData(),i={},r=e.getData(),o=Lg(e).scope,a=e.visualStyleAccessPath||"itemStyle",s=Ng(e,a);r.each((function(t){var e=r.getRawIndex(t);i[e]=t})),n.each((function(t){var a=i[t];if(r.getItemVisual(a,"colorFromPalette")){var l=r.ensureUniqueItemVisual(a,"style"),u=n.getName(t)||t+"",h=n.count();l[s]=e.getColorFromPalette(u,o,h)}}))}}))}},Fg=Math.PI;var Gg=function(){function t(t,e,n,i){this._stageTaskMap=ft(),this.ecInstance=t,this.api=e,n=this._dataProcessorHandlers=n.slice(),i=this._visualHandlers=i.slice(),this._allHandlers=n.concat(i)}return t.prototype.restoreData=function(t,e){t.restoreData(e),this._stageTaskMap.each((function(t){var e=t.overallTask;e&&e.dirty()}))},t.prototype.getPerformArgs=function(t,e){if(t.__pipeline){var n=this._pipelineMap.get(t.__pipeline.id),i=n.context,r=!e&&n.progressiveEnabled&&(!i||i.progressiveRender)&&t.__idxInPipeline>n.blockIndex?n.step:null,o=i&&i.modDataCount;return{step:r,modBy:null!=o?Math.ceil(o/r):null,modDataCount:o}}},t.prototype.getPipeline=function(t){return this._pipelineMap.get(t)},t.prototype.updateStreamModes=function(t,e){var n=this._pipelineMap.get(t.uid),i=t.getData().count(),r=n.progressiveEnabled&&e.incrementalPrepareRender&&i>=n.threshold,o=t.get("large")&&i>=t.get("largeThreshold"),a="mod"===t.get("progressiveChunkMode")?i:null;t.pipelineContext=n.context={progressiveRender:r,modDataCount:a,large:o}},t.prototype.restorePipelines=function(t){var e=this,n=e._pipelineMap=ft();t.eachSeries((function(t){var i=t.getProgressive(),r=t.uid;n.set(r,{id:r,head:null,tail:null,threshold:t.getProgressiveThreshold(),progressiveEnabled:i&&!(t.preventIncremental&&t.preventIncremental()),blockIndex:-1,step:Math.round(i||700),count:0}),e._pipe(t,t.dataTask)}))},t.prototype.prepareStageTasks=function(){var t=this._stageTaskMap,e=this.api.getModel(),n=this.api;E(this._allHandlers,(function(i){var r=t.get(i.uid)||t.set(i.uid,{}),o="";lt(!(i.reset&&i.overallReset),o),i.reset&&this._createSeriesStageTask(i,r,e,n),i.overallReset&&this._createOverallStageTask(i,r,e,n)}),this)},t.prototype.prepareView=function(t,e,n,i){var r=t.renderTask,o=r.context;o.model=e,o.ecModel=n,o.api=i,r.__block=!t.incrementalPrepareRender,this._pipe(e,r)},t.prototype.performDataProcessorTasks=function(t,e){this._performStageTasks(this._dataProcessorHandlers,t,e,{block:!0})},t.prototype.performVisualTasks=function(t,e,n){this._performStageTasks(this._visualHandlers,t,e,n)},t.prototype._performStageTasks=function(t,e,n,i){i=i||{};var r=!1,o=this;function a(t,e){return t.setDirty&&(!t.dirtyMap||t.dirtyMap.get(e.__pipeline.id))}E(t,(function(t,s){if(!i.visualType||i.visualType===t.visualType){var l=o._stageTaskMap.get(t.uid),u=l.seriesTaskMap,h=l.overallTask;if(h){var c,p=h.agentStubMap;p.each((function(t){a(i,t)&&(t.dirty(),c=!0)})),c&&h.dirty(),o.updatePayload(h,n);var d=o.getPerformArgs(h,i.block);p.each((function(t){t.perform(d)})),h.perform(d)&&(r=!0)}else u&&u.each((function(s,l){a(i,s)&&s.dirty();var u=o.getPerformArgs(s,i.block);u.skip=!t.performRawSeries&&e.isSeriesFiltered(s.context.model),o.updatePayload(s,n),s.perform(u)&&(r=!0)}))}})),this.unfinished=r||this.unfinished},t.prototype.performSeriesTasks=function(t){var e;t.eachSeries((function(t){e=t.dataTask.perform()||e})),this.unfinished=e||this.unfinished},t.prototype.plan=function(){this._pipelineMap.each((function(t){var e=t.tail;do{if(e.__block){t.blockIndex=e.__idxInPipeline;break}e=e.getUpstream()}while(e)}))},t.prototype.updatePayload=function(t,e){"remain"!==e&&(t.context.payload=e)},t.prototype._createSeriesStageTask=function(t,e,n,i){var r=this,o=e.seriesTaskMap,a=e.seriesTaskMap=ft(),s=t.seriesType,l=t.getTargetSeries;function u(e){var s=e.uid,l=a.set(s,o&&o.get(s)||hf({plan:Xg,reset:Zg,count:Kg}));l.context={model:e,ecModel:n,api:i,useClearVisual:t.isVisual&&!t.isLayout,plan:t.plan,reset:t.reset,scheduler:r},r._pipe(e,l)}t.createOnAllSeries?n.eachRawSeries(u):s?n.eachRawSeriesByType(s,u):l&&l(n,i).each(u)},t.prototype._createOverallStageTask=function(t,e,n,i){var r=this,o=e.overallTask=e.overallTask||hf({reset:Wg});o.context={ecModel:n,api:i,overallReset:t.overallReset,scheduler:r};var a=o.agentStubMap,s=o.agentStubMap=ft(),l=t.seriesType,u=t.getTargetSeries,h=!0,c=!1,p="";function d(t){var e=t.uid,n=s.set(e,a&&a.get(e)||(c=!0,hf({reset:Hg,onDirty:Ug})));n.context={model:t,overallProgress:h},n.agent=o,n.__block=h,r._pipe(t,n)}lt(!t.createOnAllSeries,p),l?n.eachRawSeriesByType(l,d):u?u(n,i).each(d):(h=!1,E(n.getSeries(),d)),c&&o.dirty()},t.prototype._pipe=function(t,e){var n=t.uid,i=this._pipelineMap.get(n);!i.head&&(i.head=e),i.tail&&i.tail.pipe(e),i.tail=e,e.__idxInPipeline=i.count++,e.__pipeline=i},t.wrapStageHandler=function(t,e){return U(t)&&(t={overallReset:t,seriesType:$g(t)}),t.uid=gc("stageHandler"),e&&(t.visualType=e),t},t}();function Wg(t){t.overallReset(t.ecModel,t.api,t.payload)}function Hg(t){return t.overallProgress&&Yg}function Yg(){this.agent.dirty(),this.getDownstream().dirty()}function Ug(){this.agent&&this.agent.dirty()}function Xg(t){return t.plan?t.plan(t.model,t.ecModel,t.api,t.payload):null}function Zg(t){t.useClearVisual&&t.data.clearAllVisual();var e=t.resetDefines=ho(t.reset(t.model,t.ecModel,t.api,t.payload));return e.length>1?z(e,(function(t,e){return qg(e)})):jg}var jg=qg(0);function qg(t){return function(e,n){var i=n.data,r=n.resetDefines[t];if(r&&r.dataEach)for(var o=e.start;o<e.end;o++)r.dataEach(i,o);else r&&r.progress&&r.progress(e,i)}}function Kg(t){return t.data.count()}function $g(t){Jg=null;try{t(Qg,ty)}catch(t){}return Jg}var Jg,Qg={},ty={};function ey(t,e){for(var n in e.prototype)t[n]=xt}ey(Qg,id),ey(ty,ld),Qg.eachSeriesByType=Qg.eachRawSeriesByType=function(t){Jg=t},Qg.eachComponent=function(t){"series"===t.mainType&&t.subType&&(Jg=t.subType)};var ny=["#37A2DA","#32C5E9","#67E0E3","#9FE6B8","#FFDB5C","#ff9f7f","#fb7293","#E062AE","#E690D1","#e7bcf3","#9d96f5","#8378EA","#96BFFF"],iy={color:ny,colorLayer:[["#37A2DA","#ffd85c","#fd7b5f"],["#37A2DA","#67E0E3","#FFDB5C","#ff9f7f","#E062AE","#9d96f5"],["#37A2DA","#32C5E9","#9FE6B8","#FFDB5C","#ff9f7f","#fb7293","#e7bcf3","#8378EA","#96BFFF"],ny]},ry="#B9B8CE",oy="#100C2A",ay=function(){return{axisLine:{lineStyle:{color:ry}},splitLine:{lineStyle:{color:"#484753"}},splitArea:{areaStyle:{color:["rgba(255,255,255,0.02)","rgba(255,255,255,0.05)"]}},minorSplitLine:{lineStyle:{color:"#20203B"}}}},sy=["#4992ff","#7cffb2","#fddd60","#ff6e76","#58d9f9","#05c091","#ff8a45","#8d48e3","#dd79ff"],ly={darkMode:!0,color:sy,backgroundColor:oy,axisPointer:{lineStyle:{color:"#817f91"},crossStyle:{color:"#817f91"},label:{color:"#fff"}},legend:{textStyle:{color:ry}},textStyle:{color:ry},title:{textStyle:{color:"#EEF1FA"},subtextStyle:{color:"#B9B8CE"}},toolbox:{iconStyle:{borderColor:ry}},dataZoom:{borderColor:"#71708A",textStyle:{color:ry},brushStyle:{color:"rgba(135,163,206,0.3)"},handleStyle:{color:"#353450",borderColor:"#C5CBE3"},moveHandleStyle:{color:"#B0B6C3",opacity:.3},fillerColor:"rgba(135,163,206,0.2)",emphasis:{handleStyle:{borderColor:"#91B7F2",color:"#4D587D"},moveHandleStyle:{color:"#636D9A",opacity:.7}},dataBackground:{lineStyle:{color:"#71708A",width:1},areaStyle:{color:"#71708A"}},selectedDataBackground:{lineStyle:{color:"#87A3CE"},areaStyle:{color:"#87A3CE"}}},visualMap:{textStyle:{color:ry}},timeline:{lineStyle:{color:ry},label:{color:ry},controlStyle:{color:ry,borderColor:ry}},calendar:{itemStyle:{color:oy},dayLabel:{color:ry},monthLabel:{color:ry},yearLabel:{color:ry}},timeAxis:ay(),logAxis:ay(),valueAxis:ay(),categoryAxis:ay(),line:{symbol:"circle"},graph:{color:sy},gauge:{title:{color:ry},axisLine:{lineStyle:{color:[[1,"rgba(207,212,219,0.2)"]]}},axisLabel:{color:ry},detail:{color:"#EEF1FA"}},candlestick:{itemStyle:{color:"#f64e56",color0:"#54ea92",borderColor:"#f64e56",borderColor0:"#54ea92"}}};ly.categoryAxis.splitLine.show=!1;var uy=function(){function t(){}return t.prototype.normalizeQuery=function(t){var e={},n={},i={};if(X(t)){var r=No(t);e.mainType=r.main||null,e.subType=r.sub||null}else{var o=["Index","Name","Id"],a={name:1,dataIndex:1,dataType:1};E(t,(function(t,r){for(var s=!1,l=0;l<o.length;l++){var u=o[l],h=r.lastIndexOf(u);if(h>0&&h===r.length-u.length){var c=r.slice(0,h);"data"!==c&&(e.mainType=c,e[u.toLowerCase()]=t,s=!0)}}a.hasOwnProperty(r)&&(n[r]=t,s=!0),s||(i[r]=t)}))}return{cptQuery:e,dataQuery:n,otherQuery:i}},t.prototype.filter=function(t,e){var n=this.eventInfo;if(!n)return!0;var i=n.targetEl,r=n.packedEvent,o=n.model,a=n.view;if(!o||!a)return!0;var s=e.cptQuery,l=e.dataQuery;return u(s,o,"mainType")&&u(s,o,"subType")&&u(s,o,"index","componentIndex")&&u(s,o,"name")&&u(s,o,"id")&&u(l,r,"name")&&u(l,r,"dataIndex")&&u(l,r,"dataType")&&(!a.filterForExposedEvent||a.filterForExposedEvent(t,e.otherQuery,i,r));function u(t,e,n,i){return null==t[n]||e[i||n]===t[n]}},t.prototype.afterTrigger=function(){this.eventInfo=null},t}(),hy=["symbol","symbolSize","symbolRotate","symbolOffset"],cy=hy.concat(["symbolKeepAspect"]),py={createOnAllSeries:!0,performRawSeries:!0,reset:function(t,e){var n=t.getData();if(t.legendIcon&&n.setVisual("legendIcon",t.legendIcon),t.hasSymbolVisual){for(var i={},r={},o=!1,a=0;a<hy.length;a++){var s=hy[a],l=t.get(s);U(l)?(o=!0,r[s]=l):i[s]=l}if(i.symbol=i.symbol||t.defaultSymbol,n.setVisual(A({legendIcon:t.legendIcon||i.symbol,symbolKeepAspect:t.get("symbolKeepAspect")},i)),!e.isSeriesFiltered(t)){var u=G(r);return{dataEach:o?function(e,n){for(var i=t.getRawValue(n),o=t.getDataParams(n),a=0;a<u.length;a++){var s=u[a];e.setItemVisual(n,s,r[s](i,o))}}:null}}}}},dy={createOnAllSeries:!0,performRawSeries:!0,reset:function(t,e){if(t.hasSymbolVisual&&!e.isSeriesFiltered(t))return{dataEach:t.getData().hasItemOption?function(t,e){for(var n=t.getItemModel(e),i=0;i<cy.length;i++){var r=cy[i],o=n.getShallow(r,!0);null!=o&&t.setItemVisual(e,r,o)}}:null}}};function fy(t,e,n){switch(n){case"color":return t.getItemVisual(e,"style")[t.getVisual("drawType")];case"opacity":return t.getItemVisual(e,"style").opacity;case"symbol":case"symbolSize":case"liftZ":return t.getItemVisual(e,n);default:0}}function gy(t,e){switch(e){case"color":return t.getVisual("style")[t.getVisual("drawType")];case"opacity":return t.getVisual("style").opacity;case"symbol":case"symbolSize":case"liftZ":return t.getVisual(e);default:0}}function yy(t,e,n,i){switch(n){case"color":t.ensureUniqueItemVisual(e,"style")[t.getVisual("drawType")]=i,t.setItemVisual(e,"colorFromPalette",!1);break;case"opacity":t.ensureUniqueItemVisual(e,"style").opacity=i;break;case"symbol":case"symbolSize":case"liftZ":t.setItemVisual(e,n,i);break;default:0}}function vy(t,e){function n(e,n){var i=[];return e.eachComponent({mainType:"series",subType:t,query:n},(function(t){i.push(t.seriesIndex)})),i}E([[t+"ToggleSelect","toggleSelect"],[t+"Select","select"],[t+"UnSelect","unselect"]],(function(t){e(t[0],(function(e,i,r){e=A({},e),r.dispatchAction(A(e,{type:t[1],seriesIndex:n(i,e)}))}))}))}function my(t,e,n,i,r){var o=t+e;n.isSilent(o)||i.eachComponent({mainType:"series",subType:"pie"},(function(t){for(var e=t.seriesIndex,i=t.option.selectedMap,a=r.selected,s=0;s<a.length;s++)if(a[s].seriesIndex===e){var l=t.getData(),u=wo(l,r.fromActionPayload);n.trigger(o,{type:o,seriesId:t.id,name:Y(u)?l.getName(u[0]):l.getName(u),selected:X(i)?i:A({},i)})}}))}function xy(t,e,n){for(var i;t&&(!e(t)||(i=t,!n));)t=t.__hostTarget||t.parent;return i}var _y=Math.round(9*Math.random()),by="function"==typeof Object.defineProperty,wy=function(){function t(){this._id="__ec_inner_"+_y++}return t.prototype.get=function(t){return this._guard(t)[this._id]},t.prototype.set=function(t,e){var n=this._guard(t);return by?Object.defineProperty(n,this._id,{value:e,enumerable:!1,configurable:!0}):n[this._id]=e,this},t.prototype.delete=function(t){return!!this.has(t)&&(delete this._guard(t)[this._id],!0)},t.prototype.has=function(t){return!!this._guard(t)[this._id]},t.prototype._guard=function(t){if(t!==Object(t))throw TypeError("Value of WeakMap is not a non-null object.");return t},t}(),Sy=gs.extend({type:"triangle",shape:{cx:0,cy:0,width:0,height:0},buildPath:function(t,e){var n=e.cx,i=e.cy,r=e.width/2,o=e.height/2;t.moveTo(n,i-o),t.lineTo(n+r,i+o),t.lineTo(n-r,i+o),t.closePath()}}),My=gs.extend({type:"diamond",shape:{cx:0,cy:0,width:0,height:0},buildPath:function(t,e){var n=e.cx,i=e.cy,r=e.width/2,o=e.height/2;t.moveTo(n,i-o),t.lineTo(n+r,i),t.lineTo(n,i+o),t.lineTo(n-r,i),t.closePath()}}),Iy=gs.extend({type:"pin",shape:{x:0,y:0,width:0,height:0},buildPath:function(t,e){var n=e.x,i=e.y,r=e.width/5*3,o=Math.max(r,e.height),a=r/2,s=a*a/(o-a),l=i-o+a+s,u=Math.asin(s/a),h=Math.cos(u)*a,c=Math.sin(u),p=Math.cos(u),d=.6*a,f=.7*a;t.moveTo(n-h,l+s),t.arc(n,l,a,Math.PI-u,2*Math.PI+u),t.bezierCurveTo(n+h-c*d,l+s+p*d,n,i-f,n,i),t.bezierCurveTo(n,i-f,n-h+c*d,l+s+p*d,n-h,l+s),t.closePath()}}),Ty=gs.extend({type:"arrow",shape:{x:0,y:0,width:0,height:0},buildPath:function(t,e){var n=e.height,i=e.width,r=e.x,o=e.y,a=i/3*2;t.moveTo(r,o),t.lineTo(r+a,o+n),t.lineTo(r,o+n/4*3),t.lineTo(r-a,o+n),t.lineTo(r,o),t.closePath()}}),Cy={line:function(t,e,n,i,r){r.x1=t,r.y1=e+i/2,r.x2=t+n,r.y2=e+i/2},rect:function(t,e,n,i,r){r.x=t,r.y=e,r.width=n,r.height=i},roundRect:function(t,e,n,i,r){r.x=t,r.y=e,r.width=n,r.height=i,r.r=Math.min(n,i)/4},square:function(t,e,n,i,r){var o=Math.min(n,i);r.x=t,r.y=e,r.width=o,r.height=o},circle:function(t,e,n,i,r){r.cx=t+n/2,r.cy=e+i/2,r.r=Math.min(n,i)/2},diamond:function(t,e,n,i,r){r.cx=t+n/2,r.cy=e+i/2,r.width=n,r.height=i},pin:function(t,e,n,i,r){r.x=t+n/2,r.y=e+i/2,r.width=n,r.height=i},arrow:function(t,e,n,i,r){r.x=t+n/2,r.y=e+i/2,r.width=n,r.height=i},triangle:function(t,e,n,i,r){r.cx=t+n/2,r.cy=e+i/2,r.width=n,r.height=i}},Dy={};E({line:zu,rect:Cs,roundRect:Cs,square:Cs,circle:hu,diamond:My,pin:Iy,arrow:Ty,triangle:Sy},(function(t,e){Dy[e]=new t}));var Ay=gs.extend({type:"symbol",shape:{symbolType:"",x:0,y:0,width:0,height:0},calculateTextPosition:function(t,e,n){var i=yr(t,e,n),r=this.shape;return r&&"pin"===r.symbolType&&"inside"===e.position&&(i.y=n.y+.4*n.height),i},buildPath:function(t,e,n){var i=e.symbolType;if("none"!==i){var r=Dy[i];r||(r=Dy[i="rect"]),Cy[i](e.x,e.y,e.width,e.height,r.shape),r.buildPath(t,r.shape,n)}}});function ky(t,e){if("image"!==this.type){var n=this.style;this.__isEmptyBrush?(n.stroke=t,n.fill=e||"#fff",n.lineWidth=2):"line"===this.shape.symbolType?n.stroke=t:n.fill=t,this.markRedraw()}}function Ly(t,e,n,i,r,o,a){var s,l=0===t.indexOf("empty");return l&&(t=t.substr(5,1).toLowerCase()+t.substr(6)),(s=0===t.indexOf("image://")?_h(t.slice(8),new sr(e,n,i,r),a?"center":"cover"):0===t.indexOf("path://")?xh(t.slice(7),{},new sr(e,n,i,r),a?"center":"cover"):new Ay({shape:{symbolType:t,x:e,y:n,width:i,height:r}})).__isEmptyBrush=l,s.setColor=ky,o&&s.setColor(o),s}function Py(t){return Y(t)||(t=[+t,+t]),[t[0]||0,t[1]||0]}function Oy(t,e){if(null!=t)return Y(t)||(t=[t,t]),[Er(t[0],e[0])||0,Er(rt(t[1],t[0]),e[1])||0]}function Ry(t){return isFinite(t)}function Ny(t,e,n){for(var i="radial"===e.type?function(t,e,n){var i=n.width,r=n.height,o=Math.min(i,r),a=null==e.x?.5:e.x,s=null==e.y?.5:e.y,l=null==e.r?.5:e.r;return e.global||(a=a*i+n.x,s=s*r+n.y,l*=o),a=Ry(a)?a:.5,s=Ry(s)?s:.5,l=l>=0&&Ry(l)?l:.5,t.createRadialGradient(a,s,0,a,s,l)}(t,e,n):function(t,e,n){var i=null==e.x?0:e.x,r=null==e.x2?1:e.x2,o=null==e.y?0:e.y,a=null==e.y2?0:e.y2;return e.global||(i=i*n.width+n.x,r=r*n.width+n.x,o=o*n.height+n.y,a=a*n.height+n.y),i=Ry(i)?i:0,r=Ry(r)?r:1,o=Ry(o)?o:0,a=Ry(a)?a:0,t.createLinearGradient(i,o,r,a)}(t,e,n),r=e.colorStops,o=0;o<r.length;o++)i.addColorStop(r[o].offset,r[o].color);return i}function Ey(t){return parseInt(t,10)}function zy(t,e,n){var i=["width","height"][e],r=["clientWidth","clientHeight"][e],o=["paddingLeft","paddingTop"][e],a=["paddingRight","paddingBottom"][e];if(null!=n[i]&&"auto"!==n[i])return parseFloat(n[i]);var s=document.defaultView.getComputedStyle(t);return(t[r]||Ey(s[i])||Ey(t.style[i]))-(Ey(s[o])||0)-(Ey(s[a])||0)|0}function Vy(t){var e,n,i=t.style,r=i.lineDash&&i.lineWidth>0&&(e=i.lineDash,n=i.lineWidth,e&&"solid"!==e&&n>0?"dashed"===e?[4*n,2*n]:"dotted"===e?[n]:j(e)?[e]:Y(e)?e:null:null),o=i.lineDashOffset;if(r){var a=i.strokeNoScale&&t.getLineScale?t.getLineScale():1;a&&1!==a&&(r=z(r,(function(t){return t/a})),o/=a)}return[r,o]}var By=new qa(!0);function Fy(t){var e=t.stroke;return!(null==e||"none"===e||!(t.lineWidth>0))}function Gy(t){return"string"==typeof t&&"none"!==t}function Wy(t){var e=t.fill;return null!=e&&"none"!==e}function Hy(t,e){if(null!=e.fillOpacity&&1!==e.fillOpacity){var n=t.globalAlpha;t.globalAlpha=e.fillOpacity*e.opacity,t.fill(),t.globalAlpha=n}else t.fill()}function Yy(t,e){if(null!=e.strokeOpacity&&1!==e.strokeOpacity){var n=t.globalAlpha;t.globalAlpha=e.strokeOpacity*e.opacity,t.stroke(),t.globalAlpha=n}else t.stroke()}function Uy(t,e,n){var i=Zo(e.image,e.__image,n);if(qo(i)){var r=t.createPattern(i,e.repeat||"repeat");if("function"==typeof DOMMatrix&&r&&r.setTransform){var o=new DOMMatrix;o.translateSelf(e.x||0,e.y||0),o.rotateSelf(0,0,(e.rotation||0)*_t),o.scaleSelf(e.scaleX||1,e.scaleY||1),r.setTransform(o)}return r}}var Xy=["shadowBlur","shadowOffsetX","shadowOffsetY"],Zy=[["lineCap","butt"],["lineJoin","miter"],["miterLimit",10]];function jy(t,e,n,i,r){var o=!1;if(!i&&e===(n=n||{}))return!1;if(i||e.opacity!==n.opacity){$y(t,r),o=!0;var a=Math.max(Math.min(e.opacity,1),0);t.globalAlpha=isNaN(a)?ua.opacity:a}(i||e.blend!==n.blend)&&(o||($y(t,r),o=!0),t.globalCompositeOperation=e.blend||ua.blend);for(var s=0;s<Xy.length;s++){var l=Xy[s];(i||e[l]!==n[l])&&(o||($y(t,r),o=!0),t[l]=t.dpr*(e[l]||0))}return(i||e.shadowColor!==n.shadowColor)&&(o||($y(t,r),o=!0),t.shadowColor=e.shadowColor||ua.shadowColor),o}function qy(t,e,n,i,r){var o=Jy(e,r.inHover),a=i?null:n&&Jy(n,r.inHover)||{};if(o===a)return!1;var s=jy(t,o,a,i,r);if((i||o.fill!==a.fill)&&(s||($y(t,r),s=!0),Gy(o.fill)&&(t.fillStyle=o.fill)),(i||o.stroke!==a.stroke)&&(s||($y(t,r),s=!0),Gy(o.stroke)&&(t.strokeStyle=o.stroke)),(i||o.opacity!==a.opacity)&&(s||($y(t,r),s=!0),t.globalAlpha=null==o.opacity?1:o.opacity),e.hasStroke()){var l=o.lineWidth/(o.strokeNoScale&&e.getLineScale?e.getLineScale():1);t.lineWidth!==l&&(s||($y(t,r),s=!0),t.lineWidth=l)}for(var u=0;u<Zy.length;u++){var h=Zy[u],c=h[0];(i||o[c]!==a[c])&&(s||($y(t,r),s=!0),t[c]=o[c]||h[1])}return s}function Ky(t,e){var n=e.transform,i=t.dpr||1;n?t.setTransform(i*n[0],i*n[1],i*n[2],i*n[3],i*n[4],i*n[5]):t.setTransform(i,0,0,i,0,0)}function $y(t,e){e.batchFill&&t.fill(),e.batchStroke&&t.stroke(),e.batchFill="",e.batchStroke=""}function Jy(t,e){return e&&t.__hoverStyle||t.style}function Qy(t,e){tv(t,e,{inHover:!1,viewWidth:0,viewHeight:0},!0)}function tv(t,e,n,i){var r=e.transform;if(!e.shouldBePainted(n.viewWidth,n.viewHeight,!1,!1))return e.__dirty&=-2,void(e.__isRendered=!1);var o=e.__clipPaths,s=n.prevElClipPaths,l=!1,u=!1;if(s&&!function(t,e){if(t===e||!t&&!e)return!1;if(!t||!e||t.length!==e.length)return!0;for(var n=0;n<t.length;n++)if(t[n]!==e[n])return!0;return!1}(o,s)||(s&&s.length&&($y(t,n),t.restore(),u=l=!0,n.prevElClipPaths=null,n.allClipped=!1,n.prevEl=null),o&&o.length&&($y(t,n),t.save(),function(t,e,n){for(var i=!1,r=0;r<t.length;r++){var o=t[r];i=i||o.isZeroArea(),Ky(e,o),e.beginPath(),o.buildPath(e,o.shape),e.clip()}n.allClipped=i}(o,t,n),l=!0),n.prevElClipPaths=o),n.allClipped)e.__isRendered=!1;else{e.beforeBrush&&e.beforeBrush(),e.innerBeforeBrush();var h=n.prevEl;h||(u=l=!0);var c,p,d=e instanceof gs&&e.autoBatch&&function(t){var e=Wy(t),n=Fy(t);return!(t.lineDash||!(+e^+n)||e&&"string"!=typeof t.fill||n&&"string"!=typeof t.stroke||t.strokePercent<1||t.strokeOpacity<1||t.fillOpacity<1)}(e.style);l||(c=r,p=h.transform,c&&p?c[0]!==p[0]||c[1]!==p[1]||c[2]!==p[2]||c[3]!==p[3]||c[4]!==p[4]||c[5]!==p[5]:c||p)?($y(t,n),Ky(t,e)):d||$y(t,n);var f=Jy(e,n.inHover);e instanceof gs?(1!==n.lastDrawType&&(u=!0,n.lastDrawType=1),qy(t,e,h,u,n),d&&(n.batchFill||n.batchStroke)||t.beginPath(),function(t,e,n,i){var r,o=Fy(n),a=Wy(n),s=n.strokePercent,l=s<1,u=!e.path;e.silent&&!l||!u||e.createPathProxy();var h=e.path||By,c=e.__dirty;if(!i){var p=n.fill,d=n.stroke,f=a&&!!p.colorStops,g=o&&!!d.colorStops,y=a&&!!p.image,v=o&&!!d.image,m=void 0,x=void 0,_=void 0,b=void 0,w=void 0;(f||g)&&(w=e.getBoundingRect()),f&&(m=c?Ny(t,p,w):e.__canvasFillGradient,e.__canvasFillGradient=m),g&&(x=c?Ny(t,d,w):e.__canvasStrokeGradient,e.__canvasStrokeGradient=x),y&&(_=c||!e.__canvasFillPattern?Uy(t,p,e):e.__canvasFillPattern,e.__canvasFillPattern=_),v&&(b=c||!e.__canvasStrokePattern?Uy(t,d,e):e.__canvasStrokePattern,e.__canvasStrokePattern=_),f?t.fillStyle=m:y&&(_?t.fillStyle=_:a=!1),g?t.strokeStyle=x:v&&(b?t.strokeStyle=b:o=!1)}var S,M,I=e.getGlobalScale();h.setScale(I[0],I[1],e.segmentIgnoreThreshold),t.setLineDash&&n.lineDash&&(S=(r=Vy(e))[0],M=r[1]);var T=!0;(u||4&c)&&(h.setDPR(t.dpr),l?h.setContext(null):(h.setContext(t),T=!1),h.reset(),e.buildPath(h,e.shape,i),h.toStatic(),e.pathUpdated()),T&&h.rebuildPath(t,l?s:1),S&&(t.setLineDash(S),t.lineDashOffset=M),i||(n.strokeFirst?(o&&Yy(t,n),a&&Hy(t,n)):(a&&Hy(t,n),o&&Yy(t,n))),S&&t.setLineDash([])}(t,e,f,d),d&&(n.batchFill=f.fill||"",n.batchStroke=f.stroke||"")):e instanceof vs?(3!==n.lastDrawType&&(u=!0,n.lastDrawType=3),qy(t,e,h,u,n),function(t,e,n){var i,r=n.text;if(null!=r&&(r+=""),r){t.font=n.font||a,t.textAlign=n.textAlign,t.textBaseline=n.textBaseline;var o=void 0,s=void 0;t.setLineDash&&n.lineDash&&(o=(i=Vy(e))[0],s=i[1]),o&&(t.setLineDash(o),t.lineDashOffset=s),n.strokeFirst?(Fy(n)&&t.strokeText(r,n.x,n.y),Wy(n)&&t.fillText(r,n.x,n.y)):(Wy(n)&&t.fillText(r,n.x,n.y),Fy(n)&&t.strokeText(r,n.x,n.y)),o&&t.setLineDash([])}}(t,e,f)):e instanceof _s?(2!==n.lastDrawType&&(u=!0,n.lastDrawType=2),function(t,e,n,i,r){jy(t,Jy(e,r.inHover),n&&Jy(n,r.inHover),i,r)}(t,e,h,u,n),function(t,e,n){var i=e.__image=Zo(n.image,e.__image,e,e.onload);if(i&&qo(i)){var r=n.x||0,o=n.y||0,a=e.getWidth(),s=e.getHeight(),l=i.width/i.height;if(null==a&&null!=s?a=s*l:null==s&&null!=a?s=a/l:null==a&&null==s&&(a=i.width,s=i.height),n.sWidth&&n.sHeight){var u=n.sx||0,h=n.sy||0;t.drawImage(i,u,h,n.sWidth,n.sHeight,r,o,a,s)}else if(n.sx&&n.sy){var c=a-(u=n.sx),p=s-(h=n.sy);t.drawImage(i,u,h,c,p,r,o,a,s)}else t.drawImage(i,r,o,a,s)}}(t,e,f)):e.getTemporalDisplayables&&(4!==n.lastDrawType&&(u=!0,n.lastDrawType=4),function(t,e,n){var i=e.getDisplayables(),r=e.getTemporalDisplayables();t.save();var o,a,s={prevElClipPaths:null,prevEl:null,allClipped:!1,viewWidth:n.viewWidth,viewHeight:n.viewHeight,inHover:n.inHover};for(o=e.getCursor(),a=i.length;o<a;o++){(h=i[o]).beforeBrush&&h.beforeBrush(),h.innerBeforeBrush(),tv(t,h,s,o===a-1),h.innerAfterBrush(),h.afterBrush&&h.afterBrush(),s.prevEl=h}for(var l=0,u=r.length;l<u;l++){var h;(h=r[l]).beforeBrush&&h.beforeBrush(),h.innerBeforeBrush(),tv(t,h,s,l===u-1),h.innerAfterBrush(),h.afterBrush&&h.afterBrush(),s.prevEl=h}e.clearTemporalDisplayables(),e.notClear=!0,t.restore()}(t,e,n)),d&&i&&$y(t,n),e.innerAfterBrush(),e.afterBrush&&e.afterBrush(),n.prevEl=e,e.__dirty=0,e.__isRendered=!0}}var ev=new wy,nv=new ln(100),iv=["symbol","symbolSize","symbolKeepAspect","color","backgroundColor","dashArrayX","dashArrayY","maxTileWidth","maxTileHeight"];function rv(t,e){if("none"===t)return null;var n=e.getDevicePixelRatio(),i=e.getZr(),r="svg"===i.painter.type;t.dirty&&ev.delete(t);var o=ev.get(t);if(o)return o;var a=k(t,{symbol:"rect",symbolSize:1,symbolKeepAspect:!0,color:"rgba(0, 0, 0, 0.2)",backgroundColor:null,dashArrayX:5,dashArrayY:5,rotation:0,maxTileWidth:512,maxTileHeight:512});"none"===a.backgroundColor&&(a.backgroundColor=null);var s={repeat:"repeat"};return function(t){for(var e,o=[n],s=!0,l=0;l<iv.length;++l){var u=a[iv[l]];if(null!=u&&!Y(u)&&!X(u)&&!j(u)&&"boolean"!=typeof u){s=!1;break}o.push(u)}if(s){e=o.join(",")+(r?"-svg":"");var c=nv.get(e);c&&(r?t.svgElement=c:t.image=c)}var p,d=av(a.dashArrayX),f=function(t){if(!t||"object"==typeof t&&0===t.length)return[0,0];if(j(t)){var e=Math.ceil(t);return[e,e]}var n=z(t,(function(t){return Math.ceil(t)}));return t.length%2?n.concat(n):n}(a.dashArrayY),g=ov(a.symbol),y=(b=d,z(b,(function(t){return sv(t)}))),v=sv(f),m=!r&&h.createCanvas(),x=r&&{tag:"g",attrs:{},key:"dcl",children:[]},_=function(){for(var t=1,e=0,n=y.length;e<n;++e)t=ro(t,y[e]);var i=1;for(e=0,n=g.length;e<n;++e)i=ro(i,g[e].length);t*=i;var r=v*y.length*g.length;return{width:Math.max(1,Math.min(t,a.maxTileWidth)),height:Math.max(1,Math.min(r,a.maxTileHeight))}}();var b;m&&(m.width=_.width*n,m.height=_.height*n,p=m.getContext("2d"));(function(){p&&(p.clearRect(0,0,m.width,m.height),a.backgroundColor&&(p.fillStyle=a.backgroundColor,p.fillRect(0,0,m.width,m.height)));for(var t=0,e=0;e<f.length;++e)t+=f[e];if(t<=0)return;var o=-v,s=0,l=0,u=0;for(;o<_.height;){if(s%2==0){for(var h=l/2%g.length,c=0,y=0,b=0;c<2*_.width;){var w=0;for(e=0;e<d[u].length;++e)w+=d[u][e];if(w<=0)break;if(y%2==0){var S=.5*(1-a.symbolSize),M=c+d[u][y]*S,I=o+f[s]*S,T=d[u][y]*a.symbolSize,C=f[s]*a.symbolSize,D=b/2%g[h].length;A(M,I,T,C,g[h][D])}c+=d[u][y],++b,++y===d[u].length&&(y=0)}++u===d.length&&(u=0)}o+=f[s],++l,++s===f.length&&(s=0)}function A(t,e,o,s,l){var u=r?1:n,h=Ly(l,t*u,e*u,o*u,s*u,a.color,a.symbolKeepAspect);if(r){var c=i.painter.renderOneToVNode(h);c&&x.children.push(c)}else Qy(p,h)}})(),s&&nv.put(e,m||x);t.image=m,t.svgElement=x,t.svgWidth=_.width,t.svgHeight=_.height}(s),s.rotation=a.rotation,s.scaleX=s.scaleY=r?1:1/n,ev.set(t,s),t.dirty=!1,s}function ov(t){if(!t||0===t.length)return[["rect"]];if(X(t))return[[t]];for(var e=!0,n=0;n<t.length;++n)if(!X(t[n])){e=!1;break}if(e)return ov([t]);var i=[];for(n=0;n<t.length;++n)X(t[n])?i.push([t[n]]):i.push(t[n]);return i}function av(t){if(!t||0===t.length)return[[0,0]];if(j(t))return[[r=Math.ceil(t),r]];for(var e=!0,n=0;n<t.length;++n)if(!j(t[n])){e=!1;break}if(e)return av([t]);var i=[];for(n=0;n<t.length;++n)if(j(t[n])){var r=Math.ceil(t[n]);i.push([r,r])}else{(r=z(t[n],(function(t){return Math.ceil(t)}))).length%2==1?i.push(r.concat(r)):i.push(r)}return i}function sv(t){for(var e=0,n=0;n<t.length;++n)e+=t[n];return t.length%2==1?2*e:e}var lv=new Xt,uv={};function hv(t){return uv[t]}var cv="undefined"!=typeof window,pv=2e3,dv=4500,fv={PROCESSOR:{FILTER:1e3,SERIES_FILTER:800,STATISTIC:5e3},VISUAL:{LAYOUT:1e3,PROGRESSIVE_LAYOUT:1100,GLOBAL:pv,CHART:3e3,POST_CHART_LAYOUT:4600,COMPONENT:4e3,BRUSH:5e3,CHART_ITEM:dv,ARIA:6e3,DECAL:7e3}},gv=/^[a-zA-Z0-9_]+$/,yv="__connectUpdateStatus";function vv(t){return function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];if(!this.isDisposed())return xv(this,t,e);Hv(this.id)}}function mv(t){return function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return xv(this,t,e)}}function xv(t,e,n){return n[0]=n[0]&&n[0].toLowerCase(),Xt.prototype[e].apply(t,n)}var _v,bv,wv,Sv,Mv,Iv,Tv,Cv,Dv,Av,kv,Lv,Pv,Ov,Rv,Nv,Ev,zv,Vv=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e}(Xt),Bv=Vv.prototype;Bv.on=mv("on"),Bv.off=mv("off");var Fv=function(t){function e(e,n,i){var r=t.call(this,new uy)||this;r._chartsViews=[],r._chartsMap={},r._componentsViews=[],r._componentsMap={},r._pendingActions=[],i=i||{},X(n)&&(n=qv[n]),r._dom=e;var o="canvas",a=!1,s=r._zr=Lr(e,{renderer:i.renderer||o,devicePixelRatio:i.devicePixelRatio,width:i.width,height:i.height,ssr:i.ssr,useDirtyRect:null==i.useDirtyRect?a:i.useDirtyRect});r._ssr=i.ssr,r._throttledZrFlush=Dg(W(s.flush,s),17),(n=T(n))&&Od(n,!0),r._theme=n,r._locale=function(t){if(X(t)){var e=_c[t.toUpperCase()]||{};return t===vc||t===mc?T(e):C(T(e),T(_c.EN),!1)}return C(T(t),T(_c.EN),!1)}(i.locale||wc),r._coordSysMgr=new hd;var l=r._api=Rv(r);function u(t,e){return t.__prio-e.__prio}return Ie(jv,u),Ie(Xv,u),r._scheduler=new Gg(r,l,Xv,jv),r._messageCenter=new Vv,r._initEvents(),r.resize=W(r.resize,r),s.animation.on("frame",r._onframe,r),Av(s,r),kv(s,r),ct(r),r}return n(e,t),e.prototype._onframe=function(){if(!this._disposed){zv(this);var t=this._scheduler;if(this.__pendingUpdate){var e=this.__pendingUpdate.silent;this.__flagInMainProcess=!0;try{_v(this),Sv.update.call(this,null,this.__pendingUpdate.updateParams)}catch(t){throw this.__flagInMainProcess=!1,this.__pendingUpdate=null,t}this._zr.flush(),this.__flagInMainProcess=!1,this.__pendingUpdate=null,Cv.call(this,e),Dv.call(this,e)}else if(t.unfinished){var n=1,i=this._model,r=this._api;t.unfinished=!1;do{var o=+new Date;t.performSeriesTasks(i),t.performDataProcessorTasks(i),Iv(this,i),t.performVisualTasks(i),Ov(this,this._model,r,"remain",{}),n-=+new Date-o}while(n>0&&t.unfinished);t.unfinished||this._zr.flush()}}},e.prototype.getDom=function(){return this._dom},e.prototype.getId=function(){return this.id},e.prototype.getZr=function(){return this._zr},e.prototype.isSSR=function(){return this._ssr},e.prototype.setOption=function(t,e,n){if(!this.__flagInMainProcess)if(this._disposed)Hv(this.id);else{var i,r,o;if(q(e)&&(n=e.lazyUpdate,i=e.silent,r=e.replaceMerge,o=e.transition,e=e.notMerge),this.__flagInMainProcess=!0,!this._model||e){var a=new pd(this._api),s=this._theme,l=this._model=new id;l.scheduler=this._scheduler,l.ssr=this._ssr,l.init(null,null,null,s,this._locale,a)}this._model.setOption(t,{replaceMerge:r},Zv);var u={seriesTransition:o,optionChanged:!0};if(n)this.__pendingUpdate={silent:i,updateParams:u},this.__flagInMainProcess=!1,this.getZr().wakeUp();else{try{_v(this),Sv.update.call(this,null,u)}catch(t){throw this.__pendingUpdate=null,this.__flagInMainProcess=!1,t}this._ssr||this._zr.flush(),this.__pendingUpdate=null,this.__flagInMainProcess=!1,Cv.call(this,i),Dv.call(this,i)}}},e.prototype.setTheme=function(){oo()},e.prototype.getModel=function(){return this._model},e.prototype.getOption=function(){return this._model&&this._model.getOption()},e.prototype.getWidth=function(){return this._zr.getWidth()},e.prototype.getHeight=function(){return this._zr.getHeight()},e.prototype.getDevicePixelRatio=function(){return this._zr.painter.dpr||cv&&window.devicePixelRatio||1},e.prototype.getRenderedCanvas=function(t){return this.renderToCanvas(t)},e.prototype.renderToCanvas=function(t){t=t||{};var e=this._zr.painter;return e.getRenderedCanvas({backgroundColor:t.backgroundColor||this._model.get("backgroundColor"),pixelRatio:t.pixelRatio||this.getDevicePixelRatio()})},e.prototype.renderToSVGString=function(t){t=t||{};var e=this._zr.painter;return e.renderToString({useViewBox:t.useViewBox})},e.prototype.getSvgDataURL=function(){if(r.svgSupported){var t=this._zr;return E(t.storage.getDisplayList(),(function(t){t.stopAnimation(null,!0)})),t.painter.toDataURL()}},e.prototype.getDataURL=function(t){if(!this._disposed){var e=(t=t||{}).excludeComponents,n=this._model,i=[],r=this;E(e,(function(t){n.eachComponent({mainType:t},(function(t){var e=r._componentsMap[t.__viewId];e.group.ignore||(i.push(e),e.group.ignore=!0)}))}));var o="svg"===this._zr.painter.getType()?this.getSvgDataURL():this.renderToCanvas(t).toDataURL("image/"+(t&&t.type||"png"));return E(i,(function(t){t.group.ignore=!1})),o}Hv(this.id)},e.prototype.getConnectedDataURL=function(t){if(!this._disposed){var e="svg"===t.type,n=this.group,i=Math.min,r=Math.max,o=1/0;if(Jv[n]){var a=o,s=o,l=-1/0,u=-1/0,c=[],p=t&&t.pixelRatio||this.getDevicePixelRatio();E($v,(function(o,h){if(o.group===n){var p=e?o.getZr().painter.getSvgDom().innerHTML:o.renderToCanvas(T(t)),d=o.getDom().getBoundingClientRect();a=i(d.left,a),s=i(d.top,s),l=r(d.right,l),u=r(d.bottom,u),c.push({dom:p,left:d.left,top:d.top})}}));var d=(l*=p)-(a*=p),f=(u*=p)-(s*=p),g=h.createCanvas(),y=Lr(g,{renderer:e?"svg":"canvas"});if(y.resize({width:d,height:f}),e){var v="";return E(c,(function(t){var e=t.left-a,n=t.top-s;v+='<g transform="translate('+e+","+n+')">'+t.dom+"</g>"})),y.painter.getSvgRoot().innerHTML=v,t.connectedBackgroundColor&&y.painter.setBackgroundColor(t.connectedBackgroundColor),y.refreshImmediately(),y.painter.toDataURL()}return t.connectedBackgroundColor&&y.add(new Cs({shape:{x:0,y:0,width:d,height:f},style:{fill:t.connectedBackgroundColor}})),E(c,(function(t){var e=new _s({style:{x:t.left*p-a,y:t.top*p-s,image:t.dom}});y.add(e)})),y.refreshImmediately(),g.toDataURL("image/"+(t&&t.type||"png"))}return this.getDataURL(t)}Hv(this.id)},e.prototype.convertToPixel=function(t,e){return Mv(this,"convertToPixel",t,e)},e.prototype.convertFromPixel=function(t,e){return Mv(this,"convertFromPixel",t,e)},e.prototype.containPixel=function(t,e){var n;if(!this._disposed)return E(Io(this._model,t),(function(t,i){i.indexOf("Models")>=0&&E(t,(function(t){var r=t.coordinateSystem;if(r&&r.containPoint)n=n||!!r.containPoint(e);else if("seriesModels"===i){var o=this._chartsMap[t.__viewId];o&&o.containPoint&&(n=n||o.containPoint(e,t))}else 0}),this)}),this),!!n;Hv(this.id)},e.prototype.getVisual=function(t,e){var n=Io(this._model,t,{defaultMainType:"series"}),i=n.seriesModel;var r=i.getData(),o=n.hasOwnProperty("dataIndexInside")?n.dataIndexInside:n.hasOwnProperty("dataIndex")?r.indexOfRawIndex(n.dataIndex):null;return null!=o?fy(r,o,e):gy(r,e)},e.prototype.getViewOfComponentModel=function(t){return this._componentsMap[t.__viewId]},e.prototype.getViewOfSeriesModel=function(t){return this._chartsMap[t.__viewId]},e.prototype._initEvents=function(){var t,e,n,i=this;E(Wv,(function(t){var e=function(e){var n,r=i.getModel(),o=e.target,a="globalout"===t;if(a?n={}:o&&xy(o,(function(t){var e=Hs(t);if(e&&null!=e.dataIndex){var i=e.dataModel||r.getSeriesByIndex(e.seriesIndex);return n=i&&i.getDataParams(e.dataIndex,e.dataType)||{},!0}if(e.eventData)return n=A({},e.eventData),!0}),!0),n){var s=n.componentType,l=n.componentIndex;"markLine"!==s&&"markPoint"!==s&&"markArea"!==s||(s="series",l=n.seriesIndex);var u=s&&null!=l&&r.getComponent(s,l),h=u&&i["series"===u.mainType?"_chartsMap":"_componentsMap"][u.__viewId];0,n.event=e,n.type=t,i._$eventProcessor.eventInfo={targetEl:o,packedEvent:n,model:u,view:h},i.trigger(t,n)}};e.zrEventfulCallAtLast=!0,i._zr.on(t,e,i)})),E(Uv,(function(t,e){i._messageCenter.on(e,(function(t){this.trigger(e,t)}),i)})),E(["selectchanged"],(function(t){i._messageCenter.on(t,(function(e){this.trigger(t,e)}),i)})),t=this._messageCenter,e=this,n=this._api,t.on("selectchanged",(function(t){var i=n.getModel();t.isFromClick?(my("map","selectchanged",e,i,t),my("pie","selectchanged",e,i,t)):"select"===t.fromAction?(my("map","selected",e,i,t),my("pie","selected",e,i,t)):"unselect"===t.fromAction&&(my("map","unselected",e,i,t),my("pie","unselected",e,i,t))}))},e.prototype.isDisposed=function(){return this._disposed},e.prototype.clear=function(){this._disposed?Hv(this.id):this.setOption({series:[]},!0)},e.prototype.dispose=function(){if(this._disposed)Hv(this.id);else{this._disposed=!0,this.getDom()&&ko(this.getDom(),em,"");var t=this,e=t._api,n=t._model;E(t._componentsViews,(function(t){t.dispose(n,e)})),E(t._chartsViews,(function(t){t.dispose(n,e)})),t._zr.dispose(),t._dom=t._model=t._chartsMap=t._componentsMap=t._chartsViews=t._componentsViews=t._scheduler=t._api=t._zr=t._throttledZrFlush=t._theme=t._coordSysMgr=t._messageCenter=null,delete $v[t.id]}},e.prototype.resize=function(t){if(!this.__flagInMainProcess)if(this._disposed)Hv(this.id);else{this._zr.resize(t);var e=this._model;if(this._loadingFX&&this._loadingFX.resize(),e){var n=e.resetOption("media"),i=t&&t.silent;this.__pendingUpdate&&(null==i&&(i=this.__pendingUpdate.silent),n=!0,this.__pendingUpdate=null),this.__flagInMainProcess=!0;try{n&&_v(this),Sv.update.call(this,{type:"resize",animation:A({duration:0},t&&t.animation)})}catch(t){throw this.__flagInMainProcess=!1,t}this.__flagInMainProcess=!1,Cv.call(this,i),Dv.call(this,i)}}},e.prototype.showLoading=function(t,e){if(this._disposed)Hv(this.id);else if(q(t)&&(e=t,t=""),t=t||"default",this.hideLoading(),Kv[t]){var n=Kv[t](this._api,e),i=this._zr;this._loadingFX=n,i.add(n)}},e.prototype.hideLoading=function(){this._disposed?Hv(this.id):(this._loadingFX&&this._zr.remove(this._loadingFX),this._loadingFX=null)},e.prototype.makeActionFromEvent=function(t){var e=A({},t);return e.type=Uv[t.type],e},e.prototype.dispatchAction=function(t,e){if(this._disposed)Hv(this.id);else if(q(e)||(e={silent:!!e}),Yv[t.type]&&this._model)if(this.__flagInMainProcess)this._pendingActions.push(t);else{var n=e.silent;Tv.call(this,t,n);var i=e.flush;i?this._zr.flush():!1!==i&&r.browser.weChat&&this._throttledZrFlush(),Cv.call(this,n),Dv.call(this,n)}},e.prototype.updateLabelLayout=function(){lv.trigger("series:layoutlabels",this._model,this._api,{updatedSeries:[]})},e.prototype.appendData=function(t){if(this._disposed)Hv(this.id);else{var e=t.seriesIndex,n=this.getModel().getSeriesByIndex(e);0,n.appendData(t),this._scheduler.unfinished=!0,this.getZr().wakeUp()}},e.internalField=function(){function t(t){t.clearColorPalette(),t.eachSeries((function(t){t.clearColorPalette()}))}function e(t){for(var e=[],n=t.currentStates,i=0;i<n.length;i++){var r=n[i];"emphasis"!==r&&"blur"!==r&&"select"!==r&&e.push(r)}t.selected&&t.states.select&&e.push("select"),2===t.hoverState&&t.states.emphasis?e.push("emphasis"):1===t.hoverState&&t.states.blur&&e.push("blur"),t.useStates(e)}function i(t,e){if(!t.preventAutoZ){var n=t.get("z")||0,i=t.get("zlevel")||0;e.eachRendered((function(t){return o(t,n,i,-1/0),!0}))}}function o(t,e,n,i){var r=t.getTextContent(),a=t.getTextGuideLine();if(t.isGroup)for(var s=t.childrenRef(),l=0;l<s.length;l++)i=Math.max(o(s[l],e,n,i),i);else t.z=e,t.zlevel=n,i=Math.max(t.z2,i);if(r&&(r.z=e,r.zlevel=n,isFinite(i)&&(r.z2=i+2)),a){var u=t.textGuideLineConfig;a.z=e,a.zlevel=n,isFinite(i)&&(a.z2=i+(u&&u.showAbove?1:-1))}return i}function a(t,e){e.eachRendered((function(t){if(!ah(t)){var e=t.getTextContent(),n=t.getTextGuideLine();t.stateTransition&&(t.stateTransition=null),e&&e.stateTransition&&(e.stateTransition=null),n&&n.stateTransition&&(n.stateTransition=null),t.hasState()?(t.prevStates=t.currentStates,t.clearStates()):t.prevStates&&(t.prevStates=null)}}))}function s(t,n){var i=t.getModel("stateAnimation"),r=t.isAnimationEnabled(),o=i.get("duration"),a=o>0?{duration:o,delay:i.get("delay"),easing:i.get("easing")}:null;n.eachRendered((function(t){if(t.states&&t.states.emphasis){if(ah(t))return;if(t instanceof gs&&function(t){var e=Zs(t);e.normalFill=t.style.fill,e.normalStroke=t.style.stroke;var n=t.states.select||{};e.selectFill=n.style&&n.style.fill||null,e.selectStroke=n.style&&n.style.stroke||null}(t),t.__dirty){var n=t.prevStates;n&&t.useStates(n)}if(r){t.stateTransition=a;var i=t.getTextContent(),o=t.getTextGuideLine();i&&(i.stateTransition=a),o&&(o.stateTransition=a)}t.__dirty&&e(t)}}))}_v=function(t){var e=t._scheduler;e.restorePipelines(t._model),e.prepareStageTasks(),bv(t,!0),bv(t,!1),e.plan()},bv=function(t,e){for(var n=t._model,i=t._scheduler,r=e?t._componentsViews:t._chartsViews,o=e?t._componentsMap:t._chartsMap,a=t._zr,s=t._api,l=0;l<r.length;l++)r[l].__alive=!1;function u(t){var l=t.__requireNewView;t.__requireNewView=!1;var u="_ec_"+t.id+"_"+t.type,h=!l&&o[u];if(!h){var c=No(t.type),p=e?gg.getClass(c.main,c.sub):xg.getClass(c.sub);0,(h=new p).init(n,s),o[u]=h,r.push(h),a.add(h.group)}t.__viewId=h.__id=u,h.__alive=!0,h.__model=t,h.group.__ecComponentInfo={mainType:t.mainType,index:t.componentIndex},!e&&i.prepareView(h,t,n,s)}e?n.eachComponent((function(t,e){"series"!==t&&u(e)})):n.eachSeries(u);for(l=0;l<r.length;){var h=r[l];h.__alive?l++:(!e&&h.renderTask.dispose(),a.remove(h.group),h.dispose(n,s),r.splice(l,1),o[h.__id]===h&&delete o[h.__id],h.__id=h.group.__ecComponentInfo=null)}},wv=function(t,e,n,i,r){var o=t._model;if(o.setUpdatePayload(n),i){var a={};a[i+"Id"]=n[i+"Id"],a[i+"Index"]=n[i+"Index"],a[i+"Name"]=n[i+"Name"];var s={mainType:i,query:a};r&&(s.subType=r);var l,u=n.excludeSeriesId;null!=u&&(l=ft(),E(ho(u),(function(t){var e=xo(t,null);null!=e&&l.set(e,!0)}))),o&&o.eachComponent(s,(function(e){if(!(l&&null!==l.get(e.id)))if(Wl(n))if(e instanceof sg)n.type!==Js||n.notBlur||e.get(["emphasis","disabled"])||function(t,e,n){var i=t.seriesIndex,r=t.getData(e.dataType);if(r){var o=wo(r,e);o=(Y(o)?o[0]:o)||0;var a=r.getItemGraphicEl(o);if(!a)for(var s=r.count(),l=0;!a&&l<s;)a=r.getItemGraphicEl(l++);if(a){var u=Hs(a);Dl(i,u.focus,u.blurScope,n)}else{var h=t.get(["emphasis","focus"]),c=t.get(["emphasis","blurScope"]);null!=h&&Dl(i,h,c,n)}}}(e,n,t._api);else{var i=kl(e.mainType,e.componentIndex,n.name,t._api),r=i.focusSelf,o=i.dispatchers;n.type===Js&&r&&!n.notBlur&&Al(e.mainType,e.componentIndex,t._api),o&&E(o,(function(t){n.type===Js?_l(t):bl(t)}))}else Gl(n)&&e instanceof sg&&(!function(t,e,n){if(Gl(e)){var i=e.dataType,r=wo(t.getData(i),e);Y(r)||(r=[r]),t[e.type===nl?"toggleSelect":e.type===tl?"select":"unselect"](r,i)}}(e,n,t._api),Ll(e),Ev(t))}),t),o&&o.eachComponent(s,(function(e){l&&null!==l.get(e.id)||h(t["series"===i?"_chartsMap":"_componentsMap"][e.__viewId])}),t)}else E([].concat(t._componentsViews).concat(t._chartsViews),h);function h(i){i&&i.__alive&&i[e]&&i[e](i.__model,o,t._api,n)}},Sv={prepareAndUpdate:function(t){_v(this),Sv.update.call(this,t,{optionChanged:null!=t.newOption})},update:function(e,n){var i=this._model,r=this._api,o=this._zr,a=this._coordSysMgr,s=this._scheduler;if(i){i.setUpdatePayload(e),s.restoreData(i,e),s.performSeriesTasks(i),a.create(i,r),s.performDataProcessorTasks(i,e),Iv(this,i),a.update(i,r),t(i),s.performVisualTasks(i,e),Lv(this,i,r,e,n);var l=i.get("backgroundColor")||"transparent",u=i.get("darkMode");o.setBackgroundColor(l),null!=u&&"auto"!==u&&o.setDarkMode(u),lv.trigger("afterupdate",i,r)}},updateTransform:function(e){var n=this,i=this._model,r=this._api;if(i){i.setUpdatePayload(e);var o=[];i.eachComponent((function(t,a){if("series"!==t){var s=n.getViewOfComponentModel(a);if(s&&s.__alive)if(s.updateTransform){var l=s.updateTransform(a,i,r,e);l&&l.update&&o.push(s)}else o.push(s)}}));var a=ft();i.eachSeries((function(t){var o=n._chartsMap[t.__viewId];if(o.updateTransform){var s=o.updateTransform(t,i,r,e);s&&s.update&&a.set(t.uid,1)}else a.set(t.uid,1)})),t(i),this._scheduler.performVisualTasks(i,e,{setDirty:!0,dirtyMap:a}),Ov(this,i,r,e,{},a),lv.trigger("afterupdate",i,r)}},updateView:function(e){var n=this._model;n&&(n.setUpdatePayload(e),xg.markUpdateMethod(e,"updateView"),t(n),this._scheduler.performVisualTasks(n,e,{setDirty:!0}),Lv(this,n,this._api,e,{}),lv.trigger("afterupdate",n,this._api))},updateVisual:function(e){var n=this,i=this._model;i&&(i.setUpdatePayload(e),i.eachSeries((function(t){t.getData().clearAllVisual()})),xg.markUpdateMethod(e,"updateVisual"),t(i),this._scheduler.performVisualTasks(i,e,{visualType:"visual",setDirty:!0}),i.eachComponent((function(t,r){if("series"!==t){var o=n.getViewOfComponentModel(r);o&&o.__alive&&o.updateVisual(r,i,n._api,e)}})),i.eachSeries((function(t){n._chartsMap[t.__viewId].updateVisual(t,i,n._api,e)})),lv.trigger("afterupdate",i,this._api))},updateLayout:function(t){Sv.update.call(this,t)}},Mv=function(t,e,n,i){if(t._disposed)Hv(t.id);else{for(var r,o=t._model,a=t._coordSysMgr.getCoordinateSystems(),s=Io(o,n),l=0;l<a.length;l++){var u=a[l];if(u[e]&&null!=(r=u[e](o,s,i)))return r}0}},Iv=function(t,e){var n=t._chartsMap,i=t._scheduler;e.eachSeries((function(t){i.updateStreamModes(t,n[t.__viewId])}))},Tv=function(t,e){var n=this,i=this.getModel(),r=t.type,o=t.escapeConnect,a=Yv[r],s=a.actionInfo,l=(s.update||"update").split(":"),u=l.pop(),h=null!=l[0]&&No(l[0]);this.__flagInMainProcess=!0;var c=[t],p=!1;t.batch&&(p=!0,c=z(t.batch,(function(e){return(e=k(A({},e),t)).batch=null,e})));var d,f=[],g=Gl(t),y=Wl(t);if(y&&Cl(this._api),E(c,(function(e){if((d=(d=a.action(e,n._model,n._api))||A({},e)).type=s.event||d.type,f.push(d),y){var i=To(t),r=i.queryOptionMap,o=i.mainTypeSpecified?r.keys()[0]:"series";wv(n,u,e,o),Ev(n)}else g?(wv(n,u,e,"series"),Ev(n)):h&&wv(n,u,e,h.main,h.sub)})),"none"!==u&&!y&&!g&&!h)try{this.__pendingUpdate?(_v(this),Sv.update.call(this,t),this.__pendingUpdate=null):Sv[u].call(this,t)}catch(t){throw this.__flagInMainProcess=!1,t}if(d=p?{type:s.event||r,escapeConnect:o,batch:f}:f[0],this.__flagInMainProcess=!1,!e){var v=this._messageCenter;if(v.trigger(d.type,d),g){var m={type:"selectchanged",escapeConnect:o,selected:Pl(i),isFromClick:t.isFromClick||!1,fromAction:t.type,fromActionPayload:t};v.trigger(m.type,m)}}},Cv=function(t){for(var e=this._pendingActions;e.length;){var n=e.shift();Tv.call(this,n,t)}},Dv=function(t){!t&&this.trigger("updated")},Av=function(t,e){t.on("rendered",(function(n){e.trigger("rendered",n),!t.animation.isFinished()||e.__pendingUpdate||e._scheduler.unfinished||e._pendingActions.length||e.trigger("finished")}))},kv=function(t,e){t.on("mouseover",(function(t){var n=xy(t.target,Fl);n&&(!function(t,e,n){var i=Hs(t),r=kl(i.componentMainType,i.componentIndex,i.componentHighDownName,n),o=r.dispatchers,a=r.focusSelf;o?(a&&Al(i.componentMainType,i.componentIndex,n),E(o,(function(t){return ml(t,e)}))):(Dl(i.seriesIndex,i.focus,i.blurScope,n),"self"===i.focus&&Al(i.componentMainType,i.componentIndex,n),ml(t,e))}(n,t,e._api),Ev(e))})).on("mouseout",(function(t){var n=xy(t.target,Fl);n&&(!function(t,e,n){Cl(n);var i=Hs(t),r=kl(i.componentMainType,i.componentIndex,i.componentHighDownName,n).dispatchers;r?E(r,(function(t){return xl(t,e)})):xl(t,e)}(n,t,e._api),Ev(e))})).on("click",(function(t){var n=xy(t.target,(function(t){return null!=Hs(t).dataIndex}),!0);if(n){var i=n.selected?"unselect":"select",r=Hs(n);e._api.dispatchAction({type:i,dataType:r.dataType,dataIndexInside:r.dataIndex,seriesIndex:r.seriesIndex,isFromClick:!0})}}))},Lv=function(t,e,n,i,r){!function(t){var e=[],n=[],i=!1;if(t.eachComponent((function(t,r){var o=r.get("zlevel")||0,a=r.get("z")||0,s=r.getZLevelKey();i=i||!!s,("series"===t?n:e).push({zlevel:o,z:a,idx:r.componentIndex,type:t,key:s})})),i){var r,o,a=e.concat(n);Ie(a,(function(t,e){return t.zlevel===e.zlevel?t.z-e.z:t.zlevel-e.zlevel})),E(a,(function(e){var n=t.getComponent(e.type,e.idx),i=e.zlevel,a=e.key;null!=r&&(i=Math.max(r,i)),a?(i===r&&a!==o&&i++,o=a):o&&(i===r&&i++,o=""),r=i,n.setZLevel(i)}))}}(e),Pv(t,e,n,i,r),E(t._chartsViews,(function(t){t.__alive=!1})),Ov(t,e,n,i,r),E(t._chartsViews,(function(t){t.__alive||t.remove(e,n)}))},Pv=function(t,e,n,r,o,l){E(l||t._componentsViews,(function(t){var o=t.__model;a(o,t),t.render(o,e,n,r),i(o,t),s(o,t)}))},Ov=function(t,e,n,o,l,u){var h=t._scheduler;l=A(l||{},{updatedSeries:e.getSeries()}),lv.trigger("series:beforeupdate",e,n,l);var c=!1;e.eachSeries((function(e){var n=t._chartsMap[e.__viewId];n.__alive=!0;var i=n.renderTask;h.updatePayload(i,o),a(e,n),u&&u.get(e.uid)&&i.dirty(),i.perform(h.getPerformArgs(i))&&(c=!0),n.group.silent=!!e.get("silent"),function(t,e){var n=t.get("blendMode")||null;e.eachRendered((function(t){t.isGroup||(t.style.blend=n)}))}(e,n),Ll(e)})),h.unfinished=c||h.unfinished,lv.trigger("series:layoutlabels",e,n,l),lv.trigger("series:transition",e,n,l),e.eachSeries((function(e){var n=t._chartsMap[e.__viewId];i(e,n),s(e,n)})),function(t,e){var n=t._zr.storage,i=0;n.traverse((function(t){t.isGroup||i++})),i>e.get("hoverLayerThreshold")&&!r.node&&!r.worker&&e.eachSeries((function(e){if(!e.preventUsingHoverLayer){var n=t._chartsMap[e.__viewId];n.__alive&&n.eachRendered((function(t){t.states.emphasis&&(t.states.emphasis.hoverLayer=!0)}))}}))}(t,e),lv.trigger("series:afterupdate",e,n,l)},Ev=function(t){t.__needsUpdateStatus=!0,t.getZr().wakeUp()},zv=function(t){t.__needsUpdateStatus&&(t.getZr().storage.traverse((function(t){ah(t)||e(t)})),t.__needsUpdateStatus=!1)},Rv=function(t){return new(function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return n(i,e),i.prototype.getCoordinateSystems=function(){return t._coordSysMgr.getCoordinateSystems()},i.prototype.getComponentByElement=function(e){for(;e;){var n=e.__ecComponentInfo;if(null!=n)return t._model.getComponent(n.mainType,n.index);e=e.parent}},i.prototype.enterEmphasis=function(e,n){_l(e,n),Ev(t)},i.prototype.leaveEmphasis=function(e,n){bl(e,n),Ev(t)},i.prototype.enterBlur=function(e){wl(e),Ev(t)},i.prototype.leaveBlur=function(e){Sl(e),Ev(t)},i.prototype.enterSelect=function(e){Ml(e),Ev(t)},i.prototype.leaveSelect=function(e){Il(e),Ev(t)},i.prototype.getModel=function(){return t.getModel()},i.prototype.getViewOfComponentModel=function(e){return t.getViewOfComponentModel(e)},i.prototype.getViewOfSeriesModel=function(e){return t.getViewOfSeriesModel(e)},i}(ld))(t)},Nv=function(t){function e(t,e){for(var n=0;n<t.length;n++){t[n][yv]=e}}E(Uv,(function(n,i){t._messageCenter.on(i,(function(n){if(Jv[t.group]&&0!==t[yv]){if(n&&n.escapeConnect)return;var i=t.makeActionFromEvent(n),r=[];E($v,(function(e){e!==t&&e.group===t.group&&r.push(e)})),e(r,0),E(r,(function(t){1!==t[yv]&&t.dispatchAction(i)})),e(r,2)}}))}))}}(),e}(Xt),Gv=Fv.prototype;Gv.on=vv("on"),Gv.off=vv("off"),Gv.one=function(t,e,n){var i=this;oo(),this.on.call(this,t,(function n(){for(var r=[],o=0;o<arguments.length;o++)r[o]=arguments[o];e&&e.apply&&e.apply(this,r),i.off(t,n)}),n)};var Wv=["click","dblclick","mouseover","mouseout","mousemove","mousedown","mouseup","globalout","contextmenu"];function Hv(t){0}var Yv={},Uv={},Xv=[],Zv=[],jv=[],qv={},Kv={},$v={},Jv={},Qv=+new Date-0,tm=+new Date-0,em="_echarts_instance_";function nm(t){Jv[t]=!1}var im=nm;function rm(t){return $v[function(t,e){return t.getAttribute?t.getAttribute(e):t[e]}(t,em)]}function om(t,e){qv[t]=e}function am(t){P(Zv,t)<0&&Zv.push(t)}function sm(t,e){ym(Xv,t,e,2e3)}function lm(t){hm("afterinit",t)}function um(t){hm("afterupdate",t)}function hm(t,e){lv.on(t,e)}function cm(t,e,n){U(e)&&(n=e,e="");var i=q(t)?t.type:[t,t={event:e}][0];t.event=(t.event||i).toLowerCase(),e=t.event,Uv[e]||(lt(gv.test(i)&&gv.test(e)),Yv[i]||(Yv[i]={action:n,actionInfo:t}),Uv[e]=i)}function pm(t,e){hd.register(t,e)}function dm(t,e){ym(jv,t,e,1e3,"layout")}function fm(t,e){ym(jv,t,e,3e3,"visual")}var gm=[];function ym(t,e,n,i,r){if((U(e)||q(e))&&(n=e,e=i),!(P(gm,n)>=0)){gm.push(n);var o=Gg.wrapStageHandler(n,r);o.__prio=e,o.__raw=n,t.push(o)}}function vm(t,e){Kv[t]=e}function mm(t,e,n){var i=hv("registerMap");i&&i(t,e,n)}var xm=function(t){var e=(t=T(t)).type,n="";e||ao(n);var i=e.split(":");2!==i.length&&ao(n);var r=!1;"echarts"===i[0]&&(e=i[1],r=!0),t.__isBuiltIn=r,Tf.set(e,t)};fm(pv,Eg),fm(dv,Vg),fm(dv,Bg),fm(pv,py),fm(dv,dy),fm(7e3,(function(t,e){t.eachRawSeries((function(n){if(!t.isSeriesFiltered(n)){var i=n.getData();i.hasItemVisual()&&i.each((function(t){var n=i.getItemVisual(t,"decal");n&&(i.ensureUniqueItemVisual(t,"style").decal=rv(n,e))}));var r=i.getVisual("decal");if(r)i.getVisual("style").decal=rv(r,e)}}))})),am(Od),sm(900,(function(t){var e=ft();t.eachSeries((function(t){var n=t.get("stack");if(n){var i=e.get(n)||e.set(n,[]),r=t.getData(),o={stackResultDimension:r.getCalculationInfo("stackResultDimension"),stackedOverDimension:r.getCalculationInfo("stackedOverDimension"),stackedDimension:r.getCalculationInfo("stackedDimension"),stackedByDimension:r.getCalculationInfo("stackedByDimension"),isStackedByIndex:r.getCalculationInfo("isStackedByIndex"),data:r,seriesModel:t};if(!o.stackedDimension||!o.isStackedByIndex&&!o.stackedByDimension)return;i.length&&r.setCalculationInfo("stackedOnSeries",i[i.length-1].seriesModel),i.push(o)}})),e.each(Rd)})),vm("default",(function(t,e){k(e=e||{},{text:"loading",textColor:"#000",fontSize:12,fontWeight:"normal",fontStyle:"normal",fontFamily:"sans-serif",maskColor:"rgba(255, 255, 255, 0.8)",showSpinner:!0,color:"#5470c6",spinnerRadius:10,lineWidth:5,zlevel:0});var n=new Cr,i=new Cs({style:{fill:e.maskColor},zlevel:e.zlevel,z:1e4});n.add(i);var r,o=new ks({style:{text:e.text,fill:e.textColor,fontSize:e.fontSize,fontWeight:e.fontWeight,fontStyle:e.fontStyle,fontFamily:e.fontFamily},zlevel:e.zlevel,z:10001}),a=new Cs({style:{fill:"none"},textContent:o,textConfig:{position:"right",distance:10},zlevel:e.zlevel,z:10001});return n.add(a),e.showSpinner&&((r=new Hu({shape:{startAngle:-Fg/2,endAngle:-Fg/2+.1,r:e.spinnerRadius},style:{stroke:e.color,lineCap:"round",lineWidth:e.lineWidth},zlevel:e.zlevel,z:10001})).animateShape(!0).when(1e3,{endAngle:3*Fg/2}).start("circularInOut"),r.animateShape(!0).when(1e3,{startAngle:3*Fg/2}).delay(300).start("circularInOut"),n.add(r)),n.resize=function(){var n=o.getBoundingRect().width,s=e.showSpinner?e.spinnerRadius:0,l=(t.getWidth()-2*s-(e.showSpinner&&n?10:0)-n)/2-(e.showSpinner&&n?0:5+n/2)+(e.showSpinner?0:n/2)+(n?0:s),u=t.getHeight()/2;e.showSpinner&&r.setShape({cx:l,cy:u}),a.setShape({x:l-s,y:u-s,width:2*s,height:2*s}),i.setShape({x:0,y:0,width:t.getWidth(),height:t.getHeight()})},n.resize(),n})),cm({type:Js,event:Js,update:Js},xt),cm({type:Qs,event:Qs,update:Qs},xt),cm({type:tl,event:tl,update:tl},xt),cm({type:el,event:el,update:el},xt),cm({type:nl,event:nl,update:nl},xt),om("light",iy),om("dark",ly);var _m=[],bm={registerPreprocessor:am,registerProcessor:sm,registerPostInit:lm,registerPostUpdate:um,registerUpdateLifecycle:hm,registerAction:cm,registerCoordinateSystem:pm,registerLayout:dm,registerVisual:fm,registerTransform:xm,registerLoading:vm,registerMap:mm,registerImpl:function(t,e){uv[t]=e},PRIORITY:fv,ComponentModel:Tp,ComponentView:gg,SeriesModel:sg,ChartView:xg,registerComponentModel:function(t){Tp.registerClass(t)},registerComponentView:function(t){gg.registerClass(t)},registerSeriesModel:function(t){sg.registerClass(t)},registerChartView:function(t){xg.registerClass(t)},registerSubTypeDefaulter:function(t,e){Tp.registerSubTypeDefaulter(t,e)},registerPainter:function(t,e){Pr(t,e)}};function wm(t){Y(t)?E(t,(function(t){wm(t)})):P(_m,t)>=0||(_m.push(t),U(t)&&(t={install:t}),t.install(bm))}function Sm(t){return null==t?0:t.length||1}function Mm(t){return t}var Im=function(){function t(t,e,n,i,r,o){this._old=t,this._new=e,this._oldKeyGetter=n||Mm,this._newKeyGetter=i||Mm,this.context=r,this._diffModeMultiple="multiple"===o}return t.prototype.add=function(t){return this._add=t,this},t.prototype.update=function(t){return this._update=t,this},t.prototype.updateManyToOne=function(t){return this._updateManyToOne=t,this},t.prototype.updateOneToMany=function(t){return this._updateOneToMany=t,this},t.prototype.updateManyToMany=function(t){return this._updateManyToMany=t,this},t.prototype.remove=function(t){return this._remove=t,this},t.prototype.execute=function(){this[this._diffModeMultiple?"_executeMultiple":"_executeOneToOne"]()},t.prototype._executeOneToOne=function(){var t=this._old,e=this._new,n={},i=new Array(t.length),r=new Array(e.length);this._initIndexMap(t,null,i,"_oldKeyGetter"),this._initIndexMap(e,n,r,"_newKeyGetter");for(var o=0;o<t.length;o++){var a=i[o],s=n[a],l=Sm(s);if(l>1){var u=s.shift();1===s.length&&(n[a]=s[0]),this._update&&this._update(u,o)}else 1===l?(n[a]=null,this._update&&this._update(s,o)):this._remove&&this._remove(o)}this._performRestAdd(r,n)},t.prototype._executeMultiple=function(){var t=this._old,e=this._new,n={},i={},r=[],o=[];this._initIndexMap(t,n,r,"_oldKeyGetter"),this._initIndexMap(e,i,o,"_newKeyGetter");for(var a=0;a<r.length;a++){var s=r[a],l=n[s],u=i[s],h=Sm(l),c=Sm(u);if(h>1&&1===c)this._updateManyToOne&&this._updateManyToOne(u,l),i[s]=null;else if(1===h&&c>1)this._updateOneToMany&&this._updateOneToMany(u,l),i[s]=null;else if(1===h&&1===c)this._update&&this._update(u,l),i[s]=null;else if(h>1&&c>1)this._updateManyToMany&&this._updateManyToMany(u,l),i[s]=null;else if(h>1)for(var p=0;p<h;p++)this._remove&&this._remove(l[p]);else this._remove&&this._remove(l)}this._performRestAdd(o,i)},t.prototype._performRestAdd=function(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=e[i],o=Sm(r);if(o>1)for(var a=0;a<o;a++)this._add&&this._add(r[a]);else 1===o&&this._add&&this._add(r);e[i]=null}},t.prototype._initIndexMap=function(t,e,n,i){for(var r=this._diffModeMultiple,o=0;o<t.length;o++){var a="_ec_"+this[i](t[o],o);if(r||(n[o]=a),e){var s=e[a],l=Sm(s);0===l?(e[a]=o,r&&n.push(a)):1===l?e[a]=[s,o]:s.push(o)}}},t}(),Tm=function(){function t(t,e){this._encode=t,this._schema=e}return t.prototype.get=function(){return{fullDimensions:this._getFullDimensionNames(),encode:this._encode}},t.prototype._getFullDimensionNames=function(){return this._cachedDimNames||(this._cachedDimNames=this._schema?this._schema.makeOutputDimensionNames():[]),this._cachedDimNames},t}();function Cm(t,e){return t.hasOwnProperty(e)||(t[e]=[]),t[e]}function Dm(t){return"category"===t?"ordinal":"time"===t?"time":"float"}var Am=function(t){this.otherDims={},null!=t&&A(this,t)},km=So(),Lm={float:"f",int:"i",ordinal:"o",number:"n",time:"t"},Pm=function(){function t(t){this.dimensions=t.dimensions,this._dimOmitted=t.dimensionOmitted,this.source=t.source,this._fullDimCount=t.fullDimensionCount,this._updateDimOmitted(t.dimensionOmitted)}return t.prototype.isDimensionOmitted=function(){return this._dimOmitted},t.prototype._updateDimOmitted=function(t){this._dimOmitted=t,t&&(this._dimNameMap||(this._dimNameMap=Nm(this.source)))},t.prototype.getSourceDimensionIndex=function(t){return rt(this._dimNameMap.get(t),-1)},t.prototype.getSourceDimension=function(t){var e=this.source.dimensionsDefine;if(e)return e[t]},t.prototype.makeStoreSchema=function(){for(var t=this._fullDimCount,e=Zd(this.source),n=!Em(t),i="",r=[],o=0,a=0;o<t;o++){var s=void 0,l=void 0,u=void 0,h=this.dimensions[a];if(h&&h.storeDimIndex===o)s=e?h.name:null,l=h.type,u=h.ordinalMeta,a++;else{var c=this.getSourceDimension(o);c&&(s=e?c.name:null,l=c.type)}r.push({property:s,type:l,ordinalMeta:u}),!e||null==s||h&&h.isCalculationCoord||(i+=n?s.replace(/\`/g,"`1").replace(/\$/g,"`2"):s),i+="$",i+=Lm[l]||"f",u&&(i+=u.uid),i+="$"}var p=this.source;return{dimensions:r,hash:[p.seriesLayoutBy,p.startIndex,i].join("$$")}},t.prototype.makeOutputDimensionNames=function(){for(var t=[],e=0,n=0;e<this._fullDimCount;e++){var i=void 0,r=this.dimensions[n];if(r&&r.storeDimIndex===e)r.isCalculationCoord||(i=r.name),n++;else{var o=this.getSourceDimension(e);o&&(i=o.name)}t.push(i)}return t},t.prototype.appendCalculationDimension=function(t){this.dimensions.push(t),t.isCalculationCoord=!0,this._fullDimCount++,this._updateDimOmitted(!0)},t}();function Om(t){return t instanceof Pm}function Rm(t){for(var e=ft(),n=0;n<(t||[]).length;n++){var i=t[n],r=q(i)?i.name:i;null!=r&&null==e.get(r)&&e.set(r,n)}return e}function Nm(t){var e=km(t);return e.dimNameMap||(e.dimNameMap=Rm(t.dimensionsDefine))}function Em(t){return t>30}var zm,Vm,Bm,Fm,Gm,Wm,Hm,Ym=q,Um=z,Xm="undefined"==typeof Int32Array?Array:Int32Array,Zm=["hasItemOption","_nameList","_idList","_invertedIndicesMap","_dimSummary","userOutput","_rawData","_dimValueGetter","_nameDimIdx","_idDimIdx","_nameRepeatCount"],jm=["_approximateExtent"],qm=function(){function t(t,e){var n;this.type="list",this._dimOmitted=!1,this._nameList=[],this._idList=[],this._visual={},this._layout={},this._itemVisuals=[],this._itemLayouts=[],this._graphicEls=[],this._approximateExtent={},this._calculationInfo={},this.hasItemOption=!1,this.TRANSFERABLE_METHODS=["cloneShallow","downSample","lttbDownSample","map"],this.CHANGABLE_METHODS=["filterSelf","selectRange"],this.DOWNSAMPLE_METHODS=["downSample","lttbDownSample"];var i=!1;Om(t)?(n=t.dimensions,this._dimOmitted=t.isDimensionOmitted(),this._schema=t):(i=!0,n=t),n=n||["x","y"];for(var r={},o=[],a={},s=!1,l={},u=0;u<n.length;u++){var h=n[u],c=X(h)?new Am({name:h}):h instanceof Am?h:new Am(h),p=c.name;c.type=c.type||"float",c.coordDim||(c.coordDim=p,c.coordDimIndex=0);var d=c.otherDims=c.otherDims||{};o.push(p),r[p]=c,null!=l[p]&&(s=!0),c.createInvertedIndices&&(a[p]=[]),0===d.itemName&&(this._nameDimIdx=u),0===d.itemId&&(this._idDimIdx=u),i&&(c.storeDimIndex=u)}if(this.dimensions=o,this._dimInfos=r,this._initGetDimensionInfo(s),this.hostModel=e,this._invertedIndicesMap=a,this._dimOmitted){var f=this._dimIdxToName=ft();E(o,(function(t){f.set(r[t].storeDimIndex,t)}))}}return t.prototype.getDimension=function(t){var e=this._recognizeDimIndex(t);if(null==e)return t;if(e=t,!this._dimOmitted)return this.dimensions[e];var n=this._dimIdxToName.get(e);if(null!=n)return n;var i=this._schema.getSourceDimension(e);return i?i.name:void 0},t.prototype.getDimensionIndex=function(t){var e=this._recognizeDimIndex(t);if(null!=e)return e;if(null==t)return-1;var n=this._getDimInfo(t);return n?n.storeDimIndex:this._dimOmitted?this._schema.getSourceDimensionIndex(t):-1},t.prototype._recognizeDimIndex=function(t){if(j(t)||null!=t&&!isNaN(t)&&!this._getDimInfo(t)&&(!this._dimOmitted||this._schema.getSourceDimensionIndex(t)<0))return+t},t.prototype._getStoreDimIndex=function(t){var e=this.getDimensionIndex(t);return e},t.prototype.getDimensionInfo=function(t){return this._getDimInfo(this.getDimension(t))},t.prototype._initGetDimensionInfo=function(t){var e=this._dimInfos;this._getDimInfo=t?function(t){return e.hasOwnProperty(t)?e[t]:void 0}:function(t){return e[t]}},t.prototype.getDimensionsOnCoord=function(){return this._dimSummary.dataDimsOnCoord.slice()},t.prototype.mapDimension=function(t,e){var n=this._dimSummary;if(null==e)return n.encodeFirstDimNotExtra[t];var i=n.encode[t];return i?i[e]:null},t.prototype.mapDimensionsAll=function(t){return(this._dimSummary.encode[t]||[]).slice()},t.prototype.getStore=function(){return this._store},t.prototype.initData=function(t,e,n){var i,r=this;if(t instanceof Vf&&(i=t),!i){var o=this.dimensions,a=Gd(t)||N(t)?new jd(t,o.length):t;i=new Vf;var s=Um(o,(function(t){return{type:r._dimInfos[t].type,property:t}}));i.initData(a,s,n)}this._store=i,this._nameList=(e||[]).slice(),this._idList=[],this._nameRepeatCount={},this._doInit(0,i.count()),this._dimSummary=function(t,e){var n={},i=n.encode={},r=ft(),o=[],a=[],s={};E(t.dimensions,(function(e){var n,l=t.getDimensionInfo(e),u=l.coordDim;if(u){var h=l.coordDimIndex;Cm(i,u)[h]=e,l.isExtraCoord||(r.set(u,1),"ordinal"!==(n=l.type)&&"time"!==n&&(o[0]=e),Cm(s,u)[h]=t.getDimensionIndex(l.name)),l.defaultTooltip&&a.push(e)}kp.each((function(t,e){var n=Cm(i,e),r=l.otherDims[e];null!=r&&!1!==r&&(n[r]=l.name)}))}));var l=[],u={};r.each((function(t,e){var n=i[e];u[e]=n[0],l=l.concat(n)})),n.dataDimsOnCoord=l,n.dataDimIndicesOnCoord=z(l,(function(e){return t.getDimensionInfo(e).storeDimIndex})),n.encodeFirstDimNotExtra=u;var h=i.label;h&&h.length&&(o=h.slice());var c=i.tooltip;return c&&c.length?a=c.slice():a.length||(a=o.slice()),i.defaultedLabel=o,i.defaultedTooltip=a,n.userOutput=new Tm(s,e),n}(this,this._schema),this.userOutput=this._dimSummary.userOutput},t.prototype.appendData=function(t){var e=this._store.appendData(t);this._doInit(e[0],e[1])},t.prototype.appendValues=function(t,e){var n=this._store.appendValues(t,e.length),i=n.start,r=n.end,o=this._shouldMakeIdFromName();if(this._updateOrdinalMeta(),e)for(var a=i;a<r;a++){var s=a-i;this._nameList[a]=e[s],o&&Hm(this,a)}},t.prototype._updateOrdinalMeta=function(){for(var t=this._store,e=this.dimensions,n=0;n<e.length;n++){var i=this._dimInfos[e[n]];i.ordinalMeta&&t.collectOrdinalMeta(i.storeDimIndex,i.ordinalMeta)}},t.prototype._shouldMakeIdFromName=function(){var t=this._store.getProvider();return null==this._idDimIdx&&t.getSource().sourceFormat!==Np&&!t.fillStorage},t.prototype._doInit=function(t,e){if(!(t>=e)){var n=this._store.getProvider();this._updateOrdinalMeta();var i=this._nameList,r=this._idList;if(n.getSource().sourceFormat===Lp&&!n.pure)for(var o=[],a=t;a<e;a++){var s=n.getItem(a,o);if(!this.hasItemOption&&go(s)&&(this.hasItemOption=!0),s){var l=s.name;null==i[a]&&null!=l&&(i[a]=xo(l,null));var u=s.id;null==r[a]&&null!=u&&(r[a]=xo(u,null))}}if(this._shouldMakeIdFromName())for(a=t;a<e;a++)Hm(this,a);zm(this)}},t.prototype.getApproximateExtent=function(t){return this._approximateExtent[t]||this._store.getDataExtent(this._getStoreDimIndex(t))},t.prototype.setApproximateExtent=function(t,e){e=this.getDimension(e),this._approximateExtent[e]=t.slice()},t.prototype.getCalculationInfo=function(t){return this._calculationInfo[t]},t.prototype.setCalculationInfo=function(t,e){Ym(t)?A(this._calculationInfo,t):this._calculationInfo[t]=e},t.prototype.getName=function(t){var e=this.getRawIndex(t),n=this._nameList[e];return null==n&&null!=this._nameDimIdx&&(n=Bm(this,this._nameDimIdx,e)),null==n&&(n=""),n},t.prototype._getCategory=function(t,e){var n=this._store.get(t,e),i=this._store.getOrdinalMeta(t);return i?i.categories[n]:n},t.prototype.getId=function(t){return Vm(this,this.getRawIndex(t))},t.prototype.count=function(){return this._store.count()},t.prototype.get=function(t,e){var n=this._store,i=this._dimInfos[t];if(i)return n.get(i.storeDimIndex,e)},t.prototype.getByRawIndex=function(t,e){var n=this._store,i=this._dimInfos[t];if(i)return n.getByRawIndex(i.storeDimIndex,e)},t.prototype.getIndices=function(){return this._store.getIndices()},t.prototype.getDataExtent=function(t){return this._store.getDataExtent(this._getStoreDimIndex(t))},t.prototype.getSum=function(t){return this._store.getSum(this._getStoreDimIndex(t))},t.prototype.getMedian=function(t){return this._store.getMedian(this._getStoreDimIndex(t))},t.prototype.getValues=function(t,e){var n=this,i=this._store;return Y(t)?i.getValues(Um(t,(function(t){return n._getStoreDimIndex(t)})),e):i.getValues(t)},t.prototype.hasValue=function(t){for(var e=this._dimSummary.dataDimIndicesOnCoord,n=0,i=e.length;n<i;n++)if(isNaN(this._store.get(e[n],t)))return!1;return!0},t.prototype.indexOfName=function(t){for(var e=0,n=this._store.count();e<n;e++)if(this.getName(e)===t)return e;return-1},t.prototype.getRawIndex=function(t){return this._store.getRawIndex(t)},t.prototype.indexOfRawIndex=function(t){return this._store.indexOfRawIndex(t)},t.prototype.rawIndexOf=function(t,e){var n=t&&this._invertedIndicesMap[t];var i=n[e];return null==i||isNaN(i)?-1:i},t.prototype.indicesOfNearest=function(t,e,n){return this._store.indicesOfNearest(this._getStoreDimIndex(t),e,n)},t.prototype.each=function(t,e,n){U(t)&&(n=e,e=t,t=[]);var i=n||this,r=Um(Fm(t),this._getStoreDimIndex,this);this._store.each(r,i?W(e,i):e)},t.prototype.filterSelf=function(t,e,n){U(t)&&(n=e,e=t,t=[]);var i=n||this,r=Um(Fm(t),this._getStoreDimIndex,this);return this._store=this._store.filter(r,i?W(e,i):e),this},t.prototype.selectRange=function(t){var e=this,n={};return E(G(t),(function(i){var r=e._getStoreDimIndex(i);n[r]=t[i]})),this._store=this._store.selectRange(n),this},t.prototype.mapArray=function(t,e,n){U(t)&&(n=e,e=t,t=[]),n=n||this;var i=[];return this.each(t,(function(){i.push(e&&e.apply(this,arguments))}),n),i},t.prototype.map=function(t,e,n,i){var r=n||i||this,o=Um(Fm(t),this._getStoreDimIndex,this),a=Wm(this);return a._store=this._store.map(o,r?W(e,r):e),a},t.prototype.modify=function(t,e,n,i){var r=n||i||this;var o=Um(Fm(t),this._getStoreDimIndex,this);this._store.modify(o,r?W(e,r):e)},t.prototype.downSample=function(t,e,n,i){var r=Wm(this);return r._store=this._store.downSample(this._getStoreDimIndex(t),e,n,i),r},t.prototype.lttbDownSample=function(t,e){var n=Wm(this);return n._store=this._store.lttbDownSample(this._getStoreDimIndex(t),e),n},t.prototype.getRawDataItem=function(t){return this._store.getRawDataItem(t)},t.prototype.getItemModel=function(t){var e=this.hostModel,n=this.getRawDataItem(t);return new dc(n,e,e&&e.ecModel)},t.prototype.diff=function(t){var e=this;return new Im(t?t.getStore().getIndices():[],this.getStore().getIndices(),(function(e){return Vm(t,e)}),(function(t){return Vm(e,t)}))},t.prototype.getVisual=function(t){var e=this._visual;return e&&e[t]},t.prototype.setVisual=function(t,e){this._visual=this._visual||{},Ym(t)?A(this._visual,t):this._visual[t]=e},t.prototype.getItemVisual=function(t,e){var n=this._itemVisuals[t],i=n&&n[e];return null==i?this.getVisual(e):i},t.prototype.hasItemVisual=function(){return this._itemVisuals.length>0},t.prototype.ensureUniqueItemVisual=function(t,e){var n=this._itemVisuals,i=n[t];i||(i=n[t]={});var r=i[e];return null==r&&(Y(r=this.getVisual(e))?r=r.slice():Ym(r)&&(r=A({},r)),i[e]=r),r},t.prototype.setItemVisual=function(t,e,n){var i=this._itemVisuals[t]||{};this._itemVisuals[t]=i,Ym(e)?A(i,e):i[e]=n},t.prototype.clearAllVisual=function(){this._visual={},this._itemVisuals=[]},t.prototype.setLayout=function(t,e){Ym(t)?A(this._layout,t):this._layout[t]=e},t.prototype.getLayout=function(t){return this._layout[t]},t.prototype.getItemLayout=function(t){return this._itemLayouts[t]},t.prototype.setItemLayout=function(t,e,n){this._itemLayouts[t]=n?A(this._itemLayouts[t]||{},e):e},t.prototype.clearItemLayouts=function(){this._itemLayouts.length=0},t.prototype.setItemGraphicEl=function(t,e){var n=this.hostModel&&this.hostModel.seriesIndex;Ys(n,this.dataType,t,e),this._graphicEls[t]=e},t.prototype.getItemGraphicEl=function(t){return this._graphicEls[t]},t.prototype.eachItemGraphicEl=function(t,e){E(this._graphicEls,(function(n,i){n&&t&&t.call(e,n,i)}))},t.prototype.cloneShallow=function(e){return e||(e=new t(this._schema?this._schema:Um(this.dimensions,this._getDimInfo,this),this.hostModel)),Gm(e,this),e._store=this._store,e},t.prototype.wrapMethod=function(t,e){var n=this[t];U(n)&&(this.__wrappedMethods=this.__wrappedMethods||[],this.__wrappedMethods.push(t),this[t]=function(){var t=n.apply(this,arguments);return e.apply(this,[t].concat(at(arguments)))})},t.internalField=(zm=function(t){var e=t._invertedIndicesMap;E(e,(function(n,i){var r=t._dimInfos[i],o=r.ordinalMeta,a=t._store;if(o){n=e[i]=new Xm(o.categories.length);for(var s=0;s<n.length;s++)n[s]=-1;for(s=0;s<a.count();s++)n[a.get(r.storeDimIndex,s)]=s}}))},Bm=function(t,e,n){return xo(t._getCategory(e,n),null)},Vm=function(t,e){var n=t._idList[e];return null==n&&null!=t._idDimIdx&&(n=Bm(t,t._idDimIdx,e)),null==n&&(n="e\0\0"+e),n},Fm=function(t){return Y(t)||(t=null!=t?[t]:[]),t},Wm=function(e){var n=new t(e._schema?e._schema:Um(e.dimensions,e._getDimInfo,e),e.hostModel);return Gm(n,e),n},Gm=function(t,e){E(Zm.concat(e.__wrappedMethods||[]),(function(n){e.hasOwnProperty(n)&&(t[n]=e[n])})),t.__wrappedMethods=e.__wrappedMethods,E(jm,(function(n){t[n]=T(e[n])})),t._calculationInfo=A({},e._calculationInfo)},void(Hm=function(t,e){var n=t._nameList,i=t._idList,r=t._nameDimIdx,o=t._idDimIdx,a=n[e],s=i[e];if(null==a&&null!=r&&(n[e]=a=Bm(t,r,e)),null==s&&null!=o&&(i[e]=s=Bm(t,o,e)),null==s&&null!=a){var l=t._nameRepeatCount,u=l[a]=(l[a]||0)+1;s=a,u>1&&(s+="__ec__"+u),i[e]=s}})),t}();function Km(t,e){Gd(t)||(t=Hd(t));var n=(e=e||{}).coordDimensions||[],i=e.dimensionsDefine||t.dimensionsDefine||[],r=ft(),o=[],a=function(t,e,n,i){var r=Math.max(t.dimensionsDetectedCount||1,e.length,n.length,i||0);return E(e,(function(t){var e;q(t)&&(e=t.dimsDef)&&(r=Math.max(r,e.length))})),r}(t,n,i,e.dimensionsCount),s=e.canOmitUnusedDimensions&&Em(a),l=i===t.dimensionsDefine,u=l?Nm(t):Rm(i),h=e.encodeDefine;!h&&e.encodeDefaulter&&(h=e.encodeDefaulter(t,a));for(var c=ft(h),p=new Of(a),d=0;d<p.length;d++)p[d]=-1;function f(t){var e=p[t];if(e<0){var n=i[t],r=q(n)?n:{name:n},a=new Am,s=r.name;null!=s&&null!=u.get(s)&&(a.name=a.displayName=s),null!=r.type&&(a.type=r.type),null!=r.displayName&&(a.displayName=r.displayName);var l=o.length;return p[t]=l,a.storeDimIndex=t,o.push(a),a}return o[e]}if(!s)for(d=0;d<a;d++)f(d);c.each((function(t,e){var n=ho(t).slice();if(1===n.length&&!X(n[0])&&n[0]<0)c.set(e,!1);else{var i=c.set(e,[]);E(n,(function(t,n){var r=X(t)?u.get(t):t;null!=r&&r<a&&(i[n]=r,y(f(r),e,n))}))}}));var g=0;function y(t,e,n){null!=kp.get(e)?t.otherDims[e]=n:(t.coordDim=e,t.coordDimIndex=n,r.set(e,!0))}E(n,(function(t){var e,n,i,r;if(X(t))e=t,r={};else{e=(r=t).name;var o=r.ordinalMeta;r.ordinalMeta=null,(r=A({},r)).ordinalMeta=o,n=r.dimsDef,i=r.otherDims,r.name=r.coordDim=r.coordDimIndex=r.dimsDef=r.otherDims=null}var s=c.get(e);if(!1!==s){if(!(s=ho(s)).length)for(var u=0;u<(n&&n.length||1);u++){for(;g<a&&null!=f(g).coordDim;)g++;g<a&&s.push(g++)}E(s,(function(t,o){var a=f(t);if(l&&null!=r.type&&(a.type=r.type),y(k(a,r),e,o),null==a.name&&n){var s=n[o];!q(s)&&(s={name:s}),a.name=a.displayName=s.name,a.defaultTooltip=s.defaultTooltip}i&&k(a.otherDims,i)}))}}));var v=e.generateCoord,m=e.generateCoordCount,x=null!=m;m=v?m||1:0;var _=v||"value";function b(t){null==t.name&&(t.name=t.coordDim)}if(s)E(o,(function(t){b(t)})),o.sort((function(t,e){return t.storeDimIndex-e.storeDimIndex}));else for(var w=0;w<a;w++){var S=f(w);null==S.coordDim&&(S.coordDim=$m(_,r,x),S.coordDimIndex=0,(!v||m<=0)&&(S.isExtraCoord=!0),m--),b(S),null!=S.type||Xp(t,w)!==Bp&&(!S.isExtraCoord||null==S.otherDims.itemName&&null==S.otherDims.seriesName)||(S.type="ordinal")}return function(t){for(var e=ft(),n=0;n<t.length;n++){var i=t[n],r=i.name,o=e.get(r)||0;o>0&&(i.name=r+(o-1)),o++,e.set(r,o)}}(o),new Pm({source:t,dimensions:o,fullDimensionCount:a,dimensionOmitted:s})}function $m(t,e,n){var i=e.data;if(n||i.hasOwnProperty(t)){for(var r=0;i.hasOwnProperty(t+r);)r++;t+=r}return e.set(t,!0),t}var Jm=function(t){this.coordSysDims=[],this.axisMap=ft(),this.categoryAxisMap=ft(),this.coordSysName=t};var Qm={cartesian2d:function(t,e,n,i){var r=t.getReferringComponents("xAxis",Co).models[0],o=t.getReferringComponents("yAxis",Co).models[0];e.coordSysDims=["x","y"],n.set("x",r),n.set("y",o),tx(r)&&(i.set("x",r),e.firstCategoryDimIndex=0),tx(o)&&(i.set("y",o),null==e.firstCategoryDimIndex&&(e.firstCategoryDimIndex=1))},singleAxis:function(t,e,n,i){var r=t.getReferringComponents("singleAxis",Co).models[0];e.coordSysDims=["single"],n.set("single",r),tx(r)&&(i.set("single",r),e.firstCategoryDimIndex=0)},polar:function(t,e,n,i){var r=t.getReferringComponents("polar",Co).models[0],o=r.findAxisModel("radiusAxis"),a=r.findAxisModel("angleAxis");e.coordSysDims=["radius","angle"],n.set("radius",o),n.set("angle",a),tx(o)&&(i.set("radius",o),e.firstCategoryDimIndex=0),tx(a)&&(i.set("angle",a),null==e.firstCategoryDimIndex&&(e.firstCategoryDimIndex=1))},geo:function(t,e,n,i){e.coordSysDims=["lng","lat"]},parallel:function(t,e,n,i){var r=t.ecModel,o=r.getComponent("parallel",t.get("parallelIndex")),a=e.coordSysDims=o.dimensions.slice();E(o.parallelAxisIndex,(function(t,o){var s=r.getComponent("parallelAxis",t),l=a[o];n.set(l,s),tx(s)&&(i.set(l,s),null==e.firstCategoryDimIndex&&(e.firstCategoryDimIndex=o))}))}};function tx(t){return"category"===t.get("type")}function ex(t,e,n){var i,r,o,a=(n=n||{}).byIndex,s=n.stackedCoordDimension;!function(t){return!Om(t.schema)}(e)?(r=e.schema,i=r.dimensions,o=e.store):i=e;var l,u,h,c,p=!(!t||!t.get("stack"));if(E(i,(function(t,e){X(t)&&(i[e]=t={name:t}),p&&!t.isExtraCoord&&(a||l||!t.ordinalMeta||(l=t),u||"ordinal"===t.type||"time"===t.type||s&&s!==t.coordDim||(u=t))})),!u||a||l||(a=!0),u){h="__\0ecstackresult_"+t.id,c="__\0ecstackedover_"+t.id,l&&(l.createInvertedIndices=!0);var d=u.coordDim,f=u.type,g=0;E(i,(function(t){t.coordDim===d&&g++}));var y={name:h,coordDim:d,coordDimIndex:g,type:f,isExtraCoord:!0,isCalculationCoord:!0,storeDimIndex:i.length},v={name:c,coordDim:c,coordDimIndex:g+1,type:f,isExtraCoord:!0,isCalculationCoord:!0,storeDimIndex:i.length+1};r?(o&&(y.storeDimIndex=o.ensureCalculationDimension(c,f),v.storeDimIndex=o.ensureCalculationDimension(h,f)),r.appendCalculationDimension(y),r.appendCalculationDimension(v)):(i.push(y),i.push(v))}return{stackedDimension:u&&u.name,stackedByDimension:l&&l.name,isStackedByIndex:a,stackedOverDimension:c,stackResultDimension:h}}function nx(t,e){return!!e&&e===t.getCalculationInfo("stackedDimension")}function ix(t,e){return nx(t,e)?t.getCalculationInfo("stackResultDimension"):e}function rx(t,e,n){n=n||{};var i,r=e.getSourceManager(),o=!1;t?(o=!0,i=Hd(t)):o=(i=r.getSource()).sourceFormat===Lp;var a=function(t){var e=t.get("coordinateSystem"),n=new Jm(e),i=Qm[e];if(i)return i(t,n,n.axisMap,n.categoryAxisMap),n}(e),s=function(t,e){var n,i=t.get("coordinateSystem"),r=hd.get(i);return e&&e.coordSysDims&&(n=z(e.coordSysDims,(function(t){var n={name:t},i=e.axisMap.get(t);if(i){var r=i.get("type");n.type=Dm(r)}return n}))),n||(n=r&&(r.getDimensionsInfo?r.getDimensionsInfo():r.dimensions.slice())||["x","y"]),n}(e,a),l=n.useEncodeDefaulter,u=U(l)?l:l?H(Hp,s,e):null,h=Km(i,{coordDimensions:s,generateCoord:n.generateCoord,encodeDefine:e.getEncode(),encodeDefaulter:u,canOmitUnusedDimensions:!o}),c=function(t,e,n){var i,r;return n&&E(t,(function(t,o){var a=t.coordDim,s=n.categoryAxisMap.get(a);s&&(null==i&&(i=o),t.ordinalMeta=s.getOrdinalMeta(),e&&(t.createInvertedIndices=!0)),null!=t.otherDims.itemName&&(r=!0)})),r||null==i||(t[i].otherDims.itemName=0),i}(h.dimensions,n.createInvertedIndices,a),p=o?null:r.getSharedDataStore(h),d=ex(e,{schema:h,store:p}),f=new qm(h,e);f.setCalculationInfo(d);var g=null!=c&&function(t){if(t.sourceFormat===Lp){return!Y(fo(function(t){var e=0;for(;e<t.length&&null==t[e];)e++;return t[e]}(t.data||[])))}}(i)?function(t,e,n,i){return i===c?n:this.defaultDimValueGetter(t,e,n,i)}:null;return f.hasItemOption=!1,f.initData(o?i:p,null,g),f}var ox=function(){function t(t){this._setting=t||{},this._extent=[1/0,-1/0]}return t.prototype.getSetting=function(t){return this._setting[t]},t.prototype.unionExtent=function(t){var e=this._extent;t[0]<e[0]&&(e[0]=t[0]),t[1]>e[1]&&(e[1]=t[1])},t.prototype.unionExtentFromData=function(t,e){this.unionExtent(t.getApproximateExtent(e))},t.prototype.getExtent=function(){return this._extent.slice()},t.prototype.setExtent=function(t,e){var n=this._extent;isNaN(t)||(n[0]=t),isNaN(e)||(n[1]=e)},t.prototype.isInExtentRange=function(t){return this._extent[0]<=t&&this._extent[1]>=t},t.prototype.isBlank=function(){return this._isBlank},t.prototype.setBlank=function(t){this._isBlank=t},t}();Go(ox);var ax=0,sx=function(){function t(t){this.categories=t.categories||[],this._needCollect=t.needCollect,this._deduplication=t.deduplication,this.uid=++ax}return t.createByAxisModel=function(e){var n=e.option,i=n.data,r=i&&z(i,lx);return new t({categories:r,needCollect:!r,deduplication:!1!==n.dedplication})},t.prototype.getOrdinal=function(t){return this._getOrCreateMap().get(t)},t.prototype.parseAndCollect=function(t){var e,n=this._needCollect;if(!X(t)&&!n)return t;if(n&&!this._deduplication)return e=this.categories.length,this.categories[e]=t,e;var i=this._getOrCreateMap();return null==(e=i.get(t))&&(n?(e=this.categories.length,this.categories[e]=t,i.set(t,e)):e=NaN),e},t.prototype._getOrCreateMap=function(){return this._map||(this._map=ft(this.categories))},t}();function lx(t){return q(t)&&null!=t.value?t.value:t+""}function ux(t){return"interval"===t.type||"log"===t.type}function hx(t,e,n,i){var r={},o=t[1]-t[0],a=r.interval=$r(o/e,!0);null!=n&&a<n&&(a=r.interval=n),null!=i&&a>i&&(a=r.interval=i);var s=r.intervalPrecision=px(a);return function(t,e){!isFinite(t[0])&&(t[0]=e[0]),!isFinite(t[1])&&(t[1]=e[1]),dx(t,0,e),dx(t,1,e),t[0]>t[1]&&(t[0]=t[1])}(r.niceTickExtent=[zr(Math.ceil(t[0]/a)*a,s),zr(Math.floor(t[1]/a)*a,s)],t),r}function cx(t){var e=Math.pow(10,Kr(t)),n=t/e;return n?2===n?n=3:3===n?n=5:n*=2:n=1,zr(n*e)}function px(t){return Br(t)+2}function dx(t,e,n){t[e]=Math.max(Math.min(t[e],n[1]),n[0])}function fx(t,e){return t>=e[0]&&t<=e[1]}function gx(t,e){return e[1]===e[0]?.5:(t-e[0])/(e[1]-e[0])}function yx(t,e){return t*(e[1]-e[0])+e[0]}var vx=function(t){function e(e){var n=t.call(this,e)||this;n.type="ordinal";var i=n.getSetting("ordinalMeta");return i||(i=new sx({})),Y(i)&&(i=new sx({categories:z(i,(function(t){return q(t)?t.value:t}))})),n._ordinalMeta=i,n._extent=n.getSetting("extent")||[0,i.categories.length-1],n}return n(e,t),e.prototype.parse=function(t){return null==t?NaN:X(t)?this._ordinalMeta.getOrdinal(t):Math.round(t)},e.prototype.contain=function(t){return fx(t=this.parse(t),this._extent)&&null!=this._ordinalMeta.categories[t]},e.prototype.normalize=function(t){return gx(t=this._getTickNumber(this.parse(t)),this._extent)},e.prototype.scale=function(t){return t=Math.round(yx(t,this._extent)),this.getRawOrdinalNumber(t)},e.prototype.getTicks=function(){for(var t=[],e=this._extent,n=e[0];n<=e[1];)t.push({value:n}),n++;return t},e.prototype.getMinorTicks=function(t){},e.prototype.setSortInfo=function(t){if(null!=t){for(var e=t.ordinalNumbers,n=this._ordinalNumbersByTick=[],i=this._ticksByOrdinalNumber=[],r=0,o=this._ordinalMeta.categories.length,a=Math.min(o,e.length);r<a;++r){var s=e[r];n[r]=s,i[s]=r}for(var l=0;r<o;++r){for(;null!=i[l];)l++;n.push(l),i[l]=r}}else this._ordinalNumbersByTick=this._ticksByOrdinalNumber=null},e.prototype._getTickNumber=function(t){var e=this._ticksByOrdinalNumber;return e&&t>=0&&t<e.length?e[t]:t},e.prototype.getRawOrdinalNumber=function(t){var e=this._ordinalNumbersByTick;return e&&t>=0&&t<e.length?e[t]:t},e.prototype.getLabel=function(t){if(!this.isBlank()){var e=this.getRawOrdinalNumber(t.value),n=this._ordinalMeta.categories[e];return null==n?"":n+""}},e.prototype.count=function(){return this._extent[1]-this._extent[0]+1},e.prototype.unionExtentFromData=function(t,e){this.unionExtent(t.getApproximateExtent(e))},e.prototype.isInExtentRange=function(t){return t=this._getTickNumber(t),this._extent[0]<=t&&this._extent[1]>=t},e.prototype.getOrdinalMeta=function(){return this._ordinalMeta},e.prototype.calcNiceTicks=function(){},e.prototype.calcNiceExtent=function(){},e.type="ordinal",e}(ox);ox.registerClass(vx);var mx=zr,xx=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="interval",e._interval=0,e._intervalPrecision=2,e}return n(e,t),e.prototype.parse=function(t){return t},e.prototype.contain=function(t){return fx(t,this._extent)},e.prototype.normalize=function(t){return gx(t,this._extent)},e.prototype.scale=function(t){return yx(t,this._extent)},e.prototype.setExtent=function(t,e){var n=this._extent;isNaN(t)||(n[0]=parseFloat(t)),isNaN(e)||(n[1]=parseFloat(e))},e.prototype.unionExtent=function(t){var e=this._extent;t[0]<e[0]&&(e[0]=t[0]),t[1]>e[1]&&(e[1]=t[1]),this.setExtent(e[0],e[1])},e.prototype.getInterval=function(){return this._interval},e.prototype.setInterval=function(t){this._interval=t,this._niceExtent=this._extent.slice(),this._intervalPrecision=px(t)},e.prototype.getTicks=function(t){var e=this._interval,n=this._extent,i=this._niceExtent,r=this._intervalPrecision,o=[];if(!e)return o;n[0]<i[0]&&(t?o.push({value:mx(i[0]-e,r)}):o.push({value:n[0]}));for(var a=i[0];a<=i[1]&&(o.push({value:a}),(a=mx(a+e,r))!==o[o.length-1].value);)if(o.length>1e4)return[];var s=o.length?o[o.length-1].value:i[1];return n[1]>s&&(t?o.push({value:mx(s+e,r)}):o.push({value:n[1]})),o},e.prototype.getMinorTicks=function(t){for(var e=this.getTicks(!0),n=[],i=this.getExtent(),r=1;r<e.length;r++){for(var o=e[r],a=e[r-1],s=0,l=[],u=(o.value-a.value)/t;s<t-1;){var h=mx(a.value+(s+1)*u);h>i[0]&&h<i[1]&&l.push(h),s++}n.push(l)}return n},e.prototype.getLabel=function(t,e){if(null==t)return"";var n=e&&e.precision;return null==n?n=Br(t.value)||0:"auto"===n&&(n=this._intervalPrecision),ep(mx(t.value,n,!0))},e.prototype.calcNiceTicks=function(t,e,n){t=t||5;var i=this._extent,r=i[1]-i[0];if(isFinite(r)){r<0&&(r=-r,i.reverse());var o=hx(i,t,e,n);this._intervalPrecision=o.intervalPrecision,this._interval=o.interval,this._niceExtent=o.niceTickExtent}},e.prototype.calcNiceExtent=function(t){var e=this._extent;if(e[0]===e[1])if(0!==e[0]){var n=e[0];t.fixMax||(e[1]+=n/2),e[0]-=n/2}else e[1]=1;var i=e[1]-e[0];isFinite(i)||(e[0]=0,e[1]=1),this.calcNiceTicks(t.splitNumber,t.minInterval,t.maxInterval);var r=this._interval;t.fixMin||(e[0]=mx(Math.floor(e[0]/r)*r)),t.fixMax||(e[1]=mx(Math.ceil(e[1]/r)*r))},e.prototype.setNiceExtent=function(t,e){this._niceExtent=[t,e]},e.type="interval",e}(ox);ox.registerClass(xx);var _x="undefined"!=typeof Float32Array,bx=_x?Float32Array:Array;function Sx(t){return Y(t)?_x?new Float32Array(t):t:new bx(t)}var Mx="__ec_stack_";function Ix(t){return t.get("stack")||Mx+t.seriesIndex}function Tx(t){return t.dim+t.index}function Cx(t,e){var n=[];return e.eachSeriesByType(t,(function(t){Px(t)&&n.push(t)})),n}function Dx(t){var e=function(t){var e={};E(t,(function(t){var n=t.coordinateSystem.getBaseAxis();if("time"===n.type||"value"===n.type)for(var i=t.getData(),r=n.dim+"_"+n.index,o=i.getDimensionIndex(i.mapDimension(n.dim)),a=i.getStore(),s=0,l=a.count();s<l;++s){var u=a.get(o,s);e[r]?e[r].push(u):e[r]=[u]}}));var n={};for(var i in e)if(e.hasOwnProperty(i)){var r=e[i];if(r){r.sort((function(t,e){return t-e}));for(var o=null,a=1;a<r.length;++a){var s=r[a]-r[a-1];s>0&&(o=null===o?s:Math.min(o,s))}n[i]=o}}return n}(t),n=[];return E(t,(function(t){var i,r=t.coordinateSystem.getBaseAxis(),o=r.getExtent();if("category"===r.type)i=r.getBandWidth();else if("value"===r.type||"time"===r.type){var a=r.dim+"_"+r.index,s=e[a],l=Math.abs(o[1]-o[0]),u=r.scale.getExtent(),h=Math.abs(u[1]-u[0]);i=s?l/h*s:l}else{var c=t.getData();i=Math.abs(o[1]-o[0])/c.count()}var p=Er(t.get("barWidth"),i),d=Er(t.get("barMaxWidth"),i),f=Er(t.get("barMinWidth")||(Ox(t)?.5:1),i),g=t.get("barGap"),y=t.get("barCategoryGap");n.push({bandWidth:i,barWidth:p,barMaxWidth:d,barMinWidth:f,barGap:g,barCategoryGap:y,axisKey:Tx(r),stackId:Ix(t)})})),Ax(n)}function Ax(t){var e={};E(t,(function(t,n){var i=t.axisKey,r=t.bandWidth,o=e[i]||{bandWidth:r,remainedWidth:r,autoWidthCount:0,categoryGap:null,gap:"20%",stacks:{}},a=o.stacks;e[i]=o;var s=t.stackId;a[s]||o.autoWidthCount++,a[s]=a[s]||{width:0,maxWidth:0};var l=t.barWidth;l&&!a[s].width&&(a[s].width=l,l=Math.min(o.remainedWidth,l),o.remainedWidth-=l);var u=t.barMaxWidth;u&&(a[s].maxWidth=u);var h=t.barMinWidth;h&&(a[s].minWidth=h);var c=t.barGap;null!=c&&(o.gap=c);var p=t.barCategoryGap;null!=p&&(o.categoryGap=p)}));var n={};return E(e,(function(t,e){n[e]={};var i=t.stacks,r=t.bandWidth,o=t.categoryGap;if(null==o){var a=G(i).length;o=Math.max(35-4*a,15)+"%"}var s=Er(o,r),l=Er(t.gap,1),u=t.remainedWidth,h=t.autoWidthCount,c=(u-s)/(h+(h-1)*l);c=Math.max(c,0),E(i,(function(t){var e=t.maxWidth,n=t.minWidth;if(t.width){i=t.width;e&&(i=Math.min(i,e)),n&&(i=Math.max(i,n)),t.width=i,u-=i+l*i,h--}else{var i=c;e&&e<i&&(i=Math.min(e,u)),n&&n>i&&(i=n),i!==c&&(t.width=i,u-=i+l*i,h--)}})),c=(u-s)/(h+(h-1)*l),c=Math.max(c,0);var p,d=0;E(i,(function(t,e){t.width||(t.width=c),p=t,d+=t.width*(1+l)})),p&&(d-=p.width*l);var f=-d/2;E(i,(function(t,i){n[e][i]=n[e][i]||{bandWidth:r,offset:f,width:t.width},f+=t.width*(1+l)}))})),n}function kx(t,e){var n=Cx(t,e),i=Dx(n);E(n,(function(t){var e=t.getData(),n=t.coordinateSystem.getBaseAxis(),r=Ix(t),o=i[Tx(n)][r],a=o.offset,s=o.width;e.setLayout({bandWidth:o.bandWidth,offset:a,size:s})}))}function Lx(t){return{seriesType:t,plan:yg(),reset:function(t){if(Px(t)){var e=t.getData(),n=t.coordinateSystem,i=n.getBaseAxis(),r=n.getOtherAxis(i),o=e.getDimensionIndex(e.mapDimension(r.dim)),a=e.getDimensionIndex(e.mapDimension(i.dim)),s=t.get("showBackground",!0),l=e.mapDimension(r.dim),u=e.getCalculationInfo("stackResultDimension"),h=nx(e,l)&&!!e.getCalculationInfo("stackedOnSeries"),c=r.isHorizontal(),p=function(t,e){return e.toGlobalCoord(e.dataToCoord("log"===e.type?1:0))}(0,r),d=Ox(t),f=t.get("barMinHeight")||0,g=u&&e.getDimensionIndex(u),y=e.getLayout("size"),v=e.getLayout("offset");return{progress:function(t,e){for(var i,r=t.count,l=d&&Sx(3*r),u=d&&s&&Sx(3*r),m=d&&Sx(r),x=n.master.getRect(),_=c?x.width:x.height,b=e.getStore(),w=0;null!=(i=t.next());){var S=b.get(h?g:o,i),M=b.get(a,i),I=p,T=void 0;h&&(T=+S-b.get(o,i));var C=void 0,D=void 0,A=void 0,k=void 0;if(c){var L=n.dataToPoint([S,M]);if(h)I=n.dataToPoint([T,M])[0];C=I,D=L[1]+v,A=L[0]-I,k=y,Math.abs(A)<f&&(A=(A<0?-1:1)*f)}else{L=n.dataToPoint([M,S]);if(h)I=n.dataToPoint([M,T])[1];C=L[0]+v,D=I,A=y,k=L[1]-I,Math.abs(k)<f&&(k=(k<=0?-1:1)*f)}d?(l[w]=C,l[w+1]=D,l[w+2]=c?A:k,u&&(u[w]=c?x.x:C,u[w+1]=c?D:x.y,u[w+2]=_),m[i]=i):e.setItemLayout(i,{x:C,y:D,width:A,height:k}),w+=3}d&&e.setLayout({largePoints:l,largeDataIndices:m,largeBackgroundPoints:u,valueAxisHorizontal:c})}}}}}}function Px(t){return t.coordinateSystem&&"cartesian2d"===t.coordinateSystem.type}function Ox(t){return t.pipelineContext&&t.pipelineContext.large}var Rx=function(t){function e(e){var n=t.call(this,e)||this;return n.type="time",n}return n(e,t),e.prototype.getLabel=function(t){var e=this.getSetting("useUTC");return Vc(t.value,Pc[function(t){switch(t){case"year":case"month":return"day";case"millisecond":return"millisecond";default:return"second"}}(Ec(this._minLevelUnit))]||Pc.second,e,this.getSetting("locale"))},e.prototype.getFormattedLabel=function(t,e,n){var i=this.getSetting("useUTC");return function(t,e,n,i,r){var o=null;if(X(n))o=n;else if(U(n))o=n(t.value,e,{level:t.level});else{var a=A({},kc);if(t.level>0)for(var s=0;s<Oc.length;++s)a[Oc[s]]="{primary|"+a[Oc[s]]+"}";var l=n?!1===n.inherit?n:k(n,a):a,u=Bc(t.value,r);if(l[u])o=l[u];else if(l.inherit){for(s=Rc.indexOf(u)-1;s>=0;--s)if(l[u]){o=l[u];break}o=o||a.none}if(Y(o)){var h=null==t.level?0:t.level>=0?t.level:o.length+t.level;o=o[h=Math.min(h,o.length-1)]}}return Vc(new Date(t.value),o,r,i)}(t,e,n,this.getSetting("locale"),i)},e.prototype.getTicks=function(){var t=this._interval,e=this._extent,n=[];if(!t)return n;n.push({value:e[0],level:0});var i=this.getSetting("useUTC"),r=function(t,e,n,i){var r=1e4,o=Rc,a=0;function s(t,e,n,r,o,a,s){for(var l=new Date(e),u=e,h=l[r]();u<n&&u<=i[1];)s.push({value:u}),h+=t,l[o](h),u=l.getTime();s.push({value:u,notAdd:!0})}function l(t,r,o){var a=[],l=!r.length;if(!function(t,e,n,i){var r=jr(e),o=jr(n),a=function(t){return Fc(r,t,i)===Fc(o,t,i)},s=function(){return a("year")},l=function(){return s()&&a("month")},u=function(){return l()&&a("day")},h=function(){return u()&&a("hour")},c=function(){return h()&&a("minute")},p=function(){return c()&&a("second")},d=function(){return p()&&a("millisecond")};switch(t){case"year":return s();case"month":return l();case"day":return u();case"hour":return h();case"minute":return c();case"second":return p();case"millisecond":return d()}}(Ec(t),i[0],i[1],n)){l&&(r=[{value:Gx(new Date(i[0]),t,n)},{value:i[1]}]);for(var u=0;u<r.length-1;u++){var h=r[u].value,c=r[u+1].value;if(h!==c){var p=void 0,d=void 0,f=void 0,g=!1;switch(t){case"year":p=Math.max(1,Math.round(e/Dc/365)),d=Gc(n),f=jc(n);break;case"half-year":case"quarter":case"month":p=zx(e),d=Wc(n),f=qc(n);break;case"week":case"half-week":case"day":p=Ex(e),d=Hc(n),f=Kc(n),g=!0;break;case"half-day":case"quarter-day":case"hour":p=Vx(e),d=Yc(n),f=$c(n);break;case"minute":p=Bx(e,!0),d=Uc(n),f=Jc(n);break;case"second":p=Bx(e,!1),d=Xc(n),f=Qc(n);break;case"millisecond":p=Fx(e),d=Zc(n),f=tp(n)}s(p,h,c,d,f,g,a),"year"===t&&o.length>1&&0===u&&o.unshift({value:o[0].value-p})}}for(u=0;u<a.length;u++)o.push(a[u]);return a}}for(var u=[],h=[],c=0,p=0,d=0;d<o.length&&a++<r;++d){var f=Ec(o[d]);if(zc(o[d]))if(l(o[d],u[u.length-1]||[],h),f!==(o[d+1]?Ec(o[d+1]):null)){if(h.length){p=c,h.sort((function(t,e){return t.value-e.value}));for(var g=[],y=0;y<h.length;++y){var v=h[y].value;0!==y&&h[y-1].value===v||(g.push(h[y]),v>=i[0]&&v<=i[1]&&c++)}var m=(i[1]-i[0])/e;if(c>1.5*m&&p>m/1.5)break;if(u.push(g),c>m||t===o[d])break}h=[]}}0;var x=B(z(u,(function(t){return B(t,(function(t){return t.value>=i[0]&&t.value<=i[1]&&!t.notAdd}))})),(function(t){return t.length>0})),_=[],b=x.length-1;for(d=0;d<x.length;++d)for(var w=x[d],S=0;S<w.length;++S)_.push({value:w[S].value,level:b-d});_.sort((function(t,e){return t.value-e.value}));var M=[];for(d=0;d<_.length;++d)0!==d&&_[d].value===_[d-1].value||M.push(_[d]);return M}(this._minLevelUnit,this._approxInterval,i,e);return(n=n.concat(r)).push({value:e[1],level:0}),n},e.prototype.calcNiceExtent=function(t){var e=this._extent;if(e[0]===e[1]&&(e[0]-=Dc,e[1]+=Dc),e[1]===-1/0&&e[0]===1/0){var n=new Date;e[1]=+new Date(n.getFullYear(),n.getMonth(),n.getDate()),e[0]=e[1]-Dc}this.calcNiceTicks(t.splitNumber,t.minInterval,t.maxInterval)},e.prototype.calcNiceTicks=function(t,e,n){t=t||10;var i=this._extent,r=i[1]-i[0];this._approxInterval=r/t,null!=e&&this._approxInterval<e&&(this._approxInterval=e),null!=n&&this._approxInterval>n&&(this._approxInterval=n);var o=Nx.length,a=Math.min(function(t,e,n,i){for(;n<i;){var r=n+i>>>1;t[r][1]<e?n=r+1:i=r}return n}(Nx,this._approxInterval,0,o),o-1);this._interval=Nx[a][1],this._minLevelUnit=Nx[Math.max(a-1,0)][0]},e.prototype.parse=function(t){return j(t)?t:+jr(t)},e.prototype.contain=function(t){return fx(this.parse(t),this._extent)},e.prototype.normalize=function(t){return gx(this.parse(t),this._extent)},e.prototype.scale=function(t){return yx(t,this._extent)},e.type="time",e}(xx),Nx=[["second",Ic],["minute",Tc],["hour",Cc],["quarter-day",216e5],["half-day",432e5],["day",10368e4],["half-week",3024e5],["week",6048e5],["month",26784e5],["quarter",8208e6],["half-year",Ac/2],["year",Ac]];function Ex(t,e){return(t/=Dc)>16?16:t>7.5?7:t>3.5?4:t>1.5?2:1}function zx(t){return(t/=2592e6)>6?6:t>3?3:t>2?2:1}function Vx(t){return(t/=Cc)>12?12:t>6?6:t>3.5?4:t>2?2:1}function Bx(t,e){return(t/=e?Tc:Ic)>30?30:t>20?20:t>15?15:t>10?10:t>5?5:t>2?2:1}function Fx(t){return $r(t,!0)}function Gx(t,e,n){var i=new Date(t);switch(Ec(e)){case"year":case"month":i[qc(n)](0);case"day":i[Kc(n)](1);case"hour":i[$c(n)](0);case"minute":i[Jc(n)](0);case"second":i[Qc(n)](0),i[tp(n)](0)}return i.getTime()}ox.registerClass(Rx);var Wx=ox.prototype,Hx=xx.prototype,Yx=zr,Ux=Math.floor,Xx=Math.ceil,Zx=Math.pow,jx=Math.log,qx=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="log",e.base=10,e._originalScale=new xx,e._interval=0,e}return n(e,t),e.prototype.getTicks=function(t){var e=this._originalScale,n=this._extent,i=e.getExtent();return z(Hx.getTicks.call(this,t),(function(t){var e=t.value,r=zr(Zx(this.base,e));return r=e===n[0]&&this._fixMin?$x(r,i[0]):r,{value:r=e===n[1]&&this._fixMax?$x(r,i[1]):r}}),this)},e.prototype.setExtent=function(t,e){var n=this.base;t=jx(t)/jx(n),e=jx(e)/jx(n),Hx.setExtent.call(this,t,e)},e.prototype.getExtent=function(){var t=this.base,e=Wx.getExtent.call(this);e[0]=Zx(t,e[0]),e[1]=Zx(t,e[1]);var n=this._originalScale.getExtent();return this._fixMin&&(e[0]=$x(e[0],n[0])),this._fixMax&&(e[1]=$x(e[1],n[1])),e},e.prototype.unionExtent=function(t){this._originalScale.unionExtent(t);var e=this.base;t[0]=jx(t[0])/jx(e),t[1]=jx(t[1])/jx(e),Wx.unionExtent.call(this,t)},e.prototype.unionExtentFromData=function(t,e){this.unionExtent(t.getApproximateExtent(e))},e.prototype.calcNiceTicks=function(t){t=t||10;var e=this._extent,n=e[1]-e[0];if(!(n===1/0||n<=0)){var i=qr(n);for(t/n*i<=.5&&(i*=10);!isNaN(i)&&Math.abs(i)<1&&Math.abs(i)>0;)i*=10;var r=[zr(Xx(e[0]/i)*i),zr(Ux(e[1]/i)*i)];this._interval=i,this._niceExtent=r}},e.prototype.calcNiceExtent=function(t){Hx.calcNiceExtent.call(this,t),this._fixMin=t.fixMin,this._fixMax=t.fixMax},e.prototype.parse=function(t){return t},e.prototype.contain=function(t){return fx(t=jx(t)/jx(this.base),this._extent)},e.prototype.normalize=function(t){return gx(t=jx(t)/jx(this.base),this._extent)},e.prototype.scale=function(t){return t=yx(t,this._extent),Zx(this.base,t)},e.type="log",e}(ox),Kx=qx.prototype;function $x(t,e){return Yx(t,Br(e))}Kx.getMinorTicks=Hx.getMinorTicks,Kx.getLabel=Hx.getLabel,ox.registerClass(qx);var Jx=function(){function t(t,e,n){this._prepareParams(t,e,n)}return t.prototype._prepareParams=function(t,e,n){n[1]<n[0]&&(n=[NaN,NaN]),this._dataMin=n[0],this._dataMax=n[1];var i=this._isOrdinal="ordinal"===t.type;this._needCrossZero="interval"===t.type&&e.getNeedCrossZero&&e.getNeedCrossZero();var r=this._modelMinRaw=e.get("min",!0);U(r)?this._modelMinNum=n_(t,r({min:n[0],max:n[1]})):"dataMin"!==r&&(this._modelMinNum=n_(t,r));var o=this._modelMaxRaw=e.get("max",!0);if(U(o)?this._modelMaxNum=n_(t,o({min:n[0],max:n[1]})):"dataMax"!==o&&(this._modelMaxNum=n_(t,o)),i)this._axisDataLen=e.getCategories().length;else{var a=e.get("boundaryGap"),s=Y(a)?a:[a||0,a||0];"boolean"==typeof s[0]||"boolean"==typeof s[1]?this._boundaryGapInner=[0,0]:this._boundaryGapInner=[gr(s[0],1),gr(s[1],1)]}},t.prototype.calculate=function(){var t=this._isOrdinal,e=this._dataMin,n=this._dataMax,i=this._axisDataLen,r=this._boundaryGapInner,o=t?null:n-e||Math.abs(e),a="dataMin"===this._modelMinRaw?e:this._modelMinNum,s="dataMax"===this._modelMaxRaw?n:this._modelMaxNum,l=null!=a,u=null!=s;null==a&&(a=t?i?0:NaN:e-r[0]*o),null==s&&(s=t?i?i-1:NaN:n+r[1]*o),(null==a||!isFinite(a))&&(a=NaN),(null==s||!isFinite(s))&&(s=NaN);var h=nt(a)||nt(s)||t&&!i;this._needCrossZero&&(a>0&&s>0&&!l&&(a=0),a<0&&s<0&&!u&&(s=0));var c=this._determinedMin,p=this._determinedMax;return null!=c&&(a=c,l=!0),null!=p&&(s=p,u=!0),{min:a,max:s,minFixed:l,maxFixed:u,isBlank:h}},t.prototype.modifyDataMinMax=function(t,e){this[t_[t]]=e},t.prototype.setDeterminedMinMax=function(t,e){var n=Qx[t];this[n]=e},t.prototype.freeze=function(){this.frozen=!0},t}(),Qx={min:"_determinedMin",max:"_determinedMax"},t_={min:"_dataMin",max:"_dataMax"};function e_(t,e,n){var i=t.rawExtentInfo;return i||(i=new Jx(t,e,n),t.rawExtentInfo=i,i)}function n_(t,e){return null==e?null:nt(e)?NaN:t.parse(e)}function i_(t,e){var n=t.type,i=e_(t,e,t.getExtent()).calculate();t.setBlank(i.isBlank);var r=i.min,o=i.max,a=e.ecModel;if(a&&"time"===n){var s=Cx("bar",a),l=!1;if(E(s,(function(t){l=l||t.getBaseAxis()===e.axis})),l){var u=Dx(s),h=function(t,e,n,i){var r=n.axis.getExtent(),o=r[1]-r[0],a=function(t,e,n){if(t&&e){var i=t[Tx(e)];return null!=i&&null!=n?i[Ix(n)]:i}}(i,n.axis);if(void 0===a)return{min:t,max:e};var s=1/0;E(a,(function(t){s=Math.min(t.offset,s)}));var l=-1/0;E(a,(function(t){l=Math.max(t.offset+t.width,l)})),s=Math.abs(s),l=Math.abs(l);var u=s+l,h=e-t,c=h/(1-(s+l)/o)-h;return{min:t-=c*(s/u),max:e+=c*(l/u)}}(r,o,e,u);r=h.min,o=h.max}}return{extent:[r,o],fixMin:i.minFixed,fixMax:i.maxFixed}}function r_(t,e){var n=e,i=i_(t,n),r=i.extent,o=n.get("splitNumber");t instanceof qx&&(t.base=n.get("logBase"));var a=t.type,s=n.get("interval"),l="interval"===a||"time"===a;t.setExtent(r[0],r[1]),t.calcNiceExtent({splitNumber:o,fixMin:i.fixMin,fixMax:i.fixMax,minInterval:l?n.get("minInterval"):null,maxInterval:l?n.get("maxInterval"):null}),null!=s&&t.setInterval&&t.setInterval(s)}function o_(t,e){if(e=e||t.get("type"))switch(e){case"category":return new vx({ordinalMeta:t.getOrdinalMeta?t.getOrdinalMeta():t.getCategories(),extent:[1/0,-1/0]});case"time":return new Rx({locale:t.ecModel.getLocaleModel(),useUTC:t.ecModel.get("useUTC")});default:return new(ox.getClass(e)||xx)}}function a_(t){var e,n,i=t.getLabelModel().get("formatter"),r="category"===t.type?t.scale.getExtent()[0]:null;return"time"===t.scale.type?(n=i,function(e,i){return t.scale.getFormattedLabel(e,i,n)}):X(i)?function(e){return function(n){var i=t.scale.getLabel(n);return e.replace("{value}",null!=i?i:"")}}(i):U(i)?(e=i,function(n,i){return null!=r&&(i=n.value-r),e(s_(t,n),i,null!=n.level?{level:n.level}:null)}):function(e){return t.scale.getLabel(e)}}function s_(t,e){return"category"===t.type?t.scale.getLabel(e):e.value}function l_(t,e){var n=e*Math.PI/180,i=t.width,r=t.height,o=i*Math.abs(Math.cos(n))+Math.abs(r*Math.sin(n)),a=i*Math.abs(Math.sin(n))+Math.abs(r*Math.cos(n));return new sr(t.x,t.y,o,a)}function u_(t){var e=t.get("interval");return null==e?"auto":e}function h_(t){return"category"===t.type&&0===u_(t.getLabelModel())}function c_(t,e){var n={};return E(t.mapDimensionsAll(e),(function(e){n[ix(t,e)]=!0})),G(n)}var p_=function(){function t(){}return t.prototype.getNeedCrossZero=function(){return!this.option.scale},t.prototype.getCoordSysModel=function(){},t}();var d_={isDimensionStacked:nx,enableDataStack:ex,getStackedDimension:ix};var f_=Object.freeze({__proto__:null,createList:function(t){return rx(null,t)},getLayoutRect:xp,dataStack:d_,createScale:function(t,e){var n=e;e instanceof dc||(n=new dc(e));var i=o_(n);return i.setExtent(t[0],t[1]),r_(i,n),i},mixinAxisModelCommonMethods:function(t){R(t,p_)},getECData:Hs,createTextStyle:function(t,e){return Uh(t,null,null,"normal"!==(e=e||{}).state)},createDimensions:function(t,e){return Km(t,e).dimensions},createSymbol:Ly,enableHoverEmphasis:Ol});function g_(t,e){return Math.abs(t-e)<1e-8}function y_(t,e,n){var i=0,r=t[0];if(!r)return!1;for(var o=1;o<t.length;o++){var a=t[o];i+=is(r[0],r[1],a[0],a[1],e,n),r=a}var s=t[0];return g_(r[0],s[0])&&g_(r[1],s[1])||(i+=is(r[0],r[1],s[0],s[1],e,n)),0!==i}var v_=[];function m_(t,e){for(var n=0;n<t.length;n++)Ft(t[n],t[n],e)}function x_(t,e,n,i){for(var r=0;r<t.length;r++){var o=t[r];i&&(o=i.project(o)),o&&isFinite(o[0])&&isFinite(o[1])&&(Gt(e,e,o),Wt(n,n,o))}}var __=function(){function t(t){this.name=t}return t.prototype.setCenter=function(t){this._center=t},t.prototype.getCenter=function(){var t=this._center;return t||(t=this._center=this.calcCenter()),t},t}(),b_=function(t,e){this.type="polygon",this.exterior=t,this.interiors=e},w_=function(t){this.type="linestring",this.points=t},S_=function(t){function e(e,n,i){var r=t.call(this,e)||this;return r.type="geoJSON",r.geometries=n,r._center=i&&[i[0],i[1]],r}return n(e,t),e.prototype.calcCenter=function(){for(var t,e=this.geometries,n=0,i=0;i<e.length;i++){var r=e[i],o=r.exterior,a=o&&o.length;a>n&&(t=r,n=a)}if(t)return function(t){for(var e=0,n=0,i=0,r=t.length,o=t[r-1][0],a=t[r-1][1],s=0;s<r;s++){var l=t[s][0],u=t[s][1],h=o*u-l*a;e+=h,n+=(o+l)*h,i+=(a+u)*h,o=l,a=u}return e?[n/e/3,i/e/3,e]:[t[0][0]||0,t[0][1]||0]}(t.exterior);var s=this.getBoundingRect();return[s.x+s.width/2,s.y+s.height/2]},e.prototype.getBoundingRect=function(t){var e=this._rect;if(e&&!t)return e;var n=[1/0,1/0],i=[-1/0,-1/0];return E(this.geometries,(function(e){"polygon"===e.type?x_(e.exterior,n,i,t):E(e.points,(function(e){x_(e,n,i,t)}))})),isFinite(n[0])&&isFinite(n[1])&&isFinite(i[0])&&isFinite(i[1])||(n[0]=n[1]=i[0]=i[1]=0),e=new sr(n[0],n[1],i[0]-n[0],i[1]-n[1]),t||(this._rect=e),e},e.prototype.contain=function(t){var e=this.getBoundingRect(),n=this.geometries;if(!e.contain(t[0],t[1]))return!1;t:for(var i=0,r=n.length;i<r;i++){var o=n[i];if("polygon"===o.type){var a=o.exterior,s=o.interiors;if(y_(a,t[0],t[1])){for(var l=0;l<(s?s.length:0);l++)if(y_(s[l],t[0],t[1]))continue t;return!0}}}return!1},e.prototype.transformTo=function(t,e,n,i){var r=this.getBoundingRect(),o=r.width/r.height;n?i||(i=n/o):n=o*i;for(var a=new sr(t,e,n,i),s=r.calculateTransform(a),l=this.geometries,u=0;u<l.length;u++){var h=l[u];"polygon"===h.type?(m_(h.exterior,s),E(h.interiors,(function(t){m_(t,s)}))):E(h.points,(function(t){m_(t,s)}))}(r=this._rect).copy(a),this._center=[r.x+r.width/2,r.y+r.height/2]},e.prototype.cloneShallow=function(t){null==t&&(t=this.name);var n=new e(t,this.geometries,this._center);return n._rect=this._rect,n.transformTo=null,n},e}(__),M_=function(t){function e(e,n){var i=t.call(this,e)||this;return i.type="geoSVG",i._elOnlyForCalculate=n,i}return n(e,t),e.prototype.calcCenter=function(){for(var t=this._elOnlyForCalculate,e=t.getBoundingRect(),n=[e.x+e.width/2,e.y+e.height/2],i=Oi(v_),r=t;r&&!r.isGeoSVGGraphicRoot;)Ni(i,r.getLocalTransform(),i),r=r.parent;return Bi(i,i),Ft(n,n,i),n},e}(__);function I_(t,e,n){for(var i=0;i<t.length;i++)t[i]=T_(t[i],e[i],n)}function T_(t,e,n){for(var i=[],r=e[0],o=e[1],a=0;a<t.length;a+=2){var s=t.charCodeAt(a)-64,l=t.charCodeAt(a+1)-64;s=s>>1^-(1&s),l=l>>1^-(1&l),r=s+=r,o=l+=o,i.push([s/n,l/n])}return i}function C_(t,e){return z(B((t=function(t){if(!t.UTF8Encoding)return t;var e=t,n=e.UTF8Scale;return null==n&&(n=1024),E(e.features,(function(t){var e=t.geometry,i=e.encodeOffsets,r=e.coordinates;if(i)switch(e.type){case"LineString":e.coordinates=T_(r,i,n);break;case"Polygon":case"MultiLineString":I_(r,i,n);break;case"MultiPolygon":E(r,(function(t,e){return I_(t,i[e],n)}))}})),e.UTF8Encoding=!1,e}(t)).features,(function(t){return t.geometry&&t.properties&&t.geometry.coordinates.length>0})),(function(t){var n=t.properties,i=t.geometry,r=[];switch(i.type){case"Polygon":var o=i.coordinates;r.push(new b_(o[0],o.slice(1)));break;case"MultiPolygon":E(i.coordinates,(function(t){t[0]&&r.push(new b_(t[0],t.slice(1)))}));break;case"LineString":r.push(new w_([i.coordinates]));break;case"MultiLineString":r.push(new w_(i.coordinates))}var a=new S_(n[e||"name"],r,n.cp);return a.properties=n,a}))}var D_=Object.freeze({__proto__:null,linearMap:Nr,round:zr,asc:Vr,getPrecision:Br,getPrecisionSafe:Fr,getPixelPrecision:Gr,getPercentWithPrecision:Wr,MAX_SAFE_INTEGER:Yr,remRadian:Ur,isRadianAroundZero:Xr,parseDate:jr,quantity:qr,quantityExponent:Kr,nice:$r,quantile:Jr,reformIntervals:Qr,isNumeric:eo,numericToNumber:to}),A_=Object.freeze({__proto__:null,parse:jr,format:Vc}),k_=Object.freeze({__proto__:null,extendShape:fh,extendPath:yh,makePath:xh,makeImage:_h,mergePath:wh,resizePath:Sh,createIcon:Ph,updateProps:rh,initProps:oh,getTransform:Ih,clipPointsByRect:kh,clipRectByRect:Lh,registerShape:vh,getShapeClass:mh,Group:Cr,Image:_s,Text:ks,Circle:hu,Ellipse:pu,Sector:Cu,Ring:Au,Polygon:Pu,Polyline:Ru,Rect:Cs,Line:zu,BezierCurve:Gu,Arc:Hu,IncrementalDisplayable:th,CompoundPath:Yu,LinearGradient:Xu,RadialGradient:Zu,BoundingRect:sr}),L_=Object.freeze({__proto__:null,addCommas:ep,toCamelCase:np,normalizeCssArray:ip,encodeHTML:ap,formatTpl:hp,getTooltipMarker:cp,formatTime:function(t,e,n){"week"!==t&&"month"!==t&&"quarter"!==t&&"half-year"!==t&&"year"!==t||(t="MM-dd\nyyyy");var i=jr(e),r=n?"getUTC":"get",o=i[r+"FullYear"](),a=i[r+"Month"]()+1,s=i[r+"Date"](),l=i[r+"Hours"](),u=i[r+"Minutes"](),h=i[r+"Seconds"](),c=i[r+"Milliseconds"]();return t=t.replace("MM",Nc(a,2)).replace("M",a).replace("yyyy",o).replace("yy",Nc(o%100+"",2)).replace("dd",Nc(s,2)).replace("d",s).replace("hh",Nc(l,2)).replace("h",l).replace("mm",Nc(u,2)).replace("m",u).replace("ss",Nc(h,2)).replace("s",h).replace("SSS",Nc(c,3))},capitalFirst:function(t){return t?t.charAt(0).toUpperCase()+t.substr(1):t},truncateText:$o,getTextRect:function(t,e,n,i,r,o,a,s){return new ks({style:{text:t,font:e,align:n,verticalAlign:i,padding:r,rich:o,overflow:a?"truncate":null,lineHeight:s}}).getBoundingRect()}}),P_=Object.freeze({__proto__:null,map:z,each:E,indexOf:P,inherits:O,reduce:V,filter:B,bind:W,curry:H,isArray:Y,isString:X,isObject:q,isFunction:U,extend:A,defaults:k,clone:T,merge:C}),O_=So();function R_(t){return"category"===t.type?function(t){var e=t.getLabelModel(),n=E_(t,e);return!e.get("show")||t.scale.isBlank()?{labels:[],labelCategoryInterval:n.labelCategoryInterval}:n}(t):function(t){var e=t.scale.getTicks(),n=a_(t);return{labels:z(e,(function(e,i){return{level:e.level,formattedLabel:n(e,i),rawLabel:t.scale.getLabel(e),tickValue:e.value}}))}}(t)}function N_(t,e){return"category"===t.type?function(t,e){var n,i,r=z_(t,"ticks"),o=u_(e),a=V_(r,o);if(a)return a;e.get("show")&&!t.scale.isBlank()||(n=[]);if(U(o))n=G_(t,o,!0);else if("auto"===o){var s=E_(t,t.getLabelModel());i=s.labelCategoryInterval,n=z(s.labels,(function(t){return t.tickValue}))}else n=F_(t,i=o,!0);return B_(r,o,{ticks:n,tickCategoryInterval:i})}(t,e):{ticks:z(t.scale.getTicks(),(function(t){return t.value}))}}function E_(t,e){var n,i,r=z_(t,"labels"),o=u_(e),a=V_(r,o);return a||(U(o)?n=G_(t,o):(i="auto"===o?function(t){var e=O_(t).autoInterval;return null!=e?e:O_(t).autoInterval=t.calculateCategoryInterval()}(t):o,n=F_(t,i)),B_(r,o,{labels:n,labelCategoryInterval:i}))}function z_(t,e){return O_(t)[e]||(O_(t)[e]=[])}function V_(t,e){for(var n=0;n<t.length;n++)if(t[n].key===e)return t[n].value}function B_(t,e,n){return t.push({key:e,value:n}),n}function F_(t,e,n){var i=a_(t),r=t.scale,o=r.getExtent(),a=t.getLabelModel(),s=[],l=Math.max((e||0)+1,1),u=o[0],h=r.count();0!==u&&l>1&&h/l>2&&(u=Math.round(Math.ceil(u/l)*l));var c=h_(t),p=a.get("showMinLabel")||c,d=a.get("showMaxLabel")||c;p&&u!==o[0]&&g(o[0]);for(var f=u;f<=o[1];f+=l)g(f);function g(t){var e={value:t};s.push(n?t:{formattedLabel:i(e),rawLabel:r.getLabel(e),tickValue:t})}return d&&f-l!==o[1]&&g(o[1]),s}function G_(t,e,n){var i=t.scale,r=a_(t),o=[];return E(i.getTicks(),(function(t){var a=i.getLabel(t),s=t.value;e(t.value,a)&&o.push(n?s:{formattedLabel:r(t),rawLabel:a,tickValue:s})})),o}var W_=[0,1],H_=function(){function t(t,e,n){this.onBand=!1,this.inverse=!1,this.dim=t,this.scale=e,this._extent=n||[0,0]}return t.prototype.contain=function(t){var e=this._extent,n=Math.min(e[0],e[1]),i=Math.max(e[0],e[1]);return t>=n&&t<=i},t.prototype.containData=function(t){return this.scale.contain(t)},t.prototype.getExtent=function(){return this._extent.slice()},t.prototype.getPixelPrecision=function(t){return Gr(t||this.scale.getExtent(),this._extent)},t.prototype.setExtent=function(t,e){var n=this._extent;n[0]=t,n[1]=e},t.prototype.dataToCoord=function(t,e){var n=this._extent,i=this.scale;return t=i.normalize(t),this.onBand&&"ordinal"===i.type&&Y_(n=n.slice(),i.count()),Nr(t,W_,n,e)},t.prototype.coordToData=function(t,e){var n=this._extent,i=this.scale;this.onBand&&"ordinal"===i.type&&Y_(n=n.slice(),i.count());var r=Nr(t,n,W_,e);return this.scale.scale(r)},t.prototype.pointToData=function(t,e){},t.prototype.getTicksCoords=function(t){var e=(t=t||{}).tickModel||this.getTickModel(),n=z(N_(this,e).ticks,(function(t){return{coord:this.dataToCoord("ordinal"===this.scale.type?this.scale.getRawOrdinalNumber(t):t),tickValue:t}}),this);return function(t,e,n,i){var r=e.length;if(!t.onBand||n||!r)return;var o,a,s=t.getExtent();if(1===r)e[0].coord=s[0],o=e[1]={coord:s[0]};else{var l=e[r-1].tickValue-e[0].tickValue,u=(e[r-1].coord-e[0].coord)/l;E(e,(function(t){t.coord-=u/2})),a=1+t.scale.getExtent()[1]-e[r-1].tickValue,o={coord:e[r-1].coord+u*a},e.push(o)}var h=s[0]>s[1];c(e[0].coord,s[0])&&(i?e[0].coord=s[0]:e.shift());i&&c(s[0],e[0].coord)&&e.unshift({coord:s[0]});c(s[1],o.coord)&&(i?o.coord=s[1]:e.pop());i&&c(o.coord,s[1])&&e.push({coord:s[1]});function c(t,e){return t=zr(t),e=zr(e),h?t>e:t<e}}(this,n,e.get("alignWithLabel"),t.clamp),n},t.prototype.getMinorTicksCoords=function(){if("ordinal"===this.scale.type)return[];var t=this.model.getModel("minorTick").get("splitNumber");return t>0&&t<100||(t=5),z(this.scale.getMinorTicks(t),(function(t){return z(t,(function(t){return{coord:this.dataToCoord(t),tickValue:t}}),this)}),this)},t.prototype.getViewLabels=function(){return R_(this).labels},t.prototype.getLabelModel=function(){return this.model.getModel("axisLabel")},t.prototype.getTickModel=function(){return this.model.getModel("axisTick")},t.prototype.getBandWidth=function(){var t=this._extent,e=this.scale.getExtent(),n=e[1]-e[0]+(this.onBand?1:0);0===n&&(n=1);var i=Math.abs(t[1]-t[0]);return Math.abs(i)/n},t.prototype.calculateCategoryInterval=function(){return function(t){var e=function(t){var e=t.getLabelModel();return{axisRotate:t.getRotate?t.getRotate():t.isHorizontal&&!t.isHorizontal()?90:0,labelRotate:e.get("rotate")||0,font:e.getFont()}}(t),n=a_(t),i=(e.axisRotate-e.labelRotate)/180*Math.PI,r=t.scale,o=r.getExtent(),a=r.count();if(o[1]-o[0]<1)return 0;var s=1;a>40&&(s=Math.max(1,Math.floor(a/40)));for(var l=o[0],u=t.dataToCoord(l+1)-t.dataToCoord(l),h=Math.abs(u*Math.cos(i)),c=Math.abs(u*Math.sin(i)),p=0,d=0;l<=o[1];l+=s){var f,g,y=cr(n({value:l}),e.font,"center","top");f=1.3*y.width,g=1.3*y.height,p=Math.max(p,f,7),d=Math.max(d,g,7)}var v=p/h,m=d/c;isNaN(v)&&(v=1/0),isNaN(m)&&(m=1/0);var x=Math.max(0,Math.floor(Math.min(v,m))),_=O_(t.model),b=t.getExtent(),w=_.lastAutoInterval,S=_.lastTickCount;return null!=w&&null!=S&&Math.abs(w-x)<=1&&Math.abs(S-a)<=1&&w>x&&_.axisExtent0===b[0]&&_.axisExtent1===b[1]?x=w:(_.lastTickCount=a,_.lastAutoInterval=x,_.axisExtent0=b[0],_.axisExtent1=b[1]),x}(this)},t}();function Y_(t,e){var n=(t[1]-t[0])/e/2;t[0]+=n,t[1]-=n}var U_=2*Math.PI,X_=qa.CMD,Z_=["top","right","bottom","left"];function j_(t,e,n,i,r){var o=n.width,a=n.height;switch(t){case"top":i.set(n.x+o/2,n.y-e),r.set(0,-1);break;case"bottom":i.set(n.x+o/2,n.y+a+e),r.set(0,1);break;case"left":i.set(n.x-e,n.y+a/2),r.set(-1,0);break;case"right":i.set(n.x+o+e,n.y+a/2),r.set(1,0)}}function q_(t,e,n,i,r,o,a,s,l){a-=t,s-=e;var u=Math.sqrt(a*a+s*s),h=(a/=u)*n+t,c=(s/=u)*n+e;if(Math.abs(i-r)%U_<1e-4)return l[0]=h,l[1]=c,u-n;if(o){var p=i;i=ts(r),r=ts(p)}else i=ts(i),r=ts(r);i>r&&(r+=U_);var d=Math.atan2(s,a);if(d<0&&(d+=U_),d>=i&&d<=r||d+U_>=i&&d+U_<=r)return l[0]=h,l[1]=c,u-n;var f=n*Math.cos(i)+t,g=n*Math.sin(i)+e,y=n*Math.cos(r)+t,v=n*Math.sin(r)+e,m=(f-a)*(f-a)+(g-s)*(g-s),x=(y-a)*(y-a)+(v-s)*(v-s);return m<x?(l[0]=f,l[1]=g,Math.sqrt(m)):(l[0]=y,l[1]=v,Math.sqrt(x))}function K_(t,e,n,i,r,o,a,s){var l=r-t,u=o-e,h=n-t,c=i-e,p=Math.sqrt(h*h+c*c),d=(l*(h/=p)+u*(c/=p))/p;s&&(d=Math.min(Math.max(d,0),1)),d*=p;var f=a[0]=t+d*h,g=a[1]=e+d*c;return Math.sqrt((f-r)*(f-r)+(g-o)*(g-o))}function $_(t,e,n,i,r,o,a){n<0&&(t+=n,n=-n),i<0&&(e+=i,i=-i);var s=t+n,l=e+i,u=a[0]=Math.min(Math.max(r,t),s),h=a[1]=Math.min(Math.max(o,e),l);return Math.sqrt((u-r)*(u-r)+(h-o)*(h-o))}var J_=[];function Q_(t,e,n){var i=$_(e.x,e.y,e.width,e.height,t.x,t.y,J_);return n.set(J_[0],J_[1]),i}function tb(t,e,n){for(var i,r,o=0,a=0,s=0,l=0,u=1/0,h=e.data,c=t.x,p=t.y,d=0;d<h.length;){var f=h[d++];1===d&&(s=o=h[d],l=a=h[d+1]);var g=u;switch(f){case X_.M:o=s=h[d++],a=l=h[d++];break;case X_.L:g=K_(o,a,h[d],h[d+1],c,p,J_,!0),o=h[d++],a=h[d++];break;case X_.C:g=je(o,a,h[d++],h[d++],h[d++],h[d++],h[d],h[d+1],c,p,J_),o=h[d++],a=h[d++];break;case X_.Q:g=tn(o,a,h[d++],h[d++],h[d],h[d+1],c,p,J_),o=h[d++],a=h[d++];break;case X_.A:var y=h[d++],v=h[d++],m=h[d++],x=h[d++],_=h[d++],b=h[d++];d+=1;var w=!!(1-h[d++]);i=Math.cos(_)*m+y,r=Math.sin(_)*x+v,d<=1&&(s=i,l=r),g=q_(y,v,x,_,_+b,w,(c-y)*x/m+y,p,J_),o=Math.cos(_+b)*m+y,a=Math.sin(_+b)*x+v;break;case X_.R:g=$_(s=o=h[d++],l=a=h[d++],h[d++],h[d++],c,p,J_);break;case X_.Z:g=K_(o,a,s,l,c,p,J_,!0),o=s,a=l}g<u&&(u=g,n.set(J_[0],J_[1]))}return u}var eb=new Ji,nb=new Ji,ib=new Ji,rb=new Ji,ob=new Ji;function ab(t,e){if(t){var n=t.getTextGuideLine(),i=t.getTextContent();if(i&&n){var r=t.textGuideLineConfig||{},o=[[0,0],[0,0],[0,0]],a=r.candidates||Z_,s=i.getBoundingRect().clone();s.applyTransform(i.getComputedTransform());var l=1/0,u=r.anchor,h=t.getComputedTransform(),c=h&&Bi([],h),p=e.get("length2")||0;u&&ib.copy(u);for(var d=0;d<a.length;d++){j_(a[d],0,s,eb,rb),Ji.scaleAndAdd(nb,eb,rb,p),nb.transform(c);var f=t.getBoundingRect(),g=u?u.distance(nb):t instanceof gs?tb(nb,t.path,ib):Q_(nb,f,ib);g<l&&(l=g,nb.transform(h),ib.transform(h),ib.toArray(o[0]),nb.toArray(o[1]),eb.toArray(o[2]))}ub(o,e.get("minTurnAngle")),n.setShape({points:o})}}}var sb=[],lb=new Ji;function ub(t,e){if(e<=180&&e>0){e=e/180*Math.PI,eb.fromArray(t[0]),nb.fromArray(t[1]),ib.fromArray(t[2]),Ji.sub(rb,eb,nb),Ji.sub(ob,ib,nb);var n=rb.len(),i=ob.len();if(!(n<.001||i<.001)){rb.scale(1/n),ob.scale(1/i);var r=rb.dot(ob);if(Math.cos(e)<r){var o=K_(nb.x,nb.y,ib.x,ib.y,eb.x,eb.y,sb,!1);lb.fromArray(sb),lb.scaleAndAdd(ob,o/Math.tan(Math.PI-e));var a=ib.x!==nb.x?(lb.x-nb.x)/(ib.x-nb.x):(lb.y-nb.y)/(ib.y-nb.y);if(isNaN(a))return;a<0?Ji.copy(lb,nb):a>1&&Ji.copy(lb,ib),lb.toArray(t[1])}}}}function hb(t,e,n){if(n<=180&&n>0){n=n/180*Math.PI,eb.fromArray(t[0]),nb.fromArray(t[1]),ib.fromArray(t[2]),Ji.sub(rb,nb,eb),Ji.sub(ob,ib,nb);var i=rb.len(),r=ob.len();if(!(i<.001||r<.001))if(rb.scale(1/i),ob.scale(1/r),rb.dot(e)<Math.cos(n)){var o=K_(nb.x,nb.y,ib.x,ib.y,eb.x,eb.y,sb,!1);lb.fromArray(sb);var a=Math.PI/2,s=a+Math.acos(ob.dot(e))-n;if(s>=a)Ji.copy(lb,ib);else{lb.scaleAndAdd(ob,o/Math.tan(Math.PI/2-s));var l=ib.x!==nb.x?(lb.x-nb.x)/(ib.x-nb.x):(lb.y-nb.y)/(ib.y-nb.y);if(isNaN(l))return;l<0?Ji.copy(lb,nb):l>1&&Ji.copy(lb,ib)}lb.toArray(t[1])}}}function cb(t,e,n,i){var r="normal"===n,o=r?t:t.ensureState(n);o.ignore=e;var a=i.get("smooth");a&&!0===a&&(a=.3),o.shape=o.shape||{},a>0&&(o.shape.smooth=a);var s=i.getModel("lineStyle").getLineStyle();r?t.useStyle(s):o.style=s}function pb(t,e){var n=e.smooth,i=e.points;if(i)if(t.moveTo(i[0][0],i[0][1]),n>0&&i.length>=3){var r=Et(i[0],i[1]),o=Et(i[1],i[2]);if(!r||!o)return t.lineTo(i[1][0],i[1][1]),void t.lineTo(i[2][0],i[2][1]);var a=Math.min(r,o)*n,s=Bt([],i[1],i[0],a/r),l=Bt([],i[1],i[2],a/o),u=Bt([],s,l,.5);t.bezierCurveTo(s[0],s[1],s[0],s[1],u[0],u[1]),t.bezierCurveTo(l[0],l[1],l[0],l[1],i[2][0],i[2][1])}else for(var h=1;h<i.length;h++)t.lineTo(i[h][0],i[h][1])}function db(t,e,n){var i=t.getTextGuideLine(),r=t.getTextContent();if(r){for(var o=e.normal,a=o.get("show"),s=r.ignore,l=0;l<Ks.length;l++){var u=Ks[l],h=e[u],c="normal"===u;if(h){var p=h.get("show");if((c?s:rt(r.states[u]&&r.states[u].ignore,s))||!rt(p,a)){var d=c?i:i&&i.states[u];d&&(d.ignore=!0);continue}i||(i=new Ru,t.setTextGuideLine(i),c||!s&&a||cb(i,!0,"normal",e.normal),t.stateProxy&&(i.stateProxy=t.stateProxy)),cb(i,!1,u,h)}}if(i){k(i.style,n),i.style.fill=null;var f=o.get("showAbove");(t.textGuideLineConfig=t.textGuideLineConfig||{}).showAbove=f||!1,i.buildPath=pb}}else i&&t.removeTextGuideLine()}function fb(t,e){e=e||"labelLine";for(var n={normal:t.getModel(e)},i=0;i<qs.length;i++){var r=qs[i];n[r]=t.getModel([r,e])}return n}function gb(t){for(var e=[],n=0;n<t.length;n++){var i=t[n];if(!i.defaultAttr.ignore){var r=i.label,o=r.getComputedTransform(),a=r.getBoundingRect(),s=!o||o[1]<1e-5&&o[2]<1e-5,l=r.style.margin||0,u=a.clone();u.applyTransform(o),u.x-=l/2,u.y-=l/2,u.width+=l,u.height+=l;var h=s?new Ju(a,o):null;e.push({label:r,labelLine:i.labelLine,rect:u,localRect:a,obb:h,priority:i.priority,defaultAttr:i.defaultAttr,layoutOption:i.computedLayoutOption,axisAligned:s,transform:o})}}return e}function yb(t,e,n,i,r,o){var a=t.length;if(!(a<2)){t.sort((function(t,n){return t.rect[e]-n.rect[e]}));for(var s,l=0,u=!1,h=0,c=0;c<a;c++){var p=t[c],d=p.rect;(s=d[e]-l)<0&&(d[e]-=s,p.label[e]-=s,u=!0),h+=Math.max(-s,0),l=d[e]+d[n]}h>0&&o&&_(-h/a,0,a);var f,g,y=t[0],v=t[a-1];return m(),f<0&&b(-f,.8),g<0&&b(g,.8),m(),x(f,g,1),x(g,f,-1),m(),f<0&&w(-f),g<0&&w(g),u}function m(){f=y.rect[e]-i,g=r-v.rect[e]-v.rect[n]}function x(t,e,n){if(t<0){var i=Math.min(e,-t);if(i>0){_(i*n,0,a);var r=i+t;r<0&&b(-r*n,1)}else b(-t*n,1)}}function _(n,i,r){0!==n&&(u=!0);for(var o=i;o<r;o++){var a=t[o];a.rect[e]+=n,a.label[e]+=n}}function b(i,r){for(var o=[],s=0,l=1;l<a;l++){var u=t[l-1].rect,h=Math.max(t[l].rect[e]-u[e]-u[n],0);o.push(h),s+=h}if(s){var c=Math.min(Math.abs(i)/s,r);if(i>0)for(l=0;l<a-1;l++){_(o[l]*c,0,l+1)}else for(l=a-1;l>0;l--){_(-(o[l-1]*c),l,a)}}}function w(t){var e=t<0?-1:1;t=Math.abs(t);for(var n=Math.ceil(t/(a-1)),i=0;i<a-1;i++)if(e>0?_(n,0,i+1):_(-n,a-i-1,a),(t-=n)<=0)return}}function vb(t,e,n,i){return yb(t,"y","height",e,n,i)}function mb(t){var e=[];t.sort((function(t,e){return e.priority-t.priority}));var n=new sr(0,0,0,0);function i(t){if(!t.ignore){var e=t.ensureState("emphasis");null==e.ignore&&(e.ignore=!1)}t.ignore=!0}for(var r=0;r<t.length;r++){var o=t[r],a=o.axisAligned,s=o.localRect,l=o.transform,u=o.label,h=o.labelLine;n.copy(o.rect),n.width-=.1,n.height-=.1,n.x+=.05,n.y+=.05;for(var c=o.obb,p=!1,d=0;d<e.length;d++){var f=e[d];if(n.intersect(f.rect)){if(a&&f.axisAligned){p=!0;break}if(f.obb||(f.obb=new Ju(f.localRect,f.transform)),c||(c=new Ju(s,l)),c.intersect(f.obb)){p=!0;break}}}p?(i(u),h&&i(h)):(u.attr("ignore",o.defaultAttr.ignore),h&&h.attr("ignore",o.defaultAttr.labelGuideIgnore),e.push(o))}}function xb(t){if(t){for(var e=[],n=0;n<t.length;n++)e.push(t[n].slice());return e}}function _b(t,e){var n=t.label,i=e&&e.getTextGuideLine();return{dataIndex:t.dataIndex,dataType:t.dataType,seriesIndex:t.seriesModel.seriesIndex,text:t.label.style.text,rect:t.hostRect,labelRect:t.rect,align:n.style.align,verticalAlign:n.style.verticalAlign,labelLinePoints:xb(i&&i.shape.points)}}var bb=["align","verticalAlign","width","height","fontSize"],wb=new qi,Sb=So(),Mb=So();function Ib(t,e,n){for(var i=0;i<n.length;i++){var r=n[i];null!=e[r]&&(t[r]=e[r])}}var Tb=["x","y","rotation"],Cb=function(){function t(){this._labelList=[],this._chartViewList=[]}return t.prototype.clearLabels=function(){this._labelList=[],this._chartViewList=[]},t.prototype._addLabel=function(t,e,n,i,r){var o=i.style,a=i.__hostTarget.textConfig||{},s=i.getComputedTransform(),l=i.getBoundingRect().plain();sr.applyTransform(l,l,s),s?wb.setLocalTransform(s):(wb.x=wb.y=wb.rotation=wb.originX=wb.originY=0,wb.scaleX=wb.scaleY=1);var u,h=i.__hostTarget;if(h){u=h.getBoundingRect().plain();var c=h.getComputedTransform();sr.applyTransform(u,u,c)}var p=u&&h.getTextGuideLine();this._labelList.push({label:i,labelLine:p,seriesModel:n,dataIndex:t,dataType:e,layoutOption:r,computedLayoutOption:null,rect:l,hostRect:u,priority:u?u.width*u.height:0,defaultAttr:{ignore:i.ignore,labelGuideIgnore:p&&p.ignore,x:wb.x,y:wb.y,scaleX:wb.scaleX,scaleY:wb.scaleY,rotation:wb.rotation,style:{x:o.x,y:o.y,align:o.align,verticalAlign:o.verticalAlign,width:o.width,height:o.height,fontSize:o.fontSize},cursor:i.cursor,attachedPos:a.position,attachedRot:a.rotation}})},t.prototype.addLabelsOfSeries=function(t){var e=this;this._chartViewList.push(t);var n=t.__model,i=n.get("labelLayout");(U(i)||G(i).length)&&t.group.traverse((function(t){if(t.ignore)return!0;var r=t.getTextContent(),o=Hs(t);r&&!r.disableLabelLayout&&e._addLabel(o.dataIndex,o.dataType,n,r,i)}))},t.prototype.updateLayoutConfig=function(t){var e=t.getWidth(),n=t.getHeight();function i(t,e){return function(){ab(t,e)}}for(var r=0;r<this._labelList.length;r++){var o=this._labelList[r],a=o.label,s=a.__hostTarget,l=o.defaultAttr,u=void 0;u=(u=U(o.layoutOption)?o.layoutOption(_b(o,s)):o.layoutOption)||{},o.computedLayoutOption=u;var h=Math.PI/180;s&&s.setTextConfig({local:!1,position:null!=u.x||null!=u.y?null:l.attachedPos,rotation:null!=u.rotate?u.rotate*h:l.attachedRot,offset:[u.dx||0,u.dy||0]});var c=!1;if(null!=u.x?(a.x=Er(u.x,e),a.setStyle("x",0),c=!0):(a.x=l.x,a.setStyle("x",l.style.x)),null!=u.y?(a.y=Er(u.y,n),a.setStyle("y",0),c=!0):(a.y=l.y,a.setStyle("y",l.style.y)),u.labelLinePoints){var p=s.getTextGuideLine();p&&(p.setShape({points:u.labelLinePoints}),c=!1)}Sb(a).needsUpdateLabelLine=c,a.rotation=null!=u.rotate?u.rotate*h:l.rotation,a.scaleX=l.scaleX,a.scaleY=l.scaleY;for(var d=0;d<bb.length;d++){var f=bb[d];a.setStyle(f,null!=u[f]?u[f]:l.style[f])}if(u.draggable){if(a.draggable=!0,a.cursor="move",s){var g=o.seriesModel;if(null!=o.dataIndex)g=o.seriesModel.getData(o.dataType).getItemModel(o.dataIndex);a.on("drag",i(s,g.getModel("labelLine")))}}else a.off("drag"),a.cursor=l.cursor}},t.prototype.layout=function(t){var e,n=t.getWidth(),i=t.getHeight(),r=gb(this._labelList),o=B(r,(function(t){return"shiftX"===t.layoutOption.moveOverlap})),a=B(r,(function(t){return"shiftY"===t.layoutOption.moveOverlap}));yb(o,"x","width",0,n,e),vb(a,0,i),mb(B(r,(function(t){return t.layoutOption.hideOverlap})))},t.prototype.processLabelsOverall=function(){var t=this;E(this._chartViewList,(function(e){var n=e.__model,i=e.ignoreLabelLineUpdate,r=n.isAnimationEnabled();e.group.traverse((function(e){if(e.ignore&&!e.forceLabelAnimation)return!0;var o=!i,a=e.getTextContent();!o&&a&&(o=Sb(a).needsUpdateLabelLine),o&&t._updateLabelLine(e,n),r&&t._animateLabels(e,n)}))}))},t.prototype._updateLabelLine=function(t,e){var n=t.getTextContent(),i=Hs(t),r=i.dataIndex;if(n&&null!=r){var o=e.getData(i.dataType),a=o.getItemModel(r),s={},l=o.getItemVisual(r,"style"),u=o.getVisual("drawType");s.stroke=l[u];var h=a.getModel("labelLine");db(t,fb(a),s),ab(t,h)}},t.prototype._animateLabels=function(t,e){var n=t.getTextContent(),i=t.getTextGuideLine();if(n&&(t.forceLabelAnimation||!n.ignore&&!n.invisible&&!t.disableLabelAnimation&&!ah(t))){var r=(d=Sb(n)).oldLayout,o=Hs(t),a=o.dataIndex,s={x:n.x,y:n.y,rotation:n.rotation},l=e.getData(o.dataType);if(r){n.attr(r);var u=t.prevStates;u&&(P(u,"select")>=0&&n.attr(d.oldLayoutSelect),P(u,"emphasis")>=0&&n.attr(d.oldLayoutEmphasis)),rh(n,s,e,a)}else if(n.attr(s),!Jh(n).valueAnimation){var h=rt(n.style.opacity,1);n.style.opacity=0,oh(n,{style:{opacity:h}},e,a)}if(d.oldLayout=s,n.states.select){var c=d.oldLayoutSelect={};Ib(c,s,Tb),Ib(c,n.states.select,Tb)}if(n.states.emphasis){var p=d.oldLayoutEmphasis={};Ib(p,s,Tb),Ib(p,n.states.emphasis,Tb)}tc(n,a,l,e,e)}if(i&&!i.ignore&&!i.invisible){r=(d=Mb(i)).oldLayout;var d,f={points:i.shape.points};r?(i.attr({shape:r}),rh(i,{shape:f},e)):(i.setShape(f),i.style.strokePercent=0,oh(i,{style:{strokePercent:1}},e)),d.oldLayout=f}},t}(),Db=So();var Ab=Math.sin,kb=Math.cos,Lb=Math.PI,Pb=2*Math.PI,Ob=180/Lb,Rb=function(){function t(){}return t.prototype.reset=function(t){this._start=!0,this._d=[],this._str="",this._p=Math.pow(10,t||4)},t.prototype.moveTo=function(t,e){this._add("M",t,e)},t.prototype.lineTo=function(t,e){this._add("L",t,e)},t.prototype.bezierCurveTo=function(t,e,n,i,r,o){this._add("C",t,e,n,i,r,o)},t.prototype.quadraticCurveTo=function(t,e,n,i){this._add("Q",t,e,n,i)},t.prototype.arc=function(t,e,n,i,r,o){this.ellipse(t,e,n,n,0,i,r,o)},t.prototype.ellipse=function(t,e,n,i,r,o,a,s){var l=a-o,u=!s,h=Math.abs(l),c=En(h-Pb)||(u?l>=Pb:-l>=Pb),p=l>0?l%Pb:l%Pb+Pb,d=!1;d=!!c||!En(h)&&p>=Lb==!!u;var f=t+n*kb(o),g=e+i*Ab(o);this._start&&this._add("M",f,g);var y=Math.round(r*Ob);if(c){var v=1/this._p,m=(u?1:-1)*(Pb-v);this._add("A",n,i,y,1,+u,t+n*kb(o+m),e+i*Ab(o+m)),v>.01&&this._add("A",n,i,y,0,+u,f,g)}else{var x=t+n*kb(a),_=e+i*Ab(a);this._add("A",n,i,y,+d,+u,x,_)}},t.prototype.rect=function(t,e,n,i){this._add("M",t,e),this._add("l",n,0),this._add("l",0,i),this._add("l",-n,0),this._add("Z")},t.prototype.closePath=function(){this._d.length>0&&this._add("Z")},t.prototype._add=function(t,e,n,i,r,o,a,s,l){for(var u=[],h=this._p,c=1;c<arguments.length;c++){var p=arguments[c];if(isNaN(p))return void(this._invalid=!0);u.push(Math.round(p*h)/h)}this._d.push(t+u.join(" ")),this._start="Z"===t},t.prototype.generateStr=function(){this._str=this._invalid?"":this._d.join(""),this._d=[]},t.prototype.getStr=function(){return this._str},t}(),Nb="none",Eb=Math.round;var zb=["lineCap","miterLimit","lineJoin"],Vb=z(zb,(function(t){return"stroke-"+t.toLowerCase()}));function Bb(t,e,n,i){var r=null==e.opacity?1:e.opacity;if(n instanceof _s)t("opacity",r);else{if(function(t){var e=t.fill;return null!=e&&e!==Nb}(e)){var o=Rn(e.fill);t("fill",o.color);var a=null!=e.fillOpacity?e.fillOpacity*o.opacity*r:o.opacity*r;(i||a<1)&&t("fill-opacity",a)}else t("fill",Nb);if(function(t){var e=t.stroke;return null!=e&&e!==Nb}(e)){var s=Rn(e.stroke);t("stroke",s.color);var l=e.strokeNoScale?n.getLineScale():1,u=l?(e.lineWidth||0)/l:0,h=null!=e.strokeOpacity?e.strokeOpacity*s.opacity*r:s.opacity*r,c=e.strokeFirst;if((i||1!==u)&&t("stroke-width",u),(i||c)&&t("paint-order",c?"stroke":"fill"),(i||h<1)&&t("stroke-opacity",h),e.lineDash){var p=Vy(n),d=p[0],f=p[1];d&&(f=Eb(f||0),t("stroke-dasharray",d.join(",")),(f||i)&&t("stroke-dashoffset",f))}else i&&t("stroke-dasharray",Nb);for(var g=0;g<zb.length;g++){var y=zb[g];if(i||e[y]!==ps[y]){var v=e[y]||ps[y];v&&t(Vb[g],v)}}}else i&&t("stroke",Nb)}}var Fb="http://www.w3.org/2000/svg",Gb="http://www.w3.org/1999/xlink";function Wb(t){return document.createElementNS(Fb,t)}function Hb(t,e,n,i,r){return{tag:t,attrs:n||{},children:i,text:r,key:e}}function Yb(t,e){var n=(e=e||{}).newline?"\n":"";return function t(e){var i=e.children,r=e.tag;return function(t,e){var n=[];if(e)for(var i in e){var r=e[i],o=i;!1!==r&&(!0!==r&&null!=r&&(o+='="'+r+'"'),n.push(o))}return"<"+t+" "+n.join(" ")+">"}(r,e.attrs)+(e.text||"")+(i?""+n+z(i,(function(e){return t(e)})).join(n)+n:"")+("</"+r+">")}(t)}function Ub(t){return{zrId:t,shadowCache:{},patternCache:{},gradientCache:{},clipPathCache:{},defs:{},cssNodes:{},cssAnims:{},cssClassIdx:0,cssAnimIdx:0,shadowIdx:0,gradientIdx:0,patternIdx:0,clipPathIdx:0}}function Xb(t,e,n,i){return Hb("svg","root",{width:t,height:e,xmlns:Fb,"xmlns:xlink":Gb,version:"1.1",baseProfile:"full",viewBox:!!i&&"0 0 "+t+" "+e},n)}var Zb={cubicIn:"0.32,0,0.67,0",cubicOut:"0.33,1,0.68,1",cubicInOut:"0.65,0,0.35,1",quadraticIn:"0.11,0,0.5,0",quadraticOut:"0.5,1,0.89,1",quadraticInOut:"0.45,0,0.55,1",quarticIn:"0.5,0,0.75,0",quarticOut:"0.25,1,0.5,1",quarticInOut:"0.76,0,0.24,1",quinticIn:"0.64,0,0.78,0",quinticOut:"0.22,1,0.36,1",quinticInOut:"0.83,0,0.17,1",sinusoidalIn:"0.12,0,0.39,0",sinusoidalOut:"0.61,1,0.88,1",sinusoidalInOut:"0.37,0,0.63,1",exponentialIn:"0.7,0,0.84,0",exponentialOut:"0.16,1,0.3,1",exponentialInOut:"0.87,0,0.13,1",circularIn:"0.55,0,1,0.45",circularOut:"0,0.55,0.45,1",circularInOut:"0.85,0,0.15,1"},jb="transform-origin";function qb(t,e,n){var i=A({},t.shape);A(i,e),t.buildPath(n,i);var r=new Rb;return r.reset(Yn(t)),n.rebuildPath(r,1),r.generateStr(),r.getStr()}function Kb(t,e){var n=e.originX,i=e.originY;(n||i)&&(t[jb]=n+"px "+i+"px")}var $b={fill:"fill",opacity:"opacity",lineWidth:"stroke-width",lineDashOffset:"stroke-dashoffset"};function Jb(t,e){var n=e.zrId+"-ani-"+e.cssAnimIdx++;return e.cssAnims[n]=t,n}function Qb(t){return X(t)?Zb[t]?"cubic-bezier("+Zb[t]+")":rn(t)?t:"":""}function tw(t,e,n,i){var r=t.animators,o=r.length,a=[];if(t instanceof Yu){if(y=function(t,e,n){var i,r,o=t.shape.paths,a={};if(E(o,(function(t){var e=Ub(n.zrId);e.animation=!0,tw(t,{},e,!0);var o=e.cssAnims,s=e.cssNodes,l=G(o),u=l.length;if(u){var h=o[r=l[u-1]];for(var c in h){var p=h[c];a[c]=a[c]||{d:""},a[c].d+=p.d||""}for(var d in s){var f=s[d].animation;f.indexOf(r)>=0&&(i=f)}}})),i){e.d=!1;var s=Jb(a,n);return i.replace(r,s)}}(t,e,n))a.push(y);else if(!o)return}else if(!o)return;for(var s={},l=0;l<o;l++){var u=r[l],h=[u.getMaxTime()/1e3+"s"],c=Qb(u.getClip().easing),p=u.getDelay();c?h.push(c):h.push("linear"),p&&h.push(p/1e3+"s"),u.getLoop()&&h.push("infinite");var d=h.join(" ");s[d]=s[d]||[d,[]],s[d][1].push(u)}function f(r){var o,a=r[1],s=a.length,l={},u={},h={};function c(t,e,n){for(var i=t.getTracks(),r=t.getMaxTime(),o=0;o<i.length;o++){var a=i[o];if(a.needsAnimate()){var s=a.keyframes,l=a.propName;if(n&&(l=n(l)),l)for(var u=0;u<s.length;u++){var h=s[u],c=Math.round(h.time/r*100)+"%",p=Qb(h.easing),d=h.rawValue;(X(d)||j(d))&&(e[c]=e[c]||{},e[c][l]=h.rawValue,p&&(e[c]["animation-timing-function"]=p))}}}}for(var p=0;p<s;p++){(w=(b=a[p]).targetName)?"shape"===w&&c(b,u):!i&&c(b,l)}for(var d in l){var f={};$i(f,t),A(f,l[d]);var g=Un(f),y=l[d]["animation-timing-function"];h[d]=g?{transform:g}:{},Kb(h[d],f),y&&(h[d]["animation-timing-function"]=y)}var v=!0;for(var d in u){h[d]=h[d]||{};var m=!o;y=u[d]["animation-timing-function"];m&&(o=new qa);var x=o.len();o.reset(),h[d].d=qb(t,u[d],o);var _=o.len();if(!m&&x!==_){v=!1;break}y&&(h[d]["animation-timing-function"]=y)}if(!v)for(var d in h)delete h[d].d;if(!i)for(p=0;p<s;p++){var b,w;"style"===(w=(b=a[p]).targetName)&&c(b,h,(function(t){return $b[t]}))}var S,M=G(h),I=!0;for(p=1;p<M.length;p++){var T=M[p-1],C=M[p];if(h[T][jb]!==h[C][jb]){I=!1;break}S=h[T][jb]}if(I&&S){for(var d in h)h[d][jb]&&delete h[d][jb];e[jb]=S}if(B(M,(function(t){return G(h[t]).length>0})).length)return Jb(h,n)+" "+r[0]+" both"}for(var g in s){var y;(y=f(s[g]))&&a.push(y)}if(a.length){var v=n.zrId+"-cls-"+n.cssClassIdx++;n.cssNodes["."+v]={animation:a.join(",")},e.class=v}}var ew=Math.round;function nw(t){return t&&X(t.src)}function iw(t){return t&&U(t.toDataURL)}function rw(t,e,n,i){Bb((function(r,o){var a="fill"===r||"stroke"===r;a&&function(t){return t&&("linear"===t.type||"radial"===t.type)}(o)?function(t,e,n,i){var r,o=t[n],a={gradientUnits:o.global?"userSpaceOnUse":"objectBoundingBox"};if(Gn(o))r="linearGradient",a.x1=o.x,a.y1=o.y,a.x2=o.x2,a.y2=o.y2;else{if(!Wn(o))return void 0;r="radialGradient",a.cx=rt(o.x,.5),a.cy=rt(o.y,.5),a.r=rt(o.r,.5)}for(var s=o.colorStops,l=[],u=0,h=s.length;u<h;++u){var c=100*Vn(s[u].offset)+"%",p=Rn(s[u].color),d=p.color,f=p.opacity,g={offset:c};g["stop-color"]=d,f<1&&(g["stop-opacity"]=f),l.push(Hb("stop",u+"",g))}var y=Yb(Hb(r,"",a,l)),v=i.gradientCache,m=v[y];m||(m=i.zrId+"-g"+i.gradientIdx++,v[y]=m,a.id=m,i.defs[m]=Hb(r,m,a,l));e[n]=Hn(m)}(e,t,r,i):a&&function(t){return Fn(t)||function(t){return t&&!!t.svgElement}(t)}(o)?function(t,e,n,i){var r,o=t.style[n],a={patternUnits:"userSpaceOnUse"};if(Fn(o)){var s=o.imageWidth,l=o.imageHeight,u=void 0,h=o.image;if(X(h)?u=h:nw(h)?u=h.src:iw(h)&&(u=h.toDataURL()),"undefined"==typeof Image){var c="Image width/height must been given explictly in svg-ssr renderer.";lt(s,c),lt(l,c)}else if(null==s||null==l){var p=function(t,e){if(t){var n=t.elm,i=t.attrs.width=s||e.width,r=t.attrs.height=l||e.height;n&&(n.setAttribute("width",i),n.setAttribute("height",r))}},d=Zo(u,null,t,(function(t){p(f,t),p(r,t)}));d&&d.width&&d.height&&(s=s||d.width,l=l||d.height)}r=Hb("image","img",{href:u,width:s,height:l}),a.width=s,a.height=l}else o.svgElement&&(r=T(o.svgElement),a.width=o.svgWidth,a.height=o.svgHeight);if(!r)return;a.patternTransform=Un(o);var f=Hb("pattern","",a,[r]),g=Yb(f),y=i.patternCache,v=y[g];v||(v=i.zrId+"-p"+i.patternIdx++,y[g]=v,a.id=v,f=i.defs[v]=Hb("pattern",v,a,[r]));e[n]=Hn(v)}(n,t,r,i):t[r]=o}),e,n,!1),function(t,e,n){var i=t.style;if(function(t){return t&&(t.shadowBlur||t.shadowOffsetX||t.shadowOffsetY)}(i)){var r=function(t){var e=t.style,n=t.getGlobalScale();return[e.shadowColor,(e.shadowBlur||0).toFixed(2),(e.shadowOffsetX||0).toFixed(2),(e.shadowOffsetY||0).toFixed(2),n[0],n[1]].join(",")}(t),o=n.shadowCache,a=o[r];if(!a){var s=t.getGlobalScale(),l=s[0],u=s[1];if(!l||!u)return;var h=i.shadowOffsetX||0,c=i.shadowOffsetY||0,p=i.shadowBlur,d=Rn(i.shadowColor),f=d.opacity,g=d.color,y=p/2/l+" "+p/2/u;a=n.zrId+"-s"+n.shadowIdx++,n.defs[a]=Hb("filter",a,{id:a,x:"-100%",y:"-100%",width:"300%",height:"300%"},[Hb("feDropShadow","",{dx:h/l,dy:c/u,stdDeviation:y,"flood-color":g,"flood-opacity":f})]),o[r]=a}e.filter=Hn(a)}}(n,t,i)}function ow(t){return En(t[0]-1)&&En(t[1])&&En(t[2])&&En(t[3]-1)}function aw(t,e,n){if(e&&(!function(t){return En(t[4])&&En(t[5])}(e)||!ow(e))){var i=n?10:1e4;t.transform=ow(e)?"translate("+ew(e[4]*i)/i+" "+ew(e[5]*i)/i+")":function(t){return"matrix("+zn(t[0])+","+zn(t[1])+","+zn(t[2])+","+zn(t[3])+","+Vn(t[4])+","+Vn(t[5])+")"}(e)}}function sw(t,e,n){for(var i=t.points,r=[],o=0;o<i.length;o++)r.push(ew(i[o][0]*n)/n),r.push(ew(i[o][1]*n)/n);e.points=r.join(" ")}function lw(t){return!t.smooth}var uw,hw,cw={circle:[(uw=["cx","cy","r"],hw=z(uw,(function(t){return"string"==typeof t?[t,t]:t})),function(t,e,n){for(var i=0;i<hw.length;i++){var r=hw[i],o=t[r[0]];null!=o&&(e[r[1]]=ew(o*n)/n)}})],polyline:[sw,lw],polygon:[sw,lw]};function pw(t,e){var n=t.style,i=t.shape,r=cw[t.type],o={},a=e.animation,s="path",l=t.style.strokePercent,u=e.compress&&Yn(t)||4;if(!r||e.willUpdate||r[1]&&!r[1](i)||a&&function(t){for(var e=t.animators,n=0;n<e.length;n++)if("shape"===e[n].targetName)return!0;return!1}(t)||l<1){t.path||t.createPathProxy();var h=t.path;t.shapeChanged()&&(h.beginPath(),t.buildPath(h,t.shape),t.pathUpdated());var c=h.getVersion(),p=t,d=p.__svgPathBuilder;p.__svgPathVersion===c&&d&&l===p.__svgPathStrokePercent||(d||(d=p.__svgPathBuilder=new Rb),d.reset(u),h.rebuildPath(d,l),d.generateStr(),p.__svgPathVersion=c,p.__svgPathStrokePercent=l),o.d=d.getStr()}else{s=t.type;var f=Math.pow(10,u);r[0](i,o,f)}return aw(o,t.transform),rw(o,n,t,e),e.animation&&tw(t,o,e),Hb(s,t.id+"",o)}function dw(t,e){return t instanceof gs?pw(t,e):t instanceof _s?function(t,e){var n=t.style,i=n.image;if(i&&!X(i)&&(nw(i)?i=i.src:iw(i)&&(i=i.toDataURL())),i){var r=n.x||0,o=n.y||0,a={href:i,width:n.width,height:n.height};return r&&(a.x=r),o&&(a.y=o),aw(a,t.transform),rw(a,n,t,e),e.animation&&tw(t,a,e),Hb("image",t.id+"",a)}}(t,e):t instanceof vs?function(t,e){var n=t.style,i=n.text;if(null!=i&&(i+=""),i&&!isNaN(n.x)&&!isNaN(n.y)){var r=n.font||a,s=n.x||0,l=function(t,e,n){return"top"===n?t+=e/2:"bottom"===n&&(t-=e/2),t}(n.y||0,fr(r),n.textBaseline),u={"dominant-baseline":"central","text-anchor":Bn[n.textAlign]||n.textAlign};if(Es(n)){var h="",c=n.fontStyle,p=Rs(n.fontSize);if(!parseFloat(p))return;var d=n.fontFamily||o,f=n.fontWeight;h+="font-size:"+p+";font-family:"+d+";",c&&"normal"!==c&&(h+="font-style:"+c+";"),f&&"normal"!==f&&(h+="font-weight:"+f+";"),u.style=h}else u.style="font: "+r;return i.match(/\s/)&&(u["xml:space"]="preserve"),s&&(u.x=s),l&&(u.y=l),aw(u,t.transform),rw(u,n,t,e),e.animation&&tw(t,u,e),Hb("text",t.id+"",u,void 0,i)}}(t,e):void 0}function fw(t,e,n){var i=n.clipPathCache,r=n.defs,o=i[t.id];if(!o){var a={id:o=n.zrId+"-c"+n.clipPathIdx++};i[t.id]=o,r[o]=Hb("clipPath",o,a,[pw(t,n)])}e["clip-path"]=Hn(o)}function gw(t){return document.createTextNode(t)}function yw(t,e,n){t.insertBefore(e,n)}function vw(t,e){t.removeChild(e)}function mw(t,e){t.appendChild(e)}function xw(t){return t.parentNode}function _w(t){return t.nextSibling}function bw(t,e){t.textContent=e}var ww=Hb("","");function Sw(t){return void 0===t}function Mw(t){return void 0!==t}function Iw(t,e,n){for(var i={},r=e;r<=n;++r){var o=t[r].key;void 0!==o&&(i[o]=r)}return i}function Tw(t,e){var n=t.key===e.key;return t.tag===e.tag&&n}function Cw(t){var e,n=t.children,i=t.tag;if(Mw(i)){var r=t.elm=Wb(i);if(kw(ww,t),Y(n))for(e=0;e<n.length;++e){var o=n[e];null!=o&&mw(r,Cw(o))}else Mw(t.text)&&!q(t.text)&&mw(r,gw(t.text))}else t.elm=gw(t.text);return t.elm}function Dw(t,e,n,i,r){for(;i<=r;++i){var o=n[i];null!=o&&yw(t,Cw(o),e)}}function Aw(t,e,n,i){for(;n<=i;++n){var r=e[n];if(null!=r)if(Mw(r.tag))vw(xw(r.elm),r.elm);else vw(t,r.elm)}}function kw(t,e){var n,i=e.elm,r=t&&t.attrs||{},o=e.attrs||{};if(r!==o){for(n in o){var a=o[n];r[n]!==a&&(!0===a?i.setAttribute(n,""):!1===a?i.removeAttribute(n):120!==n.charCodeAt(0)?i.setAttribute(n,a):"xmlns:xlink"===n||"xmlns"===n?i.setAttributeNS("http://www.w3.org/2000/xmlns/",n,a):58===n.charCodeAt(3)?i.setAttributeNS("http://www.w3.org/XML/1998/namespace",n,a):58===n.charCodeAt(5)?i.setAttributeNS(Gb,n,a):i.setAttribute(n,a))}for(n in r)n in o||i.removeAttribute(n)}}function Lw(t,e){var n=e.elm=t.elm,i=t.children,r=e.children;t!==e&&(kw(t,e),Sw(e.text)?Mw(i)&&Mw(r)?i!==r&&function(t,e,n){for(var i,r,o,a=0,s=0,l=e.length-1,u=e[0],h=e[l],c=n.length-1,p=n[0],d=n[c];a<=l&&s<=c;)null==u?u=e[++a]:null==h?h=e[--l]:null==p?p=n[++s]:null==d?d=n[--c]:Tw(u,p)?(Lw(u,p),u=e[++a],p=n[++s]):Tw(h,d)?(Lw(h,d),h=e[--l],d=n[--c]):Tw(u,d)?(Lw(u,d),yw(t,u.elm,_w(h.elm)),u=e[++a],d=n[--c]):Tw(h,p)?(Lw(h,p),yw(t,h.elm,u.elm),h=e[--l],p=n[++s]):(Sw(i)&&(i=Iw(e,a,l)),Sw(r=i[p.key])||(o=e[r]).tag!==p.tag?yw(t,Cw(p),u.elm):(Lw(o,p),e[r]=void 0,yw(t,o.elm,u.elm)),p=n[++s]);(a<=l||s<=c)&&(a>l?Dw(t,null==n[c+1]?null:n[c+1].elm,n,s,c):Aw(t,e,a,l))}(n,i,r):Mw(r)?(Mw(t.text)&&bw(n,""),Dw(n,null,r,0,r.length-1)):Mw(i)?Aw(n,i,0,i.length-1):Mw(t.text)&&bw(n,""):t.text!==e.text&&(Mw(i)&&Aw(n,i,0,i.length-1),bw(n,e.text)))}var Pw=0,Ow=function(){function t(t,e,n){if(this.type="svg",this.refreshHover=Rw("refreshHover"),this.configLayer=Rw("configLayer"),this.storage=e,this._opts=n=A({},n),this.root=t,this._id="zr"+Pw++,this._oldVNode=Xb(n.width,n.height),t&&!n.ssr){var i=this._viewport=document.createElement("div");i.style.cssText="position:relative;overflow:hidden";var r=this._svgDom=this._oldVNode.elm=Wb("svg");kw(null,this._oldVNode),i.appendChild(r),t.appendChild(i)}this.resize(n.width,n.height)}return t.prototype.getType=function(){return this.type},t.prototype.getViewportRoot=function(){return this._viewport},t.prototype.getViewportRootOffset=function(){var t=this.getViewportRoot();if(t)return{offsetLeft:t.offsetLeft||0,offsetTop:t.offsetTop||0}},t.prototype.getSvgDom=function(){return this._svgDom},t.prototype.refresh=function(){if(this.root){var t=this.renderToVNode({willUpdate:!0});t.attrs.style="position:absolute;left:0;top:0;user-select:none",function(t,e){if(Tw(t,e))Lw(t,e);else{var n=t.elm,i=xw(n);Cw(e),null!==i&&(yw(i,e.elm,_w(n)),Aw(i,[t],0,0))}}(this._oldVNode,t),this._oldVNode=t}},t.prototype.renderOneToVNode=function(t){return dw(t,Ub(this._id))},t.prototype.renderToVNode=function(t){t=t||{};var e=this.storage.getDisplayList(!0),n=this._backgroundColor,i=this._width,r=this._height,o=Ub(this._id);o.animation=t.animation,o.willUpdate=t.willUpdate,o.compress=t.compress;var a=[];if(n&&"none"!==n){var s=Rn(n),l=s.color,u=s.opacity;this._bgVNode=Hb("rect","bg",{width:i,height:r,x:"0",y:"0",id:"0",fill:l,"fill-opacity":u}),a.push(this._bgVNode)}else this._bgVNode=null;var h=t.compress?null:this._mainVNode=Hb("g","main",{},[]);this._paintList(e,o,h?h.children:a),h&&a.push(h);var c=z(G(o.defs),(function(t){return o.defs[t]}));if(c.length&&a.push(Hb("defs","defs",{},c)),t.animation){var p=function(t,e,n){var i=(n=n||{}).newline?"\n":"",r=" {"+i,o=i+"}",a=z(G(t),(function(e){return e+r+z(G(t[e]),(function(n){return n+":"+t[e][n]+";"})).join(i)+o})).join(i),s=z(G(e),(function(t){return"@keyframes "+t+r+z(G(e[t]),(function(n){return n+r+z(G(e[t][n]),(function(i){var r=e[t][n][i];return"d"===i&&(r='path("'+r+'")'),i+":"+r+";"})).join(i)+o})).join(i)+o})).join(i);return a||s?["<![CDATA[",a,s,"]]>"].join(i):""}(o.cssNodes,o.cssAnims,{newline:!0});if(p){var d=Hb("style","stl",{},[],p);a.push(d)}}return Xb(i,r,a,t.useViewBox)},t.prototype.renderToString=function(t){return t=t||{},Yb(this.renderToVNode({animation:rt(t.cssAnimation,!0),willUpdate:!1,compress:!0,useViewBox:rt(t.useViewBox,!0)}),{newline:!0})},t.prototype.setBackgroundColor=function(t){this._backgroundColor=t;var e=this._bgVNode;if(e&&e.elm){var n=Rn(t),i=n.color,r=n.opacity;e.elm.setAttribute("fill",i),r<1&&e.elm.setAttribute("fill-opacity",r)}},t.prototype.getSvgRoot=function(){return this._mainVNode&&this._mainVNode.elm},t.prototype._paintList=function(t,e,n){for(var i,r,o=t.length,a=[],s=0,l=0,u=0;u<o;u++){var h=t[u];if(!h.invisible){var c=h.__clipPaths,p=c&&c.length||0,d=r&&r.length||0,f=void 0;for(f=Math.max(p-1,d-1);f>=0&&(!c||!r||c[f]!==r[f]);f--);for(var g=d-1;g>f;g--)i=a[--s-1];for(var y=f+1;y<p;y++){var v={};fw(c[y],v,e);var m=Hb("g","clip-g-"+l++,v,[]);(i?i.children:n).push(m),a[s++]=m,i=m}r=c;var x=dw(h,e);x&&(i?i.children:n).push(x)}}},t.prototype.resize=function(t,e){var n=this._opts,i=this.root,r=this._viewport;if(null!=t&&(n.width=t),null!=e&&(n.height=e),i&&r&&(r.style.display="none",t=zy(i,0,n),e=zy(i,1,n),r.style.display=""),this._width!==t||this._height!==e){if(this._width=t,this._height=e,r){var o=r.style;o.width=t+"px",o.height=e+"px"}var a=this._svgDom;a&&(a.setAttribute("width",t),a.setAttribute("height",e))}},t.prototype.getWidth=function(){return this._width},t.prototype.getHeight=function(){return this._height},t.prototype.dispose=function(){this.root&&(this.root.innerHTML=""),this._svgDom=this._viewport=this.storage=this._oldVNode=this._bgVNode=this._mainVNode=null},t.prototype.clear=function(){this._svgDom&&(this._svgDom.innerHTML=null),this._oldVNode=null},t.prototype.toDataURL=function(t){var e=encodeURIComponent(this.renderToString()),n="data:image/svg+xml;";return t?(e=Xn(e))&&n+"base64,"+e:n+"charset=UTF-8,"+e},t}();function Rw(t){return function(){0}}function Nw(t,e,n){var i=h.createCanvas(),r=e.getWidth(),o=e.getHeight(),a=i.style;return a&&(a.position="absolute",a.left="0",a.top="0",a.width=r+"px",a.height=o+"px",i.setAttribute("data-zr-dom-id",t)),i.width=r*n,i.height=o*n,i}var Ew=function(t){function e(e,n,i){var r,o=t.call(this)||this;o.motionBlur=!1,o.lastFrameAlpha=.7,o.dpr=1,o.virtual=!1,o.config={},o.incremental=!1,o.zlevel=0,o.maxRepaintRectCount=5,o.__dirty=!0,o.__firstTimePaint=!0,o.__used=!1,o.__drawIndex=0,o.__startIndex=0,o.__endIndex=0,o.__prevStartIndex=null,o.__prevEndIndex=null,i=i||Ai,"string"==typeof e?r=Nw(e,n,i):q(e)&&(e=(r=e).id),o.id=e,o.dom=r;var a=r.style;return a&&(vt(r),r.onselectstart=function(){return!1},a.padding="0",a.margin="0",a.borderWidth="0"),o.painter=n,o.dpr=i,o}return n(e,t),e.prototype.getElementCount=function(){return this.__endIndex-this.__startIndex},e.prototype.afterBrush=function(){this.__prevStartIndex=this.__startIndex,this.__prevEndIndex=this.__endIndex},e.prototype.initContext=function(){this.ctx=this.dom.getContext("2d"),this.ctx.dpr=this.dpr},e.prototype.setUnpainted=function(){this.__firstTimePaint=!0},e.prototype.createBackBuffer=function(){var t=this.dpr;this.domBack=Nw("back-"+this.id,this.painter,t),this.ctxBack=this.domBack.getContext("2d"),1!==t&&this.ctxBack.scale(t,t)},e.prototype.createRepaintRects=function(t,e,n,i){if(this.__firstTimePaint)return this.__firstTimePaint=!1,null;var r,o=[],a=this.maxRepaintRectCount,s=!1,l=new sr(0,0,0,0);function u(t){if(t.isFinite()&&!t.isZero())if(0===o.length){(e=new sr(0,0,0,0)).copy(t),o.push(e)}else{for(var e,n=!1,i=1/0,r=0,u=0;u<o.length;++u){var h=o[u];if(h.intersect(t)){var c=new sr(0,0,0,0);c.copy(h),c.union(t),o[u]=c,n=!0;break}if(s){l.copy(t),l.union(h);var p=t.width*t.height,d=h.width*h.height,f=l.width*l.height-p-d;f<i&&(i=f,r=u)}}if(s&&(o[r].union(t),n=!0),!n)(e=new sr(0,0,0,0)).copy(t),o.push(e);s||(s=o.length>=a)}}for(var h=this.__startIndex;h<this.__endIndex;++h){if(d=t[h]){var c=d.shouldBePainted(n,i,!0,!0);(f=d.__isRendered&&(1&d.__dirty||!c)?d.getPrevPaintRect():null)&&u(f);var p=c&&(1&d.__dirty||!d.__isRendered)?d.getPaintRect():null;p&&u(p)}}for(h=this.__prevStartIndex;h<this.__prevEndIndex;++h){var d,f;c=(d=e[h]).shouldBePainted(n,i,!0,!0);if(d&&(!c||!d.__zr)&&d.__isRendered)(f=d.getPrevPaintRect())&&u(f)}do{r=!1;for(h=0;h<o.length;)if(o[h].isZero())o.splice(h,1);else{for(var g=h+1;g<o.length;)o[h].intersect(o[g])?(r=!0,o[h].union(o[g]),o.splice(g,1)):g++;h++}}while(r);return this._paintRects=o,o},e.prototype.debugGetPaintRects=function(){return(this._paintRects||[]).slice()},e.prototype.resize=function(t,e){var n=this.dpr,i=this.dom,r=i.style,o=this.domBack;r&&(r.width=t+"px",r.height=e+"px"),i.width=t*n,i.height=e*n,o&&(o.width=t*n,o.height=e*n,1!==n&&this.ctxBack.scale(n,n))},e.prototype.clear=function(t,e,n){var i=this.dom,r=this.ctx,o=i.width,a=i.height;e=e||this.clearColor;var s=this.motionBlur&&!t,l=this.lastFrameAlpha,u=this.dpr,h=this;s&&(this.domBack||this.createBackBuffer(),this.ctxBack.globalCompositeOperation="copy",this.ctxBack.drawImage(i,0,0,o/u,a/u));var c=this.domBack;function p(t,n,i,o){if(r.clearRect(t,n,i,o),e&&"transparent"!==e){var a=void 0;Q(e)?(a=e.__canvasGradient||Ny(r,e,{x:0,y:0,width:i,height:o}),e.__canvasGradient=a):tt(e)&&(a=Uy(r,e,{dirty:function(){h.setUnpainted(),h.__painter.refresh()}})),r.save(),r.fillStyle=a||e,r.fillRect(t,n,i,o),r.restore()}s&&(r.save(),r.globalAlpha=l,r.drawImage(c,t,n,i,o),r.restore())}!n||s?p(0,0,o,a):n.length&&E(n,(function(t){p(t.x*u,t.y*u,t.width*u,t.height*u)}))},e}(Xt),zw=1e5,Vw=314159,Bw=.01;var Fw=function(){function t(t,e,n,i){this.type="canvas",this._zlevelList=[],this._prevDisplayList=[],this._layers={},this._layerConfig={},this._needsManuallyCompositing=!1,this.type="canvas";var r=!t.nodeName||"CANVAS"===t.nodeName.toUpperCase();this._opts=n=A({},n||{}),this.dpr=n.devicePixelRatio||Ai,this._singleCanvas=r,this.root=t,t.style&&(vt(t),t.innerHTML=""),this.storage=e;var o=this._zlevelList;this._prevDisplayList=[];var a=this._layers;if(r){var s=t,l=s.width,u=s.height;null!=n.width&&(l=n.width),null!=n.height&&(u=n.height),this.dpr=n.devicePixelRatio||1,s.width=l*this.dpr,s.height=u*this.dpr,this._width=l,this._height=u;var h=new Ew(s,this,this.dpr);h.__builtin__=!0,h.initContext(),a[314159]=h,h.zlevel=Vw,o.push(Vw),this._domRoot=t}else{this._width=zy(t,0,n),this._height=zy(t,1,n);var c=this._domRoot=function(t,e){var n=document.createElement("div");return n.style.cssText=["position:relative","width:"+t+"px","height:"+e+"px","padding:0","margin:0","border-width:0"].join(";")+";",n}(this._width,this._height);t.appendChild(c)}}return t.prototype.getType=function(){return"canvas"},t.prototype.isSingleCanvas=function(){return this._singleCanvas},t.prototype.getViewportRoot=function(){return this._domRoot},t.prototype.getViewportRootOffset=function(){var t=this.getViewportRoot();if(t)return{offsetLeft:t.offsetLeft||0,offsetTop:t.offsetTop||0}},t.prototype.refresh=function(t){var e=this.storage.getDisplayList(!0),n=this._prevDisplayList,i=this._zlevelList;this._redrawId=Math.random(),this._paintList(e,n,t,this._redrawId);for(var r=0;r<i.length;r++){var o=i[r],a=this._layers[o];if(!a.__builtin__&&a.refresh){var s=0===r?this._backgroundColor:null;a.refresh(s)}}return this._opts.useDirtyRect&&(this._prevDisplayList=e.slice()),this},t.prototype.refreshHover=function(){this._paintHoverList(this.storage.getDisplayList(!1))},t.prototype._paintHoverList=function(t){var e=t.length,n=this._hoverlayer;if(n&&n.clear(),e){for(var i,r={inHover:!0,viewWidth:this._width,viewHeight:this._height},o=0;o<e;o++){var a=t[o];a.__inHover&&(n||(n=this._hoverlayer=this.getLayer(zw)),i||(i=n.ctx).save(),tv(i,a,r,o===e-1))}i&&i.restore()}},t.prototype.getHoverLayer=function(){return this.getLayer(zw)},t.prototype.paintOne=function(t,e){Qy(t,e)},t.prototype._paintList=function(t,e,n,i){if(this._redrawId===i){n=n||!1,this._updateLayerStatus(t);var r=this._doPaintList(t,e,n),o=r.finished,a=r.needsRefreshHover;if(this._needsManuallyCompositing&&this._compositeManually(),a&&this._paintHoverList(t),o)this.eachLayer((function(t){t.afterBrush&&t.afterBrush()}));else{var s=this;ke((function(){s._paintList(t,e,n,i)}))}}},t.prototype._compositeManually=function(){var t=this.getLayer(Vw).ctx,e=this._domRoot.width,n=this._domRoot.height;t.clearRect(0,0,e,n),this.eachBuiltinLayer((function(i){i.virtual&&t.drawImage(i.dom,0,0,e,n)}))},t.prototype._doPaintList=function(t,e,n){for(var i=this,o=[],a=this._opts.useDirtyRect,s=0;s<this._zlevelList.length;s++){var l=this._zlevelList[s],u=this._layers[l];u.__builtin__&&u!==this._hoverlayer&&(u.__dirty||n)&&o.push(u)}for(var h=!0,c=!1,p=function(r){var s,l=o[r],u=l.ctx,p=a&&l.createRepaintRects(t,e,d._width,d._height),f=n?l.__startIndex:l.__drawIndex,g=!n&&l.incremental&&Date.now,y=g&&Date.now(),v=l.zlevel===d._zlevelList[0]?d._backgroundColor:null;if(l.__startIndex===l.__endIndex)l.clear(!1,v,p);else if(f===l.__startIndex){var m=t[f];m.incremental&&m.notClear&&!n||l.clear(!1,v,p)}-1===f&&(console.error("For some unknown reason. drawIndex is -1"),f=l.__startIndex);var x=function(e){var n={inHover:!1,allClipped:!1,prevEl:null,viewWidth:i._width,viewHeight:i._height};for(s=f;s<l.__endIndex;s++){var r=t[s];if(r.__inHover&&(c=!0),i._doPaintEl(r,l,a,e,n,s===l.__endIndex-1),g)if(Date.now()-y>15)break}n.prevElClipPaths&&u.restore()};if(p)if(0===p.length)s=l.__endIndex;else for(var _=d.dpr,b=0;b<p.length;++b){var w=p[b];u.save(),u.beginPath(),u.rect(w.x*_,w.y*_,w.width*_,w.height*_),u.clip(),x(w),u.restore()}else u.save(),x(),u.restore();l.__drawIndex=s,l.__drawIndex<l.__endIndex&&(h=!1)},d=this,f=0;f<o.length;f++)p(f);return r.wxa&&E(this._layers,(function(t){t&&t.ctx&&t.ctx.draw&&t.ctx.draw()})),{finished:h,needsRefreshHover:c}},t.prototype._doPaintEl=function(t,e,n,i,r,o){var a=e.ctx;if(n){var s=t.getPaintRect();(!i||s&&s.intersect(i))&&(tv(a,t,r,o),t.setPrevPaintRect(s))}else tv(a,t,r,o)},t.prototype.getLayer=function(t,e){this._singleCanvas&&!this._needsManuallyCompositing&&(t=Vw);var n=this._layers[t];return n||((n=new Ew("zr_"+t,this,this.dpr)).zlevel=t,n.__builtin__=!0,this._layerConfig[t]?C(n,this._layerConfig[t],!0):this._layerConfig[t-Bw]&&C(n,this._layerConfig[t-Bw],!0),e&&(n.virtual=e),this.insertLayer(t,n),n.initContext()),n},t.prototype.insertLayer=function(t,e){var n=this._layers,i=this._zlevelList,r=i.length,o=this._domRoot,a=null,s=-1;if(!n[t]&&function(t){return!!t&&(!!t.__builtin__||"function"==typeof t.resize&&"function"==typeof t.refresh)}(e)){if(r>0&&t>i[0]){for(s=0;s<r-1&&!(i[s]<t&&i[s+1]>t);s++);a=n[i[s]]}if(i.splice(s+1,0,t),n[t]=e,!e.virtual)if(a){var l=a.dom;l.nextSibling?o.insertBefore(e.dom,l.nextSibling):o.appendChild(e.dom)}else o.firstChild?o.insertBefore(e.dom,o.firstChild):o.appendChild(e.dom);e.__painter=this}},t.prototype.eachLayer=function(t,e){for(var n=this._zlevelList,i=0;i<n.length;i++){var r=n[i];t.call(e,this._layers[r],r)}},t.prototype.eachBuiltinLayer=function(t,e){for(var n=this._zlevelList,i=0;i<n.length;i++){var r=n[i],o=this._layers[r];o.__builtin__&&t.call(e,o,r)}},t.prototype.eachOtherLayer=function(t,e){for(var n=this._zlevelList,i=0;i<n.length;i++){var r=n[i],o=this._layers[r];o.__builtin__||t.call(e,o,r)}},t.prototype.getLayers=function(){return this._layers},t.prototype._updateLayerStatus=function(t){function e(t){o&&(o.__endIndex!==t&&(o.__dirty=!0),o.__endIndex=t)}if(this.eachBuiltinLayer((function(t,e){t.__dirty=t.__used=!1})),this._singleCanvas)for(var n=1;n<t.length;n++){if((s=t[n]).zlevel!==t[n-1].zlevel||s.incremental){this._needsManuallyCompositing=!0;break}}var i,r,o=null,a=0;for(r=0;r<t.length;r++){var s,l=(s=t[r]).zlevel,u=void 0;i!==l&&(i=l,a=0),s.incremental?((u=this.getLayer(l+.001,this._needsManuallyCompositing)).incremental=!0,a=1):u=this.getLayer(l+(a>0?Bw:0),this._needsManuallyCompositing),u.__builtin__||I("ZLevel "+l+" has been used by unkown layer "+u.id),u!==o&&(u.__used=!0,u.__startIndex!==r&&(u.__dirty=!0),u.__startIndex=r,u.incremental?u.__drawIndex=-1:u.__drawIndex=r,e(r),o=u),1&s.__dirty&&!s.__inHover&&(u.__dirty=!0,u.incremental&&u.__drawIndex<0&&(u.__drawIndex=r))}e(r),this.eachBuiltinLayer((function(t,e){!t.__used&&t.getElementCount()>0&&(t.__dirty=!0,t.__startIndex=t.__endIndex=t.__drawIndex=0),t.__dirty&&t.__drawIndex<0&&(t.__drawIndex=t.__startIndex)}))},t.prototype.clear=function(){return this.eachBuiltinLayer(this._clearLayer),this},t.prototype._clearLayer=function(t){t.clear()},t.prototype.setBackgroundColor=function(t){this._backgroundColor=t,E(this._layers,(function(t){t.setUnpainted()}))},t.prototype.configLayer=function(t,e){if(e){var n=this._layerConfig;n[t]?C(n[t],e,!0):n[t]=e;for(var i=0;i<this._zlevelList.length;i++){var r=this._zlevelList[i];if(r===t||r===t+Bw)C(this._layers[r],n[t],!0)}}},t.prototype.delLayer=function(t){var e=this._layers,n=this._zlevelList,i=e[t];i&&(i.dom.parentNode.removeChild(i.dom),delete e[t],n.splice(P(n,t),1))},t.prototype.resize=function(t,e){if(this._domRoot.style){var n=this._domRoot;n.style.display="none";var i=this._opts,r=this.root;if(null!=t&&(i.width=t),null!=e&&(i.height=e),t=zy(r,0,i),e=zy(r,1,i),n.style.display="",this._width!==t||e!==this._height){for(var o in n.style.width=t+"px",n.style.height=e+"px",this._layers)this._layers.hasOwnProperty(o)&&this._layers[o].resize(t,e);this.refresh(!0)}this._width=t,this._height=e}else{if(null==t||null==e)return;this._width=t,this._height=e,this.getLayer(Vw).resize(t,e)}return this},t.prototype.clearLayer=function(t){var e=this._layers[t];e&&e.clear()},t.prototype.dispose=function(){this.root.innerHTML="",this.root=this.storage=this._domRoot=this._layers=null},t.prototype.getRenderedCanvas=function(t){if(t=t||{},this._singleCanvas&&!this._compositeManually)return this._layers[314159].dom;var e=new Ew("image",this,t.pixelRatio||this.dpr);e.initContext(),e.clear(!1,t.backgroundColor||this._backgroundColor);var n=e.ctx;if(t.pixelRatio<=this.dpr){this.refresh();var i=e.dom.width,r=e.dom.height;this.eachLayer((function(t){t.__builtin__?n.drawImage(t.dom,0,0,i,r):t.renderToCanvas&&(n.save(),t.renderToCanvas(n),n.restore())}))}else for(var o={inHover:!1,viewWidth:this._width,viewHeight:this._height},a=this.storage.getDisplayList(!0),s=0,l=a.length;s<l;s++){var u=a[s];tv(n,u,o,s===l-1)}return e.dom},t.prototype.getWidth=function(){return this._width},t.prototype.getHeight=function(){return this._height},t}();var Gw=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n}return n(e,t),e.prototype.getInitialData=function(t){return rx(null,this,{useEncodeDefaulter:!0})},e.prototype.getLegendIcon=function(t){var e=new Cr,n=Ly("line",0,t.itemHeight/2,t.itemWidth,0,t.lineStyle.stroke,!1);e.add(n),n.setStyle(t.lineStyle);var i=this.getData().getVisual("symbol"),r=this.getData().getVisual("symbolRotate"),o="none"===i?"circle":i,a=.8*t.itemHeight,s=Ly(o,(t.itemWidth-a)/2,(t.itemHeight-a)/2,a,a,t.itemStyle.fill);e.add(s),s.setStyle(t.itemStyle);var l="inherit"===t.iconRotate?r:t.iconRotate||0;return s.rotation=l*Math.PI/180,s.setOrigin([t.itemWidth/2,t.itemHeight/2]),o.indexOf("empty")>-1&&(s.style.stroke=s.style.fill,s.style.fill="#fff",s.style.lineWidth=2),e},e.type="series.line",e.dependencies=["grid","polar"],e.defaultOption={z:3,coordinateSystem:"cartesian2d",legendHoverLink:!0,clip:!0,label:{position:"top"},endLabel:{show:!1,valueAnimation:!0,distance:8},lineStyle:{width:2,type:"solid"},emphasis:{scale:!0},step:!1,smooth:!1,smoothMonotone:null,symbol:"emptyCircle",symbolSize:4,symbolRotate:null,showSymbol:!0,showAllSymbol:"auto",connectNulls:!1,sampling:"none",animationEasing:"linear",progressive:0,hoverLayerThreshold:1/0,universalTransition:{divideShape:"clone"},triggerLineEvent:!1},e}(sg);function Ww(t,e){var n=t.mapDimensionsAll("defaultedLabel"),i=n.length;if(1===i){var r=af(t,e,n[0]);return null!=r?r+"":null}if(i){for(var o=[],a=0;a<n.length;a++)o.push(af(t,e,n[a]));return o.join(" ")}}function Hw(t,e){var n=t.mapDimensionsAll("defaultedLabel");if(!Y(e))return e+"";for(var i=[],r=0;r<n.length;r++){var o=t.getDimensionIndex(n[r]);o>=0&&i.push(e[o])}return i.join(" ")}var Yw=function(t){function e(e,n,i,r){var o=t.call(this)||this;return o.updateData(e,n,i,r),o}return n(e,t),e.prototype._createSymbol=function(t,e,n,i,r){this.removeAll();var o=Ly(t,-1,-1,2,2,null,r);o.attr({z2:100,culling:!0,scaleX:i[0]/2,scaleY:i[1]/2}),o.drift=Uw,this._symbolType=t,this.add(o)},e.prototype.stopSymbolAnimation=function(t){this.childAt(0).stopAnimation(null,t)},e.prototype.getSymbolType=function(){return this._symbolType},e.prototype.getSymbolPath=function(){return this.childAt(0)},e.prototype.highlight=function(){_l(this.childAt(0))},e.prototype.downplay=function(){bl(this.childAt(0))},e.prototype.setZ=function(t,e){var n=this.childAt(0);n.zlevel=t,n.z=e},e.prototype.setDraggable=function(t,e){var n=this.childAt(0);n.draggable=t,n.cursor=!e&&t?"move":n.cursor},e.prototype.updateData=function(t,n,i,r){this.silent=!1;var o=t.getItemVisual(n,"symbol")||"circle",a=t.hostModel,s=e.getSymbolSize(t,n),l=o!==this._symbolType,u=r&&r.disableAnimation;if(l){var h=t.getItemVisual(n,"symbolKeepAspect");this._createSymbol(o,t,n,s,h)}else{(p=this.childAt(0)).silent=!1;var c={scaleX:s[0]/2,scaleY:s[1]/2};u?p.attr(c):rh(p,c,a,n),hh(p)}if(this._updateCommon(t,n,s,i,r),l){var p=this.childAt(0);if(!u){c={scaleX:this._sizeX,scaleY:this._sizeY,style:{opacity:p.style.opacity}};p.scaleX=p.scaleY=0,p.style.opacity=0,oh(p,c,a,n)}}u&&this.childAt(0).stopAnimation("leave")},e.prototype._updateCommon=function(t,e,n,i,r){var o,a,s,l,u,h,c,p,d,f=this.childAt(0),g=t.hostModel;if(i&&(o=i.emphasisItemStyle,a=i.blurItemStyle,s=i.selectItemStyle,l=i.focus,u=i.blurScope,c=i.labelStatesModels,p=i.hoverScale,d=i.cursorStyle,h=i.emphasisDisabled),!i||t.hasItemOption){var y=i&&i.itemModel?i.itemModel:t.getItemModel(e),v=y.getModel("emphasis");o=v.getModel("itemStyle").getItemStyle(),s=y.getModel(["select","itemStyle"]).getItemStyle(),a=y.getModel(["blur","itemStyle"]).getItemStyle(),l=v.get("focus"),u=v.get("blurScope"),h=v.get("disabled"),c=Yh(y),p=v.getShallow("scale"),d=y.getShallow("cursor")}var m=t.getItemVisual(e,"symbolRotate");f.attr("rotation",(m||0)*Math.PI/180||0);var x=Oy(t.getItemVisual(e,"symbolOffset"),n);x&&(f.x=x[0],f.y=x[1]),d&&f.attr("cursor",d);var _=t.getItemVisual(e,"style"),b=_.fill;if(f instanceof _s){var w=f.style;f.useStyle(A({image:w.image,x:w.x,y:w.y,width:w.width,height:w.height},_))}else f.__isEmptyBrush?f.useStyle(A({},_)):f.useStyle(_),f.style.decal=null,f.setColor(b,r&&r.symbolInnerColor),f.style.strokeNoScale=!0;var S=t.getItemVisual(e,"liftZ"),M=this._z2;null!=S?null==M&&(this._z2=f.z2,f.z2+=S):null!=M&&(f.z2=M,this._z2=null);var I=r&&r.useNameLabel;Hh(f,c,{labelFetcher:g,labelDataIndex:e,defaultText:function(e){return I?t.getName(e):Ww(t,e)},inheritColor:b,defaultOpacity:_.opacity}),this._sizeX=n[0]/2,this._sizeY=n[1]/2;var T=f.ensureState("emphasis");if(T.style=o,f.ensureState("select").style=s,f.ensureState("blur").style=a,p){var C=Math.max(j(p)?p:1.1,3/this._sizeY);T.scaleX=this._sizeX*C,T.scaleY=this._sizeY*C}this.setSymbolScale(1),Rl(this,l,u,h)},e.prototype.setSymbolScale=function(t){this.scaleX=this.scaleY=t},e.prototype.fadeOut=function(t,e,n){var i=this.childAt(0),r=Hs(this).dataIndex,o=n&&n.animation;if(this.silent=i.silent=!0,n&&n.fadeLabel){var a=i.getTextContent();a&&sh(a,{style:{opacity:0}},e,{dataIndex:r,removeOpt:o,cb:function(){i.removeTextContent()}})}else i.removeTextContent();sh(i,{style:{opacity:0},scaleX:0,scaleY:0},e,{dataIndex:r,cb:t,removeOpt:o})},e.getSymbolSize=function(t,e){return Py(t.getItemVisual(e,"symbolSize"))},e}(Cr);function Uw(t,e){this.parent.drift(t,e)}function Xw(t,e,n,i){return e&&!isNaN(e[0])&&!isNaN(e[1])&&!(i.isIgnore&&i.isIgnore(n))&&!(i.clipShape&&!i.clipShape.contain(e[0],e[1]))&&"none"!==t.getItemVisual(n,"symbol")}function Zw(t){return null==t||q(t)||(t={isIgnore:t}),t||{}}function jw(t){var e=t.hostModel,n=e.getModel("emphasis");return{emphasisItemStyle:n.getModel("itemStyle").getItemStyle(),blurItemStyle:e.getModel(["blur","itemStyle"]).getItemStyle(),selectItemStyle:e.getModel(["select","itemStyle"]).getItemStyle(),focus:n.get("focus"),blurScope:n.get("blurScope"),emphasisDisabled:n.get("disabled"),hoverScale:n.get("scale"),labelStatesModels:Yh(e),cursorStyle:e.get("cursor")}}var qw=function(){function t(t){this.group=new Cr,this._SymbolCtor=t||Yw}return t.prototype.updateData=function(t,e){this._progressiveEls=null,e=Zw(e);var n=this.group,i=t.hostModel,r=this._data,o=this._SymbolCtor,a=e.disableAnimation,s=jw(t),l={disableAnimation:a},u=e.getSymbolPoint||function(e){return t.getItemLayout(e)};r||n.removeAll(),t.diff(r).add((function(i){var r=u(i);if(Xw(t,r,i,e)){var a=new o(t,i,s,l);a.setPosition(r),t.setItemGraphicEl(i,a),n.add(a)}})).update((function(h,c){var p=r.getItemGraphicEl(c),d=u(h);if(Xw(t,d,h,e)){var f=t.getItemVisual(h,"symbol")||"circle",g=p&&p.getSymbolType&&p.getSymbolType();if(!p||g&&g!==f)n.remove(p),(p=new o(t,h,s,l)).setPosition(d);else{p.updateData(t,h,s,l);var y={x:d[0],y:d[1]};a?p.attr(y):rh(p,y,i)}n.add(p),t.setItemGraphicEl(h,p)}else n.remove(p)})).remove((function(t){var e=r.getItemGraphicEl(t);e&&e.fadeOut((function(){n.remove(e)}),i)})).execute(),this._getSymbolPoint=u,this._data=t},t.prototype.updateLayout=function(){var t=this,e=this._data;e&&e.eachItemGraphicEl((function(e,n){var i=t._getSymbolPoint(n);e.setPosition(i),e.markRedraw()}))},t.prototype.incrementalPrepareUpdate=function(t){this._seriesScope=jw(t),this._data=null,this.group.removeAll()},t.prototype.incrementalUpdate=function(t,e,n){function i(t){t.isGroup||(t.incremental=!0,t.ensureState("emphasis").hoverLayer=!0)}this._progressiveEls=[],n=Zw(n);for(var r=t.start;r<t.end;r++){var o=e.getItemLayout(r);if(Xw(e,o,r,n)){var a=new this._SymbolCtor(e,r,this._seriesScope);a.traverse(i),a.setPosition(o),this.group.add(a),e.setItemGraphicEl(r,a),this._progressiveEls.push(a)}}},t.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},t.prototype.remove=function(t){var e=this.group,n=this._data;n&&t?n.eachItemGraphicEl((function(t){t.fadeOut((function(){e.remove(t)}),n.hostModel)})):e.removeAll()},t}();function Kw(t,e,n){var i=t.getBaseAxis(),r=t.getOtherAxis(i),o=function(t,e){var n=0,i=t.scale.getExtent();"start"===e?n=i[0]:"end"===e?n=i[1]:j(e)&&!isNaN(e)?n=e:i[0]>0?n=i[0]:i[1]<0&&(n=i[1]);return n}(r,n),a=i.dim,s=r.dim,l=e.mapDimension(s),u=e.mapDimension(a),h="x"===s||"radius"===s?1:0,c=z(t.dimensions,(function(t){return e.mapDimension(t)})),p=!1,d=e.getCalculationInfo("stackResultDimension");return nx(e,c[0])&&(p=!0,c[0]=d),nx(e,c[1])&&(p=!0,c[1]=d),{dataDimsForPoint:c,valueStart:o,valueAxisDim:s,baseAxisDim:a,stacked:!!p,valueDim:l,baseDim:u,baseDataOffset:h,stackedOverDimension:e.getCalculationInfo("stackedOverDimension")}}function $w(t,e,n,i){var r=NaN;t.stacked&&(r=n.get(n.getCalculationInfo("stackedOverDimension"),i)),isNaN(r)&&(r=t.valueStart);var o=t.baseDataOffset,a=[];return a[o]=n.get(t.baseDim,i),a[1-o]=r,e.dataToPoint(a)}var Jw=Math.min,Qw=Math.max;function tS(t,e){return isNaN(t)||isNaN(e)}function eS(t,e,n,i,r,o,a,s,l){for(var u,h,c,p,d,f,g=n,y=0;y<i;y++){var v=e[2*g],m=e[2*g+1];if(g>=r||g<0)break;if(tS(v,m)){if(l){g+=o;continue}break}if(g===n)t[o>0?"moveTo":"lineTo"](v,m),c=v,p=m;else{var x=v-u,_=m-h;if(x*x+_*_<.5){g+=o;continue}if(a>0){for(var b=g+o,w=e[2*b],S=e[2*b+1];w===v&&S===m&&y<i;)y++,g+=o,w=e[2*(b+=o)],S=e[2*b+1],x=(v=e[2*g])-u,_=(m=e[2*g+1])-h;var M=y+1;if(l)for(;tS(w,S)&&M<i;)M++,w=e[2*(b+=o)],S=e[2*b+1];var I=.5,T=0,C=0,D=void 0,A=void 0;if(M>=i||tS(w,S))d=v,f=m;else{T=w-u,C=S-h;var k=v-u,L=w-v,P=m-h,O=S-m,R=void 0,N=void 0;if("x"===s){var E=T>0?1:-1;d=v-E*(R=Math.abs(k))*a,f=m,D=v+E*(N=Math.abs(L))*a,A=m}else if("y"===s){var z=C>0?1:-1;d=v,f=m-z*(R=Math.abs(P))*a,D=v,A=m+z*(N=Math.abs(O))*a}else R=Math.sqrt(k*k+P*P),d=v-T*a*(1-(I=(N=Math.sqrt(L*L+O*O))/(N+R))),f=m-C*a*(1-I),A=m+C*a*I,D=Jw(D=v+T*a*I,Qw(w,v)),A=Jw(A,Qw(S,m)),D=Qw(D,Jw(w,v)),f=m-(C=(A=Qw(A,Jw(S,m)))-m)*R/N,d=Jw(d=v-(T=D-v)*R/N,Qw(u,v)),f=Jw(f,Qw(h,m)),D=v+(T=v-(d=Qw(d,Jw(u,v))))*N/R,A=m+(C=m-(f=Qw(f,Jw(h,m))))*N/R}t.bezierCurveTo(c,p,d,f,v,m),c=D,p=A}else t.lineTo(v,m)}u=v,h=m,g+=o}return y}var nS=function(){this.smooth=0,this.smoothConstraint=!0},iS=function(t){function e(e){var n=t.call(this,e)||this;return n.type="ec-polyline",n}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new nS},e.prototype.buildPath=function(t,e){var n=e.points,i=0,r=n.length/2;if(e.connectNulls){for(;r>0&&tS(n[2*r-2],n[2*r-1]);r--);for(;i<r&&tS(n[2*i],n[2*i+1]);i++);}for(;i<r;)i+=eS(t,n,i,r,r,1,e.smooth,e.smoothMonotone,e.connectNulls)+1},e.prototype.getPointOn=function(t,e){this.path||(this.createPathProxy(),this.buildPath(this.path,this.shape));for(var n,i,r=this.path.data,o=qa.CMD,a="x"===e,s=[],l=0;l<r.length;){var u=void 0,h=void 0,c=void 0,p=void 0,d=void 0,f=void 0,g=void 0;switch(r[l++]){case o.M:n=r[l++],i=r[l++];break;case o.L:if(u=r[l++],h=r[l++],(g=a?(t-n)/(u-n):(t-i)/(h-i))<=1&&g>=0){var y=a?(h-i)*g+i:(u-n)*g+n;return a?[t,y]:[y,t]}n=u,i=h;break;case o.C:u=r[l++],h=r[l++],c=r[l++],p=r[l++],d=r[l++],f=r[l++];var v=a?Ue(n,u,c,d,t,s):Ue(i,h,p,f,t,s);if(v>0)for(var m=0;m<v;m++){var x=s[m];if(x<=1&&x>=0){y=a?He(i,h,p,f,x):He(n,u,c,d,x);return a?[t,y]:[y,t]}}n=d,i=f}}},e}(gs),rS=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e}(nS),oS=function(t){function e(e){var n=t.call(this,e)||this;return n.type="ec-polygon",n}return n(e,t),e.prototype.getDefaultShape=function(){return new rS},e.prototype.buildPath=function(t,e){var n=e.points,i=e.stackedOnPoints,r=0,o=n.length/2,a=e.smoothMonotone;if(e.connectNulls){for(;o>0&&tS(n[2*o-2],n[2*o-1]);o--);for(;r<o&&tS(n[2*r],n[2*r+1]);r++);}for(;r<o;){var s=eS(t,n,r,o,o,1,e.smooth,a,e.connectNulls);eS(t,i,r+s-1,s,o,-1,e.stackedOnSmooth,a,e.connectNulls),r+=s+1,t.closePath()}},e}(gs);function aS(t,e,n,i,r){var o=t.getArea(),a=o.x,s=o.y,l=o.width,u=o.height,h=n.get(["lineStyle","width"])||2;a-=h/2,s-=h/2,l+=h,u+=h,a=Math.floor(a),l=Math.round(l);var c=new Cs({shape:{x:a,y:s,width:l,height:u}});if(e){var p=t.getBaseAxis(),d=p.isHorizontal(),f=p.inverse;d?(f&&(c.shape.x+=l),c.shape.width=0):(f||(c.shape.y+=u),c.shape.height=0);var g=U(r)?function(t){r(t,c)}:null;oh(c,{shape:{width:l,height:u,x:a,y:s}},n,null,i,g)}return c}function sS(t,e,n){var i=t.getArea(),r=zr(i.r0,1),o=zr(i.r,1),a=new Cu({shape:{cx:zr(t.cx,1),cy:zr(t.cy,1),r0:r,r:o,startAngle:i.startAngle,endAngle:i.endAngle,clockwise:i.clockwise}});e&&("angle"===t.getBaseAxis().dim?a.shape.endAngle=i.startAngle:a.shape.r=r,oh(a,{shape:{endAngle:i.endAngle,r:o}},n));return a}function lS(t,e,n,i,r){return t?"polar"===t.type?sS(t,e,n):"cartesian2d"===t.type?aS(t,e,n,i,r):null:null}function uS(t,e){return t.type===e}function hS(t,e){if(t.length===e.length){for(var n=0;n<t.length;n++)if(t[n]!==e[n])return;return!0}}function cS(t){for(var e=1/0,n=1/0,i=-1/0,r=-1/0,o=0;o<t.length;){var a=t[o++],s=t[o++];isNaN(a)||(e=Math.min(a,e),i=Math.max(a,i)),isNaN(s)||(n=Math.min(s,n),r=Math.max(s,r))}return[[e,n],[i,r]]}function pS(t,e){var n=cS(t),i=n[0],r=n[1],o=cS(e),a=o[0],s=o[1];return Math.max(Math.abs(i[0]-a[0]),Math.abs(i[1]-a[1]),Math.abs(r[0]-s[0]),Math.abs(r[1]-s[1]))}function dS(t){return j(t)?t:t?.5:0}function fS(t,e,n,i){var r=e.getBaseAxis(),o="x"===r.dim||"radius"===r.dim?0:1,a=[],s=0,l=[],u=[],h=[],c=[];if(i){for(s=0;s<t.length;s+=2)isNaN(t[s])||isNaN(t[s+1])||c.push(t[s],t[s+1]);t=c}for(s=0;s<t.length-2;s+=2)switch(h[0]=t[s+2],h[1]=t[s+3],u[0]=t[s],u[1]=t[s+1],a.push(u[0],u[1]),n){case"end":l[o]=h[o],l[1-o]=u[1-o],a.push(l[0],l[1]);break;case"middle":var p=(u[o]+h[o])/2,d=[];l[o]=d[o]=p,l[1-o]=u[1-o],d[1-o]=h[1-o],a.push(l[0],l[1]),a.push(d[0],d[1]);break;default:l[o]=u[o],l[1-o]=h[1-o],a.push(l[0],l[1])}return a.push(t[s++],t[s++]),a}function gS(t,e,n){var i=t.getVisual("visualMeta");if(i&&i.length&&t.count()&&"cartesian2d"===e.type){for(var r,o,a=i.length-1;a>=0;a--){var s=t.getDimensionInfo(i[a].dimension);if("x"===(r=s&&s.coordDim)||"y"===r){o=i[a];break}}if(o){var l=e.getAxis(r),u=z(o.stops,(function(t){return{coord:l.toGlobalCoord(l.dataToCoord(t.value)),color:t.color}})),h=u.length,c=o.outerColors.slice();h&&u[0].coord>u[h-1].coord&&(u.reverse(),c.reverse());var p=function(t,e){var n,i,r=[],o=t.length;function a(t,e,n){var i=t.coord;return{coord:n,color:Tn((n-i)/(e.coord-i),[t.color,e.color])}}for(var s=0;s<o;s++){var l=t[s],u=l.coord;if(u<0)n=l;else{if(u>e){i?r.push(a(i,l,e)):n&&r.push(a(n,l,0),a(n,l,e));break}n&&(r.push(a(n,l,0)),n=null),r.push(l),i=l}}return r}(u,"x"===r?n.getWidth():n.getHeight()),d=p.length;if(!d&&h)return u[0].coord<0?c[1]?c[1]:u[h-1].color:c[0]?c[0]:u[0].color;var f=p[0].coord-10,g=p[d-1].coord+10,y=g-f;if(y<.001)return"transparent";E(p,(function(t){t.offset=(t.coord-f)/y})),p.push({offset:d?p[d-1].offset:.5,color:c[1]||"transparent"}),p.unshift({offset:d?p[0].offset:.5,color:c[0]||"transparent"});var v=new Xu(0,0,0,0,p,!0);return v[r]=f,v[r+"2"]=g,v}}}function yS(t,e,n){var i=t.get("showAllSymbol"),r="auto"===i;if(!i||r){var o=n.getAxesByScale("ordinal")[0];if(o&&(!r||!function(t,e){var n=t.getExtent(),i=Math.abs(n[1]-n[0])/t.scale.count();isNaN(i)&&(i=0);for(var r=e.count(),o=Math.max(1,Math.round(r/5)),a=0;a<r;a+=o)if(1.5*Yw.getSymbolSize(e,a)[t.isHorizontal()?1:0]>i)return!1;return!0}(o,e))){var a=e.mapDimension(o.dim),s={};return E(o.getViewLabels(),(function(t){var e=o.scale.getRawOrdinalNumber(t.tickValue);s[e]=1})),function(t){return!s.hasOwnProperty(e.get(a,t))}}}}function vS(t,e){return[t[2*e],t[2*e+1]]}function mS(t){if(t.get(["endLabel","show"]))return!0;for(var e=0;e<qs.length;e++)if(t.get([qs[e],"endLabel","show"]))return!0;return!1}function xS(t,e,n,i){if(uS(e,"cartesian2d")){var r=i.getModel("endLabel"),o=r.get("valueAnimation"),a=i.getData(),s={lastFrameIndex:0},l=mS(i)?function(n,i){t._endLabelOnDuring(n,i,a,s,o,r,e)}:null,u=e.getBaseAxis().isHorizontal(),h=aS(e,n,i,(function(){var e=t._endLabel;e&&n&&null!=s.originalX&&e.attr({x:s.originalX,y:s.originalY})}),l);if(!i.get("clip",!0)){var c=h.shape,p=Math.max(c.width,c.height);u?(c.y-=p,c.height+=2*p):(c.x-=p,c.width+=2*p)}return l&&l(1,h),h}return sS(e,n,i)}var _S=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.init=function(){var t=new Cr,e=new qw;this.group.add(e.group),this._symbolDraw=e,this._lineGroup=t},e.prototype.render=function(t,e,n){var i=this,r=t.coordinateSystem,o=this.group,a=t.getData(),s=t.getModel("lineStyle"),l=t.getModel("areaStyle"),u=a.getLayout("points")||[],h="polar"===r.type,c=this._coordSys,p=this._symbolDraw,d=this._polyline,f=this._polygon,g=this._lineGroup,y=t.get("animation"),v=!l.isEmpty(),m=l.get("origin"),x=Kw(r,a,m),_=v&&function(t,e,n){if(!n.valueDim)return[];for(var i=e.count(),r=Sx(2*i),o=0;o<i;o++){var a=$w(n,t,e,o);r[2*o]=a[0],r[2*o+1]=a[1]}return r}(r,a,x),b=t.get("showSymbol"),w=t.get("connectNulls"),S=b&&!h&&yS(t,a,r),M=this._data;M&&M.eachItemGraphicEl((function(t,e){t.__temp&&(o.remove(t),M.setItemGraphicEl(e,null))})),b||p.remove(),o.add(g);var I,T=!h&&t.get("step");r&&r.getArea&&t.get("clip",!0)&&(null!=(I=r.getArea()).width?(I.x-=.1,I.y-=.1,I.width+=.2,I.height+=.2):I.r0&&(I.r0-=.5,I.r+=.5)),this._clipShapeForSymbol=I;var C=gS(a,r,n)||a.getVisual("style")[a.getVisual("drawType")];if(d&&c.type===r.type&&T===this._step){v&&!f?f=this._newPolygon(u,_):f&&!v&&(g.remove(f),f=this._polygon=null),h||this._initOrUpdateEndLabel(t,r,pp(C));var D=g.getClipPath();if(D)oh(D,{shape:xS(this,r,!1,t).shape},t);else g.setClipPath(xS(this,r,!0,t));b&&p.updateData(a,{isIgnore:S,clipShape:I,disableAnimation:!0,getSymbolPoint:function(t){return[u[2*t],u[2*t+1]]}}),hS(this._stackedOnPoints,_)&&hS(this._points,u)||(y?this._doUpdateAnimation(a,_,r,n,T,m,w):(T&&(u=fS(u,r,T,w),_&&(_=fS(_,r,T,w))),d.setShape({points:u}),f&&f.setShape({points:u,stackedOnPoints:_})))}else b&&p.updateData(a,{isIgnore:S,clipShape:I,disableAnimation:!0,getSymbolPoint:function(t){return[u[2*t],u[2*t+1]]}}),y&&this._initSymbolLabelAnimation(a,r,I),T&&(u=fS(u,r,T,w),_&&(_=fS(_,r,T,w))),d=this._newPolyline(u),v?f=this._newPolygon(u,_):f&&(g.remove(f),f=this._polygon=null),h||this._initOrUpdateEndLabel(t,r,pp(C)),g.setClipPath(xS(this,r,!0,t));var A=t.getModel("emphasis"),L=A.get("focus"),P=A.get("blurScope"),O=A.get("disabled");(d.useStyle(k(s.getLineStyle(),{fill:"none",stroke:C,lineJoin:"bevel"})),Vl(d,t,"lineStyle"),d.style.lineWidth>0&&"bolder"===t.get(["emphasis","lineStyle","width"]))&&(d.getState("emphasis").style.lineWidth=+d.style.lineWidth+1);Hs(d).seriesIndex=t.seriesIndex,Rl(d,L,P,O);var R=dS(t.get("smooth")),N=t.get("smoothMonotone");if(d.setShape({smooth:R,smoothMonotone:N,connectNulls:w}),f){var E=a.getCalculationInfo("stackedOnSeries"),z=0;f.useStyle(k(l.getAreaStyle(),{fill:C,opacity:.7,lineJoin:"bevel",decal:a.getVisual("style").decal})),E&&(z=dS(E.get("smooth"))),f.setShape({smooth:R,stackedOnSmooth:z,smoothMonotone:N,connectNulls:w}),Vl(f,t,"areaStyle"),Hs(f).seriesIndex=t.seriesIndex,Rl(f,L,P,O)}var V=function(t){i._changePolyState(t)};a.eachItemGraphicEl((function(t){t&&(t.onHoverStateChange=V)})),this._polyline.onHoverStateChange=V,this._data=a,this._coordSys=r,this._stackedOnPoints=_,this._points=u,this._step=T,this._valueOrigin=m,t.get("triggerLineEvent")&&(this.packEventData(t,d),f&&this.packEventData(t,f))},e.prototype.packEventData=function(t,e){Hs(e).eventData={componentType:"series",componentSubType:"line",componentIndex:t.componentIndex,seriesIndex:t.seriesIndex,seriesName:t.name,seriesType:"line"}},e.prototype.highlight=function(t,e,n,i){var r=t.getData(),o=wo(r,i);if(this._changePolyState("emphasis"),!(o instanceof Array)&&null!=o&&o>=0){var a=r.getLayout("points"),s=r.getItemGraphicEl(o);if(!s){var l=a[2*o],u=a[2*o+1];if(isNaN(l)||isNaN(u))return;if(this._clipShapeForSymbol&&!this._clipShapeForSymbol.contain(l,u))return;var h=t.get("zlevel"),c=t.get("z");(s=new Yw(r,o)).x=l,s.y=u,s.setZ(h,c);var p=s.getSymbolPath().getTextContent();p&&(p.zlevel=h,p.z=c,p.z2=this._polyline.z2+1),s.__temp=!0,r.setItemGraphicEl(o,s),s.stopSymbolAnimation(!0),this.group.add(s)}s.highlight()}else xg.prototype.highlight.call(this,t,e,n,i)},e.prototype.downplay=function(t,e,n,i){var r=t.getData(),o=wo(r,i);if(this._changePolyState("normal"),null!=o&&o>=0){var a=r.getItemGraphicEl(o);a&&(a.__temp?(r.setItemGraphicEl(o,null),this.group.remove(a)):a.downplay())}else xg.prototype.downplay.call(this,t,e,n,i)},e.prototype._changePolyState=function(t){var e=this._polygon;gl(this._polyline,t),e&&gl(e,t)},e.prototype._newPolyline=function(t){var e=this._polyline;return e&&this._lineGroup.remove(e),e=new iS({shape:{points:t},segmentIgnoreThreshold:2,z2:10}),this._lineGroup.add(e),this._polyline=e,e},e.prototype._newPolygon=function(t,e){var n=this._polygon;return n&&this._lineGroup.remove(n),n=new oS({shape:{points:t,stackedOnPoints:e},segmentIgnoreThreshold:2}),this._lineGroup.add(n),this._polygon=n,n},e.prototype._initSymbolLabelAnimation=function(t,e,n){var i,r,o=e.getBaseAxis(),a=o.inverse;"cartesian2d"===e.type?(i=o.isHorizontal(),r=!1):"polar"===e.type&&(i="angle"===o.dim,r=!0);var s=t.hostModel,l=s.get("animationDuration");U(l)&&(l=l(null));var u=s.get("animationDelay")||0,h=U(u)?u(null):u;t.eachItemGraphicEl((function(t,o){var s=t;if(s){var c=[t.x,t.y],p=void 0,d=void 0,f=void 0;if(n)if(r){var g=n,y=e.pointToCoord(c);i?(p=g.startAngle,d=g.endAngle,f=-y[1]/180*Math.PI):(p=g.r0,d=g.r,f=y[0])}else{var v=n;i?(p=v.x,d=v.x+v.width,f=t.x):(p=v.y+v.height,d=v.y,f=t.y)}var m=d===p?0:(f-p)/(d-p);a&&(m=1-m);var x=U(u)?u(o):l*m+h,_=s.getSymbolPath(),b=_.getTextContent();s.attr({scaleX:0,scaleY:0}),s.animateTo({scaleX:1,scaleY:1},{duration:200,setToFinal:!0,delay:x}),b&&b.animateFrom({style:{opacity:0}},{duration:300,delay:x}),_.disableLabelAnimation=!0}}))},e.prototype._initOrUpdateEndLabel=function(t,e,n){var i=t.getModel("endLabel");if(mS(t)){var r=t.getData(),o=this._polyline,a=r.getLayout("points");if(!a)return o.removeTextContent(),void(this._endLabel=null);var s=this._endLabel;s||((s=this._endLabel=new ks({z2:200})).ignoreClip=!0,o.setTextContent(this._endLabel),o.disableLabelAnimation=!0);var l=function(t){for(var e,n,i=t.length/2;i>0&&(e=t[2*i-2],n=t[2*i-1],isNaN(e)||isNaN(n));i--);return i-1}(a);l>=0&&(Hh(o,Yh(t,"endLabel"),{inheritColor:n,labelFetcher:t,labelDataIndex:l,defaultText:function(t,e,n){return null!=n?Hw(r,n):Ww(r,t)},enableTextSetter:!0},function(t,e){var n=e.getBaseAxis(),i=n.isHorizontal(),r=n.inverse,o=i?r?"right":"left":"center",a=i?"middle":r?"top":"bottom";return{normal:{align:t.get("align")||o,verticalAlign:t.get("verticalAlign")||a}}}(i,e)),o.textConfig.position=null)}else this._endLabel&&(this._polyline.removeTextContent(),this._endLabel=null)},e.prototype._endLabelOnDuring=function(t,e,n,i,r,o,a){var s=this._endLabel,l=this._polyline;if(s){t<1&&null==i.originalX&&(i.originalX=s.x,i.originalY=s.y);var u=n.getLayout("points"),h=n.hostModel,c=h.get("connectNulls"),p=o.get("precision"),d=o.get("distance")||0,f=a.getBaseAxis(),g=f.isHorizontal(),y=f.inverse,v=e.shape,m=y?g?v.x:v.y+v.height:g?v.x+v.width:v.y,x=(g?d:0)*(y?-1:1),_=(g?0:-d)*(y?-1:1),b=g?"x":"y",w=function(t,e,n){for(var i,r,o=t.length/2,a="x"===n?0:1,s=0,l=-1,u=0;u<o;u++)if(r=t[2*u+a],!isNaN(r)&&!isNaN(t[2*u+1-a]))if(0!==u){if(i<=e&&r>=e||i>=e&&r<=e){l=u;break}s=u,i=r}else i=r;return{range:[s,l],t:(e-i)/(r-i)}}(u,m,b),S=w.range,M=S[1]-S[0],I=void 0;if(M>=1){if(M>1&&!c){var T=vS(u,S[0]);s.attr({x:T[0]+x,y:T[1]+_}),r&&(I=h.getRawValue(S[0]))}else{(T=l.getPointOn(m,b))&&s.attr({x:T[0]+x,y:T[1]+_});var C=h.getRawValue(S[0]),D=h.getRawValue(S[1]);r&&(I=Po(n,p,C,D,w.t))}i.lastFrameIndex=S[0]}else{var A=1===t||i.lastFrameIndex>0?S[0]:0;T=vS(u,A);r&&(I=h.getRawValue(A)),s.attr({x:T[0]+x,y:T[1]+_})}r&&Jh(s).setLabelText(I)}},e.prototype._doUpdateAnimation=function(t,e,n,i,r,o,a){var s=this._polyline,l=this._polygon,u=t.hostModel,h=function(t,e,n,i,r,o,a,s){for(var l=function(t,e){var n=[];return e.diff(t).add((function(t){n.push({cmd:"+",idx:t})})).update((function(t,e){n.push({cmd:"=",idx:e,idx1:t})})).remove((function(t){n.push({cmd:"-",idx:t})})).execute(),n}(t,e),u=[],h=[],c=[],p=[],d=[],f=[],g=[],y=Kw(r,e,a),v=t.getLayout("points")||[],m=e.getLayout("points")||[],x=0;x<l.length;x++){var _=l[x],b=!0,w=void 0,S=void 0;switch(_.cmd){case"=":w=2*_.idx,S=2*_.idx1;var M=v[w],I=v[w+1],T=m[S],C=m[S+1];(isNaN(M)||isNaN(I))&&(M=T,I=C),u.push(M,I),h.push(T,C),c.push(n[w],n[w+1]),p.push(i[S],i[S+1]),g.push(e.getRawIndex(_.idx1));break;case"+":var D=_.idx,A=y.dataDimsForPoint,k=r.dataToPoint([e.get(A[0],D),e.get(A[1],D)]);S=2*D,u.push(k[0],k[1]),h.push(m[S],m[S+1]);var L=$w(y,r,e,D);c.push(L[0],L[1]),p.push(i[S],i[S+1]),g.push(e.getRawIndex(D));break;case"-":b=!1}b&&(d.push(_),f.push(f.length))}f.sort((function(t,e){return g[t]-g[e]}));var P=u.length,O=Sx(P),R=Sx(P),N=Sx(P),E=Sx(P),z=[];for(x=0;x<f.length;x++){var V=f[x],B=2*x,F=2*V;O[B]=u[F],O[B+1]=u[F+1],R[B]=h[F],R[B+1]=h[F+1],N[B]=c[F],N[B+1]=c[F+1],E[B]=p[F],E[B+1]=p[F+1],z[x]=d[V]}return{current:O,next:R,stackedOnCurrent:N,stackedOnNext:E,status:z}}(this._data,t,this._stackedOnPoints,e,this._coordSys,0,this._valueOrigin),c=h.current,p=h.stackedOnCurrent,d=h.next,f=h.stackedOnNext;if(r&&(c=fS(h.current,n,r,a),p=fS(h.stackedOnCurrent,n,r,a),d=fS(h.next,n,r,a),f=fS(h.stackedOnNext,n,r,a)),pS(c,d)>3e3||l&&pS(p,f)>3e3)return s.stopAnimation(),s.setShape({points:d}),void(l&&(l.stopAnimation(),l.setShape({points:d,stackedOnPoints:f})));s.shape.__points=h.current,s.shape.points=c;var g={shape:{points:d}};h.current!==c&&(g.shape.__points=h.next),s.stopAnimation(),rh(s,g,u),l&&(l.setShape({points:c,stackedOnPoints:p}),l.stopAnimation(),rh(l,{shape:{stackedOnPoints:f}},u),s.shape.points!==l.shape.points&&(l.shape.points=s.shape.points));for(var y=[],v=h.status,m=0;m<v.length;m++){if("="===v[m].cmd){var x=t.getItemGraphicEl(v[m].idx1);x&&y.push({el:x,ptIdx:m})}}s.animators&&s.animators.length&&s.animators[0].during((function(){l&&l.dirtyShape();for(var t=s.shape.__points,e=0;e<y.length;e++){var n=y[e].el,i=2*y[e].ptIdx;n.x=t[i],n.y=t[i+1],n.markRedraw()}}))},e.prototype.remove=function(t){var e=this.group,n=this._data;this._lineGroup.removeAll(),this._symbolDraw.remove(!0),n&&n.eachItemGraphicEl((function(t,i){t.__temp&&(e.remove(t),n.setItemGraphicEl(i,null))})),this._polyline=this._polygon=this._coordSys=this._points=this._stackedOnPoints=this._endLabel=this._data=null},e.type="line",e}(xg);function bS(t,e){return{seriesType:t,plan:yg(),reset:function(t){var n=t.getData(),i=t.coordinateSystem,r=t.pipelineContext,o=e||r.large;if(i){var a=z(i.dimensions,(function(t){return n.mapDimension(t)})).slice(0,2),s=a.length,l=n.getCalculationInfo("stackResultDimension");nx(n,a[0])&&(a[0]=l),nx(n,a[1])&&(a[1]=l);var u=n.getStore(),h=n.getDimensionIndex(a[0]),c=n.getDimensionIndex(a[1]);return s&&{progress:function(t,e){for(var n=t.end-t.start,r=o&&Sx(n*s),a=[],l=[],p=t.start,d=0;p<t.end;p++){var f=void 0;if(1===s){var g=u.get(h,p);f=i.dataToPoint(g,null,l)}else a[0]=u.get(h,p),a[1]=u.get(c,p),f=i.dataToPoint(a,null,l);o?(r[d++]=f[0],r[d++]=f[1]):e.setItemLayout(p,f.slice())}o&&e.setLayout("points",r)}}}}}}var wS={average:function(t){for(var e=0,n=0,i=0;i<t.length;i++)isNaN(t[i])||(e+=t[i],n++);return 0===n?NaN:e/n},sum:function(t){for(var e=0,n=0;n<t.length;n++)e+=t[n]||0;return e},max:function(t){for(var e=-1/0,n=0;n<t.length;n++)t[n]>e&&(e=t[n]);return isFinite(e)?e:NaN},min:function(t){for(var e=1/0,n=0;n<t.length;n++)t[n]<e&&(e=t[n]);return isFinite(e)?e:NaN},nearest:function(t){return t[0]}},SS=function(t){return Math.round(t.length/2)};function MS(t){return{seriesType:t,reset:function(t,e,n){var i=t.getData(),r=t.get("sampling"),o=t.coordinateSystem,a=i.count();if(a>10&&"cartesian2d"===o.type&&r){var s=o.getBaseAxis(),l=o.getOtherAxis(s),u=s.getExtent(),h=n.getDevicePixelRatio(),c=Math.abs(u[1]-u[0])*(h||1),p=Math.round(a/c);if(isFinite(p)&&p>1){"lttb"===r&&t.setData(i.lttbDownSample(i.mapDimension(l.dim),1/p));var d=void 0;X(r)?d=wS[r]:U(r)&&(d=r),d&&t.setData(i.downSample(i.mapDimension(l.dim),1/p,d,SS))}}}}}var IS=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.getInitialData=function(t,e){return rx(null,this,{useEncodeDefaulter:!0})},e.prototype.getMarkerPosition=function(t){var e=this.coordinateSystem;if(e&&e.clampData){var n=e.dataToPoint(e.clampData(t)),i=this.getData(),r=i.getLayout("offset"),o=i.getLayout("size");return n[e.getBaseAxis().isHorizontal()?0:1]+=r+o/2,n}return[NaN,NaN]},e.type="series.__base_bar__",e.defaultOption={z:2,coordinateSystem:"cartesian2d",legendHoverLink:!0,barMinHeight:0,barMinAngle:0,large:!1,largeThreshold:400,progressive:3e3,progressiveChunkMode:"mod"},e}(sg);sg.registerClass(IS);var TS=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.getInitialData=function(){return rx(null,this,{useEncodeDefaulter:!0,createInvertedIndices:!!this.get("realtimeSort",!0)||null})},e.prototype.getProgressive=function(){return!!this.get("large")&&this.get("progressive")},e.prototype.getProgressiveThreshold=function(){var t=this.get("progressiveThreshold"),e=this.get("largeThreshold");return e>t&&(t=e),t},e.prototype.brushSelector=function(t,e,n){return n.rect(e.getItemLayout(t))},e.type="series.bar",e.dependencies=["grid","polar"],e.defaultOption=yc(IS.defaultOption,{clip:!0,roundCap:!1,showBackground:!1,backgroundStyle:{color:"rgba(180, 180, 180, 0.2)",borderColor:null,borderWidth:0,borderType:"solid",borderRadius:0,shadowBlur:0,shadowColor:null,shadowOffsetX:0,shadowOffsetY:0,opacity:1},select:{itemStyle:{borderColor:"#212121"}},realtimeSort:!1}),e}(IS),CS=function(){this.cx=0,this.cy=0,this.r0=0,this.r=0,this.startAngle=0,this.endAngle=2*Math.PI,this.clockwise=!0},DS=function(t){function e(e){var n=t.call(this,e)||this;return n.type="sausage",n}return n(e,t),e.prototype.getDefaultShape=function(){return new CS},e.prototype.buildPath=function(t,e){var n=e.cx,i=e.cy,r=Math.max(e.r0||0,0),o=Math.max(e.r,0),a=.5*(o-r),s=r+a,l=e.startAngle,u=e.endAngle,h=e.clockwise,c=2*Math.PI,p=h?u-l<c:l-u<c;p||(l=u-(h?c:-c));var d=Math.cos(l),f=Math.sin(l),g=Math.cos(u),y=Math.sin(u);p?(t.moveTo(d*r+n,f*r+i),t.arc(d*s+n,f*s+i,a,-Math.PI+l,l,!h)):t.moveTo(d*o+n,f*o+i),t.arc(n,i,o,l,u,!h),t.arc(g*s+n,y*s+i,a,u-2*Math.PI,u-Math.PI,!h),0!==r&&t.arc(n,i,r,u,l,h)},e}(gs);function AS(t,e,n){return e*Math.sin(t)*(n?-1:1)}function kS(t,e,n){return e*Math.cos(t)*(n?1:-1)}var LS=Math.max,PS=Math.min;var OS=function(t){function e(){var n=t.call(this)||this;return n.type=e.type,n._isFirstFrame=!0,n}return n(e,t),e.prototype.render=function(t,e,n,i){this._model=t,this._removeOnRenderedListener(n),this._updateDrawMode(t);var r=t.get("coordinateSystem");("cartesian2d"===r||"polar"===r)&&(this._progressiveEls=null,this._isLargeDraw?this._renderLarge(t,e,n):this._renderNormal(t,e,n,i))},e.prototype.incrementalPrepareRender=function(t){this._clear(),this._updateDrawMode(t),this._updateLargeClip(t)},e.prototype.incrementalRender=function(t,e){this._progressiveEls=[],this._incrementalRenderLarge(t,e)},e.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},e.prototype._updateDrawMode=function(t){var e=t.pipelineContext.large;null!=this._isLargeDraw&&e===this._isLargeDraw||(this._isLargeDraw=e,this._clear())},e.prototype._renderNormal=function(t,e,n,i){var r,o=this.group,a=t.getData(),s=this._data,l=t.coordinateSystem,u=l.getBaseAxis();"cartesian2d"===l.type?r=u.isHorizontal():"polar"===l.type&&(r="angle"===u.dim);var h=t.isAnimationEnabled()?t:null,c=function(t,e){var n=t.get("realtimeSort",!0),i=e.getBaseAxis();0;if(n&&"category"===i.type&&"cartesian2d"===e.type)return{baseAxis:i,otherAxis:e.getOtherAxis(i)}}(t,l);c&&this._enableRealtimeSort(c,a,n);var p=t.get("clip",!0)||c,d=function(t,e){var n=t.getArea&&t.getArea();if(uS(t,"cartesian2d")){var i=t.getBaseAxis();if("category"!==i.type||!i.onBand){var r=e.getLayout("bandWidth");i.isHorizontal()?(n.x-=r,n.width+=2*r):(n.y-=r,n.height+=2*r)}}return n}(l,a);o.removeClipPath();var f=t.get("roundCap",!0),g=t.get("showBackground",!0),y=t.getModel("backgroundStyle"),v=y.get("borderRadius")||0,m=[],x=this._backgroundEls,_=i&&i.isInitSort,b=i&&"changeAxisOrder"===i.type;function w(t){var e=GS[l.type](a,t),n=function(t,e,n){return new("polar"===t.type?Cu:Cs)({shape:jS(e,n,t),silent:!0,z2:0})}(l,r,e);return n.useStyle(y.getItemStyle()),"cartesian2d"===l.type&&n.setShape("r",v),m[t]=n,n}a.diff(s).add((function(e){var n=a.getItemModel(e),i=GS[l.type](a,e,n);if(g&&w(e),a.hasValue(e)&&FS[l.type](i)){var s=!1;p&&(s=RS[l.type](d,i));var y=NS[l.type](t,a,e,i,r,h,u.model,!1,f);c&&(y.forceLabelAnimation=!0),HS(y,a,e,n,i,t,r,"polar"===l.type),_?y.attr({shape:i}):c?ES(c,h,y,i,e,r,!1,!1):oh(y,{shape:i},t,e),a.setItemGraphicEl(e,y),o.add(y),y.ignore=s}})).update((function(e,n){var i=a.getItemModel(e),S=GS[l.type](a,e,i);if(g){var M=void 0;0===x.length?M=w(n):((M=x[n]).useStyle(y.getItemStyle()),"cartesian2d"===l.type&&M.setShape("r",v),m[e]=M);var I=GS[l.type](a,e);rh(M,{shape:jS(r,I,l)},h,e)}var T=s.getItemGraphicEl(n);if(a.hasValue(e)&&FS[l.type](S)){var C=!1;if(p&&(C=RS[l.type](d,S))&&o.remove(T),T?hh(T):T=NS[l.type](t,a,e,S,r,h,u.model,!!T,f),c&&(T.forceLabelAnimation=!0),b){var D=T.getTextContent();if(D){var A=Jh(D);null!=A.prevValue&&(A.prevValue=A.value)}}else HS(T,a,e,i,S,t,r,"polar"===l.type);_?T.attr({shape:S}):c?ES(c,h,T,S,e,r,!0,b):rh(T,{shape:S},t,e,null),a.setItemGraphicEl(e,T),T.ignore=C,o.add(T)}else o.remove(T)})).remove((function(e){var n=s.getItemGraphicEl(e);n&&uh(n,t,e)})).execute();var S=this._backgroundGroup||(this._backgroundGroup=new Cr);S.removeAll();for(var M=0;M<m.length;++M)S.add(m[M]);o.add(S),this._backgroundEls=m,this._data=a},e.prototype._renderLarge=function(t,e,n){this._clear(),XS(t,this.group),this._updateLargeClip(t)},e.prototype._incrementalRenderLarge=function(t,e){this._removeBackground(),XS(e,this.group,this._progressiveEls,!0)},e.prototype._updateLargeClip=function(t){var e=t.get("clip",!0)&&lS(t.coordinateSystem,!1,t),n=this.group;e?n.setClipPath(e):n.removeClipPath()},e.prototype._enableRealtimeSort=function(t,e,n){var i=this;if(e.count()){var r=t.baseAxis;if(this._isFirstFrame)this._dispatchInitSort(e,t,n),this._isFirstFrame=!1;else{var o=function(t){var n=e.getItemGraphicEl(t),i=n&&n.shape;return i&&Math.abs(r.isHorizontal()?i.height:i.width)||0};this._onRendered=function(){i._updateSortWithinSameData(e,o,r,n)},n.getZr().on("rendered",this._onRendered)}}},e.prototype._dataSort=function(t,e,n){var i=[];return t.each(t.mapDimension(e.dim),(function(t,e){var r=n(e);r=null==r?NaN:r,i.push({dataIndex:e,mappedValue:r,ordinalNumber:t})})),i.sort((function(t,e){return e.mappedValue-t.mappedValue})),{ordinalNumbers:z(i,(function(t){return t.ordinalNumber}))}},e.prototype._isOrderChangedWithinSameData=function(t,e,n){for(var i=n.scale,r=t.mapDimension(n.dim),o=Number.MAX_VALUE,a=0,s=i.getOrdinalMeta().categories.length;a<s;++a){var l=t.rawIndexOf(r,i.getRawOrdinalNumber(a)),u=l<0?Number.MIN_VALUE:e(t.indexOfRawIndex(l));if(u>o)return!0;o=u}return!1},e.prototype._isOrderDifferentInView=function(t,e){for(var n=e.scale,i=n.getExtent(),r=Math.max(0,i[0]),o=Math.min(i[1],n.getOrdinalMeta().categories.length-1);r<=o;++r)if(t.ordinalNumbers[r]!==n.getRawOrdinalNumber(r))return!0},e.prototype._updateSortWithinSameData=function(t,e,n,i){if(this._isOrderChangedWithinSameData(t,e,n)){var r=this._dataSort(t,n,e);this._isOrderDifferentInView(r,n)&&(this._removeOnRenderedListener(i),i.dispatchAction({type:"changeAxisOrder",componentType:n.dim+"Axis",axisId:n.index,sortInfo:r}))}},e.prototype._dispatchInitSort=function(t,e,n){var i=e.baseAxis,r=this._dataSort(t,i,(function(n){return t.get(t.mapDimension(e.otherAxis.dim),n)}));n.dispatchAction({type:"changeAxisOrder",componentType:i.dim+"Axis",isInitSort:!0,axisId:i.index,sortInfo:r})},e.prototype.remove=function(t,e){this._clear(this._model),this._removeOnRenderedListener(e)},e.prototype.dispose=function(t,e){this._removeOnRenderedListener(e)},e.prototype._removeOnRenderedListener=function(t){this._onRendered&&(t.getZr().off("rendered",this._onRendered),this._onRendered=null)},e.prototype._clear=function(t){var e=this.group,n=this._data;t&&t.isAnimationEnabled()&&n&&!this._isLargeDraw?(this._removeBackground(),this._backgroundEls=[],n.eachItemGraphicEl((function(e){uh(e,t,Hs(e).dataIndex)}))):e.removeAll(),this._data=null,this._isFirstFrame=!0},e.prototype._removeBackground=function(){this.group.remove(this._backgroundGroup),this._backgroundGroup=null},e.type="bar",e}(xg),RS={cartesian2d:function(t,e){var n=e.width<0?-1:1,i=e.height<0?-1:1;n<0&&(e.x+=e.width,e.width=-e.width),i<0&&(e.y+=e.height,e.height=-e.height);var r=t.x+t.width,o=t.y+t.height,a=LS(e.x,t.x),s=PS(e.x+e.width,r),l=LS(e.y,t.y),u=PS(e.y+e.height,o),h=s<a,c=u<l;return e.x=h&&a>r?s:a,e.y=c&&l>o?u:l,e.width=h?0:s-a,e.height=c?0:u-l,n<0&&(e.x+=e.width,e.width=-e.width),i<0&&(e.y+=e.height,e.height=-e.height),h||c},polar:function(t,e){var n=e.r0<=e.r?1:-1;if(n<0){var i=e.r;e.r=e.r0,e.r0=i}var r=PS(e.r,t.r),o=LS(e.r0,t.r0);e.r=r,e.r0=o;var a=r-o<0;if(n<0){i=e.r;e.r=e.r0,e.r0=i}return a}},NS={cartesian2d:function(t,e,n,i,r,o,a,s,l){var u=new Cs({shape:A({},i),z2:1});(u.__dataIndex=n,u.name="item",o)&&(u.shape[r?"height":"width"]=0);return u},polar:function(t,e,n,i,r,o,a,s,l){var u=!r&&l?DS:Cu,h=new u({shape:i,z2:1});h.name="item";var c,p,d=WS(r);if(h.calculateTextPosition=(c=d,p=({isRoundCap:u===DS}||{}).isRoundCap,function(t,e,n){var i=e.position;if(!i||i instanceof Array)return yr(t,e,n);var r=c(i),o=null!=e.distance?e.distance:5,a=this.shape,s=a.cx,l=a.cy,u=a.r,h=a.r0,d=(u+h)/2,f=a.startAngle,g=a.endAngle,y=(f+g)/2,v=p?Math.abs(u-h)/2:0,m=Math.cos,x=Math.sin,_=s+u*m(f),b=l+u*x(f),w="left",S="top";switch(r){case"startArc":_=s+(h-o)*m(y),b=l+(h-o)*x(y),w="center",S="top";break;case"insideStartArc":_=s+(h+o)*m(y),b=l+(h+o)*x(y),w="center",S="bottom";break;case"startAngle":_=s+d*m(f)+AS(f,o+v,!1),b=l+d*x(f)+kS(f,o+v,!1),w="right",S="middle";break;case"insideStartAngle":_=s+d*m(f)+AS(f,-o+v,!1),b=l+d*x(f)+kS(f,-o+v,!1),w="left",S="middle";break;case"middle":_=s+d*m(y),b=l+d*x(y),w="center",S="middle";break;case"endArc":_=s+(u+o)*m(y),b=l+(u+o)*x(y),w="center",S="bottom";break;case"insideEndArc":_=s+(u-o)*m(y),b=l+(u-o)*x(y),w="center",S="top";break;case"endAngle":_=s+d*m(g)+AS(g,o+v,!0),b=l+d*x(g)+kS(g,o+v,!0),w="left",S="middle";break;case"insideEndAngle":_=s+d*m(g)+AS(g,-o+v,!0),b=l+d*x(g)+kS(g,-o+v,!0),w="right",S="middle";break;default:return yr(t,e,n)}return(t=t||{}).x=_,t.y=b,t.align=w,t.verticalAlign=S,t}),o){var f=r?"r":"endAngle",g={};h.shape[f]=r?0:i.startAngle,g[f]=i[f],(s?rh:oh)(h,{shape:g},o)}return h}};function ES(t,e,n,i,r,o,a,s){var l,u;o?(u={x:i.x,width:i.width},l={y:i.y,height:i.height}):(u={y:i.y,height:i.height},l={x:i.x,width:i.width}),s||(a?rh:oh)(n,{shape:l},e,r,null),(a?rh:oh)(n,{shape:u},e?t.baseAxis.model:null,r)}function zS(t,e){for(var n=0;n<e.length;n++)if(!isFinite(t[e[n]]))return!0;return!1}var VS=["x","y","width","height"],BS=["cx","cy","r","startAngle","endAngle"],FS={cartesian2d:function(t){return!zS(t,VS)},polar:function(t){return!zS(t,BS)}},GS={cartesian2d:function(t,e,n){var i=t.getItemLayout(e),r=n?function(t,e){var n=t.get(["itemStyle","borderColor"]);if(!n||"none"===n)return 0;var i=t.get(["itemStyle","borderWidth"])||0,r=isNaN(e.width)?Number.MAX_VALUE:Math.abs(e.width),o=isNaN(e.height)?Number.MAX_VALUE:Math.abs(e.height);return Math.min(i,r,o)}(n,i):0,o=i.width>0?1:-1,a=i.height>0?1:-1;return{x:i.x+o*r/2,y:i.y+a*r/2,width:i.width-o*r,height:i.height-a*r}},polar:function(t,e,n){var i=t.getItemLayout(e);return{cx:i.cx,cy:i.cy,r0:i.r0,r:i.r,startAngle:i.startAngle,endAngle:i.endAngle,clockwise:i.clockwise}}};function WS(t){return function(t){var e=t?"Arc":"Angle";return function(t){switch(t){case"start":case"insideStart":case"end":case"insideEnd":return t+e;default:return t}}}(t)}function HS(t,e,n,i,r,o,a,s){var l=e.getItemVisual(n,"style");s||t.setShape("r",i.get(["itemStyle","borderRadius"])||0),t.useStyle(l);var u=i.getShallow("cursor");u&&t.attr("cursor",u);var h=s?a?r.r>=r.r0?"endArc":"startArc":r.endAngle>=r.startAngle?"endAngle":"startAngle":a?r.height>=0?"bottom":"top":r.width>=0?"right":"left",c=Yh(i);Hh(t,c,{labelFetcher:o,labelDataIndex:n,defaultText:Ww(o.getData(),n),inheritColor:l.fill,defaultOpacity:l.opacity,defaultOutsidePosition:h});var p=t.getTextContent();if(s&&p){var d=i.get(["label","position"]);t.textConfig.inside="middle"===d||null,function(t,e,n,i){if(j(i))t.setTextConfig({rotation:i});else if(Y(e))t.setTextConfig({rotation:0});else{var r,o=t.shape,a=o.clockwise?o.startAngle:o.endAngle,s=o.clockwise?o.endAngle:o.startAngle,l=(a+s)/2,u=n(e);switch(u){case"startArc":case"insideStartArc":case"middle":case"insideEndArc":case"endArc":r=l;break;case"startAngle":case"insideStartAngle":r=a;break;case"endAngle":case"insideEndAngle":r=s;break;default:return void t.setTextConfig({rotation:0})}var h=1.5*Math.PI-r;"middle"===u&&h>Math.PI/2&&h<1.5*Math.PI&&(h-=Math.PI),t.setTextConfig({rotation:h})}}(t,"outside"===d?h:d,WS(a),i.get(["label","rotate"]))}Qh(p,c,o.getRawValue(n),(function(t){return Hw(e,t)}));var f=i.getModel(["emphasis"]);Rl(t,f.get("focus"),f.get("blurScope"),f.get("disabled")),Vl(t,i),function(t){return null!=t.startAngle&&null!=t.endAngle&&t.startAngle===t.endAngle}(r)&&(t.style.fill="none",t.style.stroke="none",E(t.states,(function(t){t.style&&(t.style.fill=t.style.stroke="none")})))}var YS=function(){},US=function(t){function e(e){var n=t.call(this,e)||this;return n.type="largeBar",n}return n(e,t),e.prototype.getDefaultShape=function(){return new YS},e.prototype.buildPath=function(t,e){for(var n=e.points,i=this.baseDimIdx,r=1-this.baseDimIdx,o=[],a=[],s=this.barWidth,l=0;l<n.length;l+=3)a[i]=s,a[r]=n[l+2],o[i]=n[l+i],o[r]=n[l+r],t.rect(o[0],o[1],a[0],a[1])},e}(gs);function XS(t,e,n,i){var r=t.getData(),o=r.getLayout("valueAxisHorizontal")?1:0,a=r.getLayout("largeDataIndices"),s=r.getLayout("size"),l=t.getModel("backgroundStyle"),u=r.getLayout("largeBackgroundPoints");if(u){var h=new US({shape:{points:u},incremental:!!i,silent:!0,z2:0});h.baseDimIdx=o,h.largeDataIndices=a,h.barWidth=s,h.useStyle(l.getItemStyle()),e.add(h),n&&n.push(h)}var c=new US({shape:{points:r.getLayout("largePoints")},incremental:!!i,z2:1});c.baseDimIdx=o,c.largeDataIndices=a,c.barWidth=s,e.add(c),c.useStyle(r.getVisual("style")),Hs(c).seriesIndex=t.seriesIndex,t.get("silent")||(c.on("mousedown",ZS),c.on("mousemove",ZS)),n&&n.push(c)}var ZS=Dg((function(t){var e=function(t,e,n){for(var i=t.baseDimIdx,r=1-i,o=t.shape.points,a=t.largeDataIndices,s=[],l=[],u=t.barWidth,h=0,c=o.length/3;h<c;h++){var p=3*h;if(l[i]=u,l[r]=o[p+2],s[i]=o[p+i],s[r]=o[p+r],l[r]<0&&(s[r]+=l[r],l[r]=-l[r]),e>=s[0]&&e<=s[0]+l[0]&&n>=s[1]&&n<=s[1]+l[1])return a[h]}return-1}(this,t.offsetX,t.offsetY);Hs(this).dataIndex=e>=0?e:null}),30,!1);function jS(t,e,n){if(uS(n,"cartesian2d")){var i=e,r=n.getArea();return{x:t?i.x:r.x,y:t?r.y:i.y,width:t?i.width:r.width,height:t?r.height:i.height}}var o=e;return{cx:(r=n.getArea()).cx,cy:r.cy,r0:t?r.r0:o.r0,r:t?r.r:o.r,startAngle:t?o.startAngle:0,endAngle:t?o.endAngle:2*Math.PI}}var qS=2*Math.PI,KS=Math.PI/180;function $S(t,e){return xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()})}function JS(t,e){var n=$S(t,e),i=t.get("center"),r=t.get("radius");Y(r)||(r=[0,r]),Y(i)||(i=[i,i]);var o=Er(n.width,e.getWidth()),a=Er(n.height,e.getHeight()),s=Math.min(o,a);return{cx:Er(i[0],o)+n.x,cy:Er(i[1],a)+n.y,r0:Er(r[0],s/2),r:Er(r[1],s/2)}}function QS(t,e,n){e.eachSeriesByType(t,(function(t){var e=t.getData(),i=e.mapDimension("value"),r=$S(t,n),o=JS(t,n),a=o.cx,s=o.cy,l=o.r,u=o.r0,h=-t.get("startAngle")*KS,c=t.get("minAngle")*KS,p=0;e.each(i,(function(t){!isNaN(t)&&p++}));var d=e.getSum(i),f=Math.PI/(d||p)*2,g=t.get("clockwise"),y=t.get("roseType"),v=t.get("stillShowZeroSum"),m=e.getDataExtent(i);m[0]=0;var x=qS,_=0,b=h,w=g?1:-1;if(e.setLayout({viewRect:r,r:l}),e.each(i,(function(t,n){var i;if(isNaN(t))e.setItemLayout(n,{angle:NaN,startAngle:NaN,endAngle:NaN,clockwise:g,cx:a,cy:s,r0:u,r:y?NaN:l});else{(i="area"!==y?0===d&&v?f:t*f:qS/p)<c?(i=c,x-=c):_+=t;var r=b+w*i;e.setItemLayout(n,{angle:i,startAngle:b,endAngle:r,clockwise:g,cx:a,cy:s,r0:u,r:y?Nr(t,m,[u,l]):l}),b=r}})),x<qS&&p)if(x<=.001){var S=qS/p;e.each(i,(function(t,n){if(!isNaN(t)){var i=e.getItemLayout(n);i.angle=S,i.startAngle=h+w*n*S,i.endAngle=h+w*(n+1)*S}}))}else f=x/_,b=h,e.each(i,(function(t,n){if(!isNaN(t)){var i=e.getItemLayout(n),r=i.angle===c?c:t*f;i.startAngle=b,i.endAngle=b+w*r,b+=w*r}}))}))}function tM(t){return{seriesType:t,reset:function(t,e){var n=e.findComponents({mainType:"legend"});if(n&&n.length){var i=t.getData();i.filterSelf((function(t){for(var e=i.getName(t),r=0;r<n.length;r++)if(!n[r].isSelected(e))return!1;return!0}))}}}}var eM=Math.PI/180;function nM(t,e,n,i,r,o,a,s,l,u){if(!(t.length<2)){for(var h=t.length,c=0;c<h;c++)if("outer"===t[c].position&&"labelLine"===t[c].labelAlignTo){var p=t[c].label.x-u;t[c].linePoints[1][0]+=p,t[c].label.x=u}vb(t,l,l+a)&&function(t){for(var o={list:[],maxY:0},a={list:[],maxY:0},s=0;s<t.length;s++)if("none"===t[s].labelAlignTo){var l=t[s],u=l.label.y>n?a:o,h=Math.abs(l.label.y-n);if(h>=u.maxY){var c=l.label.x-e-l.len2*r,p=i+l.len,f=Math.abs(c)<p?Math.sqrt(h*h/(1-c*c/p/p)):p;u.rB=f,u.maxY=h}u.list.push(l)}d(o),d(a)}(t)}function d(t){for(var o=t.rB,a=o*o,s=0;s<t.list.length;s++){var l=t.list[s],u=Math.abs(l.label.y-n),h=i+l.len,c=h*h,p=Math.sqrt((1-Math.abs(u*u/a))*c),d=e+(p+l.len2)*r,f=d-l.label.x;iM(l,l.targetTextWidth-f*r,!0),l.label.x=d}}}function iM(t,e,n){if(void 0===n&&(n=!1),null==t.labelStyleWidth){var i=t.label,r=i.style,o=t.rect,a=r.backgroundColor,s=r.padding,l=s?s[1]+s[3]:0,u=r.overflow,h=o.width+(a?0:l);if(e<h||n){var c=o.height;if(u&&u.match("break")){i.setStyle("backgroundColor",null),i.setStyle("width",e-l);var p=i.getBoundingRect();i.setStyle("width",Math.ceil(p.width)),i.setStyle("backgroundColor",a)}else{var d=e-l,f=e<h?d:n?d>t.unconstrainedWidth?null:d:null;i.setStyle("width",f)}var g=i.getBoundingRect();o.width=g.width;var y=(i.style.margin||0)+2.1;o.height=g.height+y,o.y-=(o.height-c)/2}}}function rM(t){return"center"===t.position}function oM(t){var e,n,i=t.getData(),r=[],o=!1,a=(t.get("minShowLabelAngle")||0)*eM,s=i.getLayout("viewRect"),l=i.getLayout("r"),u=s.width,h=s.x,c=s.y,p=s.height;function d(t){t.ignore=!0}i.each((function(t){var s=i.getItemGraphicEl(t),c=s.shape,p=s.getTextContent(),f=s.getTextGuideLine(),g=i.getItemModel(t),y=g.getModel("label"),v=y.get("position")||g.get(["emphasis","label","position"]),m=y.get("distanceToLabelLine"),x=y.get("alignTo"),_=Er(y.get("edgeDistance"),u),b=y.get("bleedMargin"),w=g.getModel("labelLine"),S=w.get("length");S=Er(S,u);var M=w.get("length2");if(M=Er(M,u),Math.abs(c.endAngle-c.startAngle)<a)return E(p.states,d),void(p.ignore=!0);if(function(t){if(!t.ignore)return!0;for(var e in t.states)if(!1===t.states[e].ignore)return!0;return!1}(p)){var I,T,C,D,A=(c.startAngle+c.endAngle)/2,k=Math.cos(A),L=Math.sin(A);e=c.cx,n=c.cy;var P="inside"===v||"inner"===v;if("center"===v)I=c.cx,T=c.cy,D="center";else{var O=(P?(c.r+c.r0)/2*k:c.r*k)+e,R=(P?(c.r+c.r0)/2*L:c.r*L)+n;if(I=O+3*k,T=R+3*L,!P){var N=O+k*(S+l-c.r),z=R+L*(S+l-c.r),V=N+(k<0?-1:1)*M;I="edge"===x?k<0?h+_:h+u-_:V+(k<0?-m:m),T=z,C=[[O,R],[N,z],[V,z]]}D=P?"center":"edge"===x?k>0?"right":"left":k>0?"left":"right"}var B=Math.PI,F=0,G=y.get("rotate");if(j(G))F=G*(B/180);else if("center"===v)F=0;else if("radial"===G||!0===G){F=k<0?-A+B:-A}else if("tangential"===G&&"outside"!==v&&"outer"!==v){var W=Math.atan2(k,L);W<0&&(W=2*B+W),L>0&&(W=B+W),F=W-B}if(o=!!F,p.x=I,p.y=T,p.rotation=F,p.setStyle({verticalAlign:"middle"}),P){p.setStyle({align:D});var H=p.states.select;H&&(H.x+=p.x,H.y+=p.y)}else{var Y=p.getBoundingRect().clone();Y.applyTransform(p.getComputedTransform());var U=(p.style.margin||0)+2.1;Y.y-=U/2,Y.height+=U,r.push({label:p,labelLine:f,position:v,len:S,len2:M,minTurnAngle:w.get("minTurnAngle"),maxSurfaceAngle:w.get("maxSurfaceAngle"),surfaceNormal:new Ji(k,L),linePoints:C,textAlign:D,labelDistance:m,labelAlignTo:x,edgeDistance:_,bleedMargin:b,rect:Y,unconstrainedWidth:Y.width,labelStyleWidth:p.style.width})}s.setTextConfig({inside:P})}})),!o&&t.get("avoidLabelOverlap")&&function(t,e,n,i,r,o,a,s){for(var l=[],u=[],h=Number.MAX_VALUE,c=-Number.MAX_VALUE,p=0;p<t.length;p++){var d=t[p].label;rM(t[p])||(d.x<e?(h=Math.min(h,d.x),l.push(t[p])):(c=Math.max(c,d.x),u.push(t[p])))}for(p=0;p<t.length;p++)if(!rM(y=t[p])&&y.linePoints){if(null!=y.labelStyleWidth)continue;d=y.label;var f=y.linePoints,g=void 0;g="edge"===y.labelAlignTo?d.x<e?f[2][0]-y.labelDistance-a-y.edgeDistance:a+r-y.edgeDistance-f[2][0]-y.labelDistance:"labelLine"===y.labelAlignTo?d.x<e?h-a-y.bleedMargin:a+r-c-y.bleedMargin:d.x<e?d.x-a-y.bleedMargin:a+r-d.x-y.bleedMargin,y.targetTextWidth=g,iM(y,g)}for(nM(u,e,n,i,1,0,o,0,s,c),nM(l,e,n,i,-1,0,o,0,s,h),p=0;p<t.length;p++){var y;if(!rM(y=t[p])&&y.linePoints){d=y.label,f=y.linePoints;var v="edge"===y.labelAlignTo,m=d.style.padding,x=m?m[1]+m[3]:0,_=d.style.backgroundColor?0:x,b=y.rect.width+_,w=f[1][0]-f[2][0];v?d.x<e?f[2][0]=a+y.edgeDistance+b+y.labelDistance:f[2][0]=a+r-y.edgeDistance-b-y.labelDistance:(d.x<e?f[2][0]=d.x+y.labelDistance:f[2][0]=d.x-y.labelDistance,f[1][0]=f[2][0]+w),f[1][1]=f[2][1]=d.y}}}(r,e,n,l,u,p,h,c);for(var f=0;f<r.length;f++){var g=r[f],y=g.label,v=g.labelLine,m=isNaN(y.x)||isNaN(y.y);if(y){y.setStyle({align:g.textAlign}),m&&(E(y.states,d),y.ignore=!0);var x=y.states.select;x&&(x.x+=y.x,x.y+=y.y)}if(v){var _=g.linePoints;m||!_?(E(v.states,d),v.ignore=!0):(ub(_,g.minTurnAngle),hb(_,g.surfaceNormal,g.maxSurfaceAngle),v.setShape({points:_}),y.__hostTarget.textGuideLineConfig={anchor:new Ji(_[0][0],_[0][1])})}}}function aM(t,e,n){var i=t.get("borderRadius");if(null==i)return n?{cornerRadius:0}:null;Y(i)||(i=[i,i,i,i]);var r=Math.abs(e.r||0-e.r0||0);return{cornerRadius:z(i,(function(t){return gr(t,r)}))}}var sM=function(t){function e(e,n,i){var r=t.call(this)||this;r.z2=2;var o=new ks;return r.setTextContent(o),r.updateData(e,n,i,!0),r}return n(e,t),e.prototype.updateData=function(t,e,n,i){var r=this,o=t.hostModel,a=t.getItemModel(e),s=a.getModel("emphasis"),l=t.getItemLayout(e),u=A(aM(a.getModel("itemStyle"),l,!0),l);if(isNaN(u.startAngle))r.setShape(u);else{if(i){r.setShape(u);var h=o.getShallow("animationType");o.ecModel.ssr?(oh(r,{scaleX:0,scaleY:0},o,{dataIndex:e,isFrom:!0}),r.originX=u.cx,r.originY=u.cy):"scale"===h?(r.shape.r=l.r0,oh(r,{shape:{r:l.r}},o,e)):null!=n?(r.setShape({startAngle:n,endAngle:n}),oh(r,{shape:{startAngle:l.startAngle,endAngle:l.endAngle}},o,e)):(r.shape.endAngle=l.startAngle,rh(r,{shape:{endAngle:l.endAngle}},o,e))}else hh(r),rh(r,{shape:u},o,e);r.useStyle(t.getItemVisual(e,"style")),Vl(r,a);var c=(l.startAngle+l.endAngle)/2,p=o.get("selectedOffset"),d=Math.cos(c)*p,f=Math.sin(c)*p,g=a.getShallow("cursor");g&&r.attr("cursor",g),this._updateLabel(o,t,e),r.ensureState("emphasis").shape=A({r:l.r+(s.get("scale")&&s.get("scaleSize")||0)},aM(s.getModel("itemStyle"),l)),A(r.ensureState("select"),{x:d,y:f,shape:aM(a.getModel(["select","itemStyle"]),l)}),A(r.ensureState("blur"),{shape:aM(a.getModel(["blur","itemStyle"]),l)});var y=r.getTextGuideLine(),v=r.getTextContent();y&&A(y.ensureState("select"),{x:d,y:f}),A(v.ensureState("select"),{x:d,y:f}),Rl(this,s.get("focus"),s.get("blurScope"),s.get("disabled"))}},e.prototype._updateLabel=function(t,e,n){var i=this,r=e.getItemModel(n),o=r.getModel("labelLine"),a=e.getItemVisual(n,"style"),s=a&&a.fill,l=a&&a.opacity;Hh(i,Yh(r),{labelFetcher:e.hostModel,labelDataIndex:n,inheritColor:s,defaultOpacity:l,defaultText:t.getFormattedLabel(n,"normal")||e.getName(n)});var u=i.getTextContent();i.setTextConfig({position:null,rotation:null}),u.attr({z2:10});var h=t.get(["label","position"]);if("outside"!==h&&"outer"!==h)i.removeTextGuideLine();else{var c=this.getTextGuideLine();c||(c=new Ru,this.setTextGuideLine(c)),db(this,fb(r),{stroke:s,opacity:ot(o.get(["lineStyle","opacity"]),l,1)})}},e}(Cu),lM=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.ignoreLabelLineUpdate=!0,e}return n(e,t),e.prototype.render=function(t,e,n,i){var r,o=t.getData(),a=this._data,s=this.group;if(!a&&o.count()>0){for(var l=o.getItemLayout(0),u=1;isNaN(l&&l.startAngle)&&u<o.count();++u)l=o.getItemLayout(u);l&&(r=l.startAngle)}if(this._emptyCircleSector&&s.remove(this._emptyCircleSector),0===o.count()&&t.get("showEmptyCircle")){var h=new Cu({shape:JS(t,n)});h.useStyle(t.getModel("emptyCircleStyle").getItemStyle()),this._emptyCircleSector=h,s.add(h)}o.diff(a).add((function(t){var e=new sM(o,t,r);o.setItemGraphicEl(t,e),s.add(e)})).update((function(t,e){var n=a.getItemGraphicEl(e);n.updateData(o,t,r),n.off("click"),s.add(n),o.setItemGraphicEl(t,n)})).remove((function(e){uh(a.getItemGraphicEl(e),t,e)})).execute(),oM(t),"expansion"!==t.get("animationTypeUpdate")&&(this._data=o)},e.prototype.dispose=function(){},e.prototype.containPoint=function(t,e){var n=e.getData().getItemLayout(0);if(n){var i=t[0]-n.cx,r=t[1]-n.cy,o=Math.sqrt(i*i+r*r);return o<=n.r&&o>=n.r0}},e.type="pie",e}(xg);function uM(t,e,n){e=Y(e)&&{coordDimensions:e}||A({encodeDefine:t.getEncode()},e);var i=t.getSource(),r=Km(i,e).dimensions,o=new qm(r,t);return o.initData(i,n),o}var hM=function(){function t(t,e){this._getDataWithEncodedVisual=t,this._getRawData=e}return t.prototype.getAllNames=function(){var t=this._getRawData();return t.mapArray(t.getName)},t.prototype.containName=function(t){return this._getRawData().indexOfName(t)>=0},t.prototype.indexOfName=function(t){return this._getDataWithEncodedVisual().indexOfName(t)},t.prototype.getItemVisual=function(t,e){return this._getDataWithEncodedVisual().getItemVisual(t,e)},t}(),cM=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.init=function(e){t.prototype.init.apply(this,arguments),this.legendVisualProvider=new hM(W(this.getData,this),W(this.getRawData,this)),this._defaultLabelLine(e)},e.prototype.mergeOption=function(){t.prototype.mergeOption.apply(this,arguments)},e.prototype.getInitialData=function(){return uM(this,{coordDimensions:["value"],encodeDefaulter:H(Yp,this)})},e.prototype.getDataParams=function(e){var n=this.getData(),i=t.prototype.getDataParams.call(this,e),r=[];return n.each(n.mapDimension("value"),(function(t){r.push(t)})),i.percent=Wr(r,e,n.hostModel.get("percentPrecision")),i.$vars.push("percent"),i},e.prototype._defaultLabelLine=function(t){co(t,"labelLine",["show"]);var e=t.labelLine,n=t.emphasis.labelLine;e.show=e.show&&t.label.show,n.show=n.show&&t.emphasis.label.show},e.type="series.pie",e.defaultOption={z:2,legendHoverLink:!0,colorBy:"data",center:["50%","50%"],radius:[0,"75%"],clockwise:!0,startAngle:90,minAngle:0,minShowLabelAngle:0,selectedOffset:10,percentPrecision:2,stillShowZeroSum:!0,left:0,top:0,right:0,bottom:0,width:null,height:null,label:{rotate:0,show:!0,overflow:"truncate",position:"outer",alignTo:"none",edgeDistance:"25%",bleedMargin:10,distanceToLabelLine:5},labelLine:{show:!0,length:15,length2:15,smooth:!1,minTurnAngle:90,maxSurfaceAngle:90,lineStyle:{width:1,type:"solid"}},itemStyle:{borderWidth:1,borderJoin:"round"},showEmptyCircle:!0,emptyCircleStyle:{color:"lightgray",opacity:1},labelLayout:{hideOverlap:!0},emphasis:{scale:!0,scaleSize:5},avoidLabelOverlap:!0,animationType:"expansion",animationDuration:1e3,animationTypeUpdate:"transition",animationEasingUpdate:"cubicInOut",animationDurationUpdate:500,animationEasing:"cubicInOut"},e}(sg);var pM=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n}return n(e,t),e.prototype.getInitialData=function(t,e){return rx(null,this,{useEncodeDefaulter:!0})},e.prototype.getProgressive=function(){var t=this.option.progressive;return null==t?this.option.large?5e3:this.get("progressive"):t},e.prototype.getProgressiveThreshold=function(){var t=this.option.progressiveThreshold;return null==t?this.option.large?1e4:this.get("progressiveThreshold"):t},e.prototype.brushSelector=function(t,e,n){return n.point(e.getItemLayout(t))},e.prototype.getZLevelKey=function(){return this.getData().count()>this.getProgressiveThreshold()?this.id:""},e.type="series.scatter",e.dependencies=["grid","polar","geo","singleAxis","calendar"],e.defaultOption={coordinateSystem:"cartesian2d",z:2,legendHoverLink:!0,symbolSize:10,large:!1,largeThreshold:2e3,itemStyle:{opacity:.8},emphasis:{scale:!0},clip:!0,select:{itemStyle:{borderColor:"#212121"}},universalTransition:{divideShape:"clone"}},e}(sg),dM=function(){},fM=function(t){function e(e){var n=t.call(this,e)||this;return n._off=0,n.hoverDataIdx=-1,n}return n(e,t),e.prototype.getDefaultShape=function(){return new dM},e.prototype.reset=function(){this.notClear=!1,this._off=0},e.prototype.buildPath=function(t,e){var n,i=e.points,r=e.size,o=this.symbolProxy,a=o.shape,s=t.getContext?t.getContext():t,l=s&&r[0]<4,u=this.softClipShape;if(l)this._ctx=s;else{for(this._ctx=null,n=this._off;n<i.length;){var h=i[n++],c=i[n++];isNaN(h)||isNaN(c)||(u&&!u.contain(h,c)||(a.x=h-r[0]/2,a.y=c-r[1]/2,a.width=r[0],a.height=r[1],o.buildPath(t,a,!0)))}this.incremental&&(this._off=n,this.notClear=!0)}},e.prototype.afterBrush=function(){var t,e=this.shape,n=e.points,i=e.size,r=this._ctx,o=this.softClipShape;if(r){for(t=this._off;t<n.length;){var a=n[t++],s=n[t++];isNaN(a)||isNaN(s)||(o&&!o.contain(a,s)||r.fillRect(a-i[0]/2,s-i[1]/2,i[0],i[1]))}this.incremental&&(this._off=t,this.notClear=!0)}},e.prototype.findDataIndex=function(t,e){for(var n=this.shape,i=n.points,r=n.size,o=Math.max(r[0],4),a=Math.max(r[1],4),s=i.length/2-1;s>=0;s--){var l=2*s,u=i[l]-o/2,h=i[l+1]-a/2;if(t>=u&&e>=h&&t<=u+o&&e<=h+a)return s}return-1},e.prototype.contain=function(t,e){var n=this.transformCoordToLocal(t,e),i=this.getBoundingRect();return t=n[0],e=n[1],i.contain(t,e)?(this.hoverDataIdx=this.findDataIndex(t,e))>=0:(this.hoverDataIdx=-1,!1)},e.prototype.getBoundingRect=function(){var t=this._rect;if(!t){for(var e=this.shape,n=e.points,i=e.size,r=i[0],o=i[1],a=1/0,s=1/0,l=-1/0,u=-1/0,h=0;h<n.length;){var c=n[h++],p=n[h++];a=Math.min(c,a),l=Math.max(c,l),s=Math.min(p,s),u=Math.max(p,u)}t=this._rect=new sr(a-r/2,s-o/2,l-a+r,u-s+o)}return t},e}(gs),gM=function(){function t(){this.group=new Cr}return t.prototype.updateData=function(t,e){this._clear();var n=this._create();n.setShape({points:t.getLayout("points")}),this._setCommon(n,t,e)},t.prototype.updateLayout=function(t){var e=t.getLayout("points");this.group.eachChild((function(t){if(null!=t.startIndex){var n=2*(t.endIndex-t.startIndex),i=4*t.startIndex*2;e=new Float32Array(e.buffer,i,n)}t.setShape("points",e),t.reset()}))},t.prototype.incrementalPrepareUpdate=function(t){this._clear()},t.prototype.incrementalUpdate=function(t,e,n){var i=this._newAdded[0],r=e.getLayout("points"),o=i&&i.shape.points;if(o&&o.length<2e4){var a=o.length,s=new Float32Array(a+r.length);s.set(o),s.set(r,a),i.endIndex=t.end,i.setShape({points:s})}else{this._newAdded=[];var l=this._create();l.startIndex=t.start,l.endIndex=t.end,l.incremental=!0,l.setShape({points:r}),this._setCommon(l,e,n)}},t.prototype.eachRendered=function(t){this._newAdded[0]&&t(this._newAdded[0])},t.prototype._create=function(){var t=new fM({cursor:"default"});return this.group.add(t),this._newAdded.push(t),t},t.prototype._setCommon=function(t,e,n){var i=e.hostModel;n=n||{};var r=e.getVisual("symbolSize");t.setShape("size",r instanceof Array?r:[r,r]),t.softClipShape=n.clipShape||null,t.symbolProxy=Ly(e.getVisual("symbol"),0,0,0,0),t.setColor=t.symbolProxy.setColor;var o=t.shape.size[0]<4;t.useStyle(i.getModel("itemStyle").getItemStyle(o?["color","shadowBlur","shadowColor"]:["color"]));var a=e.getVisual("style"),s=a&&a.fill;s&&t.setColor(s);var l=Hs(t);l.seriesIndex=i.seriesIndex,t.on("mousemove",(function(e){l.dataIndex=null;var n=t.hoverDataIdx;n>=0&&(l.dataIndex=n+(t.startIndex||0))}))},t.prototype.remove=function(){this._clear()},t.prototype._clear=function(){this._newAdded=[],this.group.removeAll()},t}(),yM=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.getData();this._updateSymbolDraw(i,t).updateData(i,{clipShape:this._getClipShape(t)}),this._finished=!0},e.prototype.incrementalPrepareRender=function(t,e,n){var i=t.getData();this._updateSymbolDraw(i,t).incrementalPrepareUpdate(i),this._finished=!1},e.prototype.incrementalRender=function(t,e,n){this._symbolDraw.incrementalUpdate(t,e.getData(),{clipShape:this._getClipShape(e)}),this._finished=t.end===e.getData().count()},e.prototype.updateTransform=function(t,e,n){var i=t.getData();if(this.group.dirty(),!this._finished||i.count()>1e4)return{update:!0};var r=bS("").reset(t,e,n);r.progress&&r.progress({start:0,end:i.count(),count:i.count()},i),this._symbolDraw.updateLayout(i)},e.prototype.eachRendered=function(t){this._symbolDraw&&this._symbolDraw.eachRendered(t)},e.prototype._getClipShape=function(t){var e=t.coordinateSystem,n=e&&e.getArea&&e.getArea();return t.get("clip",!0)?n:null},e.prototype._updateSymbolDraw=function(t,e){var n=this._symbolDraw,i=e.pipelineContext.large;return n&&i===this._isLargeDraw||(n&&n.remove(),n=this._symbolDraw=i?new gM:new qw,this._isLargeDraw=i,this.group.removeAll()),this.group.add(n.group),n},e.prototype.remove=function(t,e){this._symbolDraw&&this._symbolDraw.remove(!0),this._symbolDraw=null},e.prototype.dispose=function(){},e.type="scatter",e}(xg),vM=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.type="grid",e.dependencies=["xAxis","yAxis"],e.layoutMode="box",e.defaultOption={show:!1,z:0,left:"10%",top:60,right:"10%",bottom:70,containLabel:!1,backgroundColor:"rgba(0,0,0,0)",borderWidth:1,borderColor:"#ccc"},e}(Tp),mM=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.getCoordSysModel=function(){return this.getReferringComponents("grid",Co).models[0]},e.type="cartesian2dAxis",e}(Tp);R(mM,p_);var xM={show:!0,z:0,inverse:!1,name:"",nameLocation:"end",nameRotate:null,nameTruncate:{maxWidth:null,ellipsis:"...",placeholder:"."},nameTextStyle:{},nameGap:15,silent:!1,triggerEvent:!1,tooltip:{show:!1},axisPointer:{},axisLine:{show:!0,onZero:!0,onZeroAxisIndex:null,lineStyle:{color:"#6E7079",width:1,type:"solid"},symbol:["none","none"],symbolSize:[10,15]},axisTick:{show:!0,inside:!1,length:5,lineStyle:{width:1}},axisLabel:{show:!0,inside:!1,rotate:0,showMinLabel:null,showMaxLabel:null,margin:8,fontSize:12},splitLine:{show:!0,lineStyle:{color:["#E0E6F1"],width:1,type:"solid"}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.2)","rgba(210,219,238,0.2)"]}}},_M=C({boundaryGap:!0,deduplication:null,splitLine:{show:!1},axisTick:{alignWithLabel:!1,interval:"auto"},axisLabel:{interval:"auto"}},xM),bM=C({boundaryGap:[0,0],axisLine:{show:"auto"},axisTick:{show:"auto"},splitNumber:5,minorTick:{show:!1,splitNumber:5,length:3,lineStyle:{}},minorSplitLine:{show:!1,lineStyle:{color:"#F4F7FD",width:1}}},xM),wM={category:_M,value:bM,time:C({splitNumber:6,axisLabel:{showMinLabel:!1,showMaxLabel:!1,rich:{primary:{fontWeight:"bold"}}},splitLine:{show:!1}},bM),log:k({logBase:10},bM)},SM={value:1,category:1,time:1,log:1};function MM(t,e,i,r){E(SM,(function(o,a){var s=C(C({},wM[a],!0),r,!0),l=function(t){function i(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e+"Axis."+a,n}return n(i,t),i.prototype.mergeDefaultAndTheme=function(t,e){var n=bp(this),i=n?Sp(t):{};C(t,e.getTheme().get(a+"Axis")),C(t,this.getDefaultOption()),t.type=IM(t),n&&wp(t,i,n)},i.prototype.optionUpdated=function(){"category"===this.option.type&&(this.__ordinalMeta=sx.createByAxisModel(this))},i.prototype.getCategories=function(t){var e=this.option;if("category"===e.type)return t?e.data:this.__ordinalMeta.categories},i.prototype.getOrdinalMeta=function(){return this.__ordinalMeta},i.type=e+"Axis."+a,i.defaultOption=s,i}(i);t.registerComponentModel(l)})),t.registerSubTypeDefaulter(e+"Axis",IM)}function IM(t){return t.type||(t.data?"category":"value")}var TM=function(){function t(t){this.type="cartesian",this._dimList=[],this._axes={},this.name=t||""}return t.prototype.getAxis=function(t){return this._axes[t]},t.prototype.getAxes=function(){return z(this._dimList,(function(t){return this._axes[t]}),this)},t.prototype.getAxesByScale=function(t){return t=t.toLowerCase(),B(this.getAxes(),(function(e){return e.scale.type===t}))},t.prototype.addAxis=function(t){var e=t.dim;this._axes[e]=t,this._dimList.push(e)},t}(),CM=["x","y"];function DM(t){return"interval"===t.type||"time"===t.type}var AM=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="cartesian2d",e.dimensions=CM,e}return n(e,t),e.prototype.calcAffineTransform=function(){this._transform=this._invTransform=null;var t=this.getAxis("x").scale,e=this.getAxis("y").scale;if(DM(t)&&DM(e)){var n=t.getExtent(),i=e.getExtent(),r=this.dataToPoint([n[0],i[0]]),o=this.dataToPoint([n[1],i[1]]),a=n[1]-n[0],s=i[1]-i[0];if(a&&s){var l=(o[0]-r[0])/a,u=(o[1]-r[1])/s,h=r[0]-n[0]*l,c=r[1]-i[0]*u,p=this._transform=[l,0,0,u,h,c];this._invTransform=Bi([],p)}}},e.prototype.getBaseAxis=function(){return this.getAxesByScale("ordinal")[0]||this.getAxesByScale("time")[0]||this.getAxis("x")},e.prototype.containPoint=function(t){var e=this.getAxis("x"),n=this.getAxis("y");return e.contain(e.toLocalCoord(t[0]))&&n.contain(n.toLocalCoord(t[1]))},e.prototype.containData=function(t){return this.getAxis("x").containData(t[0])&&this.getAxis("y").containData(t[1])},e.prototype.containZone=function(t,e){var n=this.dataToPoint(t),i=this.dataToPoint(e),r=this.getArea(),o=new sr(n[0],n[1],i[0]-n[0],i[1]-n[1]);return r.intersect(o)},e.prototype.dataToPoint=function(t,e,n){n=n||[];var i=t[0],r=t[1];if(this._transform&&null!=i&&isFinite(i)&&null!=r&&isFinite(r))return Ft(n,t,this._transform);var o=this.getAxis("x"),a=this.getAxis("y");return n[0]=o.toGlobalCoord(o.dataToCoord(i,e)),n[1]=a.toGlobalCoord(a.dataToCoord(r,e)),n},e.prototype.clampData=function(t,e){var n=this.getAxis("x").scale,i=this.getAxis("y").scale,r=n.getExtent(),o=i.getExtent(),a=n.parse(t[0]),s=i.parse(t[1]);return(e=e||[])[0]=Math.min(Math.max(Math.min(r[0],r[1]),a),Math.max(r[0],r[1])),e[1]=Math.min(Math.max(Math.min(o[0],o[1]),s),Math.max(o[0],o[1])),e},e.prototype.pointToData=function(t,e){var n=[];if(this._invTransform)return Ft(n,t,this._invTransform);var i=this.getAxis("x"),r=this.getAxis("y");return n[0]=i.coordToData(i.toLocalCoord(t[0]),e),n[1]=r.coordToData(r.toLocalCoord(t[1]),e),n},e.prototype.getOtherAxis=function(t){return this.getAxis("x"===t.dim?"y":"x")},e.prototype.getArea=function(){var t=this.getAxis("x").getGlobalExtent(),e=this.getAxis("y").getGlobalExtent(),n=Math.min(t[0],t[1]),i=Math.min(e[0],e[1]),r=Math.max(t[0],t[1])-n,o=Math.max(e[0],e[1])-i;return new sr(n,i,r,o)},e}(TM),kM=function(t){function e(e,n,i,r,o){var a=t.call(this,e,n,i)||this;return a.index=0,a.type=r||"value",a.position=o||"bottom",a}return n(e,t),e.prototype.isHorizontal=function(){var t=this.position;return"top"===t||"bottom"===t},e.prototype.getGlobalExtent=function(t){var e=this.getExtent();return e[0]=this.toGlobalCoord(e[0]),e[1]=this.toGlobalCoord(e[1]),t&&e[0]>e[1]&&e.reverse(),e},e.prototype.pointToData=function(t,e){return this.coordToData(this.toLocalCoord(t["x"===this.dim?0:1]),e)},e.prototype.setCategorySortInfo=function(t){if("category"!==this.type)return!1;this.model.option.categorySortInfo=t,this.scale.setSortInfo(t)},e}(H_);function LM(t,e,n){n=n||{};var i=t.coordinateSystem,r=e.axis,o={},a=r.getAxesOnZeroOf()[0],s=r.position,l=a?"onZero":s,u=r.dim,h=i.getRect(),c=[h.x,h.x+h.width,h.y,h.y+h.height],p={left:0,right:1,top:0,bottom:1,onZero:2},d=e.get("offset")||0,f="x"===u?[c[2]-d,c[3]+d]:[c[0]-d,c[1]+d];if(a){var g=a.toGlobalCoord(a.dataToCoord(0));f[p.onZero]=Math.max(Math.min(g,f[1]),f[0])}o.position=["y"===u?f[p[l]]:c[0],"x"===u?f[p[l]]:c[3]],o.rotation=Math.PI/2*("x"===u?0:1);o.labelDirection=o.tickDirection=o.nameDirection={top:-1,bottom:1,left:-1,right:1}[s],o.labelOffset=a?f[p[s]]-f[p.onZero]:0,e.get(["axisTick","inside"])&&(o.tickDirection=-o.tickDirection),it(n.labelInside,e.get(["axisLabel","inside"]))&&(o.labelDirection=-o.labelDirection);var y=e.get(["axisLabel","rotate"]);return o.labelRotate="top"===l?-y:y,o.z2=1,o}function PM(t){return"cartesian2d"===t.get("coordinateSystem")}function OM(t){var e={xAxisModel:null,yAxisModel:null};return E(e,(function(n,i){var r=i.replace(/Model$/,""),o=t.getReferringComponents(r,Co).models[0];e[i]=o})),e}var RM=Math.log;function NM(t,e,n){var i=xx.prototype,r=i.getTicks.call(n),o=i.getTicks.call(n,!0),a=r.length-1,s=i.getInterval.call(n),l=i_(t,e),u=l.extent,h=l.fixMin,c=l.fixMax;if("log"===t.type){var p=RM(t.base);u=[RM(u[0])/p,RM(u[1])/p]}t.setExtent(u[0],u[1]),t.calcNiceExtent({splitNumber:a,fixMin:h,fixMax:c});var d=i.getExtent.call(t);h&&(u[0]=d[0]),c&&(u[1]=d[1]);var f=i.getInterval.call(t),g=u[0],y=u[1];if(h&&c)f=(y-g)/a;else if(h)for(y=u[0]+f*a;y<u[1]&&isFinite(y)&&isFinite(u[1]);)f=cx(f),y=u[0]+f*a;else if(c)for(g=u[1]-f*a;g>u[0]&&isFinite(g)&&isFinite(u[0]);)f=cx(f),g=u[1]-f*a;else{t.getTicks().length-1>a&&(f=cx(f));var v=f*a;(g=zr((y=Math.ceil(u[1]/f)*f)-v))<0&&u[0]>=0?(g=0,y=zr(v)):y>0&&u[1]<=0&&(y=0,g=-zr(v))}var m=(r[0].value-o[0].value)/s,x=(r[a].value-o[a].value)/s;i.setExtent.call(t,g+f*m,y+f*x),i.setInterval.call(t,f),(m||x)&&i.setNiceExtent.call(t,g+f,y-f)}var EM=function(){function t(t,e,n){this.type="grid",this._coordsMap={},this._coordsList=[],this._axesMap={},this._axesList=[],this.axisPointerEnabled=!0,this.dimensions=CM,this._initCartesian(t,e,n),this.model=t}return t.prototype.getRect=function(){return this._rect},t.prototype.update=function(t,e){var n=this._axesMap;function i(t){var e,n=G(t),i=n.length;if(i){for(var r=[],o=i-1;o>=0;o--){var a=t[+n[o]],s=a.model,l=a.scale;ux(l)&&s.get("alignTicks")&&null==s.get("interval")?r.push(a):(r_(l,s),ux(l)&&(e=a))}r.length&&(e||r_((e=r.pop()).scale,e.model),E(r,(function(t){NM(t.scale,t.model,e.scale)})))}}this._updateScale(t,this.model),i(n.x),i(n.y);var r={};E(n.x,(function(t){VM(n,"y",t,r)})),E(n.y,(function(t){VM(n,"x",t,r)})),this.resize(this.model,e)},t.prototype.resize=function(t,e,n){var i=t.getBoxLayoutParams(),r=!n&&t.get("containLabel"),o=xp(i,{width:e.getWidth(),height:e.getHeight()});this._rect=o;var a=this._axesList;function s(){E(a,(function(t){var e=t.isHorizontal(),n=e?[0,o.width]:[0,o.height],i=t.inverse?1:0;t.setExtent(n[i],n[1-i]),function(t,e){var n=t.getExtent(),i=n[0]+n[1];t.toGlobalCoord="x"===t.dim?function(t){return t+e}:function(t){return i-t+e},t.toLocalCoord="x"===t.dim?function(t){return t-e}:function(t){return i-t+e}}(t,e?o.x:o.y)}))}s(),r&&(E(a,(function(t){if(!t.model.get(["axisLabel","inside"])){var e=function(t){var e=t.model,n=t.scale;if(e.get(["axisLabel","show"])&&!n.isBlank()){var i,r,o=n.getExtent();r=n instanceof vx?n.count():(i=n.getTicks()).length;var a,s=t.getLabelModel(),l=a_(t),u=1;r>40&&(u=Math.ceil(r/40));for(var h=0;h<r;h+=u){var c=l(i?i[h]:{value:o[0]+h},h),p=l_(s.getTextRect(c),s.get("rotate")||0);a?a.union(p):a=p}return a}}(t);if(e){var n=t.isHorizontal()?"height":"width",i=t.model.get(["axisLabel","margin"]);o[n]-=e[n]+i,"top"===t.position?o.y+=e.height+i:"left"===t.position&&(o.x+=e.width+i)}}})),s()),E(this._coordsList,(function(t){t.calcAffineTransform()}))},t.prototype.getAxis=function(t,e){var n=this._axesMap[t];if(null!=n)return n[e||0]},t.prototype.getAxes=function(){return this._axesList.slice()},t.prototype.getCartesian=function(t,e){if(null!=t&&null!=e){var n="x"+t+"y"+e;return this._coordsMap[n]}q(t)&&(e=t.yAxisIndex,t=t.xAxisIndex);for(var i=0,r=this._coordsList;i<r.length;i++)if(r[i].getAxis("x").index===t||r[i].getAxis("y").index===e)return r[i]},t.prototype.getCartesians=function(){return this._coordsList.slice()},t.prototype.convertToPixel=function(t,e,n){var i=this._findConvertTarget(e);return i.cartesian?i.cartesian.dataToPoint(n):i.axis?i.axis.toGlobalCoord(i.axis.dataToCoord(n)):null},t.prototype.convertFromPixel=function(t,e,n){var i=this._findConvertTarget(e);return i.cartesian?i.cartesian.pointToData(n):i.axis?i.axis.coordToData(i.axis.toLocalCoord(n)):null},t.prototype._findConvertTarget=function(t){var e,n,i=t.seriesModel,r=t.xAxisModel||i&&i.getReferringComponents("xAxis",Co).models[0],o=t.yAxisModel||i&&i.getReferringComponents("yAxis",Co).models[0],a=t.gridModel,s=this._coordsList;if(i)P(s,e=i.coordinateSystem)<0&&(e=null);else if(r&&o)e=this.getCartesian(r.componentIndex,o.componentIndex);else if(r)n=this.getAxis("x",r.componentIndex);else if(o)n=this.getAxis("y",o.componentIndex);else if(a){a.coordinateSystem===this&&(e=this._coordsList[0])}return{cartesian:e,axis:n}},t.prototype.containPoint=function(t){var e=this._coordsList[0];if(e)return e.containPoint(t)},t.prototype._initCartesian=function(t,e,n){var i=this,r=this,o={left:!1,right:!1,top:!1,bottom:!1},a={x:{},y:{}},s={x:0,y:0};if(e.eachComponent("xAxis",l("x"),this),e.eachComponent("yAxis",l("y"),this),!s.x||!s.y)return this._axesMap={},void(this._axesList=[]);function l(e){return function(n,i){if(zM(n,t)){var l=n.get("position");"x"===e?"top"!==l&&"bottom"!==l&&(l=o.bottom?"top":"bottom"):"left"!==l&&"right"!==l&&(l=o.left?"right":"left"),o[l]=!0;var u=new kM(e,o_(n),[0,0],n.get("type"),l),h="category"===u.type;u.onBand=h&&n.get("boundaryGap"),u.inverse=n.get("inverse"),n.axis=u,u.model=n,u.grid=r,u.index=i,r._axesList.push(u),a[e][i]=u,s[e]++}}}this._axesMap=a,E(a.x,(function(e,n){E(a.y,(function(r,o){var a="x"+n+"y"+o,s=new AM(a);s.master=i,s.model=t,i._coordsMap[a]=s,i._coordsList.push(s),s.addAxis(e),s.addAxis(r)}))}))},t.prototype._updateScale=function(t,e){function n(t,e){E(c_(t,e.dim),(function(n){e.scale.unionExtentFromData(t,n)}))}E(this._axesList,(function(t){if(t.scale.setExtent(1/0,-1/0),"category"===t.type){var e=t.model.get("categorySortInfo");t.scale.setSortInfo(e)}})),t.eachSeries((function(t){if(PM(t)){var i=OM(t),r=i.xAxisModel,o=i.yAxisModel;if(!zM(r,e)||!zM(o,e))return;var a=this.getCartesian(r.componentIndex,o.componentIndex),s=t.getData(),l=a.getAxis("x"),u=a.getAxis("y");n(s,l),n(s,u)}}),this)},t.prototype.getTooltipAxes=function(t){var e=[],n=[];return E(this.getCartesians(),(function(i){var r=null!=t&&"auto"!==t?i.getAxis(t):i.getBaseAxis(),o=i.getOtherAxis(r);P(e,r)<0&&e.push(r),P(n,o)<0&&n.push(o)})),{baseAxes:e,otherAxes:n}},t.create=function(e,n){var i=[];return e.eachComponent("grid",(function(r,o){var a=new t(r,e,n);a.name="grid_"+o,a.resize(r,n,!0),r.coordinateSystem=a,i.push(a)})),e.eachSeries((function(t){if(PM(t)){var e=OM(t),n=e.xAxisModel,i=e.yAxisModel,r=n.getCoordSysModel();0;var o=r.coordinateSystem;t.coordinateSystem=o.getCartesian(n.componentIndex,i.componentIndex)}})),i},t.dimensions=CM,t}();function zM(t,e){return t.getCoordSysModel()===e}function VM(t,e,n,i){n.getAxesOnZeroOf=function(){return r?[r]:[]};var r,o=t[e],a=n.model,s=a.get(["axisLine","onZero"]),l=a.get(["axisLine","onZeroAxisIndex"]);if(s){if(null!=l)BM(o[l])&&(r=o[l]);else for(var u in o)if(o.hasOwnProperty(u)&&BM(o[u])&&!i[h(o[u])]){r=o[u];break}r&&(i[h(r)]=!0)}function h(t){return t.dim+"_"+t.index}}function BM(t){return t&&"category"!==t.type&&"time"!==t.type&&function(t){var e=t.scale.getExtent(),n=e[0],i=e[1];return!(n>0&&i>0||n<0&&i<0)}(t)}var FM=Math.PI,GM=function(){function t(t,e){this.group=new Cr,this.opt=e,this.axisModel=t,k(e,{labelOffset:0,nameDirection:1,tickDirection:1,labelDirection:1,silent:!0,handleAutoShown:function(){return!0}});var n=new Cr({x:e.position[0],y:e.position[1],rotation:e.rotation});n.updateTransform(),this._transformGroup=n}return t.prototype.hasBuilder=function(t){return!!WM[t]},t.prototype.add=function(t){WM[t](this.opt,this.axisModel,this.group,this._transformGroup)},t.prototype.getGroup=function(){return this.group},t.innerTextLayout=function(t,e,n){var i,r,o=Ur(e-t);return Xr(o)?(r=n>0?"top":"bottom",i="center"):Xr(o-FM)?(r=n>0?"bottom":"top",i="center"):(r="middle",i=o>0&&o<FM?n>0?"right":"left":n>0?"left":"right"),{rotation:o,textAlign:i,textVerticalAlign:r}},t.makeAxisEventDataBase=function(t){var e={componentType:t.mainType,componentIndex:t.componentIndex};return e[t.mainType+"Index"]=t.componentIndex,e},t.isLabelSilent=function(t){var e=t.get("tooltip");return t.get("silent")||!(t.get("triggerEvent")||e&&e.show)},t}(),WM={axisLine:function(t,e,n,i){var r=e.get(["axisLine","show"]);if("auto"===r&&t.handleAutoShown&&(r=t.handleAutoShown("axisLine")),r){var o=e.axis.getExtent(),a=i.transform,s=[o[0],0],l=[o[1],0];a&&(Ft(s,s,a),Ft(l,l,a));var u=A({lineCap:"round"},e.getModel(["axisLine","lineStyle"]).getLineStyle()),h=new zu({subPixelOptimize:!0,shape:{x1:s[0],y1:s[1],x2:l[0],y2:l[1]},style:u,strokeContainThreshold:t.strokeContainThreshold||5,silent:!0,z2:1});h.anid="line",n.add(h);var c=e.get(["axisLine","symbol"]);if(null!=c){var p=e.get(["axisLine","symbolSize"]);X(c)&&(c=[c,c]),(X(p)||j(p))&&(p=[p,p]);var d=Oy(e.get(["axisLine","symbolOffset"])||0,p),f=p[0],g=p[1];E([{rotate:t.rotation+Math.PI/2,offset:d[0],r:0},{rotate:t.rotation-Math.PI/2,offset:d[1],r:Math.sqrt((s[0]-l[0])*(s[0]-l[0])+(s[1]-l[1])*(s[1]-l[1]))}],(function(e,i){if("none"!==c[i]&&null!=c[i]){var r=Ly(c[i],-f/2,-g/2,f,g,u.stroke,!0),o=e.r+e.offset;r.attr({rotation:e.rotate,x:s[0]+o*Math.cos(t.rotation),y:s[1]-o*Math.sin(t.rotation),silent:!0,z2:11}),n.add(r)}}))}}},axisTickLabel:function(t,e,n,i){var r=function(t,e,n,i){var r=n.axis,o=n.getModel("axisTick"),a=o.get("show");"auto"===a&&i.handleAutoShown&&(a=i.handleAutoShown("axisTick"));if(!a||r.scale.isBlank())return;for(var s=o.getModel("lineStyle"),l=i.tickDirection*o.get("length"),u=XM(r.getTicksCoords(),e.transform,l,k(s.getLineStyle(),{stroke:n.get(["axisLine","lineStyle","color"])}),"ticks"),h=0;h<u.length;h++)t.add(u[h]);return u}(n,i,e,t),o=function(t,e,n,i){var r=n.axis;if(!it(i.axisLabelShow,n.get(["axisLabel","show"]))||r.scale.isBlank())return;var o=n.getModel("axisLabel"),a=o.get("margin"),s=r.getViewLabels(),l=(it(i.labelRotate,o.get("rotate"))||0)*FM/180,u=GM.innerTextLayout(i.rotation,l,i.labelDirection),h=n.getCategories&&n.getCategories(!0),c=[],p=GM.isLabelSilent(n),d=n.get("triggerEvent");return E(s,(function(s,l){var f="ordinal"===r.scale.type?r.scale.getRawOrdinalNumber(s.tickValue):s.tickValue,g=s.formattedLabel,y=s.rawLabel,v=o;if(h&&h[f]){var m=h[f];q(m)&&m.textStyle&&(v=new dc(m.textStyle,o,n.ecModel))}var x=v.getTextColor()||n.get(["axisLine","lineStyle","color"]),_=r.dataToCoord(f),b=new ks({x:_,y:i.labelOffset+i.labelDirection*a,rotation:u.rotation,silent:p,z2:10+(s.level||0),style:Uh(v,{text:g,align:v.getShallow("align",!0)||u.textAlign,verticalAlign:v.getShallow("verticalAlign",!0)||v.getShallow("baseline",!0)||u.textVerticalAlign,fill:U(x)?x("category"===r.type?y:"value"===r.type?f+"":f,l):x})});if(b.anid="label_"+f,d){var w=GM.makeAxisEventDataBase(n);w.targetType="axisLabel",w.value=y,w.tickIndex=l,"category"===r.type&&(w.dataIndex=f),Hs(b).eventData=w}e.add(b),b.updateTransform(),c.push(b),t.add(b),b.decomposeTransform()})),c}(n,i,e,t);(function(t,e,n){if(h_(t.axis))return;var i=t.get(["axisLabel","showMinLabel"]),r=t.get(["axisLabel","showMaxLabel"]);n=n||[];var o=(e=e||[])[0],a=e[1],s=e[e.length-1],l=e[e.length-2],u=n[0],h=n[1],c=n[n.length-1],p=n[n.length-2];!1===i?(HM(o),HM(u)):YM(o,a)&&(i?(HM(a),HM(h)):(HM(o),HM(u)));!1===r?(HM(s),HM(c)):YM(l,s)&&(r?(HM(l),HM(p)):(HM(s),HM(c)))}(e,o,r),function(t,e,n,i){var r=n.axis,o=n.getModel("minorTick");if(!o.get("show")||r.scale.isBlank())return;var a=r.getMinorTicksCoords();if(!a.length)return;for(var s=o.getModel("lineStyle"),l=i*o.get("length"),u=k(s.getLineStyle(),k(n.getModel("axisTick").getLineStyle(),{stroke:n.get(["axisLine","lineStyle","color"])})),h=0;h<a.length;h++)for(var c=XM(a[h],e.transform,l,u,"minorticks_"+h),p=0;p<c.length;p++)t.add(c[p])}(n,i,e,t.tickDirection),e.get(["axisLabel","hideOverlap"]))&&mb(gb(z(o,(function(t){return{label:t,priority:t.z2,defaultAttr:{ignore:t.ignore}}}))))},axisName:function(t,e,n,i){var r=it(t.axisName,e.get("name"));if(r){var o,a,s=e.get("nameLocation"),l=t.nameDirection,u=e.getModel("nameTextStyle"),h=e.get("nameGap")||0,c=e.axis.getExtent(),p=c[0]>c[1]?-1:1,d=["start"===s?c[0]-p*h:"end"===s?c[1]+p*h:(c[0]+c[1])/2,UM(s)?t.labelOffset+l*h:0],f=e.get("nameRotate");null!=f&&(f=f*FM/180),UM(s)?o=GM.innerTextLayout(t.rotation,null!=f?f:t.rotation,l):(o=function(t,e,n,i){var r,o,a=Ur(n-t),s=i[0]>i[1],l="start"===e&&!s||"start"!==e&&s;Xr(a-FM/2)?(o=l?"bottom":"top",r="center"):Xr(a-1.5*FM)?(o=l?"top":"bottom",r="center"):(o="middle",r=a<1.5*FM&&a>FM/2?l?"left":"right":l?"right":"left");return{rotation:a,textAlign:r,textVerticalAlign:o}}(t.rotation,s,f||0,c),null!=(a=t.axisNameAvailableWidth)&&(a=Math.abs(a/Math.sin(o.rotation)),!isFinite(a)&&(a=null)));var g=u.getFont(),y=e.get("nameTruncate",!0)||{},v=y.ellipsis,m=it(t.nameTruncateMaxWidth,y.maxWidth,a),x=new ks({x:d[0],y:d[1],rotation:o.rotation,silent:GM.isLabelSilent(e),style:Uh(u,{text:r,font:g,overflow:"truncate",width:m,ellipsis:v,fill:u.getTextColor()||e.get(["axisLine","lineStyle","color"]),align:u.get("align")||o.textAlign,verticalAlign:u.get("verticalAlign")||o.textVerticalAlign}),z2:1});if(Eh({el:x,componentModel:e,itemName:r}),x.__fullText=r,x.anid="name",e.get("triggerEvent")){var _=GM.makeAxisEventDataBase(e);_.targetType="axisName",_.name=r,Hs(x).eventData=_}i.add(x),x.updateTransform(),n.add(x),x.decomposeTransform()}}};function HM(t){t&&(t.ignore=!0)}function YM(t,e){var n=t&&t.getBoundingRect().clone(),i=e&&e.getBoundingRect().clone();if(n&&i){var r=Oi([]);return zi(r,r,-t.rotation),n.applyTransform(Ni([],r,t.getLocalTransform())),i.applyTransform(Ni([],r,e.getLocalTransform())),n.intersect(i)}}function UM(t){return"middle"===t||"center"===t}function XM(t,e,n,i,r){for(var o=[],a=[],s=[],l=0;l<t.length;l++){var u=t[l].coord;a[0]=u,a[1]=0,s[0]=u,s[1]=n,e&&(Ft(a,a,e),Ft(s,s,e));var h=new zu({subPixelOptimize:!0,shape:{x1:a[0],y1:a[1],x2:s[0],y2:s[1]},style:i,z2:2,autoBatch:!0,silent:!0});h.anid=r+"_"+t[l].tickValue,o.push(h)}return o}function ZM(t,e){var n={axesInfo:{},seriesInvolved:!1,coordSysAxesInfo:{},coordSysMap:{}};return function(t,e,n){var i=e.getComponent("tooltip"),r=e.getComponent("axisPointer"),o=r.get("link",!0)||[],a=[];E(n.getCoordinateSystems(),(function(n){if(n.axisPointerEnabled){var s=JM(n.model),l=t.coordSysAxesInfo[s]={};t.coordSysMap[s]=n;var u=n.model.getModel("tooltip",i);if(E(n.getAxes(),H(d,!1,null)),n.getTooltipAxes&&i&&u.get("show")){var h="axis"===u.get("trigger"),c="cross"===u.get(["axisPointer","type"]),p=n.getTooltipAxes(u.get(["axisPointer","axis"]));(h||c)&&E(p.baseAxes,H(d,!c||"cross",h)),c&&E(p.otherAxes,H(d,"cross",!1))}}function d(i,s,h){var c=h.model.getModel("axisPointer",r),p=c.get("show");if(p&&("auto"!==p||i||$M(c))){null==s&&(s=c.get("triggerTooltip"));var d=(c=i?function(t,e,n,i,r,o){var a=e.getModel("axisPointer"),s={};E(["type","snap","lineStyle","shadowStyle","label","animation","animationDurationUpdate","animationEasingUpdate","z"],(function(t){s[t]=T(a.get(t))})),s.snap="category"!==t.type&&!!o,"cross"===a.get("type")&&(s.type="line");var l=s.label||(s.label={});if(null==l.show&&(l.show=!1),"cross"===r){var u=a.get(["label","show"]);if(l.show=null==u||u,!o){var h=s.lineStyle=a.get("crossStyle");h&&k(l,h.textStyle)}}return t.model.getModel("axisPointer",new dc(s,n,i))}(h,u,r,e,i,s):c).get("snap"),f=JM(h.model),g=s||d||"category"===h.type,y=t.axesInfo[f]={key:f,axis:h,coordSys:n,axisPointerModel:c,triggerTooltip:s,involveSeries:g,snap:d,useHandle:$M(c),seriesModels:[],linkGroup:null};l[f]=y,t.seriesInvolved=t.seriesInvolved||g;var v=function(t,e){for(var n=e.model,i=e.dim,r=0;r<t.length;r++){var o=t[r]||{};if(jM(o[i+"AxisId"],n.id)||jM(o[i+"AxisIndex"],n.componentIndex)||jM(o[i+"AxisName"],n.name))return r}}(o,h);if(null!=v){var m=a[v]||(a[v]={axesInfo:{}});m.axesInfo[f]=y,m.mapper=o[v].mapper,y.linkGroup=m}}}}))}(n,t,e),n.seriesInvolved&&function(t,e){e.eachSeries((function(e){var n=e.coordinateSystem,i=e.get(["tooltip","trigger"],!0),r=e.get(["tooltip","show"],!0);n&&"none"!==i&&!1!==i&&"item"!==i&&!1!==r&&!1!==e.get(["axisPointer","show"],!0)&&E(t.coordSysAxesInfo[JM(n.model)],(function(t){var i=t.axis;n.getAxis(i.dim)===i&&(t.seriesModels.push(e),null==t.seriesDataCount&&(t.seriesDataCount=0),t.seriesDataCount+=e.getData().count())}))}))}(n,t),n}function jM(t,e){return"all"===t||Y(t)&&P(t,e)>=0||t===e}function qM(t){var e=KM(t);if(e){var n=e.axisPointerModel,i=e.axis.scale,r=n.option,o=n.get("status"),a=n.get("value");null!=a&&(a=i.parse(a));var s=$M(n);null==o&&(r.status=s?"show":"hide");var l=i.getExtent().slice();l[0]>l[1]&&l.reverse(),(null==a||a>l[1])&&(a=l[1]),a<l[0]&&(a=l[0]),r.value=a,s&&(r.status=e.axis.scale.isBlank()?"hide":"show")}}function KM(t){var e=(t.ecModel.getComponent("axisPointer")||{}).coordSysAxesInfo;return e&&e.axesInfo[JM(t)]}function $M(t){return!!t.get(["handle","show"])}function JM(t){return t.type+"||"+t.id}var QM={},tI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(e,n,i,r){this.axisPointerClass&&qM(e),t.prototype.render.apply(this,arguments),this._doUpdateAxisPointerClass(e,i,!0)},e.prototype.updateAxisPointer=function(t,e,n,i){this._doUpdateAxisPointerClass(t,n,!1)},e.prototype.remove=function(t,e){var n=this._axisPointer;n&&n.remove(e)},e.prototype.dispose=function(e,n){this._disposeAxisPointer(n),t.prototype.dispose.apply(this,arguments)},e.prototype._doUpdateAxisPointerClass=function(t,n,i){var r=e.getAxisPointerClass(this.axisPointerClass);if(r){var o=function(t){var e=KM(t);return e&&e.axisPointerModel}(t);o?(this._axisPointer||(this._axisPointer=new r)).render(t,o,n,i):this._disposeAxisPointer(n)}},e.prototype._disposeAxisPointer=function(t){this._axisPointer&&this._axisPointer.dispose(t),this._axisPointer=null},e.registerAxisPointerClass=function(t,e){QM[t]=e},e.getAxisPointerClass=function(t){return t&&QM[t]},e.type="axis",e}(gg),eI=So();function nI(t,e,n,i){var r=n.axis;if(!r.scale.isBlank()){var o=n.getModel("splitArea"),a=o.getModel("areaStyle"),s=a.get("color"),l=i.coordinateSystem.getRect(),u=r.getTicksCoords({tickModel:o,clamp:!0});if(u.length){var h=s.length,c=eI(t).splitAreaColors,p=ft(),d=0;if(c)for(var f=0;f<u.length;f++){var g=c.get(u[f].tickValue);if(null!=g){d=(g+(h-1)*f)%h;break}}var y=r.toGlobalCoord(u[0].coord),v=a.getAreaStyle();s=Y(s)?s:[s];for(f=1;f<u.length;f++){var m=r.toGlobalCoord(u[f].coord),x=void 0,_=void 0,b=void 0,w=void 0;r.isHorizontal()?(x=y,_=l.y,b=m-x,w=l.height,y=x+b):(x=l.x,_=y,b=l.width,y=_+(w=m-_));var S=u[f-1].tickValue;null!=S&&p.set(S,d),e.add(new Cs({anid:null!=S?"area_"+S:null,shape:{x:x,y:_,width:b,height:w},style:k({fill:s[d]},v),autoBatch:!0,silent:!0})),d=(d+1)%h}eI(t).splitAreaColors=p}}}function iI(t){eI(t).splitAreaColors=null}var rI=["axisLine","axisTickLabel","axisName"],oI=["splitArea","splitLine","minorSplitLine"],aI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.axisPointerClass="CartesianAxisPointer",n}return n(e,t),e.prototype.render=function(e,n,i,r){this.group.removeAll();var o=this._axisGroup;if(this._axisGroup=new Cr,this.group.add(this._axisGroup),e.get("show")){var a=e.getCoordSysModel(),s=LM(a,e),l=new GM(e,A({handleAutoShown:function(t){for(var n=a.coordinateSystem.getCartesians(),i=0;i<n.length;i++)if(ux(n[i].getOtherAxis(e.axis).scale))return!0;return!1}},s));E(rI,l.add,l),this._axisGroup.add(l.getGroup()),E(oI,(function(t){e.get([t,"show"])&&sI[t](this,this._axisGroup,e,a)}),this),r&&"changeAxisOrder"===r.type&&r.isInitSort||Ah(o,this._axisGroup,e),t.prototype.render.call(this,e,n,i,r)}},e.prototype.remove=function(){iI(this)},e.type="cartesianAxis",e}(tI),sI={splitLine:function(t,e,n,i){var r=n.axis;if(!r.scale.isBlank()){var o=n.getModel("splitLine"),a=o.getModel("lineStyle"),s=a.get("color");s=Y(s)?s:[s];for(var l=i.coordinateSystem.getRect(),u=r.isHorizontal(),h=0,c=r.getTicksCoords({tickModel:o}),p=[],d=[],f=a.getLineStyle(),g=0;g<c.length;g++){var y=r.toGlobalCoord(c[g].coord);u?(p[0]=y,p[1]=l.y,d[0]=y,d[1]=l.y+l.height):(p[0]=l.x,p[1]=y,d[0]=l.x+l.width,d[1]=y);var v=h++%s.length,m=c[g].tickValue;e.add(new zu({anid:null!=m?"line_"+c[g].tickValue:null,subPixelOptimize:!0,autoBatch:!0,shape:{x1:p[0],y1:p[1],x2:d[0],y2:d[1]},style:k({stroke:s[v]},f),silent:!0}))}}},minorSplitLine:function(t,e,n,i){var r=n.axis,o=n.getModel("minorSplitLine").getModel("lineStyle"),a=i.coordinateSystem.getRect(),s=r.isHorizontal(),l=r.getMinorTicksCoords();if(l.length)for(var u=[],h=[],c=o.getLineStyle(),p=0;p<l.length;p++)for(var d=0;d<l[p].length;d++){var f=r.toGlobalCoord(l[p][d].coord);s?(u[0]=f,u[1]=a.y,h[0]=f,h[1]=a.y+a.height):(u[0]=a.x,u[1]=f,h[0]=a.x+a.width,h[1]=f),e.add(new zu({anid:"minor_line_"+l[p][d].tickValue,subPixelOptimize:!0,autoBatch:!0,shape:{x1:u[0],y1:u[1],x2:h[0],y2:h[1]},style:c,silent:!0}))}},splitArea:function(t,e,n,i){nI(t,e,n,i)}},lI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="xAxis",e}(aI),uI=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type=lI.type,e}return n(e,t),e.type="yAxis",e}(aI),hI=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="grid",e}return n(e,t),e.prototype.render=function(t,e){this.group.removeAll(),t.get("show")&&this.group.add(new Cs({shape:t.coordinateSystem.getRect(),style:k({fill:t.get("backgroundColor")},t.getItemStyle()),silent:!0,z2:-1}))},e.type="grid",e}(gg),cI={offset:0};function pI(t){t.registerComponentView(hI),t.registerComponentModel(vM),t.registerCoordinateSystem("cartesian2d",EM),MM(t,"x",mM,cI),MM(t,"y",mM,cI),t.registerComponentView(lI),t.registerComponentView(uI),t.registerPreprocessor((function(t){t.xAxis&&t.yAxis&&!t.grid&&(t.grid={})}))}function dI(t){t.eachSeriesByType("radar",(function(t){var e=t.getData(),n=[],i=t.coordinateSystem;if(i){var r=i.getIndicatorAxes();E(r,(function(t,o){e.each(e.mapDimension(r[o].dim),(function(t,e){n[e]=n[e]||[];var r=i.dataToPoint(t,o);n[e][o]=fI(r)?r:gI(i)}))})),e.each((function(t){var r=F(n[t],(function(t){return fI(t)}))||gI(i);n[t].push(r.slice()),e.setItemLayout(t,n[t])}))}}))}function fI(t){return!isNaN(t[0])&&!isNaN(t[1])}function gI(t){return[t.cx,t.cy]}function yI(t){var e=t.polar;if(e){Y(e)||(e=[e]);var n=[];E(e,(function(e,i){e.indicator?(e.type&&!e.shape&&(e.shape=e.type),t.radar=t.radar||[],Y(t.radar)||(t.radar=[t.radar]),t.radar.push(e)):n.push(e)})),t.polar=n}E(t.series,(function(t){t&&"radar"===t.type&&t.polarIndex&&(t.radarIndex=t.polarIndex)}))}var vI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.coordinateSystem,r=this.group,o=t.getData(),a=this._data;function s(t,e){var n=t.getItemVisual(e,"symbol")||"circle";if("none"!==n){var i=Py(t.getItemVisual(e,"symbolSize")),r=Ly(n,-1,-1,2,2),o=t.getItemVisual(e,"symbolRotate")||0;return r.attr({style:{strokeNoScale:!0},z2:100,scaleX:i[0]/2,scaleY:i[1]/2,rotation:o*Math.PI/180||0}),r}}function l(e,n,i,r,o,a){i.removeAll();for(var l=0;l<n.length-1;l++){var u=s(r,o);u&&(u.__dimIdx=l,e[l]?(u.setPosition(e[l]),Bh[a?"initProps":"updateProps"](u,{x:n[l][0],y:n[l][1]},t,o)):u.setPosition(n[l]),i.add(u))}}function u(t){return z(t,(function(t){return[i.cx,i.cy]}))}o.diff(a).add((function(e){var n=o.getItemLayout(e);if(n){var i=new Pu,r=new Ru,a={shape:{points:n}};i.shape.points=u(n),r.shape.points=u(n),oh(i,a,t,e),oh(r,a,t,e);var s=new Cr,h=new Cr;s.add(r),s.add(i),s.add(h),l(r.shape.points,n,h,o,e,!0),o.setItemGraphicEl(e,s)}})).update((function(e,n){var i=a.getItemGraphicEl(n),r=i.childAt(0),s=i.childAt(1),u=i.childAt(2),h={shape:{points:o.getItemLayout(e)}};h.shape.points&&(l(r.shape.points,h.shape.points,u,o,e,!1),hh(s),hh(r),rh(r,h,t),rh(s,h,t),o.setItemGraphicEl(e,i))})).remove((function(t){r.remove(a.getItemGraphicEl(t))})).execute(),o.eachItemGraphicEl((function(t,e){var n=o.getItemModel(e),i=t.childAt(0),a=t.childAt(1),s=t.childAt(2),l=o.getItemVisual(e,"style"),u=l.fill;r.add(t),i.useStyle(k(n.getModel("lineStyle").getLineStyle(),{fill:"none",stroke:u})),Vl(i,n,"lineStyle"),Vl(a,n,"areaStyle");var h=n.getModel("areaStyle"),c=h.isEmpty()&&h.parentModel.isEmpty();a.ignore=c,E(["emphasis","select","blur"],(function(t){var e=n.getModel([t,"areaStyle"]),i=e.isEmpty()&&e.parentModel.isEmpty();a.ensureState(t).ignore=i&&c})),a.useStyle(k(h.getAreaStyle(),{fill:u,opacity:.7,decal:l.decal}));var p=n.getModel("emphasis"),d=p.getModel("itemStyle").getItemStyle();s.eachChild((function(t){if(t instanceof _s){var i=t.style;t.useStyle(A({image:i.image,x:i.x,y:i.y,width:i.width,height:i.height},l))}else t.useStyle(l),t.setColor(u),t.style.strokeNoScale=!0;t.ensureState("emphasis").style=T(d);var r=o.getStore().get(o.getDimensionIndex(t.__dimIdx),e);(null==r||isNaN(r))&&(r=""),Hh(t,Yh(n),{labelFetcher:o.hostModel,labelDataIndex:e,labelDimIndex:t.__dimIdx,defaultText:r,inheritColor:u,defaultOpacity:l.opacity})})),Rl(t,p.get("focus"),p.get("blurScope"),p.get("disabled"))})),this._data=o},e.prototype.remove=function(){this.group.removeAll(),this._data=null},e.type="radar",e}(xg),mI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n}return n(e,t),e.prototype.init=function(e){t.prototype.init.apply(this,arguments),this.legendVisualProvider=new hM(W(this.getData,this),W(this.getRawData,this))},e.prototype.getInitialData=function(t,e){return uM(this,{generateCoord:"indicator_",generateCoordCount:1/0})},e.prototype.formatTooltip=function(t,e,n){var i=this.getData(),r=this.coordinateSystem.getIndicatorAxes(),o=this.getData().getName(t),a=""===o?this.name:o,s=eg(this,t);return Xf("section",{header:a,sortBlocks:!0,blocks:z(r,(function(e){var n=i.get(i.mapDimension(e.dim),t);return Xf("nameValue",{markerType:"subItem",markerColor:s,name:e.name,value:n,sortParam:n})}))})},e.prototype.getTooltipPosition=function(t){if(null!=t)for(var e=this.getData(),n=this.coordinateSystem,i=e.getValues(z(n.dimensions,(function(t){return e.mapDimension(t)})),t),r=0,o=i.length;r<o;r++)if(!isNaN(i[r])){var a=n.getIndicatorAxes();return n.coordToPoint(a[r].dataToCoord(i[r]),r)}},e.type="series.radar",e.dependencies=["radar"],e.defaultOption={z:2,colorBy:"data",coordinateSystem:"radar",legendHoverLink:!0,radarIndex:0,lineStyle:{width:2,type:"solid",join:"round"},label:{position:"top"},symbolSize:8},e}(sg),xI=wM.value;function _I(t,e){return k({show:e},t)}var bI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.optionUpdated=function(){var t=this.get("boundaryGap"),e=this.get("splitNumber"),n=this.get("scale"),i=this.get("axisLine"),r=this.get("axisTick"),o=this.get("axisLabel"),a=this.get("axisName"),s=this.get(["axisName","show"]),l=this.get(["axisName","formatter"]),u=this.get("axisNameGap"),h=this.get("triggerEvent"),c=z(this.get("indicator")||[],(function(c){null!=c.max&&c.max>0&&!c.min?c.min=0:null!=c.min&&c.min<0&&!c.max&&(c.max=0);var p=a;null!=c.color&&(p=k({color:c.color},a));var d=C(T(c),{boundaryGap:t,splitNumber:e,scale:n,axisLine:i,axisTick:r,axisLabel:o,name:c.text,showName:s,nameLocation:"end",nameGap:u,nameTextStyle:p,triggerEvent:h},!1);if(X(l)){var f=d.name;d.name=l.replace("{value}",null!=f?f:"")}else U(l)&&(d.name=l(d.name,d));var g=new dc(d,null,this.ecModel);return R(g,p_.prototype),g.mainType="radar",g.componentIndex=this.componentIndex,g}),this);this._indicatorModels=c},e.prototype.getIndicatorModels=function(){return this._indicatorModels},e.type="radar",e.defaultOption={z:0,center:["50%","50%"],radius:"75%",startAngle:90,axisName:{show:!0},boundaryGap:[0,0],splitNumber:5,axisNameGap:15,scale:!1,shape:"polygon",axisLine:C({lineStyle:{color:"#bbb"}},xI.axisLine),axisLabel:_I(xI.axisLabel,!1),axisTick:_I(xI.axisTick,!1),splitLine:_I(xI.splitLine,!0),splitArea:_I(xI.splitArea,!0),indicator:[]},e}(Tp),wI=["axisLine","axisTickLabel","axisName"],SI=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){this.group.removeAll(),this._buildAxes(t),this._buildSplitLineAndArea(t)},e.prototype._buildAxes=function(t){var e=t.coordinateSystem;E(z(e.getIndicatorAxes(),(function(t){var n=t.model.get("showName")?t.name:"";return new GM(t.model,{axisName:n,position:[e.cx,e.cy],rotation:t.angle,labelDirection:-1,tickDirection:-1,nameDirection:1})})),(function(t){E(wI,t.add,t),this.group.add(t.getGroup())}),this)},e.prototype._buildSplitLineAndArea=function(t){var e=t.coordinateSystem,n=e.getIndicatorAxes();if(n.length){var i=t.get("shape"),r=t.getModel("splitLine"),o=t.getModel("splitArea"),a=r.getModel("lineStyle"),s=o.getModel("areaStyle"),l=r.get("show"),u=o.get("show"),h=a.get("color"),c=s.get("color"),p=Y(h)?h:[h],d=Y(c)?c:[c],f=[],g=[];if("circle"===i)for(var y=n[0].getTicksCoords(),v=e.cx,m=e.cy,x=0;x<y.length;x++){if(l)f[C(f,p,x)].push(new hu({shape:{cx:v,cy:m,r:y[x].coord}}));if(u&&x<y.length-1)g[C(g,d,x)].push(new Au({shape:{cx:v,cy:m,r0:y[x].coord,r:y[x+1].coord}}))}else{var _,b=z(n,(function(t,n){var i=t.getTicksCoords();return _=null==_?i.length-1:Math.min(i.length-1,_),z(i,(function(t){return e.coordToPoint(t.coord,n)}))})),w=[];for(x=0;x<=_;x++){for(var S=[],M=0;M<n.length;M++)S.push(b[M][x]);if(S[0]&&S.push(S[0].slice()),l)f[C(f,p,x)].push(new Ru({shape:{points:S}}));if(u&&w)g[C(g,d,x-1)].push(new Pu({shape:{points:S.concat(w)}}));w=S.slice().reverse()}}var I=a.getLineStyle(),T=s.getAreaStyle();E(g,(function(t,e){this.group.add(wh(t,{style:k({stroke:"none",fill:d[e%d.length]},T),silent:!0}))}),this),E(f,(function(t,e){this.group.add(wh(t,{style:k({fill:"none",stroke:p[e%p.length]},I),silent:!0}))}),this)}function C(t,e,n){var i=n%e.length;return t[i]=t[i]||[],i}},e.type="radar",e}(gg),MI=function(t){function e(e,n,i){var r=t.call(this,e,n,i)||this;return r.type="value",r.angle=0,r.name="",r}return n(e,t),e}(H_),II=function(){function t(t,e,n){this.dimensions=[],this._model=t,this._indicatorAxes=z(t.getIndicatorModels(),(function(t,e){var n="indicator_"+e,i=new MI(n,new xx);return i.name=t.get("name"),i.model=t,t.axis=i,this.dimensions.push(n),i}),this),this.resize(t,n)}return t.prototype.getIndicatorAxes=function(){return this._indicatorAxes},t.prototype.dataToPoint=function(t,e){var n=this._indicatorAxes[e];return this.coordToPoint(n.dataToCoord(t),e)},t.prototype.coordToPoint=function(t,e){var n=this._indicatorAxes[e].angle;return[this.cx+t*Math.cos(n),this.cy-t*Math.sin(n)]},t.prototype.pointToData=function(t){var e=t[0]-this.cx,n=t[1]-this.cy,i=Math.sqrt(e*e+n*n);e/=i,n/=i;for(var r,o=Math.atan2(-n,e),a=1/0,s=-1,l=0;l<this._indicatorAxes.length;l++){var u=this._indicatorAxes[l],h=Math.abs(o-u.angle);h<a&&(r=u,s=l,a=h)}return[s,+(r&&r.coordToData(i))]},t.prototype.resize=function(t,e){var n=t.get("center"),i=e.getWidth(),r=e.getHeight(),o=Math.min(i,r)/2;this.cx=Er(n[0],i),this.cy=Er(n[1],r),this.startAngle=t.get("startAngle")*Math.PI/180;var a=t.get("radius");(X(a)||j(a))&&(a=[0,a]),this.r0=Er(a[0],o),this.r=Er(a[1],o),E(this._indicatorAxes,(function(t,e){t.setExtent(this.r0,this.r);var n=this.startAngle+e*Math.PI*2/this._indicatorAxes.length;n=Math.atan2(Math.sin(n),Math.cos(n)),t.angle=n}),this)},t.prototype.update=function(t,e){var n=this._indicatorAxes,i=this._model;E(n,(function(t){t.scale.setExtent(1/0,-1/0)})),t.eachSeriesByType("radar",(function(e,r){if("radar"===e.get("coordinateSystem")&&t.getComponent("radar",e.get("radarIndex"))===i){var o=e.getData();E(n,(function(t){t.scale.unionExtentFromData(o,o.mapDimension(t.dim))}))}}),this);var r=i.get("splitNumber"),o=new xx;o.setExtent(0,r),o.setInterval(1),E(n,(function(t,e){NM(t.scale,t.model,o)}))},t.prototype.convertToPixel=function(t,e,n){return console.warn("Not implemented."),null},t.prototype.convertFromPixel=function(t,e,n){return console.warn("Not implemented."),null},t.prototype.containPoint=function(t){return console.warn("Not implemented."),!1},t.create=function(e,n){var i=[];return e.eachComponent("radar",(function(r){var o=new t(r,e,n);i.push(o),r.coordinateSystem=o})),e.eachSeriesByType("radar",(function(t){"radar"===t.get("coordinateSystem")&&(t.coordinateSystem=i[t.get("radarIndex")||0])})),i},t.dimensions=[],t}();function TI(t){t.registerCoordinateSystem("radar",II),t.registerComponentModel(bI),t.registerComponentView(SI),t.registerVisual({seriesType:"radar",reset:function(t){var e=t.getData();e.each((function(t){e.setItemVisual(t,"legendIcon","roundRect")})),e.setVisual("legendIcon","roundRect")}})}var CI="\0_ec_interaction_mutex";function DI(t,e){return!!AI(t)[e]}function AI(t){return t[CI]||(t[CI]={})}cm({type:"takeGlobalCursor",event:"globalCursorTaken",update:"update"},xt);var kI=function(t){function e(e){var n=t.call(this)||this;n._zr=e;var i=W(n._mousedownHandler,n),r=W(n._mousemoveHandler,n),o=W(n._mouseupHandler,n),a=W(n._mousewheelHandler,n),s=W(n._pinchHandler,n);return n.enable=function(t,n){this.disable(),this._opt=k(T(n)||{},{zoomOnMouseWheel:!0,moveOnMouseMove:!0,moveOnMouseWheel:!1,preventDefaultMouseMove:!0}),null==t&&(t=!0),!0!==t&&"move"!==t&&"pan"!==t||(e.on("mousedown",i),e.on("mousemove",r),e.on("mouseup",o)),!0!==t&&"scale"!==t&&"zoom"!==t||(e.on("mousewheel",a),e.on("pinch",s))},n.disable=function(){e.off("mousedown",i),e.off("mousemove",r),e.off("mouseup",o),e.off("mousewheel",a),e.off("pinch",s)},n}return n(e,t),e.prototype.isDragging=function(){return this._dragging},e.prototype.isPinching=function(){return this._pinching},e.prototype.setPointerChecker=function(t){this.pointerChecker=t},e.prototype.dispose=function(){this.disable()},e.prototype._mousedownHandler=function(t){if(!(le(t)||t.target&&t.target.draggable)){var e=t.offsetX,n=t.offsetY;this.pointerChecker&&this.pointerChecker(t,e,n)&&(this._x=e,this._y=n,this._dragging=!0)}},e.prototype._mousemoveHandler=function(t){if(this._dragging&&OI("moveOnMouseMove",t,this._opt)&&"pinch"!==t.gestureEvent&&!DI(this._zr,"globalPan")){var e=t.offsetX,n=t.offsetY,i=this._x,r=this._y,o=e-i,a=n-r;this._x=e,this._y=n,this._opt.preventDefaultMouseMove&&se(t.event),PI(this,"pan","moveOnMouseMove",t,{dx:o,dy:a,oldX:i,oldY:r,newX:e,newY:n,isAvailableBehavior:null})}},e.prototype._mouseupHandler=function(t){le(t)||(this._dragging=!1)},e.prototype._mousewheelHandler=function(t){var e=OI("zoomOnMouseWheel",t,this._opt),n=OI("moveOnMouseWheel",t,this._opt),i=t.wheelDelta,r=Math.abs(i),o=t.offsetX,a=t.offsetY;if(0!==i&&(e||n)){if(e){var s=r>3?1.4:r>1?1.2:1.1;LI(this,"zoom","zoomOnMouseWheel",t,{scale:i>0?s:1/s,originX:o,originY:a,isAvailableBehavior:null})}if(n){var l=Math.abs(i);LI(this,"scrollMove","moveOnMouseWheel",t,{scrollDelta:(i>0?1:-1)*(l>3?.4:l>1?.15:.05),originX:o,originY:a,isAvailableBehavior:null})}}},e.prototype._pinchHandler=function(t){DI(this._zr,"globalPan")||LI(this,"zoom",null,t,{scale:t.pinchScale>1?1.1:1/1.1,originX:t.pinchX,originY:t.pinchY,isAvailableBehavior:null})},e}(Xt);function LI(t,e,n,i,r){t.pointerChecker&&t.pointerChecker(i,r.originX,r.originY)&&(se(i.event),PI(t,e,n,i,r))}function PI(t,e,n,i,r){r.isAvailableBehavior=W(OI,null,n,i),t.trigger(e,r)}function OI(t,e,n){var i=n[t];return!t||i&&(!X(i)||e.event[i+"Key"])}function RI(t,e,n){var i=t.target;i.x+=e,i.y+=n,i.dirty()}function NI(t,e,n,i){var r=t.target,o=t.zoomLimit,a=t.zoom=t.zoom||1;if(a*=e,o){var s=o.min||0,l=o.max||1/0;a=Math.max(Math.min(l,a),s)}var u=a/t.zoom;t.zoom=a,r.x-=(n-r.x)*(u-1),r.y-=(i-r.y)*(u-1),r.scaleX*=u,r.scaleY*=u,r.dirty()}var EI,zI={axisPointer:1,tooltip:1,brush:1};function VI(t,e,n){var i=e.getComponentByElement(t.topTarget),r=i&&i.coordinateSystem;return i&&i!==n&&!zI.hasOwnProperty(i.mainType)&&r&&r.model!==n}function BI(t){X(t)&&(t=(new DOMParser).parseFromString(t,"text/xml"));var e=t;for(9===e.nodeType&&(e=e.firstChild);"svg"!==e.nodeName.toLowerCase()||1!==e.nodeType;)e=e.nextSibling;return e}var FI={fill:"fill",stroke:"stroke","stroke-width":"lineWidth",opacity:"opacity","fill-opacity":"fillOpacity","stroke-opacity":"strokeOpacity","stroke-dasharray":"lineDash","stroke-dashoffset":"lineDashOffset","stroke-linecap":"lineCap","stroke-linejoin":"lineJoin","stroke-miterlimit":"miterLimit","font-family":"fontFamily","font-size":"fontSize","font-style":"fontStyle","font-weight":"fontWeight","text-anchor":"textAlign",visibility:"visibility",display:"display"},GI=G(FI),WI={"alignment-baseline":"textBaseline","stop-color":"stopColor"},HI=G(WI),YI=function(){function t(){this._defs={},this._root=null}return t.prototype.parse=function(t,e){e=e||{};var n=BI(t);this._defsUsePending=[];var i=new Cr;this._root=i;var r=[],o=n.getAttribute("viewBox")||"",a=parseFloat(n.getAttribute("width")||e.width),s=parseFloat(n.getAttribute("height")||e.height);isNaN(a)&&(a=null),isNaN(s)&&(s=null),KI(n,i,null,!0,!1);for(var l,u,h=n.firstChild;h;)this._parseNode(h,i,r,null,!1,!1),h=h.nextSibling;if(function(t,e){for(var n=0;n<e.length;n++){var i=e[n];i[0].style[i[1]]=t[i[2]]}}(this._defs,this._defsUsePending),this._defsUsePending=[],o){var c=tT(o);c.length>=4&&(l={x:parseFloat(c[0]||0),y:parseFloat(c[1]||0),width:parseFloat(c[2]),height:parseFloat(c[3])})}if(l&&null!=a&&null!=s&&(u=oT(l,{x:0,y:0,width:a,height:s}),!e.ignoreViewBox)){var p=i;(i=new Cr).add(p),p.scaleX=p.scaleY=u.scale,p.x=u.x,p.y=u.y}return e.ignoreRootClip||null==a||null==s||i.setClipPath(new Cs({shape:{x:0,y:0,width:a,height:s}})),{root:i,width:a,height:s,viewBoxRect:l,viewBoxTransform:u,named:r}},t.prototype._parseNode=function(t,e,n,i,r,o){var a,s=t.nodeName.toLowerCase(),l=i;if("defs"===s&&(r=!0),"text"===s&&(o=!0),"defs"===s||"switch"===s)a=e;else{if(!r){var u=EI[s];if(u&&mt(EI,s)){a=u.call(this,t,e);var h=t.getAttribute("name");if(h){var c={name:h,namedFrom:null,svgNodeTagLower:s,el:a};n.push(c),"g"===s&&(l=c)}else i&&n.push({name:i.name,namedFrom:i,svgNodeTagLower:s,el:a});e.add(a)}}var p=UI[s];if(p&&mt(UI,s)){var d=p.call(this,t),f=t.getAttribute("id");f&&(this._defs[f]=d)}}if(a&&a.isGroup)for(var g=t.firstChild;g;)1===g.nodeType?this._parseNode(g,a,n,l,r,o):3===g.nodeType&&o&&this._parseText(g,a),g=g.nextSibling},t.prototype._parseText=function(t,e){var n=new vs({style:{text:t.textContent},silent:!0,x:this._textX||0,y:this._textY||0});jI(e,n),KI(t,n,this._defsUsePending,!1,!1),function(t,e){var n=e.__selfStyle;if(n){var i=n.textBaseline,r=i;i&&"auto"!==i?"baseline"===i?r="alphabetic":"before-edge"===i||"text-before-edge"===i?r="top":"after-edge"===i||"text-after-edge"===i?r="bottom":"central"!==i&&"mathematical"!==i||(r="middle"):r="alphabetic",t.style.textBaseline=r}var o=e.__inheritedStyle;if(o){var a=o.textAlign,s=a;a&&("middle"===a&&(s="center"),t.style.textAlign=s)}}(n,e);var i=n.style,r=i.fontSize;r&&r<9&&(i.fontSize=9,n.scaleX*=r/9,n.scaleY*=r/9);var o=(i.fontSize||i.fontFamily)&&[i.fontStyle,i.fontWeight,(i.fontSize||12)+"px",i.fontFamily||"sans-serif"].join(" ");i.font=o;var a=n.getBoundingRect();return this._textX+=a.width,e.add(n),n},t.internalField=void(EI={g:function(t,e){var n=new Cr;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n},rect:function(t,e){var n=new Cs;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.setShape({x:parseFloat(t.getAttribute("x")||"0"),y:parseFloat(t.getAttribute("y")||"0"),width:parseFloat(t.getAttribute("width")||"0"),height:parseFloat(t.getAttribute("height")||"0")}),n.silent=!0,n},circle:function(t,e){var n=new hu;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.setShape({cx:parseFloat(t.getAttribute("cx")||"0"),cy:parseFloat(t.getAttribute("cy")||"0"),r:parseFloat(t.getAttribute("r")||"0")}),n.silent=!0,n},line:function(t,e){var n=new zu;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.setShape({x1:parseFloat(t.getAttribute("x1")||"0"),y1:parseFloat(t.getAttribute("y1")||"0"),x2:parseFloat(t.getAttribute("x2")||"0"),y2:parseFloat(t.getAttribute("y2")||"0")}),n.silent=!0,n},ellipse:function(t,e){var n=new pu;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.setShape({cx:parseFloat(t.getAttribute("cx")||"0"),cy:parseFloat(t.getAttribute("cy")||"0"),rx:parseFloat(t.getAttribute("rx")||"0"),ry:parseFloat(t.getAttribute("ry")||"0")}),n.silent=!0,n},polygon:function(t,e){var n,i=t.getAttribute("points");i&&(n=qI(i));var r=new Pu({shape:{points:n||[]},silent:!0});return jI(e,r),KI(t,r,this._defsUsePending,!1,!1),r},polyline:function(t,e){var n,i=t.getAttribute("points");i&&(n=qI(i));var r=new Ru({shape:{points:n||[]},silent:!0});return jI(e,r),KI(t,r,this._defsUsePending,!1,!1),r},image:function(t,e){var n=new _s;return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.setStyle({image:t.getAttribute("xlink:href")||t.getAttribute("href"),x:+t.getAttribute("x"),y:+t.getAttribute("y"),width:+t.getAttribute("width"),height:+t.getAttribute("height")}),n.silent=!0,n},text:function(t,e){var n=t.getAttribute("x")||"0",i=t.getAttribute("y")||"0",r=t.getAttribute("dx")||"0",o=t.getAttribute("dy")||"0";this._textX=parseFloat(n)+parseFloat(r),this._textY=parseFloat(i)+parseFloat(o);var a=new Cr;return jI(e,a),KI(t,a,this._defsUsePending,!1,!0),a},tspan:function(t,e){var n=t.getAttribute("x"),i=t.getAttribute("y");null!=n&&(this._textX=parseFloat(n)),null!=i&&(this._textY=parseFloat(i));var r=t.getAttribute("dx")||"0",o=t.getAttribute("dy")||"0",a=new Cr;return jI(e,a),KI(t,a,this._defsUsePending,!1,!0),this._textX+=parseFloat(r),this._textY+=parseFloat(o),a},path:function(t,e){var n=su(t.getAttribute("d")||"");return jI(e,n),KI(t,n,this._defsUsePending,!1,!1),n.silent=!0,n}}),t}(),UI={lineargradient:function(t){var e=parseInt(t.getAttribute("x1")||"0",10),n=parseInt(t.getAttribute("y1")||"0",10),i=parseInt(t.getAttribute("x2")||"10",10),r=parseInt(t.getAttribute("y2")||"0",10),o=new Xu(e,n,i,r);return XI(t,o),ZI(t,o),o},radialgradient:function(t){var e=parseInt(t.getAttribute("cx")||"0",10),n=parseInt(t.getAttribute("cy")||"0",10),i=parseInt(t.getAttribute("r")||"0",10),r=new Zu(e,n,i);return XI(t,r),ZI(t,r),r}};function XI(t,e){"userSpaceOnUse"===t.getAttribute("gradientUnits")&&(e.global=!0)}function ZI(t,e){for(var n=t.firstChild;n;){if(1===n.nodeType&&"stop"===n.nodeName.toLocaleLowerCase()){var i=n.getAttribute("offset"),r=void 0;r=i&&i.indexOf("%")>0?parseInt(i,10)/100:i?parseFloat(i):0;var o={};rT(n,o,o);var a=o.stopColor||n.getAttribute("stop-color")||"#000000";e.colorStops.push({offset:r,color:a})}n=n.nextSibling}}function jI(t,e){t&&t.__inheritedStyle&&(e.__inheritedStyle||(e.__inheritedStyle={}),k(e.__inheritedStyle,t.__inheritedStyle))}function qI(t){for(var e=tT(t),n=[],i=0;i<e.length;i+=2){var r=parseFloat(e[i]),o=parseFloat(e[i+1]);n.push([r,o])}return n}function KI(t,e,n,i,r){var o=e,a=o.__inheritedStyle=o.__inheritedStyle||{},s={};1===t.nodeType&&(function(t,e){var n=t.getAttribute("transform");if(n){n=n.replace(/,/g," ");var i=[],r=null;n.replace(eT,(function(t,e,n){return i.push(e,n),""}));for(var o=i.length-1;o>0;o-=2){var a=i[o],s=i[o-1],l=tT(a);switch(r=r||[1,0,0,1,0,0],s){case"translate":Ei(r,r,[parseFloat(l[0]),parseFloat(l[1]||"0")]);break;case"scale":Vi(r,r,[parseFloat(l[0]),parseFloat(l[1]||l[0])]);break;case"rotate":zi(r,r,-parseFloat(l[0])*nT);break;case"skewX":Ni(r,[1,0,Math.tan(parseFloat(l[0])*nT),1,0,0],r);break;case"skewY":Ni(r,[1,Math.tan(parseFloat(l[0])*nT),0,1,0,0],r);break;case"matrix":r[0]=parseFloat(l[0]),r[1]=parseFloat(l[1]),r[2]=parseFloat(l[2]),r[3]=parseFloat(l[3]),r[4]=parseFloat(l[4]),r[5]=parseFloat(l[5])}}e.setLocalTransform(r)}}(t,e),rT(t,a,s),i||function(t,e,n){for(var i=0;i<GI.length;i++){var r=GI[i];null!=(o=t.getAttribute(r))&&(e[FI[r]]=o)}for(i=0;i<HI.length;i++){var o;r=HI[i];null!=(o=t.getAttribute(r))&&(n[WI[r]]=o)}}(t,a,s)),o.style=o.style||{},null!=a.fill&&(o.style.fill=JI(o,"fill",a.fill,n)),null!=a.stroke&&(o.style.stroke=JI(o,"stroke",a.stroke,n)),E(["lineWidth","opacity","fillOpacity","strokeOpacity","miterLimit","fontSize"],(function(t){null!=a[t]&&(o.style[t]=parseFloat(a[t]))})),E(["lineDashOffset","lineCap","lineJoin","fontWeight","fontFamily","fontStyle","textAlign"],(function(t){null!=a[t]&&(o.style[t]=a[t])})),r&&(o.__selfStyle=s),a.lineDash&&(o.style.lineDash=z(tT(a.lineDash),(function(t){return parseFloat(t)}))),"hidden"!==a.visibility&&"collapse"!==a.visibility||(o.invisible=!0),"none"===a.display&&(o.ignore=!0)}var $I=/^url\(\s*#(.*?)\)/;function JI(t,e,n,i){var r=n&&n.match($I);if(!r)return"none"===n&&(n=null),n;var o=ut(r[1]);i.push([t,e,o])}var QI=/-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;function tT(t){return t.match(QI)||[]}var eT=/(translate|scale|rotate|skewX|skewY|matrix)\(([\-\s0-9\.eE,]*)\)/g,nT=Math.PI/180;var iT=/([^\s:;]+)\s*:\s*([^:;]+)/g;function rT(t,e,n){var i,r=t.getAttribute("style");if(r)for(iT.lastIndex=0;null!=(i=iT.exec(r));){var o=i[1],a=mt(FI,o)?FI[o]:null;a&&(e[a]=i[2]);var s=mt(WI,o)?WI[o]:null;s&&(n[s]=i[2])}}function oT(t,e){var n=e.width/t.width,i=e.height/t.height,r=Math.min(n,i);return{scale:r,x:-(t.x+t.width/2)*r+(e.x+e.width/2),y:-(t.y+t.height/2)*r+(e.y+e.height/2)}}var aT=ft(["rect","circle","line","ellipse","polygon","polyline","path","text","tspan","g"]),sT=function(){function t(t,e){this.type="geoSVG",this._usedGraphicMap=ft(),this._freedGraphics=[],this._mapName=t,this._parsedXML=BI(e)}return t.prototype.load=function(){var t=this._firstGraphic;if(!t){t=this._firstGraphic=this._buildGraphic(this._parsedXML),this._freedGraphics.push(t),this._boundingRect=this._firstGraphic.boundingRect.clone();var e=function(t){var e=[],n=ft();return E(t,(function(t){if(null==t.namedFrom){var i=new M_(t.name,t.el);e.push(i),n.set(t.name,i)}})),{regions:e,regionsMap:n}}(t.named),n=e.regions,i=e.regionsMap;this._regions=n,this._regionsMap=i}return{boundingRect:this._boundingRect,regions:this._regions,regionsMap:this._regionsMap}},t.prototype._buildGraphic=function(t){var e,n,i,r;try{lt(null!=(n=(e=t&&(i=t,r={ignoreViewBox:!0,ignoreRootClip:!0},(new YI).parse(i,r))||{}).root))}catch(t){throw new Error("Invalid svg format\n"+t.message)}var o=new Cr;o.add(n),o.isGeoSVGGraphicRoot=!0;var a=e.width,s=e.height,l=e.viewBoxRect,u=this._boundingRect;if(!u){var h=void 0,c=void 0,p=void 0,d=void 0;if(null!=a?(h=0,p=a):l&&(h=l.x,p=l.width),null!=s?(c=0,d=s):l&&(c=l.y,d=l.height),null==h||null==c){var f=n.getBoundingRect();null==h&&(h=f.x,p=f.width),null==c&&(c=f.y,d=f.height)}u=this._boundingRect=new sr(h,c,p,d)}if(l){var g=oT(l,u);n.scaleX=n.scaleY=g.scale,n.x=g.x,n.y=g.y}o.setClipPath(new Cs({shape:u.plain()}));var y=[];return E(e.named,(function(t){var e;null!=aT.get(t.svgNodeTagLower)&&(y.push(t),(e=t.el).silent=!1,e.isGroup&&e.traverse((function(t){t.silent=!1})))})),{root:o,boundingRect:u,named:y}},t.prototype.useGraphic=function(t){var e=this._usedGraphicMap,n=e.get(t);return n||(n=this._freedGraphics.pop()||this._buildGraphic(this._parsedXML),e.set(t,n),n)},t.prototype.freeGraphic=function(t){var e=this._usedGraphicMap,n=e.get(t);n&&(e.removeKey(t),this._freedGraphics.push(n))},t}();for(var lT=[126,25],uT="南海诸岛",hT=[[[0,3.5],[7,11.2],[15,11.9],[30,7],[42,.7],[52,.7],[56,7.7],[59,.7],[64,.7],[64,0],[5,0],[0,3.5]],[[13,16.1],[19,14.7],[16,21.7],[11,23.1],[13,16.1]],[[12,32.2],[14,38.5],[15,38.5],[13,32.2],[12,32.2]],[[16,47.6],[12,53.2],[13,53.2],[18,47.6],[16,47.6]],[[6,64.4],[8,70],[9,70],[8,64.4],[6,64.4]],[[23,82.6],[29,79.8],[30,79.8],[25,82.6],[23,82.6]],[[37,70.7],[43,62.3],[44,62.3],[39,70.7],[37,70.7]],[[48,51.1],[51,45.5],[53,45.5],[50,51.1],[48,51.1]],[[51,35],[51,28.7],[53,28.7],[53,35],[51,35]],[[52,22.4],[55,17.5],[56,17.5],[53,22.4],[52,22.4]],[[58,12.6],[62,7],[63,7],[60,12.6],[58,12.6]],[[0,3.5],[0,93.1],[64,93.1],[64,0],[63,0],[63,92.4],[1,92.4],[1,3.5],[0,3.5]]],cT=0;cT<hT.length;cT++)for(var pT=0;pT<hT[cT].length;pT++)hT[cT][pT][0]/=10.5,hT[cT][pT][1]/=-14,hT[cT][pT][0]+=lT[0],hT[cT][pT][1]+=lT[1];var dT={"南海诸岛":[32,80],"广东":[0,-10],"香港":[10,5],"澳门":[-10,10],"天津":[5,5]};var fT=[[[123.45165252685547,25.73527164402261],[123.49731445312499,25.73527164402261],[123.49731445312499,25.750734064600884],[123.45165252685547,25.750734064600884],[123.45165252685547,25.73527164402261]]];var gT=function(){function t(t,e,n){var i;this.type="geoJSON",this._parsedMap=ft(),this._mapName=t,this._specialAreas=n,this._geoJSON=X(i=e)?"undefined"!=typeof JSON&&JSON.parse?JSON.parse(i):new Function("return ("+i+");")():i}return t.prototype.load=function(t,e){e=e||"name";var n=this._parsedMap.get(e);if(!n){var i=this._parseToRegions(e);n=this._parsedMap.set(e,{regions:i,boundingRect:yT(i)})}var r=ft(),o=[];return E(n.regions,(function(e){var n=e.name;t&&mt(t,n)&&(e=e.cloneShallow(n=t[n])),o.push(e),r.set(n,e)})),{regions:o,boundingRect:n.boundingRect||new sr(0,0,0,0),regionsMap:r}},t.prototype._parseToRegions=function(t){var e,n=this._mapName,i=this._geoJSON;try{e=i?C_(i,t):[]}catch(t){throw new Error("Invalid geoJson format\n"+t.message)}return function(t,e){if("china"===t){for(var n=0;n<e.length;n++)if(e[n].name===uT)return;e.push(new S_(uT,z(hT,(function(t){return{type:"polygon",exterior:t}})),lT))}}(n,e),E(e,(function(t){var e=t.name;!function(t,e){if("china"===t){var n=dT[e.name];if(n){var i=e.getCenter();i[0]+=n[0]/10.5,i[1]+=-n[1]/14,e.setCenter(i)}}}(n,t),function(t,e){"china"===t&&"台湾"===e.name&&e.geometries.push({type:"polygon",exterior:fT[0]})}(n,t);var i=this._specialAreas&&this._specialAreas[e];i&&t.transformTo(i.left,i.top,i.width,i.height)}),this),e},t.prototype.getMapForUser=function(){return{geoJson:this._geoJSON,geoJSON:this._geoJSON,specialAreas:this._specialAreas}},t}();function yT(t){for(var e,n=0;n<t.length;n++){var i=t[n].getBoundingRect();(e=e||i.clone()).union(i)}return e}var vT=ft(),mT=function(t,e,n){if(e.svg){var i=new sT(t,e.svg);vT.set(t,i)}else{var r=e.geoJson||e.geoJSON;r&&!e.features?n=e.specialAreas:r=e;i=new gT(t,r,n);vT.set(t,i)}},xT=function(t){return vT.get(t)},_T=function(t){var e=vT.get(t);return e&&"geoJSON"===e.type&&e.getMapForUser()},bT=function(t,e,n){var i=vT.get(t);if(i)return i.load(e,n)},wT=["rect","circle","line","ellipse","polygon","polyline","path"],ST=ft(wT),MT=ft(wT.concat(["g"])),IT=ft(wT.concat(["g"])),TT=So();function CT(t){var e=t.getItemStyle(),n=t.get("areaColor");return null!=n&&(e.fill=n),e}function DT(t){var e=t.style;e&&(e.stroke=e.stroke||e.fill,e.fill=null)}var AT=function(){function t(t){var e=new Cr;this.uid=gc("ec_map_draw"),this._controller=new kI(t.getZr()),this._controllerHost={target:e},this.group=e,e.add(this._regionsGroup=new Cr),e.add(this._svgGroup=new Cr)}return t.prototype.draw=function(t,e,n,i,r){var o="geo"===t.mainType,a=t.getData&&t.getData();o&&e.eachComponent({mainType:"series",subType:"map"},(function(e){a||e.getHostGeoModel()!==t||(a=e.getData())}));var s=t.coordinateSystem,l=this._regionsGroup,u=this.group,h=s.getTransformInfo(),c=h.raw,p=h.roam;!l.childAt(0)||r?(u.x=p.x,u.y=p.y,u.scaleX=p.scaleX,u.scaleY=p.scaleY,u.dirty()):rh(u,p,t);var d=a&&a.getVisual("visualMeta")&&a.getVisual("visualMeta").length>0,f={api:n,geo:s,mapOrGeoModel:t,data:a,isVisualEncodedByVisualMap:d,isGeo:o,transformInfoRaw:c};"geoJSON"===s.resourceType?this._buildGeoJSON(f):"geoSVG"===s.resourceType&&this._buildSVG(f),this._updateController(t,e,n),this._updateMapSelectHandler(t,l,n,i)},t.prototype._buildGeoJSON=function(t){var e=this._regionsGroupByName=ft(),n=ft(),i=this._regionsGroup,r=t.transformInfoRaw,o=t.mapOrGeoModel,a=t.data,s=t.geo.projection,l=s&&s.stream;function u(t,e){return e&&(t=e(t)),t&&[t[0]*r.scaleX+r.x,t[1]*r.scaleY+r.y]}function h(t){for(var e=[],n=!l&&s&&s.project,i=0;i<t.length;++i){var r=u(t[i],n);r&&e.push(r)}return e}function c(t){return{shape:{points:h(t)}}}i.removeAll(),E(t.geo.regions,(function(r){var h=r.name,p=e.get(h),d=n.get(h)||{},f=d.dataIdx,g=d.regionModel;p||(p=e.set(h,new Cr),i.add(p),f=a?a.indexOfName(h):null,g=t.isGeo?o.getRegionModel(h):a?a.getItemModel(f):null,n.set(h,{dataIdx:f,regionModel:g}));var y=[],v=[];E(r.geometries,(function(t){if("polygon"===t.type){var e=[t.exterior].concat(t.interiors||[]);l&&(e=NT(e,l)),E(e,(function(t){y.push(new Pu(c(t)))}))}else{var n=t.points;l&&(n=NT(n,l,!0)),E(n,(function(t){v.push(new Ru(c(t)))}))}}));var m=u(r.getCenter(),s&&s.project);function x(e,n){if(e.length){var i=new Yu({culling:!0,segmentIgnoreThreshold:1,shape:{paths:e}});p.add(i),kT(t,i,f,g),LT(t,i,h,g,o,f,m),n&&(DT(i),E(i.states,DT))}}x(y),x(v,!0)})),e.each((function(e,i){var r=n.get(i),a=r.dataIdx,s=r.regionModel;PT(t,e,i,s,o,a),OT(t,e,i,s,o),RT(t,e,i,s,o)}),this)},t.prototype._buildSVG=function(t){var e=t.geo.map,n=t.transformInfoRaw;this._svgGroup.x=n.x,this._svgGroup.y=n.y,this._svgGroup.scaleX=n.scaleX,this._svgGroup.scaleY=n.scaleY,this._svgResourceChanged(e)&&(this._freeSVG(),this._useSVG(e));var i=this._svgDispatcherMap=ft(),r=!1;E(this._svgGraphicRecord.named,(function(e){var n=e.name,o=t.mapOrGeoModel,a=t.data,s=e.svgNodeTagLower,l=e.el,u=a?a.indexOfName(n):null,h=o.getRegionModel(n);(null!=ST.get(s)&&l instanceof da&&kT(t,l,u,h),l instanceof da&&(l.culling=!0),l.z2EmphasisLift=0,e.namedFrom)||(null!=IT.get(s)&&LT(t,l,n,h,o,u,null),PT(t,l,n,h,o,u),OT(t,l,n,h,o),null!=MT.get(s)&&("self"===RT(t,l,n,h,o)&&(r=!0),(i.get(n)||i.set(n,[])).push(l)))}),this),this._enableBlurEntireSVG(r,t)},t.prototype._enableBlurEntireSVG=function(t,e){if(t&&e.isGeo){var n=e.mapOrGeoModel.getModel(["blur","itemStyle"]).getItemStyle().opacity;this._svgGraphicRecord.root.traverse((function(t){if(!t.isGroup){vl(t);var e=t.ensureState("blur").style||{};null==e.opacity&&null!=n&&(e.opacity=n),t.ensureState("emphasis")}}))}},t.prototype.remove=function(){this._regionsGroup.removeAll(),this._regionsGroupByName=null,this._svgGroup.removeAll(),this._freeSVG(),this._controller.dispose(),this._controllerHost=null},t.prototype.findHighDownDispatchers=function(t,e){if(null==t)return[];var n=e.coordinateSystem;if("geoJSON"===n.resourceType){var i=this._regionsGroupByName;if(i){var r=i.get(t);return r?[r]:[]}}else if("geoSVG"===n.resourceType)return this._svgDispatcherMap&&this._svgDispatcherMap.get(t)||[]},t.prototype._svgResourceChanged=function(t){return this._svgMapName!==t},t.prototype._useSVG=function(t){var e=xT(t);if(e&&"geoSVG"===e.type){var n=e.useGraphic(this.uid);this._svgGroup.add(n.root),this._svgGraphicRecord=n,this._svgMapName=t}},t.prototype._freeSVG=function(){var t=this._svgMapName;if(null!=t){var e=xT(t);e&&"geoSVG"===e.type&&e.freeGraphic(this.uid),this._svgGraphicRecord=null,this._svgDispatcherMap=null,this._svgGroup.removeAll(),this._svgMapName=null}},t.prototype._updateController=function(t,e,n){var i=t.coordinateSystem,r=this._controller,o=this._controllerHost;o.zoomLimit=t.get("scaleLimit"),o.zoom=i.getZoom(),r.enable(t.get("roam")||!1);var a=t.mainType;function s(){var e={type:"geoRoam",componentType:a};return e[a+"Id"]=t.id,e}r.off("pan").on("pan",(function(t){this._mouseDownFlag=!1,RI(o,t.dx,t.dy),n.dispatchAction(A(s(),{dx:t.dx,dy:t.dy,animation:{duration:0}}))}),this),r.off("zoom").on("zoom",(function(t){this._mouseDownFlag=!1,NI(o,t.scale,t.originX,t.originY),n.dispatchAction(A(s(),{zoom:t.scale,originX:t.originX,originY:t.originY,animation:{duration:0}}))}),this),r.setPointerChecker((function(e,r,o){return i.containPoint([r,o])&&!VI(e,n,t)}))},t.prototype.resetForLabelLayout=function(){this.group.traverse((function(t){var e=t.getTextContent();e&&(e.ignore=TT(e).ignore)}))},t.prototype._updateMapSelectHandler=function(t,e,n,i){var r=this;e.off("mousedown"),e.off("click"),t.get("selectedMode")&&(e.on("mousedown",(function(){r._mouseDownFlag=!0})),e.on("click",(function(t){r._mouseDownFlag&&(r._mouseDownFlag=!1)})))},t}();function kT(t,e,n,i){var r=i.getModel("itemStyle"),o=i.getModel(["emphasis","itemStyle"]),a=i.getModel(["blur","itemStyle"]),s=i.getModel(["select","itemStyle"]),l=CT(r),u=CT(o),h=CT(s),c=CT(a),p=t.data;if(p){var d=p.getItemVisual(n,"style"),f=p.getItemVisual(n,"decal");t.isVisualEncodedByVisualMap&&d.fill&&(l.fill=d.fill),f&&(l.decal=rv(f,t.api))}e.setStyle(l),e.style.strokeNoScale=!0,e.ensureState("emphasis").style=u,e.ensureState("select").style=h,e.ensureState("blur").style=c,vl(e)}function LT(t,e,n,i,r,o,a){var s=t.data,l=t.isGeo,u=s&&isNaN(s.get(s.mapDimension("value"),o)),h=s&&s.getItemLayout(o);if(l||u||h&&h.showLabel){var c=l?n:o,p=void 0;(!s||o>=0)&&(p=r);var d=a?{normal:{align:"center",verticalAlign:"middle"}}:null;Hh(e,Yh(i),{labelFetcher:p,labelDataIndex:c,defaultText:n},d);var f=e.getTextContent();if(f&&(TT(f).ignore=f.ignore,e.textConfig&&a)){var g=e.getBoundingRect().clone();e.textConfig.layoutRect=g,e.textConfig.position=[(a[0]-g.x)/g.width*100+"%",(a[1]-g.y)/g.height*100+"%"]}e.disableLabelAnimation=!0}else e.removeTextContent(),e.removeTextConfig(),e.disableLabelAnimation=null}function PT(t,e,n,i,r,o){t.data?t.data.setItemGraphicEl(o,e):Hs(e).eventData={componentType:"geo",componentIndex:r.componentIndex,geoIndex:r.componentIndex,name:n,region:i&&i.option||{}}}function OT(t,e,n,i,r){t.data||Eh({el:e,componentModel:r,itemName:n,itemTooltipOption:i.get("tooltip")})}function RT(t,e,n,i,r){e.highDownSilentOnTouch=!!r.get("selectedMode");var o=i.getModel("emphasis"),a=o.get("focus");return Rl(e,a,o.get("blurScope"),o.get("disabled")),t.isGeo&&function(t,e,n){var i=Hs(t);i.componentMainType=e.mainType,i.componentIndex=e.componentIndex,i.componentHighDownName=n}(e,r,n),a}function NT(t,e,n){var i,r=[];function o(){i=[]}function a(){i.length&&(r.push(i),i=[])}var s=e({polygonStart:o,polygonEnd:a,lineStart:o,lineEnd:a,point:function(t,e){isFinite(t)&&isFinite(e)&&i.push([t,e])},sphere:function(){}});return!n&&s.polygonStart(),E(t,(function(t){s.lineStart();for(var e=0;e<t.length;e++)s.point(t[e][0],t[e][1]);s.lineEnd()})),!n&&s.polygonEnd(),r}var ET=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n,i){if(!i||"mapToggleSelect"!==i.type||i.from!==this.uid){var r=this.group;if(r.removeAll(),!t.getHostGeoModel()){if(this._mapDraw&&i&&"geoRoam"===i.type&&this._mapDraw.resetForLabelLayout(),i&&"geoRoam"===i.type&&"series"===i.componentType&&i.seriesId===t.id)(o=this._mapDraw)&&r.add(o.group);else if(t.needsDrawMap){var o=this._mapDraw||new AT(n);r.add(o.group),o.draw(t,e,n,this,i),this._mapDraw=o}else this._mapDraw&&this._mapDraw.remove(),this._mapDraw=null;t.get("showLegendSymbol")&&e.getComponent("legend")&&this._renderSymbols(t,e,n)}}},e.prototype.remove=function(){this._mapDraw&&this._mapDraw.remove(),this._mapDraw=null,this.group.removeAll()},e.prototype.dispose=function(){this._mapDraw&&this._mapDraw.remove(),this._mapDraw=null},e.prototype._renderSymbols=function(t,e,n){var i=t.originalData,r=this.group;i.each(i.mapDimension("value"),(function(e,n){if(!isNaN(e)){var o=i.getItemLayout(n);if(o&&o.point){var a=o.point,s=o.offset,l=new hu({style:{fill:t.getData().getVisual("style").fill},shape:{cx:a[0]+9*s,cy:a[1],r:3},silent:!0,z2:8+(s?0:11)});if(!s){var u=t.mainSeries.getData(),h=i.getName(n),c=u.indexOfName(h),p=i.getItemModel(n),d=p.getModel("label"),f=u.getItemGraphicEl(c);Hh(l,Yh(p),{labelFetcher:{getFormattedLabel:function(e,n){return t.getFormattedLabel(c,n)}},defaultText:h}),l.disableLabelAnimation=!0,d.get("position")||l.setTextConfig({position:"bottom"}),f.onHoverStateChange=function(t){gl(l,t)}}r.add(l)}}}))},e.type="map",e}(xg),zT=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.needsDrawMap=!1,n.seriesGroup=[],n.getTooltipPosition=function(t){if(null!=t){var e=this.getData().getName(t),n=this.coordinateSystem,i=n.getRegion(e);return i&&n.dataToPoint(i.getCenter())}},n}return n(e,t),e.prototype.getInitialData=function(t){for(var e=uM(this,{coordDimensions:["value"],encodeDefaulter:H(Yp,this)}),n=ft(),i=[],r=0,o=e.count();r<o;r++){var a=e.getName(r);n.set(a,!0)}return E(bT(this.getMapType(),this.option.nameMap,this.option.nameProperty).regions,(function(t){var e=t.name;n.get(e)||i.push(e)})),e.appendValues([],i),e},e.prototype.getHostGeoModel=function(){var t=this.option.geoIndex;return null!=t?this.ecModel.getComponent("geo",t):null},e.prototype.getMapType=function(){return(this.getHostGeoModel()||this).option.map},e.prototype.getRawValue=function(t){var e=this.getData();return e.get(e.mapDimension("value"),t)},e.prototype.getRegionModel=function(t){var e=this.getData();return e.getItemModel(e.indexOfName(t))},e.prototype.formatTooltip=function(t,e,n){for(var i=this.getData(),r=this.getRawValue(t),o=i.getName(t),a=this.seriesGroup,s=[],l=0;l<a.length;l++){var u=a[l].originalData.indexOfName(o),h=i.mapDimension("value");isNaN(a[l].originalData.get(h,u))||s.push(a[l].name)}return Xf("section",{header:s.join(", "),noHeader:!s.length,blocks:[Xf("nameValue",{name:o,value:r})]})},e.prototype.setZoom=function(t){this.option.zoom=t},e.prototype.setCenter=function(t){this.option.center=t},e.prototype.getLegendIcon=function(t){var e=t.icon||"roundRect",n=Ly(e,0,0,t.itemWidth,t.itemHeight,t.itemStyle.fill);return n.setStyle(t.itemStyle),n.style.stroke="none",e.indexOf("empty")>-1&&(n.style.stroke=n.style.fill,n.style.fill="#fff",n.style.lineWidth=2),n},e.type="series.map",e.dependencies=["geo"],e.layoutMode="box",e.defaultOption={z:2,coordinateSystem:"geo",map:"",left:"center",top:"center",aspectScale:null,showLegendSymbol:!0,boundingCoords:null,center:null,zoom:1,scaleLimit:null,selectedMode:!0,label:{show:!1,color:"#000"},itemStyle:{borderWidth:.5,borderColor:"#444",areaColor:"#eee"},emphasis:{label:{show:!0,color:"rgb(100,0,0)"},itemStyle:{areaColor:"rgba(255,215,0,0.8)"}},select:{label:{show:!0,color:"rgb(100,0,0)"},itemStyle:{color:"rgba(255,215,0,0.8)"}},nameProperty:"name"},e}(sg);function VT(t){var e={};t.eachSeriesByType("map",(function(t){var n=t.getHostGeoModel(),i=n?"o"+n.id:"i"+t.getMapType();(e[i]=e[i]||[]).push(t)})),E(e,(function(t,e){for(var n,i,r,o=(n=z(t,(function(t){return t.getData()})),i=t[0].get("mapValueCalculation"),r={},E(n,(function(t){t.each(t.mapDimension("value"),(function(e,n){var i="ec-"+t.getName(n);r[i]=r[i]||[],isNaN(e)||r[i].push(e)}))})),n[0].map(n[0].mapDimension("value"),(function(t,e){for(var o="ec-"+n[0].getName(e),a=0,s=1/0,l=-1/0,u=r[o].length,h=0;h<u;h++)s=Math.min(s,r[o][h]),l=Math.max(l,r[o][h]),a+=r[o][h];return 0===u?NaN:"min"===i?s:"max"===i?l:"average"===i?a/u:a}))),a=0;a<t.length;a++)t[a].originalData=t[a].getData();for(a=0;a<t.length;a++)t[a].seriesGroup=t,t[a].needsDrawMap=0===a&&!t[a].getHostGeoModel(),t[a].setData(o.cloneShallow()),t[a].mainSeries=t[0]}))}function BT(t){var e={};t.eachSeriesByType("map",(function(n){var i=n.getMapType();if(!n.getHostGeoModel()&&!e[i]){var r={};E(n.seriesGroup,(function(e){var n=e.coordinateSystem,i=e.originalData;e.get("showLegendSymbol")&&t.getComponent("legend")&&i.each(i.mapDimension("value"),(function(t,e){var o=i.getName(e),a=n.getRegion(o);if(a&&!isNaN(t)){var s=r[o]||0,l=n.dataToPoint(a.getCenter());r[o]=s+1,i.setItemLayout(e,{point:l,offset:s})}}))}));var o=n.getData();o.each((function(t){var e=o.getName(t),n=o.getItemLayout(t)||{};n.showLabel=!r[e],o.setItemLayout(t,n)})),e[i]=!0}}))}var FT=Ft,GT=function(t){function e(e){var n=t.call(this)||this;return n.type="view",n.dimensions=["x","y"],n._roamTransformable=new qi,n._rawTransformable=new qi,n.name=e,n}return n(e,t),e.prototype.setBoundingRect=function(t,e,n,i){return this._rect=new sr(t,e,n,i),this._rect},e.prototype.getBoundingRect=function(){return this._rect},e.prototype.setViewRect=function(t,e,n,i){this._transformTo(t,e,n,i),this._viewRect=new sr(t,e,n,i)},e.prototype._transformTo=function(t,e,n,i){var r=this.getBoundingRect(),o=this._rawTransformable;o.transform=r.calculateTransform(new sr(t,e,n,i));var a=o.parent;o.parent=null,o.decomposeTransform(),o.parent=a,this._updateTransform()},e.prototype.setCenter=function(t,e){t&&(this._center=[Er(t[0],e.getWidth()),Er(t[1],e.getHeight())],this._updateCenterAndZoom())},e.prototype.setZoom=function(t){t=t||1;var e=this.zoomLimit;e&&(null!=e.max&&(t=Math.min(e.max,t)),null!=e.min&&(t=Math.max(e.min,t))),this._zoom=t,this._updateCenterAndZoom()},e.prototype.getDefaultCenter=function(){var t=this.getBoundingRect();return[t.x+t.width/2,t.y+t.height/2]},e.prototype.getCenter=function(){return this._center||this.getDefaultCenter()},e.prototype.getZoom=function(){return this._zoom||1},e.prototype.getRoamTransform=function(){return this._roamTransformable.getLocalTransform()},e.prototype._updateCenterAndZoom=function(){var t=this._rawTransformable.getLocalTransform(),e=this._roamTransformable,n=this.getDefaultCenter(),i=this.getCenter(),r=this.getZoom();i=Ft([],i,t),n=Ft([],n,t),e.originX=i[0],e.originY=i[1],e.x=n[0]-i[0],e.y=n[1]-i[1],e.scaleX=e.scaleY=r,this._updateTransform()},e.prototype._updateTransform=function(){var t=this._roamTransformable,e=this._rawTransformable;e.parent=t,t.updateTransform(),e.updateTransform(),Ri(this.transform||(this.transform=[]),e.transform||[1,0,0,1,0,0]),this._rawTransform=e.getLocalTransform(),this.invTransform=this.invTransform||[],Bi(this.invTransform,this.transform),this.decomposeTransform()},e.prototype.getTransformInfo=function(){var t=this._rawTransformable,e=this._roamTransformable,n=new qi;return n.transform=e.transform,n.decomposeTransform(),{roam:{x:n.x,y:n.y,scaleX:n.scaleX,scaleY:n.scaleY},raw:{x:t.x,y:t.y,scaleX:t.scaleX,scaleY:t.scaleY}}},e.prototype.getViewRect=function(){return this._viewRect},e.prototype.getViewRectAfterRoam=function(){var t=this.getBoundingRect().clone();return t.applyTransform(this.transform),t},e.prototype.dataToPoint=function(t,e,n){var i=e?this._rawTransform:this.transform;return n=n||[],i?FT(n,t,i):St(n,t)},e.prototype.pointToData=function(t){var e=this.invTransform;return e?FT([],t,e):[t[0],t[1]]},e.prototype.convertToPixel=function(t,e,n){var i=WT(e);return i===this?i.dataToPoint(n):null},e.prototype.convertFromPixel=function(t,e,n){var i=WT(e);return i===this?i.pointToData(n):null},e.prototype.containPoint=function(t){return this.getViewRectAfterRoam().contain(t[0],t[1])},e.dimensions=["x","y"],e}(qi);function WT(t){var e=t.seriesModel;return e?e.coordinateSystem:null}var HT={geoJSON:{aspectScale:.75,invertLongitute:!0},geoSVG:{aspectScale:1,invertLongitute:!1}},YT=["lng","lat"],UT=function(t){function e(e,n,i){var r=t.call(this,e)||this;r.dimensions=YT,r.type="geo",r._nameCoordMap=ft(),r.map=n;var o,a=i.projection,s=bT(n,i.nameMap,i.nameProperty),l=xT(n),u=(r.resourceType=l?l.type:null,r.regions=s.regions),h=HT[l.type];if(r._regionsMap=s.regionsMap,r.regions=s.regions,r.projection=a,a)for(var c=0;c<u.length;c++){var p=u[c].getBoundingRect(a);(o=o||p.clone()).union(p)}else o=s.boundingRect;return r.setBoundingRect(o.x,o.y,o.width,o.height),r.aspectScale=a?1:rt(i.aspectScale,h.aspectScale),r._invertLongitute=!a&&h.invertLongitute,r}return n(e,t),e.prototype._transformTo=function(t,e,n,i){var r=this.getBoundingRect(),o=this._invertLongitute;r=r.clone(),o&&(r.y=-r.y-r.height);var a=this._rawTransformable;a.transform=r.calculateTransform(new sr(t,e,n,i));var s=a.parent;a.parent=null,a.decomposeTransform(),a.parent=s,o&&(a.scaleY=-a.scaleY),this._updateTransform()},e.prototype.getRegion=function(t){return this._regionsMap.get(t)},e.prototype.getRegionByCoord=function(t){for(var e=this.regions,n=0;n<e.length;n++){var i=e[n];if("geoJSON"===i.type&&i.contain(t))return e[n]}},e.prototype.addGeoCoord=function(t,e){this._nameCoordMap.set(t,e)},e.prototype.getGeoCoord=function(t){var e=this._regionsMap.get(t);return this._nameCoordMap.get(t)||e&&e.getCenter()},e.prototype.dataToPoint=function(t,e,n){if(X(t)&&(t=this.getGeoCoord(t)),t){var i=this.projection;return i&&(t=i.project(t)),t&&this.projectedToPoint(t,e,n)}},e.prototype.pointToData=function(t){var e=this.projection;return e&&(t=e.unproject(t)),t&&this.pointToProjected(t)},e.prototype.pointToProjected=function(e){return t.prototype.pointToData.call(this,e)},e.prototype.projectedToPoint=function(e,n,i){return t.prototype.dataToPoint.call(this,e,n,i)},e.prototype.convertToPixel=function(t,e,n){var i=XT(e);return i===this?i.dataToPoint(n):null},e.prototype.convertFromPixel=function(t,e,n){var i=XT(e);return i===this?i.pointToData(n):null},e}(GT);function XT(t){var e=t.geoModel,n=t.seriesModel;return e?e.coordinateSystem:n?n.coordinateSystem||(n.getReferringComponents("geo",Co).models[0]||{}).coordinateSystem:null}function ZT(t,e){var n=t.get("boundingCoords");if(null!=n){var i=n[0],r=n[1];if(isFinite(i[0])&&isFinite(i[1])&&isFinite(r[0])&&isFinite(r[1])){var o=this.projection;if(o){var a=i[0],s=i[1],l=r[0],u=r[1];i=[1/0,1/0],r=[-1/0,-1/0];var h=function(t,e,n,a){for(var s=n-t,l=a-e,u=0;u<=100;u++){var h=u/100,c=o.project([t+s*h,e+l*h]);Gt(i,i,c),Wt(r,r,c)}};h(a,s,l,s),h(l,s,l,u),h(l,u,a,u),h(a,u,l,s)}this.setBoundingRect(i[0],i[1],r[0]-i[0],r[1]-i[1])}else 0}var c,p,d,f=this.getBoundingRect(),g=t.get("layoutCenter"),y=t.get("layoutSize"),v=e.getWidth(),m=e.getHeight(),x=f.width/f.height*this.aspectScale,_=!1;if(g&&y&&(c=[Er(g[0],v),Er(g[1],m)],p=Er(y,Math.min(v,m)),isNaN(c[0])||isNaN(c[1])||isNaN(p)||(_=!0)),_)d={},x>1?(d.width=p,d.height=p/x):(d.height=p,d.width=p*x),d.y=c[1]-d.height/2,d.x=c[0]-d.width/2;else{var b=t.getBoxLayoutParams();b.aspect=x,d=xp(b,{width:v,height:m})}this.setViewRect(d.x,d.y,d.width,d.height),this.setCenter(t.get("center"),e),this.setZoom(t.get("zoom"))}R(UT,GT);var jT=new(function(){function t(){this.dimensions=YT}return t.prototype.create=function(t,e){var n=[];function i(t){return{nameProperty:t.get("nameProperty"),aspectScale:t.get("aspectScale"),projection:t.get("projection")}}t.eachComponent("geo",(function(t,r){var o=t.get("map"),a=new UT(o+r,o,A({nameMap:t.get("nameMap")},i(t)));a.zoomLimit=t.get("scaleLimit"),n.push(a),t.coordinateSystem=a,a.model=t,a.resize=ZT,a.resize(t,e)})),t.eachSeries((function(t){if("geo"===t.get("coordinateSystem")){var e=t.get("geoIndex")||0;t.coordinateSystem=n[e]}}));var r={};return t.eachSeriesByType("map",(function(t){if(!t.getHostGeoModel()){var e=t.getMapType();r[e]=r[e]||[],r[e].push(t)}})),E(r,(function(t,r){var o=z(t,(function(t){return t.get("nameMap")})),a=new UT(r,r,A({nameMap:D(o)},i(t[0])));a.zoomLimit=it.apply(null,z(t,(function(t){return t.get("scaleLimit")}))),n.push(a),a.resize=ZT,a.resize(t[0],e),E(t,(function(t){t.coordinateSystem=a,function(t,e){E(e.get("geoCoord"),(function(e,n){t.addGeoCoord(n,e)}))}(a,t)}))})),n},t.prototype.getFilledRegions=function(t,e,n,i){for(var r=(t||[]).slice(),o=ft(),a=0;a<r.length;a++)o.set(r[a].name,r[a]);return E(bT(e,n,i).regions,(function(t){var e=t.name;!o.get(e)&&r.push({name:e})})),r},t}()),qT=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(t,e,n){var i=xT(t.map);if(i&&"geoJSON"===i.type){var r=t.itemStyle=t.itemStyle||{};"color"in r||(r.color="#eee")}this.mergeDefaultAndTheme(t,n),co(t,"label",["show"])},e.prototype.optionUpdated=function(){var t=this,e=this.option;e.regions=jT.getFilledRegions(e.regions,e.map,e.nameMap,e.nameProperty);var n={};this._optionModelMap=V(e.regions||[],(function(e,i){var r=i.name;return r&&(e.set(r,new dc(i,t,t.ecModel)),i.selected&&(n[r]=!0)),e}),ft()),e.selectedMap||(e.selectedMap=n)},e.prototype.getRegionModel=function(t){return this._optionModelMap.get(t)||new dc(null,this,this.ecModel)},e.prototype.getFormattedLabel=function(t,e){var n=this.getRegionModel(t),i="normal"===e?n.get(["label","formatter"]):n.get(["emphasis","label","formatter"]),r={name:t};return U(i)?(r.status=e,i(r)):X(i)?i.replace("{a}",null!=t?t:""):void 0},e.prototype.setZoom=function(t){this.option.zoom=t},e.prototype.setCenter=function(t){this.option.center=t},e.prototype.select=function(t){var e=this.option,n=e.selectedMode;n&&("multiple"!==n&&(e.selectedMap=null),(e.selectedMap||(e.selectedMap={}))[t]=!0)},e.prototype.unSelect=function(t){var e=this.option.selectedMap;e&&(e[t]=!1)},e.prototype.toggleSelected=function(t){this[this.isSelected(t)?"unSelect":"select"](t)},e.prototype.isSelected=function(t){var e=this.option.selectedMap;return!(!e||!e[t])},e.type="geo",e.layoutMode="box",e.defaultOption={z:0,show:!0,left:"center",top:"center",aspectScale:null,silent:!1,map:"",boundingCoords:null,center:null,zoom:1,scaleLimit:null,label:{show:!1,color:"#000"},itemStyle:{borderWidth:.5,borderColor:"#444"},emphasis:{label:{show:!0,color:"rgb(100,0,0)"},itemStyle:{color:"rgba(255,215,0,0.8)"}},select:{label:{show:!0,color:"rgb(100,0,0)"},itemStyle:{color:"rgba(255,215,0,0.8)"}},regions:[]},e}(Tp);function KT(t,e){return t.pointToProjected?t.pointToProjected(e):t.pointToData(e)}function $T(t,e,n,i){var r=t.getZoom(),o=t.getCenter(),a=e.zoom,s=t.projectedToPoint?t.projectedToPoint(o):t.dataToPoint(o);if(null!=e.dx&&null!=e.dy&&(s[0]-=e.dx,s[1]-=e.dy,t.setCenter(KT(t,s),i)),null!=a){if(n){var l=n.min||0,u=n.max||1/0;a=Math.max(Math.min(r*a,u),l)/r}t.scaleX*=a,t.scaleY*=a;var h=(e.originX-t.x)*(a-1),c=(e.originY-t.y)*(a-1);t.x-=h,t.y-=c,t.updateTransform(),t.setCenter(KT(t,s),i),t.setZoom(a*r)}return{center:t.getCenter(),zoom:t.getZoom()}}var JT=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.focusBlurEnabled=!0,n}return n(e,t),e.prototype.init=function(t,e){this._api=e},e.prototype.render=function(t,e,n,i){if(this._model=t,!t.get("show"))return this._mapDraw&&this._mapDraw.remove(),void(this._mapDraw=null);this._mapDraw||(this._mapDraw=new AT(n));var r=this._mapDraw;r.draw(t,e,n,this,i),r.group.on("click",this._handleRegionClick,this),r.group.silent=t.get("silent"),this.group.add(r.group),this.updateSelectStatus(t,e,n)},e.prototype._handleRegionClick=function(t){var e;xy(t.target,(function(t){return null!=(e=Hs(t).eventData)}),!0),e&&this._api.dispatchAction({type:"geoToggleSelect",geoId:this._model.id,name:e.name})},e.prototype.updateSelectStatus=function(t,e,n){var i=this;this._mapDraw.group.traverse((function(t){var e=Hs(t).eventData;if(e)return i._model.isSelected(e.name)?n.enterSelect(t):n.leaveSelect(t),!0}))},e.prototype.findHighDownDispatchers=function(t){return this._mapDraw&&this._mapDraw.findHighDownDispatchers(t,this._model)},e.prototype.dispose=function(){this._mapDraw&&this._mapDraw.remove()},e.type="geo",e}(gg);function QT(t,e,n){mT(t,e,n)}function tC(t){function e(e,n){n.update="geo:updateSelectStatus",t.registerAction(n,(function(t,n){var i={},r=[];return n.eachComponent({mainType:"geo",query:t},(function(n){n[e](t.name),E(n.coordinateSystem.regions,(function(t){i[t.name]=n.isSelected(t.name)||!1}));var o=[];E(i,(function(t,e){i[e]&&o.push(e)})),r.push({geoIndex:n.componentIndex,name:o})})),{selected:i,allSelected:r,name:t.name}}))}t.registerCoordinateSystem("geo",jT),t.registerComponentModel(qT),t.registerComponentView(JT),t.registerImpl("registerMap",QT),t.registerImpl("getMap",(function(t){return _T(t)})),e("toggleSelected",{type:"geoToggleSelect",event:"geoselectchanged"}),e("select",{type:"geoSelect",event:"geoselected"}),e("unSelect",{type:"geoUnSelect",event:"geounselected"}),t.registerAction({type:"geoRoam",event:"geoRoam",update:"updateTransform"},(function(t,e,n){var i=t.componentType||"series";e.eachComponent({mainType:i,query:t},(function(e){var r=e.coordinateSystem;if("geo"===r.type){var o=$T(r,t,e.get("scaleLimit"),n);e.setCenter&&e.setCenter(o.center),e.setZoom&&e.setZoom(o.zoom),"series"===i&&E(e.seriesGroup,(function(t){t.setCenter(o.center),t.setZoom(o.zoom)}))}}))}))}function eC(t,e){var n=t.isExpand?t.children:[],i=t.parentNode.children,r=t.hierNode.i?i[t.hierNode.i-1]:null;if(n.length){!function(t){var e=t.children,n=e.length,i=0,r=0;for(;--n>=0;){var o=e[n];o.hierNode.prelim+=i,o.hierNode.modifier+=i,r+=o.hierNode.change,i+=o.hierNode.shift+r}}(t);var o=(n[0].hierNode.prelim+n[n.length-1].hierNode.prelim)/2;r?(t.hierNode.prelim=r.hierNode.prelim+e(t,r),t.hierNode.modifier=t.hierNode.prelim-o):t.hierNode.prelim=o}else r&&(t.hierNode.prelim=r.hierNode.prelim+e(t,r));t.parentNode.hierNode.defaultAncestor=function(t,e,n,i){if(e){for(var r=t,o=t,a=o.parentNode.children[0],s=e,l=r.hierNode.modifier,u=o.hierNode.modifier,h=a.hierNode.modifier,c=s.hierNode.modifier;s=oC(s),o=aC(o),s&&o;){r=oC(r),a=aC(a),r.hierNode.ancestor=t;var p=s.hierNode.prelim+c-o.hierNode.prelim-u+i(s,o);p>0&&(lC(sC(s,t,n),t,p),u+=p,l+=p),c+=s.hierNode.modifier,u+=o.hierNode.modifier,l+=r.hierNode.modifier,h+=a.hierNode.modifier}s&&!oC(r)&&(r.hierNode.thread=s,r.hierNode.modifier+=c-l),o&&!aC(a)&&(a.hierNode.thread=o,a.hierNode.modifier+=u-h,n=t)}return n}(t,r,t.parentNode.hierNode.defaultAncestor||i[0],e)}function nC(t){var e=t.hierNode.prelim+t.parentNode.hierNode.modifier;t.setLayout({x:e},!0),t.hierNode.modifier+=t.parentNode.hierNode.modifier}function iC(t){return arguments.length?t:uC}function rC(t,e){return t-=Math.PI/2,{x:e*Math.cos(t),y:e*Math.sin(t)}}function oC(t){var e=t.children;return e.length&&t.isExpand?e[e.length-1]:t.hierNode.thread}function aC(t){var e=t.children;return e.length&&t.isExpand?e[0]:t.hierNode.thread}function sC(t,e,n){return t.hierNode.ancestor.parentNode===e.parentNode?t.hierNode.ancestor:n}function lC(t,e,n){var i=n/(e.hierNode.i-t.hierNode.i);e.hierNode.change-=i,e.hierNode.shift+=n,e.hierNode.modifier+=n,e.hierNode.prelim+=n,t.hierNode.change+=i}function uC(t,e){return t.parentNode===e.parentNode?1:2}var hC=function(){this.parentPoint=[],this.childPoints=[]},cC=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new hC},e.prototype.buildPath=function(t,e){var n=e.childPoints,i=n.length,r=e.parentPoint,o=n[0],a=n[i-1];if(1===i)return t.moveTo(r[0],r[1]),void t.lineTo(o[0],o[1]);var s=e.orient,l="TB"===s||"BT"===s?0:1,u=1-l,h=Er(e.forkPosition,1),c=[];c[l]=r[l],c[u]=r[u]+(a[u]-r[u])*h,t.moveTo(r[0],r[1]),t.lineTo(c[0],c[1]),t.moveTo(o[0],o[1]),c[l]=o[l],t.lineTo(c[0],c[1]),c[l]=a[l],t.lineTo(c[0],c[1]),t.lineTo(a[0],a[1]);for(var p=1;p<i-1;p++){var d=n[p];t.moveTo(d[0],d[1]),c[l]=d[l],t.lineTo(c[0],c[1])}},e}(gs),pC=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._mainGroup=new Cr,n}return n(e,t),e.prototype.init=function(t,e){this._controller=new kI(e.getZr()),this._controllerHost={target:this.group},this.group.add(this._mainGroup)},e.prototype.render=function(t,e,n){var i=t.getData(),r=t.layoutInfo,o=this._mainGroup;"radial"===t.get("layout")?(o.x=r.x+r.width/2,o.y=r.y+r.height/2):(o.x=r.x,o.y=r.y),this._updateViewCoordSys(t,n),this._updateController(t,e,n);var a=this._data;i.diff(a).add((function(e){dC(i,e)&&fC(i,e,null,o,t)})).update((function(e,n){var r=a.getItemGraphicEl(n);dC(i,e)?fC(i,e,r,o,t):r&&vC(a,n,r,o,t)})).remove((function(e){var n=a.getItemGraphicEl(e);n&&vC(a,e,n,o,t)})).execute(),this._nodeScaleRatio=t.get("nodeScaleRatio"),this._updateNodeAndLinkScale(t),!0===t.get("expandAndCollapse")&&i.eachItemGraphicEl((function(e,i){e.off("click").on("click",(function(){n.dispatchAction({type:"treeExpandAndCollapse",seriesId:t.id,dataIndex:i})}))})),this._data=i},e.prototype._updateViewCoordSys=function(t,e){var n=t.getData(),i=[];n.each((function(t){var e=n.getItemLayout(t);!e||isNaN(e.x)||isNaN(e.y)||i.push([+e.x,+e.y])}));var r=[],o=[];Ma(i,r,o);var a=this._min,s=this._max;o[0]-r[0]==0&&(r[0]=a?a[0]:r[0]-1,o[0]=s?s[0]:o[0]+1),o[1]-r[1]==0&&(r[1]=a?a[1]:r[1]-1,o[1]=s?s[1]:o[1]+1);var l=t.coordinateSystem=new GT;l.zoomLimit=t.get("scaleLimit"),l.setBoundingRect(r[0],r[1],o[0]-r[0],o[1]-r[1]),l.setCenter(t.get("center"),e),l.setZoom(t.get("zoom")),this.group.attr({x:l.x,y:l.y,scaleX:l.scaleX,scaleY:l.scaleY}),this._min=r,this._max=o},e.prototype._updateController=function(t,e,n){var i=this,r=this._controller,o=this._controllerHost,a=this.group;r.setPointerChecker((function(e,i,r){var o=a.getBoundingRect();return o.applyTransform(a.transform),o.contain(i,r)&&!VI(e,n,t)})),r.enable(t.get("roam")),o.zoomLimit=t.get("scaleLimit"),o.zoom=t.coordinateSystem.getZoom(),r.off("pan").off("zoom").on("pan",(function(e){RI(o,e.dx,e.dy),n.dispatchAction({seriesId:t.id,type:"treeRoam",dx:e.dx,dy:e.dy})})).on("zoom",(function(e){NI(o,e.scale,e.originX,e.originY),n.dispatchAction({seriesId:t.id,type:"treeRoam",zoom:e.scale,originX:e.originX,originY:e.originY}),i._updateNodeAndLinkScale(t),n.updateLabelLayout()}))},e.prototype._updateNodeAndLinkScale=function(t){var e=t.getData(),n=this._getNodeGlobalScale(t);e.eachItemGraphicEl((function(t,e){t.setSymbolScale(n)}))},e.prototype._getNodeGlobalScale=function(t){var e=t.coordinateSystem;if("view"!==e.type)return 1;var n=this._nodeScaleRatio,i=e.scaleX||1;return((e.getZoom()-1)*n+1)/i},e.prototype.dispose=function(){this._controller&&this._controller.dispose(),this._controllerHost=null},e.prototype.remove=function(){this._mainGroup.removeAll(),this._data=null},e.type="tree",e}(xg);function dC(t,e){var n=t.getItemLayout(e);return n&&!isNaN(n.x)&&!isNaN(n.y)}function fC(t,e,n,i,r){var o=!n,a=t.tree.getNodeByDataIndex(e),s=a.getModel(),l=a.getVisual("style").fill,u=!1===a.isExpand&&0!==a.children.length?l:"#fff",h=t.tree.root,c=a.parentNode===h?a:a.parentNode||a,p=t.getItemGraphicEl(c.dataIndex),d=c.getLayout(),f=p?{x:p.__oldX,y:p.__oldY,rawX:p.__radialOldRawX,rawY:p.__radialOldRawY}:d,g=a.getLayout();o?((n=new Yw(t,e,null,{symbolInnerColor:u,useNameLabel:!0})).x=f.x,n.y=f.y):n.updateData(t,e,null,{symbolInnerColor:u,useNameLabel:!0}),n.__radialOldRawX=n.__radialRawX,n.__radialOldRawY=n.__radialRawY,n.__radialRawX=g.rawX,n.__radialRawY=g.rawY,i.add(n),t.setItemGraphicEl(e,n),n.__oldX=n.x,n.__oldY=n.y,rh(n,{x:g.x,y:g.y},r);var y=n.getSymbolPath();if("radial"===r.get("layout")){var v=h.children[0],m=v.getLayout(),x=v.children.length,_=void 0,b=void 0;if(g.x===m.x&&!0===a.isExpand&&v.children.length){var w={x:(v.children[0].getLayout().x+v.children[x-1].getLayout().x)/2,y:(v.children[0].getLayout().y+v.children[x-1].getLayout().y)/2};(_=Math.atan2(w.y-m.y,w.x-m.x))<0&&(_=2*Math.PI+_),(b=w.x<m.x)&&(_-=Math.PI)}else(_=Math.atan2(g.y-m.y,g.x-m.x))<0&&(_=2*Math.PI+_),0===a.children.length||0!==a.children.length&&!1===a.isExpand?(b=g.x<m.x)&&(_-=Math.PI):(b=g.x>m.x)||(_-=Math.PI);var S=b?"left":"right",M=s.getModel("label"),I=M.get("rotate"),T=I*(Math.PI/180),C=y.getTextContent();C&&(y.setTextConfig({position:M.get("position")||S,rotation:null==I?-_:T,origin:"center"}),C.setStyle("verticalAlign","middle"))}var D=s.get(["emphasis","focus"]),A="relative"===D?gt(a.getAncestorsIndices(),a.getDescendantIndices()):"ancestor"===D?a.getAncestorsIndices():"descendant"===D?a.getDescendantIndices():null;A&&(Hs(n).focus=A),function(t,e,n,i,r,o,a,s){var l=e.getModel(),u=t.get("edgeShape"),h=t.get("layout"),c=t.getOrient(),p=t.get(["lineStyle","curveness"]),d=t.get("edgeForkPosition"),f=l.getModel("lineStyle").getLineStyle(),g=i.__edge;if("curve"===u)e.parentNode&&e.parentNode!==n&&(g||(g=i.__edge=new Gu({shape:mC(h,c,p,r,r)})),rh(g,{shape:mC(h,c,p,o,a)},t));else if("polyline"===u)if("orthogonal"===h){if(e!==n&&e.children&&0!==e.children.length&&!0===e.isExpand){for(var y=e.children,v=[],m=0;m<y.length;m++){var x=y[m].getLayout();v.push([x.x,x.y])}g||(g=i.__edge=new cC({shape:{parentPoint:[a.x,a.y],childPoints:[[a.x,a.y]],orient:c,forkPosition:d}})),rh(g,{shape:{parentPoint:[a.x,a.y],childPoints:v}},t)}}else 0;g&&("polyline"!==u||e.isExpand)&&(g.useStyle(k({strokeNoScale:!0,fill:null},f)),Vl(g,l,"lineStyle"),vl(g),s.add(g))}(r,a,h,n,f,d,g,i),n.__edge&&(n.onHoverStateChange=function(e){if("blur"!==e){var i=a.parentNode&&t.getItemGraphicEl(a.parentNode.dataIndex);i&&1===i.hoverState||gl(n.__edge,e)}})}function gC(t,e,n,i,r){var o=yC(e.tree.root,t),a=o.source,s=o.sourceLayout,l=e.getItemGraphicEl(t.dataIndex);if(l){var u=e.getItemGraphicEl(a.dataIndex).__edge,h=l.__edge||(!1===a.isExpand||1===a.children.length?u:void 0),c=i.get("edgeShape"),p=i.get("layout"),d=i.get("orient"),f=i.get(["lineStyle","curveness"]);h&&("curve"===c?sh(h,{shape:mC(p,d,f,s,s),style:{opacity:0}},i,{cb:function(){n.remove(h)},removeOpt:r}):"polyline"===c&&"orthogonal"===i.get("layout")&&sh(h,{shape:{parentPoint:[s.x,s.y],childPoints:[[s.x,s.y]]},style:{opacity:0}},i,{cb:function(){n.remove(h)},removeOpt:r}))}}function yC(t,e){for(var n,i=e.parentNode===t?e:e.parentNode||e;null==(n=i.getLayout());)i=i.parentNode===t?i:i.parentNode||i;return{source:i,sourceLayout:n}}function vC(t,e,n,i,r){var o=t.tree.getNodeByDataIndex(e),a=yC(t.tree.root,o).sourceLayout,s={duration:r.get("animationDurationUpdate"),easing:r.get("animationEasingUpdate")};sh(n,{x:a.x+1,y:a.y+1},r,{cb:function(){i.remove(n),t.setItemGraphicEl(e,null)},removeOpt:s}),n.fadeOut(null,t.hostModel,{fadeLabel:!0,animation:s}),o.children.forEach((function(e){gC(e,t,i,r,s)})),gC(o,t,i,r,s)}function mC(t,e,n,i,r){var o,a,s,l,u,h,c,p;if("radial"===t){u=i.rawX,c=i.rawY,h=r.rawX,p=r.rawY;var d=rC(u,c),f=rC(u,c+(p-c)*n),g=rC(h,p+(c-p)*n),y=rC(h,p);return{x1:d.x||0,y1:d.y||0,x2:y.x||0,y2:y.y||0,cpx1:f.x||0,cpy1:f.y||0,cpx2:g.x||0,cpy2:g.y||0}}return u=i.x,c=i.y,h=r.x,p=r.y,"LR"!==e&&"RL"!==e||(o=u+(h-u)*n,a=c,s=h+(u-h)*n,l=p),"TB"!==e&&"BT"!==e||(o=u,a=c+(p-c)*n,s=h,l=p+(c-p)*n),{x1:u,y1:c,x2:h,y2:p,cpx1:o,cpy1:a,cpx2:s,cpy2:l}}var xC=So();function _C(t){var e=t.mainData,n=t.datas;n||(n={main:e},t.datasAttr={main:"data"}),t.datas=t.mainData=null,TC(e,n,t),E(n,(function(n){E(e.TRANSFERABLE_METHODS,(function(e){n.wrapMethod(e,H(bC,t))}))})),e.wrapMethod("cloneShallow",H(SC,t)),E(e.CHANGABLE_METHODS,(function(n){e.wrapMethod(n,H(wC,t))})),lt(n[e.dataType]===e)}function bC(t,e){if(xC(i=this).mainData===i){var n=A({},xC(this).datas);n[this.dataType]=e,TC(e,n,t)}else CC(e,this.dataType,xC(this).mainData,t);var i;return e}function wC(t,e){return t.struct&&t.struct.update(),e}function SC(t,e){return E(xC(e).datas,(function(n,i){n!==e&&CC(n.cloneShallow(),i,e,t)})),e}function MC(t){var e=xC(this).mainData;return null==t||null==e?e:xC(e).datas[t]}function IC(){var t=xC(this).mainData;return null==t?[{data:t}]:z(G(xC(t).datas),(function(e){return{type:e,data:xC(t).datas[e]}}))}function TC(t,e,n){xC(t).datas={},E(e,(function(e,i){CC(e,i,t,n)}))}function CC(t,e,n,i){xC(n).datas[e]=t,xC(t).mainData=n,t.dataType=e,i.struct&&(t[i.structAttr]=i.struct,i.struct[i.datasAttr[e]]=t),t.getLinkedData=MC,t.getLinkedDataAll=IC}var DC=function(){function t(t,e){this.depth=0,this.height=0,this.dataIndex=-1,this.children=[],this.viewChildren=[],this.isExpand=!1,this.name=t||"",this.hostTree=e}return t.prototype.isRemoved=function(){return this.dataIndex<0},t.prototype.eachNode=function(t,e,n){U(t)&&(n=e,e=t,t=null),X(t=t||{})&&(t={order:t});var i,r=t.order||"preorder",o=this[t.attr||"children"];"preorder"===r&&(i=e.call(n,this));for(var a=0;!i&&a<o.length;a++)o[a].eachNode(t,e,n);"postorder"===r&&e.call(n,this)},t.prototype.updateDepthAndHeight=function(t){var e=0;this.depth=t;for(var n=0;n<this.children.length;n++){var i=this.children[n];i.updateDepthAndHeight(t+1),i.height>e&&(e=i.height)}this.height=e+1},t.prototype.getNodeById=function(t){if(this.getId()===t)return this;for(var e=0,n=this.children,i=n.length;e<i;e++){var r=n[e].getNodeById(t);if(r)return r}},t.prototype.contains=function(t){if(t===this)return!0;for(var e=0,n=this.children,i=n.length;e<i;e++){var r=n[e].contains(t);if(r)return r}},t.prototype.getAncestors=function(t){for(var e=[],n=t?this:this.parentNode;n;)e.push(n),n=n.parentNode;return e.reverse(),e},t.prototype.getAncestorsIndices=function(){for(var t=[],e=this;e;)t.push(e.dataIndex),e=e.parentNode;return t.reverse(),t},t.prototype.getDescendantIndices=function(){var t=[];return this.eachNode((function(e){t.push(e.dataIndex)})),t},t.prototype.getValue=function(t){var e=this.hostTree.data;return e.getStore().get(e.getDimensionIndex(t||"value"),this.dataIndex)},t.prototype.setLayout=function(t,e){this.dataIndex>=0&&this.hostTree.data.setItemLayout(this.dataIndex,t,e)},t.prototype.getLayout=function(){return this.hostTree.data.getItemLayout(this.dataIndex)},t.prototype.getModel=function(t){if(!(this.dataIndex<0))return this.hostTree.data.getItemModel(this.dataIndex).getModel(t)},t.prototype.getLevelModel=function(){return(this.hostTree.levelModels||[])[this.depth]},t.prototype.setVisual=function(t,e){this.dataIndex>=0&&this.hostTree.data.setItemVisual(this.dataIndex,t,e)},t.prototype.getVisual=function(t){return this.hostTree.data.getItemVisual(this.dataIndex,t)},t.prototype.getRawIndex=function(){return this.hostTree.data.getRawIndex(this.dataIndex)},t.prototype.getId=function(){return this.hostTree.data.getId(this.dataIndex)},t.prototype.getChildIndex=function(){if(this.parentNode){for(var t=this.parentNode.children,e=0;e<t.length;++e)if(t[e]===this)return e;return-1}return-1},t.prototype.isAncestorOf=function(t){for(var e=t.parentNode;e;){if(e===this)return!0;e=e.parentNode}return!1},t.prototype.isDescendantOf=function(t){return t!==this&&t.isAncestorOf(this)},t}(),AC=function(){function t(t){this.type="tree",this._nodes=[],this.hostModel=t}return t.prototype.eachNode=function(t,e,n){this.root.eachNode(t,e,n)},t.prototype.getNodeByDataIndex=function(t){var e=this.data.getRawIndex(t);return this._nodes[e]},t.prototype.getNodeById=function(t){return this.root.getNodeById(t)},t.prototype.update=function(){for(var t=this.data,e=this._nodes,n=0,i=e.length;n<i;n++)e[n].dataIndex=-1;for(n=0,i=t.count();n<i;n++)e[t.getRawIndex(n)].dataIndex=n},t.prototype.clearLayouts=function(){this.data.clearItemLayouts()},t.createTree=function(e,n,i){var r=new t(n),o=[],a=1;!function t(e,n){var i=e.value;a=Math.max(a,Y(i)?i.length:1),o.push(e);var s=new DC(xo(e.name,""),r);n?function(t,e){var n=e.children;if(t.parentNode===e)return;n.push(t),t.parentNode=e}(s,n):r.root=s,r._nodes.push(s);var l=e.children;if(l)for(var u=0;u<l.length;u++)t(l[u],s)}(e),r.root.updateDepthAndHeight(0);var s=Km(o,{coordDimensions:["value"],dimensionsCount:a}).dimensions,l=new qm(s,n);return l.initData(o),i&&i(l),_C({mainData:l,struct:r,structAttr:"tree"}),r.update(),r},t}();function kC(t,e,n){if(t&&P(e,t.type)>=0){var i=n.getData().tree.root,r=t.targetNode;if(X(r)&&(r=i.getNodeById(r)),r&&i.contains(r))return{node:r};var o=t.targetNodeId;if(null!=o&&(r=i.getNodeById(o)))return{node:r}}}function LC(t){for(var e=[];t;)(t=t.parentNode)&&e.push(t);return e.reverse()}function PC(t,e){return P(LC(t),e)>=0}function OC(t,e){for(var n=[];t;){var i=t.dataIndex;n.push({name:t.name,dataIndex:i,value:e.getRawValue(i)}),t=t.parentNode}return n.reverse(),n}var RC=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.hasSymbolVisual=!0,e.ignoreStyleOnData=!0,e}return n(e,t),e.prototype.getInitialData=function(t){var e={name:t.name,children:t.data},n=t.leaves||{},i=new dc(n,this,this.ecModel),r=AC.createTree(e,this,(function(t){t.wrapMethod("getItemModel",(function(t,e){var n=r.getNodeByDataIndex(e);return n&&n.children.length&&n.isExpand||(t.parentModel=i),t}))}));var o=0;r.eachNode("preorder",(function(t){t.depth>o&&(o=t.depth)}));var a=t.expandAndCollapse&&t.initialTreeDepth>=0?t.initialTreeDepth:o;return r.root.eachNode("preorder",(function(t){var e=t.hostTree.data.getRawDataItem(t.dataIndex);t.isExpand=e&&null!=e.collapsed?!e.collapsed:t.depth<=a})),r.data},e.prototype.getOrient=function(){var t=this.get("orient");return"horizontal"===t?t="LR":"vertical"===t&&(t="TB"),t},e.prototype.setZoom=function(t){this.option.zoom=t},e.prototype.setCenter=function(t){this.option.center=t},e.prototype.formatTooltip=function(t,e,n){for(var i=this.getData().tree,r=i.root.children[0],o=i.getNodeByDataIndex(t),a=o.getValue(),s=o.name;o&&o!==r;)s=o.parentNode.name+"."+s,o=o.parentNode;return Xf("nameValue",{name:s,value:a,noValue:isNaN(a)||null==a})},e.prototype.getDataParams=function(e){var n=t.prototype.getDataParams.apply(this,arguments),i=this.getData().tree.getNodeByDataIndex(e);return n.treeAncestors=OC(i,this),n.collapsed=!i.isExpand,n},e.type="series.tree",e.layoutMode="box",e.defaultOption={z:2,coordinateSystem:"view",left:"12%",top:"12%",right:"12%",bottom:"12%",layout:"orthogonal",edgeShape:"curve",edgeForkPosition:"50%",roam:!1,nodeScaleRatio:.4,center:null,zoom:1,orient:"LR",symbol:"emptyCircle",symbolSize:7,expandAndCollapse:!0,initialTreeDepth:2,lineStyle:{color:"#ccc",width:1.5,curveness:.5},itemStyle:{color:"lightsteelblue",borderWidth:1.5},label:{show:!0},animationEasing:"linear",animationDuration:700,animationDurationUpdate:500},e}(sg);function NC(t,e){for(var n,i=[t];n=i.pop();)if(e(n),n.isExpand){var r=n.children;if(r.length)for(var o=r.length-1;o>=0;o--)i.push(r[o])}}function EC(t,e){t.eachSeriesByType("tree",(function(t){!function(t,e){var n=function(t,e){return xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()})}(t,e);t.layoutInfo=n;var i=t.get("layout"),r=0,o=0,a=null;"radial"===i?(r=2*Math.PI,o=Math.min(n.height,n.width)/2,a=iC((function(t,e){return(t.parentNode===e.parentNode?1:2)/t.depth}))):(r=n.width,o=n.height,a=iC());var s=t.getData().tree.root,l=s.children[0];if(l){!function(t){var e=t;e.hierNode={defaultAncestor:null,ancestor:e,prelim:0,modifier:0,change:0,shift:0,i:0,thread:null};for(var n,i,r=[e];n=r.pop();)if(i=n.children,n.isExpand&&i.length)for(var o=i.length-1;o>=0;o--){var a=i[o];a.hierNode={defaultAncestor:null,ancestor:a,prelim:0,modifier:0,change:0,shift:0,i:o,thread:null},r.push(a)}}(s),function(t,e,n){for(var i,r=[t],o=[];i=r.pop();)if(o.push(i),i.isExpand){var a=i.children;if(a.length)for(var s=0;s<a.length;s++)r.push(a[s])}for(;i=o.pop();)e(i,n)}(l,eC,a),s.hierNode.modifier=-l.hierNode.prelim,NC(l,nC);var u=l,h=l,c=l;NC(l,(function(t){var e=t.getLayout().x;e<u.getLayout().x&&(u=t),e>h.getLayout().x&&(h=t),t.depth>c.depth&&(c=t)}));var p=u===h?1:a(u,h)/2,d=p-u.getLayout().x,f=0,g=0,y=0,v=0;if("radial"===i)f=r/(h.getLayout().x+p+d),g=o/(c.depth-1||1),NC(l,(function(t){y=(t.getLayout().x+d)*f,v=(t.depth-1)*g;var e=rC(y,v);t.setLayout({x:e.x,y:e.y,rawX:y,rawY:v},!0)}));else{var m=t.getOrient();"RL"===m||"LR"===m?(g=o/(h.getLayout().x+p+d),f=r/(c.depth-1||1),NC(l,(function(t){v=(t.getLayout().x+d)*g,y="LR"===m?(t.depth-1)*f:r-(t.depth-1)*f,t.setLayout({x:y,y:v},!0)}))):"TB"!==m&&"BT"!==m||(f=r/(h.getLayout().x+p+d),g=o/(c.depth-1||1),NC(l,(function(t){y=(t.getLayout().x+d)*f,v="TB"===m?(t.depth-1)*g:o-(t.depth-1)*g,t.setLayout({x:y,y:v},!0)})))}}}(t,e)}))}function zC(t){t.eachSeriesByType("tree",(function(t){var e=t.getData();e.tree.eachNode((function(t){var n=t.getModel().getModel("itemStyle").getItemStyle();A(e.ensureUniqueItemVisual(t.dataIndex,"style"),n)}))}))}var VC=["treemapZoomToNode","treemapRender","treemapMove"];function BC(t){var e=t.getData().tree,n={};e.eachNode((function(e){for(var i=e;i&&i.depth>1;)i=i.parentNode;var r=ed(t.ecModel,i.name||i.dataIndex+"",n);e.setVisual("decal",r)}))}var FC=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.preventUsingHoverLayer=!0,n}return n(e,t),e.prototype.getInitialData=function(t,e){var n={name:t.name,children:t.data};GC(n);var i=t.levels||[],r=this.designatedVisualItemStyle={},o=new dc({itemStyle:r},this,e),a=z((i=t.levels=function(t,e){var n,i,r=ho(e.get("color")),o=ho(e.get(["aria","decal","decals"]));if(!r)return;E(t=t||[],(function(t){var e=new dc(t),r=e.get("color"),o=e.get("decal");(e.get(["itemStyle","color"])||r&&"none"!==r)&&(n=!0),(e.get(["itemStyle","decal"])||o&&"none"!==o)&&(i=!0)}));var a=t[0]||(t[0]={});n||(a.color=r.slice());!i&&o&&(a.decal=o.slice());return t}(i,e))||[],(function(t){return new dc(t,o,e)}),this),s=AC.createTree(n,this,(function(t){t.wrapMethod("getItemModel",(function(t,e){var n=s.getNodeByDataIndex(e),i=n?a[n.depth]:null;return t.parentModel=i||o,t}))}));return s.data},e.prototype.optionUpdated=function(){this.resetViewRoot()},e.prototype.formatTooltip=function(t,e,n){var i=this.getData(),r=this.getRawValue(t);return Xf("nameValue",{name:i.getName(t),value:r})},e.prototype.getDataParams=function(e){var n=t.prototype.getDataParams.apply(this,arguments),i=this.getData().tree.getNodeByDataIndex(e);return n.treeAncestors=OC(i,this),n.treePathInfo=n.treeAncestors,n},e.prototype.setLayoutInfo=function(t){this.layoutInfo=this.layoutInfo||{},A(this.layoutInfo,t)},e.prototype.mapIdToIndex=function(t){var e=this._idIndexMap;e||(e=this._idIndexMap=ft(),this._idIndexMapCount=0);var n=e.get(t);return null==n&&e.set(t,n=this._idIndexMapCount++),n},e.prototype.getViewRoot=function(){return this._viewRoot},e.prototype.resetViewRoot=function(t){t?this._viewRoot=t:t=this._viewRoot;var e=this.getRawData().tree.root;t&&(t===e||e.contains(t))||(this._viewRoot=e)},e.prototype.enableAriaDecal=function(){BC(this)},e.type="series.treemap",e.layoutMode="box",e.defaultOption={progressive:0,left:"center",top:"middle",width:"80%",height:"80%",sort:!0,clipWindow:"origin",squareRatio:.5*(1+Math.sqrt(5)),leafDepth:null,drillDownIcon:"▶",zoomToNodeRatio:.1024,roam:!0,nodeClick:"zoomToNode",animation:!0,animationDurationUpdate:900,animationEasing:"quinticInOut",breadcrumb:{show:!0,height:22,left:"center",top:"bottom",emptyItemWidth:25,itemStyle:{color:"rgba(0,0,0,0.7)",textStyle:{color:"#fff"}}},label:{show:!0,distance:0,padding:5,position:"inside",color:"#fff",overflow:"truncate"},upperLabel:{show:!1,position:[0,"50%"],height:20,overflow:"truncate",verticalAlign:"middle"},itemStyle:{color:null,colorAlpha:null,colorSaturation:null,borderWidth:0,gapWidth:0,borderColor:"#fff",borderColorSaturation:null},emphasis:{upperLabel:{show:!0,position:[0,"50%"],overflow:"truncate",verticalAlign:"middle"}},visualDimension:0,visualMin:null,visualMax:null,color:[],colorAlpha:null,colorSaturation:null,colorMappingBy:"index",visibleMin:10,childrenVisibleMin:null,levels:[]},e}(sg);function GC(t){var e=0;E(t.children,(function(t){GC(t);var n=t.value;Y(n)&&(n=n[0]),e+=n}));var n=t.value;Y(n)&&(n=n[0]),(null==n||isNaN(n))&&(n=e),n<0&&(n=0),Y(t.value)?t.value[0]=n:t.value=n}var WC=function(){function t(t){this.group=new Cr,t.add(this.group)}return t.prototype.render=function(t,e,n,i){var r=t.getModel("breadcrumb"),o=this.group;if(o.removeAll(),r.get("show")&&n){var a=r.getModel("itemStyle"),s=a.getModel("textStyle"),l={pos:{left:r.get("left"),right:r.get("right"),top:r.get("top"),bottom:r.get("bottom")},box:{width:e.getWidth(),height:e.getHeight()},emptyItemWidth:r.get("emptyItemWidth"),totalWidth:0,renderList:[]};this._prepare(n,l,s),this._renderContent(t,l,a,s,i),_p(o,l.pos,l.box)}},t.prototype._prepare=function(t,e,n){for(var i=t;i;i=i.parentNode){var r=xo(i.getModel().get("name"),""),o=n.getTextRect(r),a=Math.max(o.width+16,e.emptyItemWidth);e.totalWidth+=a+8,e.renderList.push({node:i,text:r,width:a})}},t.prototype._renderContent=function(t,e,n,i,r){for(var o,a,s,l,u,h,c,p,d,f=0,g=e.emptyItemWidth,y=t.get(["breadcrumb","height"]),v=(o=e.pos,a=e.box,l=a.width,u=a.height,h=Er(o.left,l),c=Er(o.top,u),p=Er(o.right,l),d=Er(o.bottom,u),(isNaN(h)||isNaN(parseFloat(o.left)))&&(h=0),(isNaN(p)||isNaN(parseFloat(o.right)))&&(p=l),(isNaN(c)||isNaN(parseFloat(o.top)))&&(c=0),(isNaN(d)||isNaN(parseFloat(o.bottom)))&&(d=u),s=ip(s||0),{width:Math.max(p-h-s[1]-s[3],0),height:Math.max(d-c-s[0]-s[2],0)}),m=e.totalWidth,x=e.renderList,_=x.length-1;_>=0;_--){var b=x[_],w=b.node,S=b.width,M=b.text;m>v.width&&(m-=S-g,S=g,M=null);var I=new Pu({shape:{points:HC(f,0,S,y,_===x.length-1,0===_)},style:k(n.getItemStyle(),{lineJoin:"bevel"}),textContent:new ks({style:{text:M,fill:i.getTextColor(),font:i.getFont()}}),textConfig:{position:"inside"},z2:1e5,onclick:H(r,w)});I.disableLabelAnimation=!0,this.group.add(I),YC(I,t,w),f+=S+8}},t.prototype.remove=function(){this.group.removeAll()},t}();function HC(t,e,n,i,r,o){var a=[[r?t:t-5,e],[t+n,e],[t+n,e+i],[r?t:t-5,e+i]];return!o&&a.splice(2,0,[t+n+5,e+i/2]),!r&&a.push([t,e+i/2]),a}function YC(t,e,n){Hs(t).eventData={componentType:"series",componentSubType:"treemap",componentIndex:e.componentIndex,seriesIndex:e.seriesIndex,seriesName:e.name,seriesType:"treemap",selfType:"breadcrumb",nodeData:{dataIndex:n&&n.dataIndex,name:n&&n.name},treePathInfo:n&&OC(n,e)}}var UC=function(){function t(){this._storage=[],this._elExistsMap={}}return t.prototype.add=function(t,e,n,i,r){return!this._elExistsMap[t.id]&&(this._elExistsMap[t.id]=!0,this._storage.push({el:t,target:e,duration:n,delay:i,easing:r}),!0)},t.prototype.finished=function(t){return this._finishedCallback=t,this},t.prototype.start=function(){for(var t=this,e=this._storage.length,n=function(){--e<=0&&(t._storage.length=0,t._elExistsMap={},t._finishedCallback&&t._finishedCallback())},i=0,r=this._storage.length;i<r;i++){var o=this._storage[i];o.el.animateTo(o.target,{duration:o.duration,delay:o.delay,easing:o.easing,setToFinal:!0,done:n,aborted:n})}return this},t}();var XC=Cr,ZC=Cs,jC="label",qC="upperLabel",KC=Wo([["fill","color"],["stroke","strokeColor"],["lineWidth","strokeWidth"],["shadowBlur"],["shadowOffsetX"],["shadowOffsetY"],["shadowColor"]]),$C=function(t){var e=KC(t);return e.stroke=e.fill=e.lineWidth=null,e},JC=So(),QC=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._state="ready",n._storage={nodeGroup:[],background:[],content:[]},n}return n(e,t),e.prototype.render=function(t,e,n,i){if(!(P(e.findComponents({mainType:"series",subType:"treemap",query:i}),t)<0)){this.seriesModel=t,this.api=n,this.ecModel=e;var r=kC(i,["treemapZoomToNode","treemapRootToNode"],t),o=i&&i.type,a=t.layoutInfo,s=!this._oldTree,l=this._storage,u="treemapRootToNode"===o&&r&&l?{rootNodeGroup:l.nodeGroup[r.node.getRawIndex()],direction:i.direction}:null,h=this._giveContainerGroup(a),c=t.get("animation"),p=this._doRender(h,t,u);!c||s||o&&"treemapZoomToNode"!==o&&"treemapRootToNode"!==o?p.renderFinally():this._doAnimation(h,p,t,u),this._resetController(n),this._renderBreadcrumb(t,n,r)}},e.prototype._giveContainerGroup=function(t){var e=this._containerGroup;return e||(e=this._containerGroup=new XC,this._initEvents(e),this.group.add(e)),e.x=t.x,e.y=t.y,e},e.prototype._doRender=function(t,e,n){var i=e.getData().tree,r=this._oldTree,o={nodeGroup:[],background:[],content:[]},a={nodeGroup:[],background:[],content:[]},s=this._storage,l=[];function u(t,i,r,u){return function(t,e,n,i,r,o,a,s,l,u){if(!a)return;var h=a.getLayout(),c=t.getData(),p=a.getModel();if(c.setItemGraphicEl(a.dataIndex,null),!h||!h.isInView)return;var d=h.width,f=h.height,g=h.borderWidth,y=h.invisible,v=a.getRawIndex(),m=s&&s.getRawIndex(),x=a.viewChildren,_=h.upperHeight,b=x&&x.length,w=p.getModel("itemStyle"),S=p.getModel(["emphasis","itemStyle"]),M=p.getModel(["blur","itemStyle"]),I=p.getModel(["select","itemStyle"]),T=w.get("borderRadius")||0,C=G("nodeGroup",XC);if(!C)return;if(l.add(C),C.x=h.x||0,C.y=h.y||0,C.markRedraw(),JC(C).nodeWidth=d,JC(C).nodeHeight=f,h.isAboveViewRoot)return C;var D=G("background",ZC,u,20);D&&E(C,D,b&&h.upperLabelHeight);var k=p.getModel("emphasis"),L=k.get("focus"),P=k.get("blurScope"),O=k.get("disabled"),R="ancestor"===L?a.getAncestorsIndices():"descendant"===L?a.getDescendantIndices():L;if(b)Fl(C)&&Bl(C,!1),D&&(Bl(D,!O),c.setItemGraphicEl(a.dataIndex,D),Nl(D,R,P));else{var N=G("content",ZC,u,30);N&&z(C,N),D.disableMorphing=!0,D&&Fl(D)&&Bl(D,!1),Bl(C,!O),c.setItemGraphicEl(a.dataIndex,C),Nl(C,R,P)}return C;function E(e,n,i){var r=Hs(n);if(r.dataIndex=a.dataIndex,r.seriesIndex=t.seriesIndex,n.setShape({x:0,y:0,width:d,height:f,r:T}),y)V(n);else{n.invisible=!1;var o=a.getVisual("style"),s=o.stroke,l=$C(w);l.fill=s;var u=KC(S);u.fill=S.get("borderColor");var h=KC(M);h.fill=M.get("borderColor");var c=KC(I);if(c.fill=I.get("borderColor"),i){var p=d-2*g;B(n,s,o.opacity,{x:g,y:0,width:p,height:_})}else n.removeTextContent();n.setStyle(l),n.ensureState("emphasis").style=u,n.ensureState("blur").style=h,n.ensureState("select").style=c,vl(n)}e.add(n)}function z(e,n){var i=Hs(n);i.dataIndex=a.dataIndex,i.seriesIndex=t.seriesIndex;var r=Math.max(d-2*g,0),o=Math.max(f-2*g,0);if(n.culling=!0,n.setShape({x:g,y:g,width:r,height:o,r:T}),y)V(n);else{n.invisible=!1;var s=a.getVisual("style"),l=s.fill,u=$C(w);u.fill=l,u.decal=s.decal;var h=KC(S),c=KC(M),p=KC(I);B(n,l,s.opacity,null),n.setStyle(u),n.ensureState("emphasis").style=h,n.ensureState("blur").style=c,n.ensureState("select").style=p,vl(n)}e.add(n)}function V(t){!t.invisible&&o.push(t)}function B(e,n,i,r){var o=p.getModel(r?qC:jC),s=xo(p.get("name"),null),l=o.getShallow("show");Hh(e,Yh(p,r?qC:jC),{defaultText:l?s:null,inheritColor:n,defaultOpacity:i,labelFetcher:t,labelDataIndex:a.dataIndex});var u=e.getTextContent();if(u){var c=u.style,d=st(c.padding||0);r&&(e.setTextConfig({layoutRect:r}),u.disableLabelLayout=!0),u.beforeUpdate=function(){var t=Math.max((r?r.width:e.shape.width)-d[1]-d[3],0),n=Math.max((r?r.height:e.shape.height)-d[0]-d[2],0);c.width===t&&c.height===n||u.setStyle({width:t,height:n})},c.truncateMinChar=2,c.lineOverflow="truncate",F(c,r,h);var f=u.getState("emphasis");F(f?f.style:null,r,h)}}function F(e,n,i){var r=e?e.text:null;if(!n&&i.isLeafRoot&&null!=r){var o=t.get("drillDownIcon",!0);e.text=o?o+" "+r:r}}function G(t,i,o,a){var s=null!=m&&n[t][m],l=r[t];return s?(n[t][m]=null,W(l,s)):y||((s=new i)instanceof da&&(s.z2=function(t,e){return 100*t+e}(o,a)),H(l,s)),e[t][v]=s}function W(t,e){var n=t[v]={};e instanceof XC?(n.oldX=e.x,n.oldY=e.y):n.oldShape=A({},e.shape)}function H(t,e){var n=t[v]={},o=a.parentNode,s=e instanceof Cr;if(o&&(!i||"drillDown"===i.direction)){var l=0,u=0,h=r.background[o.getRawIndex()];!i&&h&&h.oldShape&&(l=h.oldShape.width,u=h.oldShape.height),s?(n.oldX=0,n.oldY=u):n.oldShape={x:l,y:u,width:0,height:0}}n.fadein=!s}}(e,a,s,n,o,l,t,i,r,u)}!function t(e,n,i,r,o){r?(n=e,E(e,(function(t,e){!t.isRemoved()&&s(e,e)}))):new Im(n,e,a,a).add(s).update(s).remove(H(s,null)).execute();function a(t){return t.getId()}function s(a,s){var l=null!=a?e[a]:null,h=null!=s?n[s]:null,c=u(l,h,i,o);c&&t(l&&l.viewChildren||[],h&&h.viewChildren||[],c,r,o+1)}}(i.root?[i.root]:[],r&&r.root?[r.root]:[],t,i===r||!r,0);var h=function(t){var e={nodeGroup:[],background:[],content:[]};return t&&E(t,(function(t,n){var i=e[n];E(t,(function(t){t&&(i.push(t),JC(t).willDelete=!0)}))})),e}(s);return this._oldTree=i,this._storage=a,{lastsForAnimation:o,willDeleteEls:h,renderFinally:function(){E(h,(function(t){E(t,(function(t){t.parent&&t.parent.remove(t)}))})),E(l,(function(t){t.invisible=!0,t.dirty()}))}}},e.prototype._doAnimation=function(t,e,n,i){var r=n.get("animationDurationUpdate"),o=n.get("animationEasing"),a=(U(r)?0:r)||0,s=(U(o)?null:o)||"cubicOut",l=new UC;E(e.willDeleteEls,(function(t,e){E(t,(function(t,n){if(!t.invisible){var r,o=t.parent,u=JC(o);if(i&&"drillDown"===i.direction)r=o===i.rootNodeGroup?{shape:{x:0,y:0,width:u.nodeWidth,height:u.nodeHeight},style:{opacity:0}}:{style:{opacity:0}};else{var h=0,c=0;u.willDelete||(h=u.nodeWidth/2,c=u.nodeHeight/2),r="nodeGroup"===e?{x:h,y:c,style:{opacity:0}}:{shape:{x:h,y:c,width:0,height:0},style:{opacity:0}}}r&&l.add(t,r,a,0,s)}}))})),E(this._storage,(function(t,n){E(t,(function(t,i){var r=e.lastsForAnimation[n][i],o={};r&&(t instanceof Cr?null!=r.oldX&&(o.x=t.x,o.y=t.y,t.x=r.oldX,t.y=r.oldY):(r.oldShape&&(o.shape=A({},t.shape),t.setShape(r.oldShape)),r.fadein?(t.setStyle("opacity",0),o.style={opacity:1}):1!==t.style.opacity&&(o.style={opacity:1})),l.add(t,o,a,0,s))}))}),this),this._state="animating",l.finished(W((function(){this._state="ready",e.renderFinally()}),this)).start()},e.prototype._resetController=function(t){var e=this._controller;e||((e=this._controller=new kI(t.getZr())).enable(this.seriesModel.get("roam")),e.on("pan",W(this._onPan,this)),e.on("zoom",W(this._onZoom,this)));var n=new sr(0,0,t.getWidth(),t.getHeight());e.setPointerChecker((function(t,e,i){return n.contain(e,i)}))},e.prototype._clearController=function(){var t=this._controller;t&&(t.dispose(),t=null)},e.prototype._onPan=function(t){if("animating"!==this._state&&(Math.abs(t.dx)>3||Math.abs(t.dy)>3)){var e=this.seriesModel.getData().tree.root;if(!e)return;var n=e.getLayout();if(!n)return;this.api.dispatchAction({type:"treemapMove",from:this.uid,seriesId:this.seriesModel.id,rootRect:{x:n.x+t.dx,y:n.y+t.dy,width:n.width,height:n.height}})}},e.prototype._onZoom=function(t){var e=t.originX,n=t.originY;if("animating"!==this._state){var i=this.seriesModel.getData().tree.root;if(!i)return;var r=i.getLayout();if(!r)return;var o=new sr(r.x,r.y,r.width,r.height),a=this.seriesModel.layoutInfo,s=[1,0,0,1,0,0];Ei(s,s,[-(e-=a.x),-(n-=a.y)]),Vi(s,s,[t.scale,t.scale]),Ei(s,s,[e,n]),o.applyTransform(s),this.api.dispatchAction({type:"treemapRender",from:this.uid,seriesId:this.seriesModel.id,rootRect:{x:o.x,y:o.y,width:o.width,height:o.height}})}},e.prototype._initEvents=function(t){var e=this;t.on("click",(function(t){if("ready"===e._state){var n=e.seriesModel.get("nodeClick",!0);if(n){var i=e.findTarget(t.offsetX,t.offsetY);if(i){var r=i.node;if(r.getLayout().isLeafRoot)e._rootToNode(i);else if("zoomToNode"===n)e._zoomToNode(i);else if("link"===n){var o=r.hostTree.data.getItemModel(r.dataIndex),a=o.get("link",!0),s=o.get("target",!0)||"blank";a&&dp(a,s)}}}}}),this)},e.prototype._renderBreadcrumb=function(t,e,n){var i=this;n||(n=null!=t.get("leafDepth",!0)?{node:t.getViewRoot()}:this.findTarget(e.getWidth()/2,e.getHeight()/2))||(n={node:t.getData().tree.root}),(this._breadcrumb||(this._breadcrumb=new WC(this.group))).render(t,e,n.node,(function(e){"animating"!==i._state&&(PC(t.getViewRoot(),e)?i._rootToNode({node:e}):i._zoomToNode({node:e}))}))},e.prototype.remove=function(){this._clearController(),this._containerGroup&&this._containerGroup.removeAll(),this._storage={nodeGroup:[],background:[],content:[]},this._state="ready",this._breadcrumb&&this._breadcrumb.remove()},e.prototype.dispose=function(){this._clearController()},e.prototype._zoomToNode=function(t){this.api.dispatchAction({type:"treemapZoomToNode",from:this.uid,seriesId:this.seriesModel.id,targetNode:t.node})},e.prototype._rootToNode=function(t){this.api.dispatchAction({type:"treemapRootToNode",from:this.uid,seriesId:this.seriesModel.id,targetNode:t.node})},e.prototype.findTarget=function(t,e){var n;return this.seriesModel.getViewRoot().eachNode({attr:"viewChildren",order:"preorder"},(function(i){var r=this._storage.background[i.getRawIndex()];if(r){var o=r.transformCoordToLocal(t,e),a=r.shape;if(!(a.x<=o[0]&&o[0]<=a.x+a.width&&a.y<=o[1]&&o[1]<=a.y+a.height))return!1;n={node:i,offsetX:o[0],offsetY:o[1]}}}),this),n},e.type="treemap",e}(xg);var tD=E,eD=q,nD=-1,iD=function(){function t(e){var n=e.mappingMethod,i=e.type,r=this.option=T(e);this.type=i,this.mappingMethod=n,this._normalizeData=dD[n];var o=t.visualHandlers[i];this.applyVisual=o.applyVisual,this.getColorMapper=o.getColorMapper,this._normalizedToVisual=o._normalizedToVisual[n],"piecewise"===n?(rD(r),function(t){var e=t.pieceList;t.hasSpecialVisual=!1,E(e,(function(e,n){e.originIndex=n,null!=e.visual&&(t.hasSpecialVisual=!0)}))}(r)):"category"===n?r.categories?function(t){var e=t.categories,n=t.categoryMap={},i=t.visual;if(tD(e,(function(t,e){n[t]=e})),!Y(i)){var r=[];q(i)?tD(i,(function(t,e){var i=n[e];r[null!=i?i:nD]=t})):r[-1]=i,i=pD(t,r)}for(var o=e.length-1;o>=0;o--)null==i[o]&&(delete n[e[o]],e.pop())}(r):rD(r,!0):(lt("linear"!==n||r.dataExtent),rD(r))}return t.prototype.mapValueToVisual=function(t){var e=this._normalizeData(t);return this._normalizedToVisual(e,t)},t.prototype.getNormalizer=function(){return W(this._normalizeData,this)},t.listVisualTypes=function(){return G(t.visualHandlers)},t.isValidType=function(e){return t.visualHandlers.hasOwnProperty(e)},t.eachVisual=function(t,e,n){q(t)?E(t,e,n):e.call(n,t)},t.mapVisual=function(e,n,i){var r,o=Y(e)?[]:q(e)?{}:(r=!0,null);return t.eachVisual(e,(function(t,e){var a=n.call(i,t,e);r?o=a:o[e]=a})),o},t.retrieveVisuals=function(e){var n,i={};return e&&tD(t.visualHandlers,(function(t,r){e.hasOwnProperty(r)&&(i[r]=e[r],n=!0)})),n?i:null},t.prepareVisualTypes=function(t){if(Y(t))t=t.slice();else{if(!eD(t))return[];var e=[];tD(t,(function(t,n){e.push(n)})),t=e}return t.sort((function(t,e){return"color"===e&&"color"!==t&&0===t.indexOf("color")?1:-1})),t},t.dependsOn=function(t,e){return"color"===e?!(!t||0!==t.indexOf(e)):t===e},t.findPieceIndex=function(t,e,n){for(var i,r=1/0,o=0,a=e.length;o<a;o++){var s=e[o].value;if(null!=s){if(s===t||X(s)&&s===t+"")return o;n&&c(s,o)}}for(o=0,a=e.length;o<a;o++){var l=e[o],u=l.interval,h=l.close;if(u){if(u[0]===-1/0){if(fD(h[1],t,u[1]))return o}else if(u[1]===1/0){if(fD(h[0],u[0],t))return o}else if(fD(h[0],u[0],t)&&fD(h[1],t,u[1]))return o;n&&c(u[0],o),n&&c(u[1],o)}}if(n)return t===1/0?e.length-1:t===-1/0?0:i;function c(e,n){var o=Math.abs(e-t);o<r&&(r=o,i=n)}},t.visualHandlers={color:{applyVisual:sD("color"),getColorMapper:function(){var t=this.option;return W("category"===t.mappingMethod?function(t,e){return!e&&(t=this._normalizeData(t)),lD.call(this,t)}:function(e,n,i){var r=!!i;return!n&&(e=this._normalizeData(e)),i=Mn(e,t.parsedVisual,i),r?i:kn(i,"rgba")},this)},_normalizedToVisual:{linear:function(t){return kn(Mn(t,this.option.parsedVisual),"rgba")},category:lD,piecewise:function(t,e){var n=cD.call(this,e);return null==n&&(n=kn(Mn(t,this.option.parsedVisual),"rgba")),n},fixed:uD}},colorHue:oD((function(t,e){return Dn(t,e)})),colorSaturation:oD((function(t,e){return Dn(t,null,e)})),colorLightness:oD((function(t,e){return Dn(t,null,null,e)})),colorAlpha:oD((function(t,e){return An(t,e)})),decal:{applyVisual:sD("decal"),_normalizedToVisual:{linear:null,category:lD,piecewise:null,fixed:null}},opacity:{applyVisual:sD("opacity"),_normalizedToVisual:hD([0,1])},liftZ:{applyVisual:sD("liftZ"),_normalizedToVisual:{linear:uD,category:uD,piecewise:uD,fixed:uD}},symbol:{applyVisual:function(t,e,n){n("symbol",this.mapValueToVisual(t))},_normalizedToVisual:{linear:aD,category:lD,piecewise:function(t,e){var n=cD.call(this,e);return null==n&&(n=aD.call(this,t)),n},fixed:uD}},symbolSize:{applyVisual:sD("symbolSize"),_normalizedToVisual:hD([0,1])}},t}();function rD(t,e){var n=t.visual,i=[];q(n)?tD(n,(function(t){i.push(t)})):null!=n&&i.push(n);e||1!==i.length||{color:1,symbol:1}.hasOwnProperty(t.type)||(i[1]=i[0]),pD(t,i)}function oD(t){return{applyVisual:function(e,n,i){var r=this.mapValueToVisual(e);i("color",t(n("color"),r))},_normalizedToVisual:hD([0,1])}}function aD(t){var e=this.option.visual;return e[Math.round(Nr(t,[0,1],[0,e.length-1],!0))]||{}}function sD(t){return function(e,n,i){i(t,this.mapValueToVisual(e))}}function lD(t){var e=this.option.visual;return e[this.option.loop&&t!==nD?t%e.length:t]}function uD(){return this.option.visual[0]}function hD(t){return{linear:function(e){return Nr(e,t,this.option.visual,!0)},category:lD,piecewise:function(e,n){var i=cD.call(this,n);return null==i&&(i=Nr(e,t,this.option.visual,!0)),i},fixed:uD}}function cD(t){var e=this.option,n=e.pieceList;if(e.hasSpecialVisual){var i=n[iD.findPieceIndex(t,n)];if(i&&i.visual)return i.visual[this.type]}}function pD(t,e){return t.visual=e,"color"===t.type&&(t.parsedVisual=z(e,(function(t){var e=bn(t);return e||[0,0,0,1]}))),e}var dD={linear:function(t){return Nr(t,this.option.dataExtent,[0,1],!0)},piecewise:function(t){var e=this.option.pieceList,n=iD.findPieceIndex(t,e,!0);if(null!=n)return Nr(n,[0,e.length-1],[0,1],!0)},category:function(t){var e=this.option.categories?this.option.categoryMap[t]:t;return null==e?nD:e},fixed:xt};function fD(t,e,n){return t?e<=n:e<n}var gD=So(),yD={seriesType:"treemap",reset:function(t){var e=t.getData().tree.root;e.isRemoved()||vD(e,{},t.getViewRoot().getAncestors(),t)}};function vD(t,e,n,i){var r=t.getModel(),o=t.getLayout(),a=t.hostTree.data;if(o&&!o.invisible&&o.isInView){var s,l=r.getModel("itemStyle"),u=function(t,e,n){var i=A({},e),r=n.designatedVisualItemStyle;return E(["color","colorAlpha","colorSaturation"],(function(n){r[n]=e[n];var o=t.get(n);r[n]=null,null!=o&&(i[n]=o)})),i}(l,e,i),h=a.ensureUniqueItemVisual(t.dataIndex,"style"),c=l.get("borderColor"),p=l.get("borderColorSaturation");null!=p&&(c=function(t,e){return null!=e?Dn(e,null,null,t):null}(p,s=mD(u))),h.stroke=c;var d=t.viewChildren;if(d&&d.length){var f=function(t,e,n,i,r,o){if(!o||!o.length)return;var a=_D(e,"color")||null!=r.color&&"none"!==r.color&&(_D(e,"colorAlpha")||_D(e,"colorSaturation"));if(!a)return;var s=e.get("visualMin"),l=e.get("visualMax"),u=n.dataExtent.slice();null!=s&&s<u[0]&&(u[0]=s),null!=l&&l>u[1]&&(u[1]=l);var h=e.get("colorMappingBy"),c={type:a.name,dataExtent:u,visual:a.range};"color"!==c.type||"index"!==h&&"id"!==h?c.mappingMethod="linear":(c.mappingMethod="category",c.loop=!0);var p=new iD(c);return gD(p).drColorMappingBy=h,p}(0,r,o,0,u,d);E(d,(function(t,e){if(t.depth>=n.length||t===n[t.depth]){var o=function(t,e,n,i,r,o){var a=A({},e);if(r){var s=r.type,l="color"===s&&gD(r).drColorMappingBy,u="index"===l?i:"id"===l?o.mapIdToIndex(n.getId()):n.getValue(t.get("visualDimension"));a[s]=r.mapValueToVisual(u)}return a}(r,u,t,e,f,i);vD(t,o,n,i)}}))}else s=mD(u),h.fill=s}}function mD(t){var e=xD(t,"color");if(e){var n=xD(t,"colorAlpha"),i=xD(t,"colorSaturation");return i&&(e=Dn(e,null,null,i)),n&&(e=An(e,n)),e}}function xD(t,e){var n=t[e];if(null!=n&&"none"!==n)return n}function _D(t,e){var n=t.get(e);return Y(n)&&n.length?{name:e,range:n}:null}var bD=Math.max,wD=Math.min,SD=it,MD=E,ID=["itemStyle","borderWidth"],TD=["itemStyle","gapWidth"],CD=["upperLabel","show"],DD=["upperLabel","height"],AD={seriesType:"treemap",reset:function(t,e,n,i){var r=n.getWidth(),o=n.getHeight(),a=t.option,s=xp(t.getBoxLayoutParams(),{width:n.getWidth(),height:n.getHeight()}),l=a.size||[],u=Er(SD(s.width,l[0]),r),h=Er(SD(s.height,l[1]),o),c=i&&i.type,p=kC(i,["treemapZoomToNode","treemapRootToNode"],t),d="treemapRender"===c||"treemapMove"===c?i.rootRect:null,f=t.getViewRoot(),g=LC(f);if("treemapMove"!==c){var y="treemapZoomToNode"===c?function(t,e,n,i,r){var o,a=(e||{}).node,s=[i,r];if(!a||a===n)return s;var l=i*r,u=l*t.option.zoomToNodeRatio;for(;o=a.parentNode;){for(var h=0,c=o.children,p=0,d=c.length;p<d;p++)h+=c[p].getValue();var f=a.getValue();if(0===f)return s;u*=h/f;var g=o.getModel(),y=g.get(ID);(u+=4*y*y+(3*y+Math.max(y,RD(g)))*Math.pow(u,.5))>Yr&&(u=Yr),a=o}u<l&&(u=l);var v=Math.pow(u/l,.5);return[i*v,r*v]}(t,p,f,u,h):d?[d.width,d.height]:[u,h],v=a.sort;v&&"asc"!==v&&"desc"!==v&&(v="desc");var m={squareRatio:a.squareRatio,sort:v,leafDepth:a.leafDepth};f.hostTree.clearLayouts();var x={x:0,y:0,width:y[0],height:y[1],area:y[0]*y[1]};f.setLayout(x),kD(f,m,!1,0),x=f.getLayout(),MD(g,(function(t,e){var n=(g[e+1]||f).getValue();t.setLayout(A({dataExtent:[n,n],borderWidth:0,upperHeight:0},x))}))}var _=t.getData().tree.root;_.setLayout(function(t,e,n){if(e)return{x:e.x,y:e.y};var i={x:0,y:0};if(!n)return i;var r=n.node,o=r.getLayout();if(!o)return i;var a=[o.width/2,o.height/2],s=r;for(;s;){var l=s.getLayout();a[0]+=l.x,a[1]+=l.y,s=s.parentNode}return{x:t.width/2-a[0],y:t.height/2-a[1]}}(s,d,p),!0),t.setLayoutInfo(s),OD(_,new sr(-s.x,-s.y,r,o),g,f,0)}};function kD(t,e,n,i){var r,o;if(!t.isRemoved()){var a=t.getLayout();r=a.width,o=a.height;var s=t.getModel(),l=s.get(ID),u=s.get(TD)/2,h=RD(s),c=Math.max(l,h),p=l-u,d=c-u;t.setLayout({borderWidth:l,upperHeight:c,upperLabelHeight:h},!0);var f=(r=bD(r-2*p,0))*(o=bD(o-p-d,0)),g=function(t,e,n,i,r,o){var a=t.children||[],s=i.sort;"asc"!==s&&"desc"!==s&&(s=null);var l=null!=i.leafDepth&&i.leafDepth<=o;if(r&&!l)return t.viewChildren=[];!function(t,e){e&&t.sort((function(t,n){var i="asc"===e?t.getValue()-n.getValue():n.getValue()-t.getValue();return 0===i?"asc"===e?t.dataIndex-n.dataIndex:n.dataIndex-t.dataIndex:i}))}(a=B(a,(function(t){return!t.isRemoved()})),s);var u=function(t,e,n){for(var i=0,r=0,o=e.length;r<o;r++)i+=e[r].getValue();var a,s=t.get("visualDimension");e&&e.length?"value"===s&&n?(a=[e[e.length-1].getValue(),e[0].getValue()],"asc"===n&&a.reverse()):(a=[1/0,-1/0],MD(e,(function(t){var e=t.getValue(s);e<a[0]&&(a[0]=e),e>a[1]&&(a[1]=e)}))):a=[NaN,NaN];return{sum:i,dataExtent:a}}(e,a,s);if(0===u.sum)return t.viewChildren=[];if(u.sum=function(t,e,n,i,r){if(!i)return n;for(var o=t.get("visibleMin"),a=r.length,s=a,l=a-1;l>=0;l--){var u=r["asc"===i?a-l-1:l].getValue();u/n*e<o&&(s=l,n-=u)}return"asc"===i?r.splice(0,a-s):r.splice(s,a-s),n}(e,n,u.sum,s,a),0===u.sum)return t.viewChildren=[];for(var h=0,c=a.length;h<c;h++){var p=a[h].getValue()/u.sum*n;a[h].setLayout({area:p})}l&&(a.length&&t.setLayout({isLeafRoot:!0},!0),a.length=0);return t.viewChildren=a,t.setLayout({dataExtent:u.dataExtent},!0),a}(t,s,f,e,n,i);if(g.length){var y={x:p,y:d,width:r,height:o},v=wD(r,o),m=1/0,x=[];x.area=0;for(var _=0,b=g.length;_<b;){var w=g[_];x.push(w),x.area+=w.getLayout().area;var S=LD(x,v,e.squareRatio);S<=m?(_++,m=S):(x.area-=x.pop().getLayout().area,PD(x,v,y,u,!1),v=wD(y.width,y.height),x.length=x.area=0,m=1/0)}if(x.length&&PD(x,v,y,u,!0),!n){var M=s.get("childrenVisibleMin");null!=M&&f<M&&(n=!0)}for(_=0,b=g.length;_<b;_++)kD(g[_],e,n,i+1)}}}function LD(t,e,n){for(var i=0,r=1/0,o=0,a=void 0,s=t.length;o<s;o++)(a=t[o].getLayout().area)&&(a<r&&(r=a),a>i&&(i=a));var l=t.area*t.area,u=e*e*n;return l?bD(u*i/l,l/(u*r)):1/0}function PD(t,e,n,i,r){var o=e===n.width?0:1,a=1-o,s=["x","y"],l=["width","height"],u=n[s[o]],h=e?t.area/e:0;(r||h>n[l[a]])&&(h=n[l[a]]);for(var c=0,p=t.length;c<p;c++){var d=t[c],f={},g=h?d.getLayout().area/h:0,y=f[l[a]]=bD(h-2*i,0),v=n[s[o]]+n[l[o]]-u,m=c===p-1||v<g?v:g,x=f[l[o]]=bD(m-2*i,0);f[s[a]]=n[s[a]]+wD(i,y/2),f[s[o]]=u+wD(i,x/2),u+=m,d.setLayout(f,!0)}n[s[a]]+=h,n[l[a]]-=h}function OD(t,e,n,i,r){var o=t.getLayout(),a=n[r],s=a&&a===t;if(!(a&&!s||r===n.length&&t!==i)){t.setLayout({isInView:!0,invisible:!s&&!e.intersect(o),isAboveViewRoot:s},!0);var l=new sr(e.x-o.x,e.y-o.y,e.width,e.height);MD(t.viewChildren||[],(function(t){OD(t,l,n,i,r+1)}))}}function RD(t){return t.get(CD)?t.get(DD):0}function ND(t){var e=t.findComponents({mainType:"legend"});e&&e.length&&t.eachSeriesByType("graph",(function(t){var n=t.getCategoriesData(),i=t.getGraph().data,r=n.mapArray(n.getName);i.filterSelf((function(t){var n=i.getItemModel(t).getShallow("category");if(null!=n){j(n)&&(n=r[n]);for(var o=0;o<e.length;o++)if(!e[o].isSelected(n))return!1}return!0}))}))}function ED(t){var e={};t.eachSeriesByType("graph",(function(t){var n=t.getCategoriesData(),i=t.getData(),r={};n.each((function(i){var o=n.getName(i);r["ec-"+o]=i;var a=n.getItemModel(i),s=a.getModel("itemStyle").getItemStyle();s.fill||(s.fill=t.getColorFromPalette(o,e)),n.setItemVisual(i,"style",s);for(var l=["symbol","symbolSize","symbolKeepAspect"],u=0;u<l.length;u++){var h=a.getShallow(l[u],!0);null!=h&&n.setItemVisual(i,l[u],h)}})),n.count()&&i.each((function(t){var e=i.getItemModel(t).getShallow("category");if(null!=e){X(e)&&(e=r["ec-"+e]);var o=n.getItemVisual(e,"style");A(i.ensureUniqueItemVisual(t,"style"),o);for(var a=["symbol","symbolSize","symbolKeepAspect"],s=0;s<a.length;s++)i.setItemVisual(t,a[s],n.getItemVisual(e,a[s]))}}))}))}function zD(t){return t instanceof Array||(t=[t,t]),t}function VD(t){t.eachSeriesByType("graph",(function(t){var e=t.getGraph(),n=t.getEdgeData(),i=zD(t.get("edgeSymbol")),r=zD(t.get("edgeSymbolSize"));n.setVisual("fromSymbol",i&&i[0]),n.setVisual("toSymbol",i&&i[1]),n.setVisual("fromSymbolSize",r&&r[0]),n.setVisual("toSymbolSize",r&&r[1]),n.setVisual("style",t.getModel("lineStyle").getLineStyle()),n.each((function(t){var i=n.getItemModel(t),r=e.getEdgeByIndex(t),o=zD(i.getShallow("symbol",!0)),a=zD(i.getShallow("symbolSize",!0)),s=i.getModel("lineStyle").getLineStyle(),l=n.ensureUniqueItemVisual(t,"style");switch(A(l,s),l.stroke){case"source":var u=r.node1.getVisual("style");l.stroke=u&&u.fill;break;case"target":u=r.node2.getVisual("style");l.stroke=u&&u.fill}o[0]&&r.setVisual("fromSymbol",o[0]),o[1]&&r.setVisual("toSymbol",o[1]),a[0]&&r.setVisual("fromSymbolSize",a[0]),a[1]&&r.setVisual("toSymbolSize",a[1])}))}))}var BD="--\x3e",FD=function(t){return t.get("autoCurveness")||null},GD=function(t,e){var n=FD(t),i=20,r=[];if(j(n))i=n;else if(Y(n))return void(t.__curvenessList=n);e>i&&(i=e);var o=i%2?i+2:i+3;r=[];for(var a=0;a<o;a++)r.push((a%2?a+1:a)/10*(a%2?-1:1));t.__curvenessList=r},WD=function(t,e,n){var i=[t.id,t.dataIndex].join("."),r=[e.id,e.dataIndex].join(".");return[n.uid,i,r].join(BD)},HD=function(t){var e=t.split(BD);return[e[0],e[2],e[1]].join(BD)},YD=function(t,e){var n=e.__edgeMap;return n[t]?n[t].length:0};function UD(t,e,n,i){var r=FD(e),o=Y(r);if(!r)return null;var a=function(t,e){var n=WD(t.node1,t.node2,e);return e.__edgeMap[n]}(t,e);if(!a)return null;for(var s=-1,l=0;l<a.length;l++)if(a[l]===n){s=l;break}var u=function(t,e){return YD(WD(t.node1,t.node2,e),e)+YD(WD(t.node2,t.node1,e),e)}(t,e);GD(e,u),t.lineStyle=t.lineStyle||{};var h=WD(t.node1,t.node2,e),c=e.__curvenessList,p=o||u%2?0:1;if(a.isForward)return c[p+s];var d=HD(h),f=YD(d,e),g=c[s+f+p];return i?o?r&&0===r[0]?(f+p)%2?g:-g:((f%2?0:1)+p)%2?g:-g:(f+p)%2?g:-g:c[s+f+p]}function XD(t){var e=t.coordinateSystem;if(!e||"view"===e.type){var n=t.getGraph();n.eachNode((function(t){var e=t.getModel();t.setLayout([+e.get("x"),+e.get("y")])})),ZD(n,t)}}function ZD(t,e){t.eachEdge((function(t,n){var i=ot(t.getModel().get(["lineStyle","curveness"]),-UD(t,e,n,!0),0),r=Mt(t.node1.getLayout()),o=Mt(t.node2.getLayout()),a=[r,o];+i&&a.push([(r[0]+o[0])/2-(r[1]-o[1])*i,(r[1]+o[1])/2-(o[0]-r[0])*i]),t.setLayout(a)}))}function jD(t,e){t.eachSeriesByType("graph",(function(t){var e=t.get("layout"),n=t.coordinateSystem;if(n&&"view"!==n.type){var i=t.getData(),r=[];E(n.dimensions,(function(t){r=r.concat(i.mapDimensionsAll(t))}));for(var o=0;o<i.count();o++){for(var a=[],s=!1,l=0;l<r.length;l++){var u=i.get(r[l],o);isNaN(u)||(s=!0),a.push(u)}s?i.setItemLayout(o,n.dataToPoint(a)):i.setItemLayout(o,[NaN,NaN])}ZD(i.graph,t)}else e&&"none"!==e||XD(t)}))}function qD(t){var e=t.coordinateSystem;if("view"!==e.type)return 1;var n=t.option.nodeScaleRatio,i=e.scaleX;return((e.getZoom()-1)*n+1)/i}function KD(t){var e=t.getVisual("symbolSize");return e instanceof Array&&(e=(e[0]+e[1])/2),+e}var $D=Math.PI,JD=[];function QD(t,e){var n=t.coordinateSystem;if(!n||"view"===n.type){var i=n.getBoundingRect(),r=t.getData(),o=r.graph,a=i.width/2+i.x,s=i.height/2+i.y,l=Math.min(i.width,i.height)/2,u=r.count();r.setLayout({cx:a,cy:s}),u&&(tA[e](t,o,r,l,a,s,u),o.eachEdge((function(e,n){var i,r=ot(e.getModel().get(["lineStyle","curveness"]),UD(e,t,n),0),o=Mt(e.node1.getLayout()),l=Mt(e.node2.getLayout()),u=(o[0]+l[0])/2,h=(o[1]+l[1])/2;+r&&(i=[a*(r*=3)+u*(1-r),s*r+h*(1-r)]),e.setLayout([o,l,i])})))}}var tA={value:function(t,e,n,i,r,o,a){var s=0,l=n.getSum("value"),u=2*Math.PI/(l||a);e.eachNode((function(t){var e=t.getValue("value"),n=u*(l?e:1)/2;s+=n,t.setLayout([i*Math.cos(s)+r,i*Math.sin(s)+o]),s+=n}))},symbolSize:function(t,e,n,i,r,o,a){var s=0;JD.length=a;var l=qD(t);e.eachNode((function(t){var e=KD(t);isNaN(e)&&(e=2),e<0&&(e=0),e*=l;var n=Math.asin(e/2/i);isNaN(n)&&(n=$D/2),JD[t.dataIndex]=n,s+=2*n}));var u=(2*$D-s)/a/2,h=0;e.eachNode((function(t){var e=u+JD[t.dataIndex];h+=e,t.setLayout([i*Math.cos(h)+r,i*Math.sin(h)+o]),h+=e}))}};function eA(t){t.eachSeriesByType("graph",(function(t){"circular"===t.get("layout")&&QD(t,"symbolSize")}))}var nA=Ct;function iA(t){t.eachSeriesByType("graph",(function(t){var e=t.coordinateSystem;if(!e||"view"===e.type)if("force"===t.get("layout")){var n=t.preservedPoints||{},i=t.getGraph(),r=i.data,o=i.edgeData,a=t.getModel("force"),s=a.get("initLayout");t.preservedPoints?r.each((function(t){var e=r.getId(t);r.setItemLayout(t,n[e]||[NaN,NaN])})):s&&"none"!==s?"circular"===s&&QD(t,"value"):XD(t);var l=r.getDataExtent("value"),u=o.getDataExtent("value"),h=a.get("repulsion"),c=a.get("edgeLength"),p=Y(h)?h:[h,h],d=Y(c)?c:[c,c];d=[d[1],d[0]];var f=r.mapArray("value",(function(t,e){var n=r.getItemLayout(e),i=Nr(t,l,p);return isNaN(i)&&(i=(p[0]+p[1])/2),{w:i,rep:i,fixed:r.getItemModel(e).get("fixed"),p:!n||isNaN(n[0])||isNaN(n[1])?null:n}})),g=o.mapArray("value",(function(e,n){var r=i.getEdgeByIndex(n),o=Nr(e,u,d);isNaN(o)&&(o=(d[0]+d[1])/2);var a=r.getModel(),s=ot(r.getModel().get(["lineStyle","curveness"]),-UD(r,t,n,!0),0);return{n1:f[r.node1.dataIndex],n2:f[r.node2.dataIndex],d:o,curveness:s,ignoreForceLayout:a.get("ignoreForceLayout")}})),y=e.getBoundingRect(),v=function(t,e,n){for(var i=t,r=e,o=n.rect,a=o.width,s=o.height,l=[o.x+a/2,o.y+s/2],u=null==n.gravity?.1:n.gravity,h=0;h<i.length;h++){var c=i[h];c.p||(c.p=wt(a*(Math.random()-.5)+l[0],s*(Math.random()-.5)+l[1])),c.pp=Mt(c.p),c.edges=null}var p,d,f=null==n.friction?.6:n.friction,g=f;return{warmUp:function(){g=.8*f},setFixed:function(t){i[t].fixed=!0},setUnfixed:function(t){i[t].fixed=!1},beforeStep:function(t){p=t},afterStep:function(t){d=t},step:function(t){p&&p(i,r);for(var e=[],n=i.length,o=0;o<r.length;o++){var a=r[o];if(!a.ignoreForceLayout){var s=a.n1;Dt(e,(y=a.n2).p,s.p);var h=At(e)-a.d,c=y.w/(s.w+y.w);isNaN(c)&&(c=0),Rt(e,e),!s.fixed&&nA(s.p,s.p,e,c*h*g),!y.fixed&&nA(y.p,y.p,e,-(1-c)*h*g)}}for(o=0;o<n;o++)(x=i[o]).fixed||(Dt(e,l,x.p),nA(x.p,x.p,e,u*g));for(o=0;o<n;o++){s=i[o];for(var f=o+1;f<n;f++){var y;Dt(e,(y=i[f]).p,s.p),0===(h=At(e))&&(It(e,Math.random()-.5,Math.random()-.5),h=1);var v=(s.rep+y.rep)/h/h;!s.fixed&&nA(s.pp,s.pp,e,v),!y.fixed&&nA(y.pp,y.pp,e,-v)}}var m=[];for(o=0;o<n;o++){var x;(x=i[o]).fixed||(Dt(m,x.p,x.pp),nA(x.p,x.p,m,g),St(x.pp,x.p))}var _=(g*=.992)<.01;d&&d(i,r,_),t&&t(_)}}}(f,g,{rect:y,gravity:a.get("gravity"),friction:a.get("friction")});v.beforeStep((function(t,e){for(var n=0,r=t.length;n<r;n++)t[n].fixed&&St(t[n].p,i.getNodeByIndex(n).getLayout())})),v.afterStep((function(t,e,o){for(var a=0,s=t.length;a<s;a++)t[a].fixed||i.getNodeByIndex(a).setLayout(t[a].p),n[r.getId(a)]=t[a].p;for(a=0,s=e.length;a<s;a++){var l=e[a],u=i.getEdgeByIndex(a),h=l.n1.p,c=l.n2.p,p=u.getLayout();(p=p?p.slice():[])[0]=p[0]||[],p[1]=p[1]||[],St(p[0],h),St(p[1],c),+l.curveness&&(p[2]=[(h[0]+c[0])/2-(h[1]-c[1])*l.curveness,(h[1]+c[1])/2-(c[0]-h[0])*l.curveness]),u.setLayout(p)}})),t.forceLayout=v,t.preservedPoints=n,v.step()}else t.forceLayout=null}))}function rA(t,e){var n=[];return t.eachSeriesByType("graph",(function(t){var i=t.get("coordinateSystem");if(!i||"view"===i){var r=t.getData(),o=[],a=[];Ma(r.mapArray((function(t){var e=r.getItemModel(t);return[+e.get("x"),+e.get("y")]})),o,a),a[0]-o[0]==0&&(a[0]+=1,o[0]-=1),a[1]-o[1]==0&&(a[1]+=1,o[1]-=1);var s=(a[0]-o[0])/(a[1]-o[1]),l=function(t,e,n){return xp(A(t.getBoxLayoutParams(),{aspect:n}),{width:e.getWidth(),height:e.getHeight()})}(t,e,s);isNaN(s)&&(o=[l.x,l.y],a=[l.x+l.width,l.y+l.height]);var u=a[0]-o[0],h=a[1]-o[1],c=l.width,p=l.height,d=t.coordinateSystem=new GT;d.zoomLimit=t.get("scaleLimit"),d.setBoundingRect(o[0],o[1],u,h),d.setViewRect(l.x,l.y,c,p),d.setCenter(t.get("center"),e),d.setZoom(t.get("zoom")),n.push(d)}})),n}var oA=zu.prototype,aA=Gu.prototype,sA=function(){this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.percent=1};!function(t){function e(){return null!==t&&t.apply(this,arguments)||this}n(e,t)}(sA);function lA(t){return isNaN(+t.cpx1)||isNaN(+t.cpy1)}var uA=function(t){function e(e){var n=t.call(this,e)||this;return n.type="ec-line",n}return n(e,t),e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new sA},e.prototype.buildPath=function(t,e){lA(e)?oA.buildPath.call(this,t,e):aA.buildPath.call(this,t,e)},e.prototype.pointAt=function(t){return lA(this.shape)?oA.pointAt.call(this,t):aA.pointAt.call(this,t)},e.prototype.tangentAt=function(t){var e=this.shape,n=lA(e)?[e.x2-e.x1,e.y2-e.y1]:aA.tangentAt.call(this,t);return Rt(n,n)},e}(gs),hA=["fromSymbol","toSymbol"];function cA(t){return"_"+t+"Type"}function pA(t,e,n){var i=e.getItemVisual(n,t);if(i&&"none"!==i){var r=e.getItemVisual(n,t+"Size"),o=e.getItemVisual(n,t+"Rotate"),a=e.getItemVisual(n,t+"Offset"),s=e.getItemVisual(n,t+"KeepAspect"),l=Py(r),u=Oy(a||0,l),h=Ly(i,-l[0]/2+u[0],-l[1]/2+u[1],l[0],l[1],null,s);return h.__specifiedRotation=null==o||isNaN(o)?void 0:+o*Math.PI/180||0,h.name=t,h}}function dA(t,e){t.x1=e[0][0],t.y1=e[0][1],t.x2=e[1][0],t.y2=e[1][1],t.percent=1;var n=e[2];n?(t.cpx1=n[0],t.cpy1=n[1]):(t.cpx1=NaN,t.cpy1=NaN)}var fA=function(t){function e(e,n,i){var r=t.call(this)||this;return r._createLine(e,n,i),r}return n(e,t),e.prototype._createLine=function(t,e,n){var i=t.hostModel,r=function(t){var e=new uA({name:"line",subPixelOptimize:!0});return dA(e.shape,t),e}(t.getItemLayout(e));r.shape.percent=0,oh(r,{shape:{percent:1}},i,e),this.add(r),E(hA,(function(n){var i=pA(n,t,e);this.add(i),this[cA(n)]=t.getItemVisual(e,n)}),this),this._updateCommonStl(t,e,n)},e.prototype.updateData=function(t,e,n){var i=t.hostModel,r=this.childOfName("line"),o=t.getItemLayout(e),a={shape:{}};dA(a.shape,o),rh(r,a,i,e),E(hA,(function(n){var i=t.getItemVisual(e,n),r=cA(n);if(this[r]!==i){this.remove(this.childOfName(n));var o=pA(n,t,e);this.add(o)}this[r]=i}),this),this._updateCommonStl(t,e,n)},e.prototype.getLinePath=function(){return this.childAt(0)},e.prototype._updateCommonStl=function(t,e,n){var i=t.hostModel,r=this.childOfName("line"),o=n&&n.emphasisLineStyle,a=n&&n.blurLineStyle,s=n&&n.selectLineStyle,l=n&&n.labelStatesModels,u=n&&n.emphasisDisabled,h=n&&n.focus,c=n&&n.blurScope;if(!n||t.hasItemOption){var p=t.getItemModel(e),d=p.getModel("emphasis");o=d.getModel("lineStyle").getLineStyle(),a=p.getModel(["blur","lineStyle"]).getLineStyle(),s=p.getModel(["select","lineStyle"]).getLineStyle(),u=d.get("disabled"),h=d.get("focus"),c=d.get("blurScope"),l=Yh(p)}var f=t.getItemVisual(e,"style"),g=f.stroke;r.useStyle(f),r.style.fill=null,r.style.strokeNoScale=!0,r.ensureState("emphasis").style=o,r.ensureState("blur").style=a,r.ensureState("select").style=s,E(hA,(function(t){var e=this.childOfName(t);if(e){e.setColor(g),e.style.opacity=f.opacity;for(var n=0;n<qs.length;n++){var i=qs[n],o=r.getState(i);if(o){var a=o.style||{},s=e.ensureState(i),l=s.style||(s.style={});null!=a.stroke&&(l[e.__isEmptyBrush?"stroke":"fill"]=a.stroke),null!=a.opacity&&(l.opacity=a.opacity)}}e.markRedraw()}}),this);var y=i.getRawValue(e);Hh(this,l,{labelDataIndex:e,labelFetcher:{getFormattedLabel:function(e,n){return i.getFormattedLabel(e,n,t.dataType)}},inheritColor:g||"#000",defaultOpacity:f.opacity,defaultText:(null==y?t.getName(e):isFinite(y)?zr(y):y)+""});var v=this.getTextContent();if(v){var m=l.normal;v.__align=v.style.align,v.__verticalAlign=v.style.verticalAlign,v.__position=m.get("position")||"middle";var x=m.get("distance");Y(x)||(x=[x,x]),v.__labelDistance=x}this.setTextConfig({position:null,local:!0,inside:!1}),Rl(this,h,c,u)},e.prototype.highlight=function(){_l(this)},e.prototype.downplay=function(){bl(this)},e.prototype.updateLayout=function(t,e){this.setLinePoints(t.getItemLayout(e))},e.prototype.setLinePoints=function(t){var e=this.childOfName("line");dA(e.shape,t),e.dirty()},e.prototype.beforeUpdate=function(){var t=this,e=t.childOfName("fromSymbol"),n=t.childOfName("toSymbol"),i=t.getTextContent();if(e||n||i&&!i.ignore){for(var r=1,o=this.parent;o;)o.scaleX&&(r/=o.scaleX),o=o.parent;var a=t.childOfName("line");if(this.__dirty||a.__dirty){var s=a.shape.percent,l=a.pointAt(0),u=a.pointAt(s),h=Dt([],u,l);if(Rt(h,h),e&&(e.setPosition(l),S(e,0),e.scaleX=e.scaleY=r*s,e.markRedraw()),n&&(n.setPosition(u),S(n,1),n.scaleX=n.scaleY=r*s,n.markRedraw()),i&&!i.ignore){i.x=i.y=0,i.originX=i.originY=0;var c=void 0,p=void 0,d=i.__labelDistance,f=d[0]*r,g=d[1]*r,y=s/2,v=a.tangentAt(y),m=[v[1],-v[0]],x=a.pointAt(y);m[1]>0&&(m[0]=-m[0],m[1]=-m[1]);var _=v[0]<0?-1:1;if("start"!==i.__position&&"end"!==i.__position){var b=-Math.atan2(v[1],v[0]);u[0]<l[0]&&(b=Math.PI+b),i.rotation=b}var w=void 0;switch(i.__position){case"insideStartTop":case"insideMiddleTop":case"insideEndTop":case"middle":w=-g,p="bottom";break;case"insideStartBottom":case"insideMiddleBottom":case"insideEndBottom":w=g,p="top";break;default:w=0,p="middle"}switch(i.__position){case"end":i.x=h[0]*f+u[0],i.y=h[1]*g+u[1],c=h[0]>.8?"left":h[0]<-.8?"right":"center",p=h[1]>.8?"top":h[1]<-.8?"bottom":"middle";break;case"start":i.x=-h[0]*f+l[0],i.y=-h[1]*g+l[1],c=h[0]>.8?"right":h[0]<-.8?"left":"center",p=h[1]>.8?"bottom":h[1]<-.8?"top":"middle";break;case"insideStartTop":case"insideStart":case"insideStartBottom":i.x=f*_+l[0],i.y=l[1]+w,c=v[0]<0?"right":"left",i.originX=-f*_,i.originY=-w;break;case"insideMiddleTop":case"insideMiddle":case"insideMiddleBottom":case"middle":i.x=x[0],i.y=x[1]+w,c="center",i.originY=-w;break;case"insideEndTop":case"insideEnd":case"insideEndBottom":i.x=-f*_+u[0],i.y=u[1]+w,c=v[0]>=0?"right":"left",i.originX=f*_,i.originY=-w}i.scaleX=i.scaleY=r,i.setStyle({verticalAlign:i.__verticalAlign||p,align:i.__align||c})}}}function S(t,e){var n=t.__specifiedRotation;if(null==n){var i=a.tangentAt(e);t.attr("rotation",(1===e?-1:1)*Math.PI/2-Math.atan2(i[1],i[0]))}else t.attr("rotation",n)}},e}(Cr),gA=function(){function t(t){this.group=new Cr,this._LineCtor=t||fA}return t.prototype.updateData=function(t){var e=this;this._progressiveEls=null;var n=this,i=n.group,r=n._lineData;n._lineData=t,r||i.removeAll();var o=yA(t);t.diff(r).add((function(n){e._doAdd(t,n,o)})).update((function(n,i){e._doUpdate(r,t,i,n,o)})).remove((function(t){i.remove(r.getItemGraphicEl(t))})).execute()},t.prototype.updateLayout=function(){var t=this._lineData;t&&t.eachItemGraphicEl((function(e,n){e.updateLayout(t,n)}),this)},t.prototype.incrementalPrepareUpdate=function(t){this._seriesScope=yA(t),this._lineData=null,this.group.removeAll()},t.prototype.incrementalUpdate=function(t,e){function n(t){t.isGroup||function(t){return t.animators&&t.animators.length>0}(t)||(t.incremental=!0,t.ensureState("emphasis").hoverLayer=!0)}this._progressiveEls=[];for(var i=t.start;i<t.end;i++){if(mA(e.getItemLayout(i))){var r=new this._LineCtor(e,i,this._seriesScope);r.traverse(n),this.group.add(r),e.setItemGraphicEl(i,r),this._progressiveEls.push(r)}}},t.prototype.remove=function(){this.group.removeAll()},t.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},t.prototype._doAdd=function(t,e,n){if(mA(t.getItemLayout(e))){var i=new this._LineCtor(t,e,n);t.setItemGraphicEl(e,i),this.group.add(i)}},t.prototype._doUpdate=function(t,e,n,i,r){var o=t.getItemGraphicEl(n);mA(e.getItemLayout(i))?(o?o.updateData(e,i,r):o=new this._LineCtor(e,i,r),e.setItemGraphicEl(i,o),this.group.add(o)):this.group.remove(o)},t}();function yA(t){var e=t.hostModel,n=e.getModel("emphasis");return{lineStyle:e.getModel("lineStyle").getLineStyle(),emphasisLineStyle:n.getModel(["lineStyle"]).getLineStyle(),blurLineStyle:e.getModel(["blur","lineStyle"]).getLineStyle(),selectLineStyle:e.getModel(["select","lineStyle"]).getLineStyle(),emphasisDisabled:n.get("disabled"),blurScope:n.get("blurScope"),focus:n.get("focus"),labelStatesModels:Yh(e)}}function vA(t){return isNaN(t[0])||isNaN(t[1])}function mA(t){return t&&!vA(t[0])&&!vA(t[1])}var xA=[],_A=[],bA=[],wA=Ke,SA=Vt,MA=Math.abs;function IA(t,e,n){for(var i,r=t[0],o=t[1],a=t[2],s=1/0,l=n*n,u=.1,h=.1;h<=.9;h+=.1){xA[0]=wA(r[0],o[0],a[0],h),xA[1]=wA(r[1],o[1],a[1],h),(d=MA(SA(xA,e)-l))<s&&(s=d,i=h)}for(var c=0;c<32;c++){var p=i+u;_A[0]=wA(r[0],o[0],a[0],i),_A[1]=wA(r[1],o[1],a[1],i),bA[0]=wA(r[0],o[0],a[0],p),bA[1]=wA(r[1],o[1],a[1],p);var d=SA(_A,e)-l;if(MA(d)<.01)break;var f=SA(bA,e)-l;u/=2,d<0?f>=0?i+=u:i-=u:f>=0?i-=u:i+=u}return i}function TA(t,e){var n=[],i=Qe,r=[[],[],[]],o=[[],[]],a=[];e/=2,t.eachEdge((function(t,s){var l=t.getLayout(),u=t.getVisual("fromSymbol"),h=t.getVisual("toSymbol");l.__original||(l.__original=[Mt(l[0]),Mt(l[1])],l[2]&&l.__original.push(Mt(l[2])));var c=l.__original;if(null!=l[2]){if(St(r[0],c[0]),St(r[1],c[2]),St(r[2],c[1]),u&&"none"!==u){var p=KD(t.node1),d=IA(r,c[0],p*e);i(r[0][0],r[1][0],r[2][0],d,n),r[0][0]=n[3],r[1][0]=n[4],i(r[0][1],r[1][1],r[2][1],d,n),r[0][1]=n[3],r[1][1]=n[4]}if(h&&"none"!==h){p=KD(t.node2),d=IA(r,c[1],p*e);i(r[0][0],r[1][0],r[2][0],d,n),r[1][0]=n[1],r[2][0]=n[2],i(r[0][1],r[1][1],r[2][1],d,n),r[1][1]=n[1],r[2][1]=n[2]}St(l[0],r[0]),St(l[1],r[2]),St(l[2],r[1])}else{if(St(o[0],c[0]),St(o[1],c[1]),Dt(a,o[1],o[0]),Rt(a,a),u&&"none"!==u){p=KD(t.node1);Ct(o[0],o[0],a,p*e)}if(h&&"none"!==h){p=KD(t.node2);Ct(o[1],o[1],a,-p*e)}St(l[0],o[0]),St(l[1],o[1])}}))}function CA(t){return"view"===t.type}var DA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(t,e){var n=new qw,i=new gA,r=this.group;this._controller=new kI(e.getZr()),this._controllerHost={target:r},r.add(n.group),r.add(i.group),this._symbolDraw=n,this._lineDraw=i,this._firstRender=!0},e.prototype.render=function(t,e,n){var i=this,r=t.coordinateSystem;this._model=t;var o=this._symbolDraw,a=this._lineDraw,s=this.group;if(CA(r)){var l={x:r.x,y:r.y,scaleX:r.scaleX,scaleY:r.scaleY};this._firstRender?s.attr(l):rh(s,l,t)}TA(t.getGraph(),qD(t));var u=t.getData();o.updateData(u);var h=t.getEdgeData();a.updateData(h),this._updateNodeAndLinkScale(),this._updateController(t,e,n),clearTimeout(this._layoutTimeout);var c=t.forceLayout,p=t.get(["force","layoutAnimation"]);c&&this._startForceLayoutIteration(c,p),u.graph.eachNode((function(t){var e=t.dataIndex,n=t.getGraphicEl(),r=t.getModel();if(n){n.off("drag").off("dragend");var o=r.get("draggable");o&&n.on("drag",(function(){c&&(c.warmUp(),!i._layouting&&i._startForceLayoutIteration(c,p),c.setFixed(e),u.setItemLayout(e,[n.x,n.y]))})).on("dragend",(function(){c&&c.setUnfixed(e)})),n.setDraggable(o&&!!c,!!r.get("cursor")),"adjacency"===r.get(["emphasis","focus"])&&(Hs(n).focus=t.getAdjacentDataIndices())}})),u.graph.eachEdge((function(t){var e=t.getGraphicEl(),n=t.getModel().get(["emphasis","focus"]);e&&"adjacency"===n&&(Hs(e).focus={edge:[t.dataIndex],node:[t.node1.dataIndex,t.node2.dataIndex]})}));var d="circular"===t.get("layout")&&t.get(["circular","rotateLabel"]),f=u.getLayout("cx"),g=u.getLayout("cy");u.eachItemGraphicEl((function(t,e){var n=u.getItemModel(e).get(["label","rotate"])||0,i=t.getSymbolPath();if(d){var r=u.getItemLayout(e),o=Math.atan2(r[1]-g,r[0]-f);o<0&&(o=2*Math.PI+o);var a=r[0]<f;a&&(o-=Math.PI);var s=a?"left":"right";i.setTextConfig({rotation:-o,position:s,origin:"center"});var l=i.ensureState("emphasis");A(l.textConfig||(l.textConfig={}),{position:s})}else i.setTextConfig({rotation:n*=Math.PI/180})})),this._firstRender=!1},e.prototype.dispose=function(){this._controller&&this._controller.dispose(),this._controllerHost=null},e.prototype._startForceLayoutIteration=function(t,e){var n=this;!function i(){t.step((function(t){n.updateLayout(n._model),(n._layouting=!t)&&(e?n._layoutTimeout=setTimeout(i,16):i())}))}()},e.prototype._updateController=function(t,e,n){var i=this,r=this._controller,o=this._controllerHost,a=this.group;r.setPointerChecker((function(e,i,r){var o=a.getBoundingRect();return o.applyTransform(a.transform),o.contain(i,r)&&!VI(e,n,t)})),CA(t.coordinateSystem)?(r.enable(t.get("roam")),o.zoomLimit=t.get("scaleLimit"),o.zoom=t.coordinateSystem.getZoom(),r.off("pan").off("zoom").on("pan",(function(e){RI(o,e.dx,e.dy),n.dispatchAction({seriesId:t.id,type:"graphRoam",dx:e.dx,dy:e.dy})})).on("zoom",(function(e){NI(o,e.scale,e.originX,e.originY),n.dispatchAction({seriesId:t.id,type:"graphRoam",zoom:e.scale,originX:e.originX,originY:e.originY}),i._updateNodeAndLinkScale(),TA(t.getGraph(),qD(t)),i._lineDraw.updateLayout(),n.updateLabelLayout()}))):r.disable()},e.prototype._updateNodeAndLinkScale=function(){var t=this._model,e=t.getData(),n=qD(t);e.eachItemGraphicEl((function(t,e){t&&t.setSymbolScale(n)}))},e.prototype.updateLayout=function(t){TA(t.getGraph(),qD(t)),this._symbolDraw.updateLayout(),this._lineDraw.updateLayout()},e.prototype.remove=function(t,e){this._symbolDraw&&this._symbolDraw.remove(),this._lineDraw&&this._lineDraw.remove()},e.type="graph",e}(xg);function AA(t){return"_EC_"+t}var kA=function(){function t(t){this.type="graph",this.nodes=[],this.edges=[],this._nodesMap={},this._edgesMap={},this._directed=t||!1}return t.prototype.isDirected=function(){return this._directed},t.prototype.addNode=function(t,e){t=null==t?""+e:""+t;var n=this._nodesMap;if(!n[AA(t)]){var i=new LA(t,e);return i.hostGraph=this,this.nodes.push(i),n[AA(t)]=i,i}},t.prototype.getNodeByIndex=function(t){var e=this.data.getRawIndex(t);return this.nodes[e]},t.prototype.getNodeById=function(t){return this._nodesMap[AA(t)]},t.prototype.addEdge=function(t,e,n){var i=this._nodesMap,r=this._edgesMap;if(j(t)&&(t=this.nodes[t]),j(e)&&(e=this.nodes[e]),t instanceof LA||(t=i[AA(t)]),e instanceof LA||(e=i[AA(e)]),t&&e){var o=t.id+"-"+e.id,a=new PA(t,e,n);return a.hostGraph=this,this._directed&&(t.outEdges.push(a),e.inEdges.push(a)),t.edges.push(a),t!==e&&e.edges.push(a),this.edges.push(a),r[o]=a,a}},t.prototype.getEdgeByIndex=function(t){var e=this.edgeData.getRawIndex(t);return this.edges[e]},t.prototype.getEdge=function(t,e){t instanceof LA&&(t=t.id),e instanceof LA&&(e=e.id);var n=this._edgesMap;return this._directed?n[t+"-"+e]:n[t+"-"+e]||n[e+"-"+t]},t.prototype.eachNode=function(t,e){for(var n=this.nodes,i=n.length,r=0;r<i;r++)n[r].dataIndex>=0&&t.call(e,n[r],r)},t.prototype.eachEdge=function(t,e){for(var n=this.edges,i=n.length,r=0;r<i;r++)n[r].dataIndex>=0&&n[r].node1.dataIndex>=0&&n[r].node2.dataIndex>=0&&t.call(e,n[r],r)},t.prototype.breadthFirstTraverse=function(t,e,n,i){if(e instanceof LA||(e=this._nodesMap[AA(e)]),e){for(var r="out"===n?"outEdges":"in"===n?"inEdges":"edges",o=0;o<this.nodes.length;o++)this.nodes[o].__visited=!1;if(!t.call(i,e,null))for(var a=[e];a.length;){var s=a.shift(),l=s[r];for(o=0;o<l.length;o++){var u=l[o],h=u.node1===s?u.node2:u.node1;if(!h.__visited){if(t.call(i,h,s))return;a.push(h),h.__visited=!0}}}}},t.prototype.update=function(){for(var t=this.data,e=this.edgeData,n=this.nodes,i=this.edges,r=0,o=n.length;r<o;r++)n[r].dataIndex=-1;for(r=0,o=t.count();r<o;r++)n[t.getRawIndex(r)].dataIndex=r;e.filterSelf((function(t){var n=i[e.getRawIndex(t)];return n.node1.dataIndex>=0&&n.node2.dataIndex>=0}));for(r=0,o=i.length;r<o;r++)i[r].dataIndex=-1;for(r=0,o=e.count();r<o;r++)i[e.getRawIndex(r)].dataIndex=r},t.prototype.clone=function(){for(var e=new t(this._directed),n=this.nodes,i=this.edges,r=0;r<n.length;r++)e.addNode(n[r].id,n[r].dataIndex);for(r=0;r<i.length;r++){var o=i[r];e.addEdge(o.node1.id,o.node2.id,o.dataIndex)}return e},t}(),LA=function(){function t(t,e){this.inEdges=[],this.outEdges=[],this.edges=[],this.dataIndex=-1,this.id=null==t?"":t,this.dataIndex=null==e?-1:e}return t.prototype.degree=function(){return this.edges.length},t.prototype.inDegree=function(){return this.inEdges.length},t.prototype.outDegree=function(){return this.outEdges.length},t.prototype.getModel=function(t){if(!(this.dataIndex<0))return this.hostGraph.data.getItemModel(this.dataIndex).getModel(t)},t.prototype.getAdjacentDataIndices=function(){for(var t={edge:[],node:[]},e=0;e<this.edges.length;e++){var n=this.edges[e];n.dataIndex<0||(t.edge.push(n.dataIndex),t.node.push(n.node1.dataIndex,n.node2.dataIndex))}return t},t}(),PA=function(){function t(t,e,n){this.dataIndex=-1,this.node1=t,this.node2=e,this.dataIndex=null==n?-1:n}return t.prototype.getModel=function(t){if(!(this.dataIndex<0))return this.hostGraph.edgeData.getItemModel(this.dataIndex).getModel(t)},t.prototype.getAdjacentDataIndices=function(){return{edge:[this.dataIndex],node:[this.node1.dataIndex,this.node2.dataIndex]}},t}();function OA(t,e){return{getValue:function(n){var i=this[t][e];return i.getStore().get(i.getDimensionIndex(n||"value"),this.dataIndex)},setVisual:function(n,i){this.dataIndex>=0&&this[t][e].setItemVisual(this.dataIndex,n,i)},getVisual:function(n){return this[t][e].getItemVisual(this.dataIndex,n)},setLayout:function(n,i){this.dataIndex>=0&&this[t][e].setItemLayout(this.dataIndex,n,i)},getLayout:function(){return this[t][e].getItemLayout(this.dataIndex)},getGraphicEl:function(){return this[t][e].getItemGraphicEl(this.dataIndex)},getRawIndex:function(){return this[t][e].getRawIndex(this.dataIndex)}}}function RA(t,e,n,i,r){for(var o=new kA(i),a=0;a<t.length;a++)o.addNode(it(t[a].id,t[a].name,a),a);var s=[],l=[],u=0;for(a=0;a<e.length;a++){var h=e[a],c=h.source,p=h.target;o.addEdge(c,p,u)&&(l.push(h),s.push(it(xo(h.id,null),c+" > "+p)),u++)}var d,f=n.get("coordinateSystem");if("cartesian2d"===f||"polar"===f)d=rx(t,n);else{var g=hd.get(f),y=g&&g.dimensions||[];P(y,"value")<0&&y.concat(["value"]);var v=Km(t,{coordDimensions:y,encodeDefine:n.getEncode()}).dimensions;(d=new qm(v,n)).initData(t)}var m=new qm(["value"],n);return m.initData(l,s),r&&r(d,m),_C({mainData:d,struct:o,structAttr:"graph",datas:{node:d,edge:m},datasAttr:{node:"data",edge:"edgeData"}}),o.update(),o}R(LA,OA("hostGraph","data")),R(PA,OA("hostGraph","edgeData"));var NA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n}return n(e,t),e.prototype.init=function(e){t.prototype.init.apply(this,arguments);var n=this;function i(){return n._categoriesData}this.legendVisualProvider=new hM(i,i),this.fillDataTextStyle(e.edges||e.links),this._updateCategoriesData()},e.prototype.mergeOption=function(e){t.prototype.mergeOption.apply(this,arguments),this.fillDataTextStyle(e.edges||e.links),this._updateCategoriesData()},e.prototype.mergeDefaultAndTheme=function(e){t.prototype.mergeDefaultAndTheme.apply(this,arguments),co(e,"edgeLabel",["show"])},e.prototype.getInitialData=function(t,e){var n,i=t.edges||t.links||[],r=t.data||t.nodes||[],o=this;if(r&&i){FD(n=this)&&(n.__curvenessList=[],n.__edgeMap={},GD(n));var a=RA(r,i,this,!0,(function(t,e){t.wrapMethod("getItemModel",(function(t){var e=o._categoriesModels[t.getShallow("category")];return e&&(e.parentModel=t.parentModel,t.parentModel=e),t}));var n=dc.prototype.getModel;function i(t,e){var i=n.call(this,t,e);return i.resolveParentPath=r,i}function r(t){if(t&&("label"===t[0]||"label"===t[1])){var e=t.slice();return"label"===t[0]?e[0]="edgeLabel":"label"===t[1]&&(e[1]="edgeLabel"),e}return t}e.wrapMethod("getItemModel",(function(t){return t.resolveParentPath=r,t.getModel=i,t}))}));return E(a.edges,(function(t){!function(t,e,n,i){if(FD(n)){var r=WD(t,e,n),o=n.__edgeMap,a=o[HD(r)];o[r]&&!a?o[r].isForward=!0:a&&o[r]&&(a.isForward=!0,o[r].isForward=!1),o[r]=o[r]||[],o[r].push(i)}}(t.node1,t.node2,this,t.dataIndex)}),this),a.data}},e.prototype.getGraph=function(){return this.getData().graph},e.prototype.getEdgeData=function(){return this.getGraph().edgeData},e.prototype.getCategoriesData=function(){return this._categoriesData},e.prototype.formatTooltip=function(t,e,n){if("edge"===n){var i=this.getData(),r=this.getDataParams(t,n),o=i.graph.getEdgeByIndex(t),a=i.getName(o.node1.dataIndex),s=i.getName(o.node2.dataIndex),l=[];return null!=a&&l.push(a),null!=s&&l.push(s),Xf("nameValue",{name:l.join(" > "),value:r.value,noValue:null==r.value})}return rg({series:this,dataIndex:t,multipleSeries:e})},e.prototype._updateCategoriesData=function(){var t=z(this.option.categories||[],(function(t){return null!=t.value?t:A({value:0},t)})),e=new qm(["value"],this);e.initData(t),this._categoriesData=e,this._categoriesModels=e.mapArray((function(t){return e.getItemModel(t)}))},e.prototype.setZoom=function(t){this.option.zoom=t},e.prototype.setCenter=function(t){this.option.center=t},e.prototype.isAnimationEnabled=function(){return t.prototype.isAnimationEnabled.call(this)&&!("force"===this.get("layout")&&this.get(["force","layoutAnimation"]))},e.type="series.graph",e.dependencies=["grid","polar","geo","singleAxis","calendar"],e.defaultOption={z:2,coordinateSystem:"view",legendHoverLink:!0,layout:null,circular:{rotateLabel:!1},force:{initLayout:null,repulsion:[0,50],gravity:.1,friction:.6,edgeLength:30,layoutAnimation:!0},left:"center",top:"center",symbol:"circle",symbolSize:10,edgeSymbol:["none","none"],edgeSymbolSize:10,edgeLabel:{position:"middle",distance:5},draggable:!1,roam:!1,center:null,zoom:1,nodeScaleRatio:.6,label:{show:!1,formatter:"{b}"},itemStyle:{},lineStyle:{color:"#aaa",width:1,opacity:.5},emphasis:{scale:!0,label:{show:!0}},select:{itemStyle:{borderColor:"#212121"}}},e}(sg),EA={type:"graphRoam",event:"graphRoam",update:"none"};var zA=function(){this.angle=0,this.width=10,this.r=10,this.x=0,this.y=0},VA=function(t){function e(e){var n=t.call(this,e)||this;return n.type="pointer",n}return n(e,t),e.prototype.getDefaultShape=function(){return new zA},e.prototype.buildPath=function(t,e){var n=Math.cos,i=Math.sin,r=e.r,o=e.width,a=e.angle,s=e.x-n(a)*o*(o>=r/3?1:2),l=e.y-i(a)*o*(o>=r/3?1:2);a=e.angle-Math.PI/2,t.moveTo(s,l),t.lineTo(e.x+n(a)*o,e.y+i(a)*o),t.lineTo(e.x+n(e.angle)*r,e.y+i(e.angle)*r),t.lineTo(e.x-n(a)*o,e.y-i(a)*o),t.lineTo(s,l)},e}(gs);function BA(t,e){var n=null==t?"":t+"";return e&&(X(e)?n=e.replace("{value}",n):U(e)&&(n=e(t))),n}var FA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){this.group.removeAll();var i=t.get(["axisLine","lineStyle","color"]),r=function(t,e){var n=t.get("center"),i=e.getWidth(),r=e.getHeight(),o=Math.min(i,r);return{cx:Er(n[0],e.getWidth()),cy:Er(n[1],e.getHeight()),r:Er(t.get("radius"),o/2)}}(t,n);this._renderMain(t,e,n,i,r),this._data=t.getData()},e.prototype.dispose=function(){},e.prototype._renderMain=function(t,e,n,i,r){var o=this.group,a=t.get("clockwise"),s=-t.get("startAngle")/180*Math.PI,l=-t.get("endAngle")/180*Math.PI,u=t.getModel("axisLine"),h=u.get("roundCap")?DS:Cu,c=u.get("show"),p=u.getModel("lineStyle"),d=p.get("width"),f=[s,l];ja(f,!a);for(var g=(l=f[1])-(s=f[0]),y=s,v=0;c&&v<i.length;v++){var m=new h({shape:{startAngle:y,endAngle:l=s+g*Math.min(Math.max(i[v][0],0),1),cx:r.cx,cy:r.cy,clockwise:a,r0:r.r-d,r:r.r},silent:!0});m.setStyle({fill:i[v][1]}),m.setStyle(p.getLineStyle(["color","width"])),o.add(m),y=l}var x=function(t){if(t<=0)return i[0][1];var e;for(e=0;e<i.length;e++)if(i[e][0]>=t&&(0===e?0:i[e-1][0])<t)return i[e][1];return i[e-1][1]};this._renderTicks(t,e,n,x,r,s,l,a,d),this._renderTitleAndDetail(t,e,n,x,r),this._renderAnchor(t,r),this._renderPointer(t,e,n,x,r,s,l,a,d)},e.prototype._renderTicks=function(t,e,n,i,r,o,a,s,l){for(var u,h,c=this.group,p=r.cx,d=r.cy,f=r.r,g=+t.get("min"),y=+t.get("max"),v=t.getModel("splitLine"),m=t.getModel("axisTick"),x=t.getModel("axisLabel"),_=t.get("splitNumber"),b=m.get("splitNumber"),w=Er(v.get("length"),f),S=Er(m.get("length"),f),M=o,I=(a-o)/_,T=I/b,C=v.getModel("lineStyle").getLineStyle(),D=m.getModel("lineStyle").getLineStyle(),A=v.get("distance"),k=0;k<=_;k++){if(u=Math.cos(M),h=Math.sin(M),v.get("show")){var L=new zu({shape:{x1:u*(f-(P=A?A+l:l))+p,y1:h*(f-P)+d,x2:u*(f-w-P)+p,y2:h*(f-w-P)+d},style:C,silent:!0});"auto"===C.stroke&&L.setStyle({stroke:i(k/_)}),c.add(L)}if(x.get("show")){var P=x.get("distance")+A,O=BA(zr(k/_*(y-g)+g),x.get("formatter")),R=i(k/_);c.add(new ks({style:Uh(x,{text:O,x:u*(f-w-P)+p,y:h*(f-w-P)+d,verticalAlign:h<-.8?"top":h>.8?"bottom":"middle",align:u<-.4?"left":u>.4?"right":"center"},{inheritColor:R}),silent:!0}))}if(m.get("show")&&k!==_){P=(P=m.get("distance"))?P+l:l;for(var N=0;N<=b;N++){u=Math.cos(M),h=Math.sin(M);var E=new zu({shape:{x1:u*(f-P)+p,y1:h*(f-P)+d,x2:u*(f-S-P)+p,y2:h*(f-S-P)+d},silent:!0,style:D});"auto"===D.stroke&&E.setStyle({stroke:i((k+N/b)/_)}),c.add(E),M+=T}M-=T}else M+=I}},e.prototype._renderPointer=function(t,e,n,i,r,o,a,s,l){var u=this.group,h=this._data,c=this._progressEls,p=[],d=t.get(["pointer","show"]),f=t.getModel("progress"),g=f.get("show"),y=t.getData(),v=y.mapDimension("value"),m=+t.get("min"),x=+t.get("max"),_=[m,x],b=[o,a];function w(e,n){var i,o=y.getItemModel(e).getModel("pointer"),a=Er(o.get("width"),r.r),s=Er(o.get("length"),r.r),l=t.get(["pointer","icon"]),u=o.get("offsetCenter"),h=Er(u[0],r.r),c=Er(u[1],r.r),p=o.get("keepAspect");return(i=l?Ly(l,h-a/2,c-s,a,s,null,p):new VA({shape:{angle:-Math.PI/2,width:a,r:s,x:h,y:c}})).rotation=-(n+Math.PI/2),i.x=r.cx,i.y=r.cy,i}function S(t,e){var n=f.get("roundCap")?DS:Cu,i=f.get("overlap"),a=i?f.get("width"):l/y.count(),u=i?r.r-a:r.r-(t+1)*a,h=i?r.r:r.r-t*a,c=new n({shape:{startAngle:o,endAngle:e,cx:r.cx,cy:r.cy,clockwise:s,r0:u,r:h}});return i&&(c.z2=x-y.get(v,t)%x),c}(g||d)&&(y.diff(h).add((function(e){var n=y.get(v,e);if(d){var i=w(e,o);oh(i,{rotation:-((isNaN(+n)?b[0]:Nr(n,_,b,!0))+Math.PI/2)},t),u.add(i),y.setItemGraphicEl(e,i)}if(g){var r=S(e,o),a=f.get("clip");oh(r,{shape:{endAngle:Nr(n,_,b,a)}},t),u.add(r),Ys(t.seriesIndex,y.dataType,e,r),p[e]=r}})).update((function(e,n){var i=y.get(v,e);if(d){var r=h.getItemGraphicEl(n),a=r?r.rotation:o,s=w(e,a);s.rotation=a,rh(s,{rotation:-((isNaN(+i)?b[0]:Nr(i,_,b,!0))+Math.PI/2)},t),u.add(s),y.setItemGraphicEl(e,s)}if(g){var l=c[n],m=S(e,l?l.shape.endAngle:o),x=f.get("clip");rh(m,{shape:{endAngle:Nr(i,_,b,x)}},t),u.add(m),Ys(t.seriesIndex,y.dataType,e,m),p[e]=m}})).execute(),y.each((function(t){var e=y.getItemModel(t),n=e.getModel("emphasis"),r=n.get("focus"),o=n.get("blurScope"),a=n.get("disabled");if(d){var s=y.getItemGraphicEl(t),l=y.getItemVisual(t,"style"),u=l.fill;if(s instanceof _s){var h=s.style;s.useStyle(A({image:h.image,x:h.x,y:h.y,width:h.width,height:h.height},l))}else s.useStyle(l),"pointer"!==s.type&&s.setColor(u);s.setStyle(e.getModel(["pointer","itemStyle"]).getItemStyle()),"auto"===s.style.fill&&s.setStyle("fill",i(Nr(y.get(v,t),_,[0,1],!0))),s.z2EmphasisLift=0,Vl(s,e),Rl(s,r,o,a)}if(g){var c=p[t];c.useStyle(y.getItemVisual(t,"style")),c.setStyle(e.getModel(["progress","itemStyle"]).getItemStyle()),c.z2EmphasisLift=0,Vl(c,e),Rl(c,r,o,a)}})),this._progressEls=p)},e.prototype._renderAnchor=function(t,e){var n=t.getModel("anchor");if(n.get("show")){var i=n.get("size"),r=n.get("icon"),o=n.get("offsetCenter"),a=n.get("keepAspect"),s=Ly(r,e.cx-i/2+Er(o[0],e.r),e.cy-i/2+Er(o[1],e.r),i,i,null,a);s.z2=n.get("showAbove")?1:0,s.setStyle(n.getModel("itemStyle").getItemStyle()),this.group.add(s)}},e.prototype._renderTitleAndDetail=function(t,e,n,i,r){var o=this,a=t.getData(),s=a.mapDimension("value"),l=+t.get("min"),u=+t.get("max"),h=new Cr,c=[],p=[],d=t.isAnimationEnabled(),f=t.get(["pointer","showAbove"]);a.diff(this._data).add((function(t){c[t]=new ks({silent:!0}),p[t]=new ks({silent:!0})})).update((function(t,e){c[t]=o._titleEls[e],p[t]=o._detailEls[e]})).execute(),a.each((function(e){var n=a.getItemModel(e),o=a.get(s,e),g=new Cr,y=i(Nr(o,[l,u],[0,1],!0)),v=n.getModel("title");if(v.get("show")){var m=v.get("offsetCenter"),x=r.cx+Er(m[0],r.r),_=r.cy+Er(m[1],r.r);(D=c[e]).attr({z2:f?0:2,style:Uh(v,{x:x,y:_,text:a.getName(e),align:"center",verticalAlign:"middle"},{inheritColor:y})}),g.add(D)}var b=n.getModel("detail");if(b.get("show")){var w=b.get("offsetCenter"),S=r.cx+Er(w[0],r.r),M=r.cy+Er(w[1],r.r),I=Er(b.get("width"),r.r),T=Er(b.get("height"),r.r),C=t.get(["progress","show"])?a.getItemVisual(e,"style").fill:y,D=p[e],A=b.get("formatter");D.attr({z2:f?0:2,style:Uh(b,{x:S,y:M,text:BA(o,A),width:isNaN(I)?null:I,height:isNaN(T)?null:T,align:"center",verticalAlign:"middle"},{inheritColor:C})}),Qh(D,{normal:b},o,(function(t){return BA(t,A)})),d&&tc(D,e,a,t,{getFormattedLabel:function(t,e,n,i,r,a){return BA(a?a.interpolatedValue:o,A)}}),g.add(D)}h.add(g)})),this.group.add(h),this._titleEls=c,this._detailEls=p},e.type="gauge",e}(xg),GA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.visualStyleAccessPath="itemStyle",n}return n(e,t),e.prototype.getInitialData=function(t,e){return uM(this,["value"])},e.type="series.gauge",e.defaultOption={z:2,colorBy:"data",center:["50%","50%"],legendHoverLink:!0,radius:"75%",startAngle:225,endAngle:-45,clockwise:!0,min:0,max:100,splitNumber:10,axisLine:{show:!0,roundCap:!1,lineStyle:{color:[[1,"#E6EBF8"]],width:10}},progress:{show:!1,overlap:!0,width:10,roundCap:!1,clip:!0},splitLine:{show:!0,length:10,distance:10,lineStyle:{color:"#63677A",width:3,type:"solid"}},axisTick:{show:!0,splitNumber:5,length:6,distance:10,lineStyle:{color:"#63677A",width:1,type:"solid"}},axisLabel:{show:!0,distance:15,color:"#464646",fontSize:12},pointer:{icon:null,offsetCenter:[0,0],show:!0,showAbove:!0,length:"60%",width:6,keepAspect:!1},anchor:{show:!1,showAbove:!1,size:6,icon:"circle",offsetCenter:[0,0],keepAspect:!1,itemStyle:{color:"#fff",borderWidth:0,borderColor:"#5470c6"}},title:{show:!0,offsetCenter:[0,"20%"],color:"#464646",fontSize:16,valueAnimation:!1},detail:{show:!0,backgroundColor:"rgba(0,0,0,0)",borderWidth:0,borderColor:"#ccc",width:100,height:null,padding:[5,10],offsetCenter:[0,"40%"],color:"#464646",fontSize:30,fontWeight:"bold",lineHeight:30,valueAnimation:!1}},e}(sg);var WA=["itemStyle","opacity"],HA=function(t){function e(e,n){var i=t.call(this)||this,r=i,o=new Ru,a=new ks;return r.setTextContent(a),i.setTextGuideLine(o),i.updateData(e,n,!0),i}return n(e,t),e.prototype.updateData=function(t,e,n){var i=this,r=t.hostModel,o=t.getItemModel(e),a=t.getItemLayout(e),s=o.getModel("emphasis"),l=o.get(WA);l=null==l?1:l,n||hh(i),i.useStyle(t.getItemVisual(e,"style")),i.style.lineJoin="round",n?(i.setShape({points:a.points}),i.style.opacity=0,oh(i,{style:{opacity:l}},r,e)):rh(i,{style:{opacity:l},shape:{points:a.points}},r,e),Vl(i,o),this._updateLabel(t,e),Rl(this,s.get("focus"),s.get("blurScope"),s.get("disabled"))},e.prototype._updateLabel=function(t,e){var n=this,i=this.getTextGuideLine(),r=n.getTextContent(),o=t.hostModel,a=t.getItemModel(e),s=t.getItemLayout(e).label,l=t.getItemVisual(e,"style"),u=l.fill;Hh(r,Yh(a),{labelFetcher:t.hostModel,labelDataIndex:e,defaultOpacity:l.opacity,defaultText:t.getName(e)},{normal:{align:s.textAlign,verticalAlign:s.verticalAlign}}),n.setTextConfig({local:!0,inside:!!s.inside,insideStroke:u,outsideFill:u});var h=s.linePoints;i.setShape({points:h}),n.textGuideLineConfig={anchor:h?new Ji(h[0][0],h[0][1]):null},rh(r,{style:{x:s.x,y:s.y}},o,e),r.attr({rotation:s.rotation,originX:s.x,originY:s.y,z2:10}),db(n,fb(a),{stroke:u})},e}(Pu),YA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.ignoreLabelLineUpdate=!0,n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.getData(),r=this._data,o=this.group;i.diff(r).add((function(t){var e=new HA(i,t);i.setItemGraphicEl(t,e),o.add(e)})).update((function(t,e){var n=r.getItemGraphicEl(e);n.updateData(i,t),o.add(n),i.setItemGraphicEl(t,n)})).remove((function(e){uh(r.getItemGraphicEl(e),t,e)})).execute(),this._data=i},e.prototype.remove=function(){this.group.removeAll(),this._data=null},e.prototype.dispose=function(){},e.type="funnel",e}(xg),UA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(e){t.prototype.init.apply(this,arguments),this.legendVisualProvider=new hM(W(this.getData,this),W(this.getRawData,this)),this._defaultLabelLine(e)},e.prototype.getInitialData=function(t,e){return uM(this,{coordDimensions:["value"],encodeDefaulter:H(Yp,this)})},e.prototype._defaultLabelLine=function(t){co(t,"labelLine",["show"]);var e=t.labelLine,n=t.emphasis.labelLine;e.show=e.show&&t.label.show,n.show=n.show&&t.emphasis.label.show},e.prototype.getDataParams=function(e){var n=this.getData(),i=t.prototype.getDataParams.call(this,e),r=n.mapDimension("value"),o=n.getSum(r);return i.percent=o?+(n.get(r,e)/o*100).toFixed(2):0,i.$vars.push("percent"),i},e.type="series.funnel",e.defaultOption={z:2,legendHoverLink:!0,colorBy:"data",left:80,top:60,right:80,bottom:60,minSize:"0%",maxSize:"100%",sort:"descending",orient:"vertical",gap:0,funnelAlign:"center",label:{show:!0,position:"outer"},labelLine:{show:!0,length:20,lineStyle:{width:1}},itemStyle:{borderColor:"#fff",borderWidth:1},emphasis:{label:{show:!0}},select:{itemStyle:{borderColor:"#212121"}}},e}(sg);function XA(t,e){t.eachSeriesByType("funnel",(function(t){var n=t.getData(),i=n.mapDimension("value"),r=t.get("sort"),o=function(t,e){return xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()})}(t,e),a=t.get("orient"),s=o.width,l=o.height,u=function(t,e){for(var n=t.mapDimension("value"),i=t.mapArray(n,(function(t){return t})),r=[],o="ascending"===e,a=0,s=t.count();a<s;a++)r[a]=a;return U(e)?r.sort(e):"none"!==e&&r.sort((function(t,e){return o?i[t]-i[e]:i[e]-i[t]})),r}(n,r),h=o.x,c=o.y,p="horizontal"===a?[Er(t.get("minSize"),l),Er(t.get("maxSize"),l)]:[Er(t.get("minSize"),s),Er(t.get("maxSize"),s)],d=n.getDataExtent(i),f=t.get("min"),g=t.get("max");null==f&&(f=Math.min(d[0],0)),null==g&&(g=d[1]);var y=t.get("funnelAlign"),v=t.get("gap"),m=(("horizontal"===a?s:l)-v*(n.count()-1))/n.count(),x=function(t,e){if("horizontal"===a){var r=Nr(n.get(i,t)||0,[f,g],p,!0),o=void 0;switch(y){case"top":o=c;break;case"center":o=c+(l-r)/2;break;case"bottom":o=c+(l-r)}return[[e,o],[e,o+r]]}var u,d=Nr(n.get(i,t)||0,[f,g],p,!0);switch(y){case"left":u=h;break;case"center":u=h+(s-d)/2;break;case"right":u=h+s-d}return[[u,e],[u+d,e]]};"ascending"===r&&(m=-m,v=-v,"horizontal"===a?h+=s:c+=l,u=u.reverse());for(var _=0;_<u.length;_++){var b=u[_],w=u[_+1],S=n.getItemModel(b);if("horizontal"===a){var M=S.get(["itemStyle","width"]);null==M?M=m:(M=Er(M,s),"ascending"===r&&(M=-M));var I=x(b,h),T=x(w,h+M);h+=M+v,n.setItemLayout(b,{points:I.concat(T.slice().reverse())})}else{var C=S.get(["itemStyle","height"]);null==C?C=m:(C=Er(C,l),"ascending"===r&&(C=-C));I=x(b,c),T=x(w,c+C);c+=C+v,n.setItemLayout(b,{points:I.concat(T.slice().reverse())})}}!function(t){var e=t.hostModel.get("orient");t.each((function(n){var i,r,o,a,s=t.getItemModel(n),l=s.getModel("label").get("position"),u=s.getModel("labelLine"),h=t.getItemLayout(n),c=h.points,p="inner"===l||"inside"===l||"center"===l||"insideLeft"===l||"insideRight"===l;if(p)"insideLeft"===l?(r=(c[0][0]+c[3][0])/2+5,o=(c[0][1]+c[3][1])/2,i="left"):"insideRight"===l?(r=(c[1][0]+c[2][0])/2-5,o=(c[1][1]+c[2][1])/2,i="right"):(r=(c[0][0]+c[1][0]+c[2][0]+c[3][0])/4,o=(c[0][1]+c[1][1]+c[2][1]+c[3][1])/4,i="center"),a=[[r,o],[r,o]];else{var d=void 0,f=void 0,g=void 0,y=void 0,v=u.get("length");"left"===l?(d=(c[3][0]+c[0][0])/2,f=(c[3][1]+c[0][1])/2,r=(g=d-v)-5,i="right"):"right"===l?(d=(c[1][0]+c[2][0])/2,f=(c[1][1]+c[2][1])/2,r=(g=d+v)+5,i="left"):"top"===l?(d=(c[3][0]+c[0][0])/2,o=(y=(f=(c[3][1]+c[0][1])/2)-v)-5,i="center"):"bottom"===l?(d=(c[1][0]+c[2][0])/2,o=(y=(f=(c[1][1]+c[2][1])/2)+v)+5,i="center"):"rightTop"===l?(d="horizontal"===e?c[3][0]:c[1][0],f="horizontal"===e?c[3][1]:c[1][1],"horizontal"===e?(o=(y=f-v)-5,i="center"):(r=(g=d+v)+5,i="top")):"rightBottom"===l?(d=c[2][0],f=c[2][1],"horizontal"===e?(o=(y=f+v)+5,i="center"):(r=(g=d+v)+5,i="bottom")):"leftTop"===l?(d=c[0][0],f="horizontal"===e?c[0][1]:c[1][1],"horizontal"===e?(o=(y=f-v)-5,i="center"):(r=(g=d-v)-5,i="right")):"leftBottom"===l?(d="horizontal"===e?c[1][0]:c[3][0],f="horizontal"===e?c[1][1]:c[2][1],"horizontal"===e?(o=(y=f+v)+5,i="center"):(r=(g=d-v)-5,i="right")):(d=(c[1][0]+c[2][0])/2,f=(c[1][1]+c[2][1])/2,"horizontal"===e?(o=(y=f+v)+5,i="center"):(r=(g=d+v)+5,i="left")),"horizontal"===e?r=g=d:o=y=f,a=[[d,f],[g,y]]}h.label={linePoints:a,x:r,y:o,verticalAlign:"middle",textAlign:i,inside:p}}))}(n)}))}var ZA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._dataGroup=new Cr,n._initialized=!1,n}return n(e,t),e.prototype.init=function(){this.group.add(this._dataGroup)},e.prototype.render=function(t,e,n,i){this._progressiveEls=null;var r=this._dataGroup,o=t.getData(),a=this._data,s=t.coordinateSystem,l=s.dimensions,u=KA(t);if(o.diff(a).add((function(t){$A(qA(o,r,t,l,s),o,t,u)})).update((function(e,n){var i=a.getItemGraphicEl(n),r=jA(o,e,l,s);o.setItemGraphicEl(e,i),rh(i,{shape:{points:r}},t,e),hh(i),$A(i,o,e,u)})).remove((function(t){var e=a.getItemGraphicEl(t);r.remove(e)})).execute(),!this._initialized){this._initialized=!0;var h=function(t,e,n){var i=t.model,r=t.getRect(),o=new Cs({shape:{x:r.x,y:r.y,width:r.width,height:r.height}}),a="horizontal"===i.get("layout")?"width":"height";return o.setShape(a,0),oh(o,{shape:{width:r.width,height:r.height}},e,n),o}(s,t,(function(){setTimeout((function(){r.removeClipPath()}))}));r.setClipPath(h)}this._data=o},e.prototype.incrementalPrepareRender=function(t,e,n){this._initialized=!0,this._data=null,this._dataGroup.removeAll()},e.prototype.incrementalRender=function(t,e,n){for(var i=e.getData(),r=e.coordinateSystem,o=r.dimensions,a=KA(e),s=this._progressiveEls=[],l=t.start;l<t.end;l++){var u=qA(i,this._dataGroup,l,o,r);u.incremental=!0,$A(u,i,l,a),s.push(u)}},e.prototype.remove=function(){this._dataGroup&&this._dataGroup.removeAll(),this._data=null},e.type="parallel",e}(xg);function jA(t,e,n,i){for(var r,o=[],a=0;a<n.length;a++){var s=n[a],l=t.get(t.mapDimension(s),e);r=l,("category"===i.getAxis(s).type?null==r:null==r||isNaN(r))||o.push(i.dataToPoint(l,s))}return o}function qA(t,e,n,i,r){var o=jA(t,n,i,r),a=new Ru({shape:{points:o},z2:10});return e.add(a),t.setItemGraphicEl(n,a),a}function KA(t){var e=t.get("smooth",!0);return!0===e&&(e=.3),nt(e=to(e))&&(e=0),{smooth:e}}function $A(t,e,n,i){t.useStyle(e.getItemVisual(n,"style")),t.style.fill=null,t.setShape("smooth",i.smooth);var r=e.getItemModel(n),o=r.getModel("emphasis");Vl(t,r,"lineStyle"),Rl(t,o.get("focus"),o.get("blurScope"),o.get("disabled"))}var JA=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.visualStyleAccessPath="lineStyle",n.visualDrawType="stroke",n}return n(e,t),e.prototype.getInitialData=function(t,e){return rx(null,this,{useEncodeDefaulter:W(QA,null,this)})},e.prototype.getRawIndicesByActiveState=function(t){var e=this.coordinateSystem,n=this.getData(),i=[];return e.eachActiveState(n,(function(e,r){t===e&&i.push(n.getRawIndex(r))})),i},e.type="series.parallel",e.dependencies=["parallel"],e.defaultOption={z:2,coordinateSystem:"parallel",parallelIndex:0,label:{show:!1},inactiveOpacity:.05,activeOpacity:1,lineStyle:{width:1,opacity:.45,type:"solid"},emphasis:{label:{show:!1}},progressive:500,smooth:!1,animationEasing:"linear"},e}(sg);function QA(t){var e=t.ecModel.getComponent("parallel",t.get("parallelIndex"));if(e){var n={};return E(e.dimensions,(function(t){var e=+t.replace("dim","");n[t]=e})),n}}var tk=["lineStyle","opacity"],ek={seriesType:"parallel",reset:function(t,e){var n=t.coordinateSystem,i={normal:t.get(["lineStyle","opacity"]),active:t.get("activeOpacity"),inactive:t.get("inactiveOpacity")};return{progress:function(t,e){n.eachActiveState(e,(function(t,n){var r=i[t];if("normal"===t&&e.hasItemOption){var o=e.getItemModel(n).get(tk,!0);null!=o&&(r=o)}e.ensureUniqueItemVisual(n,"style").opacity=r}),t.start,t.end)}}}};function nk(t){!function(t){if(t.parallel)return;var e=!1;E(t.series,(function(t){t&&"parallel"===t.type&&(e=!0)})),e&&(t.parallel=[{}])}(t),function(t){E(ho(t.parallelAxis),(function(e){if(q(e)){var n=e.parallelIndex||0,i=ho(t.parallel)[n];i&&i.parallelAxisDefault&&C(e,i.parallelAxisDefault,!1)}}))}(t)}var ik=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){this._model=t,this._api=n,this._handlers||(this._handlers={},E(rk,(function(t,e){n.getZr().on(e,this._handlers[e]=W(t,this))}),this)),Ag(this,"_throttledDispatchExpand",t.get("axisExpandRate"),"fixRate")},e.prototype.dispose=function(t,e){kg(this,"_throttledDispatchExpand"),E(this._handlers,(function(t,n){e.getZr().off(n,t)})),this._handlers=null},e.prototype._throttledDispatchExpand=function(t){this._dispatchExpand(t)},e.prototype._dispatchExpand=function(t){t&&this._api.dispatchAction(A({type:"parallelAxisExpand"},t))},e.type="parallel",e}(gg),rk={mousedown:function(t){ok(this,"click")&&(this._mouseDownPoint=[t.offsetX,t.offsetY])},mouseup:function(t){var e=this._mouseDownPoint;if(ok(this,"click")&&e){var n=[t.offsetX,t.offsetY];if(Math.pow(e[0]-n[0],2)+Math.pow(e[1]-n[1],2)>5)return;var i=this._model.coordinateSystem.getSlidedAxisExpandWindow([t.offsetX,t.offsetY]);"none"!==i.behavior&&this._dispatchExpand({axisExpandWindow:i.axisExpandWindow})}this._mouseDownPoint=null},mousemove:function(t){if(!this._mouseDownPoint&&ok(this,"mousemove")){var e=this._model,n=e.coordinateSystem.getSlidedAxisExpandWindow([t.offsetX,t.offsetY]),i=n.behavior;"jump"===i&&this._throttledDispatchExpand.debounceNextCall(e.get("axisExpandDebounce")),this._throttledDispatchExpand("none"===i?null:{axisExpandWindow:n.axisExpandWindow,animation:"jump"===i?null:{duration:0}})}}};function ok(t,e){var n=t._model;return n.get("axisExpandable")&&n.get("axisExpandTriggerOn")===e}var ak=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(){t.prototype.init.apply(this,arguments),this.mergeOption({})},e.prototype.mergeOption=function(t){var e=this.option;t&&C(e,t,!0),this._initDimensions()},e.prototype.contains=function(t,e){var n=t.get("parallelIndex");return null!=n&&e.getComponent("parallel",n)===this},e.prototype.setAxisExpand=function(t){E(["axisExpandable","axisExpandCenter","axisExpandCount","axisExpandWidth","axisExpandWindow"],(function(e){t.hasOwnProperty(e)&&(this.option[e]=t[e])}),this)},e.prototype._initDimensions=function(){var t=this.dimensions=[],e=this.parallelAxisIndex=[];E(B(this.ecModel.queryComponents({mainType:"parallelAxis"}),(function(t){return(t.get("parallelIndex")||0)===this.componentIndex}),this),(function(n){t.push("dim"+n.get("dim")),e.push(n.componentIndex)}))},e.type="parallel",e.dependencies=["parallelAxis"],e.layoutMode="box",e.defaultOption={z:0,left:80,top:60,right:80,bottom:60,layout:"horizontal",axisExpandable:!1,axisExpandCenter:null,axisExpandCount:0,axisExpandWidth:50,axisExpandRate:17,axisExpandDebounce:50,axisExpandSlideTriggerArea:[-.15,.05,.4],axisExpandTriggerOn:"click",parallelAxisDefault:null},e}(Tp),sk=function(t){function e(e,n,i,r,o){var a=t.call(this,e,n,i)||this;return a.type=r||"value",a.axisIndex=o,a}return n(e,t),e.prototype.isHorizontal=function(){return"horizontal"!==this.coordinateSystem.getModel().get("layout")},e}(H_);function lk(t,e,n,i,r,o){t=t||0;var a=n[1]-n[0];if(null!=r&&(r=hk(r,[0,a])),null!=o&&(o=Math.max(o,null!=r?r:0)),"all"===i){var s=Math.abs(e[1]-e[0]);s=hk(s,[0,a]),r=o=hk(s,[r,o]),i=0}e[0]=hk(e[0],n),e[1]=hk(e[1],n);var l=uk(e,i);e[i]+=t;var u,h=r||0,c=n.slice();return l.sign<0?c[0]+=h:c[1]-=h,e[i]=hk(e[i],c),u=uk(e,i),null!=r&&(u.sign!==l.sign||u.span<r)&&(e[1-i]=e[i]+l.sign*r),u=uk(e,i),null!=o&&u.span>o&&(e[1-i]=e[i]+u.sign*o),e}function uk(t,e){var n=t[e]-t[1-e];return{span:Math.abs(n),sign:n>0?-1:n<0?1:e?-1:1}}function hk(t,e){return Math.min(null!=e[1]?e[1]:1/0,Math.max(null!=e[0]?e[0]:-1/0,t))}var ck=E,pk=Math.min,dk=Math.max,fk=Math.floor,gk=Math.ceil,yk=zr,vk=Math.PI,mk=function(){function t(t,e,n){this.type="parallel",this._axesMap=ft(),this._axesLayout={},this.dimensions=t.dimensions,this._model=t,this._init(t,e,n)}return t.prototype._init=function(t,e,n){var i=t.dimensions,r=t.parallelAxisIndex;ck(i,(function(t,n){var i=r[n],o=e.getComponent("parallelAxis",i),a=this._axesMap.set(t,new sk(t,o_(o),[0,0],o.get("type"),i)),s="category"===a.type;a.onBand=s&&o.get("boundaryGap"),a.inverse=o.get("inverse"),o.axis=a,a.model=o,a.coordinateSystem=o.coordinateSystem=this}),this)},t.prototype.update=function(t,e){this._updateAxesFromSeries(this._model,t)},t.prototype.containPoint=function(t){var e=this._makeLayoutInfo(),n=e.axisBase,i=e.layoutBase,r=e.pixelDimIndex,o=t[1-r],a=t[r];return o>=n&&o<=n+e.axisLength&&a>=i&&a<=i+e.layoutLength},t.prototype.getModel=function(){return this._model},t.prototype._updateAxesFromSeries=function(t,e){e.eachSeries((function(n){if(t.contains(n,e)){var i=n.getData();ck(this.dimensions,(function(t){var e=this._axesMap.get(t);e.scale.unionExtentFromData(i,i.mapDimension(t)),r_(e.scale,e.model)}),this)}}),this)},t.prototype.resize=function(t,e){this._rect=xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()}),this._layoutAxes()},t.prototype.getRect=function(){return this._rect},t.prototype._makeLayoutInfo=function(){var t,e=this._model,n=this._rect,i=["x","y"],r=["width","height"],o=e.get("layout"),a="horizontal"===o?0:1,s=n[r[a]],l=[0,s],u=this.dimensions.length,h=xk(e.get("axisExpandWidth"),l),c=xk(e.get("axisExpandCount")||0,[0,u]),p=e.get("axisExpandable")&&u>3&&u>c&&c>1&&h>0&&s>0,d=e.get("axisExpandWindow");d?(t=xk(d[1]-d[0],l),d[1]=d[0]+t):(t=xk(h*(c-1),l),(d=[h*(e.get("axisExpandCenter")||fk(u/2))-t/2])[1]=d[0]+t);var f=(s-t)/(u-c);f<3&&(f=0);var g=[fk(yk(d[0]/h,1))+1,gk(yk(d[1]/h,1))-1],y=f/h*d[0];return{layout:o,pixelDimIndex:a,layoutBase:n[i[a]],layoutLength:s,axisBase:n[i[1-a]],axisLength:n[r[1-a]],axisExpandable:p,axisExpandWidth:h,axisCollapseWidth:f,axisExpandWindow:d,axisCount:u,winInnerIndices:g,axisExpandWindow0Pos:y}},t.prototype._layoutAxes=function(){var t=this._rect,e=this._axesMap,n=this.dimensions,i=this._makeLayoutInfo(),r=i.layout;e.each((function(t){var e=[0,i.axisLength],n=t.inverse?1:0;t.setExtent(e[n],e[1-n])})),ck(n,(function(e,n){var o=(i.axisExpandable?bk:_k)(n,i),a={horizontal:{x:o.position,y:i.axisLength},vertical:{x:0,y:o.position}},s={horizontal:vk/2,vertical:0},l=[a[r].x+t.x,a[r].y+t.y],u=s[r],h=[1,0,0,1,0,0];zi(h,h,u),Ei(h,h,l),this._axesLayout[e]={position:l,rotation:u,transform:h,axisNameAvailableWidth:o.axisNameAvailableWidth,axisLabelShow:o.axisLabelShow,nameTruncateMaxWidth:o.nameTruncateMaxWidth,tickDirection:1,labelDirection:1}}),this)},t.prototype.getAxis=function(t){return this._axesMap.get(t)},t.prototype.dataToPoint=function(t,e){return this.axisCoordToPoint(this._axesMap.get(e).dataToCoord(t),e)},t.prototype.eachActiveState=function(t,e,n,i){null==n&&(n=0),null==i&&(i=t.count());var r=this._axesMap,o=this.dimensions,a=[],s=[];E(o,(function(e){a.push(t.mapDimension(e)),s.push(r.get(e).model)}));for(var l=this.hasAxisBrushed(),u=n;u<i;u++){var h=void 0;if(l){h="active";for(var c=t.getValues(a,u),p=0,d=o.length;p<d;p++){if("inactive"===s[p].getActiveState(c[p])){h="inactive";break}}}else h="normal";e(h,u)}},t.prototype.hasAxisBrushed=function(){for(var t=this.dimensions,e=this._axesMap,n=!1,i=0,r=t.length;i<r;i++)"normal"!==e.get(t[i]).model.getActiveState()&&(n=!0);return n},t.prototype.axisCoordToPoint=function(t,e){return Th([t,0],this._axesLayout[e].transform)},t.prototype.getAxisLayout=function(t){return T(this._axesLayout[t])},t.prototype.getSlidedAxisExpandWindow=function(t){var e=this._makeLayoutInfo(),n=e.pixelDimIndex,i=e.axisExpandWindow.slice(),r=i[1]-i[0],o=[0,e.axisExpandWidth*(e.axisCount-1)];if(!this.containPoint(t))return{behavior:"none",axisExpandWindow:i};var a,s=t[n]-e.layoutBase-e.axisExpandWindow0Pos,l="slide",u=e.axisCollapseWidth,h=this._model.get("axisExpandSlideTriggerArea"),c=null!=h[0];if(u)c&&u&&s<r*h[0]?(l="jump",a=s-r*h[2]):c&&u&&s>r*(1-h[0])?(l="jump",a=s-r*(1-h[2])):(a=s-r*h[1])>=0&&(a=s-r*(1-h[1]))<=0&&(a=0),(a*=e.axisExpandWidth/u)?lk(a,i,o,"all"):l="none";else{var p=i[1]-i[0];(i=[dk(0,o[1]*s/p-p/2)])[1]=pk(o[1],i[0]+p),i[0]=i[1]-p}return{axisExpandWindow:i,behavior:l}},t}();function xk(t,e){return pk(dk(t,e[0]),e[1])}function _k(t,e){var n=e.layoutLength/(e.axisCount-1);return{position:n*t,axisNameAvailableWidth:n,axisLabelShow:!0}}function bk(t,e){var n,i,r=e.layoutLength,o=e.axisExpandWidth,a=e.axisCount,s=e.axisCollapseWidth,l=e.winInnerIndices,u=s,h=!1;return t<l[0]?(n=t*s,i=s):t<=l[1]?(n=e.axisExpandWindow0Pos+t*o-e.axisExpandWindow[0],u=o,h=!0):(n=r-(a-1-t)*s,i=s),{position:n,axisNameAvailableWidth:u,axisLabelShow:h,nameTruncateMaxWidth:i}}var wk={create:function(t,e){var n=[];return t.eachComponent("parallel",(function(i,r){var o=new mk(i,t,e);o.name="parallel_"+r,o.resize(i,e),i.coordinateSystem=o,o.model=i,n.push(o)})),t.eachSeries((function(t){if("parallel"===t.get("coordinateSystem")){var e=t.getReferringComponents("parallel",Co).models[0];t.coordinateSystem=e.coordinateSystem}})),n}},Sk=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.activeIntervals=[],n}return n(e,t),e.prototype.getAreaSelectStyle=function(){return Wo([["fill","color"],["lineWidth","borderWidth"],["stroke","borderColor"],["width","width"],["opacity","opacity"]])(this.getModel("areaSelectStyle"))},e.prototype.setActiveIntervals=function(t){var e=this.activeIntervals=T(t);if(e)for(var n=e.length-1;n>=0;n--)Vr(e[n])},e.prototype.getActiveState=function(t){var e=this.activeIntervals;if(!e.length)return"normal";if(null==t||isNaN(+t))return"inactive";if(1===e.length){var n=e[0];if(n[0]<=t&&t<=n[1])return"active"}else for(var i=0,r=e.length;i<r;i++)if(e[i][0]<=t&&t<=e[i][1])return"active";return"inactive"},e}(Tp);R(Sk,p_);var Mk=!0,Ik=Math.min,Tk=Math.max,Ck=Math.pow,Dk="globalPan",Ak={w:[0,0],e:[0,1],n:[1,0],s:[1,1]},kk={w:"ew",e:"ew",n:"ns",s:"ns",ne:"nesw",sw:"nesw",nw:"nwse",se:"nwse"},Lk={brushStyle:{lineWidth:2,stroke:"rgba(210,219,238,0.3)",fill:"#D2DBEE"},transformable:!0,brushMode:"single",removeOnClick:!1},Pk=0,Ok=function(t){function e(e){var n=t.call(this)||this;return n._track=[],n._covers=[],n._handlers={},n._zr=e,n.group=new Cr,n._uid="brushController_"+Pk++,E(aL,(function(t,e){this._handlers[e]=W(t,this)}),n),n}return n(e,t),e.prototype.enableBrush=function(t){return this._brushType&&this._doDisableBrush(),t.brushType&&this._doEnableBrush(t),this},e.prototype._doEnableBrush=function(t){var e=this._zr;this._enableGlobalPan||function(t,e,n){AI(t)[e]=n}(e,Dk,this._uid),E(this._handlers,(function(t,n){e.on(n,t)})),this._brushType=t.brushType,this._brushOption=C(T(Lk),t,!0)},e.prototype._doDisableBrush=function(){var t=this._zr;!function(t,e,n){var i=AI(t);i[e]===n&&(i[e]=null)}(t,Dk,this._uid),E(this._handlers,(function(e,n){t.off(n,e)})),this._brushType=this._brushOption=null},e.prototype.setPanels=function(t){if(t&&t.length){var e=this._panels={};E(t,(function(t){e[t.panelId]=T(t)}))}else this._panels=null;return this},e.prototype.mount=function(t){t=t||{},this._enableGlobalPan=t.enableGlobalPan;var e=this.group;return this._zr.add(e),e.attr({x:t.x||0,y:t.y||0,rotation:t.rotation||0,scaleX:t.scaleX||1,scaleY:t.scaleY||1}),this._transform=e.getLocalTransform(),this},e.prototype.updateCovers=function(t){t=z(t,(function(t){return C(T(Lk),t,!0)}));var e=this._covers,n=this._covers=[],i=this,r=this._creatingCover;return new Im(e,t,(function(t,e){return o(t.__brushOption,e)}),o).add(a).update(a).remove((function(t){e[t]!==r&&i.group.remove(e[t])})).execute(),this;function o(t,e){return(null!=t.id?t.id:"\0-brush-index-"+e)+"-"+t.brushType}function a(o,a){var s=t[o];if(null!=a&&e[a]===r)n[o]=e[a];else{var l=n[o]=null!=a?(e[a].__brushOption=s,e[a]):Nk(i,Rk(i,s));Vk(i,l)}}},e.prototype.unmount=function(){return this.enableBrush(!1),Wk(this),this._zr.remove(this.group),this},e.prototype.dispose=function(){this.unmount(),this.off()},e}(Xt);function Rk(t,e){var n=lL[e.brushType].createCover(t,e);return n.__brushOption=e,zk(n,e),t.group.add(n),n}function Nk(t,e){var n=Bk(e);return n.endCreating&&(n.endCreating(t,e),zk(e,e.__brushOption)),e}function Ek(t,e){var n=e.__brushOption;Bk(e).updateCoverShape(t,e,n.range,n)}function zk(t,e){var n=e.z;null==n&&(n=1e4),t.traverse((function(t){t.z=n,t.z2=n}))}function Vk(t,e){Bk(e).updateCommon(t,e),Ek(t,e)}function Bk(t){return lL[t.__brushOption.brushType]}function Fk(t,e,n){var i,r=t._panels;if(!r)return Mk;var o=t._transform;return E(r,(function(t){t.isTargetByCursor(e,n,o)&&(i=t)})),i}function Gk(t,e){var n=t._panels;if(!n)return Mk;var i=e.__brushOption.panelId;return null!=i?n[i]:Mk}function Wk(t){var e=t._covers,n=e.length;return E(e,(function(e){t.group.remove(e)}),t),e.length=0,!!n}function Hk(t,e){var n=z(t._covers,(function(t){var e=t.__brushOption,n=T(e.range);return{brushType:e.brushType,panelId:e.panelId,range:n}}));t.trigger("brush",{areas:n,isEnd:!!e.isEnd,removeOnClick:!!e.removeOnClick})}function Yk(t){var e=t.length-1;return e<0&&(e=0),[t[0],t[e]]}function Uk(t,e,n,i){var r=new Cr;return r.add(new Cs({name:"main",style:qk(n),silent:!0,draggable:!0,cursor:"move",drift:H(Jk,t,e,r,["n","s","w","e"]),ondragend:H(Hk,e,{isEnd:!0})})),E(i,(function(n){r.add(new Cs({name:n.join(""),style:{opacity:0},draggable:!0,silent:!0,invisible:!0,drift:H(Jk,t,e,r,n),ondragend:H(Hk,e,{isEnd:!0})}))})),r}function Xk(t,e,n,i){var r=i.brushStyle.lineWidth||0,o=Tk(r,6),a=n[0][0],s=n[1][0],l=a-r/2,u=s-r/2,h=n[0][1],c=n[1][1],p=h-o+r/2,d=c-o+r/2,f=h-a,g=c-s,y=f+r,v=g+r;jk(t,e,"main",a,s,f,g),i.transformable&&(jk(t,e,"w",l,u,o,v),jk(t,e,"e",p,u,o,v),jk(t,e,"n",l,u,y,o),jk(t,e,"s",l,d,y,o),jk(t,e,"nw",l,u,o,o),jk(t,e,"ne",p,u,o,o),jk(t,e,"sw",l,d,o,o),jk(t,e,"se",p,d,o,o))}function Zk(t,e){var n=e.__brushOption,i=n.transformable,r=e.childAt(0);r.useStyle(qk(n)),r.attr({silent:!i,cursor:i?"move":"default"}),E([["w"],["e"],["n"],["s"],["s","e"],["s","w"],["n","e"],["n","w"]],(function(n){var r=e.childOfName(n.join("")),o=1===n.length?$k(t,n[0]):function(t,e){var n=[$k(t,e[0]),$k(t,e[1])];return("e"===n[0]||"w"===n[0])&&n.reverse(),n.join("")}(t,n);r&&r.attr({silent:!i,invisible:!i,cursor:i?kk[o]+"-resize":null})}))}function jk(t,e,n,i,r,o,a){var s=e.childOfName(n);s&&s.setShape(function(t){var e=Ik(t[0][0],t[1][0]),n=Ik(t[0][1],t[1][1]),i=Tk(t[0][0],t[1][0]),r=Tk(t[0][1],t[1][1]);return{x:e,y:n,width:i-e,height:r-n}}(eL(t,e,[[i,r],[i+o,r+a]])))}function qk(t){return k({strokeNoScale:!0},t.brushStyle)}function Kk(t,e,n,i){var r=[Ik(t,n),Ik(e,i)],o=[Tk(t,n),Tk(e,i)];return[[r[0],o[0]],[r[1],o[1]]]}function $k(t,e){return{left:"w",right:"e",top:"n",bottom:"s"}[Ch({w:"left",e:"right",n:"top",s:"bottom"}[e],function(t){return Ih(t.group)}(t))]}function Jk(t,e,n,i,r,o){var a=n.__brushOption,s=t.toRectRange(a.range),l=tL(e,r,o);E(i,(function(t){var e=Ak[t];s[e[0]][e[1]]+=l[e[0]]})),a.range=t.fromRectRange(Kk(s[0][0],s[1][0],s[0][1],s[1][1])),Vk(e,n),Hk(e,{isEnd:!1})}function Qk(t,e,n,i){var r=e.__brushOption.range,o=tL(t,n,i);E(r,(function(t){t[0]+=o[0],t[1]+=o[1]})),Vk(t,e),Hk(t,{isEnd:!1})}function tL(t,e,n){var i=t.group,r=i.transformCoordToLocal(e,n),o=i.transformCoordToLocal(0,0);return[r[0]-o[0],r[1]-o[1]]}function eL(t,e,n){var i=Gk(t,e);return i&&i!==Mk?i.clipPath(n,t._transform):T(n)}function nL(t){var e=t.event;e.preventDefault&&e.preventDefault()}function iL(t,e,n){return t.childOfName("main").contain(e,n)}function rL(t,e,n,i){var r,o=t._creatingCover,a=t._creatingPanel,s=t._brushOption;if(t._track.push(n.slice()),function(t){var e=t._track;if(!e.length)return!1;var n=e[e.length-1],i=e[0],r=n[0]-i[0],o=n[1]-i[1];return Ck(r*r+o*o,.5)>6}(t)||o){if(a&&!o){"single"===s.brushMode&&Wk(t);var l=T(s);l.brushType=oL(l.brushType,a),l.panelId=a===Mk?null:a.panelId,o=t._creatingCover=Rk(t,l),t._covers.push(o)}if(o){var u=lL[oL(t._brushType,a)];o.__brushOption.range=u.getCreatingRange(eL(t,o,t._track)),i&&(Nk(t,o),u.updateCommon(t,o)),Ek(t,o),r={isEnd:i}}}else i&&"single"===s.brushMode&&s.removeOnClick&&Fk(t,e,n)&&Wk(t)&&(r={isEnd:i,removeOnClick:!0});return r}function oL(t,e){return"auto"===t?e.defaultBrushType:t}var aL={mousedown:function(t){if(this._dragging)sL(this,t);else if(!t.target||!t.target.draggable){nL(t);var e=this.group.transformCoordToLocal(t.offsetX,t.offsetY);this._creatingCover=null,(this._creatingPanel=Fk(this,t,e))&&(this._dragging=!0,this._track=[e.slice()])}},mousemove:function(t){var e=t.offsetX,n=t.offsetY,i=this.group.transformCoordToLocal(e,n);if(function(t,e,n){if(t._brushType&&!function(t,e,n){var i=t._zr;return e<0||e>i.getWidth()||n<0||n>i.getHeight()}(t,e.offsetX,e.offsetY)){var i=t._zr,r=t._covers,o=Fk(t,e,n);if(!t._dragging)for(var a=0;a<r.length;a++){var s=r[a].__brushOption;if(o&&(o===Mk||s.panelId===o.panelId)&&lL[s.brushType].contain(r[a],n[0],n[1]))return}o&&i.setCursorStyle("crosshair")}}(this,t,i),this._dragging){nL(t);var r=rL(this,t,i,!1);r&&Hk(this,r)}},mouseup:function(t){sL(this,t)}};function sL(t,e){if(t._dragging){nL(e);var n=e.offsetX,i=e.offsetY,r=t.group.transformCoordToLocal(n,i),o=rL(t,e,r,!0);t._dragging=!1,t._track=[],t._creatingCover=null,o&&Hk(t,o)}}var lL={lineX:uL(0),lineY:uL(1),rect:{createCover:function(t,e){function n(t){return t}return Uk({toRectRange:n,fromRectRange:n},t,e,[["w"],["e"],["n"],["s"],["s","e"],["s","w"],["n","e"],["n","w"]])},getCreatingRange:function(t){var e=Yk(t);return Kk(e[1][0],e[1][1],e[0][0],e[0][1])},updateCoverShape:function(t,e,n,i){Xk(t,e,n,i)},updateCommon:Zk,contain:iL},polygon:{createCover:function(t,e){var n=new Cr;return n.add(new Ru({name:"main",style:qk(e),silent:!0})),n},getCreatingRange:function(t){return t},endCreating:function(t,e){e.remove(e.childAt(0)),e.add(new Pu({name:"main",draggable:!0,drift:H(Qk,t,e),ondragend:H(Hk,t,{isEnd:!0})}))},updateCoverShape:function(t,e,n,i){e.childAt(0).setShape({points:eL(t,e,n)})},updateCommon:Zk,contain:iL}};function uL(t){return{createCover:function(e,n){return Uk({toRectRange:function(e){var n=[e,[0,100]];return t&&n.reverse(),n},fromRectRange:function(e){return e[t]}},e,n,[[["w"],["e"]],[["n"],["s"]]][t])},getCreatingRange:function(e){var n=Yk(e);return[Ik(n[0][t],n[1][t]),Tk(n[0][t],n[1][t])]},updateCoverShape:function(e,n,i,r){var o,a=Gk(e,n);if(a!==Mk&&a.getLinearBrushOtherExtent)o=a.getLinearBrushOtherExtent(t);else{var s=e._zr;o=[0,[s.getWidth(),s.getHeight()][1-t]]}var l=[i,o];t&&l.reverse(),Xk(e,n,l,r)},updateCommon:Zk,contain:iL}}function hL(t){return t=dL(t),function(e){return kh(e,t)}}function cL(t,e){return t=dL(t),function(n){var i=null!=e?e:n,r=i?t.width:t.height,o=i?t.x:t.y;return[o,o+(r||0)]}}function pL(t,e,n){var i=dL(t);return function(t,r){return i.contain(r[0],r[1])&&!VI(t,e,n)}}function dL(t){return sr.create(t)}var fL=["axisLine","axisTickLabel","axisName"],gL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(e,n){t.prototype.init.apply(this,arguments),(this._brushController=new Ok(n.getZr())).on("brush",W(this._onBrush,this))},e.prototype.render=function(t,e,n,i){if(!function(t,e,n){return n&&"axisAreaSelect"===n.type&&e.findComponents({mainType:"parallelAxis",query:n})[0]===t}(t,e,i)){this.axisModel=t,this.api=n,this.group.removeAll();var r=this._axisGroup;if(this._axisGroup=new Cr,this.group.add(this._axisGroup),t.get("show")){var o=function(t,e){return e.getComponent("parallel",t.get("parallelIndex"))}(t,e),a=o.coordinateSystem,s=t.getAreaSelectStyle(),l=s.width,u=t.axis.dim,h=A({strokeContainThreshold:l},a.getAxisLayout(u)),c=new GM(t,h);E(fL,c.add,c),this._axisGroup.add(c.getGroup()),this._refreshBrushController(h,s,t,o,l,n),Ah(r,this._axisGroup,t)}}},e.prototype._refreshBrushController=function(t,e,n,i,r,o){var a=n.axis.getExtent(),s=a[1]-a[0],l=Math.min(30,.1*Math.abs(s)),u=sr.create({x:a[0],y:-r/2,width:s,height:r});u.x-=l,u.width+=2*l,this._brushController.mount({enableGlobalPan:!0,rotation:t.rotation,x:t.position[0],y:t.position[1]}).setPanels([{panelId:"pl",clipPath:hL(u),isTargetByCursor:pL(u,o,i),getLinearBrushOtherExtent:cL(u,0)}]).enableBrush({brushType:"lineX",brushStyle:e,removeOnClick:!0}).updateCovers(function(t){var e=t.axis;return z(t.activeIntervals,(function(t){return{brushType:"lineX",panelId:"pl",range:[e.dataToCoord(t[0],!0),e.dataToCoord(t[1],!0)]}}))}(n))},e.prototype._onBrush=function(t){var e=t.areas,n=this.axisModel,i=n.axis,r=z(e,(function(t){return[i.coordToData(t.range[0],!0),i.coordToData(t.range[1],!0)]}));(!n.option.realtime===t.isEnd||t.removeOnClick)&&this.api.dispatchAction({type:"axisAreaSelect",parallelAxisId:n.id,intervals:r})},e.prototype.dispose=function(){this._brushController.dispose()},e.type="parallelAxis",e}(gg);var yL={type:"axisAreaSelect",event:"axisAreaSelected"};var vL={type:"value",areaSelectStyle:{width:20,borderWidth:1,borderColor:"rgba(160,197,232)",color:"rgba(160,197,232)",opacity:.3},realtime:!0,z:10};function mL(t){t.registerComponentView(ik),t.registerComponentModel(ak),t.registerCoordinateSystem("parallel",wk),t.registerPreprocessor(nk),t.registerComponentModel(Sk),t.registerComponentView(gL),MM(t,"parallel",Sk,vL),function(t){t.registerAction(yL,(function(t,e){e.eachComponent({mainType:"parallelAxis",query:t},(function(e){e.axis.model.setActiveIntervals(t.intervals)}))})),t.registerAction("parallelAxisExpand",(function(t,e){e.eachComponent({mainType:"parallel",query:t},(function(e){e.setAxisExpand(t)}))}))}(t)}var xL=function(){this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.cpx1=0,this.cpy1=0,this.cpx2=0,this.cpy2=0,this.extent=0},_L=function(t){function e(e){return t.call(this,e)||this}return n(e,t),e.prototype.getDefaultShape=function(){return new xL},e.prototype.buildPath=function(t,e){var n=e.extent;t.moveTo(e.x1,e.y1),t.bezierCurveTo(e.cpx1,e.cpy1,e.cpx2,e.cpy2,e.x2,e.y2),"vertical"===e.orient?(t.lineTo(e.x2+n,e.y2),t.bezierCurveTo(e.cpx2+n,e.cpy2,e.cpx1+n,e.cpy1,e.x1+n,e.y1)):(t.lineTo(e.x2,e.y2+n),t.bezierCurveTo(e.cpx2,e.cpy2+n,e.cpx1,e.cpy1+n,e.x1,e.y1+n)),t.closePath()},e.prototype.highlight=function(){_l(this)},e.prototype.downplay=function(){bl(this)},e}(gs),bL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._focusAdjacencyDisabled=!1,n}return n(e,t),e.prototype.render=function(t,e,n){var i=this,r=t.getGraph(),o=this.group,a=t.layoutInfo,s=a.width,l=a.height,u=t.getData(),h=t.getData("edge"),c=t.get("orient");this._model=t,o.removeAll(),o.x=a.x,o.y=a.y,r.eachEdge((function(e){var n=new _L,i=Hs(n);i.dataIndex=e.dataIndex,i.seriesIndex=t.seriesIndex,i.dataType="edge";var r,a,u,p,d,f,g,y,v=e.getModel(),m=v.getModel("lineStyle"),x=m.get("curveness"),_=e.node1.getLayout(),b=e.node1.getModel(),w=b.get("localX"),S=b.get("localY"),M=e.node2.getLayout(),I=e.node2.getModel(),T=I.get("localX"),C=I.get("localY"),D=e.getLayout();switch(n.shape.extent=Math.max(1,D.dy),n.shape.orient=c,"vertical"===c?(r=(null!=w?w*s:_.x)+D.sy,a=(null!=S?S*l:_.y)+_.dy,u=(null!=T?T*s:M.x)+D.ty,d=r,f=a*(1-x)+(p=null!=C?C*l:M.y)*x,g=u,y=a*x+p*(1-x)):(r=(null!=w?w*s:_.x)+_.dx,a=(null!=S?S*l:_.y)+D.sy,d=r*(1-x)+(u=null!=T?T*s:M.x)*x,f=a,g=r*x+u*(1-x),y=p=(null!=C?C*l:M.y)+D.ty),n.setShape({x1:r,y1:a,x2:u,y2:p,cpx1:d,cpy1:f,cpx2:g,cpy2:y}),n.useStyle(m.getItemStyle()),n.style.fill){case"source":n.style.fill=e.node1.getVisual("color"),n.style.decal=e.node1.getVisual("style").decal;break;case"target":n.style.fill=e.node2.getVisual("color"),n.style.decal=e.node2.getVisual("style").decal;break;case"gradient":var A=e.node1.getVisual("color"),k=e.node2.getVisual("color");X(A)&&X(k)&&(n.style.fill=new Xu(0,0,+("horizontal"===c),+("vertical"===c),[{color:A,offset:0},{color:k,offset:1}]))}var L=v.getModel("emphasis");Vl(n,v,"lineStyle",(function(t){return t.getItemStyle()})),o.add(n),h.setItemGraphicEl(e.dataIndex,n);var P=L.get("focus");Rl(n,"adjacency"===P?e.getAdjacentDataIndices():P,L.get("blurScope"),L.get("disabled")),Hs(n).dataType="edge"})),r.eachNode((function(e){var n=e.getLayout(),i=e.getModel(),r=i.get("localX"),a=i.get("localY"),h=i.getModel("emphasis"),c=new Cs({shape:{x:null!=r?r*s:n.x,y:null!=a?a*l:n.y,width:n.dx,height:n.dy},style:i.getModel("itemStyle").getItemStyle(),z2:10});Hh(c,Yh(i),{labelFetcher:t,labelDataIndex:e.dataIndex,defaultText:e.id}),c.disableLabelAnimation=!0,c.setStyle("fill",e.getVisual("color")),c.setStyle("decal",e.getVisual("style").decal),Vl(c,i),o.add(c),u.setItemGraphicEl(e.dataIndex,c),Hs(c).dataType="node";var p=h.get("focus");Rl(c,"adjacency"===p?e.getAdjacentDataIndices():p,h.get("blurScope"),h.get("disabled"))})),u.eachItemGraphicEl((function(e,r){u.getItemModel(r).get("draggable")&&(e.drift=function(e,o){i._focusAdjacencyDisabled=!0,this.shape.x+=e,this.shape.y+=o,this.dirty(),n.dispatchAction({type:"dragNode",seriesId:t.id,dataIndex:u.getRawIndex(r),localX:this.shape.x/s,localY:this.shape.y/l})},e.ondragend=function(){i._focusAdjacencyDisabled=!1},e.draggable=!0,e.cursor="move")})),!this._data&&t.isAnimationEnabled()&&o.setClipPath(function(t,e,n){var i=new Cs({shape:{x:t.x-10,y:t.y-10,width:0,height:t.height+20}});return oh(i,{shape:{width:t.width+20}},e,n),i}(o.getBoundingRect(),t,(function(){o.removeClipPath()}))),this._data=t.getData()},e.prototype.dispose=function(){},e.type="sankey",e}(xg);var wL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.getInitialData=function(t,e){var n=t.edges||t.links,i=t.data||t.nodes,r=t.levels;this.levelModels=[];for(var o=this.levelModels,a=0;a<r.length;a++)null!=r[a].depth&&r[a].depth>=0&&(o[r[a].depth]=new dc(r[a],this,e));if(i&&n)return RA(i,n,this,!0,(function(t,e){t.wrapMethod("getItemModel",(function(t,e){var n=t.parentModel,i=n.getData().getItemLayout(e);if(i){var r=i.depth,o=n.levelModels[r];o&&(t.parentModel=o)}return t})),e.wrapMethod("getItemModel",(function(t,e){var n=t.parentModel,i=n.getGraph().getEdgeByIndex(e).node1.getLayout();if(i){var r=i.depth,o=n.levelModels[r];o&&(t.parentModel=o)}return t}))})).data},e.prototype.setNodePosition=function(t,e){var n=(this.option.data||this.option.nodes)[t];n.localX=e[0],n.localY=e[1]},e.prototype.getGraph=function(){return this.getData().graph},e.prototype.getEdgeData=function(){return this.getGraph().edgeData},e.prototype.formatTooltip=function(t,e,n){function i(t){return isNaN(t)||null==t}if("edge"===n){var r=this.getDataParams(t,n),o=r.data,a=r.value;return Xf("nameValue",{name:o.source+" -- "+o.target,value:a,noValue:i(a)})}var s=this.getGraph().getNodeByIndex(t).getLayout().value,l=this.getDataParams(t,n).data.name;return Xf("nameValue",{name:null!=l?l+"":null,value:s,noValue:i(s)})},e.prototype.optionUpdated=function(){},e.prototype.getDataParams=function(e,n){var i=t.prototype.getDataParams.call(this,e,n);if(null==i.value&&"node"===n){var r=this.getGraph().getNodeByIndex(e).getLayout().value;i.value=r}return i},e.type="series.sankey",e.defaultOption={z:2,coordinateSystem:"view",left:"5%",top:"5%",right:"20%",bottom:"5%",orient:"horizontal",nodeWidth:20,nodeGap:8,draggable:!0,layoutIterations:32,label:{show:!0,position:"right",fontSize:12},levels:[],nodeAlign:"justify",lineStyle:{color:"#314656",opacity:.2,curveness:.5},emphasis:{label:{show:!0},lineStyle:{opacity:.5}},select:{itemStyle:{borderColor:"#212121"}},animationEasing:"linear",animationDuration:1e3},e}(sg);function SL(t,e){t.eachSeriesByType("sankey",(function(t){var n=t.get("nodeWidth"),i=t.get("nodeGap"),r=function(t,e){return xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()})}(t,e);t.layoutInfo=r;var o=r.width,a=r.height,s=t.getGraph(),l=s.nodes,u=s.edges;!function(t){E(t,(function(t){var e=OL(t.outEdges,PL),n=OL(t.inEdges,PL),i=t.getValue()||0,r=Math.max(e,n,i);t.setLayout({value:r},!0)}))}(l),function(t,e,n,i,r,o,a,s,l){(function(t,e,n,i,r,o,a){for(var s=[],l=[],u=[],h=[],c=0,p=0;p<e.length;p++)s[p]=1;for(p=0;p<t.length;p++)l[p]=t[p].inEdges.length,0===l[p]&&u.push(t[p]);var d=-1;for(;u.length;){for(var f=0;f<u.length;f++){var g=u[f],y=g.hostGraph.data.getRawDataItem(g.dataIndex),v=null!=y.depth&&y.depth>=0;v&&y.depth>d&&(d=y.depth),g.setLayout({depth:v?y.depth:c},!0),"vertical"===o?g.setLayout({dy:n},!0):g.setLayout({dx:n},!0);for(var m=0;m<g.outEdges.length;m++){var x=g.outEdges[m];s[e.indexOf(x)]=0;var _=x.node2;0==--l[t.indexOf(_)]&&h.indexOf(_)<0&&h.push(_)}}++c,u=h,h=[]}for(p=0;p<s.length;p++)if(1===s[p])throw new Error("Sankey is a DAG, the original data has cycle!");var b=d>c-1?d:c-1;a&&"left"!==a&&function(t,e,n,i){if("right"===e){for(var r=[],o=t,a=0;o.length;){for(var s=0;s<o.length;s++){var l=o[s];l.setLayout({skNodeHeight:a},!0);for(var u=0;u<l.inEdges.length;u++){var h=l.inEdges[u];r.indexOf(h.node1)<0&&r.push(h.node1)}}o=r,r=[],++a}E(t,(function(t){ML(t)||t.setLayout({depth:Math.max(0,i-t.getLayout().skNodeHeight)},!0)}))}else"justify"===e&&function(t,e){E(t,(function(t){ML(t)||t.outEdges.length||t.setLayout({depth:e},!0)}))}(t,i)}(t,a,0,b);!function(t,e,n){E(t,(function(t){var i=t.getLayout().depth*e;"vertical"===n?t.setLayout({y:i},!0):t.setLayout({x:i},!0)}))}(t,"vertical"===o?(r-n)/b:(i-n)/b,o)})(t,e,n,r,o,s,l),function(t,e,n,i,r,o,a){var s=function(t,e){var n=[],i="vertical"===e?"y":"x",r=Lo(t,(function(t){return t.getLayout()[i]}));return r.keys.sort((function(t,e){return t-e})),E(r.keys,(function(t){n.push(r.buckets.get(t))})),n}(t,a);(function(t,e,n,i,r,o){var a=1/0;E(t,(function(t){var e=t.length,s=0;E(t,(function(t){s+=t.getLayout().value}));var l="vertical"===o?(i-(e-1)*r)/s:(n-(e-1)*r)/s;l<a&&(a=l)})),E(t,(function(t){E(t,(function(t,e){var n=t.getLayout().value*a;"vertical"===o?(t.setLayout({x:e},!0),t.setLayout({dx:n},!0)):(t.setLayout({y:e},!0),t.setLayout({dy:n},!0))}))})),E(e,(function(t){var e=+t.getValue()*a;t.setLayout({dy:e},!0)}))})(s,e,n,i,r,a),IL(s,r,n,i,a);for(var l=1;o>0;o--)TL(s,l*=.99,a),IL(s,r,n,i,a),RL(s,l,a),IL(s,r,n,i,a)}(t,e,o,r,i,a,s),function(t,e){var n="vertical"===e?"x":"y";E(t,(function(t){t.outEdges.sort((function(t,e){return t.node2.getLayout()[n]-e.node2.getLayout()[n]})),t.inEdges.sort((function(t,e){return t.node1.getLayout()[n]-e.node1.getLayout()[n]}))})),E(t,(function(t){var e=0,n=0;E(t.outEdges,(function(t){t.setLayout({sy:e},!0),e+=t.getLayout().dy})),E(t.inEdges,(function(t){t.setLayout({ty:n},!0),n+=t.getLayout().dy}))}))}(t,s)}(l,u,n,i,o,a,0!==B(l,(function(t){return 0===t.getLayout().value})).length?0:t.get("layoutIterations"),t.get("orient"),t.get("nodeAlign"))}))}function ML(t){var e=t.hostGraph.data.getRawDataItem(t.dataIndex);return null!=e.depth&&e.depth>=0}function IL(t,e,n,i,r){var o="vertical"===r?"x":"y";E(t,(function(t){var a,s,l;t.sort((function(t,e){return t.getLayout()[o]-e.getLayout()[o]}));for(var u=0,h=t.length,c="vertical"===r?"dx":"dy",p=0;p<h;p++)(l=u-(s=t[p]).getLayout()[o])>0&&(a=s.getLayout()[o]+l,"vertical"===r?s.setLayout({x:a},!0):s.setLayout({y:a},!0)),u=s.getLayout()[o]+s.getLayout()[c]+e;if((l=u-e-("vertical"===r?i:n))>0){a=s.getLayout()[o]-l,"vertical"===r?s.setLayout({x:a},!0):s.setLayout({y:a},!0),u=a;for(p=h-2;p>=0;--p)(l=(s=t[p]).getLayout()[o]+s.getLayout()[c]+e-u)>0&&(a=s.getLayout()[o]-l,"vertical"===r?s.setLayout({x:a},!0):s.setLayout({y:a},!0)),u=s.getLayout()[o]}}))}function TL(t,e,n){E(t.slice().reverse(),(function(t){E(t,(function(t){if(t.outEdges.length){var i=OL(t.outEdges,CL,n)/OL(t.outEdges,PL);if(isNaN(i)){var r=t.outEdges.length;i=r?OL(t.outEdges,DL,n)/r:0}if("vertical"===n){var o=t.getLayout().x+(i-LL(t,n))*e;t.setLayout({x:o},!0)}else{var a=t.getLayout().y+(i-LL(t,n))*e;t.setLayout({y:a},!0)}}}))}))}function CL(t,e){return LL(t.node2,e)*t.getValue()}function DL(t,e){return LL(t.node2,e)}function AL(t,e){return LL(t.node1,e)*t.getValue()}function kL(t,e){return LL(t.node1,e)}function LL(t,e){return"vertical"===e?t.getLayout().x+t.getLayout().dx/2:t.getLayout().y+t.getLayout().dy/2}function PL(t){return t.getValue()}function OL(t,e,n){for(var i=0,r=t.length,o=-1;++o<r;){var a=+e(t[o],n);isNaN(a)||(i+=a)}return i}function RL(t,e,n){E(t,(function(t){E(t,(function(t){if(t.inEdges.length){var i=OL(t.inEdges,AL,n)/OL(t.inEdges,PL);if(isNaN(i)){var r=t.inEdges.length;i=r?OL(t.inEdges,kL,n)/r:0}if("vertical"===n){var o=t.getLayout().x+(i-LL(t,n))*e;t.setLayout({x:o},!0)}else{var a=t.getLayout().y+(i-LL(t,n))*e;t.setLayout({y:a},!0)}}}))}))}function NL(t){t.eachSeriesByType("sankey",(function(t){var e=t.getGraph().nodes;if(e.length){var n=1/0,i=-1/0;E(e,(function(t){var e=t.getLayout().value;e<n&&(n=e),e>i&&(i=e)})),E(e,(function(e){var r=new iD({type:"color",mappingMethod:"linear",dataExtent:[n,i],visual:t.get("color")}).mapValueToVisual(e.getLayout().value),o=e.getModel().get(["itemStyle","color"]);null!=o?(e.setVisual("color",o),e.setVisual("style",{fill:o})):(e.setVisual("color",r),e.setVisual("style",{fill:r}))}))}}))}var EL=function(){function t(){}return t.prototype.getInitialData=function(t,e){var n,i,r=e.getComponent("xAxis",this.get("xAxisIndex")),o=e.getComponent("yAxis",this.get("yAxisIndex")),a=r.get("type"),s=o.get("type");"category"===a?(t.layout="horizontal",n=r.getOrdinalMeta(),i=!0):"category"===s?(t.layout="vertical",n=o.getOrdinalMeta(),i=!0):t.layout=t.layout||"horizontal";var l=["x","y"],u="horizontal"===t.layout?0:1,h=this._baseAxisDim=l[u],c=l[1-u],p=[r,o],d=p[u].get("type"),f=p[1-u].get("type"),g=t.data;if(g&&i){var y=[];E(g,(function(t,e){var n;Y(t)?(n=t.slice(),t.unshift(e)):Y(t.value)?((n=A({},t)).value=n.value.slice(),t.value.unshift(e)):n=t,y.push(n)})),t.data=y}var v=this.defaultValueDimensions,m=[{name:h,type:Dm(d),ordinalMeta:n,otherDims:{tooltip:!1,itemName:0},dimsDef:["base"]},{name:c,type:Dm(f),dimsDef:v.slice()}];return uM(this,{coordDimensions:m,dimensionsCount:v.length+1,encodeDefaulter:H(Hp,m,this)})},t.prototype.getBaseAxis=function(){var t=this._baseAxisDim;return this.ecModel.getComponent(t+"Axis",this.get(t+"AxisIndex")).axis},t}(),zL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.defaultValueDimensions=[{name:"min",defaultTooltip:!0},{name:"Q1",defaultTooltip:!0},{name:"median",defaultTooltip:!0},{name:"Q3",defaultTooltip:!0},{name:"max",defaultTooltip:!0}],n.visualDrawType="stroke",n}return n(e,t),e.type="series.boxplot",e.dependencies=["xAxis","yAxis","grid"],e.defaultOption={z:2,coordinateSystem:"cartesian2d",legendHoverLink:!0,layout:null,boxWidth:[7,50],itemStyle:{color:"#fff",borderWidth:1},emphasis:{scale:!0,itemStyle:{borderWidth:2,shadowBlur:5,shadowOffsetX:1,shadowOffsetY:1,shadowColor:"rgba(0,0,0,0.2)"}},animationDuration:800},e}(sg);R(zL,EL,!0);var VL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.getData(),r=this.group,o=this._data;this._data||r.removeAll();var a="horizontal"===t.get("layout")?1:0;i.diff(o).add((function(t){if(i.hasValue(t)){var e=GL(i.getItemLayout(t),i,t,a,!0);i.setItemGraphicEl(t,e),r.add(e)}})).update((function(t,e){var n=o.getItemGraphicEl(e);if(i.hasValue(t)){var s=i.getItemLayout(t);n?(hh(n),WL(s,n,i,t)):n=GL(s,i,t,a),r.add(n),i.setItemGraphicEl(t,n)}else r.remove(n)})).remove((function(t){var e=o.getItemGraphicEl(t);e&&r.remove(e)})).execute(),this._data=i},e.prototype.remove=function(t){var e=this.group,n=this._data;this._data=null,n&&n.eachItemGraphicEl((function(t){t&&e.remove(t)}))},e.type="boxplot",e}(xg),BL=function(){},FL=function(t){function e(e){var n=t.call(this,e)||this;return n.type="boxplotBoxPath",n}return n(e,t),e.prototype.getDefaultShape=function(){return new BL},e.prototype.buildPath=function(t,e){var n=e.points,i=0;for(t.moveTo(n[i][0],n[i][1]),i++;i<4;i++)t.lineTo(n[i][0],n[i][1]);for(t.closePath();i<n.length;i++)t.moveTo(n[i][0],n[i][1]),i++,t.lineTo(n[i][0],n[i][1])},e}(gs);function GL(t,e,n,i,r){var o=t.ends,a=new FL({shape:{points:r?HL(o,i,t):o}});return WL(t,a,e,n,r),a}function WL(t,e,n,i,r){var o=n.hostModel;(0,Bh[r?"initProps":"updateProps"])(e,{shape:{points:t.ends}},o,i),e.useStyle(n.getItemVisual(i,"style")),e.style.strokeNoScale=!0,e.z2=100;var a=n.getItemModel(i),s=a.getModel("emphasis");Vl(e,a),Rl(e,s.get("focus"),s.get("blurScope"),s.get("disabled"))}function HL(t,e,n){return z(t,(function(t){return(t=t.slice())[e]=n.initBaseline,t}))}function YL(t,e){}var UL=E;function XL(t){var e=function(t){var e=[],n=[];return t.eachSeriesByType("boxplot",(function(t){var i=t.getBaseAxis(),r=P(n,i);r<0&&(r=n.length,n[r]=i,e[r]={axis:i,seriesModels:[]}),e[r].seriesModels.push(t)})),e}(t);UL(e,(function(t){var e=t.seriesModels;e.length&&(!function(t){var e,n=t.axis,i=t.seriesModels,r=i.length,o=t.boxWidthList=[],a=t.boxOffsetList=[],s=[];if("category"===n.type)e=n.getBandWidth();else{var l=0;UL(i,(function(t){l=Math.max(l,t.getData().count())}));var u=n.getExtent();e=Math.abs(u[1]-u[0])/l}UL(i,(function(t){var n=t.get("boxWidth");Y(n)||(n=[n,n]),s.push([Er(n[0],e)||0,Er(n[1],e)||0])}));var h=.8*e-2,c=h/r*.3,p=(h-c*(r-1))/r,d=p/2-h/2;UL(i,(function(t,e){a.push(d),d+=c+p,o.push(Math.min(Math.max(p,s[e][0]),s[e][1]))}))}(t),UL(e,(function(e,n){!function(t,e,n){var i=t.coordinateSystem,r=t.getData(),o=n/2,a="horizontal"===t.get("layout")?0:1,s=1-a,l=["x","y"],u=r.mapDimension(l[a]),h=r.mapDimensionsAll(l[s]);if(null==u||h.length<5)return;for(var c=0;c<r.count();c++){var p=r.get(u,c),d=x(p,h[2],c),f=x(p,h[0],c),g=x(p,h[1],c),y=x(p,h[3],c),v=x(p,h[4],c),m=[];_(m,g,!1),_(m,y,!0),m.push(f,g,v,y),b(m,f),b(m,v),b(m,d),r.setItemLayout(c,{initBaseline:d[s],ends:m})}function x(t,n,o){var l,u=r.get(n,o),h=[];return h[a]=t,h[s]=u,isNaN(t)||isNaN(u)?l=[NaN,NaN]:(l=i.dataToPoint(h))[a]+=e,l}function _(t,e,n){var i=e.slice(),r=e.slice();i[a]+=o,r[a]-=o,n?t.push(i,r):t.push(r,i)}function b(t,e){var n=e.slice(),i=e.slice();n[a]-=o,i[a]+=o,t.push(n,i)}}(e,t.boxOffsetList[n],t.boxWidthList[n])})))}))}var ZL={type:"echarts:boxplot",transform:function(t){var e=t.upstream;if(e.sourceFormat!==Pp){var n="";0,ao(n)}var i=function(t,e){for(var n=[],i=[],r=(e=e||{}).boundIQR,o="none"===r||0===r,a=0;a<t.length;a++){var s=Vr(t[a].slice()),l=Jr(s,.25),u=Jr(s,.5),h=Jr(s,.75),c=s[0],p=s[s.length-1],d=(null==r?1.5:r)*(h-l),f=o?c:Math.max(c,l-d),g=o?p:Math.min(p,h+d),y=e.itemNameFormatter,v=U(y)?y({value:a}):X(y)?y.replace("{value}",a+""):a+"";n.push([v,f,l,u,h,g]);for(var m=0;m<s.length;m++){var x=s[m];if(x<f||x>g){var _=[v,x];i.push(_)}}}return{boxData:n,outliers:i}}(e.getRawData(),t.config);return[{dimensions:["ItemName","Low","Q1","Q2","Q3","High"],data:i.boxData},{data:i.outliers}]}};var jL=["color","borderColor"],qL=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){this.group.removeClipPath(),this._progressiveEls=null,this._updateDrawMode(t),this._isLargeDraw?this._renderLarge(t):this._renderNormal(t)},e.prototype.incrementalPrepareRender=function(t,e,n){this._clear(),this._updateDrawMode(t)},e.prototype.incrementalRender=function(t,e,n,i){this._progressiveEls=[],this._isLargeDraw?this._incrementalRenderLarge(t,e):this._incrementalRenderNormal(t,e)},e.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},e.prototype._updateDrawMode=function(t){var e=t.pipelineContext.large;null!=this._isLargeDraw&&e===this._isLargeDraw||(this._isLargeDraw=e,this._clear())},e.prototype._renderNormal=function(t){var e=t.getData(),n=this._data,i=this.group,r=e.getLayout("isSimpleBox"),o=t.get("clip",!0),a=t.coordinateSystem,s=a.getArea&&a.getArea();this._data||i.removeAll(),e.diff(n).add((function(n){if(e.hasValue(n)){var a=e.getItemLayout(n);if(o&&QL(s,a))return;var l=JL(a,n,!0);oh(l,{shape:{points:a.ends}},t,n),tP(l,e,n,r),i.add(l),e.setItemGraphicEl(n,l)}})).update((function(a,l){var u=n.getItemGraphicEl(l);if(e.hasValue(a)){var h=e.getItemLayout(a);o&&QL(s,h)?i.remove(u):(u?(rh(u,{shape:{points:h.ends}},t,a),hh(u)):u=JL(h),tP(u,e,a,r),i.add(u),e.setItemGraphicEl(a,u))}else i.remove(u)})).remove((function(t){var e=n.getItemGraphicEl(t);e&&i.remove(e)})).execute(),this._data=e},e.prototype._renderLarge=function(t){this._clear(),rP(t,this.group);var e=t.get("clip",!0)?lS(t.coordinateSystem,!1,t):null;e?this.group.setClipPath(e):this.group.removeClipPath()},e.prototype._incrementalRenderNormal=function(t,e){for(var n,i=e.getData(),r=i.getLayout("isSimpleBox");null!=(n=t.next());){var o=JL(i.getItemLayout(n));tP(o,i,n,r),o.incremental=!0,this.group.add(o),this._progressiveEls.push(o)}},e.prototype._incrementalRenderLarge=function(t,e){rP(e,this.group,this._progressiveEls,!0)},e.prototype.remove=function(t){this._clear()},e.prototype._clear=function(){this.group.removeAll(),this._data=null},e.type="candlestick",e}(xg),KL=function(){},$L=function(t){function e(e){var n=t.call(this,e)||this;return n.type="normalCandlestickBox",n}return n(e,t),e.prototype.getDefaultShape=function(){return new KL},e.prototype.buildPath=function(t,e){var n=e.points;this.__simpleBox?(t.moveTo(n[4][0],n[4][1]),t.lineTo(n[6][0],n[6][1])):(t.moveTo(n[0][0],n[0][1]),t.lineTo(n[1][0],n[1][1]),t.lineTo(n[2][0],n[2][1]),t.lineTo(n[3][0],n[3][1]),t.closePath(),t.moveTo(n[4][0],n[4][1]),t.lineTo(n[5][0],n[5][1]),t.moveTo(n[6][0],n[6][1]),t.lineTo(n[7][0],n[7][1]))},e}(gs);function JL(t,e,n){var i=t.ends;return new $L({shape:{points:n?eP(i,t):i},z2:100})}function QL(t,e){for(var n=!0,i=0;i<e.ends.length;i++)if(t.contain(e.ends[i][0],e.ends[i][1])){n=!1;break}return n}function tP(t,e,n,i){var r=e.getItemModel(n);t.useStyle(e.getItemVisual(n,"style")),t.style.strokeNoScale=!0,t.__simpleBox=i,Vl(t,r)}function eP(t,e){return z(t,(function(t){return(t=t.slice())[1]=e.initBaseline,t}))}var nP=function(){},iP=function(t){function e(e){var n=t.call(this,e)||this;return n.type="largeCandlestickBox",n}return n(e,t),e.prototype.getDefaultShape=function(){return new nP},e.prototype.buildPath=function(t,e){for(var n=e.points,i=0;i<n.length;)if(this.__sign===n[i++]){var r=n[i++];t.moveTo(r,n[i++]),t.lineTo(r,n[i++])}else i+=3},e}(gs);function rP(t,e,n,i){var r=t.getData().getLayout("largePoints"),o=new iP({shape:{points:r},__sign:1});e.add(o);var a=new iP({shape:{points:r},__sign:-1});e.add(a),oP(1,o,t),oP(-1,a,t),i&&(o.incremental=!0,a.incremental=!0),n&&n.push(o,a)}function oP(t,e,n,i){var r=n.get(["itemStyle",t>0?"borderColor":"borderColor0"])||n.get(["itemStyle",t>0?"color":"color0"]),o=n.getModel("itemStyle").getItemStyle(jL);e.useStyle(o),e.style.fill=null,e.style.stroke=r}var aP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.defaultValueDimensions=[{name:"open",defaultTooltip:!0},{name:"close",defaultTooltip:!0},{name:"lowest",defaultTooltip:!0},{name:"highest",defaultTooltip:!0}],n}return n(e,t),e.prototype.getShadowDim=function(){return"open"},e.prototype.brushSelector=function(t,e,n){var i=e.getItemLayout(t);return i&&n.rect(i.brushRect)},e.type="series.candlestick",e.dependencies=["xAxis","yAxis","grid"],e.defaultOption={z:2,coordinateSystem:"cartesian2d",legendHoverLink:!0,layout:null,clip:!0,itemStyle:{color:"#eb5454",color0:"#47b262",borderColor:"#eb5454",borderColor0:"#47b262",borderWidth:1},emphasis:{scale:!0,itemStyle:{borderWidth:2}},barMaxWidth:null,barMinWidth:null,barWidth:null,large:!0,largeThreshold:600,progressive:3e3,progressiveThreshold:1e4,progressiveChunkMode:"mod",animationEasing:"linear",animationDuration:300},e}(sg);function sP(t){t&&Y(t.series)&&E(t.series,(function(t){q(t)&&"k"===t.type&&(t.type="candlestick")}))}R(aP,EL,!0);var lP=["itemStyle","borderColor"],uP=["itemStyle","borderColor0"],hP=["itemStyle","color"],cP=["itemStyle","color0"],pP={seriesType:"candlestick",plan:yg(),performRawSeries:!0,reset:function(t,e){function n(t,e){return e.get(t>0?hP:cP)}function i(t,e){return e.get(t>0?lP:uP)}if(!e.isSeriesFiltered(t))return!t.pipelineContext.large&&{progress:function(t,e){for(var r;null!=(r=t.next());){var o=e.getItemModel(r),a=e.getItemLayout(r).sign,s=o.getItemStyle();s.fill=n(a,o),s.stroke=i(a,o)||s.fill,A(e.ensureUniqueItemVisual(r,"style"),s)}}}}},dP={seriesType:"candlestick",plan:yg(),reset:function(t){var e=t.coordinateSystem,n=t.getData(),i=function(t,e){var n,i=t.getBaseAxis(),r="category"===i.type?i.getBandWidth():(n=i.getExtent(),Math.abs(n[1]-n[0])/e.count()),o=Er(rt(t.get("barMaxWidth"),r),r),a=Er(rt(t.get("barMinWidth"),1),r),s=t.get("barWidth");return null!=s?Er(s,r):Math.max(Math.min(r/2,o),a)}(t,n),r=["x","y"],o=n.getDimensionIndex(n.mapDimension(r[0])),a=z(n.mapDimensionsAll(r[1]),n.getDimensionIndex,n),s=a[0],l=a[1],u=a[2],h=a[3];if(n.setLayout({candleWidth:i,isSimpleBox:i<=1.3}),!(o<0||a.length<4))return{progress:t.pipelineContext.large?function(t,n){var i,r,a=Sx(4*t.count),c=0,p=[],d=[],f=n.getStore();for(;null!=(r=t.next());){var g=f.get(o,r),y=f.get(s,r),v=f.get(l,r),m=f.get(u,r),x=f.get(h,r);isNaN(g)||isNaN(m)||isNaN(x)?(a[c++]=NaN,c+=3):(a[c++]=fP(f,r,y,v,l),p[0]=g,p[1]=m,i=e.dataToPoint(p,null,d),a[c++]=i?i[0]:NaN,a[c++]=i?i[1]:NaN,p[1]=x,i=e.dataToPoint(p,null,d),a[c++]=i?i[1]:NaN)}n.setLayout("largePoints",a)}:function(t,n){var r,a=n.getStore();for(;null!=(r=t.next());){var c=a.get(o,r),p=a.get(s,r),d=a.get(l,r),f=a.get(u,r),g=a.get(h,r),y=Math.min(p,d),v=Math.max(p,d),m=S(y,c),x=S(v,c),_=S(f,c),b=S(g,c),w=[];M(w,x,0),M(w,m,1),w.push(T(b),T(x),T(_),T(m)),n.setItemLayout(r,{sign:fP(a,r,p,d,l),initBaseline:p>d?x[1]:m[1],ends:w,brushRect:I(f,g,c)})}function S(t,n){var i=[];return i[0]=n,i[1]=t,isNaN(n)||isNaN(t)?[NaN,NaN]:e.dataToPoint(i)}function M(t,e,n){var r=e.slice(),o=e.slice();r[0]=Mh(r[0]+i/2,1,!1),o[0]=Mh(o[0]-i/2,1,!0),n?t.push(r,o):t.push(o,r)}function I(t,e,n){var r=S(t,n),o=S(e,n);return r[0]-=i/2,o[0]-=i/2,{x:r[0],y:r[1],width:i,height:o[1]-r[1]}}function T(t){return t[0]=Mh(t[0],1),t}}}}};function fP(t,e,n,i,r){return n>i?-1:n<i?1:e>0?t.get(r,e-1)<=i?1:-1:1}function gP(t,e){var n=e.rippleEffectColor||e.color;t.eachChild((function(t){t.attr({z:e.z,zlevel:e.zlevel,style:{stroke:"stroke"===e.brushType?n:null,fill:"fill"===e.brushType?n:null}})}))}var yP=function(t){function e(e,n){var i=t.call(this)||this,r=new Yw(e,n),o=new Cr;return i.add(r),i.add(o),i.updateData(e,n),i}return n(e,t),e.prototype.stopEffectAnimation=function(){this.childAt(1).removeAll()},e.prototype.startEffectAnimation=function(t){for(var e=t.symbolType,n=t.color,i=t.rippleNumber,r=this.childAt(1),o=0;o<i;o++){var a=Ly(e,-1,-1,2,2,n);a.attr({style:{strokeNoScale:!0},z2:99,silent:!0,scaleX:.5,scaleY:.5});var s=-o/i*t.period+t.effectOffset;a.animate("",!0).when(t.period,{scaleX:t.rippleScale/2,scaleY:t.rippleScale/2}).delay(s).start(),a.animateStyle(!0).when(t.period,{opacity:0}).delay(s).start(),r.add(a)}gP(r,t)},e.prototype.updateEffectAnimation=function(t){for(var e=this._effectCfg,n=this.childAt(1),i=["symbolType","period","rippleScale","rippleNumber"],r=0;r<i.length;r++){var o=i[r];if(e[o]!==t[o])return this.stopEffectAnimation(),void this.startEffectAnimation(t)}gP(n,t)},e.prototype.highlight=function(){_l(this)},e.prototype.downplay=function(){bl(this)},e.prototype.getSymbolType=function(){var t=this.childAt(0);return t&&t.getSymbolType()},e.prototype.updateData=function(t,e){var n=this,i=t.hostModel;this.childAt(0).updateData(t,e);var r=this.childAt(1),o=t.getItemModel(e),a=t.getItemVisual(e,"symbol"),s=Py(t.getItemVisual(e,"symbolSize")),l=t.getItemVisual(e,"style"),u=l&&l.fill,h=o.getModel("emphasis");r.setScale(s),r.traverse((function(t){t.setStyle("fill",u)}));var c=Oy(t.getItemVisual(e,"symbolOffset"),s);c&&(r.x=c[0],r.y=c[1]);var p=t.getItemVisual(e,"symbolRotate");r.rotation=(p||0)*Math.PI/180||0;var d={};d.showEffectOn=i.get("showEffectOn"),d.rippleScale=o.get(["rippleEffect","scale"]),d.brushType=o.get(["rippleEffect","brushType"]),d.period=1e3*o.get(["rippleEffect","period"]),d.effectOffset=e/t.count(),d.z=i.getShallow("z")||0,d.zlevel=i.getShallow("zlevel")||0,d.symbolType=a,d.color=u,d.rippleEffectColor=o.get(["rippleEffect","color"]),d.rippleNumber=o.get(["rippleEffect","number"]),"render"===d.showEffectOn?(this._effectCfg?this.updateEffectAnimation(d):this.startEffectAnimation(d),this._effectCfg=d):(this._effectCfg=null,this.stopEffectAnimation(),this.onHoverStateChange=function(t){"emphasis"===t?"render"!==d.showEffectOn&&n.startEffectAnimation(d):"normal"===t&&"render"!==d.showEffectOn&&n.stopEffectAnimation()}),this._effectCfg=d,Rl(this,h.get("focus"),h.get("blurScope"),h.get("disabled"))},e.prototype.fadeOut=function(t){t&&t()},e}(Cr),vP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(){this._symbolDraw=new qw(yP)},e.prototype.render=function(t,e,n){var i=t.getData(),r=this._symbolDraw;r.updateData(i,{clipShape:this._getClipShape(t)}),this.group.add(r.group)},e.prototype._getClipShape=function(t){var e=t.coordinateSystem,n=e&&e.getArea&&e.getArea();return t.get("clip",!0)?n:null},e.prototype.updateTransform=function(t,e,n){var i=t.getData();this.group.dirty();var r=bS("").reset(t,e,n);r.progress&&r.progress({start:0,end:i.count(),count:i.count()},i),this._symbolDraw.updateLayout()},e.prototype._updateGroupTransform=function(t){var e=t.coordinateSystem;e&&e.getRoamTransform&&(this.group.transform=Fi(e.getRoamTransform()),this.group.decomposeTransform())},e.prototype.remove=function(t,e){this._symbolDraw&&this._symbolDraw.remove(!0)},e.type="effectScatter",e}(xg),mP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n}return n(e,t),e.prototype.getInitialData=function(t,e){return rx(null,this,{useEncodeDefaulter:!0})},e.prototype.brushSelector=function(t,e,n){return n.point(e.getItemLayout(t))},e.type="series.effectScatter",e.dependencies=["grid","polar"],e.defaultOption={coordinateSystem:"cartesian2d",z:2,legendHoverLink:!0,effectType:"ripple",progressive:0,showEffectOn:"render",clip:!0,rippleEffect:{period:4,scale:2.5,brushType:"fill",number:3},universalTransition:{divideShape:"clone"},symbolSize:10},e}(sg);var xP=function(t){function e(e,n,i){var r=t.call(this)||this;return r.add(r.createLine(e,n,i)),r._updateEffectSymbol(e,n),r}return n(e,t),e.prototype.createLine=function(t,e,n){return new fA(t,e,n)},e.prototype._updateEffectSymbol=function(t,e){var n=t.getItemModel(e).getModel("effect"),i=n.get("symbolSize"),r=n.get("symbol");Y(i)||(i=[i,i]);var o=t.getItemVisual(e,"style"),a=n.get("color")||o&&o.stroke,s=this.childAt(1);this._symbolType!==r&&(this.remove(s),(s=Ly(r,-.5,-.5,1,1,a)).z2=100,s.culling=!0,this.add(s)),s&&(s.setStyle("shadowColor",a),s.setStyle(n.getItemStyle(["color"])),s.scaleX=i[0],s.scaleY=i[1],s.setColor(a),this._symbolType=r,this._symbolScale=i,this._updateEffectAnimation(t,n,e))},e.prototype._updateEffectAnimation=function(t,e,n){var i=this.childAt(1);if(i){var r=t.getItemLayout(n),o=1e3*e.get("period"),a=e.get("loop"),s=e.get("constantSpeed"),l=it(e.get("delay"),(function(e){return e/t.count()*o/3}));if(i.ignore=!0,this._updateAnimationPoints(i,r),s>0&&(o=this._getLineLength(i)/s*1e3),o!==this._period||a!==this._loop){i.stopAnimation();var u=void 0;u=U(l)?l(n):l,i.__t>0&&(u=-o*i.__t),this._animateSymbol(i,o,u,a)}this._period=o,this._loop=a}},e.prototype._animateSymbol=function(t,e,n,i){if(e>0){t.__t=0;var r=this,o=t.animate("",i).when(e,{__t:1}).delay(n).during((function(){r._updateSymbolPosition(t)}));i||o.done((function(){r.remove(t)})),o.start()}},e.prototype._getLineLength=function(t){return Et(t.__p1,t.__cp1)+Et(t.__cp1,t.__p2)},e.prototype._updateAnimationPoints=function(t,e){t.__p1=e[0],t.__p2=e[1],t.__cp1=e[2]||[(e[0][0]+e[1][0])/2,(e[0][1]+e[1][1])/2]},e.prototype.updateData=function(t,e,n){this.childAt(0).updateData(t,e,n),this._updateEffectSymbol(t,e)},e.prototype._updateSymbolPosition=function(t){var e=t.__p1,n=t.__p2,i=t.__cp1,r=t.__t,o=[t.x,t.y],a=o.slice(),s=Ke,l=$e;o[0]=s(e[0],i[0],n[0],r),o[1]=s(e[1],i[1],n[1],r);var u=l(e[0],i[0],n[0],r),h=l(e[1],i[1],n[1],r);t.rotation=-Math.atan2(h,u)-Math.PI/2,"line"!==this._symbolType&&"rect"!==this._symbolType&&"roundRect"!==this._symbolType||(void 0!==t.__lastT&&t.__lastT<t.__t?(t.scaleY=1.05*Et(a,o),1===r&&(o[0]=a[0]+(o[0]-a[0])/2,o[1]=a[1]+(o[1]-a[1])/2)):1===t.__lastT?t.scaleY=2*Et(e,o):t.scaleY=this._symbolScale[1]),t.__lastT=t.__t,t.ignore=!1,t.x=o[0],t.y=o[1]},e.prototype.updateLayout=function(t,e){this.childAt(0).updateLayout(t,e);var n=t.getItemModel(e).getModel("effect");this._updateEffectAnimation(t,n,e)},e}(Cr),_P=function(t){function e(e,n,i){var r=t.call(this)||this;return r._createPolyline(e,n,i),r}return n(e,t),e.prototype._createPolyline=function(t,e,n){var i=t.getItemLayout(e),r=new Ru({shape:{points:i}});this.add(r),this._updateCommonStl(t,e,n)},e.prototype.updateData=function(t,e,n){var i=t.hostModel;rh(this.childAt(0),{shape:{points:t.getItemLayout(e)}},i,e),this._updateCommonStl(t,e,n)},e.prototype._updateCommonStl=function(t,e,n){var i=this.childAt(0),r=t.getItemModel(e),o=n&&n.emphasisLineStyle,a=n&&n.focus,s=n&&n.blurScope,l=n&&n.emphasisDisabled;if(!n||t.hasItemOption){var u=r.getModel("emphasis");o=u.getModel("lineStyle").getLineStyle(),l=u.get("disabled"),a=u.get("focus"),s=u.get("blurScope")}i.useStyle(t.getItemVisual(e,"style")),i.style.fill=null,i.style.strokeNoScale=!0,i.ensureState("emphasis").style=o,Rl(this,a,s,l)},e.prototype.updateLayout=function(t,e){this.childAt(0).setShape("points",t.getItemLayout(e))},e}(Cr),bP=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e._lastFrame=0,e._lastFramePercent=0,e}return n(e,t),e.prototype.createLine=function(t,e,n){return new _P(t,e,n)},e.prototype._updateAnimationPoints=function(t,e){this._points=e;for(var n=[0],i=0,r=1;r<e.length;r++){var o=e[r-1],a=e[r];i+=Et(o,a),n.push(i)}if(0!==i){for(r=0;r<n.length;r++)n[r]/=i;this._offsets=n,this._length=i}else this._length=0},e.prototype._getLineLength=function(){return this._length},e.prototype._updateSymbolPosition=function(t){var e=t.__t,n=this._points,i=this._offsets,r=n.length;if(i){var o,a=this._lastFrame;if(e<this._lastFramePercent){for(o=Math.min(a+1,r-1);o>=0&&!(i[o]<=e);o--);o=Math.min(o,r-2)}else{for(o=a;o<r&&!(i[o]>e);o++);o=Math.min(o-1,r-2)}var s=(e-i[o])/(i[o+1]-i[o]),l=n[o],u=n[o+1];t.x=l[0]*(1-s)+s*u[0],t.y=l[1]*(1-s)+s*u[1];var h=u[0]-l[0],c=u[1]-l[1];t.rotation=-Math.atan2(c,h)-Math.PI/2,this._lastFrame=o,this._lastFramePercent=e,t.ignore=!1}},e}(xP),wP=function(){this.polyline=!1,this.curveness=0,this.segs=[]},SP=function(t){function e(e){var n=t.call(this,e)||this;return n._off=0,n.hoverDataIdx=-1,n}return n(e,t),e.prototype.reset=function(){this.notClear=!1,this._off=0},e.prototype.getDefaultStyle=function(){return{stroke:"#000",fill:null}},e.prototype.getDefaultShape=function(){return new wP},e.prototype.buildPath=function(t,e){var n,i=e.segs,r=e.curveness;if(e.polyline)for(n=this._off;n<i.length;){var o=i[n++];if(o>0){t.moveTo(i[n++],i[n++]);for(var a=1;a<o;a++)t.lineTo(i[n++],i[n++])}}else for(n=this._off;n<i.length;){var s=i[n++],l=i[n++],u=i[n++],h=i[n++];if(t.moveTo(s,l),r>0){var c=(s+u)/2-(l-h)*r,p=(l+h)/2-(u-s)*r;t.quadraticCurveTo(c,p,u,h)}else t.lineTo(u,h)}this.incremental&&(this._off=n,this.notClear=!0)},e.prototype.findDataIndex=function(t,e){var n=this.shape,i=n.segs,r=n.curveness,o=this.style.lineWidth;if(n.polyline)for(var a=0,s=0;s<i.length;){var l=i[s++];if(l>0)for(var u=i[s++],h=i[s++],c=1;c<l;c++){if(Ka(u,h,p=i[s++],d=i[s++],o,t,e))return a}a++}else for(a=0,s=0;s<i.length;){u=i[s++],h=i[s++];var p=i[s++],d=i[s++];if(r>0){if(Ja(u,h,(u+p)/2-(h-d)*r,(h+d)/2-(p-u)*r,p,d,o,t,e))return a}else if(Ka(u,h,p,d,o,t,e))return a;a++}return-1},e.prototype.contain=function(t,e){var n=this.transformCoordToLocal(t,e),i=this.getBoundingRect();return t=n[0],e=n[1],i.contain(t,e)?(this.hoverDataIdx=this.findDataIndex(t,e))>=0:(this.hoverDataIdx=-1,!1)},e.prototype.getBoundingRect=function(){var t=this._rect;if(!t){for(var e=this.shape.segs,n=1/0,i=1/0,r=-1/0,o=-1/0,a=0;a<e.length;){var s=e[a++],l=e[a++];n=Math.min(s,n),r=Math.max(s,r),i=Math.min(l,i),o=Math.max(l,o)}t=this._rect=new sr(n,i,r,o)}return t},e}(gs),MP=function(){function t(){this.group=new Cr}return t.prototype.updateData=function(t){this._clear();var e=this._create();e.setShape({segs:t.getLayout("linesPoints")}),this._setCommon(e,t)},t.prototype.incrementalPrepareUpdate=function(t){this.group.removeAll(),this._clear()},t.prototype.incrementalUpdate=function(t,e){var n=this._newAdded[0],i=e.getLayout("linesPoints"),r=n&&n.shape.segs;if(r&&r.length<2e4){var o=r.length,a=new Float32Array(o+i.length);a.set(r),a.set(i,o),n.setShape({segs:a})}else{this._newAdded=[];var s=this._create();s.incremental=!0,s.setShape({segs:i}),this._setCommon(s,e),s.__startIndex=t.start}},t.prototype.remove=function(){this._clear()},t.prototype.eachRendered=function(t){this._newAdded[0]&&t(this._newAdded[0])},t.prototype._create=function(){var t=new SP({cursor:"default"});return this._newAdded.push(t),this.group.add(t),t},t.prototype._setCommon=function(t,e,n){var i=e.hostModel;t.setShape({polyline:i.get("polyline"),curveness:i.get(["lineStyle","curveness"])}),t.useStyle(i.getModel("lineStyle").getLineStyle()),t.style.strokeNoScale=!0;var r=e.getVisual("style");r&&r.stroke&&t.setStyle("stroke",r.stroke),t.setStyle("fill",null);var o=Hs(t);o.seriesIndex=i.seriesIndex,t.on("mousemove",(function(e){o.dataIndex=null;var n=t.hoverDataIdx;n>0&&(o.dataIndex=n+t.__startIndex)}))},t.prototype._clear=function(){this._newAdded=[],this.group.removeAll()},t}(),IP={seriesType:"lines",plan:yg(),reset:function(t){var e=t.coordinateSystem;if(e){var n=t.get("polyline"),i=t.pipelineContext.large;return{progress:function(r,o){var a=[];if(i){var s=void 0,l=r.end-r.start;if(n){for(var u=0,h=r.start;h<r.end;h++)u+=t.getLineCoordsCount(h);s=new Float32Array(l+2*u)}else s=new Float32Array(4*l);var c=0,p=[];for(h=r.start;h<r.end;h++){var d=t.getLineCoords(h,a);n&&(s[c++]=d);for(var f=0;f<d;f++)p=e.dataToPoint(a[f],!1,p),s[c++]=p[0],s[c++]=p[1]}o.setLayout("linesPoints",s)}else for(h=r.start;h<r.end;h++){var g=o.getItemModel(h),y=(d=t.getLineCoords(h,a),[]);if(n)for(var v=0;v<d;v++)y.push(e.dataToPoint(a[v]));else{y[0]=e.dataToPoint(a[0]),y[1]=e.dataToPoint(a[1]);var m=g.get(["lineStyle","curveness"]);+m&&(y[2]=[(y[0][0]+y[1][0])/2-(y[0][1]-y[1][1])*m,(y[0][1]+y[1][1])/2-(y[1][0]-y[0][0])*m])}o.setItemLayout(h,y)}}}}}},TP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.getData(),r=this._updateLineDraw(i,t),o=t.get("zlevel"),a=t.get(["effect","trailLength"]),s=n.getZr(),l="svg"===s.painter.getType();l||s.painter.getLayer(o).clear(!0),null==this._lastZlevel||l||s.configLayer(this._lastZlevel,{motionBlur:!1}),this._showEffect(t)&&a>0&&(l||s.configLayer(o,{motionBlur:!0,lastFrameAlpha:Math.max(Math.min(a/10+.9,1),0)})),r.updateData(i);var u=t.get("clip",!0)&&lS(t.coordinateSystem,!1,t);u?this.group.setClipPath(u):this.group.removeClipPath(),this._lastZlevel=o,this._finished=!0},e.prototype.incrementalPrepareRender=function(t,e,n){var i=t.getData();this._updateLineDraw(i,t).incrementalPrepareUpdate(i),this._clearLayer(n),this._finished=!1},e.prototype.incrementalRender=function(t,e,n){this._lineDraw.incrementalUpdate(t,e.getData()),this._finished=t.end===e.getData().count()},e.prototype.eachRendered=function(t){this._lineDraw&&this._lineDraw.eachRendered(t)},e.prototype.updateTransform=function(t,e,n){var i=t.getData(),r=t.pipelineContext;if(!this._finished||r.large||r.progressiveRender)return{update:!0};var o=IP.reset(t,e,n);o.progress&&o.progress({start:0,end:i.count(),count:i.count()},i),this._lineDraw.updateLayout(),this._clearLayer(n)},e.prototype._updateLineDraw=function(t,e){var n=this._lineDraw,i=this._showEffect(e),r=!!e.get("polyline"),o=e.pipelineContext.large;return n&&i===this._hasEffet&&r===this._isPolyline&&o===this._isLargeDraw||(n&&n.remove(),n=this._lineDraw=o?new MP:new gA(r?i?bP:_P:i?xP:fA),this._hasEffet=i,this._isPolyline=r,this._isLargeDraw=o),this.group.add(n.group),n},e.prototype._showEffect=function(t){return!!t.get(["effect","show"])},e.prototype._clearLayer=function(t){var e=t.getZr();"svg"===e.painter.getType()||null==this._lastZlevel||e.painter.getLayer(this._lastZlevel).clear(!0)},e.prototype.remove=function(t,e){this._lineDraw&&this._lineDraw.remove(),this._lineDraw=null,this._clearLayer(e)},e.prototype.dispose=function(t,e){this.remove(t,e)},e.type="lines",e}(xg),CP="undefined"==typeof Uint32Array?Array:Uint32Array,DP="undefined"==typeof Float64Array?Array:Float64Array;function AP(t){var e=t.data;e&&e[0]&&e[0][0]&&e[0][0].coord&&(t.data=z(e,(function(t){var e={coords:[t[0].coord,t[1].coord]};return t[0].name&&(e.fromName=t[0].name),t[1].name&&(e.toName=t[1].name),D([e,t[0],t[1]])})))}var kP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.visualStyleAccessPath="lineStyle",n.visualDrawType="stroke",n}return n(e,t),e.prototype.init=function(e){e.data=e.data||[],AP(e);var n=this._processFlatCoordsArray(e.data);this._flatCoords=n.flatCoords,this._flatCoordsOffset=n.flatCoordsOffset,n.flatCoords&&(e.data=new Float32Array(n.count)),t.prototype.init.apply(this,arguments)},e.prototype.mergeOption=function(e){if(AP(e),e.data){var n=this._processFlatCoordsArray(e.data);this._flatCoords=n.flatCoords,this._flatCoordsOffset=n.flatCoordsOffset,n.flatCoords&&(e.data=new Float32Array(n.count))}t.prototype.mergeOption.apply(this,arguments)},e.prototype.appendData=function(t){var e=this._processFlatCoordsArray(t.data);e.flatCoords&&(this._flatCoords?(this._flatCoords=gt(this._flatCoords,e.flatCoords),this._flatCoordsOffset=gt(this._flatCoordsOffset,e.flatCoordsOffset)):(this._flatCoords=e.flatCoords,this._flatCoordsOffset=e.flatCoordsOffset),t.data=new Float32Array(e.count)),this.getRawData().appendData(t.data)},e.prototype._getCoordsFromItemModel=function(t){var e=this.getData().getItemModel(t),n=e.option instanceof Array?e.option:e.getShallow("coords");return n},e.prototype.getLineCoordsCount=function(t){return this._flatCoordsOffset?this._flatCoordsOffset[2*t+1]:this._getCoordsFromItemModel(t).length},e.prototype.getLineCoords=function(t,e){if(this._flatCoordsOffset){for(var n=this._flatCoordsOffset[2*t],i=this._flatCoordsOffset[2*t+1],r=0;r<i;r++)e[r]=e[r]||[],e[r][0]=this._flatCoords[n+2*r],e[r][1]=this._flatCoords[n+2*r+1];return i}var o=this._getCoordsFromItemModel(t);for(r=0;r<o.length;r++)e[r]=e[r]||[],e[r][0]=o[r][0],e[r][1]=o[r][1];return o.length},e.prototype._processFlatCoordsArray=function(t){var e=0;if(this._flatCoords&&(e=this._flatCoords.length),j(t[0])){for(var n=t.length,i=new CP(n),r=new DP(n),o=0,a=0,s=0,l=0;l<n;){s++;var u=t[l++];i[a++]=o+e,i[a++]=u;for(var h=0;h<u;h++){var c=t[l++],p=t[l++];r[o++]=c,r[o++]=p}}return{flatCoordsOffset:new Uint32Array(i.buffer,0,a),flatCoords:r,count:s}}return{flatCoordsOffset:null,flatCoords:null,count:t.length}},e.prototype.getInitialData=function(t,e){var n=new qm(["value"],this);return n.hasItemOption=!1,n.initData(t.data,[],(function(t,e,i,r){if(t instanceof Array)return NaN;n.hasItemOption=!0;var o=t.value;return null!=o?o instanceof Array?o[r]:o:void 0})),n},e.prototype.formatTooltip=function(t,e,n){var i=this.getData().getItemModel(t),r=i.get("name");if(r)return r;var o=i.get("fromName"),a=i.get("toName"),s=[];return null!=o&&s.push(o),null!=a&&s.push(a),Xf("nameValue",{name:s.join(" > ")})},e.prototype.preventIncremental=function(){return!!this.get(["effect","show"])},e.prototype.getProgressive=function(){var t=this.option.progressive;return null==t?this.option.large?1e4:this.get("progressive"):t},e.prototype.getProgressiveThreshold=function(){var t=this.option.progressiveThreshold;return null==t?this.option.large?2e4:this.get("progressiveThreshold"):t},e.prototype.getZLevelKey=function(){var t=this.getModel("effect"),e=t.get("trailLength");return this.getData().count()>this.getProgressiveThreshold()?this.id:t.get("show")&&e>0?e+"":""},e.type="series.lines",e.dependencies=["grid","polar","geo","calendar"],e.defaultOption={coordinateSystem:"geo",z:2,legendHoverLink:!0,xAxisIndex:0,yAxisIndex:0,symbol:["none","none"],symbolSize:[10,10],geoIndex:0,effect:{show:!1,period:4,constantSpeed:0,symbol:"circle",symbolSize:3,loop:!0,trailLength:.2},large:!1,largeThreshold:2e3,polyline:!1,clip:!0,label:{show:!1,position:"end"},lineStyle:{opacity:.5}},e}(sg);function LP(t){return t instanceof Array||(t=[t,t]),t}var PP={seriesType:"lines",reset:function(t){var e=LP(t.get("symbol")),n=LP(t.get("symbolSize")),i=t.getData();return i.setVisual("fromSymbol",e&&e[0]),i.setVisual("toSymbol",e&&e[1]),i.setVisual("fromSymbolSize",n&&n[0]),i.setVisual("toSymbolSize",n&&n[1]),{dataEach:i.hasItemOption?function(t,e){var n=t.getItemModel(e),i=LP(n.getShallow("symbol",!0)),r=LP(n.getShallow("symbolSize",!0));i[0]&&t.setItemVisual(e,"fromSymbol",i[0]),i[1]&&t.setItemVisual(e,"toSymbol",i[1]),r[0]&&t.setItemVisual(e,"fromSymbolSize",r[0]),r[1]&&t.setItemVisual(e,"toSymbolSize",r[1])}:null}}};var OP=function(){function t(){this.blurSize=30,this.pointSize=20,this.maxOpacity=1,this.minOpacity=0,this._gradientPixels={inRange:null,outOfRange:null};var t=h.createCanvas();this.canvas=t}return t.prototype.update=function(t,e,n,i,r,o){var a=this._getBrush(),s=this._getGradient(r,"inRange"),l=this._getGradient(r,"outOfRange"),u=this.pointSize+this.blurSize,h=this.canvas,c=h.getContext("2d"),p=t.length;h.width=e,h.height=n;for(var d=0;d<p;++d){var f=t[d],g=f[0],y=f[1],v=i(f[2]);c.globalAlpha=v,c.drawImage(a,g-u,y-u)}if(!h.width||!h.height)return h;for(var m=c.getImageData(0,0,h.width,h.height),x=m.data,_=0,b=x.length,w=this.minOpacity,S=this.maxOpacity-w;_<b;){v=x[_+3]/256;var M=4*Math.floor(255*v);if(v>0){var I=o(v)?s:l;v>0&&(v=v*S+w),x[_++]=I[M],x[_++]=I[M+1],x[_++]=I[M+2],x[_++]=I[M+3]*v*256}else _+=4}return c.putImageData(m,0,0),h},t.prototype._getBrush=function(){var t=this._brushCanvas||(this._brushCanvas=h.createCanvas()),e=this.pointSize+this.blurSize,n=2*e;t.width=n,t.height=n;var i=t.getContext("2d");return i.clearRect(0,0,n,n),i.shadowOffsetX=n,i.shadowBlur=this.blurSize,i.shadowColor="#000",i.beginPath(),i.arc(-e,e,this.pointSize,0,2*Math.PI,!0),i.closePath(),i.fill(),t},t.prototype._getGradient=function(t,e){for(var n=this._gradientPixels,i=n[e]||(n[e]=new Uint8ClampedArray(1024)),r=[0,0,0,0],o=0,a=0;a<256;a++)t[e](a/255,!0,r),i[o++]=r[0],i[o++]=r[1],i[o++]=r[2],i[o++]=r[3];return i},t}();function RP(t){var e=t.dimensions;return"lng"===e[0]&&"lat"===e[1]}var NP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i;e.eachComponent("visualMap",(function(e){e.eachTargetSeries((function(n){n===t&&(i=e)}))})),this._progressiveEls=null,this.group.removeAll();var r=t.coordinateSystem;"cartesian2d"===r.type||"calendar"===r.type?this._renderOnCartesianAndCalendar(t,n,0,t.getData().count()):RP(r)&&this._renderOnGeo(r,t,i,n)},e.prototype.incrementalPrepareRender=function(t,e,n){this.group.removeAll()},e.prototype.incrementalRender=function(t,e,n,i){var r=e.coordinateSystem;r&&(RP(r)?this.render(e,n,i):(this._progressiveEls=[],this._renderOnCartesianAndCalendar(e,i,t.start,t.end,!0)))},e.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},e.prototype._renderOnCartesianAndCalendar=function(t,e,n,i,r){var o,a,s,l,u=t.coordinateSystem,h=uS(u,"cartesian2d");if(h){var c=u.getAxis("x"),p=u.getAxis("y");0,o=c.getBandWidth()+.5,a=p.getBandWidth()+.5,s=c.scale.getExtent(),l=p.scale.getExtent()}for(var d=this.group,f=t.getData(),g=t.getModel(["emphasis","itemStyle"]).getItemStyle(),y=t.getModel(["blur","itemStyle"]).getItemStyle(),v=t.getModel(["select","itemStyle"]).getItemStyle(),m=t.get(["itemStyle","borderRadius"]),x=Yh(t),_=t.getModel("emphasis"),b=_.get("focus"),w=_.get("blurScope"),S=_.get("disabled"),M=h?[f.mapDimension("x"),f.mapDimension("y"),f.mapDimension("value")]:[f.mapDimension("time"),f.mapDimension("value")],I=n;I<i;I++){var T=void 0,C=f.getItemVisual(I,"style");if(h){var D=f.get(M[0],I),A=f.get(M[1],I);if(isNaN(f.get(M[2],I))||D<s[0]||D>s[1]||A<l[0]||A>l[1])continue;var k=u.dataToPoint([D,A]);T=new Cs({shape:{x:k[0]-o/2,y:k[1]-a/2,width:o,height:a},style:C})}else{if(isNaN(f.get(M[1],I)))continue;T=new Cs({z2:1,shape:u.dataToRect([f.get(M[0],I)]).contentShape,style:C})}if(f.hasItemOption){var L=f.getItemModel(I),P=L.getModel("emphasis");g=P.getModel("itemStyle").getItemStyle(),y=L.getModel(["blur","itemStyle"]).getItemStyle(),v=L.getModel(["select","itemStyle"]).getItemStyle(),m=L.get(["itemStyle","borderRadius"]),b=P.get("focus"),w=P.get("blurScope"),S=P.get("disabled"),x=Yh(L)}T.shape.r=m;var O=t.getRawValue(I),R="-";O&&null!=O[2]&&(R=O[2]+""),Hh(T,x,{labelFetcher:t,labelDataIndex:I,defaultOpacity:C.opacity,defaultText:R}),T.ensureState("emphasis").style=g,T.ensureState("blur").style=y,T.ensureState("select").style=v,Rl(T,b,w,S),T.incremental=r,r&&(T.states.emphasis.hoverLayer=!0),d.add(T),f.setItemGraphicEl(I,T),this._progressiveEls&&this._progressiveEls.push(T)}},e.prototype._renderOnGeo=function(t,e,n,i){var r=n.targetVisuals.inRange,o=n.targetVisuals.outOfRange,a=e.getData(),s=this._hmLayer||this._hmLayer||new OP;s.blurSize=e.get("blurSize"),s.pointSize=e.get("pointSize"),s.minOpacity=e.get("minOpacity"),s.maxOpacity=e.get("maxOpacity");var l=t.getViewRect().clone(),u=t.getRoamTransform();l.applyTransform(u);var h=Math.max(l.x,0),c=Math.max(l.y,0),p=Math.min(l.width+l.x,i.getWidth()),d=Math.min(l.height+l.y,i.getHeight()),f=p-h,g=d-c,y=[a.mapDimension("lng"),a.mapDimension("lat"),a.mapDimension("value")],v=a.mapArray(y,(function(e,n,i){var r=t.dataToPoint([e,n]);return r[0]-=h,r[1]-=c,r.push(i),r})),m=n.getExtent(),x="visualMap.continuous"===n.type?function(t,e){var n=t[1]-t[0];return e=[(e[0]-t[0])/n,(e[1]-t[0])/n],function(t){return t>=e[0]&&t<=e[1]}}(m,n.option.range):function(t,e,n){var i=t[1]-t[0],r=(e=z(e,(function(e){return{interval:[(e.interval[0]-t[0])/i,(e.interval[1]-t[0])/i]}}))).length,o=0;return function(t){var i;for(i=o;i<r;i++)if((a=e[i].interval)[0]<=t&&t<=a[1]){o=i;break}if(i===r)for(i=o-1;i>=0;i--){var a;if((a=e[i].interval)[0]<=t&&t<=a[1]){o=i;break}}return i>=0&&i<r&&n[i]}}(m,n.getPieceList(),n.option.selected);s.update(v,f,g,r.color.getNormalizer(),{inRange:r.color.getColorMapper(),outOfRange:o.color.getColorMapper()},x);var _=new _s({style:{width:f,height:g,x:h,y:c,image:s.canvas},silent:!0});this.group.add(_)},e.type="heatmap",e}(xg),EP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.getInitialData=function(t,e){return rx(null,this,{generateCoord:"value"})},e.prototype.preventIncremental=function(){var t=hd.get(this.get("coordinateSystem"));if(t&&t.dimensions)return"lng"===t.dimensions[0]&&"lat"===t.dimensions[1]},e.type="series.heatmap",e.dependencies=["grid","geo","calendar"],e.defaultOption={coordinateSystem:"cartesian2d",z:2,geoIndex:0,blurSize:30,pointSize:20,maxOpacity:1,minOpacity:0,select:{itemStyle:{borderColor:"#212121"}}},e}(sg);var zP=["itemStyle","borderWidth"],VP=[{xy:"x",wh:"width",index:0,posDesc:["left","right"]},{xy:"y",wh:"height",index:1,posDesc:["top","bottom"]}],BP=new hu,FP=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=this.group,r=t.getData(),o=this._data,a=t.coordinateSystem,s=a.getBaseAxis().isHorizontal(),l=a.master.getRect(),u={ecSize:{width:n.getWidth(),height:n.getHeight()},seriesModel:t,coordSys:a,coordSysExtent:[[l.x,l.x+l.width],[l.y,l.y+l.height]],isHorizontal:s,valueDim:VP[+s],categoryDim:VP[1-+s]};return r.diff(o).add((function(t){if(r.hasValue(t)){var e=jP(r,t),n=GP(r,t,e,u),o=$P(r,u,n);r.setItemGraphicEl(t,o),i.add(o),nO(o,u,n)}})).update((function(t,e){var n=o.getItemGraphicEl(e);if(r.hasValue(t)){var a=jP(r,t),s=GP(r,t,a,u),l=QP(r,s);n&&l!==n.__pictorialShapeStr&&(i.remove(n),r.setItemGraphicEl(t,null),n=null),n?function(t,e,n){var i=n.animationModel,r=n.dataIndex;rh(t.__pictorialBundle,{x:n.bundlePosition[0],y:n.bundlePosition[1]},i,r),n.symbolRepeat?YP(t,e,n,!0):UP(t,e,n,!0);XP(t,n,!0),ZP(t,e,n,!0)}(n,u,s):n=$P(r,u,s,!0),r.setItemGraphicEl(t,n),n.__pictorialSymbolMeta=s,i.add(n),nO(n,u,s)}else i.remove(n)})).remove((function(t){var e=o.getItemGraphicEl(t);e&&JP(o,t,e.__pictorialSymbolMeta.animationModel,e)})).execute(),this._data=r,this.group},e.prototype.remove=function(t,e){var n=this.group,i=this._data;t.get("animation")?i&&i.eachItemGraphicEl((function(e){JP(i,Hs(e).dataIndex,t,e)})):n.removeAll()},e.type="pictorialBar",e}(xg);function GP(t,e,n,i){var r=t.getItemLayout(e),o=n.get("symbolRepeat"),a=n.get("symbolClip"),s=n.get("symbolPosition")||"start",l=(n.get("symbolRotate")||0)*Math.PI/180||0,u=n.get("symbolPatternSize")||2,h=n.isAnimationEnabled(),c={dataIndex:e,layout:r,itemModel:n,symbolType:t.getItemVisual(e,"symbol")||"circle",style:t.getItemVisual(e,"style"),symbolClip:a,symbolRepeat:o,symbolRepeatDirection:n.get("symbolRepeatDirection"),symbolPatternSize:u,rotation:l,animationModel:h?n:null,hoverScale:h&&n.get(["emphasis","scale"]),z2:n.getShallow("z",!0)||0};!function(t,e,n,i,r){var o,a=i.valueDim,s=t.get("symbolBoundingData"),l=i.coordSys.getOtherAxis(i.coordSys.getBaseAxis()),u=l.toGlobalCoord(l.dataToCoord(0)),h=1-+(n[a.wh]<=0);if(Y(s)){var c=[WP(l,s[0])-u,WP(l,s[1])-u];c[1]<c[0]&&c.reverse(),o=c[h]}else o=null!=s?WP(l,s)-u:e?i.coordSysExtent[a.index][h]-u:n[a.wh];r.boundingLength=o,e&&(r.repeatCutLength=n[a.wh]);r.pxSign=o>0?1:-1}(n,o,r,i,c),function(t,e,n,i,r,o,a,s,l,u){var h,c=l.valueDim,p=l.categoryDim,d=Math.abs(n[p.wh]),f=t.getItemVisual(e,"symbolSize");h=Y(f)?f.slice():null==f?["100%","100%"]:[f,f];h[p.index]=Er(h[p.index],d),h[c.index]=Er(h[c.index],i?d:Math.abs(o)),u.symbolSize=h,(u.symbolScale=[h[0]/s,h[1]/s])[c.index]*=(l.isHorizontal?-1:1)*a}(t,e,r,o,0,c.boundingLength,c.pxSign,u,i,c),function(t,e,n,i,r){var o=t.get(zP)||0;o&&(BP.attr({scaleX:e[0],scaleY:e[1],rotation:n}),BP.updateTransform(),o/=BP.getLineScale(),o*=e[i.valueDim.index]);r.valueLineWidth=o||0}(n,c.symbolScale,l,i,c);var p=c.symbolSize,d=Oy(n.get("symbolOffset"),p);return function(t,e,n,i,r,o,a,s,l,u,h,c){var p=h.categoryDim,d=h.valueDim,f=c.pxSign,g=Math.max(e[d.index]+s,0),y=g;if(i){var v=Math.abs(l),m=it(t.get("symbolMargin"),"15%")+"",x=!1;m.lastIndexOf("!")===m.length-1&&(x=!0,m=m.slice(0,m.length-1));var _=Er(m,e[d.index]),b=Math.max(g+2*_,0),w=x?0:2*_,S=eo(i),M=S?i:iO((v+w)/b);b=g+2*(_=(v-M*g)/2/(x?M:Math.max(M-1,1))),w=x?0:2*_,S||"fixed"===i||(M=u?iO((Math.abs(u)+w)/b):0),y=M*b-w,c.repeatTimes=M,c.symbolMargin=_}var I=f*(y/2),T=c.pathPosition=[];T[p.index]=n[p.wh]/2,T[d.index]="start"===a?I:"end"===a?l-I:l/2,o&&(T[0]+=o[0],T[1]+=o[1]);var C=c.bundlePosition=[];C[p.index]=n[p.xy],C[d.index]=n[d.xy];var D=c.barRectShape=A({},n);D[d.wh]=f*Math.max(Math.abs(n[d.wh]),Math.abs(T[d.index]+I)),D[p.wh]=n[p.wh];var k=c.clipShape={};k[p.xy]=-n[p.xy],k[p.wh]=h.ecSize[p.wh],k[d.xy]=0,k[d.wh]=n[d.wh]}(n,p,r,o,0,d,s,c.valueLineWidth,c.boundingLength,c.repeatCutLength,i,c),c}function WP(t,e){return t.toGlobalCoord(t.dataToCoord(t.scale.parse(e)))}function HP(t){var e=t.symbolPatternSize,n=Ly(t.symbolType,-e/2,-e/2,e,e);return n.attr({culling:!0}),"image"!==n.type&&n.setStyle({strokeNoScale:!0}),n}function YP(t,e,n,i){var r=t.__pictorialBundle,o=n.symbolSize,a=n.valueLineWidth,s=n.pathPosition,l=e.valueDim,u=n.repeatTimes||0,h=0,c=o[e.valueDim.index]+a+2*n.symbolMargin;for(tO(t,(function(t){t.__pictorialAnimationIndex=h,t.__pictorialRepeatTimes=u,h<u?eO(t,null,f(h),n,i):eO(t,null,{scaleX:0,scaleY:0},n,i,(function(){r.remove(t)})),h++}));h<u;h++){var p=HP(n);p.__pictorialAnimationIndex=h,p.__pictorialRepeatTimes=u,r.add(p);var d=f(h);eO(p,{x:d.x,y:d.y,scaleX:0,scaleY:0},{scaleX:d.scaleX,scaleY:d.scaleY,rotation:d.rotation},n,i)}function f(t){var e=s.slice(),i=n.pxSign,r=t;return("start"===n.symbolRepeatDirection?i>0:i<0)&&(r=u-1-t),e[l.index]=c*(r-u/2+.5)+s[l.index],{x:e[0],y:e[1],scaleX:n.symbolScale[0],scaleY:n.symbolScale[1],rotation:n.rotation}}}function UP(t,e,n,i){var r=t.__pictorialBundle,o=t.__pictorialMainPath;o?eO(o,null,{x:n.pathPosition[0],y:n.pathPosition[1],scaleX:n.symbolScale[0],scaleY:n.symbolScale[1],rotation:n.rotation},n,i):(o=t.__pictorialMainPath=HP(n),r.add(o),eO(o,{x:n.pathPosition[0],y:n.pathPosition[1],scaleX:0,scaleY:0,rotation:n.rotation},{scaleX:n.symbolScale[0],scaleY:n.symbolScale[1]},n,i))}function XP(t,e,n){var i=A({},e.barRectShape),r=t.__pictorialBarRect;r?eO(r,null,{shape:i},e,n):((r=t.__pictorialBarRect=new Cs({z2:2,shape:i,silent:!0,style:{stroke:"transparent",fill:"transparent",lineWidth:0}})).disableMorphing=!0,t.add(r))}function ZP(t,e,n,i){if(n.symbolClip){var r=t.__pictorialClipPath,o=A({},n.clipShape),a=e.valueDim,s=n.animationModel,l=n.dataIndex;if(r)rh(r,{shape:o},s,l);else{o[a.wh]=0,r=new Cs({shape:o}),t.__pictorialBundle.setClipPath(r),t.__pictorialClipPath=r;var u={};u[a.wh]=n.clipShape[a.wh],Bh[i?"updateProps":"initProps"](r,{shape:u},s,l)}}}function jP(t,e){var n=t.getItemModel(e);return n.getAnimationDelayParams=qP,n.isAnimationEnabled=KP,n}function qP(t){return{index:t.__pictorialAnimationIndex,count:t.__pictorialRepeatTimes}}function KP(){return this.parentModel.isAnimationEnabled()&&!!this.getShallow("animation")}function $P(t,e,n,i){var r=new Cr,o=new Cr;return r.add(o),r.__pictorialBundle=o,o.x=n.bundlePosition[0],o.y=n.bundlePosition[1],n.symbolRepeat?YP(r,e,n):UP(r,0,n),XP(r,n,i),ZP(r,e,n,i),r.__pictorialShapeStr=QP(t,n),r.__pictorialSymbolMeta=n,r}function JP(t,e,n,i){var r=i.__pictorialBarRect;r&&r.removeTextContent();var o=[];tO(i,(function(t){o.push(t)})),i.__pictorialMainPath&&o.push(i.__pictorialMainPath),i.__pictorialClipPath&&(n=null),E(o,(function(t){sh(t,{scaleX:0,scaleY:0},n,e,(function(){i.parent&&i.parent.remove(i)}))})),t.setItemGraphicEl(e,null)}function QP(t,e){return[t.getItemVisual(e.dataIndex,"symbol")||"none",!!e.symbolRepeat,!!e.symbolClip].join(":")}function tO(t,e,n){E(t.__pictorialBundle.children(),(function(i){i!==t.__pictorialBarRect&&e.call(n,i)}))}function eO(t,e,n,i,r,o){e&&t.attr(e),i.symbolClip&&!r?n&&t.attr(n):n&&Bh[r?"updateProps":"initProps"](t,n,i.animationModel,i.dataIndex,o)}function nO(t,e,n){var i=n.dataIndex,r=n.itemModel,o=r.getModel("emphasis"),a=o.getModel("itemStyle").getItemStyle(),s=r.getModel(["blur","itemStyle"]).getItemStyle(),l=r.getModel(["select","itemStyle"]).getItemStyle(),u=r.getShallow("cursor"),h=o.get("focus"),c=o.get("blurScope"),p=o.get("scale");tO(t,(function(t){if(t instanceof _s){var e=t.style;t.useStyle(A({image:e.image,x:e.x,y:e.y,width:e.width,height:e.height},n.style))}else t.useStyle(n.style);var i=t.ensureState("emphasis");i.style=a,p&&(i.scaleX=1.1*t.scaleX,i.scaleY=1.1*t.scaleY),t.ensureState("blur").style=s,t.ensureState("select").style=l,u&&(t.cursor=u),t.z2=n.z2}));var d=e.valueDim.posDesc[+(n.boundingLength>0)];Hh(t.__pictorialBarRect,Yh(r),{labelFetcher:e.seriesModel,labelDataIndex:i,defaultText:Ww(e.seriesModel.getData(),i),inheritColor:n.style.fill,defaultOpacity:n.style.opacity,defaultOutsidePosition:d}),Rl(t,h,c,o.get("disabled"))}function iO(t){var e=Math.round(t);return Math.abs(t-e)<1e-4?e:Math.ceil(t)}var rO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.hasSymbolVisual=!0,n.defaultSymbol="roundRect",n}return n(e,t),e.prototype.getInitialData=function(e){return e.stack=null,t.prototype.getInitialData.apply(this,arguments)},e.type="series.pictorialBar",e.dependencies=["grid"],e.defaultOption=yc(IS.defaultOption,{symbol:"circle",symbolSize:null,symbolRotate:null,symbolPosition:null,symbolOffset:null,symbolMargin:null,symbolRepeat:!1,symbolRepeatDirection:"end",symbolClip:!1,symbolBoundingData:null,symbolPatternSize:400,barGap:"-100%",progressive:0,emphasis:{scale:!1},select:{itemStyle:{borderColor:"#212121"}}}),e}(IS);var oO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._layers=[],n}return n(e,t),e.prototype.render=function(t,e,n){var i=t.getData(),r=this,o=this.group,a=t.getLayerSeries(),s=i.getLayout("layoutInfo"),l=s.rect,u=s.boundaryGap;function h(t){return t.name}o.x=0,o.y=l.y+u[0];var c=new Im(this._layersSeries||[],a,h,h),p=[];function d(e,n,s){var l=r._layers;if("remove"!==e){for(var u,h,c=[],d=[],f=a[n].indices,g=0;g<f.length;g++){var y=i.getItemLayout(f[g]),v=y.x,m=y.y0,x=y.y;c.push(v,m),d.push(v,m+x),u=i.getItemVisual(f[g],"style")}var _=i.getItemLayout(f[0]),b=t.getModel("label").get("margin"),w=t.getModel("emphasis");if("add"===e){var S=p[n]=new Cr;h=new oS({shape:{points:c,stackedOnPoints:d,smooth:.4,stackedOnSmooth:.4,smoothConstraint:!1},z2:0}),S.add(h),o.add(S),t.isAnimationEnabled()&&h.setClipPath(function(t,e,n){var i=new Cs({shape:{x:t.x-10,y:t.y-10,width:0,height:t.height+20}});return oh(i,{shape:{x:t.x-50,width:t.width+100,height:t.height+20}},e,n),i}(h.getBoundingRect(),t,(function(){h.removeClipPath()})))}else{S=l[s];h=S.childAt(0),o.add(S),p[n]=S,rh(h,{shape:{points:c,stackedOnPoints:d}},t),hh(h)}Hh(h,Yh(t),{labelDataIndex:f[g-1],defaultText:i.getName(f[g-1]),inheritColor:u.fill},{normal:{verticalAlign:"middle"}}),h.setTextConfig({position:null,local:!0});var M=h.getTextContent();M&&(M.x=_.x-b,M.y=_.y0+_.y/2),h.useStyle(u),i.setItemGraphicEl(n,h),Vl(h,t),Rl(h,w.get("focus"),w.get("blurScope"),w.get("disabled"))}else o.remove(l[n])}c.add(W(d,this,"add")).update(W(d,this,"update")).remove(W(d,this,"remove")).execute(),this._layersSeries=a,this._layers=p},e.type="themeRiver",e}(xg);var aO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(e){t.prototype.init.apply(this,arguments),this.legendVisualProvider=new hM(W(this.getData,this),W(this.getRawData,this))},e.prototype.fixData=function(t){var e=t.length,n={},i=Lo(t,(function(t){return n.hasOwnProperty(t[0]+"")||(n[t[0]+""]=-1),t[2]})),r=[];i.buckets.each((function(t,e){r.push({name:e,dataList:t})}));for(var o=r.length,a=0;a<o;++a){for(var s=r[a].name,l=0;l<r[a].dataList.length;++l){var u=r[a].dataList[l][0]+"";n[u]=a}for(var u in n)n.hasOwnProperty(u)&&n[u]!==a&&(n[u]=a,t[e]=[u,0,s],e++)}return t},e.prototype.getInitialData=function(t,e){for(var n=this.getReferringComponents("singleAxis",Co).models[0].get("type"),i=B(t.data,(function(t){return void 0!==t[2]})),r=this.fixData(i||[]),o=[],a=this.nameMap=ft(),s=0,l=0;l<r.length;++l)o.push(r[l][2]),a.get(r[l][2])||(a.set(r[l][2],s),s++);var u=Km(r,{coordDimensions:["single"],dimensionsDefine:[{name:"time",type:Dm(n)},{name:"value",type:"float"},{name:"name",type:"ordinal"}],encodeDefine:{single:0,value:1,itemName:2}}).dimensions,h=new qm(u,this);return h.initData(r),h},e.prototype.getLayerSeries=function(){for(var t=this.getData(),e=t.count(),n=[],i=0;i<e;++i)n[i]=i;var r=t.mapDimension("single"),o=Lo(n,(function(e){return t.get("name",e)})),a=[];return o.buckets.each((function(e,n){e.sort((function(e,n){return t.get(r,e)-t.get(r,n)})),a.push({name:n,indices:e})})),a},e.prototype.getAxisTooltipData=function(t,e,n){Y(t)||(t=t?[t]:[]);for(var i,r=this.getData(),o=this.getLayerSeries(),a=[],s=o.length,l=0;l<s;++l){for(var u=Number.MAX_VALUE,h=-1,c=o[l].indices.length,p=0;p<c;++p){var d=r.get(t[0],o[l].indices[p]),f=Math.abs(d-e);f<=u&&(i=d,u=f,h=o[l].indices[p])}a.push(h)}return{dataIndices:a,nestestValue:i}},e.prototype.formatTooltip=function(t,e,n){var i=this.getData();return Xf("nameValue",{name:i.getName(t),value:i.get(i.mapDimension("value"),t)})},e.type="series.themeRiver",e.dependencies=["singleAxis"],e.defaultOption={z:2,colorBy:"data",coordinateSystem:"singleAxis",boundaryGap:["10%","10%"],singleAxisIndex:0,animationEasing:"linear",label:{margin:4,show:!0,position:"left",fontSize:11},emphasis:{label:{show:!0}}},e}(sg);function sO(t,e){t.eachSeriesByType("themeRiver",(function(t){var e=t.getData(),n=t.coordinateSystem,i={},r=n.getRect();i.rect=r;var o=t.get("boundaryGap"),a=n.getAxis();(i.boundaryGap=o,"horizontal"===a.orient)?(o[0]=Er(o[0],r.height),o[1]=Er(o[1],r.height),lO(e,t,r.height-o[0]-o[1])):(o[0]=Er(o[0],r.width),o[1]=Er(o[1],r.width),lO(e,t,r.width-o[0]-o[1]));e.setLayout("layoutInfo",i)}))}function lO(t,e,n){if(t.count())for(var i,r=e.coordinateSystem,o=e.getLayerSeries(),a=t.mapDimension("single"),s=t.mapDimension("value"),l=z(o,(function(e){return z(e.indices,(function(e){var n=r.dataToPoint(t.get(a,e));return n[1]=t.get(s,e),n}))})),u=function(t){for(var e=t.length,n=t[0].length,i=[],r=[],o=0,a=0;a<n;++a){for(var s=0,l=0;l<e;++l)s+=t[l][a][1];s>o&&(o=s),i.push(s)}for(var u=0;u<n;++u)r[u]=(o-i[u])/2;o=0;for(var h=0;h<n;++h){var c=i[h]+r[h];c>o&&(o=c)}return{y0:r,max:o}}(l),h=u.y0,c=n/u.max,p=o.length,d=o[0].indices.length,f=0;f<d;++f){i=h[f]*c,t.setItemLayout(o[0].indices[f],{layerIndex:0,x:l[0][f][0],y0:i,y:l[0][f][1]*c});for(var g=1;g<p;++g)i+=l[g-1][f][1]*c,t.setItemLayout(o[g].indices[f],{layerIndex:g,x:l[g][f][0],y0:i,y:l[g][f][1]*c})}}var uO=function(t){function e(e,n,i,r){var o=t.call(this)||this;o.z2=2,o.textConfig={inside:!0},Hs(o).seriesIndex=n.seriesIndex;var a=new ks({z2:4,silent:e.getModel().get(["label","silent"])});return o.setTextContent(a),o.updateData(!0,e,n,i,r),o}return n(e,t),e.prototype.updateData=function(t,e,n,i,r){this.node=e,e.piece=this,n=n||this._seriesModel,i=i||this._ecModel;var o=this;Hs(o).dataIndex=e.dataIndex;var a=e.getModel(),s=a.getModel("emphasis"),l=e.getLayout(),u=A({},l);u.label=null;var h=e.getVisual("style");h.lineJoin="bevel";var c=e.getVisual("decal");c&&(h.decal=rv(c,r));var p=aM(a.getModel("itemStyle"),u,!0);A(u,p),E(qs,(function(t){var e=o.ensureState(t),n=a.getModel([t,"itemStyle"]);e.style=n.getItemStyle();var i=aM(n,u);i&&(e.shape=i)})),t?(o.setShape(u),o.shape.r=l.r0,rh(o,{shape:{r:l.r}},n,e.dataIndex)):(rh(o,{shape:u},n),hh(o)),o.useStyle(h),this._updateLabel(n);var d=a.getShallow("cursor");d&&o.attr("cursor",d),this._seriesModel=n||this._seriesModel,this._ecModel=i||this._ecModel;var f=s.get("focus");Rl(this,"ancestor"===f?e.getAncestorsIndices():"descendant"===f?e.getDescendantIndices():f,s.get("blurScope"),s.get("disabled"))},e.prototype._updateLabel=function(t){var e=this,n=this.node.getModel(),i=n.getModel("label"),r=this.node.getLayout(),o=r.endAngle-r.startAngle,a=(r.startAngle+r.endAngle)/2,s=Math.cos(a),l=Math.sin(a),u=this,h=u.getTextContent(),c=this.node.dataIndex,p=i.get("minAngle")/180*Math.PI,d=i.get("show")&&!(null!=p&&Math.abs(o)<p);function f(t,e){var n=t.get(e);return null==n?i.get(e):n}h.ignore=!d,E(Ks,(function(i){var p="normal"===i?n.getModel("label"):n.getModel([i,"label"]),d="normal"===i,g=d?h:h.ensureState(i),y=t.getFormattedLabel(c,i);d&&(y=y||e.node.name),g.style=Uh(p,{},null,"normal"!==i,!0),y&&(g.style.text=y);var v=p.get("show");null==v||d||(g.ignore=!v);var m,x=f(p,"position"),_=d?u:u.states[i],b=_.style.fill;_.textConfig={outsideFill:"inherit"===p.get("color")?b:null,inside:"outside"!==x};var w=f(p,"distance")||0,S=f(p,"align");"outside"===x?(m=r.r+w,S=a>Math.PI/2?"right":"left"):S&&"center"!==S?"left"===S?(m=r.r0+w,a>Math.PI/2&&(S="right")):"right"===S&&(m=r.r-w,a>Math.PI/2&&(S="left")):(m=o===2*Math.PI&&0===r.r0?0:(r.r+r.r0)/2,S="center"),g.style.align=S,g.style.verticalAlign=f(p,"verticalAlign")||"middle",g.x=m*s+r.cx,g.y=m*l+r.cy;var M=f(p,"rotate"),I=0;"radial"===M?(I=-a)<-Math.PI/2&&(I+=Math.PI):"tangential"===M?(I=Math.PI/2-a)>Math.PI/2?I-=Math.PI:I<-Math.PI/2&&(I+=Math.PI):j(M)&&(I=M*Math.PI/180),g.rotation=I})),h.dirtyStyle()},e}(Cu),hO="sunburstRootToNode",cO="sunburstHighlight";var pO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n,i){var r=this;this.seriesModel=t,this.api=n,this.ecModel=e;var o=t.getData(),a=o.tree.root,s=t.getViewRoot(),l=this.group,u=t.get("renderLabelForZeroData"),h=[];s.eachNode((function(t){h.push(t)}));var c=this._oldChildren||[];!function(i,r){if(0===i.length&&0===r.length)return;function s(t){return t.getId()}function h(s,h){!function(i,r){u||!i||i.getValue()||(i=null);if(i!==a&&r!==a)if(r&&r.piece)i?(r.piece.updateData(!1,i,t,e,n),o.setItemGraphicEl(i.dataIndex,r.piece)):function(t){if(!t)return;t.piece&&(l.remove(t.piece),t.piece=null)}(r);else if(i){var s=new uO(i,t,e,n);l.add(s),o.setItemGraphicEl(i.dataIndex,s)}}(null==s?null:i[s],null==h?null:r[h])}new Im(r,i,s,s).add(h).update(h).remove(H(h,null)).execute()}(h,c),function(i,o){o.depth>0?(r.virtualPiece?r.virtualPiece.updateData(!1,i,t,e,n):(r.virtualPiece=new uO(i,t,e,n),l.add(r.virtualPiece)),o.piece.off("click"),r.virtualPiece.on("click",(function(t){r._rootToNode(o.parentNode)}))):r.virtualPiece&&(l.remove(r.virtualPiece),r.virtualPiece=null)}(a,s),this._initEvents(),this._oldChildren=h},e.prototype._initEvents=function(){var t=this;this.group.off("click"),this.group.on("click",(function(e){var n=!1;t.seriesModel.getViewRoot().eachNode((function(i){if(!n&&i.piece&&i.piece===e.target){var r=i.getModel().get("nodeClick");if("rootToNode"===r)t._rootToNode(i);else if("link"===r){var o=i.getModel(),a=o.get("link");if(a)dp(a,o.get("target",!0)||"_blank")}n=!0}}))}))},e.prototype._rootToNode=function(t){t!==this.seriesModel.getViewRoot()&&this.api.dispatchAction({type:hO,from:this.uid,seriesId:this.seriesModel.id,targetNode:t})},e.prototype.containPoint=function(t,e){var n=e.getData().getItemLayout(0);if(n){var i=t[0]-n.cx,r=t[1]-n.cy,o=Math.sqrt(i*i+r*r);return o<=n.r&&o>=n.r0}},e.type="sunburst",e}(xg),dO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.ignoreStyleOnData=!0,n}return n(e,t),e.prototype.getInitialData=function(t,e){var n={name:t.name,children:t.data};fO(n);var i=this._levelModels=z(t.levels||[],(function(t){return new dc(t,this,e)}),this),r=AC.createTree(n,this,(function(t){t.wrapMethod("getItemModel",(function(t,e){var n=r.getNodeByDataIndex(e),o=i[n.depth];return o&&(t.parentModel=o),t}))}));return r.data},e.prototype.optionUpdated=function(){this.resetViewRoot()},e.prototype.getDataParams=function(e){var n=t.prototype.getDataParams.apply(this,arguments),i=this.getData().tree.getNodeByDataIndex(e);return n.treePathInfo=OC(i,this),n},e.prototype.getLevelModel=function(t){return this._levelModels&&this._levelModels[t.depth]},e.prototype.getViewRoot=function(){return this._viewRoot},e.prototype.resetViewRoot=function(t){t?this._viewRoot=t:t=this._viewRoot;var e=this.getRawData().tree.root;t&&(t===e||e.contains(t))||(this._viewRoot=e)},e.prototype.enableAriaDecal=function(){BC(this)},e.type="series.sunburst",e.defaultOption={z:2,center:["50%","50%"],radius:[0,"75%"],clockwise:!0,startAngle:90,minAngle:0,stillShowZeroSum:!0,nodeClick:"rootToNode",renderLabelForZeroData:!1,label:{rotate:"radial",show:!0,opacity:1,align:"center",position:"inside",distance:5,silent:!0},itemStyle:{borderWidth:1,borderColor:"white",borderType:"solid",shadowBlur:0,shadowColor:"rgba(0, 0, 0, 0.2)",shadowOffsetX:0,shadowOffsetY:0,opacity:1},emphasis:{focus:"descendant"},blur:{itemStyle:{opacity:.2},label:{opacity:.1}},animationType:"expansion",animationDuration:1e3,animationDurationUpdate:500,data:[],sort:"desc"},e}(sg);function fO(t){var e=0;E(t.children,(function(t){fO(t);var n=t.value;Y(n)&&(n=n[0]),e+=n}));var n=t.value;Y(n)&&(n=n[0]),(null==n||isNaN(n))&&(n=e),n<0&&(n=0),Y(t.value)?t.value[0]=n:t.value=n}var gO=Math.PI/180;function yO(t,e,n){e.eachSeriesByType(t,(function(t){var e=t.get("center"),i=t.get("radius");Y(i)||(i=[0,i]),Y(e)||(e=[e,e]);var r=n.getWidth(),o=n.getHeight(),a=Math.min(r,o),s=Er(e[0],r),l=Er(e[1],o),u=Er(i[0],a/2),h=Er(i[1],a/2),c=-t.get("startAngle")*gO,p=t.get("minAngle")*gO,d=t.getData().tree.root,f=t.getViewRoot(),g=f.depth,y=t.get("sort");null!=y&&vO(f,y);var v=0;E(f.children,(function(t){!isNaN(t.getValue())&&v++}));var m=f.getValue(),x=Math.PI/(m||v)*2,_=f.depth>0,b=f.height-(_?-1:1),w=(h-u)/(b||1),S=t.get("clockwise"),M=t.get("stillShowZeroSum"),I=S?1:-1,T=function(e,n){if(e){var i=n;if(e!==d){var r=e.getValue(),o=0===m&&M?x:r*x;o<p&&(o=p),i=n+I*o;var h=e.depth-g-(_?-1:1),c=u+w*h,f=u+w*(h+1),y=t.getLevelModel(e);if(y){var v=y.get("r0",!0),b=y.get("r",!0),C=y.get("radius",!0);null!=C&&(v=C[0],b=C[1]),null!=v&&(c=Er(v,a/2)),null!=b&&(f=Er(b,a/2))}e.setLayout({angle:o,startAngle:n,endAngle:i,clockwise:S,cx:s,cy:l,r0:c,r:f})}if(e.children&&e.children.length){var D=0;E(e.children,(function(t){D+=T(t,n+D)}))}return i-n}};if(_){var C=u,D=u+w,A=2*Math.PI;d.setLayout({angle:A,startAngle:c,endAngle:c+A,clockwise:S,cx:s,cy:l,r0:C,r:D})}T(f,c)}))}function vO(t,e){var n=t.children||[];t.children=function(t,e){if(U(e)){var n=z(t,(function(t,e){var n=t.getValue();return{params:{depth:t.depth,height:t.height,dataIndex:t.dataIndex,getValue:function(){return n}},index:e}}));return n.sort((function(t,n){return e(t.params,n.params)})),z(n,(function(e){return t[e.index]}))}var i="asc"===e;return t.sort((function(t,e){var n=(t.getValue()-e.getValue())*(i?1:-1);return 0===n?(t.dataIndex-e.dataIndex)*(i?-1:1):n}))}(n,e),n.length&&E(t.children,(function(t){vO(t,e)}))}function mO(t){var e={};t.eachSeriesByType("sunburst",(function(t){var n=t.getData(),i=n.tree;i.eachNode((function(r){var o=r.getModel().getModel("itemStyle").getItemStyle();o.fill||(o.fill=function(t,n,i){for(var r=t;r&&r.depth>1;)r=r.parentNode;var o=n.getColorFromPalette(r.name||r.dataIndex+"",e);return t.depth>1&&X(o)&&(o=Sn(o,(t.depth-1)/(i-1)*.5)),o}(r,t,i.root.height)),A(n.ensureUniqueItemVisual(r.dataIndex,"style"),o)}))}))}var xO={color:"fill",borderColor:"stroke"},_O={symbol:1,symbolSize:1,symbolKeepAspect:1,legendIcon:1,visualMeta:1,liftZ:1,decal:1},bO=So(),wO=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.optionUpdated=function(){this.currentZLevel=this.get("zlevel",!0),this.currentZ=this.get("z",!0)},e.prototype.getInitialData=function(t,e){return rx(null,this)},e.prototype.getDataParams=function(e,n,i){var r=t.prototype.getDataParams.call(this,e,n);return i&&(r.info=bO(i).info),r},e.type="series.custom",e.dependencies=["grid","polar","geo","singleAxis","calendar"],e.defaultOption={coordinateSystem:"cartesian2d",z:2,legendHoverLink:!0,clip:!1},e}(sg);function SO(t,e){return e=e||[0,0],z(["x","y"],(function(n,i){var r=this.getAxis(n),o=e[i],a=t[i]/2;return"category"===r.type?r.getBandWidth():Math.abs(r.dataToCoord(o-a)-r.dataToCoord(o+a))}),this)}function MO(t,e){return e=e||[0,0],z([0,1],(function(n){var i=e[n],r=t[n]/2,o=[],a=[];return o[n]=i-r,a[n]=i+r,o[1-n]=a[1-n]=e[1-n],Math.abs(this.dataToPoint(o)[n]-this.dataToPoint(a)[n])}),this)}function IO(t,e){var n=this.getAxis(),i=e instanceof Array?e[0]:e,r=(t instanceof Array?t[0]:t)/2;return"category"===n.type?n.getBandWidth():Math.abs(n.dataToCoord(i-r)-n.dataToCoord(i+r))}function TO(t,e){return e=e||[0,0],z(["Radius","Angle"],(function(n,i){var r=this["get"+n+"Axis"](),o=e[i],a=t[i]/2,s="category"===r.type?r.getBandWidth():Math.abs(r.dataToCoord(o-a)-r.dataToCoord(o+a));return"Angle"===n&&(s=s*Math.PI/180),s}),this)}function CO(t,e,n,i){return t&&(t.legacy||!1!==t.legacy&&!n&&!i&&"tspan"!==e&&("text"===e||mt(t,"text")))}function DO(t,e,n){var i,r,o,a=t;if("text"===e)o=a;else{o={},mt(a,"text")&&(o.text=a.text),mt(a,"rich")&&(o.rich=a.rich),mt(a,"textFill")&&(o.fill=a.textFill),mt(a,"textStroke")&&(o.stroke=a.textStroke),mt(a,"fontFamily")&&(o.fontFamily=a.fontFamily),mt(a,"fontSize")&&(o.fontSize=a.fontSize),mt(a,"fontStyle")&&(o.fontStyle=a.fontStyle),mt(a,"fontWeight")&&(o.fontWeight=a.fontWeight),r={type:"text",style:o,silent:!0},i={};var s=mt(a,"textPosition");n?i.position=s?a.textPosition:"inside":s&&(i.position=a.textPosition),mt(a,"textPosition")&&(i.position=a.textPosition),mt(a,"textOffset")&&(i.offset=a.textOffset),mt(a,"textRotation")&&(i.rotation=a.textRotation),mt(a,"textDistance")&&(i.distance=a.textDistance)}return AO(o,t),E(o.rich,(function(t){AO(t,t)})),{textConfig:i,textContent:r}}function AO(t,e){e&&(e.font=e.textFont||e.font,mt(e,"textStrokeWidth")&&(t.lineWidth=e.textStrokeWidth),mt(e,"textAlign")&&(t.align=e.textAlign),mt(e,"textVerticalAlign")&&(t.verticalAlign=e.textVerticalAlign),mt(e,"textLineHeight")&&(t.lineHeight=e.textLineHeight),mt(e,"textWidth")&&(t.width=e.textWidth),mt(e,"textHeight")&&(t.height=e.textHeight),mt(e,"textBackgroundColor")&&(t.backgroundColor=e.textBackgroundColor),mt(e,"textPadding")&&(t.padding=e.textPadding),mt(e,"textBorderColor")&&(t.borderColor=e.textBorderColor),mt(e,"textBorderWidth")&&(t.borderWidth=e.textBorderWidth),mt(e,"textBorderRadius")&&(t.borderRadius=e.textBorderRadius),mt(e,"textBoxShadowColor")&&(t.shadowColor=e.textBoxShadowColor),mt(e,"textBoxShadowBlur")&&(t.shadowBlur=e.textBoxShadowBlur),mt(e,"textBoxShadowOffsetX")&&(t.shadowOffsetX=e.textBoxShadowOffsetX),mt(e,"textBoxShadowOffsetY")&&(t.shadowOffsetY=e.textBoxShadowOffsetY))}function kO(t,e,n){var i=t;i.textPosition=i.textPosition||n.position||"inside",null!=n.offset&&(i.textOffset=n.offset),null!=n.rotation&&(i.textRotation=n.rotation),null!=n.distance&&(i.textDistance=n.distance);var r=i.textPosition.indexOf("inside")>=0,o=t.fill||"#000";LO(i,e);var a=null==i.textFill;return r?a&&(i.textFill=n.insideFill||"#fff",!i.textStroke&&n.insideStroke&&(i.textStroke=n.insideStroke),!i.textStroke&&(i.textStroke=o),null==i.textStrokeWidth&&(i.textStrokeWidth=2)):(a&&(i.textFill=t.fill||n.outsideFill||"#000"),!i.textStroke&&n.outsideStroke&&(i.textStroke=n.outsideStroke)),i.text=e.text,i.rich=e.rich,E(e.rich,(function(t){LO(t,t)})),i}function LO(t,e){e&&(mt(e,"fill")&&(t.textFill=e.fill),mt(e,"stroke")&&(t.textStroke=e.fill),mt(e,"lineWidth")&&(t.textStrokeWidth=e.lineWidth),mt(e,"font")&&(t.font=e.font),mt(e,"fontStyle")&&(t.fontStyle=e.fontStyle),mt(e,"fontWeight")&&(t.fontWeight=e.fontWeight),mt(e,"fontSize")&&(t.fontSize=e.fontSize),mt(e,"fontFamily")&&(t.fontFamily=e.fontFamily),mt(e,"align")&&(t.textAlign=e.align),mt(e,"verticalAlign")&&(t.textVerticalAlign=e.verticalAlign),mt(e,"lineHeight")&&(t.textLineHeight=e.lineHeight),mt(e,"width")&&(t.textWidth=e.width),mt(e,"height")&&(t.textHeight=e.height),mt(e,"backgroundColor")&&(t.textBackgroundColor=e.backgroundColor),mt(e,"padding")&&(t.textPadding=e.padding),mt(e,"borderColor")&&(t.textBorderColor=e.borderColor),mt(e,"borderWidth")&&(t.textBorderWidth=e.borderWidth),mt(e,"borderRadius")&&(t.textBorderRadius=e.borderRadius),mt(e,"shadowColor")&&(t.textBoxShadowColor=e.shadowColor),mt(e,"shadowBlur")&&(t.textBoxShadowBlur=e.shadowBlur),mt(e,"shadowOffsetX")&&(t.textBoxShadowOffsetX=e.shadowOffsetX),mt(e,"shadowOffsetY")&&(t.textBoxShadowOffsetY=e.shadowOffsetY),mt(e,"textShadowColor")&&(t.textShadowColor=e.textShadowColor),mt(e,"textShadowBlur")&&(t.textShadowBlur=e.textShadowBlur),mt(e,"textShadowOffsetX")&&(t.textShadowOffsetX=e.textShadowOffsetX),mt(e,"textShadowOffsetY")&&(t.textShadowOffsetY=e.textShadowOffsetY))}var PO={position:["x","y"],scale:["scaleX","scaleY"],origin:["originX","originY"]},OO=G(PO),RO=(V(Ki,(function(t,e){return t[e]=1,t}),{}),Ki.join(", "),["","style","shape","extra"]),NO=So();function EO(t,e,n,i,r){var o=t+"Animation",a=nh(t,i,r)||{},s=NO(e).userDuring;return a.duration>0&&(a.during=s?W(HO,{el:e,userDuring:s}):null,a.setToFinal=!0,a.scope=t),A(a,n[o]),a}function zO(t,e,n,i){var r=(i=i||{}).dataIndex,o=i.isInit,a=i.clearStyle,s=n.isAnimationEnabled(),l=NO(t),u=e.style;l.userDuring=e.during;var h={},c={};if(function(t,e,n){for(var i=0;i<OO.length;i++){var r=OO[i],o=PO[r],a=e[r];a&&(n[o[0]]=a[0],n[o[1]]=a[1])}for(i=0;i<Ki.length;i++){var s=Ki[i];null!=e[s]&&(n[s]=e[s])}}(0,e,c),UO("shape",e,c),UO("extra",e,c),!o&&s&&(function(t,e,n){for(var i=e.transition,r=FO(i)?Ki:ho(i||[]),o=0;o<r.length;o++){var a=r[o];if("style"!==a&&"shape"!==a&&"extra"!==a){var s=t[a];0,n[a]=s}}}(t,e,h),YO("shape",t,e,h),YO("extra",t,e,h),function(t,e,n,i){if(!n)return;var r,o=t.style;if(o){var a=n.transition,s=e.transition;if(a&&!FO(a)){var l=ho(a);!r&&(r=i.style={});for(var u=0;u<l.length;u++){var h=o[f=l[u]];r[f]=h}}else if(t.getAnimationStyleProps&&(FO(s)||FO(a)||P(s,"style")>=0)){var c=t.getAnimationStyleProps(),p=c?c.style:null;if(p){!r&&(r=i.style={});var d=G(n);for(u=0;u<d.length;u++){var f;if(p[f=d[u]]){h=o[f];r[f]=h}}}}}}(t,e,u,h)),c.style=u,function(t,e,n){var i=e.style;if(!t.isGroup&&i){if(n){t.useStyle({});for(var r=t.animators,o=0;o<r.length;o++){var a=r[o];"style"===a.targetName&&a.changeTarget(t.style)}}t.setStyle(i)}e&&(e.style=null,e&&t.attr(e),e.style=i)}(t,c,a),function(t,e){mt(e,"silent")&&(t.silent=e.silent),mt(e,"ignore")&&(t.ignore=e.ignore),t instanceof da&&mt(e,"invisible")&&(t.invisible=e.invisible);t instanceof gs&&mt(e,"autoBatch")&&(t.autoBatch=e.autoBatch)}(t,e),s)if(o){var p={};E(RO,(function(t){var n=t?e[t]:e;n&&n.enterFrom&&(t&&(p[t]=p[t]||{}),A(t?p[t]:p,n.enterFrom))}));var d=EO("enter",t,e,n,r);d.duration>0&&t.animateFrom(p,d)}else!function(t,e,n,i,r){if(r){var o=EO("update",t,e,i,n);o.duration>0&&t.animateFrom(r,o)}}(t,e,r||0,n,h);VO(t,e),u?t.dirty():t.markRedraw()}function VO(t,e){for(var n=NO(t).leaveToProps,i=0;i<RO.length;i++){var r=RO[i],o=r?e[r]:e;o&&o.leaveTo&&(n||(n=NO(t).leaveToProps={}),r&&(n[r]=n[r]||{}),A(r?n[r]:n,o.leaveTo))}}function BO(t,e,n,i){if(t){var r=t.parent,o=NO(t).leaveToProps;if(o){var a=EO("update",t,e,n,0);a.done=function(){r.remove(t),i&&i()},t.animateTo(o,a)}else r.remove(t),i&&i()}}function FO(t){return"all"===t}var GO={},WO={setTransform:function(t,e){return GO.el[t]=e,this},getTransform:function(t){return GO.el[t]},setShape:function(t,e){var n=GO.el;return(n.shape||(n.shape={}))[t]=e,n.dirtyShape&&n.dirtyShape(),this},getShape:function(t){var e=GO.el.shape;if(e)return e[t]},setStyle:function(t,e){var n=GO.el,i=n.style;return i&&(i[t]=e,n.dirtyStyle&&n.dirtyStyle()),this},getStyle:function(t){var e=GO.el.style;if(e)return e[t]},setExtra:function(t,e){return(GO.el.extra||(GO.el.extra={}))[t]=e,this},getExtra:function(t){var e=GO.el.extra;if(e)return e[t]}};function HO(){var t=this,e=t.el;if(e){var n=NO(e).userDuring,i=t.userDuring;n===i?(GO.el=e,i(WO)):t.el=t.userDuring=null}}function YO(t,e,n,i){var r=n[t];if(r){var o,a=e[t];if(a){var s=n.transition,l=r.transition;if(l)if(!o&&(o=i[t]={}),FO(l))A(o,a);else for(var u=ho(l),h=0;h<u.length;h++){var c=a[d=u[h]];o[d]=c}else if(FO(s)||P(s,t)>=0){!o&&(o=i[t]={});var p=G(a);for(h=0;h<p.length;h++){var d;c=a[d=p[h]];XO(r[d],c)&&(o[d]=c)}}}}}function UO(t,e,n){var i=e[t];if(i)for(var r=n[t]={},o=G(i),a=0;a<o.length;a++){var s=o[a];r[s]=ti(i[s])}}function XO(t,e){return N(t)?t!==e:null!=t&&isFinite(t)}var ZO=So(),jO=["percent","easing","shape","style","extra"];function qO(t){t.stopAnimation("keyframe"),t.attr(ZO(t))}function KO(t,e,n){if(n.isAnimationEnabled()&&e)if(Y(e))E(e,(function(e){KO(t,e,n)}));else{var i=e.keyframes,r=e.duration;if(n&&null==r){var o=nh("enter",n,0);r=o&&o.duration}if(i&&r){var a=ZO(t);E(RO,(function(n){if(!n||t[n]){var o;i.sort((function(t,e){return t.percent-e.percent})),E(i,(function(i){var s=t.animators,l=n?i[n]:i;if(l){var u=G(l);if(n||(u=B(u,(function(t){return P(jO,t)<0}))),u.length){o||((o=t.animate(n,e.loop,!0)).scope="keyframe");for(var h=0;h<s.length;h++)s[h]!==o&&s[h].targetName===o.targetName&&s[h].stopTracks(u);n&&(a[n]=a[n]||{});var c=n?a[n]:a;E(u,(function(e){c[e]=((n?t[n]:t)||{})[e]})),o.whenWithKeys(r*i.percent,l,u,i.easing)}}})),o&&o.delay(e.delay||0).duration(r).start(e.easing)}}))}}}var $O="emphasis",JO="normal",QO="blur",tR="select",eR=[JO,$O,QO,tR],nR={normal:["itemStyle"],emphasis:[$O,"itemStyle"],blur:[QO,"itemStyle"],select:[tR,"itemStyle"]},iR={normal:["label"],emphasis:[$O,"label"],blur:[QO,"label"],select:[tR,"label"]},rR=["x","y"],oR={normal:{},emphasis:{},blur:{},select:{}},aR={cartesian2d:function(t){var e=t.master.getRect();return{coordSys:{type:"cartesian2d",x:e.x,y:e.y,width:e.width,height:e.height},api:{coord:function(e){return t.dataToPoint(e)},size:W(SO,t)}}},geo:function(t){var e=t.getBoundingRect();return{coordSys:{type:"geo",x:e.x,y:e.y,width:e.width,height:e.height,zoom:t.getZoom()},api:{coord:function(e){return t.dataToPoint(e)},size:W(MO,t)}}},single:function(t){var e=t.getRect();return{coordSys:{type:"singleAxis",x:e.x,y:e.y,width:e.width,height:e.height},api:{coord:function(e){return t.dataToPoint(e)},size:W(IO,t)}}},polar:function(t){var e=t.getRadiusAxis(),n=t.getAngleAxis(),i=e.getExtent();return i[0]>i[1]&&i.reverse(),{coordSys:{type:"polar",cx:t.cx,cy:t.cy,r:i[1],r0:i[0]},api:{coord:function(i){var r=e.dataToRadius(i[0]),o=n.dataToAngle(i[1]),a=t.coordToPoint([r,o]);return a.push(r,o*Math.PI/180),a},size:W(TO,t)}}},calendar:function(t){var e=t.getRect(),n=t.getRangeInfo();return{coordSys:{type:"calendar",x:e.x,y:e.y,width:e.width,height:e.height,cellWidth:t.getCellWidth(),cellHeight:t.getCellHeight(),rangeInfo:{start:n.start,end:n.end,weeks:n.weeks,dayCount:n.allDay}},api:{coord:function(e,n){return t.dataToPoint(e,n)}}}}};function sR(t){return t instanceof gs}function lR(t){return t instanceof da}var uR=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n,i){this._progressiveEls=null;var r=this._data,o=t.getData(),a=this.group,s=fR(t,o,e,n);r||a.removeAll(),o.diff(r).add((function(e){yR(n,null,e,s(e,i),t,a,o)})).remove((function(e){var n=r.getItemGraphicEl(e);BO(n,bO(n).option,t)})).update((function(e,l){var u=r.getItemGraphicEl(l);yR(n,u,e,s(e,i),t,a,o)})).execute();var l=t.get("clip",!0)?lS(t.coordinateSystem,!1,t):null;l?a.setClipPath(l):a.removeClipPath(),this._data=o},e.prototype.incrementalPrepareRender=function(t,e,n){this.group.removeAll(),this._data=null},e.prototype.incrementalRender=function(t,e,n,i,r){var o=e.getData(),a=fR(e,o,n,i),s=this._progressiveEls=[];function l(t){t.isGroup||(t.incremental=!0,t.ensureState("emphasis").hoverLayer=!0)}for(var u=t.start;u<t.end;u++){var h=yR(null,null,u,a(u,r),e,this.group,o);h&&(h.traverse(l),s.push(h))}},e.prototype.eachRendered=function(t){Vh(this._progressiveEls||this.group,t)},e.prototype.filterForExposedEvent=function(t,e,n,i){var r=e.element;if(null==r||n.name===r)return!0;for(;(n=n.__hostTarget||n.parent)&&n!==this.group;)if(n.name===r)return!0;return!1},e.type="custom",e}(xg);function hR(t){var e,n=t.type;if("path"===n){var i=t.shape,r=null!=i.width&&null!=i.height?{x:i.x||0,y:i.y||0,width:i.width,height:i.height}:null,o=IR(i);e=xh(o,null,r,i.layout||"center"),bO(e).customPathData=o}else if("image"===n)e=new _s({}),bO(e).customImagePath=t.style.image;else if("text"===n)e=new ks({});else if("group"===n)e=new Cr;else{if("compoundPath"===n)throw new Error('"compoundPath" is not supported yet.');var a=mh(n);if(!a){var s="";0,ao(s)}e=new a}return bO(e).customGraphicType=n,e.name=t.name,e.z2EmphasisLift=1,e.z2SelectLift=1,e}function cR(t,e,n,i,r,o,a){qO(e);var s=r&&r.normal.cfg;s&&e.setTextConfig(s),i&&null==i.transition&&(i.transition=rR);var l=i&&i.style;if(l){if("text"===e.type){var u=l;mt(u,"textFill")&&(u.fill=u.textFill),mt(u,"textStroke")&&(u.stroke=u.textStroke)}var h=void 0,c=sR(e)?l.decal:null;t&&c&&(c.dirty=!0,h=rv(c,t)),l.__decalPattern=h}lR(e)&&(l&&(h=l.__decalPattern)&&(l.decal=h));zO(e,i,o,{dataIndex:n,isInit:a,clearStyle:!0}),KO(e,i.keyframeAnimation,o)}function pR(t,e,n,i,r){var o=e.isGroup?null:e,a=r&&r[t].cfg;if(o){var s=o.ensureState(t);if(!1===i){var l=o.getState(t);l&&(l.style=null)}else s.style=i||null;a&&(s.textConfig=a),vl(o)}}function dR(t,e,n){var i=n===JO,r=i?e:_R(e,n),o=r?r.z2:null;null!=o&&((i?t:t.ensureState(n)).z2=o||0)}function fR(t,e,n,i){var r=t.get("renderItem"),o=t.coordinateSystem,a={};o&&(a=o.prepareCustoms?o.prepareCustoms(o):aR[o.type](o));for(var s,l,u=k({getWidth:i.getWidth,getHeight:i.getHeight,getZr:i.getZr,getDevicePixelRatio:i.getDevicePixelRatio,value:function(t,n){return null==n&&(n=s),e.getStore().get(e.getDimensionIndex(t||0),n)},style:function(n,i){0;null==i&&(i=s);var r=e.getItemVisual(i,"style"),o=r&&r.fill,a=r&&r.opacity,l=m(i,JO).getItemStyle();null!=o&&(l.fill=o),null!=a&&(l.opacity=a);var u={inheritColor:X(o)?o:"#000"},h=x(i,JO),c=Uh(h,null,u,!1,!0);c.text=h.getShallow("show")?rt(t.getFormattedLabel(i,JO),Ww(e,i)):null;var p=Xh(h,u,!1);return b(n,l),l=kO(l,c,p),n&&_(l,n),l.legacy=!0,l},ordinalRawValue:function(t,n){null==n&&(n=s),t=t||0;var i=e.getDimensionInfo(t);if(!i){var r=e.getDimensionIndex(t);return r>=0?e.getStore().get(r,n):void 0}var o=e.get(i.name,n),a=i&&i.ordinalMeta;return a?a.categories[o]:o},styleEmphasis:function(n,i){0;null==i&&(i=s);var r=m(i,$O).getItemStyle(),o=x(i,$O),a=Uh(o,null,null,!0,!0);a.text=o.getShallow("show")?ot(t.getFormattedLabel(i,$O),t.getFormattedLabel(i,JO),Ww(e,i)):null;var l=Xh(o,null,!0);return b(n,r),r=kO(r,a,l),n&&_(r,n),r.legacy=!0,r},visual:function(t,n){if(null==n&&(n=s),mt(xO,t)){var i=e.getItemVisual(n,"style");return i?i[xO[t]]:null}if(mt(_O,t))return e.getItemVisual(n,t)},barLayout:function(t){if("cartesian2d"===o.type){return function(t){var e=[],n=t.axis,i="axis0";if("category"===n.type){for(var r=n.getBandWidth(),o=0;o<t.count;o++)e.push(k({bandWidth:r,axisKey:i,stackId:Mx+o},t));var a=Ax(e),s=[];for(o=0;o<t.count;o++){var l=a.axis0[Mx+o];l.offsetCenter=l.offset+l.width/2,s.push(l)}return s}}(k({axis:o.getBaseAxis()},t))}},currentSeriesIndices:function(){return n.getCurrentSeriesIndices()},font:function(t){return $h(t,n)}},a.api||{}),h={context:{},seriesId:t.id,seriesName:t.name,seriesIndex:t.seriesIndex,coordSys:a.coordSys,dataInsideLength:e.count(),encode:gR(t.getData())},c={},p={},d={},f={},g=0;g<eR.length;g++){var y=eR[g];d[y]=t.getModel(nR[y]),f[y]=t.getModel(iR[y])}function v(t){return t===s?l||(l=e.getItemModel(t)):e.getItemModel(t)}function m(t,n){return e.hasItemOption?t===s?c[n]||(c[n]=v(t).getModel(nR[n])):v(t).getModel(nR[n]):d[n]}function x(t,n){return e.hasItemOption?t===s?p[n]||(p[n]=v(t).getModel(iR[n])):v(t).getModel(iR[n]):f[n]}return function(t,n){return s=t,l=null,c={},p={},r&&r(k({dataIndexInside:t,dataIndex:e.getRawIndex(t),actionType:n?n.type:null},h),u)};function _(t,e){for(var n in e)mt(e,n)&&(t[n]=e[n])}function b(t,e){t&&(t.textFill&&(e.textFill=t.textFill),t.textPosition&&(e.textPosition=t.textPosition))}}function gR(t){var e={};return E(t.dimensions,(function(n){var i=t.getDimensionInfo(n);if(!i.isExtraCoord){var r=i.coordDim;(e[r]=e[r]||[])[i.coordDimIndex]=t.getDimensionIndex(n)}})),e}function yR(t,e,n,i,r,o,a){if(i){var s=vR(t,e,n,i,r,o);return s&&a.setItemGraphicEl(n,s),s&&Rl(s,i.focus,i.blurScope,i.emphasisDisabled),s}o.remove(e)}function vR(t,e,n,i,r,o){var a=-1,s=e;e&&mR(e,i,r)&&(a=P(o.childrenRef(),e),e=null);var l,u,h=!e,c=e;c?c.clearStates():(c=hR(i),s&&(l=s,(u=c).copyTransform(l),lR(u)&&lR(l)&&(u.setStyle(l.style),u.z=l.z,u.z2=l.z2,u.zlevel=l.zlevel,u.invisible=l.invisible,u.ignore=l.ignore,sR(u)&&sR(l)&&u.setShape(l.shape)))),!1===i.morph?c.disableMorphing=!0:c.disableMorphing&&(c.disableMorphing=!1),oR.normal.cfg=oR.normal.conOpt=oR.emphasis.cfg=oR.emphasis.conOpt=oR.blur.cfg=oR.blur.conOpt=oR.select.cfg=oR.select.conOpt=null,oR.isLegacy=!1,function(t,e,n,i,r,o){if(t.isGroup)return;xR(n,null,o),xR(n,$O,o);var a=o.normal.conOpt,s=o.emphasis.conOpt,l=o.blur.conOpt,u=o.select.conOpt;if(null!=a||null!=s||null!=u||null!=l){var h=t.getTextContent();if(!1===a)h&&t.removeTextContent();else{a=o.normal.conOpt=a||{type:"text"},h?h.clearStates():(h=hR(a),t.setTextContent(h)),cR(null,h,e,a,null,i,r);for(var c=a&&a.style,p=0;p<eR.length;p++){var d=eR[p];if(d!==JO){var f=o[d].conOpt;pR(d,h,0,bR(a,f,d),null)}}c?h.dirty():h.markRedraw()}}}(c,n,i,r,h,oR),function(t,e,n,i,r){var o=n.clipPath;if(!1===o)t&&t.getClipPath()&&t.removeClipPath();else if(o){var a=t.getClipPath();a&&mR(a,o,i)&&(a=null),a||(a=hR(o),t.setClipPath(a)),cR(null,a,e,o,null,i,r)}}(c,n,i,r,h),cR(t,c,n,i,oR,r,h),mt(i,"info")&&(bO(c).info=i.info);for(var p=0;p<eR.length;p++){var d=eR[p];if(d!==JO){var f=_R(i,d);pR(d,c,0,bR(i,f,d),oR)}}return function(t,e,n){if(!t.isGroup){var i=t,r=n.currentZ,o=n.currentZLevel;i.z=r,i.zlevel=o;var a=e.z2;null!=a&&(i.z2=a||0);for(var s=0;s<eR.length;s++)dR(i,e,eR[s])}}(c,i,r),"group"===i.type&&function(t,e,n,i,r){var o=i.children,a=o?o.length:0,s=i.$mergeChildren,l="byName"===s||i.diffChildrenByName,u=!1===s;if(!a&&!l&&!u)return;if(l)return h={api:t,oldChildren:e.children()||[],newChildren:o||[],dataIndex:n,seriesModel:r,group:e},void new Im(h.oldChildren,h.newChildren,wR,wR,h).add(SR).update(SR).remove(MR).execute();var h;u&&e.removeAll();for(var c=0;c<a;c++)o[c]&&vR(t,e.childAt(c),n,o[c],r,e);for(var p=e.childCount()-1;p>=c;p--){BO(e.childAt(p),bO(e).option,r)}}(t,c,n,i,r),a>=0?o.replaceAt(c,a):o.add(c),c}function mR(t,e,n){var i,r=bO(t),o=e.type,a=e.shape,s=e.style;return n.isUniversalTransitionEnabled()||null!=o&&o!==r.customGraphicType||"path"===o&&((i=a)&&(mt(i,"pathData")||mt(i,"d")))&&IR(a)!==r.customPathData||"image"===o&&mt(s,"image")&&s.image!==r.customImagePath}function xR(t,e,n){var i=e?_R(t,e):t,r=e?bR(t,i,$O):t.style,o=t.type,a=i?i.textConfig:null,s=t.textContent,l=s?e?_R(s,e):s:null;if(r&&(n.isLegacy||CO(r,o,!!a,!!l))){n.isLegacy=!0;var u=DO(r,o,!e);!a&&u.textConfig&&(a=u.textConfig),!l&&u.textContent&&(l=u.textContent)}if(!e&&l){var h=l;!h.type&&(h.type="text")}var c=e?n[e]:n.normal;c.cfg=a,c.conOpt=l}function _R(t,e){return e?t?t[e]:null:t}function bR(t,e,n){var i=e&&e.style;return null==i&&n===$O&&t&&(i=t.styleEmphasis),i}function wR(t,e){var n=t&&t.name;return null!=n?n:"e\0\0"+e}function SR(t,e){var n=this.context,i=null!=t?n.newChildren[t]:null,r=null!=e?n.oldChildren[e]:null;vR(n.api,r,n.dataIndex,i,n.seriesModel,n.group)}function MR(t){var e=this.context,n=e.oldChildren[t];BO(n,bO(n).option,e.seriesModel)}function IR(t){return t&&(t.pathData||t.d)}var TR=So(),CR=T,DR=W,AR=function(){function t(){this._dragging=!1,this.animationThreshold=15}return t.prototype.render=function(t,e,n,i){var r=e.get("value"),o=e.get("status");if(this._axisModel=t,this._axisPointerModel=e,this._api=n,i||this._lastValue!==r||this._lastStatus!==o){this._lastValue=r,this._lastStatus=o;var a=this._group,s=this._handle;if(!o||"hide"===o)return a&&a.hide(),void(s&&s.hide());a&&a.show(),s&&s.show();var l={};this.makeElOption(l,r,t,e,n);var u=l.graphicKey;u!==this._lastGraphicKey&&this.clear(n),this._lastGraphicKey=u;var h=this._moveAnimation=this.determineAnimation(t,e);if(a){var c=H(kR,e,h);this.updatePointerEl(a,l,c),this.updateLabelEl(a,l,c,e)}else a=this._group=new Cr,this.createPointerEl(a,l,t,e),this.createLabelEl(a,l,t,e),n.getZr().add(a);RR(a,e,!0),this._renderHandle(r)}},t.prototype.remove=function(t){this.clear(t)},t.prototype.dispose=function(t){this.clear(t)},t.prototype.determineAnimation=function(t,e){var n=e.get("animation"),i=t.axis,r="category"===i.type,o=e.get("snap");if(!o&&!r)return!1;if("auto"===n||null==n){var a=this.animationThreshold;if(r&&i.getBandWidth()>a)return!0;if(o){var s=KM(t).seriesDataCount,l=i.getExtent();return Math.abs(l[0]-l[1])/s>a}return!1}return!0===n},t.prototype.makeElOption=function(t,e,n,i,r){},t.prototype.createPointerEl=function(t,e,n,i){var r=e.pointer;if(r){var o=TR(t).pointerEl=new Bh[r.type](CR(e.pointer));t.add(o)}},t.prototype.createLabelEl=function(t,e,n,i){if(e.label){var r=TR(t).labelEl=new ks(CR(e.label));t.add(r),PR(r,i)}},t.prototype.updatePointerEl=function(t,e,n){var i=TR(t).pointerEl;i&&e.pointer&&(i.setStyle(e.pointer.style),n(i,{shape:e.pointer.shape}))},t.prototype.updateLabelEl=function(t,e,n,i){var r=TR(t).labelEl;r&&(r.setStyle(e.label.style),n(r,{x:e.label.x,y:e.label.y}),PR(r,i))},t.prototype._renderHandle=function(t){if(!this._dragging&&this.updateHandleTransform){var e,n=this._axisPointerModel,i=this._api.getZr(),r=this._handle,o=n.getModel("handle"),a=n.get("status");if(!o.get("show")||!a||"hide"===a)return r&&i.remove(r),void(this._handle=null);this._handle||(e=!0,r=this._handle=Ph(o.get("icon"),{cursor:"move",draggable:!0,onmousemove:function(t){se(t.event)},onmousedown:DR(this._onHandleDragMove,this,0,0),drift:DR(this._onHandleDragMove,this),ondragend:DR(this._onHandleDragEnd,this)}),i.add(r)),RR(r,n,!1),r.setStyle(o.getItemStyle(null,["color","borderColor","borderWidth","opacity","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY"]));var s=o.get("size");Y(s)||(s=[s,s]),r.scaleX=s[0]/2,r.scaleY=s[1]/2,Ag(this,"_doDispatchAxisPointer",o.get("throttle")||0,"fixRate"),this._moveHandleToValue(t,e)}},t.prototype._moveHandleToValue=function(t,e){kR(this._axisPointerModel,!e&&this._moveAnimation,this._handle,OR(this.getHandleTransform(t,this._axisModel,this._axisPointerModel)))},t.prototype._onHandleDragMove=function(t,e){var n=this._handle;if(n){this._dragging=!0;var i=this.updateHandleTransform(OR(n),[t,e],this._axisModel,this._axisPointerModel);this._payloadInfo=i,n.stopAnimation(),n.attr(OR(i)),TR(n).lastProp=null,this._doDispatchAxisPointer()}},t.prototype._doDispatchAxisPointer=function(){if(this._handle){var t=this._payloadInfo,e=this._axisModel;this._api.dispatchAction({type:"updateAxisPointer",x:t.cursorPoint[0],y:t.cursorPoint[1],tooltipOption:t.tooltipOption,axesInfo:[{axisDim:e.axis.dim,axisIndex:e.componentIndex}]})}},t.prototype._onHandleDragEnd=function(){if(this._dragging=!1,this._handle){var t=this._axisPointerModel.get("value");this._moveHandleToValue(t),this._api.dispatchAction({type:"hideTip"})}},t.prototype.clear=function(t){this._lastValue=null,this._lastStatus=null;var e=t.getZr(),n=this._group,i=this._handle;e&&n&&(this._lastGraphicKey=null,n&&e.remove(n),i&&e.remove(i),this._group=null,this._handle=null,this._payloadInfo=null),kg(this,"_doDispatchAxisPointer")},t.prototype.doClear=function(){},t.prototype.buildLabel=function(t,e,n){return{x:t[n=n||0],y:t[1-n],width:e[n],height:e[1-n]}},t}();function kR(t,e,n,i){LR(TR(n).lastProp,i)||(TR(n).lastProp=i,e?rh(n,i,t):(n.stopAnimation(),n.attr(i)))}function LR(t,e){if(q(t)&&q(e)){var n=!0;return E(e,(function(e,i){n=n&&LR(t[i],e)})),!!n}return t===e}function PR(t,e){t[e.get(["label","show"])?"show":"hide"]()}function OR(t){return{x:t.x||0,y:t.y||0,rotation:t.rotation||0}}function RR(t,e,n){var i=e.get("z"),r=e.get("zlevel");t&&t.traverse((function(t){"group"!==t.type&&(null!=i&&(t.z=i),null!=r&&(t.zlevel=r),t.silent=n)}))}function NR(t){var e,n=t.get("type"),i=t.getModel(n+"Style");return"line"===n?(e=i.getLineStyle()).fill=null:"shadow"===n&&((e=i.getAreaStyle()).stroke=null),e}function ER(t,e,n,i,r){var o=zR(n.get("value"),e.axis,e.ecModel,n.get("seriesDataIndices"),{precision:n.get(["label","precision"]),formatter:n.get(["label","formatter"])}),a=n.getModel("label"),s=ip(a.get("padding")||0),l=a.getFont(),u=cr(o,l),h=r.position,c=u.width+s[1]+s[3],p=u.height+s[0]+s[2],d=r.align;"right"===d&&(h[0]-=c),"center"===d&&(h[0]-=c/2);var f=r.verticalAlign;"bottom"===f&&(h[1]-=p),"middle"===f&&(h[1]-=p/2),function(t,e,n,i){var r=i.getWidth(),o=i.getHeight();t[0]=Math.min(t[0]+e,r)-e,t[1]=Math.min(t[1]+n,o)-n,t[0]=Math.max(t[0],0),t[1]=Math.max(t[1],0)}(h,c,p,i);var g=a.get("backgroundColor");g&&"auto"!==g||(g=e.get(["axisLine","lineStyle","color"])),t.label={x:h[0],y:h[1],style:Uh(a,{text:o,font:l,fill:a.getTextColor(),padding:s,backgroundColor:g}),z2:10}}function zR(t,e,n,i,r){t=e.scale.parse(t);var o=e.scale.getLabel({value:t},{precision:r.precision}),a=r.formatter;if(a){var s={value:s_(e,{value:t}),axisDimension:e.dim,axisIndex:e.index,seriesData:[]};E(i,(function(t){var e=n.getSeriesByIndex(t.seriesIndex),i=t.dataIndexInside,r=e&&e.getDataParams(i);r&&s.seriesData.push(r)})),X(a)?o=a.replace("{value}",o):U(a)&&(o=a(s))}return o}function VR(t,e,n){var i=[1,0,0,1,0,0];return zi(i,i,n.rotation),Ei(i,i,n.position),Th([t.dataToCoord(e),(n.labelOffset||0)+(n.labelDirection||1)*(n.labelMargin||0)],i)}function BR(t,e,n,i,r,o){var a=GM.innerTextLayout(n.rotation,0,n.labelDirection);n.labelMargin=r.get(["label","margin"]),ER(e,i,r,o,{position:VR(i.axis,t,n),align:a.textAlign,verticalAlign:a.textVerticalAlign})}function FR(t,e,n){return{x1:t[n=n||0],y1:t[1-n],x2:e[n],y2:e[1-n]}}function GR(t,e,n){return{x:t[n=n||0],y:t[1-n],width:e[n],height:e[1-n]}}function WR(t,e,n,i,r,o){return{cx:t,cy:e,r0:n,r:i,startAngle:r,endAngle:o,clockwise:!0}}var HR=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.makeElOption=function(t,e,n,i,r){var o=n.axis,a=o.grid,s=i.get("type"),l=YR(a,o).getOtherAxis(o).getGlobalExtent(),u=o.toGlobalCoord(o.dataToCoord(e,!0));if(s&&"none"!==s){var h=NR(i),c=UR[s](o,u,l);c.style=h,t.graphicKey=c.type,t.pointer=c}BR(e,t,LM(a.model,n),n,i,r)},e.prototype.getHandleTransform=function(t,e,n){var i=LM(e.axis.grid.model,e,{labelInside:!1});i.labelMargin=n.get(["handle","margin"]);var r=VR(e.axis,t,i);return{x:r[0],y:r[1],rotation:i.rotation+(i.labelDirection<0?Math.PI:0)}},e.prototype.updateHandleTransform=function(t,e,n,i){var r=n.axis,o=r.grid,a=r.getGlobalExtent(!0),s=YR(o,r).getOtherAxis(r).getGlobalExtent(),l="x"===r.dim?0:1,u=[t.x,t.y];u[l]+=e[l],u[l]=Math.min(a[1],u[l]),u[l]=Math.max(a[0],u[l]);var h=(s[1]+s[0])/2,c=[h,h];c[l]=u[l];return{x:u[0],y:u[1],rotation:t.rotation,cursorPoint:c,tooltipOption:[{verticalAlign:"middle"},{align:"center"}][l]}},e}(AR);function YR(t,e){var n={};return n[e.dim+"AxisIndex"]=e.index,t.getCartesian(n)}var UR={line:function(t,e,n){return{type:"Line",subPixelOptimize:!0,shape:FR([e,n[0]],[e,n[1]],XR(t))}},shadow:function(t,e,n){var i=Math.max(1,t.getBandWidth()),r=n[1]-n[0];return{type:"Rect",shape:GR([e-i/2,n[0]],[i,r],XR(t))}}};function XR(t){return"x"===t.dim?0:1}var ZR=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="axisPointer",e.defaultOption={show:"auto",z:50,type:"line",snap:!1,triggerTooltip:!0,value:null,status:null,link:[],animation:null,animationDurationUpdate:200,lineStyle:{color:"#B9BEC9",width:1,type:"dashed"},shadowStyle:{color:"rgba(210,219,238,0.2)"},label:{show:!0,formatter:null,precision:"auto",margin:3,color:"#fff",padding:[5,7,5,7],backgroundColor:"auto",borderColor:null,borderWidth:0,borderRadius:3},handle:{show:!1,icon:"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",size:45,margin:50,color:"#333",shadowBlur:3,shadowColor:"#aaa",shadowOffsetX:0,shadowOffsetY:2,throttle:40}},e}(Tp),jR=So(),qR=E;function KR(t,e,n){if(!r.node){var i=e.getZr();jR(i).records||(jR(i).records={}),function(t,e){if(jR(t).initialized)return;function n(n,i){t.on(n,(function(n){var r=function(t){var e={showTip:[],hideTip:[]},n=function(i){var r=e[i.type];r?r.push(i):(i.dispatchAction=n,t.dispatchAction(i))};return{dispatchAction:n,pendings:e}}(e);qR(jR(t).records,(function(t){t&&i(t,n,r.dispatchAction)})),function(t,e){var n,i=t.showTip.length,r=t.hideTip.length;i?n=t.showTip[i-1]:r&&(n=t.hideTip[r-1]);n&&(n.dispatchAction=null,e.dispatchAction(n))}(r.pendings,e)}))}jR(t).initialized=!0,n("click",H(JR,"click")),n("mousemove",H(JR,"mousemove")),n("globalout",$R)}(i,e),(jR(i).records[t]||(jR(i).records[t]={})).handler=n}}function $R(t,e,n){t.handler("leave",null,n)}function JR(t,e,n,i){e.handler(t,n,i)}function QR(t,e){if(!r.node){var n=e.getZr();(jR(n).records||{})[t]&&(jR(n).records[t]=null)}}var tN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=e.getComponent("tooltip"),r=t.get("triggerOn")||i&&i.get("triggerOn")||"mousemove|click";KR("axisPointer",n,(function(t,e,n){"none"!==r&&("leave"===t||r.indexOf(t)>=0)&&n({type:"updateAxisPointer",currTrigger:t,x:e&&e.offsetX,y:e&&e.offsetY})}))},e.prototype.remove=function(t,e){QR("axisPointer",e)},e.prototype.dispose=function(t,e){QR("axisPointer",e)},e.type="axisPointer",e}(gg);function eN(t,e){var n,i=[],r=t.seriesIndex;if(null==r||!(n=e.getSeriesByIndex(r)))return{point:[]};var o=n.getData(),a=wo(o,t);if(null==a||a<0||Y(a))return{point:[]};var s=o.getItemGraphicEl(a),l=n.coordinateSystem;if(n.getTooltipPosition)i=n.getTooltipPosition(a)||[];else if(l&&l.dataToPoint)if(t.isStacked){var u=l.getBaseAxis(),h=l.getOtherAxis(u).dim,c=u.dim,p="x"===h||"radius"===h?1:0,d=o.mapDimension(c),f=[];f[p]=o.get(d,a),f[1-p]=o.get(o.getCalculationInfo("stackResultDimension"),a),i=l.dataToPoint(f)||[]}else i=l.dataToPoint(o.getValues(z(l.dimensions,(function(t){return o.mapDimension(t)})),a))||[];else if(s){var g=s.getBoundingRect().clone();g.applyTransform(s.transform),i=[g.x+g.width/2,g.y+g.height/2]}return{point:i,el:s}}var nN=So();function iN(t,e,n){var i=t.currTrigger,r=[t.x,t.y],o=t,a=t.dispatchAction||W(n.dispatchAction,n),s=e.getComponent("axisPointer").coordSysAxesInfo;if(s){lN(r)&&(r=eN({seriesIndex:o.seriesIndex,dataIndex:o.dataIndex},e).point);var l=lN(r),u=o.axesInfo,h=s.axesInfo,c="leave"===i||lN(r),p={},d={},f={list:[],map:{}},g={showPointer:H(oN,d),showTooltip:H(aN,f)};E(s.coordSysMap,(function(t,e){var n=l||t.containPoint(r);E(s.coordSysAxesInfo[e],(function(t,e){var i=t.axis,o=function(t,e){for(var n=0;n<(t||[]).length;n++){var i=t[n];if(e.axis.dim===i.axisDim&&e.axis.model.componentIndex===i.axisIndex)return i}}(u,t);if(!c&&n&&(!u||o)){var a=o&&o.value;null!=a||l||(a=i.pointToData(r)),null!=a&&rN(t,a,g,!1,p)}}))}));var y={};return E(h,(function(t,e){var n=t.linkGroup;n&&!d[e]&&E(n.axesInfo,(function(e,i){var r=d[i];if(e!==t&&r){var o=r.value;n.mapper&&(o=t.axis.scale.parse(n.mapper(o,sN(e),sN(t)))),y[t.key]=o}}))})),E(y,(function(t,e){rN(h[e],t,g,!0,p)})),function(t,e,n){var i=n.axesInfo=[];E(e,(function(e,n){var r=e.axisPointerModel.option,o=t[n];o?(!e.useHandle&&(r.status="show"),r.value=o.value,r.seriesDataIndices=(o.payloadBatch||[]).slice()):!e.useHandle&&(r.status="hide"),"show"===r.status&&i.push({axisDim:e.axis.dim,axisIndex:e.axis.model.componentIndex,value:r.value})}))}(d,h,p),function(t,e,n,i){if(lN(e)||!t.list.length)return void i({type:"hideTip"});var r=((t.list[0].dataByAxis[0]||{}).seriesDataIndices||[])[0]||{};i({type:"showTip",escapeConnect:!0,x:e[0],y:e[1],tooltipOption:n.tooltipOption,position:n.position,dataIndexInside:r.dataIndexInside,dataIndex:r.dataIndex,seriesIndex:r.seriesIndex,dataByCoordSys:t.list})}(f,r,t,a),function(t,e,n){var i=n.getZr(),r="axisPointerLastHighlights",o=nN(i)[r]||{},a=nN(i)[r]={};E(t,(function(t,e){var n=t.axisPointerModel.option;"show"===n.status&&E(n.seriesDataIndices,(function(t){var e=t.seriesIndex+" | "+t.dataIndex;a[e]=t}))}));var s=[],l=[];E(o,(function(t,e){!a[e]&&l.push(t)})),E(a,(function(t,e){!o[e]&&s.push(t)})),l.length&&n.dispatchAction({type:"downplay",escapeConnect:!0,notBlur:!0,batch:l}),s.length&&n.dispatchAction({type:"highlight",escapeConnect:!0,notBlur:!0,batch:s})}(h,0,n),p}}function rN(t,e,n,i,r){var o=t.axis;if(!o.scale.isBlank()&&o.containData(e))if(t.involveSeries){var a=function(t,e){var n=e.axis,i=n.dim,r=t,o=[],a=Number.MAX_VALUE,s=-1;return E(e.seriesModels,(function(e,l){var u,h,c=e.getData().mapDimensionsAll(i);if(e.getAxisTooltipData){var p=e.getAxisTooltipData(c,t,n);h=p.dataIndices,u=p.nestestValue}else{if(!(h=e.getData().indicesOfNearest(c[0],t,"category"===n.type?.5:null)).length)return;u=e.getData().get(c[0],h[0])}if(null!=u&&isFinite(u)){var d=t-u,f=Math.abs(d);f<=a&&((f<a||d>=0&&s<0)&&(a=f,s=d,r=u,o.length=0),E(h,(function(t){o.push({seriesIndex:e.seriesIndex,dataIndexInside:t,dataIndex:e.getData().getRawIndex(t)})})))}})),{payloadBatch:o,snapToValue:r}}(e,t),s=a.payloadBatch,l=a.snapToValue;s[0]&&null==r.seriesIndex&&A(r,s[0]),!i&&t.snap&&o.containData(l)&&null!=l&&(e=l),n.showPointer(t,e,s),n.showTooltip(t,a,l)}else n.showPointer(t,e)}function oN(t,e,n,i){t[e.key]={value:n,payloadBatch:i}}function aN(t,e,n,i){var r=n.payloadBatch,o=e.axis,a=o.model,s=e.axisPointerModel;if(e.triggerTooltip&&r.length){var l=e.coordSys.model,u=JM(l),h=t.map[u];h||(h=t.map[u]={coordSysId:l.id,coordSysIndex:l.componentIndex,coordSysType:l.type,coordSysMainType:l.mainType,dataByAxis:[]},t.list.push(h)),h.dataByAxis.push({axisDim:o.dim,axisIndex:a.componentIndex,axisType:a.type,axisId:a.id,value:i,valueLabelOpt:{precision:s.get(["label","precision"]),formatter:s.get(["label","formatter"])},seriesDataIndices:r.slice()})}}function sN(t){var e=t.axis.model,n={},i=n.axisDim=t.axis.dim;return n.axisIndex=n[i+"AxisIndex"]=e.componentIndex,n.axisName=n[i+"AxisName"]=e.name,n.axisId=n[i+"AxisId"]=e.id,n}function lN(t){return!t||null==t[0]||isNaN(t[0])||null==t[1]||isNaN(t[1])}function uN(t){tI.registerAxisPointerClass("CartesianAxisPointer",HR),t.registerComponentModel(ZR),t.registerComponentView(tN),t.registerPreprocessor((function(t){if(t){(!t.axisPointer||0===t.axisPointer.length)&&(t.axisPointer={});var e=t.axisPointer.link;e&&!Y(e)&&(t.axisPointer.link=[e])}})),t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC,(function(t,e){t.getComponent("axisPointer").coordSysAxesInfo=ZM(t,e)})),t.registerAction({type:"updateAxisPointer",event:"updateAxisPointer",update:":updateAxisPointer"},iN)}var hN=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.makeElOption=function(t,e,n,i,r){var o=n.axis;"angle"===o.dim&&(this.animationThreshold=Math.PI/18);var a=o.polar,s=a.getOtherAxis(o).getExtent(),l=o.dataToCoord(e),u=i.get("type");if(u&&"none"!==u){var h=NR(i),c=cN[u](o,a,l,s);c.style=h,t.graphicKey=c.type,t.pointer=c}var p=function(t,e,n,i,r){var o=e.axis,a=o.dataToCoord(t),s=i.getAngleAxis().getExtent()[0];s=s/180*Math.PI;var l,u,h,c=i.getRadiusAxis().getExtent();if("radius"===o.dim){var p=[1,0,0,1,0,0];zi(p,p,s),Ei(p,p,[i.cx,i.cy]),l=Th([a,-r],p);var d=e.getModel("axisLabel").get("rotate")||0,f=GM.innerTextLayout(s,d*Math.PI/180,-1);u=f.textAlign,h=f.textVerticalAlign}else{var g=c[1];l=i.coordToPoint([g+r,a]);var y=i.cx,v=i.cy;u=Math.abs(l[0]-y)/g<.3?"center":l[0]>y?"left":"right",h=Math.abs(l[1]-v)/g<.3?"middle":l[1]>v?"top":"bottom"}return{position:l,align:u,verticalAlign:h}}(e,n,0,a,i.get(["label","margin"]));ER(t,n,i,r,p)},e}(AR);var cN={line:function(t,e,n,i){return"angle"===t.dim?{type:"Line",shape:FR(e.coordToPoint([i[0],n]),e.coordToPoint([i[1],n]))}:{type:"Circle",shape:{cx:e.cx,cy:e.cy,r:n}}},shadow:function(t,e,n,i){var r=Math.max(1,t.getBandWidth()),o=Math.PI/180;return"angle"===t.dim?{type:"Sector",shape:WR(e.cx,e.cy,i[0],i[1],(-n-r/2)*o,(r/2-n)*o)}:{type:"Sector",shape:WR(e.cx,e.cy,n-r/2,n+r/2,0,2*Math.PI)}}},pN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.findAxisModel=function(t){var e;return this.ecModel.eachComponent(t,(function(t){t.getCoordSysModel()===this&&(e=t)}),this),e},e.type="polar",e.dependencies=["radiusAxis","angleAxis"],e.defaultOption={z:0,center:["50%","50%"],radius:"80%"},e}(Tp),dN=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.getCoordSysModel=function(){return this.getReferringComponents("polar",Co).models[0]},e.type="polarAxis",e}(Tp);R(dN,p_);var fN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="angleAxis",e}(dN),gN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="radiusAxis",e}(dN),yN=function(t){function e(e,n){return t.call(this,"radius",e,n)||this}return n(e,t),e.prototype.pointToData=function(t,e){return this.polar.pointToData(t,e)["radius"===this.dim?0:1]},e}(H_);yN.prototype.dataToRadius=H_.prototype.dataToCoord,yN.prototype.radiusToData=H_.prototype.coordToData;var vN=So(),mN=function(t){function e(e,n){return t.call(this,"angle",e,n||[0,360])||this}return n(e,t),e.prototype.pointToData=function(t,e){return this.polar.pointToData(t,e)["radius"===this.dim?0:1]},e.prototype.calculateCategoryInterval=function(){var t=this,e=t.getLabelModel(),n=t.scale,i=n.getExtent(),r=n.count();if(i[1]-i[0]<1)return 0;var o=i[0],a=t.dataToCoord(o+1)-t.dataToCoord(o),s=Math.abs(a),l=cr(null==o?"":o+"",e.getFont(),"center","top"),u=Math.max(l.height,7)/s;isNaN(u)&&(u=1/0);var h=Math.max(0,Math.floor(u)),c=vN(t.model),p=c.lastAutoInterval,d=c.lastTickCount;return null!=p&&null!=d&&Math.abs(p-h)<=1&&Math.abs(d-r)<=1&&p>h?h=p:(c.lastTickCount=r,c.lastAutoInterval=h),h},e}(H_);mN.prototype.dataToAngle=H_.prototype.dataToCoord,mN.prototype.angleToData=H_.prototype.coordToData;var xN=["radius","angle"],_N=function(){function t(t){this.dimensions=xN,this.type="polar",this.cx=0,this.cy=0,this._radiusAxis=new yN,this._angleAxis=new mN,this.axisPointerEnabled=!0,this.name=t||"",this._radiusAxis.polar=this._angleAxis.polar=this}return t.prototype.containPoint=function(t){var e=this.pointToCoord(t);return this._radiusAxis.contain(e[0])&&this._angleAxis.contain(e[1])},t.prototype.containData=function(t){return this._radiusAxis.containData(t[0])&&this._angleAxis.containData(t[1])},t.prototype.getAxis=function(t){return this["_"+t+"Axis"]},t.prototype.getAxes=function(){return[this._radiusAxis,this._angleAxis]},t.prototype.getAxesByScale=function(t){var e=[],n=this._angleAxis,i=this._radiusAxis;return n.scale.type===t&&e.push(n),i.scale.type===t&&e.push(i),e},t.prototype.getAngleAxis=function(){return this._angleAxis},t.prototype.getRadiusAxis=function(){return this._radiusAxis},t.prototype.getOtherAxis=function(t){var e=this._angleAxis;return t===e?this._radiusAxis:e},t.prototype.getBaseAxis=function(){return this.getAxesByScale("ordinal")[0]||this.getAxesByScale("time")[0]||this.getAngleAxis()},t.prototype.getTooltipAxes=function(t){var e=null!=t&&"auto"!==t?this.getAxis(t):this.getBaseAxis();return{baseAxes:[e],otherAxes:[this.getOtherAxis(e)]}},t.prototype.dataToPoint=function(t,e){return this.coordToPoint([this._radiusAxis.dataToRadius(t[0],e),this._angleAxis.dataToAngle(t[1],e)])},t.prototype.pointToData=function(t,e){var n=this.pointToCoord(t);return[this._radiusAxis.radiusToData(n[0],e),this._angleAxis.angleToData(n[1],e)]},t.prototype.pointToCoord=function(t){var e=t[0]-this.cx,n=t[1]-this.cy,i=this.getAngleAxis(),r=i.getExtent(),o=Math.min(r[0],r[1]),a=Math.max(r[0],r[1]);i.inverse?o=a-360:a=o+360;var s=Math.sqrt(e*e+n*n);e/=s,n/=s;for(var l=Math.atan2(-n,e)/Math.PI*180,u=l<o?1:-1;l<o||l>a;)l+=360*u;return[s,l]},t.prototype.coordToPoint=function(t){var e=t[0],n=t[1]/180*Math.PI;return[Math.cos(n)*e+this.cx,-Math.sin(n)*e+this.cy]},t.prototype.getArea=function(){var t=this.getAngleAxis(),e=this.getRadiusAxis().getExtent().slice();e[0]>e[1]&&e.reverse();var n=t.getExtent(),i=Math.PI/180;return{cx:this.cx,cy:this.cy,r0:e[0],r:e[1],startAngle:-n[0]*i,endAngle:-n[1]*i,clockwise:t.inverse,contain:function(t,e){var n=t-this.cx,i=e-this.cy,r=n*n+i*i-1e-4,o=this.r,a=this.r0;return r<=o*o&&r>=a*a}}},t.prototype.convertToPixel=function(t,e,n){return bN(e)===this?this.dataToPoint(n):null},t.prototype.convertFromPixel=function(t,e,n){return bN(e)===this?this.pointToData(n):null},t}();function bN(t){var e=t.seriesModel,n=t.polarModel;return n&&n.coordinateSystem||e&&e.coordinateSystem}function wN(t,e){var n=this,i=n.getAngleAxis(),r=n.getRadiusAxis();if(i.scale.setExtent(1/0,-1/0),r.scale.setExtent(1/0,-1/0),t.eachSeries((function(t){if(t.coordinateSystem===n){var e=t.getData();E(c_(e,"radius"),(function(t){r.scale.unionExtentFromData(e,t)})),E(c_(e,"angle"),(function(t){i.scale.unionExtentFromData(e,t)}))}})),r_(i.scale,i.model),r_(r.scale,r.model),"category"===i.type&&!i.onBand){var o=i.getExtent(),a=360/i.scale.count();i.inverse?o[1]+=a:o[1]-=a,i.setExtent(o[0],o[1])}}function SN(t,e){if(t.type=e.get("type"),t.scale=o_(e),t.onBand=e.get("boundaryGap")&&"category"===t.type,t.inverse=e.get("inverse"),function(t){return"angleAxis"===t.mainType}(e)){t.inverse=t.inverse!==e.get("clockwise");var n=e.get("startAngle");t.setExtent(n,n+(t.inverse?-360:360))}e.axis=t,t.model=e}var MN={dimensions:xN,create:function(t,e){var n=[];return t.eachComponent("polar",(function(t,i){var r=new _N(i+"");r.update=wN;var o=r.getRadiusAxis(),a=r.getAngleAxis(),s=t.findAxisModel("radiusAxis"),l=t.findAxisModel("angleAxis");SN(o,s),SN(a,l),function(t,e,n){var i=e.get("center"),r=n.getWidth(),o=n.getHeight();t.cx=Er(i[0],r),t.cy=Er(i[1],o);var a=t.getRadiusAxis(),s=Math.min(r,o)/2,l=e.get("radius");null==l?l=[0,"100%"]:Y(l)||(l=[0,l]);var u=[Er(l[0],s),Er(l[1],s)];a.inverse?a.setExtent(u[1],u[0]):a.setExtent(u[0],u[1])}(r,t,e),n.push(r),t.coordinateSystem=r,r.model=t})),t.eachSeries((function(t){if("polar"===t.get("coordinateSystem")){var e=t.getReferringComponents("polar",Co).models[0];0,t.coordinateSystem=e.coordinateSystem}})),n}},IN=["axisLine","axisLabel","axisTick","minorTick","splitLine","minorSplitLine","splitArea"];function TN(t,e,n){e[1]>e[0]&&(e=e.slice().reverse());var i=t.coordToPoint([e[0],n]),r=t.coordToPoint([e[1],n]);return{x1:i[0],y1:i[1],x2:r[0],y2:r[1]}}function CN(t){return t.getRadiusAxis().inverse?0:1}function DN(t){var e=t[0],n=t[t.length-1];e&&n&&Math.abs(Math.abs(e.coord-n.coord)-360)<1e-4&&t.pop()}var AN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.axisPointerClass="PolarAxisPointer",n}return n(e,t),e.prototype.render=function(t,e){if(this.group.removeAll(),t.get("show")){var n=t.axis,i=n.polar,r=i.getRadiusAxis().getExtent(),o=n.getTicksCoords(),a=n.getMinorTicksCoords(),s=z(n.getViewLabels(),(function(t){t=T(t);var e=n.scale,i="ordinal"===e.type?e.getRawOrdinalNumber(t.tickValue):t.tickValue;return t.coord=n.dataToCoord(i),t}));DN(s),DN(o),E(IN,(function(e){!t.get([e,"show"])||n.scale.isBlank()&&"axisLine"!==e||kN[e](this.group,t,i,o,a,r,s)}),this)}},e.type="angleAxis",e}(tI),kN={axisLine:function(t,e,n,i,r,o){var a,s=e.getModel(["axisLine","lineStyle"]),l=CN(n),u=l?0:1;(a=0===o[u]?new hu({shape:{cx:n.cx,cy:n.cy,r:o[l]},style:s.getLineStyle(),z2:1,silent:!0}):new Au({shape:{cx:n.cx,cy:n.cy,r:o[l],r0:o[u]},style:s.getLineStyle(),z2:1,silent:!0})).style.fill=null,t.add(a)},axisTick:function(t,e,n,i,r,o){var a=e.getModel("axisTick"),s=(a.get("inside")?-1:1)*a.get("length"),l=o[CN(n)],u=z(i,(function(t){return new zu({shape:TN(n,[l,l+s],t.coord)})}));t.add(wh(u,{style:k(a.getModel("lineStyle").getLineStyle(),{stroke:e.get(["axisLine","lineStyle","color"])})}))},minorTick:function(t,e,n,i,r,o){if(r.length){for(var a=e.getModel("axisTick"),s=e.getModel("minorTick"),l=(a.get("inside")?-1:1)*s.get("length"),u=o[CN(n)],h=[],c=0;c<r.length;c++)for(var p=0;p<r[c].length;p++)h.push(new zu({shape:TN(n,[u,u+l],r[c][p].coord)}));t.add(wh(h,{style:k(s.getModel("lineStyle").getLineStyle(),k(a.getLineStyle(),{stroke:e.get(["axisLine","lineStyle","color"])}))}))}},axisLabel:function(t,e,n,i,r,o,a){var s=e.getCategories(!0),l=e.getModel("axisLabel"),u=l.get("margin"),h=e.get("triggerEvent");E(a,(function(i,r){var a=l,c=i.tickValue,p=o[CN(n)],d=n.coordToPoint([p+u,i.coord]),f=n.cx,g=n.cy,y=Math.abs(d[0]-f)/p<.3?"center":d[0]>f?"left":"right",v=Math.abs(d[1]-g)/p<.3?"middle":d[1]>g?"top":"bottom";if(s&&s[c]){var m=s[c];q(m)&&m.textStyle&&(a=new dc(m.textStyle,l,l.ecModel))}var x=new ks({silent:GM.isLabelSilent(e),style:Uh(a,{x:d[0],y:d[1],fill:a.getTextColor()||e.get(["axisLine","lineStyle","color"]),text:i.formattedLabel,align:y,verticalAlign:v})});if(t.add(x),h){var _=GM.makeAxisEventDataBase(e);_.targetType="axisLabel",_.value=i.rawLabel,Hs(x).eventData=_}}),this)},splitLine:function(t,e,n,i,r,o){var a=e.getModel("splitLine").getModel("lineStyle"),s=a.get("color"),l=0;s=s instanceof Array?s:[s];for(var u=[],h=0;h<i.length;h++){var c=l++%s.length;u[c]=u[c]||[],u[c].push(new zu({shape:TN(n,o,i[h].coord)}))}for(h=0;h<u.length;h++)t.add(wh(u[h],{style:k({stroke:s[h%s.length]},a.getLineStyle()),silent:!0,z:e.get("z")}))},minorSplitLine:function(t,e,n,i,r,o){if(r.length){for(var a=e.getModel("minorSplitLine").getModel("lineStyle"),s=[],l=0;l<r.length;l++)for(var u=0;u<r[l].length;u++)s.push(new zu({shape:TN(n,o,r[l][u].coord)}));t.add(wh(s,{style:a.getLineStyle(),silent:!0,z:e.get("z")}))}},splitArea:function(t,e,n,i,r,o){if(i.length){var a=e.getModel("splitArea").getModel("areaStyle"),s=a.get("color"),l=0;s=s instanceof Array?s:[s];for(var u=[],h=Math.PI/180,c=-i[0].coord*h,p=Math.min(o[0],o[1]),d=Math.max(o[0],o[1]),f=e.get("clockwise"),g=1,y=i.length;g<=y;g++){var v=g===y?i[0].coord:i[g].coord,m=l++%s.length;u[m]=u[m]||[],u[m].push(new Cu({shape:{cx:n.cx,cy:n.cy,r0:p,r:d,startAngle:c,endAngle:-v*h,clockwise:f},silent:!0})),c=-v*h}for(g=0;g<u.length;g++)t.add(wh(u[g],{style:k({fill:s[g%s.length]},a.getAreaStyle()),silent:!0}))}}},LN=["axisLine","axisTickLabel","axisName"],PN=["splitLine","splitArea","minorSplitLine"],ON=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.axisPointerClass="PolarAxisPointer",n}return n(e,t),e.prototype.render=function(t,e){if(this.group.removeAll(),t.get("show")){var n=this._axisGroup,i=this._axisGroup=new Cr;this.group.add(i);var r=t.axis,o=r.polar,a=o.getAngleAxis(),s=r.getTicksCoords(),l=r.getMinorTicksCoords(),u=a.getExtent()[0],h=r.getExtent(),c=function(t,e,n){return{position:[t.cx,t.cy],rotation:n/180*Math.PI,labelDirection:-1,tickDirection:-1,nameDirection:1,labelRotate:e.getModel("axisLabel").get("rotate"),z2:1}}(o,t,u),p=new GM(t,c);E(LN,p.add,p),i.add(p.getGroup()),Ah(n,i,t),E(PN,(function(e){t.get([e,"show"])&&!r.scale.isBlank()&&RN[e](this.group,t,o,u,h,s,l)}),this)}},e.type="radiusAxis",e}(tI),RN={splitLine:function(t,e,n,i,r,o){var a=e.getModel("splitLine").getModel("lineStyle"),s=a.get("color"),l=0;s=s instanceof Array?s:[s];for(var u=[],h=0;h<o.length;h++){var c=l++%s.length;u[c]=u[c]||[],u[c].push(new hu({shape:{cx:n.cx,cy:n.cy,r:Math.max(o[h].coord,0)}}))}for(h=0;h<u.length;h++)t.add(wh(u[h],{style:k({stroke:s[h%s.length],fill:null},a.getLineStyle()),silent:!0}))},minorSplitLine:function(t,e,n,i,r,o,a){if(a.length){for(var s=e.getModel("minorSplitLine").getModel("lineStyle"),l=[],u=0;u<a.length;u++)for(var h=0;h<a[u].length;h++)l.push(new hu({shape:{cx:n.cx,cy:n.cy,r:a[u][h].coord}}));t.add(wh(l,{style:k({fill:null},s.getLineStyle()),silent:!0}))}},splitArea:function(t,e,n,i,r,o){if(o.length){var a=e.getModel("splitArea").getModel("areaStyle"),s=a.get("color"),l=0;s=s instanceof Array?s:[s];for(var u=[],h=o[0].coord,c=1;c<o.length;c++){var p=l++%s.length;u[p]=u[p]||[],u[p].push(new Cu({shape:{cx:n.cx,cy:n.cy,r0:h,r:o[c].coord,startAngle:0,endAngle:2*Math.PI},silent:!0})),h=o[c].coord}for(c=0;c<u.length;c++)t.add(wh(u[c],{style:k({fill:s[c%s.length]},a.getAreaStyle()),silent:!0}))}}};function NN(t){return t.get("stack")||"__ec_stack_"+t.seriesIndex}function EN(t,e){return e.dim+t.model.componentIndex}function zN(t,e,n){var i={},r=function(t){var e={};E(t,(function(t,n){var i=t.getData(),r=t.coordinateSystem,o=r.getBaseAxis(),a=EN(r,o),s=o.getExtent(),l="category"===o.type?o.getBandWidth():Math.abs(s[1]-s[0])/i.count(),u=e[a]||{bandWidth:l,remainedWidth:l,autoWidthCount:0,categoryGap:"20%",gap:"30%",stacks:{}},h=u.stacks;e[a]=u;var c=NN(t);h[c]||u.autoWidthCount++,h[c]=h[c]||{width:0,maxWidth:0};var p=Er(t.get("barWidth"),l),d=Er(t.get("barMaxWidth"),l),f=t.get("barGap"),g=t.get("barCategoryGap");p&&!h[c].width&&(p=Math.min(u.remainedWidth,p),h[c].width=p,u.remainedWidth-=p),d&&(h[c].maxWidth=d),null!=f&&(u.gap=f),null!=g&&(u.categoryGap=g)}));var n={};return E(e,(function(t,e){n[e]={};var i=t.stacks,r=t.bandWidth,o=Er(t.categoryGap,r),a=Er(t.gap,1),s=t.remainedWidth,l=t.autoWidthCount,u=(s-o)/(l+(l-1)*a);u=Math.max(u,0),E(i,(function(t,e){var n=t.maxWidth;n&&n<u&&(n=Math.min(n,s),t.width&&(n=Math.min(n,t.width)),s-=n,t.width=n,l--)})),u=(s-o)/(l+(l-1)*a),u=Math.max(u,0);var h,c=0;E(i,(function(t,e){t.width||(t.width=u),h=t,c+=t.width*(1+a)})),h&&(c-=h.width*a);var p=-c/2;E(i,(function(t,i){n[e][i]=n[e][i]||{offset:p,width:t.width},p+=t.width*(1+a)}))})),n}(B(e.getSeriesByType(t),(function(t){return!e.isSeriesFiltered(t)&&t.coordinateSystem&&"polar"===t.coordinateSystem.type})));e.eachSeriesByType(t,(function(t){if("polar"===t.coordinateSystem.type){var e=t.getData(),n=t.coordinateSystem,o=n.getBaseAxis(),a=EN(n,o),s=NN(t),l=r[a][s],u=l.offset,h=l.width,c=n.getOtherAxis(o),p=t.coordinateSystem.cx,d=t.coordinateSystem.cy,f=t.get("barMinHeight")||0,g=t.get("barMinAngle")||0;i[s]=i[s]||[];for(var y=e.mapDimension(c.dim),v=e.mapDimension(o.dim),m=nx(e,y),x="radius"!==o.dim||!t.get("roundCap",!0),_=c.dataToCoord(0),b=0,w=e.count();b<w;b++){var S=e.get(y,b),M=e.get(v,b),I=S>=0?"p":"n",T=_;m&&(i[s][M]||(i[s][M]={p:_,n:_}),T=i[s][M][I]);var C=void 0,D=void 0,A=void 0,k=void 0;if("radius"===c.dim){var L=c.dataToCoord(S)-_,P=o.dataToCoord(M);Math.abs(L)<f&&(L=(L<0?-1:1)*f),C=T,D=T+L,k=(A=P-u)-h,m&&(i[s][M][I]=D)}else{var O=c.dataToCoord(S,x)-_,R=o.dataToCoord(M);Math.abs(O)<g&&(O=(O<0?-1:1)*g),D=(C=R+u)+h,A=T,k=T+O,m&&(i[s][M][I]=k)}e.setItemLayout(b,{cx:p,cy:d,r0:C,r:D,startAngle:-A*Math.PI/180,endAngle:-k*Math.PI/180,clockwise:A>=k})}}}))}var VN={startAngle:90,clockwise:!0,splitNumber:12,axisLabel:{rotate:0}},BN={splitNumber:5},FN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="polar",e}(gg);function GN(t,e){e=e||{};var n=t.coordinateSystem,i=t.axis,r={},o=i.position,a=i.orient,s=n.getRect(),l=[s.x,s.x+s.width,s.y,s.y+s.height],u={horizontal:{top:l[2],bottom:l[3]},vertical:{left:l[0],right:l[1]}};r.position=["vertical"===a?u.vertical[o]:l[0],"horizontal"===a?u.horizontal[o]:l[3]];r.rotation=Math.PI/2*{horizontal:0,vertical:1}[a];r.labelDirection=r.tickDirection=r.nameDirection={top:-1,bottom:1,right:1,left:-1}[o],t.get(["axisTick","inside"])&&(r.tickDirection=-r.tickDirection),it(e.labelInside,t.get(["axisLabel","inside"]))&&(r.labelDirection=-r.labelDirection);var h=e.rotate;return null==h&&(h=t.get(["axisLabel","rotate"])),r.labelRotation="top"===o?-h:h,r.z2=1,r}var WN=["axisLine","axisTickLabel","axisName"],HN=["splitArea","splitLine"],YN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.axisPointerClass="SingleAxisPointer",n}return n(e,t),e.prototype.render=function(e,n,i,r){var o=this.group;o.removeAll();var a=this._axisGroup;this._axisGroup=new Cr;var s=GN(e),l=new GM(e,s);E(WN,l.add,l),o.add(this._axisGroup),o.add(l.getGroup()),E(HN,(function(t){e.get([t,"show"])&&UN[t](this,this.group,this._axisGroup,e)}),this),Ah(a,this._axisGroup,e),t.prototype.render.call(this,e,n,i,r)},e.prototype.remove=function(){iI(this)},e.type="singleAxis",e}(tI),UN={splitLine:function(t,e,n,i){var r=i.axis;if(!r.scale.isBlank()){var o=i.getModel("splitLine"),a=o.getModel("lineStyle"),s=a.get("color");s=s instanceof Array?s:[s];for(var l=i.coordinateSystem.getRect(),u=r.isHorizontal(),h=[],c=0,p=r.getTicksCoords({tickModel:o}),d=[],f=[],g=0;g<p.length;++g){var y=r.toGlobalCoord(p[g].coord);u?(d[0]=y,d[1]=l.y,f[0]=y,f[1]=l.y+l.height):(d[0]=l.x,d[1]=y,f[0]=l.x+l.width,f[1]=y);var v=c++%s.length;h[v]=h[v]||[],h[v].push(new zu({subPixelOptimize:!0,shape:{x1:d[0],y1:d[1],x2:f[0],y2:f[1]},silent:!0}))}var m=a.getLineStyle(["color"]);for(g=0;g<h.length;++g)e.add(wh(h[g],{style:k({stroke:s[g%s.length]},m),silent:!0}))}},splitArea:function(t,e,n,i){nI(t,n,i,i)}},XN=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.getCoordSysModel=function(){return this},e.type="singleAxis",e.layoutMode="box",e.defaultOption={left:"5%",top:"5%",right:"5%",bottom:"5%",type:"value",position:"bottom",orient:"horizontal",axisLine:{show:!0,lineStyle:{width:1,type:"solid"}},tooltip:{show:!0},axisTick:{show:!0,length:6,lineStyle:{width:1}},axisLabel:{show:!0,interval:"auto"},splitLine:{show:!0,lineStyle:{type:"dashed",opacity:.2}}},e}(Tp);R(XN,p_.prototype);var ZN=function(t){function e(e,n,i,r,o){var a=t.call(this,e,n,i)||this;return a.type=r||"value",a.position=o||"bottom",a}return n(e,t),e.prototype.isHorizontal=function(){var t=this.position;return"top"===t||"bottom"===t},e.prototype.pointToData=function(t,e){return this.coordinateSystem.pointToData(t)[0]},e}(H_),jN=["single"],qN=function(){function t(t,e,n){this.type="single",this.dimension="single",this.dimensions=jN,this.axisPointerEnabled=!0,this.model=t,this._init(t,e,n)}return t.prototype._init=function(t,e,n){var i=this.dimension,r=new ZN(i,o_(t),[0,0],t.get("type"),t.get("position")),o="category"===r.type;r.onBand=o&&t.get("boundaryGap"),r.inverse=t.get("inverse"),r.orient=t.get("orient"),t.axis=r,r.model=t,r.coordinateSystem=this,this._axis=r},t.prototype.update=function(t,e){t.eachSeries((function(t){if(t.coordinateSystem===this){var e=t.getData();E(e.mapDimensionsAll(this.dimension),(function(t){this._axis.scale.unionExtentFromData(e,t)}),this),r_(this._axis.scale,this._axis.model)}}),this)},t.prototype.resize=function(t,e){this._rect=xp({left:t.get("left"),top:t.get("top"),right:t.get("right"),bottom:t.get("bottom"),width:t.get("width"),height:t.get("height")},{width:e.getWidth(),height:e.getHeight()}),this._adjustAxis()},t.prototype.getRect=function(){return this._rect},t.prototype._adjustAxis=function(){var t=this._rect,e=this._axis,n=e.isHorizontal(),i=n?[0,t.width]:[0,t.height],r=e.reverse?1:0;e.setExtent(i[r],i[1-r]),this._updateAxisTransform(e,n?t.x:t.y)},t.prototype._updateAxisTransform=function(t,e){var n=t.getExtent(),i=n[0]+n[1],r=t.isHorizontal();t.toGlobalCoord=r?function(t){return t+e}:function(t){return i-t+e},t.toLocalCoord=r?function(t){return t-e}:function(t){return i-t+e}},t.prototype.getAxis=function(){return this._axis},t.prototype.getBaseAxis=function(){return this._axis},t.prototype.getAxes=function(){return[this._axis]},t.prototype.getTooltipAxes=function(){return{baseAxes:[this.getAxis()],otherAxes:[]}},t.prototype.containPoint=function(t){var e=this.getRect(),n=this.getAxis();return"horizontal"===n.orient?n.contain(n.toLocalCoord(t[0]))&&t[1]>=e.y&&t[1]<=e.y+e.height:n.contain(n.toLocalCoord(t[1]))&&t[0]>=e.y&&t[0]<=e.y+e.height},t.prototype.pointToData=function(t){var e=this.getAxis();return[e.coordToData(e.toLocalCoord(t["horizontal"===e.orient?0:1]))]},t.prototype.dataToPoint=function(t){var e=this.getAxis(),n=this.getRect(),i=[],r="horizontal"===e.orient?0:1;return t instanceof Array&&(t=t[0]),i[r]=e.toGlobalCoord(e.dataToCoord(+t)),i[1-r]=0===r?n.y+n.height/2:n.x+n.width/2,i},t.prototype.convertToPixel=function(t,e,n){return KN(e)===this?this.dataToPoint(n):null},t.prototype.convertFromPixel=function(t,e,n){return KN(e)===this?this.pointToData(n):null},t}();function KN(t){var e=t.seriesModel,n=t.singleAxisModel;return n&&n.coordinateSystem||e&&e.coordinateSystem}var $N={create:function(t,e){var n=[];return t.eachComponent("singleAxis",(function(i,r){var o=new qN(i,t,e);o.name="single_"+r,o.resize(i,e),i.coordinateSystem=o,n.push(o)})),t.eachSeries((function(t){if("singleAxis"===t.get("coordinateSystem")){var e=t.getReferringComponents("singleAxis",Co).models[0];t.coordinateSystem=e&&e.coordinateSystem}})),n},dimensions:jN},JN=["x","y"],QN=["width","height"],tE=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.makeElOption=function(t,e,n,i,r){var o=n.axis,a=o.coordinateSystem,s=iE(a,1-nE(o)),l=a.dataToPoint(e)[0],u=i.get("type");if(u&&"none"!==u){var h=NR(i),c=eE[u](o,l,s);c.style=h,t.graphicKey=c.type,t.pointer=c}BR(e,t,GN(n),n,i,r)},e.prototype.getHandleTransform=function(t,e,n){var i=GN(e,{labelInside:!1});i.labelMargin=n.get(["handle","margin"]);var r=VR(e.axis,t,i);return{x:r[0],y:r[1],rotation:i.rotation+(i.labelDirection<0?Math.PI:0)}},e.prototype.updateHandleTransform=function(t,e,n,i){var r=n.axis,o=r.coordinateSystem,a=nE(r),s=iE(o,a),l=[t.x,t.y];l[a]+=e[a],l[a]=Math.min(s[1],l[a]),l[a]=Math.max(s[0],l[a]);var u=iE(o,1-a),h=(u[1]+u[0])/2,c=[h,h];return c[a]=l[a],{x:l[0],y:l[1],rotation:t.rotation,cursorPoint:c,tooltipOption:{verticalAlign:"middle"}}},e}(AR),eE={line:function(t,e,n){return{type:"Line",subPixelOptimize:!0,shape:FR([e,n[0]],[e,n[1]],nE(t))}},shadow:function(t,e,n){var i=t.getBandWidth(),r=n[1]-n[0];return{type:"Rect",shape:GR([e-i/2,n[0]],[i,r],nE(t))}}};function nE(t){return t.isHorizontal()?0:1}function iE(t,e){var n=t.getRect();return[n[JN[e]],n[JN[e]]+n[QN[e]]]}var rE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="single",e}(gg);var oE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(e,n,i){var r=Sp(e);t.prototype.init.apply(this,arguments),aE(e,r)},e.prototype.mergeOption=function(e){t.prototype.mergeOption.apply(this,arguments),aE(this.option,e)},e.prototype.getCellSize=function(){return this.option.cellSize},e.type="calendar",e.defaultOption={z:2,left:80,top:60,cellSize:20,orient:"horizontal",splitLine:{show:!0,lineStyle:{color:"#000",width:1,type:"solid"}},itemStyle:{color:"#fff",borderWidth:1,borderColor:"#ccc"},dayLabel:{show:!0,firstDay:0,position:"start",margin:"50%",color:"#000"},monthLabel:{show:!0,position:"start",margin:5,align:"center",formatter:null,color:"#000"},yearLabel:{show:!0,position:null,margin:30,formatter:null,color:"#ccc",fontFamily:"sans-serif",fontWeight:"bolder",fontSize:20}},e}(Tp);function aE(t,e){var n,i=t.cellSize;1===(n=Y(i)?i:t.cellSize=[i,i]).length&&(n[1]=n[0]);var r=z([0,1],(function(t){return function(t,e){return null!=t[yp[e][0]]||null!=t[yp[e][1]]&&null!=t[yp[e][2]]}(e,t)&&(n[t]="auto"),null!=n[t]&&"auto"!==n[t]}));wp(t,e,{type:"box",ignoreSize:r})}var sE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){var i=this.group;i.removeAll();var r=t.coordinateSystem,o=r.getRangeInfo(),a=r.getOrient(),s=e.getLocaleModel();this._renderDayRect(t,o,i),this._renderLines(t,o,a,i),this._renderYearText(t,o,a,i),this._renderMonthText(t,s,a,i),this._renderWeekText(t,s,o,a,i)},e.prototype._renderDayRect=function(t,e,n){for(var i=t.coordinateSystem,r=t.getModel("itemStyle").getItemStyle(),o=i.getCellWidth(),a=i.getCellHeight(),s=e.start.time;s<=e.end.time;s=i.getNextNDay(s,1).time){var l=i.dataToRect([s],!1).tl,u=new Cs({shape:{x:l[0],y:l[1],width:o,height:a},cursor:"default",style:r});n.add(u)}},e.prototype._renderLines=function(t,e,n,i){var r=this,o=t.coordinateSystem,a=t.getModel(["splitLine","lineStyle"]).getLineStyle(),s=t.get(["splitLine","show"]),l=a.lineWidth;this._tlpoints=[],this._blpoints=[],this._firstDayOfMonth=[],this._firstDayPoints=[];for(var u=e.start,h=0;u.time<=e.end.time;h++){p(u.formatedDate),0===h&&(u=o.getDateInfo(e.start.y+"-"+e.start.m));var c=u.date;c.setMonth(c.getMonth()+1),u=o.getDateInfo(c)}function p(e){r._firstDayOfMonth.push(o.getDateInfo(e)),r._firstDayPoints.push(o.dataToRect([e],!1).tl);var l=r._getLinePointsOfOneWeek(t,e,n);r._tlpoints.push(l[0]),r._blpoints.push(l[l.length-1]),s&&r._drawSplitline(l,a,i)}p(o.getNextNDay(e.end.time,1).formatedDate),s&&this._drawSplitline(r._getEdgesPoints(r._tlpoints,l,n),a,i),s&&this._drawSplitline(r._getEdgesPoints(r._blpoints,l,n),a,i)},e.prototype._getEdgesPoints=function(t,e,n){var i=[t[0].slice(),t[t.length-1].slice()],r="horizontal"===n?0:1;return i[0][r]=i[0][r]-e/2,i[1][r]=i[1][r]+e/2,i},e.prototype._drawSplitline=function(t,e,n){var i=new Ru({z2:20,shape:{points:t},style:e});n.add(i)},e.prototype._getLinePointsOfOneWeek=function(t,e,n){for(var i=t.coordinateSystem,r=i.getDateInfo(e),o=[],a=0;a<7;a++){var s=i.getNextNDay(r.time,a),l=i.dataToRect([s.time],!1);o[2*s.day]=l.tl,o[2*s.day+1]=l["horizontal"===n?"bl":"tr"]}return o},e.prototype._formatterLabel=function(t,e){return X(t)&&t?(n=t,E(e,(function(t,e){n=n.replace("{"+e+"}",i?ap(t):t)})),n):U(t)?t(e):e.nameMap;var n,i},e.prototype._yearTextPositionControl=function(t,e,n,i,r){var o=e[0],a=e[1],s=["center","bottom"];"bottom"===i?(a+=r,s=["center","top"]):"left"===i?o-=r:"right"===i?(o+=r,s=["center","top"]):a-=r;var l=0;return"left"!==i&&"right"!==i||(l=Math.PI/2),{rotation:l,x:o,y:a,style:{align:s[0],verticalAlign:s[1]}}},e.prototype._renderYearText=function(t,e,n,i){var r=t.getModel("yearLabel");if(r.get("show")){var o=r.get("margin"),a=r.get("position");a||(a="horizontal"!==n?"top":"left");var s=[this._tlpoints[this._tlpoints.length-1],this._blpoints[0]],l=(s[0][0]+s[1][0])/2,u=(s[0][1]+s[1][1])/2,h="horizontal"===n?0:1,c={top:[l,s[h][1]],bottom:[l,s[1-h][1]],left:[s[1-h][0],u],right:[s[h][0],u]},p=e.start.y;+e.end.y>+e.start.y&&(p=p+"-"+e.end.y);var d=r.get("formatter"),f={start:e.start.y,end:e.end.y,nameMap:p},g=this._formatterLabel(d,f),y=new ks({z2:30,style:Uh(r,{text:g})});y.attr(this._yearTextPositionControl(y,c[a],n,a,o)),i.add(y)}},e.prototype._monthTextPositionControl=function(t,e,n,i,r){var o="left",a="top",s=t[0],l=t[1];return"horizontal"===n?(l+=r,e&&(o="center"),"start"===i&&(a="bottom")):(s+=r,e&&(a="middle"),"start"===i&&(o="right")),{x:s,y:l,align:o,verticalAlign:a}},e.prototype._renderMonthText=function(t,e,n,i){var r=t.getModel("monthLabel");if(r.get("show")){var o=r.get("nameMap"),a=r.get("margin"),s=r.get("position"),l=r.get("align"),u=[this._tlpoints,this._blpoints];o&&!X(o)||(o&&(e=Mc(o)||e),o=e.get(["time","monthAbbr"])||[]);var h="start"===s?0:1,c="horizontal"===n?0:1;a="start"===s?-a:a;for(var p="center"===l,d=0;d<u[h].length-1;d++){var f=u[h][d].slice(),g=this._firstDayOfMonth[d];if(p){var y=this._firstDayPoints[d];f[c]=(y[c]+u[0][d+1][c])/2}var v=r.get("formatter"),m=o[+g.m-1],x={yyyy:g.y,yy:(g.y+"").slice(2),MM:g.m,M:+g.m,nameMap:m},_=this._formatterLabel(v,x),b=new ks({z2:30,style:A(Uh(r,{text:_}),this._monthTextPositionControl(f,p,n,s,a))});i.add(b)}}},e.prototype._weekTextPositionControl=function(t,e,n,i,r){var o="center",a="middle",s=t[0],l=t[1],u="start"===n;return"horizontal"===e?(s=s+i+(u?1:-1)*r[0]/2,o=u?"right":"left"):(l=l+i+(u?1:-1)*r[1]/2,a=u?"bottom":"top"),{x:s,y:l,align:o,verticalAlign:a}},e.prototype._renderWeekText=function(t,e,n,i,r){var o=t.getModel("dayLabel");if(o.get("show")){var a=t.coordinateSystem,s=o.get("position"),l=o.get("nameMap"),u=o.get("margin"),h=a.getFirstDayOfWeek();if(!l||X(l))l&&(e=Mc(l)||e),l=e.get(["time","dayOfWeekShort"])||z(e.get(["time","dayOfWeekAbbr"]),(function(t){return t[0]}));var c=a.getNextNDay(n.end.time,7-n.lweek).time,p=[a.getCellWidth(),a.getCellHeight()];u=Er(u,Math.min(p[1],p[0])),"start"===s&&(c=a.getNextNDay(n.start.time,-(7+n.fweek)).time,u=-u);for(var d=0;d<7;d++){var f,g=a.getNextNDay(c,d),y=a.dataToRect([g.time],!1).center;f=Math.abs((d+h)%7);var v=new ks({z2:30,style:A(Uh(o,{text:l[f]}),this._weekTextPositionControl(y,i,s,u,p))});r.add(v)}}},e.type="calendar",e}(gg),lE=864e5,uE=function(){function t(e,n,i){this.type="calendar",this.dimensions=t.dimensions,this.getDimensionsInfo=t.getDimensionsInfo,this._model=e}return t.getDimensionsInfo=function(){return[{name:"time",type:"time"},"value"]},t.prototype.getRangeInfo=function(){return this._rangeInfo},t.prototype.getModel=function(){return this._model},t.prototype.getRect=function(){return this._rect},t.prototype.getCellWidth=function(){return this._sw},t.prototype.getCellHeight=function(){return this._sh},t.prototype.getOrient=function(){return this._orient},t.prototype.getFirstDayOfWeek=function(){return this._firstDayOfWeek},t.prototype.getDateInfo=function(t){var e=(t=jr(t)).getFullYear(),n=t.getMonth()+1,i=n<10?"0"+n:""+n,r=t.getDate(),o=r<10?"0"+r:""+r,a=t.getDay();return{y:e+"",m:i,d:o,day:a=Math.abs((a+7-this.getFirstDayOfWeek())%7),time:t.getTime(),formatedDate:e+"-"+i+"-"+o,date:t}},t.prototype.getNextNDay=function(t,e){return 0===(e=e||0)||(t=new Date(this.getDateInfo(t).time)).setDate(t.getDate()+e),this.getDateInfo(t)},t.prototype.update=function(t,e){this._firstDayOfWeek=+this._model.getModel("dayLabel").get("firstDay"),this._orient=this._model.get("orient"),this._lineWidth=this._model.getModel("itemStyle").getItemStyle().lineWidth||0,this._rangeInfo=this._getRangeInfo(this._initRangeOption());var n=this._rangeInfo.weeks||1,i=["width","height"],r=this._model.getCellSize().slice(),o=this._model.getBoxLayoutParams(),a="horizontal"===this._orient?[n,7]:[7,n];E([0,1],(function(t){u(r,t)&&(o[i[t]]=r[t]*a[t])}));var s={width:e.getWidth(),height:e.getHeight()},l=this._rect=xp(o,s);function u(t,e){return null!=t[e]&&"auto"!==t[e]}E([0,1],(function(t){u(r,t)||(r[t]=l[i[t]]/a[t])})),this._sw=r[0],this._sh=r[1]},t.prototype.dataToPoint=function(t,e){Y(t)&&(t=t[0]),null==e&&(e=!0);var n=this.getDateInfo(t),i=this._rangeInfo,r=n.formatedDate;if(e&&!(n.time>=i.start.time&&n.time<i.end.time+lE))return[NaN,NaN];var o=n.day,a=this._getRangeInfo([i.start.time,r]).nthWeek;return"vertical"===this._orient?[this._rect.x+o*this._sw+this._sw/2,this._rect.y+a*this._sh+this._sh/2]:[this._rect.x+a*this._sw+this._sw/2,this._rect.y+o*this._sh+this._sh/2]},t.prototype.pointToData=function(t){var e=this.pointToDate(t);return e&&e.time},t.prototype.dataToRect=function(t,e){var n=this.dataToPoint(t,e);return{contentShape:{x:n[0]-(this._sw-this._lineWidth)/2,y:n[1]-(this._sh-this._lineWidth)/2,width:this._sw-this._lineWidth,height:this._sh-this._lineWidth},center:n,tl:[n[0]-this._sw/2,n[1]-this._sh/2],tr:[n[0]+this._sw/2,n[1]-this._sh/2],br:[n[0]+this._sw/2,n[1]+this._sh/2],bl:[n[0]-this._sw/2,n[1]+this._sh/2]}},t.prototype.pointToDate=function(t){var e=Math.floor((t[0]-this._rect.x)/this._sw)+1,n=Math.floor((t[1]-this._rect.y)/this._sh)+1,i=this._rangeInfo.range;return"vertical"===this._orient?this._getDateByWeeksAndDay(n,e-1,i):this._getDateByWeeksAndDay(e,n-1,i)},t.prototype.convertToPixel=function(t,e,n){var i=hE(e);return i===this?i.dataToPoint(n):null},t.prototype.convertFromPixel=function(t,e,n){var i=hE(e);return i===this?i.pointToData(n):null},t.prototype.containPoint=function(t){return console.warn("Not implemented."),!1},t.prototype._initRangeOption=function(){var t,e=this._model.get("range");if(Y(e)&&1===e.length&&(e=e[0]),Y(e))t=e;else{var n=e.toString();if(/^\d{4}$/.test(n)&&(t=[n+"-01-01",n+"-12-31"]),/^\d{4}[\/|-]\d{1,2}$/.test(n)){var i=this.getDateInfo(n),r=i.date;r.setMonth(r.getMonth()+1);var o=this.getNextNDay(r,-1);t=[i.formatedDate,o.formatedDate]}/^\d{4}[\/|-]\d{1,2}[\/|-]\d{1,2}$/.test(n)&&(t=[n,n])}if(!t)return e;var a=this._getRangeInfo(t);return a.start.time>a.end.time&&t.reverse(),t},t.prototype._getRangeInfo=function(t){var e,n=[this.getDateInfo(t[0]),this.getDateInfo(t[1])];n[0].time>n[1].time&&(e=!0,n.reverse());var i=Math.floor(n[1].time/lE)-Math.floor(n[0].time/lE)+1,r=new Date(n[0].time),o=r.getDate(),a=n[1].date.getDate();r.setDate(o+i-1);var s=r.getDate();if(s!==a)for(var l=r.getTime()-n[1].time>0?1:-1;(s=r.getDate())!==a&&(r.getTime()-n[1].time)*l>0;)i-=l,r.setDate(s-l);var u=Math.floor((i+n[0].day+6)/7),h=e?1-u:u-1;return e&&n.reverse(),{range:[n[0].formatedDate,n[1].formatedDate],start:n[0],end:n[1],allDay:i,weeks:u,nthWeek:h,fweek:n[0].day,lweek:n[1].day}},t.prototype._getDateByWeeksAndDay=function(t,e,n){var i=this._getRangeInfo(n);if(t>i.weeks||0===t&&e<i.fweek||t===i.weeks&&e>i.lweek)return null;var r=7*(t-1)-i.fweek+e,o=new Date(i.start.time);return o.setDate(+i.start.d+r),this.getDateInfo(o)},t.create=function(e,n){var i=[];return e.eachComponent("calendar",(function(r){var o=new t(r,e,n);i.push(o),r.coordinateSystem=o})),e.eachSeries((function(t){"calendar"===t.get("coordinateSystem")&&(t.coordinateSystem=i[t.get("calendarIndex")||0])})),i},t.dimensions=["time","value"],t}();function hE(t){var e=t.calendarModel,n=t.seriesModel;return e?e.coordinateSystem:n?n.coordinateSystem:null}function cE(t,e){var n;return E(e,(function(e){null!=t[e]&&"auto"!==t[e]&&(n=!0)})),n}var pE=["transition","enterFrom","leaveTo"],dE=pE.concat(["enterAnimation","updateAnimation","leaveAnimation"]);function fE(t,e,n){if(n&&(!t[n]&&e[n]&&(t[n]={}),t=t[n],e=e[n]),t&&e)for(var i=n?pE:dE,r=0;r<i.length;r++){var o=i[r];null==t[o]&&null!=e[o]&&(t[o]=e[o])}}var gE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.preventAutoZ=!0,n}return n(e,t),e.prototype.mergeOption=function(e,n){var i=this.option.elements;this.option.elements=null,t.prototype.mergeOption.call(this,e,n),this.option.elements=i},e.prototype.optionUpdated=function(t,e){var n=this.option,i=(e?n:t).elements,r=n.elements=e?[]:n.elements,o=[];this._flatten(i,o,null);var a=yo(r,o,"normalMerge"),s=this._elOptionsToUpdate=[];E(a,(function(t,e){var n=t.newOption;n&&(s.push(n),function(t,e){var n=t.existing;if(e.id=t.keyInfo.id,!e.type&&n&&(e.type=n.type),null==e.parentId){var i=e.parentOption;i?e.parentId=i.id:n&&(e.parentId=n.parentId)}e.parentOption=null}(t,n),function(t,e,n){var i=A({},n),r=t[e],o=n.$action||"merge";"merge"===o?r?(C(r,i,!0),wp(r,i,{ignoreSize:!0}),Mp(n,r),fE(n,r),fE(n,r,"shape"),fE(n,r,"style"),fE(n,r,"extra"),n.clipPath=r.clipPath):t[e]=i:"replace"===o?t[e]=i:"remove"===o&&r&&(t[e]=null)}(r,e,n),function(t,e){if(t&&(t.hv=e.hv=[cE(e,["left","right"]),cE(e,["top","bottom"])],"group"===t.type)){var n=t,i=e;null==n.width&&(n.width=i.width=0),null==n.height&&(n.height=i.height=0)}}(r[e],n))}),this),n.elements=B(r,(function(t){return t&&delete t.$action,null!=t}))},e.prototype._flatten=function(t,e,n){E(t,(function(t){if(t){n&&(t.parentOption=n),e.push(t);var i=t.children;i&&i.length&&this._flatten(i,e,t),delete t.children}}),this)},e.prototype.useElOptionsToUpdate=function(){var t=this._elOptionsToUpdate;return this._elOptionsToUpdate=null,t},e.type="graphic",e.defaultOption={elements:[]},e}(Tp),yE={path:null,compoundPath:null,group:Cr,image:_s,text:ks},vE=So(),mE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(){this._elMap=ft()},e.prototype.render=function(t,e,n){t!==this._lastGraphicModel&&this._clear(),this._lastGraphicModel=t,this._updateElements(t),this._relocate(t,n)},e.prototype._updateElements=function(t){var e=t.useElOptionsToUpdate();if(e){var n=this._elMap,i=this.group,r=t.get("z"),o=t.get("zlevel");E(e,(function(e){var a=xo(e.id,null),s=null!=a?n.get(a):null,l=xo(e.parentId,null),u=null!=l?n.get(l):i,h=e.type,c=e.style;"text"===h&&c&&e.hv&&e.hv[1]&&(c.textVerticalAlign=c.textBaseline=c.verticalAlign=c.align=null);var p=e.textContent,d=e.textConfig;if(c&&CO(c,h,!!d,!!p)){var f=DO(c,h,!0);!d&&f.textConfig&&(d=e.textConfig=f.textConfig),!p&&f.textContent&&(p=f.textContent)}var g=function(t){return t=A({},t),E(["id","parentId","$action","hv","bounding","textContent","clipPath"].concat(gp),(function(e){delete t[e]})),t}(e);var y=e.$action||"merge",v="merge"===y,m="replace"===y;if(v){var x=s;(T=!s)?x=_E(a,u,e.type,n):(x&&(vE(x).isNew=!1),qO(x)),x&&(zO(x,g,t,{isInit:T}),wE(x,e,r,o))}else if(m){bE(s,e,n,t);var _=_E(a,u,e.type,n);_&&(zO(_,g,t,{isInit:!0}),wE(_,e,r,o))}else"remove"===y&&(VO(s,e),bE(s,e,n,t));var b=n.get(a);if(b&&p)if(v){var w=b.getTextContent();w?w.attr(p):b.setTextContent(new ks(p))}else m&&b.setTextContent(new ks(p));if(b){var S=e.clipPath;if(S){var M=S.type,I=void 0,T=!1;if(v){var C=b.getClipPath();I=(T=!C||vE(C).type!==M)?xE(M):C}else m&&(T=!0,I=xE(M));b.setClipPath(I),zO(I,S,t,{isInit:T}),KO(I,S.keyframeAnimation,t)}var D=vE(b);b.setTextConfig(d),D.option=e,function(t,e,n){var i=Hs(t).eventData;t.silent||t.ignore||i||(i=Hs(t).eventData={componentType:"graphic",componentIndex:e.componentIndex,name:t.name});i&&(i.info=n.info)}(b,t,e),Eh({el:b,componentModel:t,itemName:b.name,itemTooltipOption:e.tooltip}),KO(b,e.keyframeAnimation,t)}}))}},e.prototype._relocate=function(t,e){for(var n=t.option.elements,i=this.group,r=this._elMap,o=e.getWidth(),a=e.getHeight(),s=["x","y"],l=0;l<n.length;l++){if((f=null!=(d=xo((p=n[l]).id,null))?r.get(d):null)&&f.isGroup){var u=(g=f.parent)===i,h=vE(f),c=vE(g);h.width=Er(h.option.width,u?o:c.width)||0,h.height=Er(h.option.height,u?a:c.height)||0}}for(l=n.length-1;l>=0;l--){var p,d,f;if(f=null!=(d=xo((p=n[l]).id,null))?r.get(d):null){var g=f.parent,y=(c=vE(g),{}),v=_p(f,p,g===i?{width:o,height:a}:{width:c.width,height:c.height},null,{hv:p.hv,boundingMode:p.bounding},y);if(!vE(f).isNew&&v){for(var m=p.transition,x={},_=0;_<s.length;_++){var b=s[_],w=y[b];m&&(FO(m)||P(m,b)>=0)?x[b]=w:f[b]=w}rh(f,x,t,0)}else f.attr(y)}}},e.prototype._clear=function(){var t=this,e=this._elMap;e.each((function(n){bE(n,vE(n).option,e,t._lastGraphicModel)})),this._elMap=ft()},e.prototype.dispose=function(){this._clear()},e.type="graphic",e}(gg);function xE(t){var e=mt(yE,t)?yE[t]:mh(t);var n=new e({});return vE(n).type=t,n}function _E(t,e,n,i){var r=xE(n);return e.add(r),i.set(t,r),vE(r).id=t,vE(r).isNew=!0,r}function bE(t,e,n,i){t&&t.parent&&("group"===t.type&&t.traverse((function(t){bE(t,e,n,i)})),BO(t,e,i),n.removeKey(vE(t).id))}function wE(t,e,n,i){t.isGroup||E([["cursor",da.prototype.cursor],["zlevel",i||0],["z",n||0],["z2",0]],(function(n){var i=n[0];mt(e,i)?t[i]=rt(e[i],n[1]):null==t[i]&&(t[i]=n[1])})),E(G(e),(function(n){if(0===n.indexOf("on")){var i=e[n];t[n]=U(i)?i:null}})),mt(e,"draggable")&&(t.draggable=e.draggable),null!=e.name&&(t.name=e.name),null!=e.id&&(t.id=e.id)}var SE=["x","y","radius","angle","single"],ME=["cartesian2d","polar","singleAxis"];function IE(t){return t+"Axis"}function TE(t,e){var n,i=ft(),r=[],o=ft();t.eachComponent({mainType:"dataZoom",query:e},(function(t){o.get(t.uid)||s(t)}));do{n=!1,t.eachComponent("dataZoom",a)}while(n);function a(t){!o.get(t.uid)&&function(t){var e=!1;return t.eachTargetAxis((function(t,n){var r=i.get(t);r&&r[n]&&(e=!0)})),e}(t)&&(s(t),n=!0)}function s(t){o.set(t.uid,!0),r.push(t),t.eachTargetAxis((function(t,e){(i.get(t)||i.set(t,[]))[e]=!0}))}return r}function CE(t){var e=t.ecModel,n={infoList:[],infoMap:ft()};return t.eachTargetAxis((function(t,i){var r=e.getComponent(IE(t),i);if(r){var o=r.getCoordSysModel();if(o){var a=o.uid,s=n.infoMap.get(a);s||(s={model:o,axisModels:[]},n.infoList.push(s),n.infoMap.set(a,s)),s.axisModels.push(r)}}})),n}var DE=function(){function t(){this.indexList=[],this.indexMap=[]}return t.prototype.add=function(t){this.indexMap[t]||(this.indexList.push(t),this.indexMap[t]=!0)},t}(),AE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._autoThrottle=!0,n._noTarget=!0,n._rangePropMode=["percent","percent"],n}return n(e,t),e.prototype.init=function(t,e,n){var i=kE(t);this.settledOption=i,this.mergeDefaultAndTheme(t,n),this._doInit(i)},e.prototype.mergeOption=function(t){var e=kE(t);C(this.option,t,!0),C(this.settledOption,e,!0),this._doInit(e)},e.prototype._doInit=function(t){var e=this.option;this._setDefaultThrottle(t),this._updateRangeUse(t);var n=this.settledOption;E([["start","startValue"],["end","endValue"]],(function(t,i){"value"===this._rangePropMode[i]&&(e[t[0]]=n[t[0]]=null)}),this),this._resetTarget()},e.prototype._resetTarget=function(){var t=this.get("orient",!0),e=this._targetAxisInfoMap=ft();this._fillSpecifiedTargetAxis(e)?this._orient=t||this._makeAutoOrientByTargetAxis():(this._orient=t||"horizontal",this._fillAutoTargetAxisByOrient(e,this._orient)),this._noTarget=!0,e.each((function(t){t.indexList.length&&(this._noTarget=!1)}),this)},e.prototype._fillSpecifiedTargetAxis=function(t){var e=!1;return E(SE,(function(n){var i=this.getReferringComponents(IE(n),Do);if(i.specified){e=!0;var r=new DE;E(i.models,(function(t){r.add(t.componentIndex)})),t.set(n,r)}}),this),e},e.prototype._fillAutoTargetAxisByOrient=function(t,e){var n=this.ecModel,i=!0;if(i){var r="vertical"===e?"y":"x";o(n.findComponents({mainType:r+"Axis"}),r)}i&&o(n.findComponents({mainType:"singleAxis",filter:function(t){return t.get("orient",!0)===e}}),"single");function o(e,n){var r=e[0];if(r){var o=new DE;if(o.add(r.componentIndex),t.set(n,o),i=!1,"x"===n||"y"===n){var a=r.getReferringComponents("grid",Co).models[0];a&&E(e,(function(t){r.componentIndex!==t.componentIndex&&a===t.getReferringComponents("grid",Co).models[0]&&o.add(t.componentIndex)}))}}}i&&E(SE,(function(e){if(i){var r=n.findComponents({mainType:IE(e),filter:function(t){return"category"===t.get("type",!0)}});if(r[0]){var o=new DE;o.add(r[0].componentIndex),t.set(e,o),i=!1}}}),this)},e.prototype._makeAutoOrientByTargetAxis=function(){var t;return this.eachTargetAxis((function(e){!t&&(t=e)}),this),"y"===t?"vertical":"horizontal"},e.prototype._setDefaultThrottle=function(t){if(t.hasOwnProperty("throttle")&&(this._autoThrottle=!1),this._autoThrottle){var e=this.ecModel.option;this.option.throttle=e.animation&&e.animationDurationUpdate>0?100:20}},e.prototype._updateRangeUse=function(t){var e=this._rangePropMode,n=this.get("rangeMode");E([["start","startValue"],["end","endValue"]],(function(i,r){var o=null!=t[i[0]],a=null!=t[i[1]];o&&!a?e[r]="percent":!o&&a?e[r]="value":n?e[r]=n[r]:o&&(e[r]="percent")}))},e.prototype.noTarget=function(){return this._noTarget},e.prototype.getFirstTargetAxisModel=function(){var t;return this.eachTargetAxis((function(e,n){null==t&&(t=this.ecModel.getComponent(IE(e),n))}),this),t},e.prototype.eachTargetAxis=function(t,e){this._targetAxisInfoMap.each((function(n,i){E(n.indexList,(function(n){t.call(e,i,n)}))}))},e.prototype.getAxisProxy=function(t,e){var n=this.getAxisModel(t,e);if(n)return n.__dzAxisProxy},e.prototype.getAxisModel=function(t,e){var n=this._targetAxisInfoMap.get(t);if(n&&n.indexMap[e])return this.ecModel.getComponent(IE(t),e)},e.prototype.setRawRange=function(t){var e=this.option,n=this.settledOption;E([["start","startValue"],["end","endValue"]],(function(i){null==t[i[0]]&&null==t[i[1]]||(e[i[0]]=n[i[0]]=t[i[0]],e[i[1]]=n[i[1]]=t[i[1]])}),this),this._updateRangeUse(t)},e.prototype.setCalculatedRange=function(t){var e=this.option;E(["start","startValue","end","endValue"],(function(n){e[n]=t[n]}))},e.prototype.getPercentRange=function(){var t=this.findRepresentativeAxisProxy();if(t)return t.getDataPercentWindow()},e.prototype.getValueRange=function(t,e){if(null!=t||null!=e)return this.getAxisProxy(t,e).getDataValueWindow();var n=this.findRepresentativeAxisProxy();return n?n.getDataValueWindow():void 0},e.prototype.findRepresentativeAxisProxy=function(t){if(t)return t.__dzAxisProxy;for(var e,n=this._targetAxisInfoMap.keys(),i=0;i<n.length;i++)for(var r=n[i],o=this._targetAxisInfoMap.get(r),a=0;a<o.indexList.length;a++){var s=this.getAxisProxy(r,o.indexList[a]);if(s.hostedBy(this))return s;e||(e=s)}return e},e.prototype.getRangePropMode=function(){return this._rangePropMode.slice()},e.prototype.getOrient=function(){return this._orient},e.type="dataZoom",e.dependencies=["xAxis","yAxis","radiusAxis","angleAxis","singleAxis","series","toolbox"],e.defaultOption={z:4,filterMode:"filter",start:0,end:100},e}(Tp);function kE(t){var e={};return E(["start","end","startValue","endValue","throttle"],(function(n){t.hasOwnProperty(n)&&(e[n]=t[n])})),e}var LE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="dataZoom.select",e}(AE),PE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n,i){this.dataZoomModel=t,this.ecModel=e,this.api=n},e.type="dataZoom",e}(gg),OE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="dataZoom.select",e}(PE),RE=E,NE=Vr,EE=function(){function t(t,e,n,i){this._dimName=t,this._axisIndex=e,this.ecModel=i,this._dataZoomModel=n}return t.prototype.hostedBy=function(t){return this._dataZoomModel===t},t.prototype.getDataValueWindow=function(){return this._valueWindow.slice()},t.prototype.getDataPercentWindow=function(){return this._percentWindow.slice()},t.prototype.getTargetSeriesModels=function(){var t=[];return this.ecModel.eachSeries((function(e){if(function(t){var e=t.get("coordinateSystem");return P(ME,e)>=0}(e)){var n=IE(this._dimName),i=e.getReferringComponents(n,Co).models[0];i&&this._axisIndex===i.componentIndex&&t.push(e)}}),this),t},t.prototype.getAxisModel=function(){return this.ecModel.getComponent(this._dimName+"Axis",this._axisIndex)},t.prototype.getMinMaxSpan=function(){return T(this._minMaxSpan)},t.prototype.calculateDataWindow=function(t){var e,n=this._dataExtent,i=this.getAxisModel().axis.scale,r=this._dataZoomModel.getRangePropMode(),o=[0,100],a=[],s=[];RE(["start","end"],(function(l,u){var h=t[l],c=t[l+"Value"];"percent"===r[u]?(null==h&&(h=o[u]),c=i.parse(Nr(h,o,n))):(e=!0,h=Nr(c=null==c?n[u]:i.parse(c),n,o)),s[u]=c,a[u]=h})),NE(s),NE(a);var l=this._minMaxSpan;function u(t,e,n,r,o){var a=o?"Span":"ValueSpan";lk(0,t,n,"all",l["min"+a],l["max"+a]);for(var s=0;s<2;s++)e[s]=Nr(t[s],n,r,!0),o&&(e[s]=i.parse(e[s]))}return e?u(s,a,n,o,!1):u(a,s,o,n,!0),{valueWindow:s,percentWindow:a}},t.prototype.reset=function(t){if(t===this._dataZoomModel){var e=this.getTargetSeriesModels();this._dataExtent=function(t,e,n){var i=[1/0,-1/0];RE(n,(function(t){!function(t,e,n){e&&E(c_(e,n),(function(n){var i=e.getApproximateExtent(n);i[0]<t[0]&&(t[0]=i[0]),i[1]>t[1]&&(t[1]=i[1])}))}(i,t.getData(),e)}));var r=t.getAxisModel(),o=e_(r.axis.scale,r,i).calculate();return[o.min,o.max]}(this,this._dimName,e),this._updateMinMaxSpan();var n=this.calculateDataWindow(t.settledOption);this._valueWindow=n.valueWindow,this._percentWindow=n.percentWindow,this._setAxisModel()}},t.prototype.filterData=function(t,e){if(t===this._dataZoomModel){var n=this._dimName,i=this.getTargetSeriesModels(),r=t.get("filterMode"),o=this._valueWindow;"none"!==r&&RE(i,(function(t){var e=t.getData(),i=e.mapDimensionsAll(n);if(i.length){if("weakFilter"===r){var a=e.getStore(),s=z(i,(function(t){return e.getDimensionIndex(t)}),e);e.filterSelf((function(t){for(var e,n,r,l=0;l<i.length;l++){var u=a.get(s[l],t),h=!isNaN(u),c=u<o[0],p=u>o[1];if(h&&!c&&!p)return!0;h&&(r=!0),c&&(e=!0),p&&(n=!0)}return r&&e&&n}))}else RE(i,(function(n){if("empty"===r)t.setData(e=e.map(n,(function(t){return function(t){return t>=o[0]&&t<=o[1]}(t)?t:NaN})));else{var i={};i[n]=o,e.selectRange(i)}}));RE(i,(function(t){e.setApproximateExtent(o,t)}))}}))}},t.prototype._updateMinMaxSpan=function(){var t=this._minMaxSpan={},e=this._dataZoomModel,n=this._dataExtent;RE(["min","max"],(function(i){var r=e.get(i+"Span"),o=e.get(i+"ValueSpan");null!=o&&(o=this.getAxisModel().axis.scale.parse(o)),null!=o?r=Nr(n[0]+o,n,[0,100],!0):null!=r&&(o=Nr(r,[0,100],n,!0)-n[0]),t[i+"Span"]=r,t[i+"ValueSpan"]=o}),this)},t.prototype._setAxisModel=function(){var t=this.getAxisModel(),e=this._percentWindow,n=this._valueWindow;if(e){var i=Gr(n,[0,500]);i=Math.min(i,20);var r=t.axis.scale.rawExtentInfo;0!==e[0]&&r.setDeterminedMinMax("min",+n[0].toFixed(i)),100!==e[1]&&r.setDeterminedMinMax("max",+n[1].toFixed(i)),r.freeze()}},t}();var zE={getTargetSeries:function(t){function e(e){t.eachComponent("dataZoom",(function(n){n.eachTargetAxis((function(i,r){var o=t.getComponent(IE(i),r);e(i,r,o,n)}))}))}e((function(t,e,n,i){n.__dzAxisProxy=null}));var n=[];e((function(e,i,r,o){r.__dzAxisProxy||(r.__dzAxisProxy=new EE(e,i,o,t),n.push(r.__dzAxisProxy))}));var i=ft();return E(n,(function(t){E(t.getTargetSeriesModels(),(function(t){i.set(t.uid,t)}))})),i},overallReset:function(t,e){t.eachComponent("dataZoom",(function(t){t.eachTargetAxis((function(e,n){t.getAxisProxy(e,n).reset(t)})),t.eachTargetAxis((function(n,i){t.getAxisProxy(n,i).filterData(t,e)}))})),t.eachComponent("dataZoom",(function(t){var e=t.findRepresentativeAxisProxy();if(e){var n=e.getDataPercentWindow(),i=e.getDataValueWindow();t.setCalculatedRange({start:n[0],end:n[1],startValue:i[0],endValue:i[1]})}}))}};var VE=!1;function BE(t){VE||(VE=!0,t.registerProcessor(t.PRIORITY.PROCESSOR.FILTER,zE),function(t){t.registerAction("dataZoom",(function(t,e){E(TE(e,t),(function(e){e.setRawRange({start:t.start,end:t.end,startValue:t.startValue,endValue:t.endValue})}))}))}(t),t.registerSubTypeDefaulter("dataZoom",(function(){return"slider"})))}function FE(t){t.registerComponentModel(LE),t.registerComponentView(OE),BE(t)}var GE=function(){},WE={};function HE(t,e){WE[t]=e}function YE(t){return WE[t]}var UE=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.optionUpdated=function(){t.prototype.optionUpdated.apply(this,arguments);var e=this.ecModel;E(this.option.feature,(function(t,n){var i=YE(n);i&&(i.getDefaultOption&&(i.defaultOption=i.getDefaultOption(e)),C(t,i.defaultOption))}))},e.type="toolbox",e.layoutMode={type:"box",ignoreSize:!0},e.defaultOption={show:!0,z:6,orient:"horizontal",left:"right",top:"top",backgroundColor:"transparent",borderColor:"#ccc",borderRadius:0,borderWidth:0,padding:5,itemSize:15,itemGap:8,showTitle:!0,iconStyle:{borderColor:"#666",color:"none"},emphasis:{iconStyle:{borderColor:"#3E98C5"}},tooltip:{show:!1,position:"bottom"}},e}(Tp);function XE(t,e){var n=ip(e.get("padding")),i=e.getItemStyle(["color","opacity"]);return i.fill=e.get("backgroundColor"),t=new Cs({shape:{x:t.x-n[3],y:t.y-n[0],width:t.width+n[1]+n[3],height:t.height+n[0]+n[2],r:e.get("borderRadius")},style:i,silent:!0,z2:-1})}var ZE=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.render=function(t,e,n,i){var r=this.group;if(r.removeAll(),t.get("show")){var o=+t.get("itemSize"),a="vertical"===t.get("orient"),s=t.get("feature")||{},l=this._features||(this._features={}),u=[];E(s,(function(t,e){u.push(e)})),new Im(this._featureNames||[],u).add(h).update(h).remove(H(h,null)).execute(),this._featureNames=u,function(t,e,n){var i=e.getBoxLayoutParams(),r=e.get("padding"),o={width:n.getWidth(),height:n.getHeight()},a=xp(i,o,r);mp(e.get("orient"),t,e.get("itemGap"),a.width,a.height),_p(t,i,o,r)}(r,t,n),r.add(XE(r.getBoundingRect(),t)),a||r.eachChild((function(t){var e=t.__title,i=t.ensureState("emphasis"),a=i.textConfig||(i.textConfig={}),s=t.getTextContent(),l=s&&s.ensureState("emphasis");if(l&&!U(l)&&e){var u=l.style||(l.style={}),h=cr(e,ks.makeFont(u)),c=t.x+r.x,p=!1;t.y+r.y+o+h.height>n.getHeight()&&(a.position="top",p=!0);var d=p?-5-h.height:o+10;c+h.width/2>n.getWidth()?(a.position=["100%",d],u.align="right"):c-h.width/2<0&&(a.position=[0,d],u.align="left")}}))}function h(h,c){var p,d=u[h],f=u[c],g=s[d],y=new dc(g,t,t.ecModel);if(i&&null!=i.newTitle&&i.featureName===d&&(g.title=i.newTitle),d&&!f){if(function(t){return 0===t.indexOf("my")}(d))p={onclick:y.option.onclick,featureName:d};else{var v=YE(d);if(!v)return;p=new v}l[d]=p}else if(!(p=l[f]))return;p.uid=gc("toolbox-feature"),p.model=y,p.ecModel=e,p.api=n;var m=p instanceof GE;d||!f?!y.get("show")||m&&p.unusable?m&&p.remove&&p.remove(e,n):(!function(i,s,l){var u,h,c=i.getModel("iconStyle"),p=i.getModel(["emphasis","iconStyle"]),d=s instanceof GE&&s.getIcons?s.getIcons():i.get("icon"),f=i.get("title")||{};X(d)?(u={})[l]=d:u=d;X(f)?(h={})[l]=f:h=f;var g=i.iconPaths={};E(u,(function(l,u){var d=Ph(l,{},{x:-o/2,y:-o/2,width:o,height:o});d.setStyle(c.getItemStyle()),d.ensureState("emphasis").style=p.getItemStyle();var f=new ks({style:{text:h[u],align:p.get("textAlign"),borderRadius:p.get("textBorderRadius"),padding:p.get("textPadding"),fill:null},ignore:!0});d.setTextContent(f),Eh({el:d,componentModel:t,itemName:u,formatterParamsExtra:{title:h[u]}}),d.__title=h[u],d.on("mouseover",(function(){var e=p.getItemStyle(),i=a?null==t.get("right")&&"right"!==t.get("left")?"right":"left":null==t.get("bottom")&&"bottom"!==t.get("top")?"bottom":"top";f.setStyle({fill:p.get("textFill")||e.fill||e.stroke||"#000",backgroundColor:p.get("textBackgroundColor")}),d.setTextConfig({position:p.get("textPosition")||i}),f.ignore=!t.get("showTitle"),n.enterEmphasis(this)})).on("mouseout",(function(){"emphasis"!==i.get(["iconStatus",u])&&n.leaveEmphasis(this),f.hide()})),("emphasis"===i.get(["iconStatus",u])?_l:bl)(d),r.add(d),d.on("click",W(s.onclick,s,e,n,u)),g[u]=d}))}(y,p,d),y.setIconStatus=function(t,e){var n=this.option,i=this.iconPaths;n.iconStatus=n.iconStatus||{},n.iconStatus[t]=e,i[t]&&("emphasis"===e?_l:bl)(i[t])},p instanceof GE&&p.render&&p.render(y,e,n,i)):m&&p.dispose&&p.dispose(e,n)}},e.prototype.updateView=function(t,e,n,i){E(this._features,(function(t){t instanceof GE&&t.updateView&&t.updateView(t.model,e,n,i)}))},e.prototype.remove=function(t,e){E(this._features,(function(n){n instanceof GE&&n.remove&&n.remove(t,e)})),this.group.removeAll()},e.prototype.dispose=function(t,e){E(this._features,(function(n){n instanceof GE&&n.dispose&&n.dispose(t,e)}))},e.type="toolbox",e}(gg);var jE=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.onclick=function(t,e){var n=this.model,i=n.get("name")||t.get("title.0.text")||"echarts",o="svg"===e.getZr().painter.getType(),a=o?"svg":n.get("type",!0)||"png",s=e.getConnectedDataURL({type:a,backgroundColor:n.get("backgroundColor",!0)||t.get("backgroundColor")||"#fff",connectedBackgroundColor:n.get("connectedBackgroundColor"),excludeComponents:n.get("excludeComponents"),pixelRatio:n.get("pixelRatio")}),l=r.browser;if(U(MouseEvent)&&(l.newEdge||!l.ie&&!l.edge)){var u=document.createElement("a");u.download=i+"."+a,u.target="_blank",u.href=s;var h=new MouseEvent("click",{view:document.defaultView,bubbles:!0,cancelable:!1});u.dispatchEvent(h)}else if(window.navigator.msSaveOrOpenBlob||o){var c=s.split(","),p=c[0].indexOf("base64")>-1,d=o?decodeURIComponent(c[1]):c[1];p&&(d=window.atob(d));var f=i+"."+a;if(window.navigator.msSaveOrOpenBlob){for(var g=d.length,y=new Uint8Array(g);g--;)y[g]=d.charCodeAt(g);var v=new Blob([y]);window.navigator.msSaveOrOpenBlob(v,f)}else{var m=document.createElement("iframe");document.body.appendChild(m);var x=m.contentWindow,_=x.document;_.open("image/svg+xml","replace"),_.write(d),_.close(),x.focus(),_.execCommand("SaveAs",!0,f),document.body.removeChild(m)}}else{var b=n.get("lang"),w='<body style="margin:0;"><img src="'+s+'" style="max-width:100%;" title="'+(b&&b[0]||"")+'" /></body>',S=window.open();S.document.write(w),S.document.title=i}},e.getDefaultOption=function(t){return{show:!0,icon:"M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0",title:t.getLocaleModel().get(["toolbox","saveAsImage","title"]),type:"png",connectedBackgroundColor:"#fff",name:"",excludeComponents:["toolbox"],lang:t.getLocaleModel().get(["toolbox","saveAsImage","lang"])}},e}(GE),qE="__ec_magicType_stack__",KE=[["line","bar"],["stack"]],$E=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.getIcons=function(){var t=this.model,e=t.get("icon"),n={};return E(t.get("type"),(function(t){e[t]&&(n[t]=e[t])})),n},e.getDefaultOption=function(t){return{show:!0,type:[],icon:{line:"M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4",bar:"M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7",stack:"M8.2,38.4l-8.4,4.1l30.6,15.3L60,42.5l-8.1-4.1l-21.5,11L8.2,38.4z M51.9,30l-8.1,4.2l-13.4,6.9l-13.9-6.9L8.2,30l-8.4,4.2l8.4,4.2l22.2,11l21.5-11l8.1-4.2L51.9,30z M51.9,21.7l-8.1,4.2L35.7,30l-5.3,2.8L24.9,30l-8.4-4.1l-8.3-4.2l-8.4,4.2L8.2,30l8.3,4.2l13.9,6.9l13.4-6.9l8.1-4.2l8.1-4.1L51.9,21.7zM30.4,2.2L-0.2,17.5l8.4,4.1l8.3,4.2l8.4,4.2l5.5,2.7l5.3-2.7l8.1-4.2l8.1-4.2l8.1-4.1L30.4,2.2z"},title:t.getLocaleModel().get(["toolbox","magicType","title"]),option:{},seriesIndex:{}}},e.prototype.onclick=function(t,e,n){var i=this.model,r=i.get(["seriesIndex",n]);if(JE[n]){var o,a={series:[]};E(KE,(function(t){P(t,n)>=0&&E(t,(function(t){i.setIconStatus(t,"normal")}))})),i.setIconStatus(n,"emphasis"),t.eachComponent({mainType:"series",query:null==r?null:{seriesIndex:r}},(function(t){var e=t.subType,r=t.id,o=JE[n](e,r,t,i);o&&(k(o,t.option),a.series.push(o));var s=t.coordinateSystem;if(s&&"cartesian2d"===s.type&&("line"===n||"bar"===n)){var l=s.getAxesByScale("ordinal")[0];if(l){var u=l.dim+"Axis",h=t.getReferringComponents(u,Co).models[0].componentIndex;a[u]=a[u]||[];for(var c=0;c<=h;c++)a[u][h]=a[u][h]||{};a[u][h].boundaryGap="bar"===n}}}));var s=n;"stack"===n&&(o=C({stack:i.option.title.tiled,tiled:i.option.title.stack},i.option.title),"emphasis"!==i.get(["iconStatus",n])&&(s="tiled")),e.dispatchAction({type:"changeMagicType",currentType:s,newOption:a,newTitle:o,featureName:"magicType"})}},e}(GE),JE={line:function(t,e,n,i){if("bar"===t)return C({id:e,type:"line",data:n.get("data"),stack:n.get("stack"),markPoint:n.get("markPoint"),markLine:n.get("markLine")},i.get(["option","line"])||{},!0)},bar:function(t,e,n,i){if("line"===t)return C({id:e,type:"bar",data:n.get("data"),stack:n.get("stack"),markPoint:n.get("markPoint"),markLine:n.get("markLine")},i.get(["option","bar"])||{},!0)},stack:function(t,e,n,i){var r=n.get("stack")===qE;if("line"===t||"bar"===t)return i.setIconStatus("stack",r?"normal":"emphasis"),C({id:e,stack:r?"":qE},i.get(["option","stack"])||{},!0)}};cm({type:"changeMagicType",event:"magicTypeChanged",update:"prepareAndUpdate"},(function(t,e){e.mergeOption(t.newOption)}));var QE=new Array(60).join("-"),tz="\t";function ez(t){return t.replace(/^\s\s*/,"").replace(/\s\s*$/,"")}var nz=new RegExp("[\t]+","g");function iz(t,e){var n=t.split(new RegExp("\n*"+QE+"\n*","g")),i={series:[]};return E(n,(function(t,n){if(function(t){if(t.slice(0,t.indexOf("\n")).indexOf(tz)>=0)return!0}(t)){var r=function(t){for(var e=t.split(/\n+/g),n=[],i=z(ez(e.shift()).split(nz),(function(t){return{name:t,data:[]}})),r=0;r<e.length;r++){var o=ez(e[r]).split(nz);n.push(o.shift());for(var a=0;a<o.length;a++)i[a]&&(i[a].data[r]=o[a])}return{series:i,categories:n}}(t),o=e[n],a=o.axisDim+"Axis";o&&(i[a]=i[a]||[],i[a][o.axisIndex]={data:r.categories},i.series=i.series.concat(r.series))}else{r=function(t){for(var e=t.split(/\n+/g),n=ez(e.shift()),i=[],r=0;r<e.length;r++){var o=ez(e[r]);if(o){var a=o.split(nz),s="",l=void 0,u=!1;isNaN(a[0])?(u=!0,s=a[0],a=a.slice(1),i[r]={name:s,value:[]},l=i[r].value):l=i[r]=[];for(var h=0;h<a.length;h++)l.push(+a[h]);1===l.length&&(u?i[r].value=l[0]:i[r]=l[0])}}return{name:n,data:i}}(t);i.series.push(r)}})),i}var rz=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.onclick=function(t,e){setTimeout((function(){e.dispatchAction({type:"hideTip"})}));var n=e.getDom(),i=this.model;this._dom&&n.removeChild(this._dom);var r=document.createElement("div");r.style.cssText="position:absolute;top:0;bottom:0;left:0;right:0;padding:5px",r.style.backgroundColor=i.get("backgroundColor")||"#fff";var o=document.createElement("h4"),a=i.get("lang")||[];o.innerHTML=a[0]||i.get("title"),o.style.cssText="margin:10px 20px",o.style.color=i.get("textColor");var s=document.createElement("div"),l=document.createElement("textarea");s.style.cssText="overflow:auto";var u=i.get("optionToContent"),h=i.get("contentToOption"),c=function(t){var e,n,i,r=function(t){var e={},n=[],i=[];return t.eachRawSeries((function(t){var r=t.coordinateSystem;if(!r||"cartesian2d"!==r.type&&"polar"!==r.type)n.push(t);else{var o=r.getBaseAxis();if("category"===o.type){var a=o.dim+"_"+o.index;e[a]||(e[a]={categoryAxis:o,valueAxis:r.getOtherAxis(o),series:[]},i.push({axisDim:o.dim,axisIndex:o.index})),e[a].series.push(t)}else n.push(t)}})),{seriesGroupByCategoryAxis:e,other:n,meta:i}}(t);return{value:B([(n=r.seriesGroupByCategoryAxis,i=[],E(n,(function(t,e){var n=t.categoryAxis,r=t.valueAxis.dim,o=[" "].concat(z(t.series,(function(t){return t.name}))),a=[n.model.getCategories()];E(t.series,(function(t){var e=t.getRawData();a.push(t.getRawData().mapArray(e.mapDimension(r),(function(t){return t})))}));for(var s=[o.join(tz)],l=0;l<a[0].length;l++){for(var u=[],h=0;h<a.length;h++)u.push(a[h][l]);s.push(u.join(tz))}i.push(s.join("\n"))})),i.join("\n\n"+QE+"\n\n")),(e=r.other,z(e,(function(t){var e=t.getRawData(),n=[t.name],i=[];return e.each(e.dimensions,(function(){for(var t=arguments.length,r=arguments[t-1],o=e.getName(r),a=0;a<t-1;a++)i[a]=arguments[a];n.push((o?o+tz:"")+i.join(tz))})),n.join("\n")})).join("\n\n"+QE+"\n\n"))],(function(t){return!!t.replace(/[\n\t\s]/g,"")})).join("\n\n"+QE+"\n\n"),meta:r.meta}}(t);if(U(u)){var p=u(e.getOption());X(p)?s.innerHTML=p:J(p)&&s.appendChild(p)}else{l.readOnly=i.get("readOnly");var d=l.style;d.cssText="display:block;width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;resize:none;box-sizing:border-box;outline:none",d.color=i.get("textColor"),d.borderColor=i.get("textareaBorderColor"),d.backgroundColor=i.get("textareaColor"),l.value=c.value,s.appendChild(l)}var f=c.meta,g=document.createElement("div");g.style.cssText="position:absolute;bottom:5px;left:0;right:0";var y="float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px",v=document.createElement("div"),m=document.createElement("div");y+=";background-color:"+i.get("buttonColor"),y+=";color:"+i.get("buttonTextColor");var x=this;function _(){n.removeChild(r),x._dom=null}ae(v,"click",_),ae(m,"click",(function(){if(null==h&&null!=u||null!=h&&null==u)_();else{var t;try{t=U(h)?h(s,e.getOption()):iz(l.value,f)}catch(t){throw _(),new Error("Data view format error "+t)}t&&e.dispatchAction({type:"changeDataView",newOption:t}),_()}})),v.innerHTML=a[1],m.innerHTML=a[2],m.style.cssText=v.style.cssText=y,!i.get("readOnly")&&g.appendChild(m),g.appendChild(v),r.appendChild(o),r.appendChild(s),r.appendChild(g),s.style.height=n.clientHeight-80+"px",n.appendChild(r),this._dom=r},e.prototype.remove=function(t,e){this._dom&&e.getDom().removeChild(this._dom)},e.prototype.dispose=function(t,e){this.remove(t,e)},e.getDefaultOption=function(t){return{show:!0,readOnly:!1,optionToContent:null,contentToOption:null,icon:"M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28",title:t.getLocaleModel().get(["toolbox","dataView","title"]),lang:t.getLocaleModel().get(["toolbox","dataView","lang"]),backgroundColor:"#fff",textColor:"#000",textareaColor:"#fff",textareaBorderColor:"#333",buttonColor:"#c23531",buttonTextColor:"#fff"}},e}(GE);function oz(t,e){return z(t,(function(t,n){var i=e&&e[n];if(q(i)&&!Y(i)){q(t)&&!Y(t)||(t={value:t});var r=null!=i.name&&null==t.name;return t=k(t,i),r&&delete t.name,t}return t}))}cm({type:"changeDataView",event:"dataViewChanged",update:"prepareAndUpdate"},(function(t,e){var n=[];E(t.newOption.series,(function(t){var i=e.getSeriesByName(t.name)[0];if(i){var r=i.get("data");n.push({name:t.name,data:oz(t.data,r)})}else n.push(A({type:"scatter"},t))})),e.mergeOption(k({series:n},t.newOption))}));var az=E,sz=So();function lz(t){var e=sz(t);return e.snapshots||(e.snapshots=[{}]),e.snapshots}var uz=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.onclick=function(t,e){!function(t){sz(t).snapshots=null}(t),e.dispatchAction({type:"restore",from:this.uid})},e.getDefaultOption=function(t){return{show:!0,icon:"M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5",title:t.getLocaleModel().get(["toolbox","restore","title"])}},e}(GE);cm({type:"restore",event:"restore",update:"prepareAndUpdate"},(function(t,e){e.resetOption("recreate")}));var hz=["grid","xAxis","yAxis","geo","graph","polar","radiusAxis","angleAxis","bmap"],cz=function(){function t(t,e,n){var i=this;this._targetInfoList=[];var r=dz(e,t);E(fz,(function(t,e){(!n||!n.include||P(n.include,e)>=0)&&t(r,i._targetInfoList)}))}return t.prototype.setOutputRanges=function(t,e){return this.matchOutputRanges(t,e,(function(t,e,n){if((t.coordRanges||(t.coordRanges=[])).push(e),!t.coordRange){t.coordRange=e;var i=vz[t.brushType](0,n,e);t.__rangeOffset={offset:xz[t.brushType](i.values,t.range,[1,1]),xyMinMax:i.xyMinMax}}})),t},t.prototype.matchOutputRanges=function(t,e,n){E(t,(function(t){var i=this.findTargetInfo(t,e);i&&!0!==i&&E(i.coordSyses,(function(i){var r=vz[t.brushType](1,i,t.range,!0);n(t,r.values,i,e)}))}),this)},t.prototype.setInputRanges=function(t,e){E(t,(function(t){var n,i,r,o,a,s=this.findTargetInfo(t,e);if(t.range=t.range||[],s&&!0!==s){t.panelId=s.panelId;var l=vz[t.brushType](0,s.coordSys,t.coordRange),u=t.__rangeOffset;t.range=u?xz[t.brushType](l.values,u.offset,(n=l.xyMinMax,i=u.xyMinMax,r=bz(n),o=bz(i),a=[r[0]/o[0],r[1]/o[1]],isNaN(a[0])&&(a[0]=1),isNaN(a[1])&&(a[1]=1),a)):l.values}}),this)},t.prototype.makePanelOpts=function(t,e){return z(this._targetInfoList,(function(n){var i=n.getPanelRect();return{panelId:n.panelId,defaultBrushType:e?e(n):null,clipPath:hL(i),isTargetByCursor:pL(i,t,n.coordSysModel),getLinearBrushOtherExtent:cL(i)}}))},t.prototype.controlSeries=function(t,e,n){var i=this.findTargetInfo(t,n);return!0===i||i&&P(i.coordSyses,e.coordinateSystem)>=0},t.prototype.findTargetInfo=function(t,e){for(var n=this._targetInfoList,i=dz(e,t),r=0;r<n.length;r++){var o=n[r],a=t.panelId;if(a){if(o.panelId===a)return o}else for(var s=0;s<gz.length;s++)if(gz[s](i,o))return o}return!0},t}();function pz(t){return t[0]>t[1]&&t.reverse(),t}function dz(t,e){return Io(t,e,{includeMainTypes:hz})}var fz={grid:function(t,e){var n=t.xAxisModels,i=t.yAxisModels,r=t.gridModels,o=ft(),a={},s={};(n||i||r)&&(E(n,(function(t){var e=t.axis.grid.model;o.set(e.id,e),a[e.id]=!0})),E(i,(function(t){var e=t.axis.grid.model;o.set(e.id,e),s[e.id]=!0})),E(r,(function(t){o.set(t.id,t),a[t.id]=!0,s[t.id]=!0})),o.each((function(t){var r=t.coordinateSystem,o=[];E(r.getCartesians(),(function(t,e){(P(n,t.getAxis("x").model)>=0||P(i,t.getAxis("y").model)>=0)&&o.push(t)})),e.push({panelId:"grid--"+t.id,gridModel:t,coordSysModel:t,coordSys:o[0],coordSyses:o,getPanelRect:yz.grid,xAxisDeclared:a[t.id],yAxisDeclared:s[t.id]})})))},geo:function(t,e){E(t.geoModels,(function(t){var n=t.coordinateSystem;e.push({panelId:"geo--"+t.id,geoModel:t,coordSysModel:t,coordSys:n,coordSyses:[n],getPanelRect:yz.geo})}))}},gz=[function(t,e){var n=t.xAxisModel,i=t.yAxisModel,r=t.gridModel;return!r&&n&&(r=n.axis.grid.model),!r&&i&&(r=i.axis.grid.model),r&&r===e.gridModel},function(t,e){var n=t.geoModel;return n&&n===e.geoModel}],yz={grid:function(){return this.coordSys.master.getRect().clone()},geo:function(){var t=this.coordSys,e=t.getBoundingRect().clone();return e.applyTransform(Ih(t)),e}},vz={lineX:H(mz,0),lineY:H(mz,1),rect:function(t,e,n,i){var r=t?e.pointToData([n[0][0],n[1][0]],i):e.dataToPoint([n[0][0],n[1][0]],i),o=t?e.pointToData([n[0][1],n[1][1]],i):e.dataToPoint([n[0][1],n[1][1]],i),a=[pz([r[0],o[0]]),pz([r[1],o[1]])];return{values:a,xyMinMax:a}},polygon:function(t,e,n,i){var r=[[1/0,-1/0],[1/0,-1/0]];return{values:z(n,(function(n){var o=t?e.pointToData(n,i):e.dataToPoint(n,i);return r[0][0]=Math.min(r[0][0],o[0]),r[1][0]=Math.min(r[1][0],o[1]),r[0][1]=Math.max(r[0][1],o[0]),r[1][1]=Math.max(r[1][1],o[1]),o})),xyMinMax:r}}};function mz(t,e,n,i){var r=n.getAxis(["x","y"][t]),o=pz(z([0,1],(function(t){return e?r.coordToData(r.toLocalCoord(i[t]),!0):r.toGlobalCoord(r.dataToCoord(i[t]))}))),a=[];return a[t]=o,a[1-t]=[NaN,NaN],{values:o,xyMinMax:a}}var xz={lineX:H(_z,0),lineY:H(_z,1),rect:function(t,e,n){return[[t[0][0]-n[0]*e[0][0],t[0][1]-n[0]*e[0][1]],[t[1][0]-n[1]*e[1][0],t[1][1]-n[1]*e[1][1]]]},polygon:function(t,e,n){return z(t,(function(t,i){return[t[0]-n[0]*e[i][0],t[1]-n[1]*e[i][1]]}))}};function _z(t,e,n,i){return[e[0]-i[t]*n[0],e[1]-i[t]*n[1]]}function bz(t){return t?[t[0][1]-t[0][0],t[1][1]-t[1][0]]:[NaN,NaN]}var wz,Sz,Mz=E,Iz=uo+"toolbox-dataZoom_",Tz=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.render=function(t,e,n,i){this._brushController||(this._brushController=new Ok(n.getZr()),this._brushController.on("brush",W(this._onBrush,this)).mount()),function(t,e,n,i,r){var o=n._isZoomActive;i&&"takeGlobalCursor"===i.type&&(o="dataZoomSelect"===i.key&&i.dataZoomSelectActive);n._isZoomActive=o,t.setIconStatus("zoom",o?"emphasis":"normal");var a=new cz(Dz(t),e,{include:["grid"]}).makePanelOpts(r,(function(t){return t.xAxisDeclared&&!t.yAxisDeclared?"lineX":!t.xAxisDeclared&&t.yAxisDeclared?"lineY":"rect"}));n._brushController.setPanels(a).enableBrush(!(!o||!a.length)&&{brushType:"auto",brushStyle:t.getModel("brushStyle").getItemStyle()})}(t,e,this,i,n),function(t,e){t.setIconStatus("back",function(t){return lz(t).length}(e)>1?"emphasis":"normal")}(t,e)},e.prototype.onclick=function(t,e,n){Cz[n].call(this)},e.prototype.remove=function(t,e){this._brushController&&this._brushController.unmount()},e.prototype.dispose=function(t,e){this._brushController&&this._brushController.dispose()},e.prototype._onBrush=function(t){var e=t.areas;if(t.isEnd&&e.length){var n={},i=this.ecModel;this._brushController.updateCovers([]),new cz(Dz(this.model),i,{include:["grid"]}).matchOutputRanges(e,i,(function(t,e,n){if("cartesian2d"===n.type){var i=t.brushType;"rect"===i?(r("x",n,e[0]),r("y",n,e[1])):r({lineX:"x",lineY:"y"}[i],n,e)}})),function(t,e){var n=lz(t);az(e,(function(e,i){for(var r=n.length-1;r>=0&&!n[r][i];r--);if(r<0){var o=t.queryComponents({mainType:"dataZoom",subType:"select",id:i})[0];if(o){var a=o.getPercentRange();n[0][i]={dataZoomId:i,start:a[0],end:a[1]}}}})),n.push(e)}(i,n),this._dispatchZoomAction(n)}function r(t,e,r){var o=e.getAxis(t),a=o.model,s=function(t,e,n){var i;return n.eachComponent({mainType:"dataZoom",subType:"select"},(function(n){n.getAxisModel(t,e.componentIndex)&&(i=n)})),i}(t,a,i),l=s.findRepresentativeAxisProxy(a).getMinMaxSpan();null==l.minValueSpan&&null==l.maxValueSpan||(r=lk(0,r.slice(),o.scale.getExtent(),0,l.minValueSpan,l.maxValueSpan)),s&&(n[s.id]={dataZoomId:s.id,startValue:r[0],endValue:r[1]})}},e.prototype._dispatchZoomAction=function(t){var e=[];Mz(t,(function(t,n){e.push(T(t))})),e.length&&this.api.dispatchAction({type:"dataZoom",from:this.uid,batch:e})},e.getDefaultOption=function(t){return{show:!0,filterMode:"filter",icon:{zoom:"M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1",back:"M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26"},title:t.getLocaleModel().get(["toolbox","dataZoom","title"]),brushStyle:{borderWidth:0,color:"rgba(210,219,238,0.2)"}}},e}(GE),Cz={zoom:function(){var t=!this._isZoomActive;this.api.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:t})},back:function(){this._dispatchZoomAction(function(t){var e=lz(t),n=e[e.length-1];e.length>1&&e.pop();var i={};return az(n,(function(t,n){for(var r=e.length-1;r>=0;r--)if(t=e[r][n]){i[n]=t;break}})),i}(this.ecModel))}};function Dz(t){var e={xAxisIndex:t.get("xAxisIndex",!0),yAxisIndex:t.get("yAxisIndex",!0),xAxisId:t.get("xAxisId",!0),yAxisId:t.get("yAxisId",!0)};return null==e.xAxisIndex&&null==e.xAxisId&&(e.xAxisIndex="all"),null==e.yAxisIndex&&null==e.yAxisId&&(e.yAxisIndex="all"),e}wz="dataZoom",Sz=function(t){var e=t.getComponent("toolbox",0),n=["feature","dataZoom"];if(e&&null!=e.get(n)){var i=e.getModel(n),r=[],o=Io(t,Dz(i));return Mz(o.xAxisModels,(function(t){return a(t,"xAxis","xAxisIndex")})),Mz(o.yAxisModels,(function(t){return a(t,"yAxis","yAxisIndex")})),r}function a(t,e,n){var o=t.componentIndex,a={type:"select",$fromToolbox:!0,filterMode:i.get("filterMode",!0)||"filter",id:Iz+e+o};a[n]=o,r.push(a)}},lt(null==jp.get(wz)&&Sz),jp.set(wz,Sz);var Az=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="tooltip",e.dependencies=["axisPointer"],e.defaultOption={z:60,show:!0,showContent:!0,trigger:"item",triggerOn:"mousemove|click",alwaysShowContent:!1,displayMode:"single",renderMode:"auto",confine:null,showDelay:0,hideDelay:100,transitionDuration:.4,enterable:!1,backgroundColor:"#fff",shadowBlur:10,shadowColor:"rgba(0, 0, 0, .2)",shadowOffsetX:1,shadowOffsetY:2,borderRadius:4,borderWidth:1,padding:null,extraCssText:"",axisPointer:{type:"line",axis:"auto",animation:"auto",animationDurationUpdate:200,animationEasingUpdate:"exponentialOut",crossStyle:{color:"#999",width:1,type:"dashed",textStyle:{}}},textStyle:{color:"#666",fontSize:14}},e}(Tp);function kz(t){var e=t.get("confine");return null!=e?!!e:"richText"===t.get("renderMode")}function Lz(t){if(r.domSupported)for(var e=document.documentElement.style,n=0,i=t.length;n<i;n++)if(t[n]in e)return t[n]}var Pz=Lz(["transform","webkitTransform","OTransform","MozTransform","msTransform"]);function Oz(t,e){if(!t)return e;e=np(e,!0);var n=t.indexOf(e);return(t=-1===n?e:"-"+t.slice(0,n)+"-"+e).toLowerCase()}var Rz=Oz(Lz(["webkitTransition","transition","OTransition","MozTransition","msTransition"]),"transition"),Nz=Oz(Pz,"transform"),Ez="position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;"+(r.transform3dSupported?"will-change:transform;":"");function zz(t,e,n){var i=t.toFixed(0)+"px",o=e.toFixed(0)+"px";if(!r.transformSupported)return n?"top:"+o+";left:"+i+";":[["top",o],["left",i]];var a=r.transform3dSupported,s="translate"+(a?"3d":"")+"("+i+","+o+(a?",0":"")+")";return n?"top:0;left:0;"+Nz+":"+s+";":[["top",0],["left",0],[Pz,s]]}function Vz(t,e,n){var i=[],o=t.get("transitionDuration"),a=t.get("backgroundColor"),s=t.get("shadowBlur"),l=t.get("shadowColor"),u=t.get("shadowOffsetX"),h=t.get("shadowOffsetY"),c=t.getModel("textStyle"),p=ng(t,"html"),d=u+"px "+h+"px "+s+"px "+l;return i.push("box-shadow:"+d),e&&o&&i.push(function(t,e){var n="cubic-bezier(0.23,1,0.32,1)",i=" "+t/2+"s "+n,o="opacity"+i+",visibility"+i;return e||(i=" "+t+"s "+n,o+=r.transformSupported?","+Nz+i:",left"+i+",top"+i),Rz+":"+o}(o,n)),a&&i.push("background-color:"+a),E(["width","color","radius"],(function(e){var n="border-"+e,r=np(n),o=t.get(r);null!=o&&i.push(n+":"+o+("color"===e?"":"px"))})),i.push(function(t){var e=[],n=t.get("fontSize"),i=t.getTextColor();i&&e.push("color:"+i),e.push("font:"+t.getFont()),n&&e.push("line-height:"+Math.round(3*n/2)+"px");var r=t.get("textShadowColor"),o=t.get("textShadowBlur")||0,a=t.get("textShadowOffsetX")||0,s=t.get("textShadowOffsetY")||0;return r&&o&&e.push("text-shadow:"+a+"px "+s+"px "+o+"px "+r),E(["decoration","align"],(function(n){var i=t.get(n);i&&e.push("text-"+n+":"+i)})),e.join(";")}(c)),null!=p&&i.push("padding:"+ip(p).join("px ")+"px"),i.join(";")+";"}function Bz(t,e,n,i,r){var o=e&&e.painter;if(n){var a=o&&o.getViewportRoot();a&&function(t,e,n,i,r){$t(Kt,e,i,r,!0)&&$t(t,n,Kt[0],Kt[1])}(t,a,document.body,i,r)}else{t[0]=i,t[1]=r;var s=o&&o.getViewportRootOffset();s&&(t[0]+=s.offsetLeft,t[1]+=s.offsetTop)}t[2]=t[0]/e.getWidth(),t[3]=t[1]/e.getHeight()}var Fz=function(){function t(t,e,n){if(this._show=!1,this._styleCoord=[0,0,0,0],this._enterable=!0,this._firstShow=!0,this._longHide=!0,r.wxa)return null;var i=document.createElement("div");i.domBelongToZr=!0,this.el=i;var o=this._zr=e.getZr(),a=this._appendToBody=n&&n.appendToBody;Bz(this._styleCoord,o,a,e.getWidth()/2,e.getHeight()/2),a?document.body.appendChild(i):t.appendChild(i),this._container=t;var s=this;i.onmouseenter=function(){s._enterable&&(clearTimeout(s._hideTimeout),s._show=!0),s._inContent=!0},i.onmousemove=function(t){if(t=t||window.event,!s._enterable){var e=o.handler;oe(o.painter.getViewportRoot(),t,!0),e.dispatch("mousemove",t)}},i.onmouseleave=function(){s._inContent=!1,s._enterable&&s._show&&s.hideLater(s._hideDelay)}}return t.prototype.update=function(t){var e,n,i,r=this._container,o=(n="position",(i=(e=r).currentStyle||document.defaultView&&document.defaultView.getComputedStyle(e))?n?i[n]:i:null),a=r.style;"absolute"!==a.position&&"absolute"!==o&&(a.position="relative"),t.get("alwaysShowContent")&&this._moveIfResized(),this.el.className=t.get("className")||""},t.prototype.show=function(t,e){clearTimeout(this._hideTimeout),clearTimeout(this._longHideTimeout);var n=this.el,i=n.style,r=this._styleCoord;n.innerHTML?i.cssText=Ez+Vz(t,!this._firstShow,this._longHide)+zz(r[0],r[1],!0)+"border-color:"+pp(e)+";"+(t.get("extraCssText")||"")+";pointer-events:"+(this._enterable?"auto":"none"):i.display="none",this._show=!0,this._firstShow=!1,this._longHide=!1},t.prototype.setContent=function(t,e,n,i,r){var o=this.el;if(null!=t){var a="";if(X(r)&&"item"===n.get("trigger")&&!kz(n)&&(a=function(t,e,n){if(!X(n)||"inside"===n)return"";var i=t.get("backgroundColor"),r=t.get("borderWidth");e=pp(e);var o,a,s="left"===(o=n)?"right":"right"===o?"left":"top"===o?"bottom":"top",l=Math.max(1.5*Math.round(r),6),u="",h=Nz+":";P(["left","right"],s)>-1?(u+="top:50%",h+="translateY(-50%) rotate("+(a="left"===s?-225:-45)+"deg)"):(u+="left:50%",h+="translateX(-50%) rotate("+(a="top"===s?225:45)+"deg)");var c=a*Math.PI/180,p=l+r,d=p*Math.abs(Math.cos(c))+p*Math.abs(Math.sin(c)),f=e+" solid "+r+"px;";return'<div style="'+["position:absolute;width:"+l+"px;height:"+l+"px;",(u+=";"+s+":-"+Math.round(100*((d-Math.SQRT2*r)/2+Math.SQRT2*r-(d-p)/2))/100+"px")+";"+h+";","border-bottom:"+f,"border-right:"+f,"background-color:"+i+";"].join("")+'"></div>'}(n,i,r)),X(t))o.innerHTML=t+a;else if(t){o.innerHTML="",Y(t)||(t=[t]);for(var s=0;s<t.length;s++)J(t[s])&&t[s].parentNode!==o&&o.appendChild(t[s]);if(a&&o.childNodes.length){var l=document.createElement("div");l.innerHTML=a,o.appendChild(l)}}}else o.innerHTML=""},t.prototype.setEnterable=function(t){this._enterable=t},t.prototype.getSize=function(){var t=this.el;return[t.offsetWidth,t.offsetHeight]},t.prototype.moveTo=function(t,e){var n=this._styleCoord;if(Bz(n,this._zr,this._appendToBody,t,e),null!=n[0]&&null!=n[1]){var i=this.el.style;E(zz(n[0],n[1]),(function(t){i[t[0]]=t[1]}))}},t.prototype._moveIfResized=function(){var t=this._styleCoord[2],e=this._styleCoord[3];this.moveTo(t*this._zr.getWidth(),e*this._zr.getHeight())},t.prototype.hide=function(){var t=this,e=this.el.style;e.visibility="hidden",e.opacity="0",r.transform3dSupported&&(e.willChange=""),this._show=!1,this._longHideTimeout=setTimeout((function(){return t._longHide=!0}),500)},t.prototype.hideLater=function(t){!this._show||this._inContent&&this._enterable||(t?(this._hideDelay=t,this._show=!1,this._hideTimeout=setTimeout(W(this.hide,this),t)):this.hide())},t.prototype.isShow=function(){return this._show},t.prototype.dispose=function(){this.el.parentNode.removeChild(this.el)},t}(),Gz=function(){function t(t){this._show=!1,this._styleCoord=[0,0,0,0],this._enterable=!0,this._zr=t.getZr(),Yz(this._styleCoord,this._zr,t.getWidth()/2,t.getHeight()/2)}return t.prototype.update=function(t){t.get("alwaysShowContent")&&this._moveIfResized()},t.prototype.show=function(){this._hideTimeout&&clearTimeout(this._hideTimeout),this.el.show(),this._show=!0},t.prototype.setContent=function(t,e,n,i,r){var o=this;q(t)&&ao(""),this.el&&this._zr.remove(this.el);var a=n.getModel("textStyle");this.el=new ks({style:{rich:e.richTextStyles,text:t,lineHeight:22,borderWidth:1,borderColor:i,textShadowColor:a.get("textShadowColor"),fill:n.get(["textStyle","color"]),padding:ng(n,"richText"),verticalAlign:"top",align:"left"},z:n.get("z")}),E(["backgroundColor","borderRadius","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY"],(function(t){o.el.style[t]=n.get(t)})),E(["textShadowBlur","textShadowOffsetX","textShadowOffsetY"],(function(t){o.el.style[t]=a.get(t)||0})),this._zr.add(this.el);var s=this;this.el.on("mouseover",(function(){s._enterable&&(clearTimeout(s._hideTimeout),s._show=!0),s._inContent=!0})),this.el.on("mouseout",(function(){s._enterable&&s._show&&s.hideLater(s._hideDelay),s._inContent=!1}))},t.prototype.setEnterable=function(t){this._enterable=t},t.prototype.getSize=function(){var t=this.el,e=this.el.getBoundingRect(),n=Hz(t.style);return[e.width+n.left+n.right,e.height+n.top+n.bottom]},t.prototype.moveTo=function(t,e){var n=this.el;if(n){var i=this._styleCoord;Yz(i,this._zr,t,e),t=i[0],e=i[1];var r=n.style,o=Wz(r.borderWidth||0),a=Hz(r);n.x=t+o+a.left,n.y=e+o+a.top,n.markRedraw()}},t.prototype._moveIfResized=function(){var t=this._styleCoord[2],e=this._styleCoord[3];this.moveTo(t*this._zr.getWidth(),e*this._zr.getHeight())},t.prototype.hide=function(){this.el&&this.el.hide(),this._show=!1},t.prototype.hideLater=function(t){!this._show||this._inContent&&this._enterable||(t?(this._hideDelay=t,this._show=!1,this._hideTimeout=setTimeout(W(this.hide,this),t)):this.hide())},t.prototype.isShow=function(){return this._show},t.prototype.dispose=function(){this._zr.remove(this.el)},t}();function Wz(t){return Math.max(0,t)}function Hz(t){var e=Wz(t.shadowBlur||0),n=Wz(t.shadowOffsetX||0),i=Wz(t.shadowOffsetY||0);return{left:Wz(e-n),right:Wz(e+n),top:Wz(e-i),bottom:Wz(e+i)}}function Yz(t,e,n,i){t[0]=n,t[1]=i,t[2]=t[0]/e.getWidth(),t[3]=t[1]/e.getHeight()}var Uz=new Cs({shape:{x:-1,y:-1,width:2,height:2}}),Xz=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(t,e){if(!r.node&&e.getDom()){var n,i=t.getComponent("tooltip"),o=this._renderMode="auto"===(n=i.get("renderMode"))?r.domSupported?"html":"richText":n||"html";this._tooltipContent="richText"===o?new Gz(e):new Fz(e.getDom(),e,{appendToBody:i.get("appendToBody",!0)})}},e.prototype.render=function(t,e,n){if(!r.node&&n.getDom()){this.group.removeAll(),this._tooltipModel=t,this._ecModel=e,this._api=n,this._alwaysShowContent=t.get("alwaysShowContent");var i=this._tooltipContent;i.update(t),i.setEnterable(t.get("enterable")),this._initGlobalListener(),this._keepShow(),"richText"!==this._renderMode&&t.get("transitionDuration")?Ag(this,"_updatePosition",50,"fixRate"):kg(this,"_updatePosition")}},e.prototype._initGlobalListener=function(){var t=this._tooltipModel.get("triggerOn");KR("itemTooltip",this._api,W((function(e,n,i){"none"!==t&&(t.indexOf(e)>=0?this._tryShow(n,i):"leave"===e&&this._hide(i))}),this))},e.prototype._keepShow=function(){var t=this._tooltipModel,e=this._ecModel,n=this._api,i=t.get("triggerOn");if(null!=this._lastX&&null!=this._lastY&&"none"!==i&&"click"!==i){var r=this;clearTimeout(this._refreshUpdateTimeout),this._refreshUpdateTimeout=setTimeout((function(){!n.isDisposed()&&r.manuallyShowTip(t,e,n,{x:r._lastX,y:r._lastY,dataByCoordSys:r._lastDataByCoordSys})}))}},e.prototype.manuallyShowTip=function(t,e,n,i){if(i.from!==this.uid&&!r.node&&n.getDom()){var o=jz(i,n);this._ticket="";var a=i.dataByCoordSys,s=function(t,e,n){var i=To(t).queryOptionMap,r=i.keys()[0];if(!r||"series"===r)return;var o,a=Ao(e,r,i.get(r),{useDefault:!1,enableAll:!1,enableNone:!1}).models[0];if(!a)return;if(n.getViewOfComponentModel(a).group.traverse((function(e){var n=Hs(e).tooltipConfig;if(n&&n.name===t.name)return o=e,!0})),o)return{componentMainType:r,componentIndex:a.componentIndex,el:o}}(i,e,n);if(s){var l=s.el.getBoundingRect().clone();l.applyTransform(s.el.transform),this._tryShow({offsetX:l.x+l.width/2,offsetY:l.y+l.height/2,target:s.el,position:i.position,positionDefault:"bottom"},o)}else if(i.tooltip&&null!=i.x&&null!=i.y){var u=Uz;u.x=i.x,u.y=i.y,u.update(),Hs(u).tooltipConfig={name:null,option:i.tooltip},this._tryShow({offsetX:i.x,offsetY:i.y,target:u},o)}else if(a)this._tryShow({offsetX:i.x,offsetY:i.y,position:i.position,dataByCoordSys:a,tooltipOption:i.tooltipOption},o);else if(null!=i.seriesIndex){if(this._manuallyAxisShowTip(t,e,n,i))return;var h=eN(i,e),c=h.point[0],p=h.point[1];null!=c&&null!=p&&this._tryShow({offsetX:c,offsetY:p,target:h.el,position:i.position,positionDefault:"bottom"},o)}else null!=i.x&&null!=i.y&&(n.dispatchAction({type:"updateAxisPointer",x:i.x,y:i.y}),this._tryShow({offsetX:i.x,offsetY:i.y,position:i.position,target:n.getZr().findHover(i.x,i.y).target},o))}},e.prototype.manuallyHideTip=function(t,e,n,i){var r=this._tooltipContent;!this._alwaysShowContent&&this._tooltipModel&&r.hideLater(this._tooltipModel.get("hideDelay")),this._lastX=this._lastY=this._lastDataByCoordSys=null,i.from!==this.uid&&this._hide(jz(i,n))},e.prototype._manuallyAxisShowTip=function(t,e,n,i){var r=i.seriesIndex,o=i.dataIndex,a=e.getComponent("axisPointer").coordSysAxesInfo;if(null!=r&&null!=o&&null!=a){var s=e.getSeriesByIndex(r);if(s)if("axis"===Zz([s.getData().getItemModel(o),s,(s.coordinateSystem||{}).model],this._tooltipModel).get("trigger"))return n.dispatchAction({type:"updateAxisPointer",seriesIndex:r,dataIndex:o,position:i.position}),!0}},e.prototype._tryShow=function(t,e){var n=t.target;if(this._tooltipModel){this._lastX=t.offsetX,this._lastY=t.offsetY;var i=t.dataByCoordSys;if(i&&i.length)this._showAxisTooltip(i,t);else if(n){var r,o;this._lastDataByCoordSys=null,xy(n,(function(t){return null!=Hs(t).dataIndex?(r=t,!0):null!=Hs(t).tooltipConfig?(o=t,!0):void 0}),!0),r?this._showSeriesItemTooltip(t,r,e):o?this._showComponentItemTooltip(t,o,e):this._hide(e)}else this._lastDataByCoordSys=null,this._hide(e)}},e.prototype._showOrMove=function(t,e){var n=t.get("showDelay");e=W(e,this),clearTimeout(this._showTimout),n>0?this._showTimout=setTimeout(e,n):e()},e.prototype._showAxisTooltip=function(t,e){var n=this._ecModel,i=this._tooltipModel,r=[e.offsetX,e.offsetY],o=Zz([e.tooltipOption],i),a=this._renderMode,s=[],l=Xf("section",{blocks:[],noHeader:!0}),u=[],h=new ig;E(t,(function(t){E(t.dataByAxis,(function(t){var e=n.getComponent(t.axisDim+"Axis",t.axisIndex),r=t.value;if(e&&null!=r){var o=zR(r,e.axis,n,t.seriesDataIndices,t.valueLabelOpt),c=Xf("section",{header:o,noHeader:!ut(o),sortBlocks:!0,blocks:[]});l.blocks.push(c),E(t.seriesDataIndices,(function(l){var p=n.getSeriesByIndex(l.seriesIndex),d=l.dataIndexInside,f=p.getDataParams(d);if(!(f.dataIndex<0)){f.axisDim=t.axisDim,f.axisIndex=t.axisIndex,f.axisType=t.axisType,f.axisId=t.axisId,f.axisValue=s_(e.axis,{value:r}),f.axisValueLabel=o,f.marker=h.makeTooltipMarker("item",pp(f.color),a);var g=uf(p.formatTooltip(d,!0,null)),y=g.frag;if(y){var v=Zz([p],i).get("valueFormatter");c.blocks.push(v?A({valueFormatter:v},y):y)}g.text&&u.push(g.text),s.push(f)}}))}}))})),l.blocks.reverse(),u.reverse();var c=e.position,p=o.get("order"),d=Jf(l,h,a,p,n.get("useUTC"),o.get("textStyle"));d&&u.unshift(d);var f="richText"===a?"\n\n":"<br/>",g=u.join(f);this._showOrMove(o,(function(){this._updateContentNotChangedOnAxis(t,s)?this._updatePosition(o,c,r[0],r[1],this._tooltipContent,s):this._showTooltipContent(o,g,s,Math.random()+"",r[0],r[1],c,null,h)}))},e.prototype._showSeriesItemTooltip=function(t,e,n){var i=this._ecModel,r=Hs(e),o=r.seriesIndex,a=i.getSeriesByIndex(o),s=r.dataModel||a,l=r.dataIndex,u=r.dataType,h=s.getData(u),c=this._renderMode,p=t.positionDefault,d=Zz([h.getItemModel(l),s,a&&(a.coordinateSystem||{}).model],this._tooltipModel,p?{position:p}:null),f=d.get("trigger");if(null==f||"item"===f){var g=s.getDataParams(l,u),y=new ig;g.marker=y.makeTooltipMarker("item",pp(g.color),c);var v=uf(s.formatTooltip(l,!1,u)),m=d.get("order"),x=d.get("valueFormatter"),_=v.frag,b=_?Jf(x?A({valueFormatter:x},_):_,y,c,m,i.get("useUTC"),d.get("textStyle")):v.text,w="item_"+s.name+"_"+l;this._showOrMove(d,(function(){this._showTooltipContent(d,b,g,w,t.offsetX,t.offsetY,t.position,t.target,y)})),n({type:"showTip",dataIndexInside:l,dataIndex:h.getRawIndex(l),seriesIndex:o,from:this.uid})}},e.prototype._showComponentItemTooltip=function(t,e,n){var i=Hs(e),r=i.tooltipConfig.option||{};if(X(r)){r={content:r,formatter:r}}var o=[r],a=this._ecModel.getComponent(i.componentMainType,i.componentIndex);a&&o.push(a),o.push({formatter:r.content});var s=t.positionDefault,l=Zz(o,this._tooltipModel,s?{position:s}:null),u=l.get("content"),h=Math.random()+"",c=new ig;this._showOrMove(l,(function(){var n=T(l.get("formatterParams")||{});this._showTooltipContent(l,u,n,h,t.offsetX,t.offsetY,t.position,e,c)})),n({type:"showTip",from:this.uid})},e.prototype._showTooltipContent=function(t,e,n,i,r,o,a,s,l){if(this._ticket="",t.get("showContent")&&t.get("show")){var u=this._tooltipContent;u.setEnterable(t.get("enterable"));var h=t.get("formatter");a=a||t.get("position");var c=e,p=this._getNearestPoint([r,o],n,t.get("trigger"),t.get("borderColor")).color;if(h)if(X(h)){var d=t.ecModel.get("useUTC"),f=Y(n)?n[0]:n;c=h,f&&f.axisType&&f.axisType.indexOf("time")>=0&&(c=Vc(f.axisValue,c,d)),c=hp(c,n,!0)}else if(U(h)){var g=W((function(e,i){e===this._ticket&&(u.setContent(i,l,t,p,a),this._updatePosition(t,a,r,o,u,n,s))}),this);this._ticket=i,c=h(n,i,g)}else c=h;u.setContent(c,l,t,p,a),u.show(t,p),this._updatePosition(t,a,r,o,u,n,s)}},e.prototype._getNearestPoint=function(t,e,n,i){return"axis"===n||Y(e)?{color:i||("html"===this._renderMode?"#fff":"none")}:Y(e)?void 0:{color:i||e.color||e.borderColor}},e.prototype._updatePosition=function(t,e,n,i,r,o,a){var s=this._api.getWidth(),l=this._api.getHeight();e=e||t.get("position");var u=r.getSize(),h=t.get("align"),c=t.get("verticalAlign"),p=a&&a.getBoundingRect().clone();if(a&&p.applyTransform(a.transform),U(e)&&(e=e([n,i],o,r.el,p,{viewSize:[s,l],contentSize:u.slice()})),Y(e))n=Er(e[0],s),i=Er(e[1],l);else if(q(e)){var d=e;d.width=u[0],d.height=u[1];var f=xp(d,{width:s,height:l});n=f.x,i=f.y,h=null,c=null}else if(X(e)&&a){var g=function(t,e,n,i){var r=n[0],o=n[1],a=Math.ceil(Math.SQRT2*i)+8,s=0,l=0,u=e.width,h=e.height;switch(t){case"inside":s=e.x+u/2-r/2,l=e.y+h/2-o/2;break;case"top":s=e.x+u/2-r/2,l=e.y-o-a;break;case"bottom":s=e.x+u/2-r/2,l=e.y+h+a;break;case"left":s=e.x-r-a,l=e.y+h/2-o/2;break;case"right":s=e.x+u+a,l=e.y+h/2-o/2}return[s,l]}(e,p,u,t.get("borderWidth"));n=g[0],i=g[1]}else{g=function(t,e,n,i,r,o,a){var s=n.getSize(),l=s[0],u=s[1];null!=o&&(t+l+o+2>i?t-=l+o:t+=o);null!=a&&(e+u+a>r?e-=u+a:e+=a);return[t,e]}(n,i,r,s,l,h?null:20,c?null:20);n=g[0],i=g[1]}if(h&&(n-=qz(h)?u[0]/2:"right"===h?u[0]:0),c&&(i-=qz(c)?u[1]/2:"bottom"===c?u[1]:0),kz(t)){g=function(t,e,n,i,r){var o=n.getSize(),a=o[0],s=o[1];return t=Math.min(t+a,i)-a,e=Math.min(e+s,r)-s,t=Math.max(t,0),e=Math.max(e,0),[t,e]}(n,i,r,s,l);n=g[0],i=g[1]}r.moveTo(n,i)},e.prototype._updateContentNotChangedOnAxis=function(t,e){var n=this._lastDataByCoordSys,i=this._cbParamsList,r=!!n&&n.length===t.length;return r&&E(n,(function(n,o){var a=n.dataByAxis||[],s=(t[o]||{}).dataByAxis||[];(r=r&&a.length===s.length)&&E(a,(function(t,n){var o=s[n]||{},a=t.seriesDataIndices||[],l=o.seriesDataIndices||[];(r=r&&t.value===o.value&&t.axisType===o.axisType&&t.axisId===o.axisId&&a.length===l.length)&&E(a,(function(t,e){var n=l[e];r=r&&t.seriesIndex===n.seriesIndex&&t.dataIndex===n.dataIndex})),i&&E(t.seriesDataIndices,(function(t){var n=t.seriesIndex,o=e[n],a=i[n];o&&a&&a.data!==o.data&&(r=!1)}))}))})),this._lastDataByCoordSys=t,this._cbParamsList=e,!!r},e.prototype._hide=function(t){this._lastDataByCoordSys=null,t({type:"hideTip",from:this.uid})},e.prototype.dispose=function(t,e){!r.node&&e.getDom()&&(kg(this,"_updatePosition"),this._tooltipContent.dispose(),QR("itemTooltip",e))},e.type="tooltip",e}(gg);function Zz(t,e,n){var i,r=e.ecModel;n?(i=new dc(n,r,r),i=new dc(e.option,i,r)):i=e;for(var o=t.length-1;o>=0;o--){var a=t[o];a&&(a instanceof dc&&(a=a.get("tooltip",!0)),X(a)&&(a={formatter:a}),a&&(i=new dc(a,i,r)))}return i}function jz(t,e){return t.dispatchAction||W(e.dispatchAction,e)}function qz(t){return"center"===t||"middle"===t}var Kz=["rect","polygon","keep","clear"];function $z(t,e){var n=ho(t?t.brush:[]);if(n.length){var i=[];E(n,(function(t){var e=t.hasOwnProperty("toolbox")?t.toolbox:[];e instanceof Array&&(i=i.concat(e))}));var r=t&&t.toolbox;Y(r)&&(r=r[0]),r||(r={feature:{}},t.toolbox=[r]);var o=r.feature||(r.feature={}),a=o.brush||(o.brush={}),s=a.type||(a.type=[]);s.push.apply(s,i),function(t){var e={};E(t,(function(t){e[t]=1})),t.length=0,E(e,(function(e,n){t.push(n)}))}(s),e&&!s.length&&s.push.apply(s,Kz)}}var Jz=E;function Qz(t){if(t)for(var e in t)if(t.hasOwnProperty(e))return!0}function tV(t,e,n){var i={};return Jz(e,(function(e){var r,o=i[e]=((r=function(){}).prototype.__hidden=r.prototype,new r);Jz(t[e],(function(t,i){if(iD.isValidType(i)){var r={type:i,visual:t};n&&n(r,e),o[i]=new iD(r),"opacity"===i&&((r=T(r)).type="colorAlpha",o.__hidden.__alphaForOpacity=new iD(r))}}))})),i}function eV(t,e,n){var i;E(n,(function(t){e.hasOwnProperty(t)&&Qz(e[t])&&(i=!0)})),i&&E(n,(function(n){e.hasOwnProperty(n)&&Qz(e[n])?t[n]=T(e[n]):delete t[n]}))}var nV={lineX:iV(0),lineY:iV(1),rect:{point:function(t,e,n){return t&&n.boundingRect.contain(t[0],t[1])},rect:function(t,e,n){return t&&n.boundingRect.intersect(t)}},polygon:{point:function(t,e,n){return t&&n.boundingRect.contain(t[0],t[1])&&y_(n.range,t[0],t[1])},rect:function(t,e,n){var i=n.range;if(!t||i.length<=1)return!1;var r=t.x,o=t.y,a=t.width,s=t.height,l=i[0];return!!(y_(i,r,o)||y_(i,r+a,o)||y_(i,r,o+s)||y_(i,r+a,o+s)||sr.create(t).contain(l[0],l[1])||Oh(r,o,r+a,o,i)||Oh(r,o,r,o+s,i)||Oh(r+a,o,r+a,o+s,i)||Oh(r,o+s,r+a,o+s,i))||void 0}}};function iV(t){var e=["x","y"],n=["width","height"];return{point:function(e,n,i){if(e){var r=i.range;return rV(e[t],r)}},rect:function(i,r,o){if(i){var a=o.range,s=[i[e[t]],i[e[t]]+i[n[t]]];return s[1]<s[0]&&s.reverse(),rV(s[0],a)||rV(s[1],a)||rV(a[0],s)||rV(a[1],s)}}}}function rV(t,e){return e[0]<=t&&t<=e[1]}var oV=["inBrush","outOfBrush"],aV="__ecBrushSelect",sV="__ecInBrushSelectEvent";function lV(t){t.eachComponent({mainType:"brush"},(function(e){(e.brushTargetManager=new cz(e.option,t)).setInputRanges(e.areas,t)}))}function uV(t,e,n){var i,r,o=[];t.eachComponent({mainType:"brush"},(function(t){n&&"takeGlobalCursor"===n.type&&t.setBrushOption("brush"===n.key?n.brushOption:{brushType:!1})})),lV(t),t.eachComponent({mainType:"brush"},(function(e,n){var a={brushId:e.id,brushIndex:n,brushName:e.name,areas:T(e.areas),selected:[]};o.push(a);var s=e.option,l=s.brushLink,u=[],h=[],c=[],p=!1;n||(i=s.throttleType,r=s.throttleDelay);var d=z(e.areas,(function(t){var e=pV[t.brushType],n=k({boundingRect:e?e(t):void 0},t);return n.selectors=function(t){var e=t.brushType,n={point:function(i){return nV[e].point(i,n,t)},rect:function(i){return nV[e].rect(i,n,t)}};return n}(n),n})),f=tV(e.option,oV,(function(t){t.mappingMethod="fixed"}));function g(t){return"all"===l||!!u[t]}function y(t){return!!t.length}Y(l)&&E(l,(function(t){u[t]=1})),t.eachSeries((function(n,i){var r=c[i]=[];"parallel"===n.subType?function(t,e){var n=t.coordinateSystem;p=p||n.hasAxisBrushed(),g(e)&&n.eachActiveState(t.getData(),(function(t,e){"active"===t&&(h[e]=1)}))}(n,i):function(n,i,r){if(!n.brushSelector||function(t,e){var n=t.option.seriesIndex;return null!=n&&"all"!==n&&(Y(n)?P(n,e)<0:e!==n)}(e,i))return;if(E(d,(function(i){e.brushTargetManager.controlSeries(i,n,t)&&r.push(i),p=p||y(r)})),g(i)&&y(r)){var o=n.getData();o.each((function(t){cV(n,r,o,t)&&(h[t]=1)}))}}(n,i,r)})),t.eachSeries((function(t,e){var n={seriesId:t.id,seriesIndex:e,seriesName:t.name,dataIndex:[]};a.selected.push(n);var i=c[e],r=t.getData(),o=g(e)?function(t){return h[t]?(n.dataIndex.push(r.getRawIndex(t)),"inBrush"):"outOfBrush"}:function(e){return cV(t,i,r,e)?(n.dataIndex.push(r.getRawIndex(e)),"inBrush"):"outOfBrush"};(g(e)?p:y(i))&&function(t,e,n,i,r,o){var a,s={};function l(t){return fy(n,a,t)}function u(t,e){yy(n,a,t,e)}function h(t,h){a=null==o?t:h;var c=n.getRawDataItem(a);if(!c||!1!==c.visualMap)for(var p=i.call(r,t),d=e[p],f=s[p],g=0,y=f.length;g<y;g++){var v=f[g];d[v]&&d[v].applyVisual(t,l,u)}}E(t,(function(t){var n=iD.prepareVisualTypes(e[t]);s[t]=n})),null==o?n.each(h):n.each([o],h)}(oV,f,r,o)}))})),function(t,e,n,i,r){if(!r)return;var o=t.getZr();if(o[sV])return;o.__ecBrushSelect||(o.__ecBrushSelect=hV);Ag(o,aV,n,e)(t,i)}(e,i,r,o,n)}function hV(t,e){if(!t.isDisposed()){var n=t.getZr();n[sV]=!0,t.dispatchAction({type:"brushSelect",batch:e}),n[sV]=!1}}function cV(t,e,n,i){for(var r=0,o=e.length;r<o;r++){var a=e[r];if(t.brushSelector(i,n,a.selectors,a))return!0}}var pV={rect:function(t){return dV(t.range)},polygon:function(t){for(var e,n=t.range,i=0,r=n.length;i<r;i++){e=e||[[1/0,-1/0],[1/0,-1/0]];var o=n[i];o[0]<e[0][0]&&(e[0][0]=o[0]),o[0]>e[0][1]&&(e[0][1]=o[0]),o[1]<e[1][0]&&(e[1][0]=o[1]),o[1]>e[1][1]&&(e[1][1]=o[1])}return e&&dV(e)}};function dV(t){return new sr(t[0][0],t[1][0],t[0][1]-t[0][0],t[1][1]-t[1][0])}var fV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(t,e){this.ecModel=t,this.api=e,this.model,(this._brushController=new Ok(e.getZr())).on("brush",W(this._onBrush,this)).mount()},e.prototype.render=function(t,e,n,i){this.model=t,this._updateController(t,e,n,i)},e.prototype.updateTransform=function(t,e,n,i){lV(e),this._updateController(t,e,n,i)},e.prototype.updateVisual=function(t,e,n,i){this.updateTransform(t,e,n,i)},e.prototype.updateView=function(t,e,n,i){this._updateController(t,e,n,i)},e.prototype._updateController=function(t,e,n,i){(!i||i.$from!==t.id)&&this._brushController.setPanels(t.brushTargetManager.makePanelOpts(n)).enableBrush(t.brushOption).updateCovers(t.areas.slice())},e.prototype.dispose=function(){this._brushController.dispose()},e.prototype._onBrush=function(t){var e=this.model.id,n=this.model.brushTargetManager.setOutputRanges(t.areas,this.ecModel);(!t.isEnd||t.removeOnClick)&&this.api.dispatchAction({type:"brush",brushId:e,areas:T(n),$from:e}),t.isEnd&&this.api.dispatchAction({type:"brushEnd",brushId:e,areas:T(n),$from:e})},e.type="brush",e}(gg),gV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.areas=[],n.brushOption={},n}return n(e,t),e.prototype.optionUpdated=function(t,e){var n=this.option;!e&&eV(n,t,["inBrush","outOfBrush"]);var i=n.inBrush=n.inBrush||{};n.outOfBrush=n.outOfBrush||{color:"#ddd"},i.hasOwnProperty("liftZ")||(i.liftZ=5)},e.prototype.setAreas=function(t){t&&(this.areas=z(t,(function(t){return yV(this.option,t)}),this))},e.prototype.setBrushOption=function(t){this.brushOption=yV(this.option,t),this.brushType=this.brushOption.brushType},e.type="brush",e.dependencies=["geo","grid","xAxis","yAxis","parallel","series"],e.defaultOption={seriesIndex:"all",brushType:"rect",brushMode:"single",transformable:!0,brushStyle:{borderWidth:1,color:"rgba(210,219,238,0.3)",borderColor:"#D2DBEE"},throttleType:"fixRate",throttleDelay:0,removeOnClick:!0,z:1e4},e}(Tp);function yV(t,e){return C({brushType:t.brushType,brushMode:t.brushMode,transformable:t.transformable,brushStyle:new dc(t.brushStyle).getItemStyle(),removeOnClick:t.removeOnClick,z:t.z},e,!0)}var vV=["rect","polygon","lineX","lineY","keep","clear"],mV=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.render=function(t,e,n){var i,r,o;e.eachComponent({mainType:"brush"},(function(t){i=t.brushType,r=t.brushOption.brushMode||"single",o=o||!!t.areas.length})),this._brushType=i,this._brushMode=r,E(t.get("type",!0),(function(e){t.setIconStatus(e,("keep"===e?"multiple"===r:"clear"===e?o:e===i)?"emphasis":"normal")}))},e.prototype.updateView=function(t,e,n){this.render(t,e,n)},e.prototype.getIcons=function(){var t=this.model,e=t.get("icon",!0),n={};return E(t.get("type",!0),(function(t){e[t]&&(n[t]=e[t])})),n},e.prototype.onclick=function(t,e,n){var i=this._brushType,r=this._brushMode;"clear"===n?(e.dispatchAction({type:"axisAreaSelect",intervals:[]}),e.dispatchAction({type:"brush",command:"clear",areas:[]})):e.dispatchAction({type:"takeGlobalCursor",key:"brush",brushOption:{brushType:"keep"===n?i:i!==n&&n,brushMode:"keep"===n?"multiple"===r?"single":"multiple":r}})},e.getDefaultOption=function(t){return{show:!0,type:vV.slice(),icon:{rect:"M7.3,34.7 M0.4,10V-0.2h9.8 M89.6,10V-0.2h-9.8 M0.4,60v10.2h9.8 M89.6,60v10.2h-9.8 M12.3,22.4V10.5h13.1 M33.6,10.5h7.8 M49.1,10.5h7.8 M77.5,22.4V10.5h-13 M12.3,31.1v8.2 M77.7,31.1v8.2 M12.3,47.6v11.9h13.1 M33.6,59.5h7.6 M49.1,59.5 h7.7 M77.5,47.6v11.9h-13",polygon:"M55.2,34.9c1.7,0,3.1,1.4,3.1,3.1s-1.4,3.1-3.1,3.1 s-3.1-1.4-3.1-3.1S53.5,34.9,55.2,34.9z M50.4,51c1.7,0,3.1,1.4,3.1,3.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1 C47.3,52.4,48.7,51,50.4,51z M55.6,37.1l1.5-7.8 M60.1,13.5l1.6-8.7l-7.8,4 M59,19l-1,5.3 M24,16.1l6.4,4.9l6.4-3.3 M48.5,11.6 l-5.9,3.1 M19.1,12.8L9.7,5.1l1.1,7.7 M13.4,29.8l1,7.3l6.6,1.6 M11.6,18.4l1,6.1 M32.8,41.9 M26.6,40.4 M27.3,40.2l6.1,1.6 M49.9,52.1l-5.6-7.6l-4.9-1.2",lineX:"M15.2,30 M19.7,15.6V1.9H29 M34.8,1.9H40.4 M55.3,15.6V1.9H45.9 M19.7,44.4V58.1H29 M34.8,58.1H40.4 M55.3,44.4 V58.1H45.9 M12.5,20.3l-9.4,9.6l9.6,9.8 M3.1,29.9h16.5 M62.5,20.3l9.4,9.6L62.3,39.7 M71.9,29.9H55.4",lineY:"M38.8,7.7 M52.7,12h13.2v9 M65.9,26.6V32 M52.7,46.3h13.2v-9 M24.9,12H11.8v9 M11.8,26.6V32 M24.9,46.3H11.8v-9 M48.2,5.1l-9.3-9l-9.4,9.2 M38.9-3.9V12 M48.2,53.3l-9.3,9l-9.4-9.2 M38.9,62.3V46.4",keep:"M4,10.5V1h10.3 M20.7,1h6.1 M33,1h6.1 M55.4,10.5V1H45.2 M4,17.3v6.6 M55.6,17.3v6.6 M4,30.5V40h10.3 M20.7,40 h6.1 M33,40h6.1 M55.4,30.5V40H45.2 M21,18.9h62.9v48.6H21V18.9z",clear:"M22,14.7l30.9,31 M52.9,14.7L22,45.7 M4.7,16.8V4.2h13.1 M26,4.2h7.8 M41.6,4.2h7.8 M70.3,16.8V4.2H57.2 M4.7,25.9v8.6 M70.3,25.9v8.6 M4.7,43.2v12.6h13.1 M26,55.8h7.8 M41.6,55.8h7.8 M70.3,43.2v12.6H57.2"},title:t.getLocaleModel().get(["toolbox","brush","title"])}},e}(GE);var xV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.layoutMode={type:"box",ignoreSize:!0},n}return n(e,t),e.type="title",e.defaultOption={z:6,show:!0,text:"",target:"blank",subtext:"",subtarget:"blank",left:0,top:0,backgroundColor:"rgba(0,0,0,0)",borderColor:"#ccc",borderWidth:0,padding:5,itemGap:10,textStyle:{fontSize:18,fontWeight:"bold",color:"#464646"},subtextStyle:{fontSize:12,color:"#6E7079"}},e}(Tp),_V=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.render=function(t,e,n){if(this.group.removeAll(),t.get("show")){var i=this.group,r=t.getModel("textStyle"),o=t.getModel("subtextStyle"),a=t.get("textAlign"),s=rt(t.get("textBaseline"),t.get("textVerticalAlign")),l=new ks({style:Uh(r,{text:t.get("text"),fill:r.getTextColor()},{disableBox:!0}),z2:10}),u=l.getBoundingRect(),h=t.get("subtext"),c=new ks({style:Uh(o,{text:h,fill:o.getTextColor(),y:u.height+t.get("itemGap"),verticalAlign:"top"},{disableBox:!0}),z2:10}),p=t.get("link"),d=t.get("sublink"),f=t.get("triggerEvent",!0);l.silent=!p&&!f,c.silent=!d&&!f,p&&l.on("click",(function(){dp(p,"_"+t.get("target"))})),d&&c.on("click",(function(){dp(d,"_"+t.get("subtarget"))})),Hs(l).eventData=Hs(c).eventData=f?{componentType:"title",componentIndex:t.componentIndex}:null,i.add(l),h&&i.add(c);var g=i.getBoundingRect(),y=t.getBoxLayoutParams();y.width=g.width,y.height=g.height;var v=xp(y,{width:n.getWidth(),height:n.getHeight()},t.get("padding"));a||("middle"===(a=t.get("left")||t.get("right"))&&(a="center"),"right"===a?v.x+=v.width:"center"===a&&(v.x+=v.width/2)),s||("center"===(s=t.get("top")||t.get("bottom"))&&(s="middle"),"bottom"===s?v.y+=v.height:"middle"===s&&(v.y+=v.height/2),s=s||"top"),i.x=v.x,i.y=v.y,i.markRedraw();var m={align:a,verticalAlign:s};l.setStyle(m),c.setStyle(m),g=i.getBoundingRect();var x=v.margin,_=t.getItemStyle(["color","opacity"]);_.fill=t.get("backgroundColor");var b=new Cs({shape:{x:g.x-x[3],y:g.y-x[0],width:g.width+x[1]+x[3],height:g.height+x[0]+x[2],r:t.get("borderRadius")},style:_,subPixelOptimize:!0,silent:!0});i.add(b)}},e.type="title",e}(gg);var bV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.layoutMode="box",n}return n(e,t),e.prototype.init=function(t,e,n){this.mergeDefaultAndTheme(t,n),this._initData()},e.prototype.mergeOption=function(e){t.prototype.mergeOption.apply(this,arguments),this._initData()},e.prototype.setCurrentIndex=function(t){null==t&&(t=this.option.currentIndex);var e=this._data.count();this.option.loop?t=(t%e+e)%e:(t>=e&&(t=e-1),t<0&&(t=0)),this.option.currentIndex=t},e.prototype.getCurrentIndex=function(){return this.option.currentIndex},e.prototype.isIndexMax=function(){return this.getCurrentIndex()>=this._data.count()-1},e.prototype.setPlayState=function(t){this.option.autoPlay=!!t},e.prototype.getPlayState=function(){return!!this.option.autoPlay},e.prototype._initData=function(){var t,e=this.option,n=e.data||[],i=e.axisType,r=this._names=[];"category"===i?(t=[],E(n,(function(e,n){var i,o=xo(fo(e),"");q(e)?(i=T(e)).value=n:i=n,t.push(i),r.push(o)}))):t=n;var o={category:"ordinal",time:"time",value:"number"}[i]||"number";(this._data=new qm([{name:"value",type:o}],this)).initData(t,r)},e.prototype.getData=function(){return this._data},e.prototype.getCategories=function(){if("category"===this.get("axisType"))return this._names.slice()},e.type="timeline",e.defaultOption={z:4,show:!0,axisType:"time",realtime:!0,left:"20%",top:null,right:"20%",bottom:0,width:null,height:40,padding:5,controlPosition:"left",autoPlay:!1,rewind:!1,loop:!0,playInterval:2e3,currentIndex:0,itemStyle:{},label:{color:"#000"},data:[]},e}(Tp),wV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="timeline.slider",e.defaultOption=yc(bV.defaultOption,{backgroundColor:"rgba(0,0,0,0)",borderColor:"#ccc",borderWidth:0,orient:"horizontal",inverse:!1,tooltip:{trigger:"item"},symbol:"circle",symbolSize:12,lineStyle:{show:!0,width:2,color:"#DAE1F5"},label:{position:"auto",show:!0,interval:"auto",rotate:0,color:"#A4B1D7"},itemStyle:{color:"#A4B1D7",borderWidth:1},checkpointStyle:{symbol:"circle",symbolSize:15,color:"#316bf3",borderColor:"#fff",borderWidth:2,shadowBlur:2,shadowOffsetX:1,shadowOffsetY:1,shadowColor:"rgba(0, 0, 0, 0.3)",animation:!0,animationDuration:300,animationEasing:"quinticInOut"},controlStyle:{show:!0,showPlayBtn:!0,showPrevBtn:!0,showNextBtn:!0,itemSize:24,itemGap:12,position:"left",playIcon:"path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z",stopIcon:"path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z",nextIcon:"M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z",prevIcon:"M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z",prevBtnSize:18,nextBtnSize:18,color:"#A4B1D7",borderColor:"#A4B1D7",borderWidth:1},emphasis:{label:{show:!0,color:"#6f778d"},itemStyle:{color:"#316BF3"},controlStyle:{color:"#316BF3",borderColor:"#316BF3",borderWidth:2}},progress:{lineStyle:{color:"#316BF3"},itemStyle:{color:"#316BF3"},label:{color:"#6f778d"}},data:[]}),e}(bV);R(wV,lf.prototype);var SV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="timeline",e}(gg),MV=function(t){function e(e,n,i,r){var o=t.call(this,e,n,i)||this;return o.type=r||"value",o}return n(e,t),e.prototype.getLabelModel=function(){return this.model.getModel("label")},e.prototype.isHorizontal=function(){return"horizontal"===this.model.get("orient")},e}(H_),IV=Math.PI,TV=So(),CV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(t,e){this.api=e},e.prototype.render=function(t,e,n){if(this.model=t,this.api=n,this.ecModel=e,this.group.removeAll(),t.get("show",!0)){var i=this._layout(t,n),r=this._createGroup("_mainGroup"),o=this._createGroup("_labelGroup"),a=this._axis=this._createAxis(i,t);t.formatTooltip=function(t){return Xf("nameValue",{noName:!0,value:a.scale.getLabel({value:t})})},E(["AxisLine","AxisTick","Control","CurrentPointer"],(function(e){this["_render"+e](i,r,a,t)}),this),this._renderAxisLabel(i,o,a,t),this._position(i,t)}this._doPlayStop(),this._updateTicksStatus()},e.prototype.remove=function(){this._clearTimer(),this.group.removeAll()},e.prototype.dispose=function(){this._clearTimer()},e.prototype._layout=function(t,e){var n,i,r,o,a=t.get(["label","position"]),s=t.get("orient"),l=function(t,e){return xp(t.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()},t.get("padding"))}(t,e),u={horizontal:"center",vertical:(n=null==a||"auto"===a?"horizontal"===s?l.y+l.height/2<e.getHeight()/2?"-":"+":l.x+l.width/2<e.getWidth()/2?"+":"-":X(a)?{horizontal:{top:"-",bottom:"+"},vertical:{left:"-",right:"+"}}[s][a]:a)>=0||"+"===n?"left":"right"},h={horizontal:n>=0||"+"===n?"top":"bottom",vertical:"middle"},c={horizontal:0,vertical:IV/2},p="vertical"===s?l.height:l.width,d=t.getModel("controlStyle"),f=d.get("show",!0),g=f?d.get("itemSize"):0,y=f?d.get("itemGap"):0,v=g+y,m=t.get(["label","rotate"])||0;m=m*IV/180;var x=d.get("position",!0),_=f&&d.get("showPlayBtn",!0),b=f&&d.get("showPrevBtn",!0),w=f&&d.get("showNextBtn",!0),S=0,M=p;"left"===x||"bottom"===x?(_&&(i=[0,0],S+=v),b&&(r=[S,0],S+=v),w&&(o=[M-g,0],M-=v)):(_&&(i=[M-g,0],M-=v),b&&(r=[0,0],S+=v),w&&(o=[M-g,0],M-=v));var I=[S,M];return t.get("inverse")&&I.reverse(),{viewRect:l,mainLength:p,orient:s,rotation:c[s],labelRotation:m,labelPosOpt:n,labelAlign:t.get(["label","align"])||u[s],labelBaseline:t.get(["label","verticalAlign"])||t.get(["label","baseline"])||h[s],playPosition:i,prevBtnPosition:r,nextBtnPosition:o,axisExtent:I,controlSize:g,controlGap:y}},e.prototype._position=function(t,e){var n=this._mainGroup,i=this._labelGroup,r=t.viewRect;if("vertical"===t.orient){var o=[1,0,0,1,0,0],a=r.x,s=r.y+r.height;Ei(o,o,[-a,-s]),zi(o,o,-IV/2),Ei(o,o,[a,s]),(r=r.clone()).applyTransform(o)}var l=y(r),u=y(n.getBoundingRect()),h=y(i.getBoundingRect()),c=[n.x,n.y],p=[i.x,i.y];p[0]=c[0]=l[0][0];var d,f=t.labelPosOpt;null==f||X(f)?(v(c,u,l,1,d="+"===f?0:1),v(p,h,l,1,1-d)):(v(c,u,l,1,d=f>=0?0:1),p[1]=c[1]+f);function g(t){t.originX=l[0][0]-t.x,t.originY=l[1][0]-t.y}function y(t){return[[t.x,t.x+t.width],[t.y,t.y+t.height]]}function v(t,e,n,i,r){t[i]+=n[i][r]-e[i][r]}n.setPosition(c),i.setPosition(p),n.rotation=i.rotation=t.rotation,g(n),g(i)},e.prototype._createAxis=function(t,e){var n=e.getData(),i=e.get("axisType"),r=function(t,e){if(e=e||t.get("type"))switch(e){case"category":return new vx({ordinalMeta:t.getCategories(),extent:[1/0,-1/0]});case"time":return new Rx({locale:t.ecModel.getLocaleModel(),useUTC:t.ecModel.get("useUTC")});default:return new xx}}(e,i);r.getTicks=function(){return n.mapArray(["value"],(function(t){return{value:t}}))};var o=n.getDataExtent("value");r.setExtent(o[0],o[1]),r.calcNiceTicks();var a=new MV("value",r,t.axisExtent,i);return a.model=e,a},e.prototype._createGroup=function(t){var e=this[t]=new Cr;return this.group.add(e),e},e.prototype._renderAxisLine=function(t,e,n,i){var r=n.getExtent();if(i.get(["lineStyle","show"])){var o=new zu({shape:{x1:r[0],y1:0,x2:r[1],y2:0},style:A({lineCap:"round"},i.getModel("lineStyle").getLineStyle()),silent:!0,z2:1});e.add(o);var a=this._progressLine=new zu({shape:{x1:r[0],x2:this._currentPointer?this._currentPointer.x:r[0],y1:0,y2:0},style:k({lineCap:"round",lineWidth:o.style.lineWidth},i.getModel(["progress","lineStyle"]).getLineStyle()),silent:!0,z2:1});e.add(a)}},e.prototype._renderAxisTick=function(t,e,n,i){var r=this,o=i.getData(),a=n.scale.getTicks();this._tickSymbols=[],E(a,(function(t){var a=n.dataToCoord(t.value),s=o.getItemModel(t.value),l=s.getModel("itemStyle"),u=s.getModel(["emphasis","itemStyle"]),h=s.getModel(["progress","itemStyle"]),c={x:a,y:0,onclick:W(r._changeTimeline,r,t.value)},p=DV(s,l,e,c);p.ensureState("emphasis").style=u.getItemStyle(),p.ensureState("progress").style=h.getItemStyle(),Ol(p);var d=Hs(p);s.get("tooltip")?(d.dataIndex=t.value,d.dataModel=i):d.dataIndex=d.dataModel=null,r._tickSymbols.push(p)}))},e.prototype._renderAxisLabel=function(t,e,n,i){var r=this;if(n.getLabelModel().get("show")){var o=i.getData(),a=n.getViewLabels();this._tickLabels=[],E(a,(function(i){var a=i.tickValue,s=o.getItemModel(a),l=s.getModel("label"),u=s.getModel(["emphasis","label"]),h=s.getModel(["progress","label"]),c=n.dataToCoord(i.tickValue),p=new ks({x:c,y:0,rotation:t.labelRotation-t.rotation,onclick:W(r._changeTimeline,r,a),silent:!1,style:Uh(l,{text:i.formattedLabel,align:t.labelAlign,verticalAlign:t.labelBaseline})});p.ensureState("emphasis").style=Uh(u),p.ensureState("progress").style=Uh(h),e.add(p),Ol(p),TV(p).dataIndex=a,r._tickLabels.push(p)}))}},e.prototype._renderControl=function(t,e,n,i){var r=t.controlSize,o=t.rotation,a=i.getModel("controlStyle").getItemStyle(),s=i.getModel(["emphasis","controlStyle"]).getItemStyle(),l=i.getPlayState(),u=i.get("inverse",!0);function h(t,n,l,u){if(t){var h=gr(rt(i.get(["controlStyle",n+"BtnSize"]),r),r),c=function(t,e,n,i){var r=i.style,o=Ph(t.get(["controlStyle",e]),i||{},new sr(n[0],n[1],n[2],n[3]));r&&o.setStyle(r);return o}(i,n+"Icon",[0,-h/2,h,h],{x:t[0],y:t[1],originX:r/2,originY:0,rotation:u?-o:0,rectHover:!0,style:a,onclick:l});c.ensureState("emphasis").style=s,e.add(c),Ol(c)}}h(t.nextBtnPosition,"next",W(this._changeTimeline,this,u?"-":"+")),h(t.prevBtnPosition,"prev",W(this._changeTimeline,this,u?"+":"-")),h(t.playPosition,l?"stop":"play",W(this._handlePlayClick,this,!l),!0)},e.prototype._renderCurrentPointer=function(t,e,n,i){var r=i.getData(),o=i.getCurrentIndex(),a=r.getItemModel(o).getModel("checkpointStyle"),s=this,l={onCreate:function(t){t.draggable=!0,t.drift=W(s._handlePointerDrag,s),t.ondragend=W(s._handlePointerDragend,s),AV(t,s._progressLine,o,n,i,!0)},onUpdate:function(t){AV(t,s._progressLine,o,n,i)}};this._currentPointer=DV(a,a,this._mainGroup,{},this._currentPointer,l)},e.prototype._handlePlayClick=function(t){this._clearTimer(),this.api.dispatchAction({type:"timelinePlayChange",playState:t,from:this.uid})},e.prototype._handlePointerDrag=function(t,e,n){this._clearTimer(),this._pointerChangeTimeline([n.offsetX,n.offsetY])},e.prototype._handlePointerDragend=function(t){this._pointerChangeTimeline([t.offsetX,t.offsetY],!0)},e.prototype._pointerChangeTimeline=function(t,e){var n=this._toAxisCoord(t)[0],i=Vr(this._axis.getExtent().slice());n>i[1]&&(n=i[1]),n<i[0]&&(n=i[0]),this._currentPointer.x=n,this._currentPointer.markRedraw(),this._progressLine.shape.x2=n,this._progressLine.dirty();var r=this._findNearestTick(n),o=this.model;(e||r!==o.getCurrentIndex()&&o.get("realtime"))&&this._changeTimeline(r)},e.prototype._doPlayStop=function(){var t=this;this._clearTimer(),this.model.getPlayState()&&(this._timer=setTimeout((function(){var e=t.model;t._changeTimeline(e.getCurrentIndex()+(e.get("rewind",!0)?-1:1))}),this.model.get("playInterval")))},e.prototype._toAxisCoord=function(t){return Th(t,this._mainGroup.getLocalTransform(),!0)},e.prototype._findNearestTick=function(t){var e,n=this.model.getData(),i=1/0,r=this._axis;return n.each(["value"],(function(n,o){var a=r.dataToCoord(n),s=Math.abs(a-t);s<i&&(i=s,e=o)})),e},e.prototype._clearTimer=function(){this._timer&&(clearTimeout(this._timer),this._timer=null)},e.prototype._changeTimeline=function(t){var e=this.model.getCurrentIndex();"+"===t?t=e+1:"-"===t&&(t=e-1),this.api.dispatchAction({type:"timelineChange",currentIndex:t,from:this.uid})},e.prototype._updateTicksStatus=function(){var t=this.model.getCurrentIndex(),e=this._tickSymbols,n=this._tickLabels;if(e)for(var i=0;i<e.length;i++)e&&e[i]&&e[i].toggleState("progress",i<t);if(n)for(i=0;i<n.length;i++)n&&n[i]&&n[i].toggleState("progress",TV(n[i]).dataIndex<=t)},e.type="timeline.slider",e}(SV);function DV(t,e,n,i,r,o){var a=e.get("color");r?(r.setColor(a),n.add(r),o&&o.onUpdate(r)):((r=Ly(t.get("symbol"),-1,-1,2,2,a)).setStyle("strokeNoScale",!0),n.add(r),o&&o.onCreate(r));var s=e.getItemStyle(["color"]);r.setStyle(s),i=C({rectHover:!0,z2:100},i,!0);var l=Py(t.get("symbolSize"));i.scaleX=l[0]/2,i.scaleY=l[1]/2;var u=Oy(t.get("symbolOffset"),l);u&&(i.x=(i.x||0)+u[0],i.y=(i.y||0)+u[1]);var h=t.get("symbolRotate");return i.rotation=(h||0)*Math.PI/180||0,r.attr(i),r.updateTransform(),r}function AV(t,e,n,i,r,o){if(!t.dragging){var a=r.getModel("checkpointStyle"),s=i.dataToCoord(r.getData().get("value",n));if(o||!a.get("animation",!0))t.attr({x:s,y:0}),e&&e.attr({shape:{x2:s}});else{var l={duration:a.get("animationDuration",!0),easing:a.get("animationEasing",!0)};t.stopAnimation(null,!0),t.animateTo({x:s,y:0},l),e&&e.animateTo({shape:{x2:s}},l)}}}function kV(t){var e=t&&t.timeline;Y(e)||(e=e?[e]:[]),E(e,(function(t){t&&function(t){var e=t.type,n={number:"value",time:"time"};n[e]&&(t.axisType=n[e],delete t.type);if(LV(t),PV(t,"controlPosition")){var i=t.controlStyle||(t.controlStyle={});PV(i,"position")||(i.position=t.controlPosition),"none"!==i.position||PV(i,"show")||(i.show=!1,delete i.position),delete t.controlPosition}E(t.data||[],(function(t){q(t)&&!Y(t)&&(!PV(t,"value")&&PV(t,"name")&&(t.value=t.name),LV(t))}))}(t)}))}function LV(t){var e=t.itemStyle||(t.itemStyle={}),n=e.emphasis||(e.emphasis={}),i=t.label||t.label||{},r=i.normal||(i.normal={}),o={normal:1,emphasis:1};E(i,(function(t,e){o[e]||PV(r,e)||(r[e]=t)})),n.label&&!PV(i,"emphasis")&&(i.emphasis=n.label,delete n.label)}function PV(t,e){return t.hasOwnProperty(e)}function OV(t,e){if(!t)return!1;for(var n=Y(t)?t:[t],i=0;i<n.length;i++)if(n[i]&&n[i][e])return!0;return!1}function RV(t){co(t,"label",["show"])}var NV=So(),EV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.createdBySelf=!1,n}return n(e,t),e.prototype.init=function(t,e,n){this.mergeDefaultAndTheme(t,n),this._mergeOption(t,n,!1,!0)},e.prototype.isAnimationEnabled=function(){if(r.node)return!1;var t=this.__hostSeries;return this.getShallow("animation")&&t&&t.isAnimationEnabled()},e.prototype.mergeOption=function(t,e){this._mergeOption(t,e,!1,!1)},e.prototype._mergeOption=function(t,e,n,i){var r=this.mainType;n||e.eachSeries((function(t){var n=t.get(this.mainType,!0),o=NV(t)[r];n&&n.data?(o?o._mergeOption(n,e,!0):(i&&RV(n),E(n.data,(function(t){t instanceof Array?(RV(t[0]),RV(t[1])):RV(t)})),A(o=this.createMarkerModelFromSeries(n,this,e),{mainType:this.mainType,seriesIndex:t.seriesIndex,name:t.name,createdBySelf:!0}),o.__hostSeries=t),NV(t)[r]=o):NV(t)[r]=null}),this)},e.prototype.formatTooltip=function(t,e,n){var i=this.getData(),r=this.getRawValue(t),o=i.getName(t);return Xf("section",{header:this.name,blocks:[Xf("nameValue",{name:o,value:r,noName:!o,noValue:null==r})]})},e.prototype.getData=function(){return this._data},e.prototype.setData=function(t){this._data=t},e.getMarkerModelFromSeries=function(t,e){return NV(t)[e]},e.type="marker",e.dependencies=["series","grid","polar","geo"],e}(Tp);R(EV,lf.prototype);var zV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.createMarkerModelFromSeries=function(t,n,i){return new e(t,n,i)},e.type="markPoint",e.defaultOption={z:5,symbol:"pin",symbolSize:50,tooltip:{trigger:"item"},label:{show:!0,position:"inside"},itemStyle:{borderWidth:2},emphasis:{label:{show:!0}}},e}(EV);function VV(t){return!(isNaN(parseFloat(t.x))&&isNaN(parseFloat(t.y)))}function BV(t,e,n,i,r,o){var a=[],s=nx(e,i)?e.getCalculationInfo("stackResultDimension"):i,l=UV(e,s,t),u=e.indicesOfNearest(s,l)[0];a[r]=e.get(n,u),a[o]=e.get(s,u);var h=e.get(i,u),c=Br(e.get(i,u));return(c=Math.min(c,20))>=0&&(a[o]=+a[o].toFixed(c)),[a,h]}var FV={min:H(BV,"min"),max:H(BV,"max"),average:H(BV,"average"),median:H(BV,"median")};function GV(t,e){var n=t.getData(),i=t.coordinateSystem;if(e&&!function(t){return!isNaN(parseFloat(t.x))&&!isNaN(parseFloat(t.y))}(e)&&!Y(e.coord)&&i){var r=i.dimensions,o=WV(e,n,i,t);if((e=T(e)).type&&FV[e.type]&&o.baseAxis&&o.valueAxis){var a=P(r,o.baseAxis.dim),s=P(r,o.valueAxis.dim),l=FV[e.type](n,o.baseDataDim,o.valueDataDim,a,s);e.coord=l[0],e.value=l[1]}else{for(var u=[null!=e.xAxis?e.xAxis:e.radiusAxis,null!=e.yAxis?e.yAxis:e.angleAxis],h=0;h<2;h++)FV[u[h]]&&(u[h]=UV(n,n.mapDimension(r[h]),u[h]));e.coord=u}}return e}function WV(t,e,n,i){var r={};return null!=t.valueIndex||null!=t.valueDim?(r.valueDataDim=null!=t.valueIndex?e.getDimension(t.valueIndex):t.valueDim,r.valueAxis=n.getAxis(function(t,e){var n=t.getData().getDimensionInfo(e);return n&&n.coordDim}(i,r.valueDataDim)),r.baseAxis=n.getOtherAxis(r.valueAxis),r.baseDataDim=e.mapDimension(r.baseAxis.dim)):(r.baseAxis=i.getBaseAxis(),r.valueAxis=n.getOtherAxis(r.baseAxis),r.baseDataDim=e.mapDimension(r.baseAxis.dim),r.valueDataDim=e.mapDimension(r.valueAxis.dim)),r}function HV(t,e){return!(t&&t.containData&&e.coord&&!VV(e))||t.containData(e.coord)}function YV(t,e){return t?function(t,n,i,r){return df(r<2?t.coord&&t.coord[r]:t.value,e[r])}:function(t,n,i,r){return df(t.value,e[r])}}function UV(t,e,n){if("average"===n){var i=0,r=0;return t.each(e,(function(t,e){isNaN(t)||(i+=t,r++)})),i/r}return"median"===n?t.getMedian(e):t.getDataExtent(e)["max"===n?1:0]}var XV=So(),ZV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.init=function(){this.markerGroupMap=ft()},e.prototype.render=function(t,e,n){var i=this,r=this.markerGroupMap;r.each((function(t){XV(t).keep=!1})),e.eachSeries((function(t){var r=EV.getMarkerModelFromSeries(t,i.type);r&&i.renderSeries(t,r,e,n)})),r.each((function(t){!XV(t).keep&&i.group.remove(t.group)}))},e.prototype.markKeep=function(t){XV(t).keep=!0},e.prototype.toggleBlurSeries=function(t,e){var n=this;E(t,(function(t){var i=EV.getMarkerModelFromSeries(t,n.type);i&&i.getData().eachItemGraphicEl((function(t){t&&(e?wl(t):Sl(t))}))}))},e.type="marker",e}(gg);function jV(t,e,n){var i=e.coordinateSystem;t.each((function(r){var o,a=t.getItemModel(r),s=Er(a.get("x"),n.getWidth()),l=Er(a.get("y"),n.getHeight());if(isNaN(s)||isNaN(l)){if(e.getMarkerPosition)o=e.getMarkerPosition(t.getValues(t.dimensions,r));else if(i){var u=t.get(i.dimensions[0],r),h=t.get(i.dimensions[1],r);o=i.dataToPoint([u,h])}}else o=[s,l];isNaN(s)||(o[0]=s),isNaN(l)||(o[1]=l),t.setItemLayout(r,o)}))}var qV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.updateTransform=function(t,e,n){e.eachSeries((function(t){var e=EV.getMarkerModelFromSeries(t,"markPoint");e&&(jV(e.getData(),t,n),this.markerGroupMap.get(t.id).updateLayout())}),this)},e.prototype.renderSeries=function(t,e,n,i){var r=t.coordinateSystem,o=t.id,a=t.getData(),s=this.markerGroupMap,l=s.get(o)||s.set(o,new qw),u=function(t,e,n){var i;i=t?z(t&&t.dimensions,(function(t){return A(A({},e.getData().getDimensionInfo(e.getData().mapDimension(t))||{}),{name:t,ordinalMeta:null})})):[{name:"value",type:"float"}];var r=new qm(i,n),o=z(n.get("data"),H(GV,e));t&&(o=B(o,H(HV,t)));var a=YV(!!t,i);return r.initData(o,null,a),r}(r,t,e);e.setData(u),jV(e.getData(),t,i),u.each((function(t){var n=u.getItemModel(t),i=n.getShallow("symbol"),r=n.getShallow("symbolSize"),o=n.getShallow("symbolRotate"),s=n.getShallow("symbolOffset"),l=n.getShallow("symbolKeepAspect");if(U(i)||U(r)||U(o)||U(s)){var h=e.getRawValue(t),c=e.getDataParams(t);U(i)&&(i=i(h,c)),U(r)&&(r=r(h,c)),U(o)&&(o=o(h,c)),U(s)&&(s=s(h,c))}var p=n.getModel("itemStyle").getItemStyle(),d=gy(a,"color");p.fill||(p.fill=d),u.setItemVisual(t,{symbol:i,symbolSize:r,symbolRotate:o,symbolOffset:s,symbolKeepAspect:l,style:p})})),l.updateData(u),this.group.add(l.group),u.eachItemGraphicEl((function(t){t.traverse((function(t){Hs(t).dataModel=e}))})),this.markKeep(l),l.group.silent=e.get("silent")||t.get("silent")},e.type="markPoint",e}(ZV);var KV=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.createMarkerModelFromSeries=function(t,n,i){return new e(t,n,i)},e.type="markLine",e.defaultOption={z:5,symbol:["circle","arrow"],symbolSize:[8,16],symbolOffset:0,precision:2,tooltip:{trigger:"item"},label:{show:!0,position:"end",distance:5},lineStyle:{type:"dashed"},emphasis:{label:{show:!0},lineStyle:{width:3}},animationEasing:"linear"},e}(EV),$V=So(),JV=function(t,e,n,i){var r,o=t.getData();if(Y(i))r=i;else{var a=i.type;if("min"===a||"max"===a||"average"===a||"median"===a||null!=i.xAxis||null!=i.yAxis){var s=void 0,l=void 0;if(null!=i.yAxis||null!=i.xAxis)s=e.getAxis(null!=i.yAxis?"y":"x"),l=it(i.yAxis,i.xAxis);else{var u=WV(i,o,e,t);s=u.valueAxis,l=UV(o,ix(o,u.valueDataDim),a)}var h="x"===s.dim?0:1,c=1-h,p=T(i),d={coord:[]};p.type=null,p.coord=[],p.coord[c]=-1/0,d.coord[c]=1/0;var f=n.get("precision");f>=0&&j(l)&&(l=+l.toFixed(Math.min(f,20))),p.coord[h]=d.coord[h]=l,r=[p,d,{type:a,valueIndex:i.valueIndex,value:l}]}else r=[]}var g=[GV(t,r[0]),GV(t,r[1]),A({},r[2])];return g[2].type=g[2].type||null,C(g[2],g[0]),C(g[2],g[1]),g};function QV(t){return!isNaN(t)&&!isFinite(t)}function tB(t,e,n,i){var r=1-t,o=i.dimensions[t];return QV(e[r])&&QV(n[r])&&e[t]===n[t]&&i.getAxis(o).containData(e[t])}function eB(t,e){if("cartesian2d"===t.type){var n=e[0].coord,i=e[1].coord;if(n&&i&&(tB(1,n,i,t)||tB(0,n,i,t)))return!0}return HV(t,e[0])&&HV(t,e[1])}function nB(t,e,n,i,r){var o,a=i.coordinateSystem,s=t.getItemModel(e),l=Er(s.get("x"),r.getWidth()),u=Er(s.get("y"),r.getHeight());if(isNaN(l)||isNaN(u)){if(i.getMarkerPosition)o=i.getMarkerPosition(t.getValues(t.dimensions,e));else{var h=a.dimensions,c=t.get(h[0],e),p=t.get(h[1],e);o=a.dataToPoint([c,p])}if(uS(a,"cartesian2d")){var d=a.getAxis("x"),f=a.getAxis("y");h=a.dimensions;QV(t.get(h[0],e))?o[0]=d.toGlobalCoord(d.getExtent()[n?0:1]):QV(t.get(h[1],e))&&(o[1]=f.toGlobalCoord(f.getExtent()[n?0:1]))}isNaN(l)||(o[0]=l),isNaN(u)||(o[1]=u)}else o=[l,u];t.setItemLayout(e,o)}var iB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.updateTransform=function(t,e,n){e.eachSeries((function(t){var e=EV.getMarkerModelFromSeries(t,"markLine");if(e){var i=e.getData(),r=$V(e).from,o=$V(e).to;r.each((function(e){nB(r,e,!0,t,n),nB(o,e,!1,t,n)})),i.each((function(t){i.setItemLayout(t,[r.getItemLayout(t),o.getItemLayout(t)])})),this.markerGroupMap.get(t.id).updateLayout()}}),this)},e.prototype.renderSeries=function(t,e,n,i){var r=t.coordinateSystem,o=t.id,a=t.getData(),s=this.markerGroupMap,l=s.get(o)||s.set(o,new gA);this.group.add(l.group);var u=function(t,e,n){var i;i=t?z(t&&t.dimensions,(function(t){return A(A({},e.getData().getDimensionInfo(e.getData().mapDimension(t))||{}),{name:t,ordinalMeta:null})})):[{name:"value",type:"float"}];var r=new qm(i,n),o=new qm(i,n),a=new qm([],n),s=z(n.get("data"),H(JV,e,t,n));t&&(s=B(s,H(eB,t)));var l=YV(!!t,i);return r.initData(z(s,(function(t){return t[0]})),null,l),o.initData(z(s,(function(t){return t[1]})),null,l),a.initData(z(s,(function(t){return t[2]}))),a.hasItemOption=!0,{from:r,to:o,line:a}}(r,t,e),h=u.from,c=u.to,p=u.line;$V(e).from=h,$V(e).to=c,e.setData(p);var d=e.get("symbol"),f=e.get("symbolSize"),g=e.get("symbolRotate"),y=e.get("symbolOffset");function v(e,n,r){var o=e.getItemModel(n);nB(e,n,r,t,i);var s=o.getModel("itemStyle").getItemStyle();null==s.fill&&(s.fill=gy(a,"color")),e.setItemVisual(n,{symbolKeepAspect:o.get("symbolKeepAspect"),symbolOffset:rt(o.get("symbolOffset",!0),y[r?0:1]),symbolRotate:rt(o.get("symbolRotate",!0),g[r?0:1]),symbolSize:rt(o.get("symbolSize"),f[r?0:1]),symbol:rt(o.get("symbol",!0),d[r?0:1]),style:s})}Y(d)||(d=[d,d]),Y(f)||(f=[f,f]),Y(g)||(g=[g,g]),Y(y)||(y=[y,y]),u.from.each((function(t){v(h,t,!0),v(c,t,!1)})),p.each((function(t){var e=p.getItemModel(t).getModel("lineStyle").getLineStyle();p.setItemLayout(t,[h.getItemLayout(t),c.getItemLayout(t)]),null==e.stroke&&(e.stroke=h.getItemVisual(t,"style").fill),p.setItemVisual(t,{fromSymbolKeepAspect:h.getItemVisual(t,"symbolKeepAspect"),fromSymbolOffset:h.getItemVisual(t,"symbolOffset"),fromSymbolRotate:h.getItemVisual(t,"symbolRotate"),fromSymbolSize:h.getItemVisual(t,"symbolSize"),fromSymbol:h.getItemVisual(t,"symbol"),toSymbolKeepAspect:c.getItemVisual(t,"symbolKeepAspect"),toSymbolOffset:c.getItemVisual(t,"symbolOffset"),toSymbolRotate:c.getItemVisual(t,"symbolRotate"),toSymbolSize:c.getItemVisual(t,"symbolSize"),toSymbol:c.getItemVisual(t,"symbol"),style:e})})),l.updateData(p),u.line.eachItemGraphicEl((function(t){Hs(t).dataModel=e,t.traverse((function(t){Hs(t).dataModel=e}))})),this.markKeep(l),l.group.silent=e.get("silent")||t.get("silent")},e.type="markLine",e}(ZV);var rB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.createMarkerModelFromSeries=function(t,n,i){return new e(t,n,i)},e.type="markArea",e.defaultOption={z:1,tooltip:{trigger:"item"},animation:!1,label:{show:!0,position:"top"},itemStyle:{borderWidth:0},emphasis:{label:{show:!0,position:"top"}}},e}(EV),oB=So(),aB=function(t,e,n,i){var r=GV(t,i[0]),o=GV(t,i[1]),a=r.coord,s=o.coord;a[0]=it(a[0],-1/0),a[1]=it(a[1],-1/0),s[0]=it(s[0],1/0),s[1]=it(s[1],1/0);var l=D([{},r,o]);return l.coord=[r.coord,o.coord],l.x0=r.x,l.y0=r.y,l.x1=o.x,l.y1=o.y,l};function sB(t){return!isNaN(t)&&!isFinite(t)}function lB(t,e,n,i){var r=1-t;return sB(e[r])&&sB(n[r])}function uB(t,e){var n=e.coord[0],i=e.coord[1],r={coord:n,x:e.x0,y:e.y0},o={coord:i,x:e.x1,y:e.y1};return uS(t,"cartesian2d")?!(!n||!i||!lB(1,n,i)&&!lB(0,n,i))||function(t,e,n){return!(t&&t.containZone&&e.coord&&n.coord&&!VV(e)&&!VV(n))||t.containZone(e.coord,n.coord)}(t,r,o):HV(t,r)||HV(t,o)}function hB(t,e,n,i,r){var o,a=i.coordinateSystem,s=t.getItemModel(e),l=Er(s.get(n[0]),r.getWidth()),u=Er(s.get(n[1]),r.getHeight());if(isNaN(l)||isNaN(u)){if(i.getMarkerPosition)o=i.getMarkerPosition(t.getValues(n,e));else{var h=[d=t.get(n[0],e),f=t.get(n[1],e)];a.clampData&&a.clampData(h,h),o=a.dataToPoint(h,!0)}if(uS(a,"cartesian2d")){var c=a.getAxis("x"),p=a.getAxis("y"),d=t.get(n[0],e),f=t.get(n[1],e);sB(d)?o[0]=c.toGlobalCoord(c.getExtent()["x0"===n[0]?0:1]):sB(f)&&(o[1]=p.toGlobalCoord(p.getExtent()["y0"===n[1]?0:1]))}isNaN(l)||(o[0]=l),isNaN(u)||(o[1]=u)}else o=[l,u];return o}var cB=[["x0","y0"],["x1","y0"],["x1","y1"],["x0","y1"]],pB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.updateTransform=function(t,e,n){e.eachSeries((function(t){var e=EV.getMarkerModelFromSeries(t,"markArea");if(e){var i=e.getData();i.each((function(e){var r=z(cB,(function(r){return hB(i,e,r,t,n)}));i.setItemLayout(e,r),i.getItemGraphicEl(e).setShape("points",r)}))}}),this)},e.prototype.renderSeries=function(t,e,n,i){var r=t.coordinateSystem,o=t.id,a=t.getData(),s=this.markerGroupMap,l=s.get(o)||s.set(o,{group:new Cr});this.group.add(l.group),this.markKeep(l);var u=function(t,e,n){var i,r,o=["x0","y0","x1","y1"];if(t){var a=z(t&&t.dimensions,(function(t){var n=e.getData();return A(A({},n.getDimensionInfo(n.mapDimension(t))||{}),{name:t,ordinalMeta:null})}));r=z(o,(function(t,e){return{name:t,type:a[e%2].type}})),i=new qm(r,n)}else i=new qm(r=[{name:"value",type:"float"}],n);var s=z(n.get("data"),H(aB,e,t,n));t&&(s=B(s,H(uB,t)));var l=t?function(t,e,n,i){return df(t.coord[Math.floor(i/2)][i%2],r[i])}:function(t,e,n,i){return df(t.value,r[i])};return i.initData(s,null,l),i.hasItemOption=!0,i}(r,t,e);e.setData(u),u.each((function(e){var n=z(cB,(function(n){return hB(u,e,n,t,i)})),o=r.getAxis("x").scale,s=r.getAxis("y").scale,l=o.getExtent(),h=s.getExtent(),c=[o.parse(u.get("x0",e)),o.parse(u.get("x1",e))],p=[s.parse(u.get("y0",e)),s.parse(u.get("y1",e))];Vr(c),Vr(p);var d=!!(l[0]>c[1]||l[1]<c[0]||h[0]>p[1]||h[1]<p[0]);u.setItemLayout(e,{points:n,allClipped:d});var f=u.getItemModel(e).getModel("itemStyle").getItemStyle(),g=gy(a,"color");f.fill||(f.fill=g,X(f.fill)&&(f.fill=An(f.fill,.4))),f.stroke||(f.stroke=g),u.setItemVisual(e,"style",f)})),u.diff(oB(l).data).add((function(t){var e=u.getItemLayout(t);if(!e.allClipped){var n=new Pu({shape:{points:e.points}});u.setItemGraphicEl(t,n),l.group.add(n)}})).update((function(t,n){var i=oB(l).data.getItemGraphicEl(n),r=u.getItemLayout(t);r.allClipped?i&&l.group.remove(i):(i?rh(i,{shape:{points:r.points}},e,t):i=new Pu({shape:{points:r.points}}),u.setItemGraphicEl(t,i),l.group.add(i))})).remove((function(t){var e=oB(l).data.getItemGraphicEl(t);l.group.remove(e)})).execute(),u.eachItemGraphicEl((function(t,n){var i=u.getItemModel(n),r=u.getItemVisual(n,"style");t.useStyle(u.getItemVisual(n,"style")),Hh(t,Yh(i),{labelFetcher:e,labelDataIndex:n,defaultText:u.getName(n)||"",inheritColor:X(r.fill)?An(r.fill,1):"#000"}),Vl(t,i),Rl(t,null,null,i.get(["emphasis","disabled"])),Hs(t).dataModel=e})),oB(l).data=u,l.group.silent=e.get("silent")||t.get("silent")},e.type="markArea",e}(ZV);var dB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.layoutMode={type:"box",ignoreSize:!0},n}return n(e,t),e.prototype.init=function(t,e,n){this.mergeDefaultAndTheme(t,n),t.selected=t.selected||{},this._updateSelector(t)},e.prototype.mergeOption=function(e,n){t.prototype.mergeOption.call(this,e,n),this._updateSelector(e)},e.prototype._updateSelector=function(t){var e=t.selector,n=this.ecModel;!0===e&&(e=t.selector=["all","inverse"]),Y(e)&&E(e,(function(t,i){X(t)&&(t={type:t}),e[i]=C(t,function(t,e){return"all"===e?{type:"all",title:t.getLocaleModel().get(["legend","selector","all"])}:"inverse"===e?{type:"inverse",title:t.getLocaleModel().get(["legend","selector","inverse"])}:void 0}(n,t.type))}))},e.prototype.optionUpdated=function(){this._updateData(this.ecModel);var t=this._data;if(t[0]&&"single"===this.get("selectedMode")){for(var e=!1,n=0;n<t.length;n++){var i=t[n].get("name");if(this.isSelected(i)){this.select(i),e=!0;break}}!e&&this.select(t[0].get("name"))}},e.prototype._updateData=function(t){var e=[],n=[];t.eachRawSeries((function(i){var r,o=i.name;if(n.push(o),i.legendVisualProvider){var a=i.legendVisualProvider.getAllNames();t.isSeriesFiltered(i)||(n=n.concat(a)),a.length?e=e.concat(a):r=!0}else r=!0;r&&_o(i)&&e.push(i.name)})),this._availableNames=n;var i=z(this.get("data")||e,(function(t){return(X(t)||j(t))&&(t={name:t}),new dc(t,this,this.ecModel)}),this);this._data=i},e.prototype.getData=function(){return this._data},e.prototype.select=function(t){var e=this.option.selected;"single"===this.get("selectedMode")&&E(this._data,(function(t){e[t.get("name")]=!1}));e[t]=!0},e.prototype.unSelect=function(t){"single"!==this.get("selectedMode")&&(this.option.selected[t]=!1)},e.prototype.toggleSelected=function(t){var e=this.option.selected;e.hasOwnProperty(t)||(e[t]=!0),this[e[t]?"unSelect":"select"](t)},e.prototype.allSelect=function(){var t=this._data,e=this.option.selected;E(t,(function(t){e[t.get("name",!0)]=!0}))},e.prototype.inverseSelect=function(){var t=this._data,e=this.option.selected;E(t,(function(t){var n=t.get("name",!0);e.hasOwnProperty(n)||(e[n]=!0),e[n]=!e[n]}))},e.prototype.isSelected=function(t){var e=this.option.selected;return!(e.hasOwnProperty(t)&&!e[t])&&P(this._availableNames,t)>=0},e.prototype.getOrient=function(){return"vertical"===this.get("orient")?{index:1,name:"vertical"}:{index:0,name:"horizontal"}},e.type="legend.plain",e.dependencies=["series"],e.defaultOption={z:4,show:!0,orient:"horizontal",left:"center",top:0,align:"auto",backgroundColor:"rgba(0,0,0,0)",borderColor:"#ccc",borderRadius:0,borderWidth:0,padding:5,itemGap:10,itemWidth:25,itemHeight:14,symbolRotate:"inherit",symbolKeepAspect:!0,inactiveColor:"#ccc",inactiveBorderColor:"#ccc",inactiveBorderWidth:"auto",itemStyle:{color:"inherit",opacity:"inherit",borderColor:"inherit",borderWidth:"auto",borderCap:"inherit",borderJoin:"inherit",borderDashOffset:"inherit",borderMiterLimit:"inherit"},lineStyle:{width:"auto",color:"inherit",inactiveColor:"#ccc",inactiveWidth:2,opacity:"inherit",type:"inherit",cap:"inherit",join:"inherit",dashOffset:"inherit",miterLimit:"inherit"},textStyle:{color:"#333"},selectedMode:!0,selector:!1,selectorLabel:{show:!0,borderRadius:10,padding:[3,5,3,5],fontSize:12,fontFamily:"sans-serif",color:"#666",borderWidth:1,borderColor:"#666"},emphasis:{selectorLabel:{show:!0,color:"#eee",backgroundColor:"#666"}},selectorPosition:"auto",selectorItemGap:7,selectorButtonGap:10,tooltip:{show:!1}},e}(Tp),fB=H,gB=E,yB=Cr,vB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.newlineDisabled=!1,n}return n(e,t),e.prototype.init=function(){this.group.add(this._contentGroup=new yB),this.group.add(this._selectorGroup=new yB),this._isFirstRender=!0},e.prototype.getContentGroup=function(){return this._contentGroup},e.prototype.getSelectorGroup=function(){return this._selectorGroup},e.prototype.render=function(t,e,n){var i=this._isFirstRender;if(this._isFirstRender=!1,this.resetInner(),t.get("show",!0)){var r=t.get("align"),o=t.get("orient");r&&"auto"!==r||(r="right"===t.get("left")&&"vertical"===o?"right":"left");var a=t.get("selector",!0),s=t.get("selectorPosition",!0);!a||s&&"auto"!==s||(s="horizontal"===o?"end":"start"),this.renderInner(r,t,e,n,a,o,s);var l=t.getBoxLayoutParams(),u={width:n.getWidth(),height:n.getHeight()},h=t.get("padding"),c=xp(l,u,h),p=this.layoutInner(t,r,c,i,a,s),d=xp(k({width:p.width,height:p.height},l),u,h);this.group.x=d.x-p.x,this.group.y=d.y-p.y,this.group.markRedraw(),this.group.add(this._backgroundEl=XE(p,t))}},e.prototype.resetInner=function(){this.getContentGroup().removeAll(),this._backgroundEl&&this.group.remove(this._backgroundEl),this.getSelectorGroup().removeAll()},e.prototype.renderInner=function(t,e,n,i,r,o,a){var s=this.getContentGroup(),l=ft(),u=e.get("selectedMode"),h=[];n.eachRawSeries((function(t){!t.get("legendHoverLink")&&h.push(t.id)})),gB(e.getData(),(function(r,o){var a=r.get("name");if(!this.newlineDisabled&&(""===a||"\n"===a)){var c=new yB;return c.newline=!0,void s.add(c)}var p=n.getSeriesByName(a)[0];if(!l.get(a)){if(p){var d=p.getData(),f=d.getVisual("legendLineStyle")||{},g=d.getVisual("legendIcon"),y=d.getVisual("style");this._createItem(p,a,o,r,e,t,f,y,g,u,i).on("click",fB(mB,a,null,i,h)).on("mouseover",fB(_B,p.name,null,i,h)).on("mouseout",fB(bB,p.name,null,i,h)),l.set(a,!0)}else n.eachRawSeries((function(n){if(!l.get(a)&&n.legendVisualProvider){var s=n.legendVisualProvider;if(!s.containName(a))return;var c=s.indexOfName(a),p=s.getItemVisual(c,"style"),d=s.getItemVisual(c,"legendIcon"),f=bn(p.fill);f&&0===f[3]&&(f[3]=.2,p=A(A({},p),{fill:kn(f,"rgba")})),this._createItem(n,a,o,r,e,t,{},p,d,u,i).on("click",fB(mB,null,a,i,h)).on("mouseover",fB(_B,null,a,i,h)).on("mouseout",fB(bB,null,a,i,h)),l.set(a,!0)}}),this);0}}),this),r&&this._createSelector(r,e,i,o,a)},e.prototype._createSelector=function(t,e,n,i,r){var o=this.getSelectorGroup();gB(t,(function(t){var i=t.type,r=new ks({style:{x:0,y:0,align:"center",verticalAlign:"middle"},onclick:function(){n.dispatchAction({type:"all"===i?"legendAllSelect":"legendInverseSelect"})}});o.add(r),Hh(r,{normal:e.getModel("selectorLabel"),emphasis:e.getModel(["emphasis","selectorLabel"])},{defaultText:t.title}),Ol(r)}))},e.prototype._createItem=function(t,e,n,i,r,o,a,s,l,u,h){var c=t.visualDrawType,p=r.get("itemWidth"),d=r.get("itemHeight"),f=r.isSelected(e),g=i.get("symbolRotate"),y=i.get("symbolKeepAspect"),v=i.get("icon"),m=function(t,e,n,i,r,o,a){function s(t,e){"auto"===t.lineWidth&&(t.lineWidth=e.lineWidth>0?2:0),gB(t,(function(n,i){"inherit"===t[i]&&(t[i]=e[i])}))}var l=e.getModel("itemStyle"),u=l.getItemStyle(),h=0===t.lastIndexOf("empty",0)?"fill":"stroke",c=l.getShallow("decal");u.decal=c&&"inherit"!==c?rv(c,a):i.decal,"inherit"===u.fill&&(u.fill=i[r]);"inherit"===u.stroke&&(u.stroke=i[h]);"inherit"===u.opacity&&(u.opacity=("fill"===r?i:n).opacity);s(u,i);var p=e.getModel("lineStyle"),d=p.getLineStyle();if(s(d,n),"auto"===u.fill&&(u.fill=i.fill),"auto"===u.stroke&&(u.stroke=i.fill),"auto"===d.stroke&&(d.stroke=i.fill),!o){var f=e.get("inactiveBorderWidth"),g=u[h];u.lineWidth="auto"===f?i.lineWidth>0&&g?2:0:u.lineWidth,u.fill=e.get("inactiveColor"),u.stroke=e.get("inactiveBorderColor"),d.stroke=p.get("inactiveColor"),d.lineWidth=p.get("inactiveWidth")}return{itemStyle:u,lineStyle:d}}(l=v||l||"roundRect",i,a,s,c,f,h),x=new yB,_=i.getModel("textStyle");if(!U(t.getLegendIcon)||v&&"inherit"!==v){var b="inherit"===v&&t.getData().getVisual("symbol")?"inherit"===g?t.getData().getVisual("symbolRotate"):g:0;x.add(function(t){var e=t.icon||"roundRect",n=Ly(e,0,0,t.itemWidth,t.itemHeight,t.itemStyle.fill,t.symbolKeepAspect);n.setStyle(t.itemStyle),n.rotation=(t.iconRotate||0)*Math.PI/180,n.setOrigin([t.itemWidth/2,t.itemHeight/2]),e.indexOf("empty")>-1&&(n.style.stroke=n.style.fill,n.style.fill="#fff",n.style.lineWidth=2);return n}({itemWidth:p,itemHeight:d,icon:l,iconRotate:b,itemStyle:m.itemStyle,lineStyle:m.lineStyle,symbolKeepAspect:y}))}else x.add(t.getLegendIcon({itemWidth:p,itemHeight:d,icon:l,iconRotate:g,itemStyle:m.itemStyle,lineStyle:m.lineStyle,symbolKeepAspect:y}));var w="left"===o?p+5:-5,S=o,M=r.get("formatter"),I=e;X(M)&&M?I=M.replace("{name}",null!=e?e:""):U(M)&&(I=M(e));var T=i.get("inactiveColor");x.add(new ks({style:Uh(_,{text:I,x:w,y:d/2,fill:f?_.getTextColor():T,align:S,verticalAlign:"middle"})}));var C=new Cs({shape:x.getBoundingRect(),invisible:!0}),D=i.getModel("tooltip");return D.get("show")&&Eh({el:C,componentModel:r,itemName:e,itemTooltipOption:D.option}),x.add(C),x.eachChild((function(t){t.silent=!0})),C.silent=!u,this.getContentGroup().add(x),Ol(x),x.__legendDataIndex=n,x},e.prototype.layoutInner=function(t,e,n,i,r,o){var a=this.getContentGroup(),s=this.getSelectorGroup();mp(t.get("orient"),a,t.get("itemGap"),n.width,n.height);var l=a.getBoundingRect(),u=[-l.x,-l.y];if(s.markRedraw(),a.markRedraw(),r){mp("horizontal",s,t.get("selectorItemGap",!0));var h=s.getBoundingRect(),c=[-h.x,-h.y],p=t.get("selectorButtonGap",!0),d=t.getOrient().index,f=0===d?"width":"height",g=0===d?"height":"width",y=0===d?"y":"x";"end"===o?c[d]+=l[f]+p:u[d]+=h[f]+p,c[1-d]+=l[g]/2-h[g]/2,s.x=c[0],s.y=c[1],a.x=u[0],a.y=u[1];var v={x:0,y:0};return v[f]=l[f]+p+h[f],v[g]=Math.max(l[g],h[g]),v[y]=Math.min(0,h[y]+c[1-d]),v}return a.x=u[0],a.y=u[1],this.group.getBoundingRect()},e.prototype.remove=function(){this.getContentGroup().removeAll(),this._isFirstRender=!0},e.type="legend.plain",e}(gg);function mB(t,e,n,i){bB(t,e,n,i),n.dispatchAction({type:"legendToggleSelect",name:null!=t?t:e}),_B(t,e,n,i)}function xB(t){for(var e,n=t.getZr().storage.getDisplayList(),i=0,r=n.length;i<r&&!(e=n[i].states.emphasis);)i++;return e&&e.hoverLayer}function _B(t,e,n,i){xB(n)||n.dispatchAction({type:"highlight",seriesName:t,name:e,excludeSeriesId:i})}function bB(t,e,n,i){xB(n)||n.dispatchAction({type:"downplay",seriesName:t,name:e,excludeSeriesId:i})}function wB(t){var e=t.findComponents({mainType:"legend"});e&&e.length&&t.filterSeries((function(t){for(var n=0;n<e.length;n++)if(!e[n].isSelected(t.name))return!1;return!0}))}function SB(t,e,n){var i,r={},o="toggleSelected"===t;return n.eachComponent("legend",(function(n){o&&null!=i?n[i?"select":"unSelect"](e.name):"allSelect"===t||"inverseSelect"===t?n[t]():(n[t](e.name),i=n.isSelected(e.name)),E(n.getData(),(function(t){var e=t.get("name");if("\n"!==e&&""!==e){var i=n.isSelected(e);r.hasOwnProperty(e)?r[e]=r[e]&&i:r[e]=i}}))})),"allSelect"===t||"inverseSelect"===t?{selected:r}:{name:e.name,selected:r}}function MB(t){t.registerComponentModel(dB),t.registerComponentView(vB),t.registerProcessor(t.PRIORITY.PROCESSOR.SERIES_FILTER,wB),t.registerSubTypeDefaulter("legend",(function(){return"plain"})),function(t){t.registerAction("legendToggleSelect","legendselectchanged",H(SB,"toggleSelected")),t.registerAction("legendAllSelect","legendselectall",H(SB,"allSelect")),t.registerAction("legendInverseSelect","legendinverseselect",H(SB,"inverseSelect")),t.registerAction("legendSelect","legendselected",H(SB,"select")),t.registerAction("legendUnSelect","legendunselected",H(SB,"unSelect"))}(t)}var IB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.setScrollDataIndex=function(t){this.option.scrollDataIndex=t},e.prototype.init=function(e,n,i){var r=Sp(e);t.prototype.init.call(this,e,n,i),TB(this,e,r)},e.prototype.mergeOption=function(e,n){t.prototype.mergeOption.call(this,e,n),TB(this,this.option,e)},e.type="legend.scroll",e.defaultOption=yc(dB.defaultOption,{scrollDataIndex:0,pageButtonItemGap:5,pageButtonGap:null,pageButtonPosition:"end",pageFormatter:"{current}/{total}",pageIcons:{horizontal:["M0,0L12,-10L12,10z","M0,0L-12,-10L-12,10z"],vertical:["M0,0L20,0L10,-20z","M0,0L20,0L10,20z"]},pageIconColor:"#2f4554",pageIconInactiveColor:"#aaa",pageIconSize:15,pageTextStyle:{color:"#333"},animationDurationUpdate:800}),e}(dB);function TB(t,e,n){var i=[1,1];i[t.getOrient().index]=0,wp(e,n,{type:"box",ignoreSize:!!i})}var CB=Cr,DB=["width","height"],AB=["x","y"],kB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.newlineDisabled=!0,n._currentIndex=0,n}return n(e,t),e.prototype.init=function(){t.prototype.init.call(this),this.group.add(this._containerGroup=new CB),this._containerGroup.add(this.getContentGroup()),this.group.add(this._controllerGroup=new CB)},e.prototype.resetInner=function(){t.prototype.resetInner.call(this),this._controllerGroup.removeAll(),this._containerGroup.removeClipPath(),this._containerGroup.__rectSize=null},e.prototype.renderInner=function(e,n,i,r,o,a,s){var l=this;t.prototype.renderInner.call(this,e,n,i,r,o,a,s);var u=this._controllerGroup,h=n.get("pageIconSize",!0),c=Y(h)?h:[h,h];d("pagePrev",0);var p=n.getModel("pageTextStyle");function d(t,e){var i=t+"DataIndex",o=Ph(n.get("pageIcons",!0)[n.getOrient().name][e],{onclick:W(l._pageGo,l,i,n,r)},{x:-c[0]/2,y:-c[1]/2,width:c[0],height:c[1]});o.name=t,u.add(o)}u.add(new ks({name:"pageText",style:{text:"xx/xx",fill:p.getTextColor(),font:p.getFont(),verticalAlign:"middle",align:"center"},silent:!0})),d("pageNext",1)},e.prototype.layoutInner=function(t,e,n,i,r,o){var a=this.getSelectorGroup(),s=t.getOrient().index,l=DB[s],u=AB[s],h=DB[1-s],c=AB[1-s];r&&mp("horizontal",a,t.get("selectorItemGap",!0));var p=t.get("selectorButtonGap",!0),d=a.getBoundingRect(),f=[-d.x,-d.y],g=T(n);r&&(g[l]=n[l]-d[l]-p);var y=this._layoutContentAndController(t,i,g,s,l,h,c,u);if(r){if("end"===o)f[s]+=y[l]+p;else{var v=d[l]+p;f[s]-=v,y[u]-=v}y[l]+=d[l]+p,f[1-s]+=y[c]+y[h]/2-d[h]/2,y[h]=Math.max(y[h],d[h]),y[c]=Math.min(y[c],d[c]+f[1-s]),a.x=f[0],a.y=f[1],a.markRedraw()}return y},e.prototype._layoutContentAndController=function(t,e,n,i,r,o,a,s){var l=this.getContentGroup(),u=this._containerGroup,h=this._controllerGroup;mp(t.get("orient"),l,t.get("itemGap"),i?n.width:null,i?null:n.height),mp("horizontal",h,t.get("pageButtonItemGap",!0));var c=l.getBoundingRect(),p=h.getBoundingRect(),d=this._showController=c[r]>n[r],f=[-c.x,-c.y];e||(f[i]=l[s]);var g=[0,0],y=[-p.x,-p.y],v=rt(t.get("pageButtonGap",!0),t.get("itemGap",!0));d&&("end"===t.get("pageButtonPosition",!0)?y[i]+=n[r]-p[r]:g[i]+=p[r]+v);y[1-i]+=c[o]/2-p[o]/2,l.setPosition(f),u.setPosition(g),h.setPosition(y);var m={x:0,y:0};if(m[r]=d?n[r]:c[r],m[o]=Math.max(c[o],p[o]),m[a]=Math.min(0,p[a]+y[1-i]),u.__rectSize=n[r],d){var x={x:0,y:0};x[r]=Math.max(n[r]-p[r]-v,0),x[o]=m[o],u.setClipPath(new Cs({shape:x})),u.__rectSize=x[r]}else h.eachChild((function(t){t.attr({invisible:!0,silent:!0})}));var _=this._getPageInfo(t);return null!=_.pageIndex&&rh(l,{x:_.contentPosition[0],y:_.contentPosition[1]},d?t:null),this._updatePageInfoView(t,_),m},e.prototype._pageGo=function(t,e,n){var i=this._getPageInfo(e)[t];null!=i&&n.dispatchAction({type:"legendScroll",scrollDataIndex:i,legendId:e.id})},e.prototype._updatePageInfoView=function(t,e){var n=this._controllerGroup;E(["pagePrev","pageNext"],(function(i){var r=null!=e[i+"DataIndex"],o=n.childOfName(i);o&&(o.setStyle("fill",r?t.get("pageIconColor",!0):t.get("pageIconInactiveColor",!0)),o.cursor=r?"pointer":"default")}));var i=n.childOfName("pageText"),r=t.get("pageFormatter"),o=e.pageIndex,a=null!=o?o+1:0,s=e.pageCount;i&&r&&i.setStyle("text",X(r)?r.replace("{current}",null==a?"":a+"").replace("{total}",null==s?"":s+""):r({current:a,total:s}))},e.prototype._getPageInfo=function(t){var e=t.get("scrollDataIndex",!0),n=this.getContentGroup(),i=this._containerGroup.__rectSize,r=t.getOrient().index,o=DB[r],a=AB[r],s=this._findTargetItemIndex(e),l=n.children(),u=l[s],h=l.length,c=h?1:0,p={contentPosition:[n.x,n.y],pageCount:c,pageIndex:c-1,pagePrevDataIndex:null,pageNextDataIndex:null};if(!u)return p;var d=m(u);p.contentPosition[r]=-d.s;for(var f=s+1,g=d,y=d,v=null;f<=h;++f)(!(v=m(l[f]))&&y.e>g.s+i||v&&!x(v,g.s))&&(g=y.i>g.i?y:v)&&(null==p.pageNextDataIndex&&(p.pageNextDataIndex=g.i),++p.pageCount),y=v;for(f=s-1,g=d,y=d,v=null;f>=-1;--f)(v=m(l[f]))&&x(y,v.s)||!(g.i<y.i)||(y=g,null==p.pagePrevDataIndex&&(p.pagePrevDataIndex=g.i),++p.pageCount,++p.pageIndex),g=v;return p;function m(t){if(t){var e=t.getBoundingRect(),n=e[a]+t[a];return{s:n,e:n+e[o],i:t.__legendDataIndex}}}function x(t,e){return t.e>=e&&t.s<=e+i}},e.prototype._findTargetItemIndex=function(t){return this._showController?(this.getContentGroup().eachChild((function(i,r){var o=i.__legendDataIndex;null==n&&null!=o&&(n=r),o===t&&(e=r)})),null!=e?e:n):0;var e,n},e.type="legend.scroll",e}(vB);function LB(t){wm(MB),t.registerComponentModel(IB),t.registerComponentView(kB),function(t){t.registerAction("legendScroll","legendscroll",(function(t,e){var n=t.scrollDataIndex;null!=n&&e.eachComponent({mainType:"legend",subType:"scroll",query:t},(function(t){t.setScrollDataIndex(n)}))}))}(t)}var PB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="dataZoom.inside",e.defaultOption=yc(AE.defaultOption,{disabled:!1,zoomLock:!1,zoomOnMouseWheel:!0,moveOnMouseMove:!0,moveOnMouseWheel:!1,preventDefaultMouseMove:!0}),e}(AE),OB=So();function RB(t,e,n){OB(t).coordSysRecordMap.each((function(t){var i=t.dataZoomInfoMap.get(e.uid);i&&(i.getRange=n)}))}function NB(t,e){if(e){t.removeKey(e.model.uid);var n=e.controller;n&&n.dispose()}}function EB(t,e){t.isDisposed()||t.dispatchAction({type:"dataZoom",animation:{easing:"cubicOut",duration:100},batch:e})}function zB(t,e,n,i){return t.coordinateSystem.containPoint([n,i])}function VB(t){t.registerProcessor(t.PRIORITY.PROCESSOR.FILTER,(function(t,e){var n=OB(e),i=n.coordSysRecordMap||(n.coordSysRecordMap=ft());i.each((function(t){t.dataZoomInfoMap=null})),t.eachComponent({mainType:"dataZoom",subType:"inside"},(function(t){E(CE(t).infoList,(function(n){var r=n.model.uid,o=i.get(r)||i.set(r,function(t,e){var n={model:e,containsPoint:H(zB,e),dispatchAction:H(EB,t),dataZoomInfoMap:null,controller:null},i=n.controller=new kI(t.getZr());return E(["pan","zoom","scrollMove"],(function(t){i.on(t,(function(e){var i=[];n.dataZoomInfoMap.each((function(r){if(e.isAvailableBehavior(r.model.option)){var o=(r.getRange||{})[t],a=o&&o(r.dzReferCoordSysInfo,n.model.mainType,n.controller,e);!r.model.get("disabled",!0)&&a&&i.push({dataZoomId:r.model.id,start:a[0],end:a[1]})}})),i.length&&n.dispatchAction(i)}))})),n}(e,n.model));(o.dataZoomInfoMap||(o.dataZoomInfoMap=ft())).set(t.uid,{dzReferCoordSysInfo:n,model:t,getRange:null})}))})),i.each((function(t){var e,n=t.controller,r=t.dataZoomInfoMap;if(r){var o=r.keys()[0];null!=o&&(e=r.get(o))}if(e){var a=function(t){var e,n="type_",i={type_true:2,type_move:1,type_false:0,type_undefined:-1},r=!0;return t.each((function(t){var o=t.model,a=!o.get("disabled",!0)&&(!o.get("zoomLock",!0)||"move");i[n+a]>i[n+e]&&(e=a),r=r&&o.get("preventDefaultMouseMove",!0)})),{controlType:e,opt:{zoomOnMouseWheel:!0,moveOnMouseMove:!0,moveOnMouseWheel:!0,preventDefaultMouseMove:!!r}}}(r);n.enable(a.controlType,a.opt),n.setPointerChecker(t.containsPoint),Ag(t,"dispatchAction",e.model.get("throttle",!0),"fixRate")}else NB(i,t)}))}))}var BB=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="dataZoom.inside",e}return n(e,t),e.prototype.render=function(e,n,i){t.prototype.render.apply(this,arguments),e.noTarget()?this._clear():(this.range=e.getPercentRange(),RB(i,e,{pan:W(FB.pan,this),zoom:W(FB.zoom,this),scrollMove:W(FB.scrollMove,this)}))},e.prototype.dispose=function(){this._clear(),t.prototype.dispose.apply(this,arguments)},e.prototype._clear=function(){!function(t,e){for(var n=OB(t).coordSysRecordMap,i=n.keys(),r=0;r<i.length;r++){var o=i[r],a=n.get(o),s=a.dataZoomInfoMap;if(s){var l=e.uid;s.get(l)&&(s.removeKey(l),s.keys().length||NB(n,a))}}}(this.api,this.dataZoomModel),this.range=null},e.type="dataZoom.inside",e}(PE),FB={zoom:function(t,e,n,i){var r=this.range,o=r.slice(),a=t.axisModels[0];if(a){var s=WB[e](null,[i.originX,i.originY],a,n,t),l=(s.signal>0?s.pixelStart+s.pixelLength-s.pixel:s.pixel-s.pixelStart)/s.pixelLength*(o[1]-o[0])+o[0],u=Math.max(1/i.scale,0);o[0]=(o[0]-l)*u+l,o[1]=(o[1]-l)*u+l;var h=this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();return lk(0,o,[0,100],0,h.minSpan,h.maxSpan),this.range=o,r[0]!==o[0]||r[1]!==o[1]?o:void 0}},pan:GB((function(t,e,n,i,r,o){var a=WB[i]([o.oldX,o.oldY],[o.newX,o.newY],e,r,n);return a.signal*(t[1]-t[0])*a.pixel/a.pixelLength})),scrollMove:GB((function(t,e,n,i,r,o){return WB[i]([0,0],[o.scrollDelta,o.scrollDelta],e,r,n).signal*(t[1]-t[0])*o.scrollDelta}))};function GB(t){return function(e,n,i,r){var o=this.range,a=o.slice(),s=e.axisModels[0];if(s)return lk(t(a,s,e,n,i,r),a,[0,100],"all"),this.range=a,o[0]!==a[0]||o[1]!==a[1]?a:void 0}}var WB={grid:function(t,e,n,i,r){var o=n.axis,a={},s=r.model.coordinateSystem.getRect();return t=t||[0,0],"x"===o.dim?(a.pixel=e[0]-t[0],a.pixelLength=s.width,a.pixelStart=s.x,a.signal=o.inverse?1:-1):(a.pixel=e[1]-t[1],a.pixelLength=s.height,a.pixelStart=s.y,a.signal=o.inverse?-1:1),a},polar:function(t,e,n,i,r){var o=n.axis,a={},s=r.model.coordinateSystem,l=s.getRadiusAxis().getExtent(),u=s.getAngleAxis().getExtent();return t=t?s.pointToCoord(t):[0,0],e=s.pointToCoord(e),"radiusAxis"===n.mainType?(a.pixel=e[0]-t[0],a.pixelLength=l[1]-l[0],a.pixelStart=l[0],a.signal=o.inverse?1:-1):(a.pixel=e[1]-t[1],a.pixelLength=u[1]-u[0],a.pixelStart=u[0],a.signal=o.inverse?-1:1),a},singleAxis:function(t,e,n,i,r){var o=n.axis,a=r.model.coordinateSystem.getRect(),s={};return t=t||[0,0],"horizontal"===o.orient?(s.pixel=e[0]-t[0],s.pixelLength=a.width,s.pixelStart=a.x,s.signal=o.inverse?1:-1):(s.pixel=e[1]-t[1],s.pixelLength=a.height,s.pixelStart=a.y,s.signal=o.inverse?-1:1),s}};function HB(t){BE(t),t.registerComponentModel(PB),t.registerComponentView(BB),VB(t)}var YB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.type="dataZoom.slider",e.layoutMode="box",e.defaultOption=yc(AE.defaultOption,{show:!0,right:"ph",top:"ph",width:"ph",height:"ph",left:null,bottom:null,borderColor:"#d2dbee",borderRadius:3,backgroundColor:"rgba(47,69,84,0)",dataBackground:{lineStyle:{color:"#d2dbee",width:.5},areaStyle:{color:"#d2dbee",opacity:.2}},selectedDataBackground:{lineStyle:{color:"#8fb0f7",width:.5},areaStyle:{color:"#8fb0f7",opacity:.2}},fillerColor:"rgba(135,175,274,0.2)",handleIcon:"path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z",handleSize:"100%",handleStyle:{color:"#fff",borderColor:"#ACB8D1"},moveHandleSize:7,moveHandleIcon:"path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z",moveHandleStyle:{color:"#D2DBEE",opacity:.7},showDetail:!0,showDataShadow:"auto",realtime:!0,zoomLock:!1,textStyle:{color:"#6E7079"},brushSelect:!0,brushStyle:{color:"rgba(135,175,274,0.15)"},emphasis:{handleStyle:{borderColor:"#8FB0F7"},moveHandleStyle:{color:"#8FB0F7"}}}),e}(AE),UB=Cs,XB="horizontal",ZB="vertical",jB=["line","bar","candlestick","scatter"],qB={easing:"cubicOut",duration:100,delay:0},KB=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._displayables={},n}return n(e,t),e.prototype.init=function(t,e){this.api=e,this._onBrush=W(this._onBrush,this),this._onBrushEnd=W(this._onBrushEnd,this)},e.prototype.render=function(e,n,i,r){if(t.prototype.render.apply(this,arguments),Ag(this,"_dispatchZoomAction",e.get("throttle"),"fixRate"),this._orient=e.getOrient(),!1!==e.get("show")){if(e.noTarget())return this._clear(),void this.group.removeAll();r&&"dataZoom"===r.type&&r.from===this.uid||this._buildView(),this._updateView()}else this.group.removeAll()},e.prototype.dispose=function(){this._clear(),t.prototype.dispose.apply(this,arguments)},e.prototype._clear=function(){kg(this,"_dispatchZoomAction");var t=this.api.getZr();t.off("mousemove",this._onBrush),t.off("mouseup",this._onBrushEnd)},e.prototype._buildView=function(){var t=this.group;t.removeAll(),this._brushing=!1,this._displayables.brushRect=null,this._resetLocation(),this._resetInterval();var e=this._displayables.sliderGroup=new Cr;this._renderBackground(),this._renderHandle(),this._renderDataShadow(),t.add(e),this._positionGroup()},e.prototype._resetLocation=function(){var t=this.dataZoomModel,e=this.api,n=t.get("brushSelect")?7:0,i=this._findCoordRect(),r={width:e.getWidth(),height:e.getHeight()},o=this._orient===XB?{right:r.width-i.x-i.width,top:r.height-30-7-n,width:i.width,height:30}:{right:7,top:i.y,width:30,height:i.height},a=Sp(t.option);E(["right","top","width","height"],(function(t){"ph"===a[t]&&(a[t]=o[t])}));var s=xp(a,r);this._location={x:s.x,y:s.y},this._size=[s.width,s.height],this._orient===ZB&&this._size.reverse()},e.prototype._positionGroup=function(){var t=this.group,e=this._location,n=this._orient,i=this.dataZoomModel.getFirstTargetAxisModel(),r=i&&i.get("inverse"),o=this._displayables.sliderGroup,a=(this._dataShadowInfo||{}).otherAxisInverse;o.attr(n!==XB||r?n===XB&&r?{scaleY:a?1:-1,scaleX:-1}:n!==ZB||r?{scaleY:a?-1:1,scaleX:-1,rotation:Math.PI/2}:{scaleY:a?-1:1,scaleX:1,rotation:Math.PI/2}:{scaleY:a?1:-1,scaleX:1});var s=t.getBoundingRect([o]);t.x=e.x-s.x,t.y=e.y-s.y,t.markRedraw()},e.prototype._getViewExtent=function(){return[0,this._size[0]]},e.prototype._renderBackground=function(){var t=this.dataZoomModel,e=this._size,n=this._displayables.sliderGroup,i=t.get("brushSelect");n.add(new UB({silent:!0,shape:{x:0,y:0,width:e[0],height:e[1]},style:{fill:t.get("backgroundColor")},z2:-40}));var r=new UB({shape:{x:0,y:0,width:e[0],height:e[1]},style:{fill:"transparent"},z2:0,onclick:W(this._onClickPanel,this)}),o=this.api.getZr();i?(r.on("mousedown",this._onBrushStart,this),r.cursor="crosshair",o.on("mousemove",this._onBrush),o.on("mouseup",this._onBrushEnd)):(o.off("mousemove",this._onBrush),o.off("mouseup",this._onBrushEnd)),n.add(r)},e.prototype._renderDataShadow=function(){var t=this._dataShadowInfo=this._prepareDataShadowInfo();if(this._displayables.dataShadowSegs=[],t){var e=this._size,n=this._shadowSize||[],i=t.series,r=i.getRawData(),o=i.getShadowDim?i.getShadowDim():t.otherDim;if(null!=o){var a=this._shadowPolygonPts,s=this._shadowPolylinePts;if(r!==this._shadowData||o!==this._shadowDim||e[0]!==n[0]||e[1]!==n[1]){var l=r.getDataExtent(o),u=.3*(l[1]-l[0]);l=[l[0]-u,l[1]+u];var h,c=[0,e[1]],p=[0,e[0]],d=[[e[0],0],[0,0]],f=[],g=p[1]/(r.count()-1),y=0,v=Math.round(r.count()/e[0]);r.each([o],(function(t,e){if(v>0&&e%v)y+=g;else{var n=null==t||isNaN(t)||""===t,i=n?0:Nr(t,l,c,!0);n&&!h&&e?(d.push([d[d.length-1][0],0]),f.push([f[f.length-1][0],0])):!n&&h&&(d.push([y,0]),f.push([y,0])),d.push([y,i]),f.push([y,i]),y+=g,h=n}})),a=this._shadowPolygonPts=d,s=this._shadowPolylinePts=f}this._shadowData=r,this._shadowDim=o,this._shadowSize=[e[0],e[1]];for(var m=this.dataZoomModel,x=0;x<3;x++){var _=b(1===x);this._displayables.sliderGroup.add(_),this._displayables.dataShadowSegs.push(_)}}}function b(t){var e=m.getModel(t?"selectedDataBackground":"dataBackground"),n=new Cr,i=new Pu({shape:{points:a},segmentIgnoreThreshold:1,style:e.getModel("areaStyle").getAreaStyle(),silent:!0,z2:-20}),r=new Ru({shape:{points:s},segmentIgnoreThreshold:1,style:e.getModel("lineStyle").getLineStyle(),silent:!0,z2:-19});return n.add(i),n.add(r),n}},e.prototype._prepareDataShadowInfo=function(){var t=this.dataZoomModel,e=t.get("showDataShadow");if(!1!==e){var n,i=this.ecModel;return t.eachTargetAxis((function(r,o){E(t.getAxisProxy(r,o).getTargetSeriesModels(),(function(t){if(!(n||!0!==e&&P(jB,t.get("type"))<0)){var a,s=i.getComponent(IE(r),o).axis,l={x:"y",y:"x",radius:"angle",angle:"radius"}[r],u=t.coordinateSystem;null!=l&&u.getOtherAxis&&(a=u.getOtherAxis(s).inverse),l=t.getData().mapDimension(l),n={thisAxis:s,series:t,thisDim:r,otherDim:l,otherAxisInverse:a}}}),this)}),this),n}},e.prototype._renderHandle=function(){var t=this.group,e=this._displayables,n=e.handles=[null,null],i=e.handleLabels=[null,null],r=this._displayables.sliderGroup,o=this._size,a=this.dataZoomModel,s=this.api,l=a.get("borderRadius")||0,u=a.get("brushSelect"),h=e.filler=new UB({silent:u,style:{fill:a.get("fillerColor")},textConfig:{position:"inside"}});r.add(h),r.add(new UB({silent:!0,subPixelOptimize:!0,shape:{x:0,y:0,width:o[0],height:o[1],r:l},style:{stroke:a.get("dataBackgroundColor")||a.get("borderColor"),lineWidth:1,fill:"rgba(0,0,0,0)"}})),E([0,1],(function(e){var o=a.get("handleIcon");!Dy[o]&&o.indexOf("path://")<0&&o.indexOf("image://")<0&&(o="path://"+o);var s=Ly(o,-1,0,2,2,null,!0);s.attr({cursor:$B(this._orient),draggable:!0,drift:W(this._onDragMove,this,e),ondragend:W(this._onDragEnd,this),onmouseover:W(this._showDataInfo,this,!0),onmouseout:W(this._showDataInfo,this,!1),z2:5});var l=s.getBoundingRect(),u=a.get("handleSize");this._handleHeight=Er(u,this._size[1]),this._handleWidth=l.width/l.height*this._handleHeight,s.setStyle(a.getModel("handleStyle").getItemStyle()),s.style.strokeNoScale=!0,s.rectHover=!0,s.ensureState("emphasis").style=a.getModel(["emphasis","handleStyle"]).getItemStyle(),Ol(s);var h=a.get("handleColor");null!=h&&(s.style.fill=h),r.add(n[e]=s);var c=a.getModel("textStyle");t.add(i[e]=new ks({silent:!0,invisible:!0,style:Uh(c,{x:0,y:0,text:"",verticalAlign:"middle",align:"center",fill:c.getTextColor(),font:c.getFont()}),z2:10}))}),this);var c=h;if(u){var p=Er(a.get("moveHandleSize"),o[1]),d=e.moveHandle=new Cs({style:a.getModel("moveHandleStyle").getItemStyle(),silent:!0,shape:{r:[0,0,2,2],y:o[1]-.5,height:p}}),f=.8*p,g=e.moveHandleIcon=Ly(a.get("moveHandleIcon"),-f/2,-f/2,f,f,"#fff",!0);g.silent=!0,g.y=o[1]+p/2-.5,d.ensureState("emphasis").style=a.getModel(["emphasis","moveHandleStyle"]).getItemStyle();var y=Math.min(o[1]/2,Math.max(p,10));(c=e.moveZone=new Cs({invisible:!0,shape:{y:o[1]-y,height:p+y}})).on("mouseover",(function(){s.enterEmphasis(d)})).on("mouseout",(function(){s.leaveEmphasis(d)})),r.add(d),r.add(g),r.add(c)}c.attr({draggable:!0,cursor:$B(this._orient),drift:W(this._onDragMove,this,"all"),ondragstart:W(this._showDataInfo,this,!0),ondragend:W(this._onDragEnd,this),onmouseover:W(this._showDataInfo,this,!0),onmouseout:W(this._showDataInfo,this,!1)})},e.prototype._resetInterval=function(){var t=this._range=this.dataZoomModel.getPercentRange(),e=this._getViewExtent();this._handleEnds=[Nr(t[0],[0,100],e,!0),Nr(t[1],[0,100],e,!0)]},e.prototype._updateInterval=function(t,e){var n=this.dataZoomModel,i=this._handleEnds,r=this._getViewExtent(),o=n.findRepresentativeAxisProxy().getMinMaxSpan(),a=[0,100];lk(e,i,r,n.get("zoomLock")?"all":t,null!=o.minSpan?Nr(o.minSpan,a,r,!0):null,null!=o.maxSpan?Nr(o.maxSpan,a,r,!0):null);var s=this._range,l=this._range=Vr([Nr(i[0],r,a,!0),Nr(i[1],r,a,!0)]);return!s||s[0]!==l[0]||s[1]!==l[1]},e.prototype._updateView=function(t){var e=this._displayables,n=this._handleEnds,i=Vr(n.slice()),r=this._size;E([0,1],(function(t){var i=e.handles[t],o=this._handleHeight;i.attr({scaleX:o/2,scaleY:o/2,x:n[t]+(t?-1:1),y:r[1]/2-o/2})}),this),e.filler.setShape({x:i[0],y:0,width:i[1]-i[0],height:r[1]});var o={x:i[0],width:i[1]-i[0]};e.moveHandle&&(e.moveHandle.setShape(o),e.moveZone.setShape(o),e.moveZone.getBoundingRect(),e.moveHandleIcon&&e.moveHandleIcon.attr("x",o.x+o.width/2));for(var a=e.dataShadowSegs,s=[0,i[0],i[1],r[0]],l=0;l<a.length;l++){var u=a[l],h=u.getClipPath();h||(h=new Cs,u.setClipPath(h)),h.setShape({x:s[l],y:0,width:s[l+1]-s[l],height:r[1]})}this._updateDataInfo(t)},e.prototype._updateDataInfo=function(t){var e=this.dataZoomModel,n=this._displayables,i=n.handleLabels,r=this._orient,o=["",""];if(e.get("showDetail")){var a=e.findRepresentativeAxisProxy();if(a){var s=a.getAxisModel().axis,l=this._range,u=t?a.calculateDataWindow({start:l[0],end:l[1]}).valueWindow:a.getDataValueWindow();o=[this._formatLabel(u[0],s),this._formatLabel(u[1],s)]}}var h=Vr(this._handleEnds.slice());function c(t){var e=Ih(n.handles[t].parent,this.group),a=Ch(0===t?"right":"left",e),s=this._handleWidth/2+5,l=Th([h[t]+(0===t?-s:s),this._size[1]/2],e);i[t].setStyle({x:l[0],y:l[1],verticalAlign:r===XB?"middle":a,align:r===XB?a:"center",text:o[t]})}c.call(this,0),c.call(this,1)},e.prototype._formatLabel=function(t,e){var n=this.dataZoomModel,i=n.get("labelFormatter"),r=n.get("labelPrecision");null!=r&&"auto"!==r||(r=e.getPixelPrecision());var o=null==t||isNaN(t)?"":"category"===e.type||"time"===e.type?e.scale.getLabel({value:Math.round(t)}):t.toFixed(Math.min(r,20));return U(i)?i(t,o):X(i)?i.replace("{value}",o):o},e.prototype._showDataInfo=function(t){t=this._dragging||t;var e=this._displayables,n=e.handleLabels;n[0].attr("invisible",!t),n[1].attr("invisible",!t),e.moveHandle&&this.api[t?"enterEmphasis":"leaveEmphasis"](e.moveHandle,1)},e.prototype._onDragMove=function(t,e,n,i){this._dragging=!0,se(i.event);var r=Th([e,n],this._displayables.sliderGroup.getLocalTransform(),!0),o=this._updateInterval(t,r[0]),a=this.dataZoomModel.get("realtime");this._updateView(!a),o&&a&&this._dispatchZoomAction(!0)},e.prototype._onDragEnd=function(){this._dragging=!1,this._showDataInfo(!1),!this.dataZoomModel.get("realtime")&&this._dispatchZoomAction(!1)},e.prototype._onClickPanel=function(t){var e=this._size,n=this._displayables.sliderGroup.transformCoordToLocal(t.offsetX,t.offsetY);if(!(n[0]<0||n[0]>e[0]||n[1]<0||n[1]>e[1])){var i=this._handleEnds,r=(i[0]+i[1])/2,o=this._updateInterval("all",n[0]-r);this._updateView(),o&&this._dispatchZoomAction(!1)}},e.prototype._onBrushStart=function(t){var e=t.offsetX,n=t.offsetY;this._brushStart=new Ji(e,n),this._brushing=!0,this._brushStartTime=+new Date},e.prototype._onBrushEnd=function(t){if(this._brushing){var e=this._displayables.brushRect;if(this._brushing=!1,e){e.attr("ignore",!0);var n=e.shape;if(!(+new Date-this._brushStartTime<200&&Math.abs(n.width)<5)){var i=this._getViewExtent(),r=[0,100];this._range=Vr([Nr(n.x,i,r,!0),Nr(n.x+n.width,i,r,!0)]),this._handleEnds=[n.x,n.x+n.width],this._updateView(),this._dispatchZoomAction(!1)}}}},e.prototype._onBrush=function(t){this._brushing&&(se(t.event),this._updateBrushRect(t.offsetX,t.offsetY))},e.prototype._updateBrushRect=function(t,e){var n=this._displayables,i=this.dataZoomModel,r=n.brushRect;r||(r=n.brushRect=new UB({silent:!0,style:i.getModel("brushStyle").getItemStyle()}),n.sliderGroup.add(r)),r.attr("ignore",!1);var o=this._brushStart,a=this._displayables.sliderGroup,s=a.transformCoordToLocal(t,e),l=a.transformCoordToLocal(o.x,o.y),u=this._size;s[0]=Math.max(Math.min(u[0],s[0]),0),r.setShape({x:l[0],y:0,width:s[0]-l[0],height:u[1]})},e.prototype._dispatchZoomAction=function(t){var e=this._range;this.api.dispatchAction({type:"dataZoom",from:this.uid,dataZoomId:this.dataZoomModel.id,animation:t?qB:null,start:e[0],end:e[1]})},e.prototype._findCoordRect=function(){var t,e=CE(this.dataZoomModel).infoList;if(!t&&e.length){var n=e[0].model.coordinateSystem;t=n.getRect&&n.getRect()}if(!t){var i=this.api.getWidth(),r=this.api.getHeight();t={x:.2*i,y:.2*r,width:.6*i,height:.6*r}}return t},e.type="dataZoom.slider",e}(PE);function $B(t){return"vertical"===t?"ns-resize":"ew-resize"}function JB(t){t.registerComponentModel(YB),t.registerComponentView(KB),BE(t)}var QB=function(t,e,n){var i=T((tF[t]||{})[e]);return n&&Y(i)?i[i.length-1]:i},tF={color:{active:["#006edd","#e0ffff"],inactive:["rgba(0,0,0,0)"]},colorHue:{active:[0,360],inactive:[0,0]},colorSaturation:{active:[.3,1],inactive:[0,0]},colorLightness:{active:[.9,.5],inactive:[0,0]},colorAlpha:{active:[.3,1],inactive:[0,0]},opacity:{active:[.3,1],inactive:[0,0]},symbol:{active:["circle","roundRect","diamond"],inactive:["none"]},symbolSize:{active:[10,50],inactive:[0,0]}},eF=iD.mapVisual,nF=iD.eachVisual,iF=Y,rF=E,oF=Vr,aF=Nr,sF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.stateList=["inRange","outOfRange"],n.replacableOptionKeys=["inRange","outOfRange","target","controller","color"],n.layoutMode={type:"box",ignoreSize:!0},n.dataBound=[-1/0,1/0],n.targetVisuals={},n.controllerVisuals={},n}return n(e,t),e.prototype.init=function(t,e,n){this.mergeDefaultAndTheme(t,n)},e.prototype.optionUpdated=function(t,e){var n=this.option;!e&&eV(n,t,this.replacableOptionKeys),this.textStyleModel=this.getModel("textStyle"),this.resetItemSize(),this.completeVisualOption()},e.prototype.resetVisual=function(t){var e=this.stateList;t=W(t,this),this.controllerVisuals=tV(this.option.controller,e,t),this.targetVisuals=tV(this.option.target,e,t)},e.prototype.getItemSymbol=function(){return null},e.prototype.getTargetSeriesIndices=function(){var t=this.option.seriesIndex,e=[];return null==t||"all"===t?this.ecModel.eachSeries((function(t,n){e.push(n)})):e=ho(t),e},e.prototype.eachTargetSeries=function(t,e){E(this.getTargetSeriesIndices(),(function(n){var i=this.ecModel.getSeriesByIndex(n);i&&t.call(e,i)}),this)},e.prototype.isTargetSeries=function(t){var e=!1;return this.eachTargetSeries((function(n){n===t&&(e=!0)})),e},e.prototype.formatValueText=function(t,e,n){var i,r=this.option,o=r.precision,a=this.dataBound,s=r.formatter;n=n||["<",">"],Y(t)&&(t=t.slice(),i=!0);var l=e?t:i?[u(t[0]),u(t[1])]:u(t);return X(s)?s.replace("{value}",i?l[0]:l).replace("{value2}",i?l[1]:l):U(s)?i?s(t[0],t[1]):s(t):i?t[0]===a[0]?n[0]+" "+l[1]:t[1]===a[1]?n[1]+" "+l[0]:l[0]+" - "+l[1]:l;function u(t){return t===a[0]?"min":t===a[1]?"max":(+t).toFixed(Math.min(o,20))}},e.prototype.resetExtent=function(){var t=this.option,e=oF([t.min,t.max]);this._dataExtent=e},e.prototype.getDataDimensionIndex=function(t){var e=this.option.dimension;if(null!=e)return t.getDimensionIndex(e);for(var n=t.dimensions,i=n.length-1;i>=0;i--){var r=n[i],o=t.getDimensionInfo(r);if(!o.isCalculationCoord)return o.storeDimIndex}},e.prototype.getExtent=function(){return this._dataExtent.slice()},e.prototype.completeVisualOption=function(){var t=this.ecModel,e=this.option,n={inRange:e.inRange,outOfRange:e.outOfRange},i=e.target||(e.target={}),r=e.controller||(e.controller={});C(i,n),C(r,n);var o=this.isCategory();function a(n){iF(e.color)&&!n.inRange&&(n.inRange={color:e.color.slice().reverse()}),n.inRange=n.inRange||{color:t.get("gradientColor")}}a.call(this,i),a.call(this,r),function(t,e,n){var i=t[e],r=t[n];i&&!r&&(r=t[n]={},rF(i,(function(t,e){if(iD.isValidType(e)){var n=QB(e,"inactive",o);null!=n&&(r[e]=n,"color"!==e||r.hasOwnProperty("opacity")||r.hasOwnProperty("colorAlpha")||(r.opacity=[0,0]))}})))}.call(this,i,"inRange","outOfRange"),function(t){var e=(t.inRange||{}).symbol||(t.outOfRange||{}).symbol,n=(t.inRange||{}).symbolSize||(t.outOfRange||{}).symbolSize,i=this.get("inactiveColor"),r=this.getItemSymbol()||"roundRect";rF(this.stateList,(function(a){var s=this.itemSize,l=t[a];l||(l=t[a]={color:o?i:[i]}),null==l.symbol&&(l.symbol=e&&T(e)||(o?r:[r])),null==l.symbolSize&&(l.symbolSize=n&&T(n)||(o?s[0]:[s[0],s[0]])),l.symbol=eF(l.symbol,(function(t){return"none"===t?r:t}));var u=l.symbolSize;if(null!=u){var h=-1/0;nF(u,(function(t){t>h&&(h=t)})),l.symbolSize=eF(u,(function(t){return aF(t,[0,h],[0,s[0]],!0)}))}}),this)}.call(this,r)},e.prototype.resetItemSize=function(){this.itemSize=[parseFloat(this.get("itemWidth")),parseFloat(this.get("itemHeight"))]},e.prototype.isCategory=function(){return!!this.option.categories},e.prototype.setSelected=function(t){},e.prototype.getSelected=function(){return null},e.prototype.getValueState=function(t){return null},e.prototype.getVisualMeta=function(t){return null},e.type="visualMap",e.dependencies=["series"],e.defaultOption={show:!0,z:4,seriesIndex:"all",min:0,max:200,left:0,right:null,top:null,bottom:0,itemWidth:null,itemHeight:null,inverse:!1,orient:"vertical",backgroundColor:"rgba(0,0,0,0)",borderColor:"#ccc",contentColor:"#5793f3",inactiveColor:"#aaa",borderWidth:0,padding:5,textGap:10,precision:0,textStyle:{color:"#333"}},e}(Tp),lF=[20,140],uF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.optionUpdated=function(e,n){t.prototype.optionUpdated.apply(this,arguments),this.resetExtent(),this.resetVisual((function(t){t.mappingMethod="linear",t.dataExtent=this.getExtent()})),this._resetRange()},e.prototype.resetItemSize=function(){t.prototype.resetItemSize.apply(this,arguments);var e=this.itemSize;(null==e[0]||isNaN(e[0]))&&(e[0]=lF[0]),(null==e[1]||isNaN(e[1]))&&(e[1]=lF[1])},e.prototype._resetRange=function(){var t=this.getExtent(),e=this.option.range;!e||e.auto?(t.auto=1,this.option.range=t):Y(e)&&(e[0]>e[1]&&e.reverse(),e[0]=Math.max(e[0],t[0]),e[1]=Math.min(e[1],t[1]))},e.prototype.completeVisualOption=function(){t.prototype.completeVisualOption.apply(this,arguments),E(this.stateList,(function(t){var e=this.option.controller[t].symbolSize;e&&e[0]!==e[1]&&(e[0]=e[1]/3)}),this)},e.prototype.setSelected=function(t){this.option.range=t.slice(),this._resetRange()},e.prototype.getSelected=function(){var t=this.getExtent(),e=Vr((this.get("range")||[]).slice());return e[0]>t[1]&&(e[0]=t[1]),e[1]>t[1]&&(e[1]=t[1]),e[0]<t[0]&&(e[0]=t[0]),e[1]<t[0]&&(e[1]=t[0]),e},e.prototype.getValueState=function(t){var e=this.option.range,n=this.getExtent();return(e[0]<=n[0]||e[0]<=t)&&(e[1]>=n[1]||t<=e[1])?"inRange":"outOfRange"},e.prototype.findTargetDataIndices=function(t){var e=[];return this.eachTargetSeries((function(n){var i=[],r=n.getData();r.each(this.getDataDimensionIndex(r),(function(e,n){t[0]<=e&&e<=t[1]&&i.push(n)}),this),e.push({seriesId:n.id,dataIndex:i})}),this),e},e.prototype.getVisualMeta=function(t){var e=hF(this,"outOfRange",this.getExtent()),n=hF(this,"inRange",this.option.range.slice()),i=[];function r(e,n){i.push({value:e,color:t(e,n)})}for(var o=0,a=0,s=n.length,l=e.length;a<l&&(!n.length||e[a]<=n[0]);a++)e[a]<n[o]&&r(e[a],"outOfRange");for(var u=1;o<s;o++,u=0)u&&i.length&&r(n[o],"outOfRange"),r(n[o],"inRange");for(u=1;a<l;a++)(!n.length||n[n.length-1]<e[a])&&(u&&(i.length&&r(i[i.length-1].value,"outOfRange"),u=0),r(e[a],"outOfRange"));var h=i.length;return{stops:i,outerColors:[h?i[0].color:"transparent",h?i[h-1].color:"transparent"]}},e.type="visualMap.continuous",e.defaultOption=yc(sF.defaultOption,{align:"auto",calculable:!1,hoverLink:!0,realtime:!0,handleIcon:"path://M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z",handleSize:"120%",handleStyle:{borderColor:"#fff",borderWidth:1},indicatorIcon:"circle",indicatorSize:"50%",indicatorStyle:{borderColor:"#fff",borderWidth:2,shadowBlur:2,shadowOffsetX:1,shadowOffsetY:1,shadowColor:"rgba(0,0,0,0.2)"}}),e}(sF);function hF(t,e,n){if(n[0]===n[1])return n.slice();for(var i=(n[1]-n[0])/200,r=n[0],o=[],a=0;a<=200&&r<n[1];a++)o.push(r),r+=i;return o.push(n[1]),o}var cF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n.autoPositionValues={left:1,right:1,top:1,bottom:1},n}return n(e,t),e.prototype.init=function(t,e){this.ecModel=t,this.api=e},e.prototype.render=function(t,e,n,i){this.visualMapModel=t,!1!==t.get("show")?this.doRender(t,e,n,i):this.group.removeAll()},e.prototype.renderBackground=function(t){var e=this.visualMapModel,n=ip(e.get("padding")||0),i=t.getBoundingRect();t.add(new Cs({z2:-1,silent:!0,shape:{x:i.x-n[3],y:i.y-n[0],width:i.width+n[3]+n[1],height:i.height+n[0]+n[2]},style:{fill:e.get("backgroundColor"),stroke:e.get("borderColor"),lineWidth:e.get("borderWidth")}}))},e.prototype.getControllerVisual=function(t,e,n){var i=(n=n||{}).forceState,r=this.visualMapModel,o={};if("color"===e){var a=r.get("contentColor");o.color=a}function s(t){return o[t]}function l(t,e){o[t]=e}var u=r.controllerVisuals[i||r.getValueState(t)];return E(iD.prepareVisualTypes(u),(function(i){var r=u[i];n.convertOpacityToAlpha&&"opacity"===i&&(i="colorAlpha",r=u.__alphaForOpacity),iD.dependsOn(i,e)&&r&&r.applyVisual(t,s,l)})),o[e]},e.prototype.positionGroup=function(t){var e=this.visualMapModel,n=this.api;_p(t,e.getBoxLayoutParams(),{width:n.getWidth(),height:n.getHeight()})},e.prototype.doRender=function(t,e,n,i){},e.type="visualMap",e}(gg),pF=[["left","right","width"],["top","bottom","height"]];function dF(t,e,n){var i=t.option,r=i.align;if(null!=r&&"auto"!==r)return r;for(var o={width:e.getWidth(),height:e.getHeight()},a="horizontal"===i.orient?1:0,s=pF[a],l=[0,null,10],u={},h=0;h<3;h++)u[pF[1-a][h]]=l[h],u[s[h]]=2===h?n[0]:i[s[h]];var c=[["x","width",3],["y","height",0]][a],p=xp(u,o,i.padding);return s[(p.margin[c[2]]||0)+p[c[0]]+.5*p[c[1]]<.5*o[c[1]]?0:1]}function fF(t,e){return E(t||[],(function(t){null!=t.dataIndex&&(t.dataIndexInside=t.dataIndex,t.dataIndex=null),t.highlightKey="visualMap"+(e?e.componentIndex:"")})),t}var gF=Nr,yF=E,vF=Math.min,mF=Math.max,xF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._shapes={},n._dataInterval=[],n._handleEnds=[],n._hoverLinkDataIndices=[],n}return n(e,t),e.prototype.doRender=function(t,e,n,i){this._api=n,i&&"selectDataRange"===i.type&&i.from===this.uid||this._buildView()},e.prototype._buildView=function(){this.group.removeAll();var t=this.visualMapModel,e=this.group;this._orient=t.get("orient"),this._useHandle=t.get("calculable"),this._resetInterval(),this._renderBar(e);var n=t.get("text");this._renderEndsText(e,n,0),this._renderEndsText(e,n,1),this._updateView(!0),this.renderBackground(e),this._updateView(),this._enableHoverLinkToSeries(),this._enableHoverLinkFromSeries(),this.positionGroup(e)},e.prototype._renderEndsText=function(t,e,n){if(e){var i=e[1-n];i=null!=i?i+"":"";var r=this.visualMapModel,o=r.get("textGap"),a=r.itemSize,s=this._shapes.mainGroup,l=this._applyTransform([a[0]/2,0===n?-o:a[1]+o],s),u=this._applyTransform(0===n?"bottom":"top",s),h=this._orient,c=this.visualMapModel.textStyleModel;this.group.add(new ks({style:Uh(c,{x:l[0],y:l[1],verticalAlign:"horizontal"===h?"middle":u,align:"horizontal"===h?u:"center",text:i})}))}},e.prototype._renderBar=function(t){var e=this.visualMapModel,n=this._shapes,i=e.itemSize,r=this._orient,o=this._useHandle,a=dF(e,this.api,i),s=n.mainGroup=this._createBarGroup(a),l=new Cr;s.add(l),l.add(n.outOfRange=_F()),l.add(n.inRange=_F(null,o?wF(this._orient):null,W(this._dragHandle,this,"all",!1),W(this._dragHandle,this,"all",!0))),l.setClipPath(new Cs({shape:{x:0,y:0,width:i[0],height:i[1],r:3}}));var u=e.textStyleModel.getTextRect("国"),h=mF(u.width,u.height);o&&(n.handleThumbs=[],n.handleLabels=[],n.handleLabelPoints=[],this._createHandle(e,s,0,i,h,r),this._createHandle(e,s,1,i,h,r)),this._createIndicator(e,s,i,h,r),t.add(s)},e.prototype._createHandle=function(t,e,n,i,r,o){var a=W(this._dragHandle,this,n,!1),s=W(this._dragHandle,this,n,!0),l=gr(t.get("handleSize"),i[0]),u=Ly(t.get("handleIcon"),-l/2,-l/2,l,l,null,!0),h=wF(this._orient);u.attr({cursor:h,draggable:!0,drift:a,ondragend:s,onmousemove:function(t){se(t.event)}}),u.x=i[0]/2,u.useStyle(t.getModel("handleStyle").getItemStyle()),u.setStyle({strokeNoScale:!0,strokeFirst:!0}),u.style.lineWidth*=2,u.ensureState("emphasis").style=t.getModel(["emphasis","handleStyle"]).getItemStyle(),Bl(u,!0),e.add(u);var c=this.visualMapModel.textStyleModel,p=new ks({cursor:h,draggable:!0,drift:a,onmousemove:function(t){se(t.event)},ondragend:s,style:Uh(c,{x:0,y:0,text:""})});p.ensureState("blur").style={opacity:.1},p.stateTransition={duration:200},this.group.add(p);var d=[l,0],f=this._shapes;f.handleThumbs[n]=u,f.handleLabelPoints[n]=d,f.handleLabels[n]=p},e.prototype._createIndicator=function(t,e,n,i,r){var o=gr(t.get("indicatorSize"),n[0]),a=Ly(t.get("indicatorIcon"),-o/2,-o/2,o,o,null,!0);a.attr({cursor:"move",invisible:!0,silent:!0,x:n[0]/2});var s=t.getModel("indicatorStyle").getItemStyle();if(a instanceof _s){var l=a.style;a.useStyle(A({image:l.image,x:l.x,y:l.y,width:l.width,height:l.height},s))}else a.useStyle(s);e.add(a);var u=this.visualMapModel.textStyleModel,h=new ks({silent:!0,invisible:!0,style:Uh(u,{x:0,y:0,text:""})});this.group.add(h);var c=[("horizontal"===r?i/2:6)+n[0]/2,0],p=this._shapes;p.indicator=a,p.indicatorLabel=h,p.indicatorLabelPoint=c,this._firstShowIndicator=!0},e.prototype._dragHandle=function(t,e,n,i){if(this._useHandle){if(this._dragging=!e,!e){var r=this._applyTransform([n,i],this._shapes.mainGroup,!0);this._updateInterval(t,r[1]),this._hideIndicator(),this._updateView()}e===!this.visualMapModel.get("realtime")&&this.api.dispatchAction({type:"selectDataRange",from:this.uid,visualMapId:this.visualMapModel.id,selected:this._dataInterval.slice()}),e?!this._hovering&&this._clearHoverLinkToSeries():bF(this.visualMapModel)&&this._doHoverLinkToSeries(this._handleEnds[t],!1)}},e.prototype._resetInterval=function(){var t=this.visualMapModel,e=this._dataInterval=t.getSelected(),n=t.getExtent(),i=[0,t.itemSize[1]];this._handleEnds=[gF(e[0],n,i,!0),gF(e[1],n,i,!0)]},e.prototype._updateInterval=function(t,e){e=e||0;var n=this.visualMapModel,i=this._handleEnds,r=[0,n.itemSize[1]];lk(e,i,r,t,0);var o=n.getExtent();this._dataInterval=[gF(i[0],r,o,!0),gF(i[1],r,o,!0)]},e.prototype._updateView=function(t){var e=this.visualMapModel,n=e.getExtent(),i=this._shapes,r=[0,e.itemSize[1]],o=t?r:this._handleEnds,a=this._createBarVisual(this._dataInterval,n,o,"inRange"),s=this._createBarVisual(n,n,r,"outOfRange");i.inRange.setStyle({fill:a.barColor}).setShape("points",a.barPoints),i.outOfRange.setStyle({fill:s.barColor}).setShape("points",s.barPoints),this._updateHandle(o,a)},e.prototype._createBarVisual=function(t,e,n,i){var r={forceState:i,convertOpacityToAlpha:!0},o=this._makeColorGradient(t,r),a=[this.getControllerVisual(t[0],"symbolSize",r),this.getControllerVisual(t[1],"symbolSize",r)],s=this._createBarPoints(n,a);return{barColor:new Xu(0,0,0,1,o),barPoints:s,handlesColor:[o[0].color,o[o.length-1].color]}},e.prototype._makeColorGradient=function(t,e){var n=[],i=(t[1]-t[0])/100;n.push({color:this.getControllerVisual(t[0],"color",e),offset:0});for(var r=1;r<100;r++){var o=t[0]+i*r;if(o>t[1])break;n.push({color:this.getControllerVisual(o,"color",e),offset:r/100})}return n.push({color:this.getControllerVisual(t[1],"color",e),offset:1}),n},e.prototype._createBarPoints=function(t,e){var n=this.visualMapModel.itemSize;return[[n[0]-e[0],t[0]],[n[0],t[0]],[n[0],t[1]],[n[0]-e[1],t[1]]]},e.prototype._createBarGroup=function(t){var e=this._orient,n=this.visualMapModel.get("inverse");return new Cr("horizontal"!==e||n?"horizontal"===e&&n?{scaleX:"bottom"===t?-1:1,rotation:-Math.PI/2}:"vertical"!==e||n?{scaleX:"left"===t?1:-1}:{scaleX:"left"===t?1:-1,scaleY:-1}:{scaleX:"bottom"===t?1:-1,rotation:Math.PI/2})},e.prototype._updateHandle=function(t,e){if(this._useHandle){var n=this._shapes,i=this.visualMapModel,r=n.handleThumbs,o=n.handleLabels,a=i.itemSize,s=i.getExtent();yF([0,1],(function(l){var u=r[l];u.setStyle("fill",e.handlesColor[l]),u.y=t[l];var h=gF(t[l],[0,a[1]],s,!0),c=this.getControllerVisual(h,"symbolSize");u.scaleX=u.scaleY=c/a[0],u.x=a[0]-c/2;var p=Th(n.handleLabelPoints[l],Ih(u,this.group));o[l].setStyle({x:p[0],y:p[1],text:i.formatValueText(this._dataInterval[l]),verticalAlign:"middle",align:"vertical"===this._orient?this._applyTransform("left",n.mainGroup):"center"})}),this)}},e.prototype._showIndicator=function(t,e,n,i){var r=this.visualMapModel,o=r.getExtent(),a=r.itemSize,s=[0,a[1]],l=this._shapes,u=l.indicator;if(u){u.attr("invisible",!1);var h=this.getControllerVisual(t,"color",{convertOpacityToAlpha:!0}),c=this.getControllerVisual(t,"symbolSize"),p=gF(t,o,s,!0),d=a[0]-c/2,f={x:u.x,y:u.y};u.y=p,u.x=d;var g=Th(l.indicatorLabelPoint,Ih(u,this.group)),y=l.indicatorLabel;y.attr("invisible",!1);var v=this._applyTransform("left",l.mainGroup),m="horizontal"===this._orient;y.setStyle({text:(n||"")+r.formatValueText(e),verticalAlign:m?v:"middle",align:m?"center":v});var x={x:d,y:p,style:{fill:h}},_={style:{x:g[0],y:g[1]}};if(r.ecModel.isAnimationEnabled()&&!this._firstShowIndicator){var b={duration:100,easing:"cubicInOut",additive:!0};u.x=f.x,u.y=f.y,u.animateTo(x,b),y.animateTo(_,b)}else u.attr(x),y.attr(_);this._firstShowIndicator=!1;var w=this._shapes.handleLabels;if(w)for(var S=0;S<w.length;S++)this._api.enterBlur(w[S])}},e.prototype._enableHoverLinkToSeries=function(){var t=this;this._shapes.mainGroup.on("mousemove",(function(e){if(t._hovering=!0,!t._dragging){var n=t.visualMapModel.itemSize,i=t._applyTransform([e.offsetX,e.offsetY],t._shapes.mainGroup,!0,!0);i[1]=vF(mF(0,i[1]),n[1]),t._doHoverLinkToSeries(i[1],0<=i[0]&&i[0]<=n[0])}})).on("mouseout",(function(){t._hovering=!1,!t._dragging&&t._clearHoverLinkToSeries()}))},e.prototype._enableHoverLinkFromSeries=function(){var t=this.api.getZr();this.visualMapModel.option.hoverLink?(t.on("mouseover",this._hoverLinkFromSeriesMouseOver,this),t.on("mouseout",this._hideIndicator,this)):this._clearHoverLinkFromSeries()},e.prototype._doHoverLinkToSeries=function(t,e){var n=this.visualMapModel,i=n.itemSize;if(n.option.hoverLink){var r=[0,i[1]],o=n.getExtent();t=vF(mF(r[0],t),r[1]);var a=function(t,e,n){var i=6,r=t.get("hoverLinkDataSize");r&&(i=gF(r,e,n,!0)/2);return i}(n,o,r),s=[t-a,t+a],l=gF(t,r,o,!0),u=[gF(s[0],r,o,!0),gF(s[1],r,o,!0)];s[0]<r[0]&&(u[0]=-1/0),s[1]>r[1]&&(u[1]=1/0),e&&(u[0]===-1/0?this._showIndicator(l,u[1],"< ",a):u[1]===1/0?this._showIndicator(l,u[0],"> ",a):this._showIndicator(l,l,"≈ ",a));var h=this._hoverLinkDataIndices,c=[];(e||bF(n))&&(c=this._hoverLinkDataIndices=n.findTargetDataIndices(u));var p=function(t,e){var n={},i={};return r(t||[],n),r(e||[],i,n),[o(n),o(i)];function r(t,e,n){for(var i=0,r=t.length;i<r;i++){var o=xo(t[i].seriesId,null);if(null==o)return;for(var a=ho(t[i].dataIndex),s=n&&n[o],l=0,u=a.length;l<u;l++){var h=a[l];s&&s[h]?s[h]=null:(e[o]||(e[o]={}))[h]=1}}}function o(t,e){var n=[];for(var i in t)if(t.hasOwnProperty(i)&&null!=t[i])if(e)n.push(+i);else{var r=o(t[i],!0);r.length&&n.push({seriesId:i,dataIndex:r})}return n}}(h,c);this._dispatchHighDown("downplay",fF(p[0],n)),this._dispatchHighDown("highlight",fF(p[1],n))}},e.prototype._hoverLinkFromSeriesMouseOver=function(t){var e=t.target,n=this.visualMapModel;if(e&&null!=Hs(e).dataIndex){var i=Hs(e),r=this.ecModel.getSeriesByIndex(i.seriesIndex);if(n.isTargetSeries(r)){var o=r.getData(i.dataType),a=o.getStore().get(n.getDataDimensionIndex(o),i.dataIndex);isNaN(a)||this._showIndicator(a,a)}}},e.prototype._hideIndicator=function(){var t=this._shapes;t.indicator&&t.indicator.attr("invisible",!0),t.indicatorLabel&&t.indicatorLabel.attr("invisible",!0);var e=this._shapes.handleLabels;if(e)for(var n=0;n<e.length;n++)this._api.leaveBlur(e[n])},e.prototype._clearHoverLinkToSeries=function(){this._hideIndicator();var t=this._hoverLinkDataIndices;this._dispatchHighDown("downplay",fF(t,this.visualMapModel)),t.length=0},e.prototype._clearHoverLinkFromSeries=function(){this._hideIndicator();var t=this.api.getZr();t.off("mouseover",this._hoverLinkFromSeriesMouseOver),t.off("mouseout",this._hideIndicator)},e.prototype._applyTransform=function(t,e,n,i){var r=Ih(e,i?null:this.group);return Y(t)?Th(t,r,n):Ch(t,r,n)},e.prototype._dispatchHighDown=function(t,e){e&&e.length&&this.api.dispatchAction({type:t,batch:e})},e.prototype.dispose=function(){this._clearHoverLinkFromSeries(),this._clearHoverLinkToSeries()},e.prototype.remove=function(){this._clearHoverLinkFromSeries(),this._clearHoverLinkToSeries()},e.type="visualMap.continuous",e}(cF);function _F(t,e,n,i){return new Pu({shape:{points:t},draggable:!!n,cursor:e,drift:n,onmousemove:function(t){se(t.event)},ondragend:i})}function bF(t){var e=t.get("hoverLinkOnHandle");return!!(null==e?t.get("realtime"):e)}function wF(t){return"vertical"===t?"ns-resize":"ew-resize"}var SF={type:"selectDataRange",event:"dataRangeSelected",update:"update"},MF=function(t,e){e.eachComponent({mainType:"visualMap",query:t},(function(e){e.setSelected(t.selected)}))},IF=[{createOnAllSeries:!0,reset:function(t,e){var n=[];return e.eachComponent("visualMap",(function(e){var i,r,o,a,s,l=t.pipelineContext;!e.isTargetSeries(t)||l&&l.large||n.push((i=e.stateList,r=e.targetVisuals,o=W(e.getValueState,e),a=e.getDataDimensionIndex(t.getData()),s={},E(i,(function(t){var e=iD.prepareVisualTypes(r[t]);s[t]=e})),{progress:function(t,e){var n,i;function l(t){return fy(e,i,t)}function u(t,n){yy(e,i,t,n)}null!=a&&(n=e.getDimensionIndex(a));for(var h=e.getStore();null!=(i=t.next());){var c=e.getRawDataItem(i);if(!c||!1!==c.visualMap)for(var p=null!=a?h.get(n,i):i,d=o(p),f=r[d],g=s[d],y=0,v=g.length;y<v;y++){var m=g[y];f[m]&&f[m].applyVisual(p,l,u)}}}}))})),n}},{createOnAllSeries:!0,reset:function(t,e){var n=t.getData(),i=[];e.eachComponent("visualMap",(function(e){if(e.isTargetSeries(t)){var r=e.getVisualMeta(W(TF,null,t,e))||{stops:[],outerColors:[]},o=e.getDataDimensionIndex(n);o>=0&&(r.dimension=o,i.push(r))}})),t.getData().setVisual("visualMeta",i)}}];function TF(t,e,n,i){for(var r=e.targetVisuals[i],o=iD.prepareVisualTypes(r),a={color:gy(t.getData(),"color")},s=0,l=o.length;s<l;s++){var u=o[s],h=r["opacity"===u?"__alphaForOpacity":u];h&&h.applyVisual(n,c,p)}return a.color;function c(t){return a[t]}function p(t,e){a[t]=e}}var CF=E;function DF(t){var e=t&&t.visualMap;Y(e)||(e=e?[e]:[]),CF(e,(function(t){if(t){AF(t,"splitList")&&!AF(t,"pieces")&&(t.pieces=t.splitList,delete t.splitList);var e=t.pieces;e&&Y(e)&&CF(e,(function(t){q(t)&&(AF(t,"start")&&!AF(t,"min")&&(t.min=t.start),AF(t,"end")&&!AF(t,"max")&&(t.max=t.end))}))}}))}function AF(t,e){return t&&t.hasOwnProperty&&t.hasOwnProperty(e)}var kF=!1;function LF(t){kF||(kF=!0,t.registerSubTypeDefaulter("visualMap",(function(t){return t.categories||(t.pieces?t.pieces.length>0:t.splitNumber>0)&&!t.calculable?"piecewise":"continuous"})),t.registerAction(SF,MF),E(IF,(function(e){t.registerVisual(t.PRIORITY.VISUAL.COMPONENT,e)})),t.registerPreprocessor(DF))}function PF(t){t.registerComponentModel(uF),t.registerComponentView(xF),LF(t)}var OF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n._pieceList=[],n}return n(e,t),e.prototype.optionUpdated=function(e,n){t.prototype.optionUpdated.apply(this,arguments),this.resetExtent();var i=this._mode=this._determineMode();this._pieceList=[],RF[this._mode].call(this,this._pieceList),this._resetSelected(e,n);var r=this.option.categories;this.resetVisual((function(t,e){"categories"===i?(t.mappingMethod="category",t.categories=T(r)):(t.dataExtent=this.getExtent(),t.mappingMethod="piecewise",t.pieceList=z(this._pieceList,(function(t){return t=T(t),"inRange"!==e&&(t.visual=null),t})))}))},e.prototype.completeVisualOption=function(){var e=this.option,n={},i=iD.listVisualTypes(),r=this.isCategory();function o(t,e,n){return t&&t[e]&&t[e].hasOwnProperty(n)}E(e.pieces,(function(t){E(i,(function(e){t.hasOwnProperty(e)&&(n[e]=1)}))})),E(n,(function(t,n){var i=!1;E(this.stateList,(function(t){i=i||o(e,t,n)||o(e.target,t,n)}),this),!i&&E(this.stateList,(function(t){(e[t]||(e[t]={}))[n]=QB(n,"inRange"===t?"active":"inactive",r)}))}),this),t.prototype.completeVisualOption.apply(this,arguments)},e.prototype._resetSelected=function(t,e){var n=this.option,i=this._pieceList,r=(e?n:t).selected||{};if(n.selected=r,E(i,(function(t,e){var n=this.getSelectedMapKey(t);r.hasOwnProperty(n)||(r[n]=!0)}),this),"single"===n.selectedMode){var o=!1;E(i,(function(t,e){var n=this.getSelectedMapKey(t);r[n]&&(o?r[n]=!1:o=!0)}),this)}},e.prototype.getItemSymbol=function(){return this.get("itemSymbol")},e.prototype.getSelectedMapKey=function(t){return"categories"===this._mode?t.value+"":t.index+""},e.prototype.getPieceList=function(){return this._pieceList},e.prototype._determineMode=function(){var t=this.option;return t.pieces&&t.pieces.length>0?"pieces":this.option.categories?"categories":"splitNumber"},e.prototype.setSelected=function(t){this.option.selected=T(t)},e.prototype.getValueState=function(t){var e=iD.findPieceIndex(t,this._pieceList);return null!=e&&this.option.selected[this.getSelectedMapKey(this._pieceList[e])]?"inRange":"outOfRange"},e.prototype.findTargetDataIndices=function(t){var e=[],n=this._pieceList;return this.eachTargetSeries((function(i){var r=[],o=i.getData();o.each(this.getDataDimensionIndex(o),(function(e,i){iD.findPieceIndex(e,n)===t&&r.push(i)}),this),e.push({seriesId:i.id,dataIndex:r})}),this),e},e.prototype.getRepresentValue=function(t){var e;if(this.isCategory())e=t.value;else if(null!=t.value)e=t.value;else{var n=t.interval||[];e=n[0]===-1/0&&n[1]===1/0?0:(n[0]+n[1])/2}return e},e.prototype.getVisualMeta=function(t){if(!this.isCategory()){var e=[],n=["",""],i=this,r=this._pieceList.slice();if(r.length){var o=r[0].interval[0];o!==-1/0&&r.unshift({interval:[-1/0,o]}),(o=r[r.length-1].interval[1])!==1/0&&r.push({interval:[o,1/0]})}else r.push({interval:[-1/0,1/0]});var a=-1/0;return E(r,(function(t){var e=t.interval;e&&(e[0]>a&&s([a,e[0]],"outOfRange"),s(e.slice()),a=e[1])}),this),{stops:e,outerColors:n}}function s(r,o){var a=i.getRepresentValue({interval:r});o||(o=i.getValueState(a));var s=t(a,o);r[0]===-1/0?n[0]=s:r[1]===1/0?n[1]=s:e.push({value:r[0],color:s},{value:r[1],color:s})}},e.type="visualMap.piecewise",e.defaultOption=yc(sF.defaultOption,{selected:null,minOpen:!1,maxOpen:!1,align:"auto",itemWidth:20,itemHeight:14,itemSymbol:"roundRect",pieces:null,categories:null,splitNumber:5,selectedMode:"multiple",itemGap:10,hoverLink:!0}),e}(sF),RF={splitNumber:function(t){var e=this.option,n=Math.min(e.precision,20),i=this.getExtent(),r=e.splitNumber;r=Math.max(parseInt(r,10),1),e.splitNumber=r;for(var o=(i[1]-i[0])/r;+o.toFixed(n)!==o&&n<5;)n++;e.precision=n,o=+o.toFixed(n),e.minOpen&&t.push({interval:[-1/0,i[0]],close:[0,0]});for(var a=0,s=i[0];a<r;s+=o,a++){var l=a===r-1?i[1]:s+o;t.push({interval:[s,l],close:[1,1]})}e.maxOpen&&t.push({interval:[i[1],1/0],close:[0,0]}),Qr(t),E(t,(function(t,e){t.index=e,t.text=this.formatValueText(t.interval)}),this)},categories:function(t){var e=this.option;E(e.categories,(function(e){t.push({text:this.formatValueText(e,!0),value:e})}),this),NF(e,t)},pieces:function(t){var e=this.option;E(e.pieces,(function(e,n){q(e)||(e={value:e});var i={text:"",index:n};if(null!=e.label&&(i.text=e.label),e.hasOwnProperty("value")){var r=i.value=e.value;i.interval=[r,r],i.close=[1,1]}else{for(var o=i.interval=[],a=i.close=[0,0],s=[1,0,1],l=[-1/0,1/0],u=[],h=0;h<2;h++){for(var c=[["gte","gt","min"],["lte","lt","max"]][h],p=0;p<3&&null==o[h];p++)o[h]=e[c[p]],a[h]=s[p],u[h]=2===p;null==o[h]&&(o[h]=l[h])}u[0]&&o[1]===1/0&&(a[0]=0),u[1]&&o[0]===-1/0&&(a[1]=0),o[0]===o[1]&&a[0]&&a[1]&&(i.value=o[0])}i.visual=iD.retrieveVisuals(e),t.push(i)}),this),NF(e,t),Qr(t),E(t,(function(t){var e=t.close,n=[["<","≤"][e[1]],[">","≥"][e[0]]];t.text=t.text||this.formatValueText(null!=t.value?t.value:t.interval,!1,n)}),this)}};function NF(t,e){var n=t.inverse;("vertical"===t.orient?!n:n)&&e.reverse()}var EF=function(t){function e(){var n=null!==t&&t.apply(this,arguments)||this;return n.type=e.type,n}return n(e,t),e.prototype.doRender=function(){var t=this.group;t.removeAll();var e=this.visualMapModel,n=e.get("textGap"),i=e.textStyleModel,r=i.getFont(),o=i.getTextColor(),a=this._getItemAlign(),s=e.itemSize,l=this._getViewData(),u=l.endsText,h=it(e.get("showLabel",!0),!u);u&&this._renderEndsText(t,u[0],s,h,a),E(l.viewPieceList,(function(i){var l=i.piece,u=new Cr;u.onclick=W(this._onItemClick,this,l),this._enableHoverLink(u,i.indexInModelPieceList);var c=e.getRepresentValue(l);if(this._createItemSymbol(u,c,[0,0,s[0],s[1]]),h){var p=this.visualMapModel.getValueState(c);u.add(new ks({style:{x:"right"===a?-n:s[0]+n,y:s[1]/2,text:l.text,verticalAlign:"middle",align:a,font:r,fill:o,opacity:"outOfRange"===p?.5:1}}))}t.add(u)}),this),u&&this._renderEndsText(t,u[1],s,h,a),mp(e.get("orient"),t,e.get("itemGap")),this.renderBackground(t),this.positionGroup(t)},e.prototype._enableHoverLink=function(t,e){var n=this;t.on("mouseover",(function(){return i("highlight")})).on("mouseout",(function(){return i("downplay")}));var i=function(t){var i=n.visualMapModel;i.option.hoverLink&&n.api.dispatchAction({type:t,batch:fF(i.findTargetDataIndices(e),i)})}},e.prototype._getItemAlign=function(){var t=this.visualMapModel,e=t.option;if("vertical"===e.orient)return dF(t,this.api,t.itemSize);var n=e.align;return n&&"auto"!==n||(n="left"),n},e.prototype._renderEndsText=function(t,e,n,i,r){if(e){var o=new Cr,a=this.visualMapModel.textStyleModel;o.add(new ks({style:Uh(a,{x:i?"right"===r?n[0]:0:n[0]/2,y:n[1]/2,verticalAlign:"middle",align:i?r:"center",text:e})})),t.add(o)}},e.prototype._getViewData=function(){var t=this.visualMapModel,e=z(t.getPieceList(),(function(t,e){return{piece:t,indexInModelPieceList:e}})),n=t.get("text"),i=t.get("orient"),r=t.get("inverse");return("horizontal"===i?r:!r)?e.reverse():n&&(n=n.slice().reverse()),{viewPieceList:e,endsText:n}},e.prototype._createItemSymbol=function(t,e,n){t.add(Ly(this.getControllerVisual(e,"symbol"),n[0],n[1],n[2],n[3],this.getControllerVisual(e,"color")))},e.prototype._onItemClick=function(t){var e=this.visualMapModel,n=e.option,i=n.selectedMode;if(i){var r=T(n.selected),o=e.getSelectedMapKey(t);"single"===i||!0===i?(r[o]=!0,E(r,(function(t,e){r[e]=e===o}))):r[o]=!r[o],this.api.dispatchAction({type:"selectDataRange",from:this.uid,visualMapId:this.visualMapModel.id,selected:r})}},e.type="visualMap.piecewise",e}(cF);function zF(t){t.registerComponentModel(OF),t.registerComponentView(EF),LF(t)}var VF={label:{enabled:!0},decal:{show:!1}},BF=So(),FF={};function GF(t,e){var n=t.getModel("aria");if(n.get("enabled")){var i=T(VF);C(i.label,t.getLocaleModel().get("aria"),!1),C(n.option,i,!1),function(){if(n.getModel("decal").get("show")){var e=ft();t.eachSeries((function(t){if(!t.isColorBySeries()){var n=e.get(t.type);n||(n={},e.set(t.type,n)),BF(t).scope=n}})),t.eachRawSeries((function(e){if(!t.isSeriesFiltered(e))if(U(e.enableAriaDecal))e.enableAriaDecal();else{var n=e.getData();if(e.isColorBySeries()){var i=ed(e.ecModel,e.name,FF,t.getSeriesCount()),r=n.getVisual("decal");n.setVisual("decal",u(r,i))}else{var o=e.getRawData(),a={},s=BF(e).scope;n.each((function(t){var e=n.getRawIndex(t);a[e]=t}));var l=o.count();o.each((function(t){var i=a[t],r=o.getName(t)||t+"",h=ed(e.ecModel,r,s,l),c=n.getItemVisual(i,"decal");n.setItemVisual(i,"decal",u(c,h))}))}}function u(t,e){var n=t?A(A({},e),t):e;return n.dirty=!0,n}}))}}(),function(){var i=t.getLocaleModel().get("aria"),o=n.getModel("label");if(o.option=k(o.option,i),!o.get("enabled"))return;var a=e.getZr().dom;if(o.get("description"))return void a.setAttribute("aria-label",o.get("description"));var s,l=t.getSeriesCount(),u=o.get(["data","maxCount"])||10,h=o.get(["series","maxCount"])||10,c=Math.min(l,h);if(l<1)return;var p=function(){var e=t.get("title");e&&e.length&&(e=e[0]);return e&&e.text}();if(p){var d=o.get(["general","withTitle"]);s=r(d,{title:p})}else s=o.get(["general","withoutTitle"]);var f=[],g=l>1?o.get(["series","multiple","prefix"]):o.get(["series","single","prefix"]);s+=r(g,{seriesCount:l}),t.eachSeries((function(e,n){if(n<c){var i=void 0,a=e.get("name")?"withName":"withoutName";i=r(i=l>1?o.get(["series","multiple",a]):o.get(["series","single",a]),{seriesId:e.seriesIndex,seriesName:e.get("name"),seriesType:(x=e.subType,t.getLocaleModel().get(["series","typeNames"])[x]||"自定义图")});var s=e.getData();if(s.count()>u)i+=r(o.get(["data","partialData"]),{displayCnt:u});else i+=o.get(["data","allData"]);for(var h=o.get(["data","separator","middle"]),p=o.get(["data","separator","end"]),d=[],g=0;g<s.count();g++)if(g<u){var y=s.getName(g),v=s.getValues(g),m=o.get(["data",y?"withName":"withoutName"]);d.push(r(m,{name:y,value:v.join(h)}))}i+=d.join(h)+p,f.push(i)}var x}));var y=o.getModel(["series","multiple","separator"]),v=y.get("middle"),m=y.get("end");s+=f.join(v)+m,a.setAttribute("aria-label",s)}()}function r(t,e){if(!X(t))return t;var n=t;return E(e,(function(t,e){n=n.replace(new RegExp("\\{\\s*"+e+"\\s*\\}","g"),t)})),n}}function WF(t){if(t&&t.aria){var e=t.aria;null!=e.show&&(e.enabled=e.show),e.label=e.label||{},E(["description","general","series","data"],(function(t){null!=e[t]&&(e.label[t]=e[t])}))}}var HF={value:"eq","<":"lt","<=":"lte",">":"gt",">=":"gte","=":"eq","!=":"ne","<>":"ne"},YF=function(){function t(t){if(null==(this._condVal=X(t)?new RegExp(t):et(t)?t:null)){var e="";0,ao(e)}}return t.prototype.evaluate=function(t){var e=typeof t;return X(e)?this._condVal.test(t):!!j(e)&&this._condVal.test(t+"")},t}(),UF=function(){function t(){}return t.prototype.evaluate=function(){return this.value},t}(),XF=function(){function t(){}return t.prototype.evaluate=function(){for(var t=this.children,e=0;e<t.length;e++)if(!t[e].evaluate())return!1;return!0},t}(),ZF=function(){function t(){}return t.prototype.evaluate=function(){for(var t=this.children,e=0;e<t.length;e++)if(t[e].evaluate())return!0;return!1},t}(),jF=function(){function t(){}return t.prototype.evaluate=function(){return!this.child.evaluate()},t}(),qF=function(){function t(){}return t.prototype.evaluate=function(){for(var t=!!this.valueParser,e=(0,this.getValue)(this.valueGetterParam),n=t?this.valueParser(e):null,i=0;i<this.subCondList.length;i++)if(!this.subCondList[i].evaluate(t?n:e))return!1;return!0},t}();function KF(t,e){if(!0===t||!1===t){var n=new UF;return n.value=t,n}var i="";return JF(t)||ao(i),t.and?$F("and",t,e):t.or?$F("or",t,e):t.not?function(t,e){var n=t.not,i="";0;JF(n)||ao(i);var r=new jF;r.child=KF(n,e),r.child||ao(i);return r}(t,e):function(t,e){for(var n="",i=e.prepareGetValue(t),r=[],o=G(t),a=t.parser,s=a?gf(a):null,l=0;l<o.length;l++){var u=o[l];if("parser"!==u&&!e.valueGetterAttrMap.get(u)){var h=mt(HF,u)?HF[u]:u,c=t[u],p=s?s(c):c,d=_f(h,p)||"reg"===h&&new YF(p);d||ao(n),r.push(d)}}r.length||ao(n);var f=new qF;return f.valueGetterParam=i,f.valueParser=s,f.getValue=e.getValue,f.subCondList=r,f}(t,e)}function $F(t,e,n){var i=e[t],r="";Y(i)||ao(r),i.length||ao(r);var o="and"===t?new XF:new ZF;return o.children=z(i,(function(t){return KF(t,n)})),o.children.length||ao(r),o}function JF(t){return q(t)&&!N(t)}var QF=function(){function t(t,e){this._cond=KF(t,e)}return t.prototype.evaluate=function(){return this._cond.evaluate()},t}();var tG={type:"echarts:filter",transform:function(t){for(var e,n,i,r=t.upstream,o=(n=t.config,i={valueGetterAttrMap:ft({dimension:!0}),prepareGetValue:function(t){var e="",n=t.dimension;mt(t,"dimension")||ao(e);var i=r.getDimensionInfo(n);return i||ao(e),{dimIdx:i.index}},getValue:function(t){return r.retrieveValueFromItem(e,t.dimIdx)}},new QF(n,i)),a=[],s=0,l=r.count();s<l;s++)e=r.getRawDataItem(s),o.evaluate()&&a.push(e);return{data:a}}};var eG={type:"echarts:sort",transform:function(t){var e=t.upstream,n=t.config,i="",r=ho(n);r.length||ao(i);var o=[];E(r,(function(t){var n=t.dimension,r=t.order,a=t.parser,s=t.incomparable;if(null==n&&ao(i),"asc"!==r&&"desc"!==r&&ao(i),s&&"min"!==s&&"max"!==s){var l="";0,ao(l)}if("asc"!==r&&"desc"!==r){var u="";0,ao(u)}var h=e.getDimensionInfo(n);h||ao(i);var c=a?gf(a):null;a&&!c&&ao(i),o.push({dimIdx:h.index,parser:c,comparator:new mf(r,s)})}));var a=e.sourceFormat;a!==Pp&&a!==Op&&ao(i);for(var s=[],l=0,u=e.count();l<u;l++)s.push(e.getRawDataItem(l));return s.sort((function(t,n){for(var i=0;i<o.length;i++){var r=o[i],a=e.retrieveValueFromItem(t,r.dimIdx),s=e.retrieveValueFromItem(n,r.dimIdx);r.parser&&(a=r.parser(a),s=r.parser(s));var l=r.comparator.evaluate(a,s);if(0!==l)return l}return 0})),{data:s}}};var nG=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="dataset",e}return n(e,t),e.prototype.init=function(e,n,i){t.prototype.init.call(this,e,n,i),this._sourceManager=new Bf(this),Ff(this)},e.prototype.mergeOption=function(e,n){t.prototype.mergeOption.call(this,e,n),Ff(this)},e.prototype.optionUpdated=function(){this._sourceManager.dirty()},e.prototype.getSourceManager=function(){return this._sourceManager},e.type="dataset",e.defaultOption={seriesLayoutBy:zp},e}(Tp),iG=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.type="dataset",e}return n(e,t),e.type="dataset",e}(gg);var rG=qa.CMD;function oG(t,e){return Math.abs(t-e)<1e-5}function aG(t){var e,n,i,r,o,a=t.data,s=t.len(),l=[],u=0,h=0,c=0,p=0;function d(t,n){e&&e.length>2&&l.push(e),e=[t,n]}function f(t,n,i,r){oG(t,i)&&oG(n,r)||e.push(t,n,i,r,i,r)}function g(t,n,i,r,o,a){var s=Math.abs(n-t),l=4*Math.tan(s/4)/3,u=n<t?-1:1,h=Math.cos(t),c=Math.sin(t),p=Math.cos(n),d=Math.sin(n),f=h*o+i,g=c*a+r,y=p*o+i,v=d*a+r,m=o*l*u,x=a*l*u;e.push(f-m*c,g+x*h,y+m*d,v-x*p,y,v)}for(var y=0;y<s;){var v=a[y++],m=1===y;switch(m&&(c=u=a[y],p=h=a[y+1],v!==rG.L&&v!==rG.C&&v!==rG.Q||(e=[c,p])),v){case rG.M:u=c=a[y++],h=p=a[y++],d(c,p);break;case rG.L:f(u,h,n=a[y++],i=a[y++]),u=n,h=i;break;case rG.C:e.push(a[y++],a[y++],a[y++],a[y++],u=a[y++],h=a[y++]);break;case rG.Q:n=a[y++],i=a[y++],r=a[y++],o=a[y++],e.push(u+2/3*(n-u),h+2/3*(i-h),r+2/3*(n-r),o+2/3*(i-o),r,o),u=r,h=o;break;case rG.A:var x=a[y++],_=a[y++],b=a[y++],w=a[y++],S=a[y++],M=a[y++]+S;y+=1;var I=!a[y++];n=Math.cos(S)*b+x,i=Math.sin(S)*w+_,m?d(c=n,p=i):f(u,h,n,i),u=Math.cos(M)*b+x,h=Math.sin(M)*w+_;for(var T=(I?-1:1)*Math.PI/2,C=S;I?C>M:C<M;C+=T){g(C,I?Math.max(C+T,M):Math.min(C+T,M),x,_,b,w)}break;case rG.R:c=u=a[y++],p=h=a[y++],n=c+a[y++],i=p+a[y++],d(n,p),f(n,p,n,i),f(n,i,c,i),f(c,i,c,p),f(c,p,n,p);break;case rG.Z:e&&f(u,h,c,p),u=c,h=p}}return e&&e.length>2&&l.push(e),l}function sG(t,e,n,i,r,o,a,s,l,u){if(oG(t,n)&&oG(e,i)&&oG(r,a)&&oG(o,s))l.push(a,s);else{var h=2/u,c=h*h,p=a-t,d=s-e,f=Math.sqrt(p*p+d*d);p/=f,d/=f;var g=n-t,y=i-e,v=r-a,m=o-s,x=g*g+y*y,_=v*v+m*m;if(x<c&&_<c)l.push(a,s);else{var b=p*g+d*y,w=-p*v-d*m;if(x-b*b<c&&b>=0&&_-w*w<c&&w>=0)l.push(a,s);else{var S=[],M=[];Ze(t,n,r,a,.5,S),Ze(e,i,o,s,.5,M),sG(S[0],M[0],S[1],M[1],S[2],M[2],S[3],M[3],l,u),sG(S[4],M[4],S[5],M[5],S[6],M[6],S[7],M[7],l,u)}}}}function lG(t,e,n){var i=t[e],r=t[1-e],o=Math.abs(i/r),a=Math.ceil(Math.sqrt(o*n)),s=Math.floor(n/a);0===s&&(s=1,a=n);for(var l=[],u=0;u<a;u++)l.push(s);var h=n-a*s;if(h>0)for(u=0;u<h;u++)l[u%a]+=1;return l}function uG(t,e,n){for(var i=t.r0,r=t.r,o=t.startAngle,a=t.endAngle,s=Math.abs(a-o),l=s*r,u=r-i,h=l>Math.abs(u),c=lG([l,u],h?0:1,e),p=(h?s:u)/c.length,d=0;d<c.length;d++)for(var f=(h?u:s)/c[d],g=0;g<c[d];g++){var y={};h?(y.startAngle=o+p*d,y.endAngle=o+p*(d+1),y.r0=i+f*g,y.r=i+f*(g+1)):(y.startAngle=o+f*g,y.endAngle=o+f*(g+1),y.r0=i+p*d,y.r=i+p*(d+1)),y.clockwise=t.clockwise,y.cx=t.cx,y.cy=t.cy,n.push(y)}}function hG(t,e,n,i){return t*i-n*e}function cG(t,e,n,i,r,o,a,s){var l=n-t,u=i-e,h=a-r,c=s-o,p=hG(h,c,l,u);if(Math.abs(p)<1e-6)return null;var d=hG(t-r,e-o,h,c)/p;return d<0||d>1?null:new Ji(d*l+t,d*u+e)}function pG(t,e,n){var i=new Ji;Ji.sub(i,n,e),i.normalize();var r=new Ji;return Ji.sub(r,t,e),r.dot(i)}function dG(t,e){var n=t[t.length-1];n&&n[0]===e[0]&&n[1]===e[1]||t.push(e)}function fG(t){var e=t.points,n=[],i=[];Ma(e,n,i);var r=new sr(n[0],n[1],i[0]-n[0],i[1]-n[1]),o=r.width,a=r.height,s=r.x,l=r.y,u=new Ji,h=new Ji;return o>a?(u.x=h.x=s+o/2,u.y=l,h.y=l+a):(u.y=h.y=l+a/2,u.x=s,h.x=s+o),function(t,e,n){for(var i=t.length,r=[],o=0;o<i;o++){var a=t[o],s=t[(o+1)%i],l=cG(a[0],a[1],s[0],s[1],e.x,e.y,n.x,n.y);l&&r.push({projPt:pG(l,e,n),pt:l,idx:o})}if(r.length<2)return[{points:t},{points:t}];r.sort((function(t,e){return t.projPt-e.projPt}));var u=r[0],h=r[r.length-1];if(h.idx<u.idx){var c=u;u=h,h=c}var p=[u.pt.x,u.pt.y],d=[h.pt.x,h.pt.y],f=[p],g=[d];for(o=u.idx+1;o<=h.idx;o++)dG(f,t[o].slice());for(dG(f,d),dG(f,p),o=h.idx+1;o<=u.idx+i;o++)dG(g,t[o%i].slice());return dG(g,p),dG(g,d),[{points:f},{points:g}]}(e,u,h)}function gG(t,e,n,i){if(1===n)i.push(e);else{var r=Math.floor(n/2),o=t(e);gG(t,o[0],r,i),gG(t,o[1],n-r,i)}return i}function yG(t,e){e.setStyle(t.style),e.z=t.z,e.z2=t.z2,e.zlevel=t.zlevel}function vG(t,e){var n,i=[],r=t.shape;switch(t.type){case"rect":!function(t,e,n){for(var i=t.width,r=t.height,o=i>r,a=lG([i,r],o?0:1,e),s=o?"width":"height",l=o?"height":"width",u=o?"x":"y",h=o?"y":"x",c=t[s]/a.length,p=0;p<a.length;p++)for(var d=t[l]/a[p],f=0;f<a[p];f++){var g={};g[u]=p*c,g[h]=f*d,g[s]=c,g[l]=d,g.x+=t.x,g.y+=t.y,n.push(g)}}(r,e,i),n=Cs;break;case"sector":uG(r,e,i),n=Cu;break;case"circle":uG({r0:0,r:r.r,startAngle:0,endAngle:2*Math.PI,cx:r.cx,cy:r.cy},e,i),n=Cu;break;default:var o=t.getComputedTransform(),a=o?Math.sqrt(Math.max(o[0]*o[0]+o[1]*o[1],o[2]*o[2]+o[3]*o[3])):1,s=z(function(t,e){var n=aG(t),i=[];e=e||1;for(var r=0;r<n.length;r++){var o=n[r],a=[],s=o[0],l=o[1];a.push(s,l);for(var u=2;u<o.length;){var h=o[u++],c=o[u++],p=o[u++],d=o[u++],f=o[u++],g=o[u++];sG(s,l,h,c,p,d,f,g,a,e),s=f,l=g}i.push(a)}return i}(t.getUpdatedPathProxy(),a),(function(t){return function(t){for(var e=[],n=0;n<t.length;)e.push([t[n++],t[n++]]);return e}(t)})),l=s.length;if(0===l)gG(fG,{points:s[0]},e,i);else if(l===e)for(var u=0;u<l;u++)i.push({points:s[u]});else{var h=0,c=z(s,(function(t){var e=[],n=[];Ma(t,e,n);var i=(n[1]-e[1])*(n[0]-e[0]);return h+=i,{poly:t,area:i}}));c.sort((function(t,e){return e.area-t.area}));var p=e;for(u=0;u<l;u++){var d=c[u];if(p<=0)break;var f=u===l-1?p:Math.ceil(d.area/h*e);f<0||(gG(fG,{points:d.poly},f,i),p-=f)}}n=Pu}if(!n)return function(t,e){for(var n=[],i=0;i<e;i++)n.push(lu(t));return n}(t,e);var g=[];for(u=0;u<i.length;u++){var y=new n;y.setShape(i[u]),yG(t,y),g.push(y)}return g}function mG(t,e){var n=t.length,i=e.length;if(n===i)return[t,e];for(var r=[],o=[],a=n<i?t:e,s=Math.min(n,i),l=Math.abs(i-n)/6,u=(s-2)/6,h=Math.ceil(l/u)+1,c=[a[0],a[1]],p=l,d=2;d<s;){var f=a[d-2],g=a[d-1],y=a[d++],v=a[d++],m=a[d++],x=a[d++],_=a[d++],b=a[d++];if(p<=0)c.push(y,v,m,x,_,b);else{for(var w=Math.min(p,h-1)+1,S=1;S<=w;S++){var M=S/w;Ze(f,y,m,_,M,r),Ze(g,v,x,b,M,o),f=r[3],g=o[3],c.push(r[1],o[1],r[2],o[2],f,g),y=r[5],v=o[5],m=r[6],x=o[6]}p-=w-1}}return a===t?[c,e]:[t,c]}function xG(t,e){for(var n=t.length,i=t[n-2],r=t[n-1],o=[],a=0;a<e.length;)o[a++]=i,o[a++]=r;return o}function _G(t){for(var e=0,n=0,i=0,r=t.length,o=0,a=r-2;o<r;a=o,o+=2){var s=t[a],l=t[a+1],u=t[o],h=t[o+1],c=s*h-u*l;e+=c,n+=(s+u)*c,i+=(l+h)*c}return 0===e?[t[0]||0,t[1]||0]:[n/e/3,i/e/3,e]}function bG(t,e,n,i){for(var r=(t.length-2)/6,o=1/0,a=0,s=t.length,l=s-2,u=0;u<r;u++){for(var h=6*u,c=0,p=0;p<s;p+=2){var d=0===p?h:(h+p-2)%l+2,f=t[d]-n[0],g=t[d+1]-n[1],y=e[p]-i[0]-f,v=e[p+1]-i[1]-g;c+=y*y+v*v}c<o&&(o=c,a=u)}return a}function wG(t){for(var e=[],n=t.length,i=0;i<n;i+=2)e[i]=t[n-i-2],e[i+1]=t[n-i-1];return e}function SG(t){return t.__isCombineMorphing}var MG="__mOriginal_";function IG(t,e,n){var i=MG+e,r=t[i]||t[e];t[i]||(t[i]=t[e]);var o=n.replace,a=n.after,s=n.before;t[e]=function(){var t,e=arguments;return s&&s.apply(this,e),t=o?o.apply(this,e):r.apply(this,e),a&&a.apply(this,e),t}}function TG(t,e){var n=MG+e;t[n]&&(t[e]=t[n],t[n]=null)}function CG(t,e){for(var n=0;n<t.length;n++)for(var i=t[n],r=0;r<i.length;){var o=i[r],a=i[r+1];i[r++]=e[0]*o+e[2]*a+e[4],i[r++]=e[1]*o+e[3]*a+e[5]}}function DG(t,e){var n=t.getUpdatedPathProxy(),i=e.getUpdatedPathProxy(),r=function(t,e){for(var n,i,r,o=[],a=[],s=0;s<Math.max(t.length,e.length);s++){var l=t[s],u=e[s],h=void 0,c=void 0;l?u?(i=h=(n=mG(l,u))[0],r=c=n[1]):(c=xG(r||l,l),h=l):(h=xG(i||u,u),c=u),o.push(h),a.push(c)}return[o,a]}(aG(n),aG(i)),o=r[0],a=r[1],s=t.getComputedTransform(),l=e.getComputedTransform();s&&CG(o,s),l&&CG(a,l),IG(e,"updateTransform",{replace:function(){this.transform=null}}),e.transform=null;var u=function(t,e,n,i){for(var r,o=[],a=0;a<t.length;a++){var s=t[a],l=e[a],u=_G(s),h=_G(l);null==r&&(r=u[2]<0!=h[2]<0);var c=[],p=[],d=0,f=1/0,g=[],y=s.length;r&&(s=wG(s));for(var v=6*bG(s,l,u,h),m=y-2,x=0;x<m;x+=2){var _=(v+x)%m+2;c[x+2]=s[_]-u[0],c[x+3]=s[_+1]-u[1]}if(c[0]=s[v]-u[0],c[1]=s[v+1]-u[1],n>0)for(var b=i/n,w=-i/2;w<=i/2;w+=b){var S=Math.sin(w),M=Math.cos(w),I=0;for(x=0;x<s.length;x+=2){var T=c[x],C=c[x+1],D=l[x]-h[0],A=l[x+1]-h[1],k=D*M-A*S,L=D*S+A*M;g[x]=k,g[x+1]=L;var P=k-T,O=L-C;I+=P*P+O*O}if(I<f){f=I,d=w;for(var R=0;R<g.length;R++)p[R]=g[R]}}else for(var N=0;N<y;N+=2)p[N]=l[N]-h[0],p[N+1]=l[N+1]-h[1];o.push({from:c,to:p,fromCp:u,toCp:h,rotation:-d})}return o}(o,a,10,Math.PI),h=[];IG(e,"buildPath",{replace:function(t){for(var n=e.__morphT,i=1-n,r=[],o=0;o<u.length;o++){var a=u[o],s=a.from,l=a.to,c=a.rotation*n,p=a.fromCp,d=a.toCp,f=Math.sin(c),g=Math.cos(c);Bt(r,p,d,n);for(var y=0;y<s.length;y+=2){var v=s[y],m=s[y+1],x=v*i+(S=l[y])*n,_=m*i+(M=l[y+1])*n;h[y]=x*g-_*f+r[0],h[y+1]=x*f+_*g+r[1]}var b=h[0],w=h[1];t.moveTo(b,w);for(y=2;y<s.length;){var S=h[y++],M=h[y++],I=h[y++],T=h[y++],C=h[y++],D=h[y++];b===S&&w===M&&I===C&&T===D?t.lineTo(C,D):t.bezierCurveTo(S,M,I,T,C,D),b=C,w=D}}}})}function AG(t,e,n){if(!t||!e)return e;var i=n.done,r=n.during;return DG(t,e),e.__morphT=0,e.animateTo({__morphT:1},k({during:function(t){e.dirtyShape(),r&&r(t)},done:function(){TG(e,"buildPath"),TG(e,"updateTransform"),e.__morphT=-1,e.createPathProxy(),e.dirtyShape(),i&&i()}},n)),e}function kG(t,e,n,i,r,o){t=r===n?0:Math.round(32767*(t-n)/(r-n)),e=o===i?0:Math.round(32767*(e-i)/(o-i));for(var a,s=0,l=32768;l>0;l/=2){var u=0,h=0;(t&l)>0&&(u=1),(e&l)>0&&(h=1),s+=l*l*(3*u^h),0===h&&(1===u&&(t=l-1-t,e=l-1-e),a=t,t=e,e=a)}return s}function LG(t){var e=1/0,n=1/0,i=-1/0,r=-1/0,o=z(t,(function(t){var o=t.getBoundingRect(),a=t.getComputedTransform(),s=o.x+o.width/2+(a?a[4]:0),l=o.y+o.height/2+(a?a[5]:0);return e=Math.min(s,e),n=Math.min(l,n),i=Math.max(s,i),r=Math.max(l,r),[s,l]}));return z(o,(function(o,a){return{cp:o,z:kG(o[0],o[1],e,n,i,r),path:t[a]}})).sort((function(t,e){return t.z-e.z})).map((function(t){return t.path}))}function PG(t){return vG(t.path,t.count)}function OG(t){return Y(t[0])}function RG(t,e){for(var n=[],i=t.length,r=0;r<i;r++)n.push({one:t[r],many:[]});for(r=0;r<e.length;r++){var o=e[r].length,a=void 0;for(a=0;a<o;a++)n[a%i].many.push(e[r][a])}var s=0;for(r=i-1;r>=0;r--)if(!n[r].many.length){var l=n[s].many;if(l.length<=1){if(!s)return n;s=0}o=l.length;var u=Math.ceil(o/2);n[r].many=l.slice(u,o),n[s].many=l.slice(0,u),s++}return n}var NG={clone:function(t){for(var e=[],n=1-Math.pow(1-t.path.style.opacity,1/t.count),i=0;i<t.count;i++){var r=lu(t.path);r.setStyle("opacity",n),e.push(r)}return e},split:null};function EG(t,e,n,i,r,o){if(t.length&&e.length){var a=nh("update",i,r);if(a&&a.duration>0){var s,l,u=i.getModel("universalTransition").get("delay"),h=Object.assign({setToFinal:!0},a);OG(t)&&(s=t,l=e),OG(e)&&(s=e,l=t);for(var c=s?s===t:t.length>e.length,p=s?RG(l,s):RG(c?e:t,[c?t:e]),d=0,f=0;f<p.length;f++)d+=p[f].many.length;var g=0;for(f=0;f<p.length;f++)y(p[f],c,g,d),g+=p[f].many.length}}function y(t,e,i,r,a){var s=t.many,l=t.one;if(1!==s.length||a)for(var c=k({dividePath:NG[n],individualDelay:u&&function(t,e,n,o){return u(t+i,r)}},h),p=e?function(t,e,n){var i=[];!function t(e){for(var n=0;n<e.length;n++){var r=e[n];SG(r)?t(r.childrenRef()):r instanceof gs&&i.push(r)}}(t);var r=i.length;if(!r)return{fromIndividuals:[],toIndividuals:[],count:0};var o=(n.dividePath||PG)({path:e,count:r});if(o.length!==r)return console.error("Invalid morphing: unmatched splitted path"),{fromIndividuals:[],toIndividuals:[],count:0};i=LG(i),o=LG(o);for(var a=n.done,s=n.during,l=n.individualDelay,u=new qi,h=0;h<r;h++){var c=i[h],p=o[h];p.parent=e,p.copyTransform(u),l||DG(c,p)}function d(t){for(var e=0;e<o.length;e++)o[e].addSelfToZr(t)}function f(){e.__isCombineMorphing=!1,e.__morphT=-1,e.childrenRef=null,TG(e,"addSelfToZr"),TG(e,"removeSelfFromZr")}e.__isCombineMorphing=!0,e.childrenRef=function(){return o},IG(e,"addSelfToZr",{after:function(t){d(t)}}),IG(e,"removeSelfFromZr",{after:function(t){for(var e=0;e<o.length;e++)o[e].removeSelfFromZr(t)}});var g=o.length;if(l){var y=g,v=function(){0==--y&&(f(),a&&a())};for(h=0;h<g;h++){var m=l?k({delay:(n.delay||0)+l(h,g,i[h],o[h]),done:v},n):n;AG(i[h],o[h],m)}}else e.__morphT=0,e.animateTo({__morphT:1},k({during:function(t){for(var n=0;n<g;n++){var i=o[n];i.__morphT=e.__morphT,i.dirtyShape()}s&&s(t)},done:function(){f();for(var e=0;e<t.length;e++)TG(t[e],"updateTransform");a&&a()}},n));return e.__zr&&d(e.__zr),{fromIndividuals:i,toIndividuals:o,count:g}}(s,l,c):function(t,e,n){var i=e.length,r=[],o=n.dividePath||PG;if(SG(t)){!function t(e){for(var n=0;n<e.length;n++){var i=e[n];SG(i)?t(i.childrenRef()):i instanceof gs&&r.push(i)}}(t.childrenRef());var a=r.length;if(a<i)for(var s=0,l=a;l<i;l++)r.push(lu(r[s++%a]));r.length=i}else{r=o({path:t,count:i});var u=t.getComputedTransform();for(l=0;l<r.length;l++)r[l].setLocalTransform(u);if(r.length!==i)return console.error("Invalid morphing: unmatched splitted path"),{fromIndividuals:[],toIndividuals:[],count:0}}r=LG(r),e=LG(e);var h=n.individualDelay;for(l=0;l<i;l++){var c=h?k({delay:(n.delay||0)+h(l,i,r[l],e[l])},n):n;AG(r[l],e[l],c)}return{fromIndividuals:r,toIndividuals:e,count:e.length}}(l,s,c),d=p.fromIndividuals,f=p.toIndividuals,g=d.length,v=0;v<g;v++){m=u?k({delay:u(v,g)},h):h;o(d[v],f[v],e?s[v]:t.one,e?t.one:s[v],m)}else{var m,x=e?s[0]:l,_=e?l:s[0];if(SG(x))y({many:[x],one:_},!0,i,r,!0);else AG(x,_,m=u?k({delay:u(i,r)},h):h),o(x,_,x,_,m)}}}function zG(t){if(!t)return[];if(Y(t)){for(var e=[],n=0;n<t.length;n++)e.push(zG(t[n]));return e}var i=[];return t.traverse((function(t){t instanceof gs&&!t.disableMorphing&&!t.invisible&&!t.ignore&&i.push(t)})),i}var VG=So();function BG(t){var e=[];return E(t,(function(t){var n=t.data;if(!(n.count()>1e4))for(var i=n.getIndices(),r=function(t){for(var e=t.dimensions,n=0;n<e.length;n++){var i=t.getDimensionInfo(e[n]);if(i&&0===i.otherDims.itemGroupId)return e[n]}}(n),o=0;o<i.length;o++)e.push({data:n,dim:t.dim||r,divide:t.divide,dataIndex:o})})),e}function FG(t,e,n){t.traverse((function(t){t instanceof gs&&oh(t,{style:{opacity:0}},e,{dataIndex:n,isFrom:!0})}))}function GG(t){if(t.parent){var e=t.getComputedTransform();t.setLocalTransform(e),t.parent.remove(t)}}function WG(t){t.stopAnimation(),t.isGroup&&t.traverse((function(t){t.stopAnimation()}))}function HG(t,e,n){var i=nh("update",n,e);i&&t.traverse((function(t){if(t instanceof da){var e=function(t){return eh(t).oldStyle}(t);e&&t.animateFrom({style:e},i)}}))}function YG(t,e,n){var i=BG(t),r=BG(e);function o(t,e,n,i,r){(n||t)&&e.animateFrom({style:n&&n!==t?A(A({},n.style),t.style):t.style},r)}function a(t){for(var e=0;e<t.length;e++)if(t[e].dim)return t[e].dim}var s=a(i),l=a(r),u=!1;function h(t,e){return function(n){var i=n.data,r=n.dataIndex;if(e)return i.getId(r);var o=i.hostModel&&i.hostModel.get("dataGroupId"),a=t?s||l:l||s,u=a&&i.getDimensionInfo(a),h=u&&u.ordinalMeta;if(u){var c=i.get(u.name,r);return h&&h.categories[c]||c+""}var p=i.getRawDataItem(r);return p&&p.groupId?p.groupId+"":o||i.getId(r)}}var c=function(t,e){var n=t.length;if(n!==e.length)return!1;for(var i=0;i<n;i++){var r=t[i],o=e[i];if(r.data.getId(r.dataIndex)!==o.data.getId(o.dataIndex))return!1}return!0}(i,r),p={};if(!c)for(var d=0;d<r.length;d++){var f=r[d],g=f.data.getItemGraphicEl(f.dataIndex);g&&(p[g.id]=!0)}function y(t,e){var n=i[e],a=r[t],s=a.data.hostModel,l=n.data.getItemGraphicEl(n.dataIndex),h=a.data.getItemGraphicEl(a.dataIndex);l!==h?l&&p[l.id]||h&&(WG(h),l?(WG(l),GG(l),u=!0,EG(zG(l),zG(h),a.divide,s,t,o)):FG(h,s,t)):h&&HG(h,a.dataIndex,s)}new Im(i,r,h(!0,c),h(!1,c),null,"multiple").update(y).updateManyToOne((function(t,e){var n=r[t],a=n.data,s=a.hostModel,l=a.getItemGraphicEl(n.dataIndex),h=B(z(e,(function(t){return i[t].data.getItemGraphicEl(i[t].dataIndex)})),(function(t){return t&&t!==l&&!p[t.id]}));l&&(WG(l),h.length?(E(h,(function(t){WG(t),GG(t)})),u=!0,EG(zG(h),zG(l),n.divide,s,t,o)):FG(l,s,n.dataIndex))})).updateOneToMany((function(t,e){var n=i[e],a=n.data.getItemGraphicEl(n.dataIndex);if(!a||!p[a.id]){var s=B(z(t,(function(t){return r[t].data.getItemGraphicEl(r[t].dataIndex)})),(function(t){return t&&t!==a})),l=r[t[0]].data.hostModel;s.length&&(E(s,(function(t){return WG(t)})),a?(WG(a),GG(a),u=!0,EG(zG(a),zG(s),n.divide,l,t[0],o)):E(s,(function(e){return FG(e,l,t[0])})))}})).updateManyToMany((function(t,e){new Im(e,t,(function(t){return i[t].data.getId(i[t].dataIndex)}),(function(t){return r[t].data.getId(r[t].dataIndex)})).update((function(n,i){y(t[n],e[i])})).execute()})).execute(),u&&E(e,(function(t){var e=t.data.hostModel,i=e&&n.getViewOfSeriesModel(e),r=nh("update",e,0);i&&e.isAnimationEnabled()&&r&&r.duration>0&&i.group.traverse((function(t){t instanceof gs&&!t.animators.length&&t.animateFrom({style:{opacity:0}},r)}))}))}function UG(t){var e=t.getModel("universalTransition").get("seriesKey");return e||t.id}function XG(t){return Y(t)?t.sort().join(","):t}function ZG(t){if(t.hostModel)return t.hostModel.getModel("universalTransition").get("divideShape")}function jG(t,e){for(var n=0;n<t.length;n++){if(null!=e.seriesIndex&&e.seriesIndex===t[n].seriesIndex||null!=e.seriesId&&e.seriesId===t[n].id)return n}}wm([function(t){t.registerPainter("canvas",Fw)}]),wm([function(t){t.registerPainter("svg",Ow)}]),wm([function(t){t.registerChartView(_S),t.registerSeriesModel(Gw),t.registerLayout(bS("line",!0)),t.registerVisual({seriesType:"line",reset:function(t){var e=t.getData(),n=t.getModel("lineStyle").getLineStyle();n&&!n.stroke&&(n.stroke=e.getVisual("style").fill),e.setVisual("legendLineStyle",n)}}),t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC,MS("line"))},function(t){t.registerChartView(OS),t.registerSeriesModel(TS),t.registerLayout(t.PRIORITY.VISUAL.LAYOUT,H(kx,"bar")),t.registerLayout(t.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT,Lx("bar")),t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC,MS("bar")),t.registerAction({type:"changeAxisOrder",event:"changeAxisOrder",update:"update"},(function(t,e){var n=t.componentType||"series";e.eachComponent({mainType:n,query:t},(function(e){t.sortInfo&&e.axis.setCategorySortInfo(t.sortInfo)}))}))},function(t){t.registerChartView(lM),t.registerSeriesModel(cM),vy("pie",t.registerAction),t.registerLayout(H(QS,"pie")),t.registerProcessor(tM("pie")),t.registerProcessor(function(t){return{seriesType:t,reset:function(t,e){var n=t.getData();n.filterSelf((function(t){var e=n.mapDimension("value"),i=n.get(e,t);return!(j(i)&&!isNaN(i)&&i<0)}))}}}("pie"))},function(t){wm(pI),t.registerSeriesModel(pM),t.registerChartView(yM),t.registerLayout(bS("scatter"))},function(t){wm(TI),t.registerChartView(vI),t.registerSeriesModel(mI),t.registerLayout(dI),t.registerProcessor(tM("radar")),t.registerPreprocessor(yI)},function(t){wm(tC),t.registerChartView(ET),t.registerSeriesModel(zT),t.registerLayout(BT),t.registerProcessor(t.PRIORITY.PROCESSOR.STATISTIC,VT),vy("map",t.registerAction)},function(t){t.registerChartView(pC),t.registerSeriesModel(RC),t.registerLayout(EC),t.registerVisual(zC),function(t){t.registerAction({type:"treeExpandAndCollapse",event:"treeExpandAndCollapse",update:"update"},(function(t,e){e.eachComponent({mainType:"series",subType:"tree",query:t},(function(e){var n=t.dataIndex,i=e.getData().tree.getNodeByDataIndex(n);i.isExpand=!i.isExpand}))})),t.registerAction({type:"treeRoam",event:"treeRoam",update:"none"},(function(t,e,n){e.eachComponent({mainType:"series",subType:"tree",query:t},(function(e){var i=$T(e.coordinateSystem,t,void 0,n);e.setCenter&&e.setCenter(i.center),e.setZoom&&e.setZoom(i.zoom)}))}))}(t)},function(t){t.registerSeriesModel(FC),t.registerChartView(QC),t.registerVisual(yD),t.registerLayout(AD),function(t){for(var e=0;e<VC.length;e++)t.registerAction({type:VC[e],update:"updateView"},xt);t.registerAction({type:"treemapRootToNode",update:"updateView"},(function(t,e){e.eachComponent({mainType:"series",subType:"treemap",query:t},(function(e,n){var i=kC(t,["treemapZoomToNode","treemapRootToNode"],e);if(i){var r=e.getViewRoot();r&&(t.direction=PC(r,i.node)?"rollUp":"drillDown"),e.resetViewRoot(i.node)}}))}))}(t)},function(t){t.registerChartView(DA),t.registerSeriesModel(NA),t.registerProcessor(ND),t.registerVisual(ED),t.registerVisual(VD),t.registerLayout(jD),t.registerLayout(t.PRIORITY.VISUAL.POST_CHART_LAYOUT,eA),t.registerLayout(iA),t.registerCoordinateSystem("graphView",{dimensions:GT.dimensions,create:rA}),t.registerAction({type:"focusNodeAdjacency",event:"focusNodeAdjacency",update:"series:focusNodeAdjacency"},xt),t.registerAction({type:"unfocusNodeAdjacency",event:"unfocusNodeAdjacency",update:"series:unfocusNodeAdjacency"},xt),t.registerAction(EA,(function(t,e,n){e.eachComponent({mainType:"series",query:t},(function(e){var i=$T(e.coordinateSystem,t,void 0,n);e.setCenter&&e.setCenter(i.center),e.setZoom&&e.setZoom(i.zoom)}))}))},function(t){t.registerChartView(FA),t.registerSeriesModel(GA)},function(t){t.registerChartView(YA),t.registerSeriesModel(UA),t.registerLayout(XA),t.registerProcessor(tM("funnel"))},function(t){wm(mL),t.registerChartView(ZA),t.registerSeriesModel(JA),t.registerVisual(t.PRIORITY.VISUAL.BRUSH,ek)},function(t){t.registerChartView(bL),t.registerSeriesModel(wL),t.registerLayout(SL),t.registerVisual(NL),t.registerAction({type:"dragNode",event:"dragnode",update:"update"},(function(t,e){e.eachComponent({mainType:"series",subType:"sankey",query:t},(function(e){e.setNodePosition(t.dataIndex,[t.localX,t.localY])}))}))},function(t){t.registerSeriesModel(zL),t.registerChartView(VL),t.registerVisual(YL),t.registerLayout(XL),t.registerTransform(ZL)},function(t){t.registerChartView(qL),t.registerSeriesModel(aP),t.registerPreprocessor(sP),t.registerVisual(pP),t.registerLayout(dP)},function(t){t.registerChartView(vP),t.registerSeriesModel(mP),t.registerLayout(bS("effectScatter"))},function(t){t.registerChartView(TP),t.registerSeriesModel(kP),t.registerLayout(IP),t.registerVisual(PP)},function(t){t.registerChartView(NP),t.registerSeriesModel(EP)},function(t){t.registerChartView(FP),t.registerSeriesModel(rO),t.registerLayout(t.PRIORITY.VISUAL.LAYOUT,H(kx,"pictorialBar")),t.registerLayout(t.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT,Lx("pictorialBar"))},function(t){t.registerChartView(oO),t.registerSeriesModel(aO),t.registerLayout(sO),t.registerProcessor(tM("themeRiver"))},function(t){t.registerChartView(pO),t.registerSeriesModel(dO),t.registerLayout(H(yO,"sunburst")),t.registerProcessor(H(tM,"sunburst")),t.registerVisual(mO),function(t){t.registerAction({type:hO,update:"updateView"},(function(t,e){e.eachComponent({mainType:"series",subType:"sunburst",query:t},(function(e,n){var i=kC(t,[hO],e);if(i){var r=e.getViewRoot();r&&(t.direction=PC(r,i.node)?"rollUp":"drillDown"),e.resetViewRoot(i.node)}}))})),t.registerAction({type:cO,update:"none"},(function(t,e,n){t=A({},t),e.eachComponent({mainType:"series",subType:"sunburst",query:t},(function(e){var n=kC(t,[cO],e);n&&(t.dataIndex=n.node.dataIndex)})),n.dispatchAction(A(t,{type:"highlight"}))})),t.registerAction({type:"sunburstUnhighlight",update:"updateView"},(function(t,e,n){t=A({},t),n.dispatchAction(A(t,{type:"downplay"}))}))}(t)},function(t){t.registerChartView(uR),t.registerSeriesModel(wO)}]),wm((function(t){wm(pI),wm(uN)})),wm((function(t){wm(uN),tI.registerAxisPointerClass("PolarAxisPointer",hN),t.registerCoordinateSystem("polar",MN),t.registerComponentModel(pN),t.registerComponentView(FN),MM(t,"angle",fN,VN),MM(t,"radius",gN,BN),t.registerComponentView(AN),t.registerComponentView(ON),t.registerLayout(H(zN,"bar"))})),wm(tC),wm((function(t){wm(uN),tI.registerAxisPointerClass("SingleAxisPointer",tE),t.registerComponentView(rE),t.registerComponentView(YN),t.registerComponentModel(XN),MM(t,"single",XN,XN.defaultOption),t.registerCoordinateSystem("single",$N)})),wm(mL),wm((function(t){t.registerComponentModel(oE),t.registerComponentView(sE),t.registerCoordinateSystem("calendar",uE)})),wm((function(t){t.registerComponentModel(gE),t.registerComponentView(mE),t.registerPreprocessor((function(t){var e=t.graphic;Y(e)?e[0]&&e[0].elements?t.graphic=[t.graphic[0]]:t.graphic=[{elements:e}]:e&&!e.elements&&(t.graphic=[{elements:[e]}])}))})),wm((function(t){t.registerComponentModel(UE),t.registerComponentView(ZE),HE("saveAsImage",jE),HE("magicType",$E),HE("dataView",rz),HE("dataZoom",Tz),HE("restore",uz),wm(FE)})),wm((function(t){wm(uN),t.registerComponentModel(Az),t.registerComponentView(Xz),t.registerAction({type:"showTip",event:"showTip",update:"tooltip:manuallyShowTip"},xt),t.registerAction({type:"hideTip",event:"hideTip",update:"tooltip:manuallyHideTip"},xt)})),wm(uN),wm((function(t){t.registerComponentView(fV),t.registerComponentModel(gV),t.registerPreprocessor($z),t.registerVisual(t.PRIORITY.VISUAL.BRUSH,uV),t.registerAction({type:"brush",event:"brush",update:"updateVisual"},(function(t,e){e.eachComponent({mainType:"brush",query:t},(function(e){e.setAreas(t.areas)}))})),t.registerAction({type:"brushSelect",event:"brushSelected",update:"none"},xt),t.registerAction({type:"brushEnd",event:"brushEnd",update:"none"},xt),HE("brush",mV)})),wm((function(t){t.registerComponentModel(xV),t.registerComponentView(_V)})),wm((function(t){t.registerComponentModel(wV),t.registerComponentView(CV),t.registerSubTypeDefaulter("timeline",(function(){return"slider"})),function(t){t.registerAction({type:"timelineChange",event:"timelineChanged",update:"prepareAndUpdate"},(function(t,e,n){var i=e.getComponent("timeline");return i&&null!=t.currentIndex&&(i.setCurrentIndex(t.currentIndex),!i.get("loop",!0)&&i.isIndexMax()&&i.getPlayState()&&(i.setPlayState(!1),n.dispatchAction({type:"timelinePlayChange",playState:!1,from:t.from}))),e.resetOption("timeline",{replaceMerge:i.get("replaceMerge",!0)}),k({currentIndex:i.option.currentIndex},t)})),t.registerAction({type:"timelinePlayChange",event:"timelinePlayChanged",update:"update"},(function(t,e){var n=e.getComponent("timeline");n&&null!=t.playState&&n.setPlayState(t.playState)}))}(t),t.registerPreprocessor(kV)})),wm((function(t){t.registerComponentModel(zV),t.registerComponentView(qV),t.registerPreprocessor((function(t){OV(t.series,"markPoint")&&(t.markPoint=t.markPoint||{})}))})),wm((function(t){t.registerComponentModel(KV),t.registerComponentView(iB),t.registerPreprocessor((function(t){OV(t.series,"markLine")&&(t.markLine=t.markLine||{})}))})),wm((function(t){t.registerComponentModel(rB),t.registerComponentView(pB),t.registerPreprocessor((function(t){OV(t.series,"markArea")&&(t.markArea=t.markArea||{})}))})),wm((function(t){wm(MB),wm(LB)})),wm((function(t){wm(HB),wm(JB)})),wm(HB),wm(JB),wm((function(t){wm(PF),wm(zF)})),wm(PF),wm(zF),wm((function(t){t.registerPreprocessor(WF),t.registerVisual(t.PRIORITY.VISUAL.ARIA,GF)})),wm((function(t){t.registerTransform(tG),t.registerTransform(eG)})),wm((function(t){t.registerComponentModel(nG),t.registerComponentView(iG)})),wm((function(t){t.registerUpdateLifecycle("series:beforeupdate",(function(t,e,n){E(ho(n.seriesTransition),(function(t){E(ho(t.to),(function(t){for(var e=n.updatedSeries,i=0;i<e.length;i++)(null!=t.seriesIndex&&t.seriesIndex===e[i].seriesIndex||null!=t.seriesId&&t.seriesId===e[i].id)&&(e[i].__universalTransitionEnabled=!0)}))}))})),t.registerUpdateLifecycle("series:transition",(function(t,e,n){var i=VG(e);if(i.oldSeries&&n.updatedSeries&&n.optionChanged){var r=n.seriesTransition;if(r)E(ho(r),(function(t){!function(t,e,n,i){var r=[],o=[];E(ho(t.from),(function(t){var n=jG(e.oldSeries,t);n>=0&&r.push({data:e.oldData[n],divide:ZG(e.oldData[n]),dim:t.dimension})})),E(ho(t.to),(function(t){var e=jG(n.updatedSeries,t);if(e>=0){var i=n.updatedSeries[e].getData();o.push({data:i,divide:ZG(i),dim:t.dimension})}})),r.length>0&&o.length>0&&YG(r,o,i)}(t,i,n,e)}));else{var o=function(t,e){var n=ft(),i=ft(),r=ft();return E(t.oldSeries,(function(e,n){var o=t.oldData[n],a=UG(e),s=XG(a);i.set(s,o),Y(a)&&E(a,(function(t){r.set(t,{data:o,key:s})}))})),E(e.updatedSeries,(function(t){if(t.isUniversalTransitionEnabled()&&t.isAnimationEnabled()){var e=t.getData(),o=UG(t),a=XG(o),s=i.get(a);if(s)n.set(a,{oldSeries:[{divide:ZG(s),data:s}],newSeries:[{divide:ZG(e),data:e}]});else if(Y(o)){var l=[];E(o,(function(t){var e=i.get(t);e&&l.push({divide:ZG(e),data:e})})),l.length&&n.set(a,{oldSeries:l,newSeries:[{data:e,divide:ZG(e)}]})}else{var u=r.get(o);if(u){var h=n.get(u.key);h||(h={oldSeries:[{data:u.data,divide:ZG(u.data)}],newSeries:[]},n.set(u.key,h)),h.newSeries.push({data:e,divide:ZG(e)})}}}})),n}(i,n);E(o.keys(),(function(t){var n=o.get(t);YG(n.oldSeries,n.newSeries,e)}))}E(n.updatedSeries,(function(t){t.__universalTransitionEnabled&&(t.__universalTransitionEnabled=!1)}))}for(var a=t.getSeries(),s=i.oldSeries=[],l=i.oldData=[],u=0;u<a.length;u++){var h=a[u].getData();h.count()<1e4&&(s.push(a[u]),l.push(h))}}))})),wm((function(t){t.registerUpdateLifecycle("series:beforeupdate",(function(t,e,n){var i=Db(e).labelManager;i||(i=Db(e).labelManager=new Cb),i.clearLabels()})),t.registerUpdateLifecycle("series:layoutlabels",(function(t,e,n){var i=Db(e).labelManager;n.updatedSeries.forEach((function(t){i.addLabelsOfSeries(e.getViewOfSeriesModel(t))})),i.updateLayoutConfig(e),i.layout(e),i.processLabelsOverall()}))})),t.Axis=H_,t.ChartView=xg,t.ComponentModel=Tp,t.ComponentView=gg,t.List=qm,t.Model=dc,t.PRIORITY=fv,t.SeriesModel=sg,t.color=Pn,t.connect=function(t){if(Y(t)){var e=t;t=null,E(e,(function(e){null!=e.group&&(t=e.group)})),t=t||"g_"+tm++,E(e,(function(e){e.group=t}))}return Jv[t]=!0,t},t.dataTool={},t.dependencies={zrender:"5.3.2"},t.disConnect=nm,t.disconnect=im,t.dispose=function(t){X(t)?t=$v[t]:t instanceof Fv||(t=rm(t)),t instanceof Fv&&!t.isDisposed()&&t.dispose()},t.env=r,t.extendChartView=function(t){var e=xg.extend(t);return xg.registerClass(e),e},t.extendComponentModel=function(t){var e=Tp.extend(t);return Tp.registerClass(e),e},t.extendComponentView=function(t){var e=gg.extend(t);return gg.registerClass(e),e},t.extendSeriesModel=function(t){var e=sg.extend(t);return sg.registerClass(e),e},t.format=L_,t.getCoordinateSystemDimensions=function(t){var e=hd.get(t);if(e)return e.getDimensionsInfo?e.getDimensionsInfo():e.dimensions.slice()},t.getInstanceByDom=rm,t.getInstanceById=function(t){return $v[t]},t.getMap=function(t){var e=hv("getMap");return e&&e(t)},t.graphic=k_,t.helper=f_,t.init=function(t,e,n){var i=!(n&&n.ssr);if(i){0;var r=rm(t);if(r)return r;0}var o=new Fv(t,e,n);return o.id="ec_"+Qv++,$v[o.id]=o,i&&ko(t,em,o.id),Nv(o),lv.trigger("afterinit",o),o},t.innerDrawElementOnCanvas=Qy,t.matrix=Gi,t.number=D_,t.parseGeoJSON=C_,t.parseGeoJson=C_,t.registerAction=cm,t.registerCoordinateSystem=pm,t.registerLayout=dm,t.registerLoading=vm,t.registerLocale=Sc,t.registerMap=mm,t.registerPostInit=lm,t.registerPostUpdate=um,t.registerPreprocessor=am,t.registerProcessor=sm,t.registerTheme=om,t.registerTransform=xm,t.registerUpdateLifecycle=hm,t.registerVisual=fm,t.setCanvasCreator=function(t){c({createCanvas:t})},t.setPlatformAPI=c,t.throttle=Dg,t.time=A_,t.use=wm,t.util=P_,t.vector=Ht,t.version="5.3.3",t.zrUtil=bt,t.zrender=Or,Object.defineProperty(t,"__esModule",{value:!0})}));
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/wx-canvas.js b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/wx-canvas.js
new file mode 100644
index 000000000..efb07947c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/ec-canvas/wx-canvas.js
@@ -0,0 +1,111 @@
+export default class WxCanvas {
+    constructor(ctx, canvasId, isNew, canvasNode) {
+        this.ctx = ctx;
+        this.canvasId = canvasId;
+        this.chart = null;
+        this.isNew = isNew;
+        if (isNew) {
+            this.canvasNode = canvasNode;
+        } else {
+            this._initStyle(ctx);
+        }
+
+        // this._initCanvas(zrender, ctx);
+
+        this._initEvent();
+    }
+    getContext(contextType) {
+        if (contextType === '2d') {
+            return this.ctx;
+        }
+    }
+
+    // canvasToTempFilePath(opt) {
+    //   if (!opt.canvasId) {
+    //     opt.canvasId = this.canvasId;
+    //   }
+    //   return wx.canvasToTempFilePath(opt, this);
+    // }
+
+    setChart(chart) {
+        this.chart = chart;
+    }
+    addEventListener() {
+        // noop
+    }
+    attachEvent() {
+        // noop
+    }
+    detachEvent() {
+        // noop
+    }
+    _initCanvas(zrender, ctx) {
+        zrender.util.getContext = function () {
+            return ctx;
+        };
+        zrender.util.$override('measureText', function (text, font) {
+            ctx.font = font || '12px sans-serif';
+            return ctx.measureText(text);
+        });
+    }
+    _initStyle(ctx) {
+        ctx.createRadialGradient = (...args) => {
+            return ctx.createCircularGradient(...args);
+        };
+    }
+    _initEvent() {
+        this.event = {};
+        const eventNames = [
+            {
+                wxName: 'touchStart',
+                ecName: 'mousedown'
+            },
+            {
+                wxName: 'touchMove',
+                ecName: 'mousemove'
+            },
+            {
+                wxName: 'touchEnd',
+                ecName: 'mouseup'
+            },
+            {
+                wxName: 'touchEnd',
+                ecName: 'click'
+            }
+        ];
+        eventNames.forEach((name) => {
+            this.event[name.wxName] = (e) => {
+                const touch = e.touches[0];
+                this.chart.getZr().handler.dispatch(name.ecName, {
+                    zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+                    zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
+                    preventDefault: () => {},
+                    stopImmediatePropagation: () => {},
+                    stopPropagation: () => {}
+                });
+            };
+        });
+    }
+    set width(w) {
+        if (this.canvasNode) {
+            this.canvasNode.width = w;
+        }
+    }
+    set height(h) {
+        if (this.canvasNode) {
+            this.canvasNode.height = h;
+        }
+    }
+    get width() {
+        if (this.canvasNode) {
+            return this.canvasNode.width;
+        }
+        return 0;
+    }
+    get height() {
+        if (this.canvasNode) {
+            return this.canvasNode.height;
+        }
+        return 0;
+    }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/hook-component/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/hook-component/index.vue
new file mode 100644
index 000000000..e8f92ba62
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/hook-component/index.vue
@@ -0,0 +1,337 @@
+<template>
+  <view>
+    <view
+      class="chat-box"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :content="item.message.content"
+            :role="item.message.role"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :render-presets="renderPresets"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const mockData = {
+  avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+  key: getUniqueKey(),
+  message: {
+    role: 'assistant',
+    content: [
+      {
+        type: 'thinking',
+        status: 'complete',
+        data: {
+          title: '思考中',
+          text: '',
+        },
+      },
+    ],
+  },
+};
+const mockData1 = '嗯，用户问的是南极的自动提款机叫什么名字。这个问题有点有趣，因为南极是一个极端寒冷的地方，而且大部分地区都是无人居住的科研站。\n';
+const mockData2 =  '\n\n南极的自动提款机并没有一个特定的专属名称，但历史上确实有一台ATM机曾短暂存在于南极的**麦克默多站**（McMurdo Station）。这台ATM由美国**富兰克林国家银行**（Wells Fargo）于1998年安装，主要供驻扎在该站的科研人员使用。不过，由于南极的极端环境和极低的人口密度，这台ATM机并未长期运行，最终被移除。\n\n**背景补充：**\n- **麦克默多站**是美国在南极最大的科研基地，夏季人口可达约1,000人，冬季约200人。\n- 该ATM机更多是作为一种象征性服务存在，实际使用频率极低，因为南极科考人员通常依靠预支资金或电子支付。\n- 目前南极已无长期运行的ATM机，现代科考站更多依赖非现金交易方式。\n\n南极作为非主权领土，其基础设施以科研和生活支持为主，商业金融服务非常有限。若有类似设施，通常是临时或实验性质的。';
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+
+export default {
+  components: {
+    tChatMessage,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tToast,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            status: 'complete',
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+              },
+            ],
+          },
+        },
+        {
+          message: {
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                data: '牛顿第一定律是否适用于所有参考系？',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '',
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 动态样式
+      // 内容高度
+      contentHeight: '100vh',
+
+      chatIndex: '',
+    };
+  },
+  watch: {
+    isActive: {
+      handler(v) {
+        this.value = v ? '南极的自动提款机叫什么名字' : '';// 输入框的值
+      },
+
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      console.log('-----attached----');
+      /**
+             * 计算内容区域高度
+             * 生成CSS calc表达式：calc(100vh - 96rpx - 导航高度 - 底部安全区域高度)
+             */
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeight = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.contentHeight = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              data: value.trim(),
+            },
+          ],
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.loading = false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 获取当前时间
+    getCurrentTime() {
+      const now = new Date();
+      const hours = now.getHours().toString()
+        .padStart(2, '0');
+      const minutes = now.getMinutes().toString()
+        .padStart(2, '0');
+      return `${hours}:${minutes}`;
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+      const assistantMessage = mockData;
+      this.chatList = [assistantMessage, ...this.chatList];
+
+      const that = this;
+      this.$nextTick(async () => {
+        await fetchStream(mockData1, {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data.text += result;
+          },
+          complete() {
+            that.chatList[0].message.content[0].data.title = '思考完成';
+          },
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push({
+          type: 'markdown',
+          data: '',
+        });
+        await fetchStream(mockData2, {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[1].data += result;
+          },
+          complete() {
+            that.chatList[0].message.status = 'complete';
+            that.loading = false;
+          },
+        });
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat__list {
+    padding: 0 0 0 32rpx;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/image/index.vue b/packages/tdesign-uniapp-chat/components/chat-list/_example/image/index.vue
new file mode 100644
index 000000000..85ef4b11e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/image/index.vue
@@ -0,0 +1,460 @@
+<template>
+  <view>
+    <view
+      class="chat-box image-chat"
+      :style="'height: ' + contentHeight + ';'"
+    >
+      <t-chat>
+        <block
+          v-for="(item, chatIndex) in chatList"
+          :key="item.key"
+        >
+          <t-chat-message
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :role="item.message.role"
+            :placement="item.message.role === 'user' ? 'right' : 'left'"
+          >
+            <template #content>
+              <view
+                v-if="item.message.role === 'user'"
+              >
+                <block
+                  v-for="(contentItem, contentIndex) in item.message.content"
+                  :key="contentIndex"
+                >
+                  <t-chat-content
+                    v-if="contentItem.type === 'text' || contentItem.type === 'markdown'"
+                    :content="contentItem"
+                    :role="item.message.role"
+                  />
+                </block>
+              </view>
+              <view
+                v-else
+                style="width: 100%"
+              >
+                <block
+                  v-for="(contentItem, contentIndex) in item.message.content"
+                  :key="contentIndex"
+                >
+                  <t-chat-content
+                    v-if="contentItem.type === 'text' || contentItem.type === 'markdown'"
+                    :content="contentItem"
+                    :role="item.message.role"
+                  />
+
+                  <view
+                    v-else
+                    class="attachment-slide"
+                  >
+                    <TAttachments
+                      :items="contentItem.data"
+                      :in-chat="true"
+                      :removable="false"
+                    />
+                  </view>
+                </block>
+              </view>
+            </template>
+            <template #actionbar>
+              <t-chat-actionbar
+                v-if="chatIndex !== chatList.length - 1 && item.message.status === 'complete' && item.message.role === 'assistant'"
+                placement="end"
+                @actions="handleAction"
+              />
+            </template>
+          </t-chat-message>
+        </block>
+        <template #footer>
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :render-presets="renderPresets"
+            :auto-rise-with-keyboard="true"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+          />
+        </template>
+      </t-chat>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChatContent from 'tdesign-uniapp-chat/chat-content/chat-content.vue';
+import tChat from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+import TAttachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import { getNavigationBarHeight } from '../utils';
+
+let uniqueId = 0;
+const getUniqueKey = () => {
+  uniqueId += 1;
+  return `key-${uniqueId}`;
+};
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const fetchStream = async (str, options) => {
+  const { success, complete, delay = 100 } = options;
+  const arr = str.split('');
+  for (let i = 0; i < arr.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await sleep(delay);
+    success(arr[i]);
+  }
+  complete();
+};
+export default {
+  components: {
+    tChatMessage,
+    tChatContent,
+    tChat,
+    tChatSender,
+    tChatActionbar,
+    tToast,
+    TAttachments,
+  },
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+
+      customActionBar: ['good', 'bad'],
+
+      chatList: [
+        {
+          avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+          key: getUniqueKey(),
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '欢迎使用TDesign智能生图助手，请先写下你的创意，可以试试上传参考图哦～',
+              },
+            ],
+          },
+        },
+      ],
+
+      value: '',
+
+      // 输入框的值
+      loading: false,
+
+      // 加载状态
+      disabled: false,
+
+      // 禁用状态
+      inputStyle: '',
+
+      // 输入框动态样式
+      attachmentsProps: {
+        items: [],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+
+      // 内容高度
+      contentHeight: '100vh',
+
+      chatIndex: 0,
+      contentIndex: 0,
+
+      contentItem: {
+        type: '',
+        data: '',
+      },
+    };
+  },
+  options: {
+    styleIsolation: 'shared',
+  },
+  watch: {
+    isActive: {
+      handler(v) {
+        this.value = v ? '请为Tdesign设计三张品牌宣传图' : ''; // 输入框的值
+      },
+
+      immediate: true,
+    },
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  created() {},
+  methods: {
+    attached() {
+      try {
+        // 获取当前的导航栏高度和安全区域高度
+        const navigationBarHeight = getNavigationBarHeight() || 0;
+
+        // 生成CSS calc表达式字符串
+        const contentHeight = `calc(100vh - 96rpx - ${navigationBarHeight}px)`;
+        this.contentHeight = contentHeight;
+        console.log('内容区域高度CSS表达式:', contentHeight);
+      } catch (error) {
+        console.log('CatchClause', error);
+        console.log('CatchClause', error);
+        console.error('生成内容高度表达式失败:', error);
+        this.contentHeight = 'calc(100vh - 96rpx)';
+      }
+    },
+
+    // 发送消息事件处理
+    onSend(e) {
+      const { value } = e;
+      if (!value || value.trim() === '') {
+        return;
+      }
+
+      // 创建用户消息对象
+      const userMessage = {
+        key: getUniqueKey(),
+        message: {
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              data: value.trim(),
+            },
+          ],
+        },
+      };
+
+      // 将用户消息插入到chatList的开头（因为reverse为true，所以用unshift）
+      this.chatList = [userMessage, ...this.chatList];
+      this.value = ''; // 清空输入框
+
+      // 模拟助手回复（可选）
+      this.simulateAssistantReply(value.trim());
+    },
+
+    // 停止事件处理
+    onStop() {
+      console.log('停止发送');
+      this.loading = false;
+    },
+
+    // 聚焦事件处理
+    onFocus() {
+      console.log('输入框聚焦');
+    },
+
+    // 打开选择文件界面
+    onUpdateVisible() {
+      const that = this;
+      uni.chooseMessageFile({
+        count: 1,
+        type: 'file',
+        success(res) {
+          const tempFile = res.tempFiles[0];
+          console.log('选择的文件信息：', tempFile);
+          const item = {
+            fileType: 'doc',
+            name: tempFile.name,
+            url: tempFile.path,
+            size: tempFile.size,
+            status: 'success',
+          };
+          this.attachmentsProps = {
+            ...that.attachmentsProps,
+            items: [item],
+          };
+        },
+        fail(err) {
+          console.error('选择文件失败：', err);
+        },
+      });
+    },
+
+    // 模拟助手回复
+    simulateAssistantReply() {
+      this.loading = true;
+      const assistantMessage = {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        key: getUniqueKey(),
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'markdown',
+              data: '',
+            },
+          ],
+        },
+      };
+      this.chatList = [assistantMessage, ...this.chatList];
+      const that = this;
+      this.$nextTick(async () => {
+        await fetchStream('接下来我将生成符合要求的图片', {
+          success(result) {
+            if (!that.loading) {
+              return;
+            }
+            that.chatList[0].message.content[0].data += result;
+          },
+          complete() {},
+        });
+        if (!that.loading) {
+          return;
+        }
+        that.chatList[0].message.content.push({
+          type: 'imageview',
+          status: 'complete',
+          data: [
+            {
+              name: 'sample1.png',
+              url: 'https://tdesign.gtimg.com/site/square.png',
+              fileType: 'image',
+              status: 'success',
+              size: 1032,
+              width: 128,
+              height: 128,
+            },
+            {
+              name: 'sample2.png',
+              url: 'https://tdesign.gtimg.com/site/square.png',
+              fileType: 'image',
+              status: 'success',
+              size: 1032,
+              width: 128,
+              height: 128,
+            },
+            {
+              name: 'sample3.png',
+              url: 'https://tdesign.gtimg.com/site/square.png',
+              fileType: 'image',
+              status: 'success',
+              size: 1032,
+              width: 128,
+              height: 128,
+            },
+            {
+              name: 'sample4.png',
+              url: 'https://tdesign.gtimg.com/site/square.png',
+              fileType: 'image',
+              status: 'success',
+              size: 1032,
+              width: 128,
+              height: 128,
+            },
+            {
+              name: 'sample5.png',
+              url: 'https://tdesign.gtimg.com/site/square.png',
+              fileType: 'image',
+              status: 'success',
+              size: 1032,
+              width: 128,
+              height: 128,
+            },
+          ],
+        });
+        that.chatList[0].message.status = 'complete';
+        that.loading = false;
+      });
+    },
+
+    handleAction(e) {
+      const { name, active, data } = e;
+      console.log('----', name);
+      let message = '';
+      switch (name) {
+        case 'replay':
+          message = '重新生成';
+          break;
+        case 'copy':
+          console.log(data);
+          message = '复制成功';
+          break;
+        case 'good':
+          message = active ? '点赞成功' : '取消点赞';
+          break;
+        case 'bad':
+          message = active ? '点踩成功' : '取消点踩';
+          break;
+        case 'share':
+          message = '分享功能';
+          break;
+        default:
+          message = `执行了${name}操作`;
+      }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message,
+        theme: 'success',
+      });
+    },
+  },
+};
+</script>
+<style>
+
+.chat-box {
+    padding-top: 32rpx;
+    box-sizing: border-box;
+}
+
+.image-chat .t-chat__list {
+    padding: 0 0 0 0;
+    box-sizing: border-box;
+}
+
+.t-chat-message {
+    padding: 0 32rpx;
+}
+
+.image-chat .t-chat__inner.assistant .t-chat__avatar {
+    padding-left: 32rpx;
+}
+
+.image-chat .assistant,
+.image-chat .assistant .t-chat__detail {
+    width: 100%;
+}
+
+.attachment-slide {
+    height: 274rpx;
+    width: 100%;
+}
+
+.attachment-slide .t-attachments {
+    padding-right: 32rpx;
+    padding-top: 24rpx;
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 2;
+    left: 0;
+    right: 0;
+}
+
+:deep(.attachment-slide .t-attachments .t-attachments__files:first-child) {
+    padding-left: 120rpx;
+}
+
+:deep(.attachment-slide .t-attachments .t-attachments__files:last-child) {
+    padding-right: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/_example/utils.ts b/packages/tdesign-uniapp-chat/components/chat-list/_example/utils.ts
new file mode 100644
index 000000000..e0fd4abf8
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/_example/utils.ts
@@ -0,0 +1,28 @@
+/**
+ * 获取导航栏高度，包括状态栏和标题栏
+ */
+export const getNavigationBarHeight = () => {
+  try {
+    const systemInfo = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync();
+
+    // 获取状态栏高度
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+
+    // 获取胶囊按钮位置信息
+    const menuButtonInfo = uni.getMenuButtonBoundingClientRect?.();
+
+    if (menuButtonInfo) {
+      // 计算导航栏高度：胶囊按钮底部位置 + 胶囊按钮与底部的间距
+      const navigationBarHeight = menuButtonInfo.bottom + (menuButtonInfo.top - statusBarHeight);
+      return navigationBarHeight;
+    }
+    // 如果无法获取胶囊按钮信息，使用默认计算方式
+    // 一般情况下，导航栏高度 = 状态栏高度 + 44px（标准导航栏高度）
+    const navigationBarHeight = statusBarHeight + 44;
+
+    return navigationBarHeight;
+  } catch (error) {
+    console.error('获取导航栏高度失败:', error);
+    return 44;
+  }
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/chat-list.less b/packages/tdesign-uniapp-chat/components/chat-list/chat-list.less
new file mode 100644
index 000000000..fdc70380e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/chat-list.less
@@ -0,0 +1,35 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-list: ~'@{prefix}-chat-list';
+
+@chat-text-color: @text-color-primary;
+
+.@{chat-list} {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  color: @chat-text-color;
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+
+    &--reverse {
+      display: flex;
+      flex-direction: column;
+      transform: scaleY(-1);
+
+      &::-webkit-scrollbar {
+        transform: scaleY(-1);
+      }
+    }
+
+    .placeholder {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/chat-list.vue b/packages/tdesign-uniapp-chat/components/chat-list/chat-list.vue
new file mode 100644
index 000000000..811488676
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/chat-list.vue
@@ -0,0 +1,177 @@
+<template>
+  <view
+    :class="[classPrefix, classes]"
+    :style="_._style([customStyle])"
+  >
+    <scroll-view
+      :class="_.cls(classPrefix + '__content', [['reverse', reverse]])"
+      :scroll-y="true"
+      :enable-flex="true"
+      :enhanced="true"
+      :scroll-with-animation="true"
+      :scroll-top="scrollViewTop"
+      data-ref="chatListRef"
+      @scroll="onScroll"
+      @scrolltoupper="handlerScrollToUpper"
+      @scrolltolower="handlerScrollToLower"
+    >
+      <block v-if="reverse">
+        <view class="placeholder" />
+      </block>
+      <!-- /**
+        * 1. 两种方式获取要渲染的 list
+        *  a. props 传 data
+        *  b. slots t-chat-message
+        * a 优先级更高
+        */ -->
+      <block v-if="data && data.length > 0">
+        <block
+          v-for="(item, index) in data"
+          :key="index"
+        >
+          <chat-message
+            v-if="virtualList ? index >= startIndex && index <= endIndex : true"
+            :avatar="item.avatar || ''"
+            :name="item.name || ''"
+            :datetime="item.datetime || ''"
+            :content="item.content"
+            :placement="layout === 'both' ? (item.role === 'user' ? 'right' : 'left') : 'left'"
+            :animation="animation"
+            :status="item.status || ''"
+          />
+        </block>
+      </block>
+      <slot v-else />
+    </scroll-view>
+    <view :class="classPrefix + '__footer'">
+      <slot name="footer" />
+    </view>
+  </view>
+</template>
+<script>
+import chatMessage from '../chat-message/chat-message.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+
+const name = `${prefix}-chat-list`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    chatMessage,
+  },
+
+  props: {
+    ...props,
+    virtualList: {
+      type: Boolean,
+      default: false,
+    },
+    fragmentLen: {
+      type: Number,
+      default: 8,
+    },
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+      scrollViewTop: 0,
+      classes: [],
+      listClasses: [],
+      startIndex: 0,
+      endIndex: 0,
+      _,
+    };
+  },
+
+  watch: {
+    data: {
+      handler() {
+        const dataLen = this.data ? this.data.length : 0;
+        if (this.virtualList && this.oldDataLen !== dataLen) {
+          this.oldDataLen = dataLen;
+          this.resetFragments();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  methods: {
+    setScrollTop(scrollTop = 0) {
+      if (scrollTop === this.scrollViewTop) {
+        // eslint-disable-next-line no-param-reassign
+        scrollTop -= 1;
+      }
+      this.scrollViewTop = scrollTop;
+    },
+    scrollToBottom() {
+      this.setScrollTop();
+    },
+    onScroll(e) {
+      this.$emit('scroll', e);
+    },
+
+    handlerScrollToUpper() {
+      if (!this.reverse && this.virtualList) {
+        this.addFragment();
+      }
+    },
+
+    handlerScrollToLower() {
+      if (this.reverse && this.virtualList) {
+        this.addFragment();
+      }
+    },
+
+    resetFragments() {
+      const dataLen = this.data && this.data.length;
+      if (dataLen) {
+        const { fragmentLen } = this;
+        if (this.reverse) {
+          this.startIndex = 0;
+          this.endIndex = Math.min(dataLen - 1, fragmentLen - 1);
+        } else {
+          this.startIndex = Math.max(dataLen - fragmentLen, 0);
+          this.endIndex = Math.max(dataLen - 1, 0);
+        }
+      }
+    },
+
+    addFragment(count = 4) {
+      const dataLen = this.data && this.data.length;
+      if (dataLen) {
+        if (this.reverse) {
+          this.endIndex = Math.min(dataLen - 1, this.endIndex + count);
+        } else {
+          this.startIndex = Math.max(this.startIndex - count, 0);
+          // todo 正向布局自动滚动到原来位置？
+        }
+      }
+    },
+  },
+
+});
+</script>
+<style scoped>
+@import './chat-list.css';
+
+/* #ifdef H5 */
+.t-chat-list__content :deep(.uni-scroll-view-content) {
+  display: flex;;
+  flex-direction: column;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/props.ts b/packages/tdesign-uniapp-chat/components/chat-list/props.ts
new file mode 100644
index 000000000..884c57179
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/props.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatListProps } from './type';
+export default {
+  /** 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种 */
+  animation: {
+    type: String,
+    default: 'skeleton' as TdChatListProps['animation'],
+    validator(val: TdChatListProps['animation']): boolean {
+      if (!val) return true;
+      return ['skeleton', 'moving', 'gradient', 'dot'].includes(val);
+    },
+  },
+  /** 对话列表的数据 */
+  data: {
+    type: Array,
+  },
+  /** 对话布局形式，支持两侧对齐与左对齐。使用插槽自定义对话内容时不生效，得用`t-chat-message`的`placement`属性 */
+  layout: {
+    type: String,
+    default: 'both' as TdChatListProps['layout'],
+    validator(val: TdChatListProps['layout']): boolean {
+      if (!val) return true;
+      return ['both', 'single'].includes(val);
+    },
+  },
+  /** 是否表现为倒序 */
+  reverse: {
+    type: Boolean,
+    default: true,
+  },
+  /** 滚动事件的回调 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-list/type.ts b/packages/tdesign-uniapp-chat/components/chat-list/type.ts
new file mode 100644
index 000000000..1f00357ed
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-list/type.ts
@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdChatListProps {
+  /**
+   * 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种
+   * @default skeleton
+   */
+  animation?: 'skeleton' | 'moving' | 'gradient' | 'dot';
+  /**
+   * 对话列表的数据
+   */
+  data?: Array<TdChatItemMeta>;
+  /**
+   * 对话布局形式，支持两侧对齐与左对齐。使用插槽自定义对话内容时不生效，得用`t-chat-message`的`placement`属性
+   * @default both
+   */
+  layout?: 'both' | 'single';
+  /**
+   * 是否表现为倒序
+   * @default true
+   */
+  reverse?: boolean;
+  /**
+   * 滚动事件的回调
+   */
+  onScroll?: (context: { scrollLeft; scrollTop; scrollHeight; scrollWidth; deltaX; deltaY }) => void;
+}
+
+export interface TdChatItemMeta {
+  avatar?: string;
+  name?: string;
+  role?: string;
+  datetime?: string;
+  content?: string;
+  status?: string;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-loading/README.en-US.md
new file mode 100644
index 000000000..1adc61e4a
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/README.en-US.md
@@ -0,0 +1,11 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatLoading Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | String | moving | options: skeleton/moving/gradient/dot | N
+text | String | - | text of chat loading | N
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/README.md b/packages/tdesign-uniapp-chat/components/chat-loading/README.md
new file mode 100644
index 000000000..06e6b9161
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/README.md
@@ -0,0 +1,34 @@
+---
+title: ChatLoading 对话加载
+description: 用于对话场景中的加载状态组件。
+spline: base
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatLoading from 'tdesign-uniapp-chat/chat-loading/chat-loading.vue';
+```
+
+### 01 组件类型
+
+支持多种加载中动效类型，包括 gradient、moving、dots
+
+{{ base }}
+
+#### 带文案描述的加载组件
+
+{{ text }}
+
+## API
+
+### ChatLoading Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | String | moving | 加载的状态形式。可选项：skeleton/moving/gradient/dot | N
+text | String | - | 加载过程展示的文字内容 | N
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-loading/_example/base/index.vue
new file mode 100644
index 000000000..ec575eee9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/_example/base/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <view class="chat-example">
+    <!-- <view class="chat-example-block">
+    <t-chat-loading animation="skeleton" />
+  </view> -->
+    <view class="chat-example-block">
+      <t-chat-loading animation="gradient" />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-loading animation="moving" />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-loading animation="dots" />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatLoading from 'tdesign-uniapp-chat/chat-loading/chat-loading.vue';
+
+
+export default {
+  components: {
+    tChatLoading,
+  },
+
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+    display: flex;
+    align-items: center;
+    gap: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.less b/packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.vue b/packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.vue
new file mode 100644
index 000000000..a020f6ee3
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/_example/chat-loading.vue
@@ -0,0 +1,61 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatLoading"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatLoading 对话加载"
+        desc="用于对话场景中的加载状态组件。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="支持多种加载中动效类型，包括 gradient、moving、dots"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="带文案描述的类型">
+        <textDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import baseDemo from './base/index.vue';
+import textDemo from './text/index.vue';
+
+export default {
+  components: {
+    baseDemo,
+    textDemo,
+  },
+  data() {
+    return {
+      loading: true,
+      loadingText: '正在加载...',
+    };
+  },
+  methods: {
+    toggleLoading() {
+      this.loading = !this.loading;
+    },
+
+    resetLoading() {
+      this.loading = true;
+      this.loadingText = '正在加载...';
+
+      uni.showToast({
+        title: '已重置',
+        icon: 'success',
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './chat-loading.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/_example/text/index.vue b/packages/tdesign-uniapp-chat/components/chat-loading/_example/text/index.vue
new file mode 100644
index 000000000..daa2b4ff6
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/_example/text/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-loading
+        animation="dots"
+        text="加载中..."
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatLoading from 'tdesign-uniapp-chat/chat-loading/chat-loading.vue';
+export default {
+  components: {
+    tChatLoading,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.less b/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.less
new file mode 100644
index 000000000..9567af149
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.less
@@ -0,0 +1,171 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-loading: ~'@{prefix}-chat-loading';
+
+@chat-loading-animation-duration: 0.6s;
+
+.@{chat-loading} {
+  display: flex;
+  align-items: center;
+
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
+
+  &__icon {
+    &--with-padding {
+      padding: 6rpx;
+      box-sizing: border-box;
+    }
+
+    .@{chat-loading}__skeleton{
+      width: 100%
+    }
+  }
+
+  &__text {
+    color: @text-color-placeholder;
+    font-size: @font-size-base;
+
+    &:not(:empty) {
+      margin-left: @spacer;
+    }
+  }
+
+  &__moving {
+    position: relative;
+    width: 28rpx;
+    height: 28rpx;
+
+    &--top,
+    &--left,
+    &--right {
+      position: absolute;
+      width: 14rpx;
+      height: 14rpx;
+      border-radius: 50%;
+      background-color: @brand-color;
+    }
+
+    &--top {
+      top: -6rpx;
+      left: 7rpx;
+      animation: dot-moving-top @chat-loading-animation-duration ease-in-out alternate infinite;
+    }
+
+    &--left {
+      bottom: -6rpx;
+      left: -6rpx;
+      animation: dot-moving-left @chat-loading-animation-duration ease-in-out alternate infinite;
+    }
+
+    &--right {
+      bottom: -6rpx;
+      right: -6rpx;
+      animation: dot-moving-right @chat-loading-animation-duration ease-in-out alternate infinite;
+    }
+  }
+
+  &__gradient {
+    width: 28rpx;
+    height: 28rpx;
+    background-color: transparent;
+    border-radius: 50%;
+    border: 3rpx solid @brand-color;
+    animation: border-gradient-color @chat-loading-animation-duration ease-in-out alternate infinite;
+    box-sizing: border-box;
+    padding: 0 6rpx;
+  }
+
+  &__dots {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__skeleton {
+    width: 100%;
+  }
+}
+
+@keyframes dot-moving-top {
+  0% {
+    transform: scale(1);
+    top: -6rpx;
+  }
+  to {
+    transform: scale(2);
+    top: 7rpx;
+  }
+}
+
+@keyframes dot-moving-left {
+  0% {
+    transform: scale(1);
+    bottom: -6rpx;
+    left: -6rpx;
+  }
+  to {
+    transform: scale(2);
+    bottom: 7rpx;
+    left: 7rpx;
+  }
+}
+
+@keyframes dot-moving-right {
+  0% {
+    transform: scale(1);
+    bottom: -6rpx;
+    right: -6rpx;
+  }
+  to {
+    transform: scale(2);
+    bottom: 7rpx;
+    right: 7rpx;
+  }
+}
+
+@keyframes border-gradient-color {
+  0% {
+    border-color: @brand-color;
+    border-width: 1.5px;
+  }
+  50% {
+    border-color: @brand-color-active;
+    border-width: 3px;
+  }
+  100% {
+    border-color: @primary-color-6;
+    border-width: 4px;
+  }
+}
+
+@keyframes a_tick {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 14rpx;
+  }
+}
+
+@keyframes a_tick-1 {
+  0% {
+    transform: rotate(45deg) scale(0, 1);
+  }
+  100% {
+    transform: rotate(45deg) scale(1, 1);
+  }
+}
+
+@keyframes a_tick-2 {
+  0% {
+    transform: rotate(-45deg) scale(0, 1);
+  }
+  100% {
+    transform: rotate(-45deg) scale(1, 1);
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.vue b/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.vue
new file mode 100644
index 000000000..3e1318d28
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/chat-loading.vue
@@ -0,0 +1,91 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="_._style([customStyle])"
+  >
+    <!-- 动态加载动画 -->
+    <view
+      v-if="animation !== 'skeleton'"
+      :class="classPrefix + '__icon ' + (animation === 'dots' ? '' : classPrefix + '__icon--with-padding')"
+    >
+      <block v-if="animation === 'moving'">
+        <view :class="classPrefix + '__moving'">
+          <view :class="classPrefix + '__moving--top'" />
+          <view :class="classPrefix + '__moving--left'" />
+          <view :class="classPrefix + '__moving--right'" />
+        </view>
+      </block>
+
+      <block v-if="animation === 'gradient'">
+        <view :class="classPrefix + '__gradient'" />
+      </block>
+
+      <view
+        v-if="animation === 'dots'"
+        :class="classPrefix + '__dots'"
+      >
+        <t-loading
+          theme="dots"
+          size="60rpx"
+        />
+      </view>
+    </view>
+    <block v-if="animation === 'skeleton'">
+      <view :class="classPrefix + '__skeleton'">
+        <t-skeleton
+          :row-col="[1, 1, 1, { width: '80%' }]"
+          theme="paragraph"
+          animation="gradient"
+          loading
+        />
+      </view>
+    </block>
+    <!-- 文本内容 -->
+    <view
+      v-if="text"
+      :class="classPrefix + '__text'"
+    >
+      {{ text }}
+    </view>
+  </view>
+</template>
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+import props from './props';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+
+const name = `${prefix}-chat-loading`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tSkeleton,
+    tLoading,
+  },
+
+  props: {
+    ...props,
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+      _,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './chat-loading.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/props.ts b/packages/tdesign-uniapp-chat/components/chat-loading/props.ts
new file mode 100644
index 000000000..19c5ea466
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/props.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatLoadingProps } from './type';
+export default {
+  /** 加载的状态形式 */
+  animation: {
+    type: String,
+    default: 'moving' as TdChatLoadingProps['animation'],
+    validator(val: TdChatLoadingProps['animation']): boolean {
+      if (!val) return true;
+      return ['skeleton', 'moving', 'gradient', 'dot'].includes(val);
+    },
+  },
+  /** 加载过程展示的文字内容 */
+  text: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-loading/type.ts b/packages/tdesign-uniapp-chat/components/chat-loading/type.ts
new file mode 100644
index 000000000..3aca3d565
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-loading/type.ts
@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdChatLoadingProps {
+  /**
+   * 加载的状态形式
+   * @default moving
+   */
+  animation?: 'skeleton' | 'moving' | 'gradient' | 'dot';
+  /**
+   * 加载过程展示的文字内容
+   * @default ''
+   */
+  text?: string;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.less b/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.less
new file mode 100644
index 000000000..c379bac69
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.less
@@ -0,0 +1,96 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-markdown-code: ~'@{prefix}-chat-markdown-code';
+
+@chat-markdown-code-block-margin: 16rpx;
+@chat-markdown-code-block-radius: 8rpx;
+@chat-markdown-code-block-bg-light: #f6f8fa;
+@chat-markdown-code-block-bg-dark: #161b22;
+@chat-markdown-code-block-bg-white: #ffffff;
+@chat-markdown-code-block-border-light: #e1e4e8;
+@chat-markdown-code-block-border-dark: #30363d;
+@chat-markdown-code-block-border-white: #d0d7de;
+
+@chat-markdown-code-header-padding: 8rpx 16rpx;
+@chat-markdown-code-header-bg-light: #e1e4e8;
+@chat-markdown-code-header-bg-dark: #21262d;
+@chat-markdown-code-header-bg-white: #f6f8fa;
+@chat-markdown-code-header-border-light: #d0d7de;
+@chat-markdown-code-header-border-dark: #30363d;
+@chat-markdown-code-header-border-white: #d0d7de;
+
+@chat-markdown-code-lang-font-size: 24rpx;
+@chat-markdown-code-lang-color-light: #656d76;
+@chat-markdown-code-lang-color-dark: #7d8590;
+@chat-markdown-code-lang-font-weight: 500;
+
+@chat-markdown-code-content-padding: 16rpx;
+
+@chat-markdown-code-text-font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
+  monospace;
+@chat-markdown-code-text-font-size: 28rpx;
+@chat-markdown-code-text-line-height: 1.6;
+@chat-markdown-code-text-color-light: #24292f;
+@chat-markdown-code-text-color-dark: #e6edf3;
+
+.@{chat-markdown-code} {
+  // 代码块容器
+  margin: @chat-markdown-code-block-margin 0;
+  border-radius: @chat-markdown-code-block-radius;
+  background-color: @chat-markdown-code-block-bg-light;
+  border: 1rpx solid @chat-markdown-code-block-border-light;
+  overflow: hidden;
+
+  // 代码语言标签
+  &__header {
+    padding: @chat-markdown-code-header-padding;
+    background-color: @chat-markdown-code-header-bg-light;
+    border-bottom: 1rpx solid @chat-markdown-code-header-border-light;
+  }
+
+  // 语言标签文本
+  &__lang {
+    font-size: @chat-markdown-code-lang-font-size;
+    color: @chat-markdown-code-lang-color-light;
+    font-weight: @chat-markdown-code-lang-font-weight;
+  }
+
+  // 代码内容区域
+  &__content {
+    padding: @chat-markdown-code-content-padding;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+    height: auto;
+  }
+
+  // 代码文本
+  &__text {
+    font-family: @chat-markdown-code-text-font-family;
+    font-size: @chat-markdown-code-text-font-size;
+    line-height: @chat-markdown-code-text-line-height;
+    color: @chat-markdown-code-text-color-light;
+    /* 关键设置：防止换行 */
+    white-space: pre;
+    word-wrap: normal;
+    word-break: normal;
+    overflow-wrap: normal;
+    display: inline-block;
+    vertical-align: top;
+    min-width: 100%;
+  }
+
+  // 浅色主题
+  &-light {
+    .@{chat-markdown-code}-block {
+      background-color: @chat-markdown-code-block-bg-white;
+      border-color: @chat-markdown-code-block-border-white;
+    }
+
+    .@{chat-markdown-code}-header {
+      background-color: @chat-markdown-code-header-bg-white;
+      border-bottom-color: @chat-markdown-code-header-border-white;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.vue b/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.vue
new file mode 100644
index 000000000..b0e2e5313
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown-code/chat-markdown-code.vue
@@ -0,0 +1,58 @@
+<template>
+  <view :class="classPrefix">
+    <!-- 代码语言标签 -->
+    <view
+      v-if="node.lang"
+      :class="classPrefix + '__header'"
+    >
+      <text :class="classPrefix + '__lang'">
+        {{ node.lang }}
+      </text>
+    </view>
+
+    <!-- 代码内容区域 -->
+    <scroll-view
+      :class="classPrefix + '__content'"
+      :scroll-x="true"
+    >
+      <text
+        :class="classPrefix + '__text'"
+        :decode="true"
+      >
+        {{ node.text }}
+      </text>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+import { prefix } from 'tdesign-uniapp/common/config';
+
+const name = `${prefix}-chat-markdown-code`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  props: {
+    node: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+    };
+  },
+});
+
+</script>
+<style scoped>
+@import './chat-markdown-code.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.less b/packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.vue b/packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.vue
new file mode 100644
index 000000000..4ed50b7db
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown-node/chat-markdown-node.vue
@@ -0,0 +1,292 @@
+<template>
+  <block
+    v-for="(item, i) in nodes"
+    :key="i"
+  >
+    <!-- blocks -->
+
+    <block v-if="item.type === 'heading'">
+      <view :class="classPrefix + '-h ' + classPrefix + '-h' + item.depth">
+        <TChatMarkdownNode :nodes="item.tokens" />
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'list'">
+      <view
+        :class="classPrefix + '-list ' + (item.ordered ? classPrefix + '-list__decimal' : '')"
+        :data-type="item.ordered"
+      >
+        <block
+          v-for="(li, j) in item.items"
+          :key="j"
+        >
+          <view :class="classPrefix + '-list-item'">
+            <block v-if="li.tokens && li.tokens.length">
+              <TChatMarkdownNode :nodes="li.tokens" />
+            </block>
+            <block v-else>
+              {{ item.text }}
+            </block>
+          </view>
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'paragraph'">
+      <view :class="classPrefix + '-p'">
+        <TChatMarkdownNode :nodes="item.tokens" />
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'image'">
+      <view :class="classPrefix + '-image'">
+        <image
+          :src="item.href"
+          :alt="item.title"
+          mode="widthFix"
+        />
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'table'">
+      <view :class="tableName">
+        <view :class="tableName + '__container'">
+          <view :class="tableName + '__thead'">
+            <view :class="tableName + '__tr'">
+              <block
+                v-for="(th, j) in item.header"
+                :key="j"
+              >
+                <view
+                  :class="tableName + '__th'"
+                  :style="'text-align:' + item.align[j] || 'left' + ';'"
+                >
+                  <TChatMarkdownNode :nodes="th.tokens" />
+                </view>
+              </block>
+            </view>
+          </view>
+          <view :class="tableName + '__tbody'">
+            <block
+              v-for="(row, k) in item.rows"
+              :key="k"
+            >
+              <view :class="tableName + '__tr'">
+                <block
+                  v-for="(cell, l) in row"
+                  :key="l"
+                >
+                  <view
+                    :class="tableName + '__td'"
+                    :style="'text-align:' + item.align[l] || 'left' + ';'"
+                  >
+                    <TChatMarkdownNode :nodes="cell.tokens" />
+                  </view>
+                </block>
+              </view>
+            </block>
+          </view>
+        </view>
+      </view>
+
+      <!-- <chat-markdown-table :node="item">
+        <template #default="{th}">
+          <TChatMarkdownNode :nodes="th.tokens" />
+        </template>
+      </chat-markdown-table> -->
+    </block>
+
+    <block v-else-if="item.type === 'blockquote'">
+      <view :class="classPrefix + '-blockquote'">
+        <TChatMarkdownNode :nodes="item.tokens" />
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'code'">
+      <chat-markdown-code
+        :node="item"
+        :theme="theme"
+      />
+    </block>
+
+    <!-- Inlines -->
+
+    <block v-else-if="item.type === 'text'">
+      <view
+        :class="classPrefix + '-text ' + classPrefix + '-inline'"
+        :data-raw="item.raw"
+      >
+        <block v-if="item.tokens && item.tokens.length">
+          <TChatMarkdownNode :nodes="item.tokens" />
+        </block>
+        <block v-else>
+          {{ '' + item.raw + '' }}
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'strong'">
+      <view :class="classPrefix + '-strong ' + classPrefix + '-inline'">
+        <block v-if="item.tokens && item.tokens.length">
+          <TChatMarkdownNode :nodes="item.tokens" />
+        </block>
+        <block v-else>
+          {{ '' + item.text + '' }}
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'em'">
+      <view :class="classPrefix + '-em ' + classPrefix + '-inline'">
+        <block v-if="item.tokens && item.tokens.length">
+          <TChatMarkdownNode :nodes="item.tokens" />
+        </block>
+        <block v-else>
+          {{ '' + item.text + '' }}
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'del'">
+      <view :class="classPrefix + '-del ' + classPrefix + '-inline'">
+        <block v-if="item.tokens && item.tokens.length">
+          <TChatMarkdownNode :nodes="item.tokens" />
+        </block>
+        <block v-else>
+          {{ '' + item.text + '' }}
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'link'">
+      <view
+        :class="classPrefix + '-link ' + classPrefix + '-inline'"
+        :data-index="i"
+        @click.stop="linkClick"
+      >
+        <block v-if="item.tokens && item.tokens.length">
+          <TChatMarkdownNode :nodes="item.tokens" />
+        </block>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'ref'">
+      <view :class="classPrefix + '-ref ' + classPrefix + '-inline'">
+        <text :class="classPrefix + '-ref-txt'">
+          {{ '' + item.text + '' }}
+        </text>
+      </view>
+    </block>
+
+    <block v-else-if="item.type === 'space'">
+      <view :class="classPrefix + '-space'" />
+    </block>
+
+    <block v-else-if="item.type === 'br'">
+      <view :class="classPrefix + '-br'" />
+    </block>
+
+    <block v-else-if="item.type === 'hr'">
+      <view :class="classPrefix + '-hr'" />
+    </block>
+
+    <block v-else-if="item.type === 'codespan'">
+      <view
+        :class="classPrefix + '-codespan ' + classPrefix + '-inline'"
+        :data-type="item.type"
+      >
+        {{ '' + (item.text || item.raw) + '' }}
+      </view>
+    </block>
+
+    <block v-else>
+      <view
+        :class="classPrefix + '-raw ' + classPrefix + '-inline'"
+        :data-type="item.type"
+      >
+        {{ '' + (item.text || item.raw) + '' }}
+      </view>
+    </block>
+  </block>
+</template>
+
+<script>
+// import chatMarkdownTable from '../chat-markdown-table/chat-markdown-table.vue';
+import chatMarkdownCode from '../chat-markdown-code/chat-markdown-code.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+// #ifndef H5
+import { TChatMarkdownNode } from './chat-markdown-node.vue';
+// #endif
+
+const name = `${prefix}-chat-markdown`;
+const tableName = `${prefix}-chat-markdown-table`;
+
+
+export default uniComponent({
+  name: `${name}-node`,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    // chatMarkdownTable,
+    chatMarkdownCode,
+    // #ifndef H5
+    TChatMarkdownNode,
+    // #endif
+  },
+
+  props: {
+    nodes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+      tableName,
+      theme: '',
+    };
+  },
+
+  methods: {
+    linkClick(e) {
+      const { index } = e.currentTarget.dataset || {};
+      const token = this.nodes?.[index];
+      this.handleClick(e, 'link-tap', token);
+    },
+
+    getCareMarkdown() {
+      if (this.careMarkdown) {
+        return this.careMarkdown;
+      }
+      this.careMarkdown = this.$parent;
+      while (this.careMarkdown && this.careMarkdown.name !== name) {
+        this.careMarkdown = this.careMarkdown.$parent;
+      }
+
+      return this.careMarkdown;
+    },
+
+    handleClick(event, type, token) {
+      // 通用点击事件
+      const target = this.getCareMarkdown();
+      if (!target) return;
+
+      target.$emit('click', {
+        event,
+        node: token,
+      });
+    },
+  },
+
+});
+</script>
+<style scoped>
+@import '../chat-markdown/chat-markdown.css';
+@import '../chat-markdown-table/chat-markdown-table.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.less b/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.less
new file mode 100644
index 000000000..5237c3219
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.less
@@ -0,0 +1,68 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-markdown-table: ~'@{prefix}-chat-markdown-table';
+
+.@{chat-markdown-table} {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  border: 1rpx solid @component-border;
+
+  &__container {
+    display: table;
+    min-width: 100%;
+    max-width: max-content;
+    border-collapse: collapse;
+    white-space: nowrap;
+  }
+
+  &__thead {
+    display: table-header-group;
+  }
+
+  &__tbody {
+    display: table-row-group;
+  }
+
+  &__tr {
+    display: table-row;
+    border-bottom: 1rpx solid @component-border;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    /* 斑马条纹样式 */
+    &:nth-child(2n + 1) {
+      background-color: @bg-color-container;
+    }
+
+    &:nth-child(2n) {
+      background-color: @bg-color-secondarycontainer;
+    }
+  }
+
+  &__th {
+    display: table-cell;
+    vertical-align: middle;
+    background-color: @bg-color-secondarycontainer;
+    padding: 5rpx 10rpx;
+    color: @text-color-secondary;
+    border-right: 1rpx solid @component-border;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  &__td {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 5rpx 10rpx;
+    border-right: 1rpx solid @component-border;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.vue b/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.vue
new file mode 100644
index 000000000..1bd2be9a8
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown-table/chat-markdown-table.vue
@@ -0,0 +1,80 @@
+<template>
+  <view :class="classPrefix">
+    <view :class="classPrefix + '__container'">
+      <view :class="classPrefix + '__thead'">
+        <view :class="classPrefix + '__tr'">
+          <block
+            v-for="(th, j) in node.header"
+            :key="j"
+          >
+            <view
+              :class="classPrefix + '__th'"
+              :style="'text-align:' + node.align[j] || 'left' + ';'"
+            >
+              <chat-markdown-node :nodes="th.tokens" />
+            </view>
+          </block>
+        </view>
+      </view>
+      <view :class="classPrefix + '__tbody'">
+        <block
+          v-for="(row, k) in node.rows"
+          :key="k"
+        >
+          <view :class="classPrefix + '__tr'">
+            <block
+              v-for="(cell, l) in row"
+              :key="l"
+            >
+              <view
+                :class="classPrefix + '__td'"
+                :style="'text-align:' + node.align[l] || 'left' + ';'"
+              >
+                <chat-markdown-node :nodes="cell.tokens" />
+              </view>
+            </block>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 循环引用，未真正使用！
+import chatMarkdownNode from '../chat-markdown-node/chat-markdown-node';
+import { prefix } from 'tdesign-uniapp/common/config';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+
+const name = `${prefix}-chat-markdown-table`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    chatMarkdownNode,
+  },
+
+  props: {
+    node: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './chat-markdown-table.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-markdown/README.en-US.md
new file mode 100644
index 000000000..5f6a23d47
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/README.en-US.md
@@ -0,0 +1,17 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatMarkdown Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | String | - | required | Y
+options | Object | () => ({ gfm: true, pedantic: false, breaks: true }) | Typescript: `TdChatContentMDOptions ` `interface TdChatContentMDOptions {gfm?: boolean; pedantic?: boolean; smartLists?: boolean; breaks?: boolean}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-markdown/type.ts) | N
+
+### ChatMarkdown Events
+
+name | params | description
+-- | -- | --
+click | `(context: {detail:{event, node}, currentTarget, target})` | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/README.md b/packages/tdesign-uniapp-chat/components/chat-markdown/README.md
new file mode 100644
index 000000000..0d0113228
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/README.md
@@ -0,0 +1,60 @@
+---
+title: ChatMarkdown Markdown内容
+description: 用于聊天场景中渲染 Markdown 格式文本的组件，内置 marked 解析器，支持多种 Markdown 语法和配置选项。
+spline: base
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+```
+
+### 01 基础 Markdown 样式
+
+#### 标题与文本
+
+{{ base }}
+
+#### 列表
+
+{{ list }}
+
+### 02 代码块与表格
+
+#### 代码块
+
+{{ code }}
+
+#### 表格
+
+{{ sheet }}
+
+### 03 图片与超链接
+
+支持监听链接的点击事件
+
+{{ url }}
+
+### 04 引用
+
+{{ refer }}
+
+## API
+
+### ChatMarkdown Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | String | - | 必需。markdown 内容文本 | Y
+options | Object | () => ({ gfm: true, pedantic: false, breaks: true }) | Markdown 解析器基础配置。TS 类型：`TdChatContentMDOptions ` `interface TdChatContentMDOptions {gfm?: boolean; pedantic?: boolean; smartLists?: boolean; breaks?: boolean}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-markdown/type.ts) | N
+
+### ChatMarkdown Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: {detail:{event, node}, currentTarget, target})` | 点击链接时触发
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/index.vue
new file mode 100644
index 000000000..6e730b97c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+
+const markdownData = `
+# 一级标题
+
+## 二级标题
+
+### 三级标题
+
+#### 四级标题
+
+##### 五级标题
+
+###### 六级标题
+
+正文
+
+**加粗正文**
+
+~~删除线~~
+
+行内代码: \`console.log('Hello')\`
+`;
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+      uni.navigateTo({
+        url: e.node.href,
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/mock2.js b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/mock2.js
new file mode 100644
index 000000000..03033fb0e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/base/mock2.js
@@ -0,0 +1,104 @@
+const mockMarkdownData = `# Markdown功能测试 (H1标题)
+
+## 基础语法测试 (H2标题)
+
+### 文字样式 (H3标题)
+
+#### 文字样式 (H4标题)
+
+##### 文字样式 (H5标题)
+
+###### 文字样式 (H6标题)
+
+我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，我是很长的一段文字，
+
+**加粗文字**
+_斜体文字_
+~~删除线~~
+**_加粗且斜体_**
+行内代码: \`console.log('Hello')\`
+
+### 代码块测试
+
+\`\`\`javascript
+// JavaScript 代码块
+const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World')
+})
+
+app.listen(port, () => {
+  console.log(\`http://localhost:\${port}\`)
+})
+
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+greet('Markdown');
+\`\`\`
+
+\`\`\`python
+# Python 代码块
+def hello():
+    print("Markdown 示例")
+\`\`\`
+
+### 列表测试
+
+- 无序列表项1
+- 无序列表项2
+  - 嵌套列表项
+  - 嵌套列表项
+
+1. 有序列表项1
+2. 有序列表项2
+
+### 表格测试
+
+| 左对齐     | 居中对齐 | 右对齐 | 内容 |
+| :--------- | :------: | -----: | ----- |
+| 单元格     |  单元格  | 单元格 | 单元格 |
+| 长文本示例| 长文本示例长文本示例长文本示例 |   $100 | 文本内容 |
+| 文本示例 | 文本内容 | $100 |  文本内容 |
+
+![示例](https://tdesign.gtimg.com/demo/demo-image-1.png "示例")
+
+### 其他元素
+
+> 引用文本块
+> 多行引用内容
+
+---
+
+分割线测试（上方）
+
+块级公式
+$$
+E=mc^2
+$$
+
+行内公式 $\\sqrt{3x-1}+(1+x)^2$
+
+脚注测试[^1]
+
+[^1]: 这里是脚注内容
+
+这是一个链接 [Markdown语法](https://markdown.com.cn)。
+
+✅ 任务列表：
+
+- [ ] 未完成任务
+- [x] 已完成任务
+
+HTML混合测试：
+<br>（需要开启html选项）
+<small>辅助文字</small>
+
+特殊符号测试
+
+🌼👏🌟📷🌳💧😜❄⚠☔❌🌿👥⚠💎
+`;
+export default mockMarkdownData;
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.less b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.less
new file mode 100644
index 000000000..06ad5ded2
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.less
@@ -0,0 +1,17 @@
+.demo-block {
+    margin-bottom: 32rpx;
+    padding: 0;
+}
+
+.demo-block__title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 0;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #e7e7e7;
+}
+
+.demo-block__content {
+    min-height: 200rpx;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.vue
new file mode 100644
index 000000000..6e4f1cf7e
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/chat-markdown.vue
@@ -0,0 +1,68 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatMarkdown"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatMarkdown Markdown内容"
+        desc="用于聊天场景中渲染 Markdown 格式文本的组件，内置 marked 解析器，支持多种 Markdown 语法和配置选项。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 基础 Markdown 样式"
+        desc="标题与文本"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="列表">
+        <list />
+      </t-demo>
+      <t-demo
+        title="02 代码块与表格"
+        desc="代码块"
+      >
+        <codeDemo />
+      </t-demo>
+      <t-demo desc="表格">
+        <sheet />
+      </t-demo>
+      <t-demo title="03 图片与超链接">
+        <url />
+      </t-demo>
+      <t-demo title="04 引用">
+        <refer />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseDemo from './base/index.vue';
+import list from './list/index.vue';
+import codeDemo from './code/index.vue';
+import sheet from './sheet/index.vue';
+import url from './url/index.vue';
+import refer from './refer/index.vue';
+
+
+export default {
+  components: {
+    baseDemo,
+    list,
+    codeDemo,
+    sheet,
+    url,
+    refer,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-markdown.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/code/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/code/index.vue
new file mode 100644
index 000000000..abf29f115
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/code/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+
+const markdownData = `
+\`\`\`TDesign-登录表单.jsx
+import { Form, Input, Button, Message } from 'tdesign-react';
+const LoginForm = () => { const [loading, setLoading] = useState(false);
+\`\`\`
+`;
+
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+      uni.navigateTo({
+        url: e.node.href,
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/list/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/list/index.vue
new file mode 100644
index 000000000..1bc7cd061
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/list/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+
+const markdownData = `
+- 无序列表
+- 无序列表
+  - 嵌套列表
+  - 嵌套列表
+
+1. 有序列表
+2. 有序列表
+`;
+
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+      uni.navigateTo({
+        url: e.node.href,
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/refer/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/refer/index.vue
new file mode 100644
index 000000000..21cc7e0cf
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/refer/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+
+const markdownData = `
+下面是引用示例
+
+> TDesign distills Tencent's years of design experience into professional design guideline, providing universal design solutions that assist product managers, designers, developers, and other roles in efficiently completing the design and development of enterprise-level products, while maintaining consistent design language and style to meet user experience requirements.
+`;
+
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+      uni.navigateTo({
+        url: e.node.href,
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/sheet/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/sheet/index.vue
new file mode 100644
index 000000000..ae4c95056
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/sheet/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+const markdownData = `
+| 左对齐     | 居中对齐 | 右对齐 | 内容 |
+| :--------- | :------: | -----: | ----- |
+| 单元格     |  单元格  | 单元格 | 单元格 |
+| 长文本示例| 长文本示例长文本示例长文本示例 |   $100 | 文本内容 |
+| 文本示例 | 文本内容 | $100 |  文本内容 |
+`;
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+      uni.navigateTo({
+        url: e.node.href,
+      });
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/_example/url/index.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/url/index.vue
new file mode 100644
index 000000000..c545f5bf6
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/_example/url/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-markdown
+      :content="markdownContent"
+      @click="handleLinkTap"
+    />
+  </view>
+</template>
+
+<script>
+import tChatMarkdown from 'tdesign-uniapp-chat/chat-markdown/chat-markdown.vue';
+
+const markdownData = `
+![示例](https://tdesign.gtimg.com/demo/demo-image-1.png "示例")
+这是一个链接 [Markdown语法](https://markdown.com.cn)。
+`;
+
+export default {
+  components: {
+    tChatMarkdown,
+  },
+  data() {
+    return {
+      markdownContent: markdownData,
+    };
+  },
+  methods: {
+    handleLinkTap(e) {
+      // 打开链接
+      console.log('监听点击', e);
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+.demo-container {
+    padding: 32rpx;
+    background-color: #fff;
+}
+
+.text {
+    margin-left: 10rpx;
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.less b/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.less
new file mode 100644
index 000000000..978a69004
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.less
@@ -0,0 +1,192 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-markdown: ~'@{prefix}-chat-markdown';
+@chat-markdown-table: ~'@{prefix}-chat-markdown-table';
+
+@chat-markdown-color: @text-color-primary;
+@chat-markdown-line-height: 1.75;
+@chat-markdown-h1: 2em;
+@chat-markdown-h2: 1.75em;
+@chat-markdown-h3: 1.5em;
+@chat-markdown-h4: 1.25em;
+@chat-markdown-h5: 1em;
+@chat-markdown-h6: 0.75em;
+@chat-markdown-blockquote-color: @text-color-primary;
+@chat-markdown-blockquote-bg-color: @bg-color-secondarycontainer;
+@chat-markdown-blockquote-border: 4rpx solid @component-border;
+@chat-markdown-blockquote-padding: 0 0.75em;
+@chat-markdown-hr-height: 6rpx;
+@chat-markdown-link-color: @brand-color;
+@chat-markdown-codespan-bg-color: @bg-color-page;
+@chat-markdown-codespan-font-size: 0.8em;
+@chat-markdown-table-header-bg-color: @bg-color-component;
+@chat-markdown-table-padding: 5rpx 10rpx;
+
+.@{chat-markdown} {
+  color: @chat-markdown-color;
+  word-wrap: break-word;
+  word-break: break-word;
+  line-height: @chat-markdown-line-height;
+
+  // 内联样式
+  &-inline {
+    display: inline;
+  }
+
+  // 段落样式
+  &-p {
+    -webkit-margin-before: @spacer-1;
+    margin-block-start: @spacer-1;
+    -webkit-margin-after: @spacer-1;
+    margin-block-end: @spacer-1;
+
+    &:first-child {
+      -webkit-margin-before: 0;
+      margin-block-start: 0;
+    }
+
+    &:last-child {
+      -webkit-margin-after: 0;
+      margin-block-end: 0;
+    }
+  }
+
+  // 引用块样式
+  &-blockquote {
+    padding: @chat-markdown-blockquote-padding;
+    color: @chat-markdown-blockquote-color;
+    background-color: @chat-markdown-blockquote-bg-color;
+    border-left: @chat-markdown-blockquote-border;
+    margin-bottom: @spacer-1;
+  }
+
+  // 标题样式
+  &-h {
+    font-size: @chat-markdown-h5;
+    margin: @spacer-1 0;
+    font-weight: bold;
+
+    // 各级标题
+    &1 {
+      font-size: @chat-markdown-h1;
+    }
+
+    &2 {
+      font-size: @chat-markdown-h2;
+    }
+
+    &3 {
+      font-size: @chat-markdown-h3;
+    }
+
+    &4 {
+      font-size: @chat-markdown-h4;
+    }
+
+    &5 {
+      font-size: @chat-markdown-h5;
+    }
+
+    &6 {
+      font-size: @chat-markdown-h6;
+    }
+  }
+
+  // 强调样式
+  &-em {
+    font-style: italic;
+  }
+
+  // 加粗样式
+  &-strong {
+    font-weight: bold;
+  }
+
+  // 分割线样式
+  &-hr {
+    height: @chat-markdown-hr-height;
+    padding: 0;
+    margin: @spacer-1 0;
+    background-color: @component-border;
+    border: 0;
+  }
+
+  // 列表样式
+  &-list {
+    display: block;
+    padding: 0;
+    margin: 0 0 @spacer 1.5em;;
+
+    // 有序列表
+    &__decimal {
+      list-style-type: decimal;
+    }
+  }
+
+  // 列表项样式
+  &-list-item {
+    display: list-item;
+    margin-bottom: @spacer-1;
+  }
+
+  // 链接样式
+  &-link {
+    color: @chat-markdown-link-color;
+  }
+
+  // 删除线样式
+  &-del {
+    text-decoration: line-through;
+  }
+
+  // 代码样式
+  &-codespan {
+    padding: 4rpx 8rpx;
+    margin: 0 4rpx;
+    border-radius: 8rpx;
+    font-size: @chat-markdown-codespan-font-size;
+    overflow-x: auto;
+    background-color: @chat-markdown-codespan-bg-color;
+    border: 1rpx solid @component-border;
+  }
+
+  // 表格样式
+  .@{chat-markdown-table}__container {
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+
+    // 表头组
+    &-thead {
+      display: table-header-group;
+    }
+
+    // 表体组
+    &-tbody {
+      display: table-row-group;
+    }
+
+    // 表格行
+    &-tr {
+      display: table-row;
+    }
+
+    // 表头单元格
+    &-th {
+      display: table-cell;
+      vertical-align: middle;
+      background-color: @chat-markdown-table-header-bg-color;
+      font-weight: bold;
+      padding: @chat-markdown-table-padding;
+      border: 1rpx solid @component-border;
+    }
+
+    // 表格单元格
+    &-td {
+      display: table-cell;
+      vertical-align: middle;
+      padding: @chat-markdown-table-padding;
+      border: 1rpx solid @component-border;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.vue b/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.vue
new file mode 100644
index 000000000..fd7b98a62
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/chat-markdown.vue
@@ -0,0 +1,80 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + classPrefix + '--normal'"
+    :style="_._style([customStyle])"
+  >
+    <chat-markdown-node :nodes="nodes" />
+  </view>
+</template>
+<script>
+import chatMarkdownNode from '../chat-markdown-node/chat-markdown-node.vue';
+import { Lexer } from '../npm/marked';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+
+const name = `${prefix}-chat-markdown`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    chatMarkdownNode,
+  },
+
+  props: {
+    ...props,
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+      nodes: [], // 解析后的节点
+      name, // 用于子组件查询父组件时的标识符
+      _,
+    };
+  },
+
+  watch: {
+    content: {
+      handler(markdown) {
+        this.parseMarkdown(markdown);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  methods: {
+    // 解析markdown文本
+    parseMarkdown(markdown) {
+      try {
+        const lexer = new Lexer(this.options);
+        const tokens = lexer.lex(markdown);
+
+        this.nodes = tokens;
+      } catch (error) {
+        console.error('Markdown parsing error:', error);
+        // 解析失败时，将原始文本作为普通文本显示
+        this.nodes = [
+          {
+            type: 'text',
+            raw: markdown,
+            text: markdown,
+          },
+        ];
+      }
+    },
+  },
+
+});
+</script>
+<style scoped>
+@import './chat-markdown.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/props.ts b/packages/tdesign-uniapp-chat/components/chat-markdown/props.ts
new file mode 100644
index 000000000..4eaccdcdd
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/props.ts
@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** markdown 内容文本 */
+  content: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /** Markdown 解析器基础配置 */
+  options: {
+    type: Object,
+    default: () => ({ gfm: true, pedantic: false, breaks: true }),
+  },
+  /** 点击链接时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-markdown/type.ts b/packages/tdesign-uniapp-chat/components/chat-markdown/type.ts
new file mode 100644
index 000000000..de0a82116
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-markdown/type.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdChatMarkdownProps {
+  /**
+   * markdown 内容文本
+   * @default ''
+   */
+  content: string;
+  /**
+   * Markdown 解析器基础配置
+   * @default () => ({ gfm: true, pedantic: false, breaks: true })
+   */
+  options?: TdChatContentMDOptions;
+  /**
+   * 点击链接时触发
+   */
+  onClick?: (context: { detail: { event; node }; currentTarget; target }) => void;
+}
+
+export interface TdChatContentMDOptions {
+  gfm?: boolean;
+  pedantic?: boolean;
+  smartLists?: boolean;
+  breaks?: boolean;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-message/README.en-US.md
new file mode 100644
index 000000000..6f6e26ed7
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/README.en-US.md
@@ -0,0 +1,31 @@
+
+## API
+
+### ChatMessage Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | String | skeleton | options: skeleton/moving/gradient/dots | N
+avatar | String | - | \- | N
+chat-content-props | Object | - | Typescript: `ChatContentProps`，[ChatContent API Documents](./chat-content?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-message/type.ts) | N
+chat-id | String | - | \- | N
+content | Array | - | Typescript: `ChatMessageContent[] ` `type ChatMessageContent = TextContent \| MarkdownContent \| ThinkingContent \| AttachmentContent` ` type AttachmentContent = ChatBaseContent<'attachment', FileItem[]>` `type ThinkingContent = ChatBaseContent<'thinking', ThinkingContentData>` `type MarkdownContent = ChatBaseContent<'markdown', string>` `type TextContent = ChatBaseContent<'text', string>` `interface ThinkingContentData {title?: string; text: string}` `interface ChatBaseContent<T extends ChatContentType, TData> {type: T; data: TData}` `type ChatMessageStatus = 'pending' \| 'streaming' \| 'complete' \| 'stop' \| 'error'` `type ChatContentType = \| 'text' \| 'markdown' \| 'thinking' \| 'attachment'`，[Attachments API Documents](./attachments?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-message/type.ts) | N
+datetime | String | - | \- | N
+name | String | - | \- | N
+placement | String | - | options: left/right | N
+role | String | user | options: user/assistant/system | N
+status | String | - | options: pending/streaming/complete/stop/error  | N
+variant | String | base | options: base/outline/text | N
+
+### ChatMessage Events
+
+name | params | description
+-- | -- | --
+longpress | `(context: { e: MouseEvent, id: string })` | \-
+
+### ChatMessage Slots
+
+name | \-
+avatar | \-
+datetime | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/README.md b/packages/tdesign-uniapp-chat/components/chat-message/README.md
new file mode 100644
index 000000000..f6f6a2fbd
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/README.md
@@ -0,0 +1,79 @@
+---
+title: ChatMessage 对话消息体
+description: 用于在聊天对话中显示单个消息项。它可以展示用户的头像、昵称、时间、聊天内容，支持多种消息状态和样式变体。
+spline: base
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+```
+
+### 01 组件类型
+
+#### 基础类型
+
+{{ base }}
+
+#### 可配置昵称、头像、对齐方式
+
+{{ configure }}
+
+#### 配置消息属性
+
+支持`avatar`，`name`，`datetime`，`content`插槽自定义, `content`插槽使用建议：渲染聊天消息统一用 `t-chat-content`；仅在需要“单独使用 Markdown 组件”时使用 `t-chat-markdown`。也支持别的 markdown 渲染组件，选择其他 markdown 渲染库由用户自行安装。
+
+{{ content }}
+
+### 02 组件状态
+
+#### 加载状态
+
+{{ status }}
+
+#### 出错状态
+
+{{ error }}
+
+### 03 组件样式
+
+#### 气泡样式
+
+{{ style }}
+
+## API
+
+### ChatMessage Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | String | skeleton | 动画效果。可选项：skeleton/moving/gradient/dots | N
+avatar | String | - | 自定义的头像配置 | N
+chat-content-props | Object | - | 聊天内容组件的属性。TS 类型：`ChatContentProps`，[ChatContent API Documents](./chat-content?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-message/type.ts) | N
+chat-id | String | - | 聊天消息的唯一标识 | N
+content | Array | - | 消息内容，数组中的每一项为一个消息内容对象。TS 类型：`ChatMessageContent[] ` `type ChatMessageContent = TextContent \| MarkdownContent \| ThinkingContent \| AttachmentContent` ` type AttachmentContent = ChatBaseContent<'attachment', FileItem[]>` `type ThinkingContent = ChatBaseContent<'thinking', ThinkingContentData>` `type MarkdownContent = ChatBaseContent<'markdown', string>` `type TextContent = ChatBaseContent<'text', string>` `interface ThinkingContentData {title?: string; text: string}` `interface ChatBaseContent<T extends ChatContentType, TData> {type: T; data: TData}` `type ChatMessageStatus = 'pending' \| 'streaming' \| 'complete' \| 'stop' \| 'error'` `type ChatContentType = \| 'text' \| 'markdown' \| 'thinking' \| 'attachment'`，[Attachments API Documents](./attachments?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-message/type.ts) | N
+datetime | String | - | 对话单元的时间配置 | N
+name | String | - | 自定义的昵称 | N
+placement | String | - | 消息显示位置。可选项：left/right | N
+role | String | user | 消息角色。可选项：user/assistant/system | N
+status | String | - | 消息状态。可选项：pending/streaming/complete/stop/error  | N
+variant | String | base | 气泡框样式，支持基础、线框、文字三种类型。可选项：base/outline/text | N
+
+### ChatMessage Events
+
+名称 | 参数 | 描述
+-- | -- | --
+longpress | `(context: { e: MouseEvent, id: string })` | \-
+
+### ChatMessage Slots
+
+名称 | 描述
+-- | --
+avatar | 自定义 `avatar` 显示内容
+datetime | 自定义 `datetime` 显示内容
+name | 自定义 `name` 显示内容
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/base/index.vue
new file mode 100644
index 000000000..9364a2330
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/base/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="userMessage.content"
+        :role="userMessage.role"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+
+export default {
+  components: {
+    tChatMessage,
+  },
+  props: {
+    userMessage: {
+      type: Object,
+      default: () => ({
+        role: 'user',
+
+        content: [
+          {
+            type: 'text',
+            data: '牛顿第一定律是否适用于所有参考系？',
+          },
+        ],
+      }),
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.less b/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.less
new file mode 100644
index 000000000..6cc02a933
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.less
@@ -0,0 +1,7 @@
+.t-button {
+    margin-right: 32rpx;
+}
+
+.t-button:last-child {
+    margin-right: 0;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.vue
new file mode 100644
index 000000000..8e075b2e9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/chat-message.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatMessage"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatMessage 对话消息体"
+        desc="用于在聊天对话中显示单个消息项。它可以展示用户的头像、昵称、时间、聊天内容，支持多种消息状态和样式变体。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础类型"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="可配置昵称、头像、对齐方式">
+        <configure />
+      </t-demo>
+      <t-demo desc="配置消息属性">
+        <contentDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="加载状态"
+      >
+        <status />
+      </t-demo>
+      <t-demo desc="出错状态">
+        <error />
+      </t-demo>
+      <t-demo
+        title="03 组件样式"
+        desc="气泡样式"
+      >
+        <styleDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import baseDemo from './base/index.vue';
+import styleDemo from './style/index.vue';
+import configure from './configure/index.vue';
+import status from './status/index.vue';
+import contentDemo from './content/index.vue';
+import error from './error/index.vue';
+
+export default {
+  components: {
+    baseDemo,
+    styleDemo,
+    configure,
+    status,
+    contentDemo,
+    error,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-message.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/configure/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/configure/index.vue
new file mode 100644
index 000000000..7e193277d
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/configure/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-message
+        datetime="16:38"
+        name="张三"
+        :content="message.content"
+        :role="message.role"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        datetime="16:38"
+        name="TDesignAI"
+        :content="message.content"
+        :role="message.role"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        datetime="16:38"
+        name="TDesignAI"
+        :content="message.content"
+        :role="message.role"
+        placement="right"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+
+
+export default {
+  components: {
+    tChatMessage,
+  },
+  data() {
+    return {
+      message: {
+        role: 'system',
+        content: [
+          {
+            type: 'text',
+            data: '牛顿第一定律是否适用于所有参考系？',
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/content/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/content/index.vue
new file mode 100644
index 000000000..097ec4c32
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/content/index.vue
@@ -0,0 +1,244 @@
+<template>
+  <view class="chat-example">
+    <!-- 附件消息 -->
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="pic1.content"
+        :role="pic1.role"
+        :chat-content-props="chatContentProps"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="pic2.content"
+        :role="pic2.role"
+        :chat-content-props="chatContentProps"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="pic3.content"
+        :role="pic3.role"
+        placement="right"
+        :chat-content-props="chatContentProps"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="fileMessage.content"
+        :role="fileMessage.role"
+        :chat-content-props="chatContentProps"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="fileMessage.content"
+        :role="fileMessage.role"
+        placement="right"
+        :chat-content-props="chatContentProps"
+      />
+    </view>
+    <!-- 思考过程消息 -->
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="aiMessage.content"
+        :role="aiMessage.role"
+        :status="aiMessage.status"
+        variant="text"
+      >
+        <template #actionbar>
+          <t-chat-actionbar />
+        </template>
+      </t-chat-message>
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+import tChatActionbar from 'tdesign-uniapp-chat/chat-actionbar/chat-actionbar.vue';
+
+
+export default {
+  components: {
+    tChatMessage,
+    tChatActionbar,
+  },
+  data() {
+    return {
+      aiMessage: {
+        role: 'assistant',
+        status: 'complete',
+        content: [
+          {
+            type: 'thinking',
+            data: {
+              title: '已完成思考（耗时3秒）',
+              text: '好的，我现在需要回答用户关于对比近3年当代偶像爱情剧并总结创作经验的问题\n查询网络信息中...\n根据网络搜索结果，成功案例包括《春色寄情人》《要久久爱》《你也有今天》等，但缺乏具体播放数据，需要结合行业报告总结共同特征。2022-2024年偶像爱情剧的创作经验主要集中在题材创新、现实元素融入、快节奏叙事等方面。结合行业报告和成功案例，总结出以下创作经验。',
+            },
+          },
+          {
+            type: 'text',
+            data: '不，牛顿第一定律并不适用于所有参考系。它只适用于惯性参考系。',
+          },
+        ],
+      },
+
+      pic1: {
+        role: 'user',
+        content: [
+          {
+            type: 'attachment',
+            data: [
+              {
+                fileType: 'image',
+                name: 'avatar.jpg',
+                size: 234234,
+                url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+                width: 1920,
+                // 图片实际宽度
+                height: 1080, // 图片实际高度
+              },
+            ],
+          },
+          {
+            type: 'text',
+            data: '分析以下内容，总结一篇广告策划方案',
+          },
+        ],
+      },
+
+      pic3: {
+        role: 'user',
+        content: [
+          {
+            type: 'attachment',
+            data: [
+              {
+                fileType: 'image',
+                name: 'avatar.jpg',
+                size: 234234,
+                url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+                width: 1920,
+                // 图片实际宽度
+                height: 1080, // 图片实际高度
+              },
+            ],
+          },
+          {
+            type: 'text',
+            data: '分析以下',
+          },
+        ],
+      },
+
+      pic2: {
+        role: 'user',
+        content: [
+          {
+            type: 'attachment',
+            data: [
+              {
+                fileType: 'image',
+                name: 'avatar.jpg',
+                size: 234234,
+                url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+                width: 1920,
+                // 为了更好的适配不同尺寸图片建议传入宽高，不传也有兜底尺寸
+                height: 1080, // 为了更好的适配不同尺寸图片建议传入宽高，不传也有兜底尺寸
+              },
+              {
+                fileType: 'image',
+                name: 'avatar2.jpg',
+                size: 234234,
+                url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+                width: 1920,
+                // 图片实际宽度
+                height: 1080, // 图片实际高度
+              },
+            ],
+          },
+          {
+            type: 'text',
+            data: '分析以下内容，总结一篇广告策划方案',
+          },
+        ],
+      },
+
+      fileMessage: {
+        role: 'user',
+        content: [
+          {
+            type: 'attachment',
+            data: [
+              {
+                fileType: 'doc',
+                name: 'word-file.doc',
+                url: 'https://example.com/word-file.doc',
+                size: 222859,
+                status: 'success',
+              },
+              {
+                fileType: 'excel',
+                name: 'excel-file.xlsx',
+                url: 'https://example.com/excel-file.xlsx',
+                size: 222859,
+                status: 'success',
+              },
+              {
+                fileType: 'pdf',
+                name: 'pdf-file.pdf',
+                url: 'https://example.com/pdf-file.pdf',
+                size: 222859,
+                status: 'success',
+              },
+              {
+                fileType: 'ppt',
+                name: 'ppt-file.pptx',
+                url: 'https://example.com/ppt-file.pptx',
+                size: 222859,
+                status: 'success',
+              },
+              {
+                fileType: 'video',
+                name: 'video-file.mp4',
+                url: 'https://example.com/video-file.mp4',
+                size: 222859,
+                status: 'success',
+              },
+              {
+                fileType: 'file',
+                name: 'file',
+                url: 'https://example.com/audio-file.mp3',
+                size: 222859,
+                status: 'success',
+              },
+            ],
+          },
+          {
+            type: 'text',
+            data: '不，牛顿第一定律并不适用于所有参考系。它只适用于惯性参考系。',
+          },
+        ],
+      },
+
+      chatContentProps: [],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/error/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/error/index.vue
new file mode 100644
index 000000000..9fe16b8be
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/error/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        :content="message.content"
+        :role="message.role"
+        status="error"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+
+
+export default {
+  components: {
+    tChatMessage,
+  },
+  data() {
+    return {
+      message: {
+        role: 'assistant',
+        status: 'error',
+        content: [
+          {
+            type: 'text',
+            data: '´• •`!!!请求出错',
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/status/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/status/index.vue
new file mode 100644
index 000000000..ad198b276
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/status/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        :content="message.content"
+        :role="message.role"
+        animation="gradient"
+        :status="message.status"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        :content="message.content"
+        :role="message.role"
+        animation="skeleton"
+        :status="message.status"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+
+
+export default {
+  components: {
+    tChatMessage,
+  },
+  data() {
+    return {
+      message: {
+        role: 'assistant',
+        status: 'pending',
+        content: [
+          {
+            type: 'text',
+            data: '牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/_example/style/index.vue b/packages/tdesign-uniapp-chat/components/chat-message/_example/style/index.vue
new file mode 100644
index 000000000..e6038a61a
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/_example/style/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view class="chat-example">
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="userMessage.content"
+        :role="userMessage.role"
+        variant="text"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="userMessage.content"
+        :role="userMessage.role"
+        variant="base"
+      />
+    </view>
+    <view class="chat-example-block">
+      <t-chat-message
+        :content="userMessage.content"
+        :role="userMessage.role"
+        variant="outline"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatMessage from 'tdesign-uniapp-chat/chat-message/chat-message.vue';
+
+
+export default {
+  components: {
+    tChatMessage,
+  },
+  props: {
+    userMessage: {
+      type: Object,
+      default: () => ({
+        role: 'user',
+
+        content: [
+          {
+            type: 'text',
+            data: '牛顿第一定律是否适用于所有参考系？',
+          },
+        ],
+      }),
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx 32rpx 0 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/chat-message.less b/packages/tdesign-uniapp-chat/components/chat-message/chat-message.less
new file mode 100644
index 000000000..03cbce877
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/chat-message.less
@@ -0,0 +1,252 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-list: ~'@{prefix}-chat-list';
+@chat-content-pure: ~'@{prefix}-chat-content';
+@chat-content: ~':deep(.@{chat-content-pure})';
+@chat-message: ~'@{prefix}-chat-message';
+@chat-thinking: ~'@{prefix}-chat-thinking';
+@attachments: ~'@{prefix}-attachments';
+
+@chat-message-content-padding: 24rpx 32rpx;
+@chat-message-height: 44rpx;
+
+// 反向列表样式
+.@{chat-list}__content--reverse {
+  .@{chat-message} {
+    -webkit-transform: scaleY(-1);
+    transform: scaleY(-1);
+  }
+}
+
+:deep(.@{attachments} + @{chat-content-pure}:not(:empty)),
+:deep(.@{chat-thinking} + @{chat-content-pure}:not(:empty)){
+  margin-top: 24rpx;
+}
+
+.@{chat-message} {
+  display: flex;
+  margin-bottom: @spacer-2;
+
+  // 头像样式
+  .@{chat-message}__avatar {
+    flex: 0 0 auto;
+    padding-top: 0rpx;
+  }
+
+  // 内容容器样式
+  .@{chat-message}__content {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  // 基础内容样式
+  .@{chat-message}__content--base {
+    padding-top: @spacer-3;
+  }
+
+  // 详情容器样式
+  .@{chat-message}__detail {
+    max-width: 100%;
+    box-sizing: border-box;
+    display: contents;
+  }
+
+  // 有头部时的样式
+  &__header {
+    .@{chat-message}__avatar {
+      padding-top: calc(@chat-message-height + @spacer);
+    }
+  }
+
+  // 用户消息样式
+  &.user {
+    .@{chat-message}__base {
+      padding-right: @spacer-2;
+    }
+
+    @{chat-content} {
+      max-width: 90%;
+    }
+  }
+
+  // 助手消息样式
+  &.assistant {
+    .@{chat-message}__base {
+      padding-left: @spacer-2;
+    }
+  }
+
+  // 错误消息样式
+  &.error {
+    .@{chat-message}__base {
+      padding-left: @spacer-2;
+    }
+    .@{chat-message}__text--error {
+      color: @error-color-6;
+    }
+  }
+
+  // 左侧布局样式
+  &.left {
+    display: flex;
+    flex-direction: row;
+
+    .@{chat-message}__content {
+      align-items: flex-start;
+    }
+
+    .@{chat-message}__base {
+      padding-left: @spacer-2;
+    }
+  }
+
+  // 右侧布局样式
+  &.right {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .@{chat-message}__content {
+      align-items: flex-end;
+    }
+
+    .@{chat-message}__base {
+      padding-right: @spacer-2;
+    }
+
+    .@{chat-message}__avatar {
+      margin-left: @spacer-1;
+      margin-right: 0;
+    }
+  }
+
+  // 头像样式
+  &__avatar {
+    flex-shrink: 0;
+    cursor: pointer;
+    display: flex;
+    margin-right: @spacer-1;
+    padding-top: calc(@chat-message-height + @spacer);
+
+    &-image {
+      width: @spacer-4;
+      height: @spacer-4;
+      border-radius: @radius-circle;
+    }
+  }
+
+  // 内容容器样式
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    font-size: @font-size-m;
+    line-height: 48rpx;
+    font-family: @font-family;
+
+    .t-skeleton {
+      width: 100%;
+      // padding: @spacer-2;
+    }
+  }
+
+  // 基础信息样式
+  &__base {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: @chat-message-height;
+    font-size: @font-size-base;
+    line-height: @chat-message-height;
+    font-family: @font-family;
+    color: @text-color-placeholder;
+    // padding-left: @spacer-2;
+    margin-bottom: @spacer;
+  }
+
+  // 名称样式
+  &__name {
+    padding-right: @spacer;
+    cursor: pointer;
+  }
+
+  // 气泡框样式：纯文本
+  &--text {
+    @{chat-content} {
+      &__user,
+      &__assistant {
+        color: @text-color-secondary;
+      }
+    }
+  }
+
+  // 气泡框样式：基础
+  &--base {
+    @{chat-content} {
+      padding: @chat-message-content-padding;
+      background-color: @bg-color-secondarycontainer;
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.assistant @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+      background-color: transparent;
+      padding: 0;
+    }
+
+    &.user @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.left @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.right @{chat-content} {
+      border-radius: @radius-extraLarge 0 @radius-extraLarge @radius-extraLarge;
+    }
+  }
+
+  // 气泡框样式：线框
+  &--outline {
+    @{chat-content} {
+      padding: @chat-message-content-padding;
+      border: 1rpx solid @component-border;
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.assistant @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.user @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.left @{chat-content} {
+      border-radius: 0 @radius-extraLarge @radius-extraLarge @radius-extraLarge;
+    }
+
+    &.right @{chat-content} {
+      border-radius: @radius-extraLarge 0 @radius-extraLarge @radius-extraLarge;
+    }
+  }
+
+  &--base,
+  &--outline,
+  &--text {
+    &.right {
+      :deep(.@{attachments}__scrollable) {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &__actionbar {
+    --chat-actionbar-padding: @spacer-1 0 0 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/chat-message.vue b/packages/tdesign-uniapp-chat/components/chat-message/chat-message.vue
new file mode 100644
index 000000000..c8f054fa3
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/chat-message.vue
@@ -0,0 +1,176 @@
+<template>
+  <view
+    :class="chatItemClass"
+    :style="_._style([customStyle])"
+    @longpress="handleLongPress"
+  >
+    <view
+      v-if="avatar"
+      :class="classPrefix + '__avatar'"
+    >
+      <block v-if="avatar">
+        <image
+          :src="avatar"
+          :class="classPrefix + '__avatar-image'"
+        />
+      </block>
+    </view>
+    <view :class="contentClasses">
+      <view
+        v-if="name || datetime"
+        :class="classPrefix + '__base'"
+      >
+        <text
+          v-if="name"
+          :class="classPrefix + '__name'"
+        >
+          {{ name }}
+        </text>
+        <text
+          v-if="datetime"
+          :class="classPrefix + '__time'"
+        >
+          {{ datetime }}
+        </text>
+      </view>
+      <block v-if="status === 'pending'">
+        <view style="width: 100%">
+          <chat-loading :animation="animation" />
+        </view>
+      </block>
+      <block v-else>
+        <view :class="classPrefix + '__detail'">
+          <!-- 属性传值优先级高于content插槽 -->
+          <block v-if="content && content.length > 0">
+            <block
+              v-for="(item, index) in content"
+              :key="index"
+            >
+              <attachments
+                v-if="item.type === 'attachment' && role === 'user'"
+                :items="item.data"
+                :removable="false"
+                :in-chat="true"
+              />
+
+              <chat-thinking
+                v-if="item.type === 'thinking'"
+                :content="item.data"
+                :role="role"
+                :status="['complete', 'stop', 'error', 'pending'].indexOf(status) < 0 ? 'pending' : status"
+              />
+
+              <chat-content
+                v-else-if="item.type === 'text' || item.type === 'markdown'"
+                :content="item"
+                :role="role"
+                :status="status === 'error' ? 'error' : ''"
+              />
+            </block>
+          </block>
+          <block v-else>
+            <slot name="content" />
+          </block>
+        </view>
+      </block>
+      <view
+        v-if="role === 'assistant'"
+        :class="classPrefix + '__actionbar'"
+      >
+        <slot name="actionbar" />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import chatContent from '../chat-content/chat-content.vue';
+import chatThinking from '../chat-thinking/chat-thinking.vue';
+import chatLoading from '../chat-loading/chat-loading.vue';
+import attachments from '../attachments/attachments.vue';
+
+import props from './props';
+import { prefix } from 'tdesign-uniapp/common/config';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+
+const name = `${prefix}-chat-message`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    chatContent,
+    chatThinking,
+    chatLoading,
+    attachments,
+  },
+
+  props: {
+    ...props,
+  },
+
+  data() {
+    return {
+      classPrefix: name,
+      article: '',
+      contentClasses: [],
+      chatItemClass: [],
+
+      _,
+    };
+  },
+
+  watch: {
+    classPrefix() {
+      this.setContentClasses();
+      this.setChatItemClass();
+    },
+    variant: {
+      handler() {
+        this.setChatItemClass();
+      },
+    },
+    placement: {
+      handler() {
+        this.setChatItemClass();
+      },
+    },
+  },
+
+  mounted() {
+    this.setContentClasses();
+    this.setChatItemClass();
+  },
+
+  methods: {
+    handleLongPress(e) {
+      this.$emit('longpress', {
+        e,
+        id: this.chatId,
+      });
+    },
+
+    setContentClasses() {
+      this.contentClasses = [`${this.classPrefix}__content`];
+    },
+
+    setChatItemClass() {
+      const { classPrefix, datetime } = this;
+      const { variant, role, placement } = this;
+      const baseClass = [`${classPrefix}`, `${classPrefix}--${variant}`, role, placement];
+      if (datetime) {
+        baseClass.push(`${classPrefix}__header`);
+      }
+      this.chatItemClass = baseClass;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './chat-message.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/props.ts b/packages/tdesign-uniapp-chat/components/chat-message/props.ts
new file mode 100644
index 000000000..48afd3ce1
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/props.ts
@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatMessageProps } from './type';
+export default {
+  /** 动画效果 */
+  animation: {
+    type: String,
+    default: 'skeleton' as TdChatMessageProps['animation'],
+    validator(val: TdChatMessageProps['animation']): boolean {
+      if (!val) return true;
+      return ['skeleton', 'moving', 'gradient', 'dots'].includes(val);
+    },
+  },
+  /** 自定义的头像配置 */
+  avatar: {
+    type: String,
+  },
+  /** 聊天内容组件的属性 */
+  chatContentProps: {
+    type: Object,
+  },
+  /** 聊天消息的唯一标识 */
+  chatId: {
+    type: String,
+    default: '',
+  },
+  /** 消息内容，数组中的每一项为一个消息内容对象 */
+  content: {
+    type: Array,
+  },
+  /** 对话单元的时间配置 */
+  datetime: {
+    type: String,
+  },
+  /** 自定义的昵称 */
+  name: {
+    type: String,
+  },
+  /** 消息显示位置 */
+  placement: {
+    type: String,
+    validator(val: TdChatMessageProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 消息角色 */
+  role: {
+    type: String,
+    default: 'user' as TdChatMessageProps['role'],
+    validator(val: TdChatMessageProps['role']): boolean {
+      if (!val) return true;
+      return ['user', 'assistant', 'system'].includes(val);
+    },
+  },
+  /** 消息状态 */
+  status: {
+    type: String,
+    validator(val: TdChatMessageProps['status']): boolean {
+      if (!val) return true;
+      return ['pending', 'streaming', 'complete', 'stop', 'error'].includes(val);
+    },
+  },
+  /** 气泡框样式，支持基础、线框、文字三种类型 */
+  variant: {
+    type: String,
+    default: 'base' as TdChatMessageProps['variant'],
+    validator(val: TdChatMessageProps['variant']): boolean {
+      if (!val) return true;
+      return ['base', 'outline', 'text'].includes(val);
+    },
+  },
+  /** null */
+  onLongpress: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-message/type.ts b/packages/tdesign-uniapp-chat/components/chat-message/type.ts
new file mode 100644
index 000000000..e39efcaee
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-message/type.ts
@@ -0,0 +1,87 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatContentProps as ChatContentProps } from '../chat-content/type';
+import type { FileItem } from '../attachments/type';
+
+export interface TdChatMessageProps {
+  /**
+   * 动画效果
+   * @default skeleton
+   */
+  animation?: 'skeleton' | 'moving' | 'gradient' | 'dots';
+  /**
+   * 自定义的头像配置
+   */
+  avatar?: string;
+  /**
+   * 聊天内容组件的属性
+   */
+  chatContentProps?: ChatContentProps;
+  /**
+   * 聊天消息的唯一标识
+   * @default ''
+   */
+  chatId?: string;
+  /**
+   * 消息内容，数组中的每一项为一个消息内容对象
+   */
+  content?: ChatMessageContent[];
+  /**
+   * 对话单元的时间配置
+   */
+  datetime?: string;
+  /**
+   * 自定义的昵称
+   */
+  name?: string;
+  /**
+   * 消息显示位置
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 消息角色
+   * @default user
+   */
+  role?: 'user' | 'assistant' | 'system';
+  /**
+   * 消息状态
+   */
+  status?: 'pending' | 'streaming' | 'complete' | 'stop' | 'error';
+  /**
+   * 气泡框样式，支持基础、线框、文字三种类型
+   * @default base
+   */
+  variant?: 'base' | 'outline' | 'text';
+  /**
+   * null
+   */
+  onLongpress?: (context: { e: MouseEvent; id: string }) => void;
+}
+
+export type ChatMessageContent = TextContent | MarkdownContent | ThinkingContent | AttachmentContent;
+
+export type AttachmentContent = ChatBaseContent<'attachment', FileItem[]>;
+
+export type ThinkingContent = ChatBaseContent<'thinking', ThinkingContentData>;
+
+export type MarkdownContent = ChatBaseContent<'markdown', string>;
+
+export type TextContent = ChatBaseContent<'text', string>;
+
+export interface ThinkingContentData {
+  title?: string;
+  text: string;
+}
+
+export interface ChatBaseContent<T extends ChatContentType, TData> {
+  type: T;
+  data: TData;
+}
+
+export type ChatMessageStatus = 'pending' | 'streaming' | 'complete' | 'stop' | 'error';
+
+export type ChatContentType = 'text' | 'markdown' | 'thinking' | 'attachment';
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-sender/README.en-US.md
new file mode 100644
index 000000000..ef58a0ad7
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/README.en-US.md
@@ -0,0 +1,39 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatSender Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+adjust-position | Boolean | false | \- | N
+attachments-props | Object | - | Typescript: `AttachmentsProps`，[Attachments API Documents](./attachments?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-sender/type.ts) | N
+auto-rise-with-keyboard | Boolean | false | \- | N
+disabled | Boolean | false | \- | N
+file-list | Array | [] | Typescript: `FileItem[]` | N
+loading | Boolean | false | \- | N
+placeholder | String | 请输入消息... | \- | N
+render-presets | Array | [{name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: ''},{ name: 'send', type: 'icon'}] | Typescript: `ChatActionButtons` `type ChatActionButtons = Array<ChatActionButton>` `type ChatActionButton = UploadButton \| SendButton` `interface UploadButton { name: 'upload'; presets: string[]; status?: string; }` `interface SendButton { name: 'send'; type: 'icon' \| 'text';}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-sender/type.ts) | N
+textarea-props | Boolean / Object | { autosize: { maxHeight: 264, minHeight: 48 } } | \- | N
+value | String | - | input value | N
+visible | Boolean | false | \- | N
+
+### ChatSender Events
+
+name | params | description
+-- | -- | --
+blur | `(value:string, context: { e: FocusEvent })` | \-
+change | `(value:string, context: { e: InputEvent \| MouseEvent \| KeyboardEvent })` | \-
+file-add | \- | \-
+file-change | `(file:FileItem)` | \-
+file-click | `(file:FileItem)` | \-
+file-delete | `(file:FileItem)` | \-
+file-select | `(context: {files: FileList, name: UploadActionType})` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/chat-sender/type.ts)。<br/>`type UploadActionType = 'uploadAttachment' \| 'uploadImage'`<br/>
+focus | `(value:string, context: { e: FocusEvent }) ` | \-
+keyboardheightchange | `(context: {height: number, duration: number})` | \-
+send | `(value:string, context: { e: MouseEvent \| KeyboardEvent })` | \-
+stop | `(value:string, context: { e: MouseEvent })` | \-
+update-value | `(value: boolean)` | \-
+update-visible | `(value: boolean)` | \-
+upload-click | \- | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/README.md b/packages/tdesign-uniapp-chat/components/chat-sender/README.md
new file mode 100644
index 000000000..12e38d68f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/README.md
@@ -0,0 +1,76 @@
+---
+title: ChatSender 对话输入
+description: 用于聊天对话的输入框，可以扩展模型、多模态等能力。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+```
+
+### 01 组件类型
+
+#### 基础类型
+
+{{ base }}
+
+#### 上传文件
+
+支持选择附件及展示附件列表，受控进行文件数据管理，示例中模拟了文件上传流程
+
+{{ attachments }}
+
+#### 内容引用
+输入框顶部区域 `header` ，输入框底部左侧区域 `footer-prefix` ，输入框底部操作区域 `suffix`
+
+{{ content-citation }}
+
+#### 文件引用
+
+输入框顶部区域 `header` ，输入框底部左侧区域 `footer-prefix` ，输入框底部操作区域 `suffix`
+
+{{ file-citation }}
+
+## API
+
+### ChatSender Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+adjust-position | Boolean | false | 默认键盘弹起不会把页面顶起来 | N
+attachments-props | Object | - | 附件列表属性。TS 类型：`AttachmentsProps`，[Attachments API Documents](./attachments?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-sender/type.ts) | N
+auto-rise-with-keyboard | Boolean | false | 键盘弹起时自动顶起来输入框 | N
+disabled | Boolean | false | 是否禁用输入框 | N
+file-list | Array | [] | 附件文件列表。TS 类型：`FileItem[]` | N
+loading | Boolean | false | 发送按钮是否处于加载状态 | N
+placeholder | String | 请输入消息... | 输入框默认文案 | N
+render-presets | Array | [{name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: ''},{ name: 'send', type: 'icon'}] | 预设发送区渲染配置，用于灵活配置发送区的上传入口和发送按钮，支持自定义类型、顺序、样式。TS 类型：`ChatActionButtons` `type ChatActionButtons = Array<ChatActionButton>` `type ChatActionButton = UploadButton \| SendButton` `interface UploadButton { name: 'upload'; presets: string[]; status?: string; }` `interface SendButton { name: 'send'; type: 'icon' \| 'text';}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign-uniapp-chat/chat-sender/type.ts) | N
+textarea-props | Boolean / Object | { autosize: { maxHeight: 264, minHeight: 48 } } | 透传给 Textarea 组件的属性，autosize数值单位为 rpx | N
+value | String | - | 输入框的值 | N
+visible | Boolean | false | 上传面板是否可见 | N
+
+### ChatSender Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(value:string, context: { e: FocusEvent })` | 输入框聚焦时触发
+change | `(value:string, context: { e: InputEvent \| MouseEvent \| KeyboardEvent })` | 输入框值发生变化时触发
+file-add | \- | 添加附件时触发
+file-change | `(file:FileItem)` | 附件列表变化时触发
+file-click | `(file:FileItem)` | 点击附件时触发
+file-delete | `(file:FileItem)` | 删除附件时触发
+file-select | `(context: {files: FileList, name: UploadActionType})` | 选择文件（图片/微信文件）时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/chat-sender/type.ts)。<br/>`type UploadActionType = 'uploadAttachment' \| 'uploadImage'`<br/>
+focus | `(value:string, context: { e: FocusEvent }) ` | 输入框聚焦时触发
+keyboardheightchange | `(context: {height: number, duration: number})` | 选择文件（图片/微信文件）时触发
+send | `(value:string, context: { e: MouseEvent \| KeyboardEvent })` | 点击消息发送的回调方法
+stop | `(value:string, context: { e: MouseEvent })` | 点击消息终止的回调方法
+update-value | `(value: boolean)` | 输入框值发生变化时触发
+update-visible | `(value: boolean)` | 上传面板可见性发生变化时触发
+upload-click | \- | 【实验】点击上传按钮时触发
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/attachments/index.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/attachments/index.vue
new file mode 100644
index 000000000..00ac5395b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/attachments/index.vue
@@ -0,0 +1,425 @@
+<template>
+  <view>
+    <view :class="'demo-attachments-container ' + (showUploadMenu ? 'show-upload-menu' : '')">
+      <view class="chat-sender-demo-wrapper">
+        <view class="chat-sender-height-limit">
+          <view class="chat-sender-height-left-limit" />
+          <view class="chat-sender-height-right-limit" />
+        </view>
+        <view class="chat-sender-placeholder">
+          高度限制：最大高度为132px
+        </view>
+        <view
+          class="chat-sender-wrapper"
+          :style="showUploadMenu ? 'bottom:32rpx;' : ''"
+        >
+          <t-chat-sender
+            :value="value"
+            :loading="loading"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :textarea-props="textareaProps"
+            :file-list="fileList"
+            :attachments-props="attachmentsProps"
+            :render-presets="renderPresets"
+            :visible="visible"
+            @send="onSend"
+            @stop="onStop"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            @uploadClick="onUploadClick"
+            @fileClick="onFileClick"
+            @fileDelete="onFileDelete"
+            @fileChange="onFileChange"
+            @fileAdd="onFileAdd"
+            @fileSelect="onFileSelect"
+            @updateVisible="onUpdateVisible"
+            @keyboardheightchange="onKeyboardHeightChange"
+          >
+            <template
+              #footer-prefix
+            >
+              <view
+                class="demo-footer-prefix"
+              >
+                <view
+                  :class="'deep-think-block ' + (deepThinkActive ? 'active' : '')"
+                  @click.stop="onDeepThinkTap"
+                >
+                  <t-icon
+                    name="system-sum"
+                    size="40rpx"
+                  />
+                  <text class="deep-think-text">
+                    深度思考
+                  </text>
+                </view>
+                <view
+                  :class="'net-search-block ' + (netSearchActive ? 'active' : '')"
+                  @click.stop="onNetSearchTap"
+                >
+                  <t-icon
+                    name="internet"
+                    size="40rpx"
+                  />
+                </view>
+              </view>
+            </template>
+          </t-chat-sender>
+        </view>
+        <view
+          v-if="!visible"
+          class="demo-attachments-footer"
+        >
+          内容由AI生成，仅供参考
+        </view>
+      </view>
+    </view>
+    <t-toast ref="t-toast" />
+  </view>
+</template>
+
+<script>
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+
+export default {
+  components: {
+    tChatSender,
+    tToast,
+    tIcon,
+  },
+  data() {
+    return {
+      value: '',
+      loading: false,
+      disabled: false,
+      fileList: [
+        {
+          fileType: 'image',
+          name: '图片1.png',
+          url: 'https://tdesign.gtimg.com/site/square.png',
+        },
+        {
+          fileType: 'pdf',
+          name: '文档.pdf',
+          url: 'https://example.com/document.pdf',
+          size: 3072,
+          status: 'pending',
+        },
+      ],
+      visible: true,
+      placeholder: '请输入消息...',
+      textareaProps: {
+        autosize: {
+          maxHeight: 264,
+          minHeight: 48, // 设置为0时，用自动计算height的高度
+        }, // 默认为false
+      },
+      attachmentsProps: {
+        items: [
+          {
+            fileType: 'image',
+            name: '图片1.png',
+            url: 'https://tdesign.gtimg.com/site/square.png',
+          },
+          {
+            fileType: 'pdf',
+            name: '文档.pdf',
+            url: 'https://example.com/document.pdf',
+            size: 3072,
+            status: 'pending',
+          },
+        ],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+      renderPresets: [
+        {
+          name: 'upload',
+          presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'],
+          type: 'bottom',
+          status: '',
+        },
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+      deepThinkActive: false,
+      netSearchActive: false,
+      showUploadMenu: true,
+    };
+  },
+  methods: {
+    // 发送消息
+    onSend(e) {
+      const { value } = e;
+      console.log('发送消息:', value);
+      if (!value.trim()) {
+        uni.showToast({
+          title: '请输入消息内容',
+          icon: 'none',
+        });
+        return;
+      }
+
+      // 模拟发送状态
+      this.loading = true;
+
+      setTimeout(() => {
+        if (this.loading) {
+          this.loading = false;
+          this.value = '';// 清空输入框
+
+          uni.showToast({
+            title: '发送成功',
+            icon: 'success',
+          });
+        }
+      }, 3000);
+    },
+
+    // 停止发送
+    onStop(e) {
+      const { value } = e;
+      console.log('停止发送:', value);
+      this.loading = false;
+
+      uni.showToast({
+        title: '已停止发送',
+        icon: 'none',
+      });
+    },
+
+    // 输入框聚焦
+    onFocus(e) {
+      const { value, context } = e;
+      console.log('输入框聚焦:', value, context);
+    },
+
+    // 输入框失焦
+    onBlur(e) {
+      const { value, context } = e;
+      console.log('输入框失焦:', value, context);
+    },
+
+    // 输入内容变化
+    onChange(e) {
+      const { value } = e;
+      console.log('输入内容变化:', value);
+
+      this.value = value;
+    },
+
+    // 点击上传按钮
+    onUploadClick() {
+      console.log('点击上传按钮');
+    },
+
+    // 点击文件
+    onFileClick(e) {
+      const { file } = e;
+      console.log('点击文件:', file);
+      uni.showToast({
+        title: `点击了文件: ${file.name}`,
+        icon: 'none',
+      });
+    },
+
+    // 删除文件
+    onFileDelete(e) {
+      const { file } = e;
+      console.log('删除文件:', file);
+      uni.showToast({
+        title: '文件删除成功',
+        icon: 'success',
+      });
+    },
+
+    // 文件列表变化
+    onFileChange(e) {
+      const { files } = e;
+      console.log('文件列表变化:', files);
+      this.attachmentsProps = {
+        ...this.attachmentsProps,
+        items: files,
+      };
+
+      this.fileList = files;
+    },
+
+    // 添加文件
+    onFileAdd() {
+      console.log('添加文件');
+    },
+
+    // 选择文件
+    onFileSelect(e) {
+      const { name, files } = e;
+      console.log('选择文件:', name, files);
+      uni.showToast({
+        title: `选择了${files.length}个文件`,
+        icon: 'success',
+      });
+    },
+
+    // 上传面板显示状态变化
+    onUpdateVisible() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '暂不可操作',
+      });
+    },
+
+    // 键盘高度变化
+    onKeyboardHeightChange(e) {
+      console.log('键盘高度变化:', e);
+    },
+
+    // 切换禁用状态
+    toggleDisabled() {
+      this.disabled = !this.disabled;
+    },
+
+    // 切换加载状态
+    toggleLoading() {
+      this.loading = !this.loading;
+    },
+
+    // 清空输入框
+    clearInput() {
+      this.value = '';
+    },
+
+    onDeepThinkTap() {
+      this.deepThinkActive = !this.deepThinkActive;
+    },
+
+    onNetSearchTap() {
+      this.netSearchActive = !this.netSearchActive;
+    },
+  },
+};
+</script>
+<style>
+.demo-attachments-container {
+    padding: 56rpx 0 0 0;
+    background-color: var(--td-bg-color-container);
+    height: 608rpx;
+    position: relative;
+    transition: all 0.3s;
+}
+
+/* 聊天发送器包装器 */
+.chat-sender-demo-wrapper {
+    margin-bottom: 32rpx;
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.chat-sender-height-limit {
+    height: 72rpx;
+    padding: 0 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-sender-height-left-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-left: 1px var(--td-component-stroke) dashed;
+    border-top-left-radius: 32rpx;
+}
+.chat-sender-height-right-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-right: 1px var(--td-component-stroke) dashed;
+    border-top-right-radius: 32rpx;
+}
+.chat-sender-placeholder {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--demo-chat-sender-placeholder);
+    text-align: center;
+    height: 48rpx;
+}
+
+
+.show-upload-menu {
+    height: 780rpx;
+}
+
+.demo-attachments-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+.chat-sender-wrapper {
+    position: absolute;
+    width: 100%;
+    bottom: 0rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+
+/* 聊天发送器包装器 */
+.chat-sender-wrapper {
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: var(--td-bg-color-container);
+}
+
+.demo-footer-prefix {
+    display: flex;
+    align-items: center;
+}
+
+.deep-think-block {
+    padding: 0 24rpx;
+    height: 60rpx;
+    margin-right: 16rpx;
+}
+
+.deep-think-text {
+    margin-left: 8rpx;
+}
+
+.deep-think-block,
+.net-search-block {
+    color: var(--td-text-color-primary);
+    border-radius: 200rpx;
+    border: 2rpx solid var(--td-component-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.net-search-block {
+    width: 64rpx;
+    height: 60rpx;
+}
+
+.active {
+    border-color: var(--td-brand-color-light-active);
+    color: var(--td-brand-color);
+    background-color: var(--td-brand-color-light);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/base/index.vue
new file mode 100644
index 000000000..057484b86
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/base/index.vue
@@ -0,0 +1,366 @@
+<template>
+  <view class="demo-base-container">
+    <!-- 聊天发送器组件 -->
+    <view class="chat-sender-demo-wrapper">
+      <view class="chat-sender-height-limit">
+        <view class="chat-sender-height-left-limit" />
+        <view class="chat-sender-height-right-limit" />
+      </view>
+      <view class="chat-sender-placeholder">
+        高度限制：最大高度为132px
+      </view>
+      <view class="chat-sender-wrapper">
+        <t-chat-sender
+          :value="value"
+          :loading="loading"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :textarea-props="textareaProps"
+          :file-list="fileList"
+          :attachments-props="attachmentsProps"
+          :render-presets="renderPresets"
+          :visible="visible"
+          @send="onSend"
+          @stop="onStop"
+          @focus="onFocus"
+          @blur="onBlur"
+          @change="onChange"
+          @uploadClick="onUploadClick"
+          @fileClick="onFileClick"
+          @fileDelete="onFileDelete"
+          @fileChange="onFileChange"
+          @fileAdd="onFileAdd"
+          @fileSelect="onFileSelect"
+          @updateVisible="onUpdateVisible"
+          @keyboardheightchange="onKeyboardHeightChange"
+        >
+          <template
+            #footer-prefix
+          >
+            <view
+              class="demo-footer-prefix"
+            >
+              <view
+                :class="'deep-think-block ' + (deepThinkActive ? 'active' : '')"
+                @click.stop="onDeepThinkTap"
+              >
+                <t-icon
+                  name="system-sum"
+                  size="40rpx"
+                />
+                <text class="deep-think-text">
+                  深度思考
+                </text>
+              </view>
+              <view
+                :class="'net-search-block ' + (netSearchActive ? 'active' : '')"
+                @click.stop="onNetSearchTap"
+              >
+                <t-icon
+                  name="internet"
+                  size="40rpx"
+                />
+              </view>
+            </view>
+          </template>
+        </t-chat-sender>
+      </view>
+      <view class="demo-footer">
+        内容由AI生成，仅供参考
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import Toast from 'tdesign-uniapp/toast';
+
+export default {
+  components: {
+    tChatSender,
+    tIcon,
+  },
+  data() {
+    return {
+      value: '',
+      loading: false,
+      disabled: false,
+      fileList: [],
+      visible: false,
+      placeholder: '请输入消息...',
+      textareaProps: {
+        autosize: {
+          maxHeight: 264,
+          minHeight: 48, // 设置为0时，用自动计算height的高度
+        }, // 默认为false
+      },
+      attachmentsProps: {
+        items: [],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+      deepThinkActive: false,
+      netSearchActive: false,
+    };
+  },
+  methods: {
+    // 发送消息
+    onSend(e) {
+      const { value } = e;
+      console.log('发送消息:', value);
+      if (!value.trim()) {
+        uni.showToast({
+          title: '请输入消息内容',
+          icon: 'none',
+        });
+        return;
+      }
+
+      // 模拟发送状态
+      this.loading = true;
+
+      setTimeout(() => {
+        if (this.loading) {
+          this.loading = false;
+          this.value = '';// 清空输入框
+
+          uni.showToast({
+            title: '发送成功',
+            icon: 'success',
+          });
+        }
+      }, 3000);
+    },
+
+    // 停止发送
+    onStop(e) {
+      const { value } = e;
+      console.log('停止发送:', value);
+      this.loading = false;
+
+      uni.showToast({
+        title: '已停止发送',
+        icon: 'none',
+      });
+    },
+
+    // 输入框聚焦
+    onFocus(e) {
+      const { value, context } = e;
+      console.log('输入框聚焦:', value, context);
+    },
+
+    // 输入框失焦
+    onBlur(e) {
+      const { value, context } = e;
+      console.log('输入框失焦:', value, context);
+    },
+
+    // 输入内容变化
+    onChange(e) {
+      const { value } = e;
+      console.log('输入内容变化:', value);
+
+      this.value = value;
+    },
+
+    // 点击上传按钮
+    onUploadClick() {
+      console.log('点击上传按钮');
+    },
+
+    // 点击文件
+    onFileClick(e) {
+      const { file } = e;
+      console.log('点击文件:', file);
+      uni.showToast({
+        title: `点击了文件: ${file.name}`,
+        icon: 'none',
+      });
+    },
+
+    // 删除文件
+    onFileDelete(e) {
+      const { file } = e;
+      console.log('删除文件:', file);
+      uni.showToast({
+        title: '文件删除成功',
+        icon: 'success',
+      });
+    },
+
+    // 文件列表变化
+    onFileChange(e) {
+      const { files } = e;
+      console.log('文件列表变化:', files);
+      this.attachmentsProps = {
+        ...this.attachmentsProps,
+        items: files,
+      };
+
+      this.fileList = files;
+    },
+
+    // 添加文件
+    onFileAdd() {
+      console.log('添加文件');
+    },
+
+    // 选择文件
+    onFileSelect(e) {
+      const { name, files } = e;
+      console.log('选择文件:', name, files);
+      uni.showToast({
+        title: `选择了${files.length}个文件`,
+        icon: 'success',
+      });
+    },
+
+    // 上传面板显示状态变化
+    onUpdateVisible() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '暂不可操作',
+      });
+    },
+
+    // 键盘高度变化
+    onKeyboardHeightChange(e) {
+      console.log('键盘高度变化:', e);
+    },
+
+    // 切换禁用状态
+    toggleDisabled() {
+      this.disabled = !this.disabled;
+    },
+
+    // 切换加载状态
+    toggleLoading() {
+      this.loading = !this.loading;
+    },
+
+    // 清空输入框
+    clearInput() {
+      this.value = '';
+    },
+
+    onDeepThinkTap() {
+      this.deepThinkActive = !this.deepThinkActive;
+    },
+
+    onNetSearchTap() {
+      this.netSearchActive = !this.netSearchActive;
+    },
+  },
+};
+</script>
+<style>
+.demo-base-container {
+    padding: 56rpx 0 0 0;
+    background-color: var(--td-bg-color-container);
+    height: 488rpx;
+    position: relative;
+}
+
+/* 聊天发送器包装器 */
+.chat-sender-demo-wrapper {
+    margin-bottom: 32rpx;
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.chat-sender-height-limit {
+    height: 72rpx;
+    padding: 0 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-sender-height-left-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-left: 1px var(--td-component-stroke) dashed;
+    border-top-left-radius: 32rpx;
+}
+.chat-sender-height-right-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-right: 1px var(--td-component-stroke) dashed;
+    border-top-right-radius: 32rpx;
+}
+.chat-sender-placeholder {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--demo-chat-sender-placeholder);
+    text-align: center;
+    height: 48rpx;
+}
+
+.chat-sender-wrapper {
+    position: absolute;
+    width: 100%;
+    bottom: 0rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+.demo-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: var(--td-text-color-placeholder);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+.demo-footer-prefix {
+    display: flex;
+    align-items: center;
+}
+
+.deep-think-block {
+    padding: 0 24rpx;
+    height: 60rpx;
+    margin-right: 16rpx;
+}
+
+.deep-think-text {
+    margin-left: 8rpx;
+}
+
+.deep-think-block,
+.net-search-block {
+    color: var(--td-text-color-primary);
+    border-radius: 200rpx;
+    border: 2rpx solid var(--td-component-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.net-search-block {
+    width: 64rpx;
+    height: 60rpx;
+}
+
+.active {
+    border-color: var(--td-brand-color-light-active);
+    color: var(--td-brand-color);
+    background-color: var(--td-brand-color-light);
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.less b/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.less
new file mode 100644
index 000000000..5c121e907
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.less
@@ -0,0 +1,17 @@
+:deep(.chat-sender-placeholder) {
+    --demo-chat-sender-placeholder: rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+    :deep(.chat-sender-placeholder) {
+        --demo-chat-sender-placeholder: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.t-button {
+    margin-right: 32rpx;
+}
+
+.t-button:last-child {
+    margin-right: 0;
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.vue
new file mode 100644
index 000000000..5232838e3
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/chat-sender.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatSender"
+      left-arrow
+    />
+    <view class="demo">
+      <t-demo-header
+        title="ChatSender 对话输入"
+        desc="用于 AI 聊天的输入框，可以扩展模型、多模态等能力。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础类型"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="上传文件">
+        <attachments />
+      </t-demo>
+      <t-demo desc="内容引用">
+        <content-citation />
+      </t-demo>
+      <t-demo desc="文件引用">
+        <file-citation />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseDemo from './base/index.vue';
+import attachments from './attachments/index.vue';
+import contentCitation from './content-citation/index.vue';
+import fileCitation from './file-citation/index.vue';
+
+
+export default {
+  components: {
+    baseDemo,
+    attachments,
+    contentCitation,
+    fileCitation,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-sender.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/content-citation/index.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/content-citation/index.vue
new file mode 100644
index 000000000..45964201f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/content-citation/index.vue
@@ -0,0 +1,430 @@
+<template>
+  <view class="demo-content-citation-container">
+    <view class="chat-sender-demo-wrapper">
+      <view class="chat-sender-height-limit">
+        <view class="chat-sender-height-left-limit" />
+        <view class="chat-sender-height-right-limit" />
+      </view>
+      <view class="chat-sender-placeholder">
+        高度限制：最大高度为132px
+      </view>
+      <view class="chat-sender-wrapper">
+        <t-chat-sender
+          :value="value"
+          :loading="loading"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :textarea-props="textareaProps"
+          :file-list="fileList"
+          :attachments-props="attachmentsProps"
+          :render-presets="renderPresets"
+          :visible="visible"
+          @send="onSend"
+          @stop="onStop"
+          @focus="onFocus"
+          @blur="onBlur"
+          @change="onChange"
+          @uploadClick="onUploadClick"
+          @fileClick="onFileClick"
+          @fileDelete="onFileDelete"
+          @fileChange="onFileChange"
+          @fileAdd="onFileAdd"
+          @fileSelect="onFileSelect"
+          @updateVisible="onUpdateVisible"
+          @keyboardheightchange="onKeyboardHeightChange"
+        >
+          <template
+            #header
+          >
+            <view
+              v-if="headerText"
+              class="demo-header"
+            >
+              <view style="padding: 4rpx; height: 40rpx; color: var(--td-text-color-disabled)">
+                <t-icon
+                  name="enter"
+                  size="40rpx"
+                  style="transform: scaleX(-1)"
+                />
+              </view>
+              <view class="header-content">
+                {{ headerText }}
+              </view>
+              <view style="padding: 4rpx; height: 40rpx; margin-left: auto; color: var(--td-text-color-placeholder)">
+                <t-icon
+                  name="close"
+                  size="40rpx"
+                  @click="handleCLoseCite"
+                />
+              </view>
+            </view>
+          </template>
+          <template
+            #footer-prefix
+          >
+            <view
+              class="demo-footer-prefix"
+            >
+              <view
+                :class="'deep-think-block ' + (deepThinkActive ? 'active' : '')"
+                @click.stop="onDeepThinkTap"
+              >
+                <t-icon
+                  name="system-sum"
+                  size="40rpx"
+                />
+                <text class="deep-think-text">
+                  深度思考
+                </text>
+              </view>
+              <view
+                :class="'net-search-block ' + (netSearchActive ? 'active' : '')"
+                @click.stop="onNetSearchTap"
+              >
+                <t-icon
+                  name="internet"
+                  size="40rpx"
+                />
+              </view>
+            </view>
+          </template>
+        </t-chat-sender>
+      </view>
+      <view class="demo-content-citation-footer">
+        内容由AI生成，仅供参考
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tChatSender,
+    tIcon,
+  },
+  data() {
+    return {
+      value: '',
+      loading: false,
+      disabled: false,
+      fileList: [],
+      visible: false,
+      placeholder: '请输入消息...',
+      textareaProps: {
+        autosize: {
+          maxHeight: 264,
+          minHeight: 48, // 设置为0时，用自动计算height的高度
+        }, // 默认为false
+      },
+      attachmentsProps: {
+        items: [],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+      deepThinkActive: false,
+      netSearchActive: false,
+      headerText:
+                '牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
+    };
+  },
+  methods: {
+    // 发送消息
+    onSend(e) {
+      const { value } = e;
+      console.log('发送消息:', value);
+      if (!value.trim()) {
+        uni.showToast({
+          title: '请输入消息内容',
+          icon: 'none',
+        });
+        return;
+      }
+
+      // 模拟发送状态
+      this.loading = true;
+      setTimeout(() => {
+        if (this.loading) {
+          this.loading = false;
+          this.value = ''; // 清空输入框
+          uni.showToast({
+            title: '发送成功',
+            icon: 'success',
+          });
+        }
+      }, 3000);
+    },
+
+    // 停止发送
+    onStop(e) {
+      const { value } = e;
+      console.log('停止发送:', value);
+      this.loading = false;
+      uni.showToast({
+        title: '已停止发送',
+        icon: 'none',
+      });
+    },
+
+    // 输入框聚焦
+    onFocus(e) {
+      const { value, context } = e;
+      console.log('输入框聚焦:', value, context);
+    },
+
+    // 输入框失焦
+    onBlur(e) {
+      const { value, context } = e;
+      console.log('输入框失焦:', value, context);
+    },
+
+    // 输入内容变化
+    onChange(e) {
+      const { value } = e;
+      console.log('输入内容变化:', value);
+      this.value = value;
+    },
+
+    // 点击上传按钮
+    onUploadClick() {
+      console.log('点击上传按钮');
+    },
+
+    // 点击文件
+    onFileClick(e) {
+      const { file } = e;
+      console.log('点击文件:', file);
+      uni.showToast({
+        title: `点击了文件: ${file.name}`,
+        icon: 'none',
+      });
+    },
+
+    // 删除文件
+    onFileDelete(e) {
+      const { file } = e;
+      console.log('删除文件:', file);
+      uni.showToast({
+        title: '文件删除成功',
+        icon: 'success',
+      });
+    },
+
+    // 文件列表变化
+    onFileChange(e) {
+      console.log(e, 'e----');
+      const { files } = e;
+      console.log('文件列表变化:', files);
+      this.fileList = files;
+    },
+
+    // 添加文件
+    onFileAdd() {
+      console.log('添加文件');
+    },
+
+    // 选择文件
+    onFileSelect(e) {
+      const { name, files } = e;
+      console.log('选择文件:', name, files);
+      uni.showToast({
+        title: `选择了${files.length}个文件`,
+        icon: 'success',
+      });
+    },
+
+    // 上传面板显示状态变化
+    onUpdateVisible(e) {
+      const visible = e;
+      console.log('上传面板显示状态:', visible);
+      this.visible = visible;
+    },
+
+    // 键盘高度变化
+    onKeyboardHeightChange(e) {
+      console.log('键盘高度变化:', e);
+    },
+
+    // 切换禁用状态
+    toggleDisabled() {
+      this.disabled = !this.disabled;
+    },
+
+    // 切换加载状态
+    toggleLoading() {
+      this.loading = !this.loading;
+    },
+
+    // 清空输入框
+    clearInput() {
+      this.value = '';
+    },
+
+    onDeepThinkTap() {
+      this.deepThinkActive = !this.deepThinkActive;
+    },
+
+    onNetSearchTap() {
+      this.netSearchActive = !this.netSearchActive;
+    },
+
+    handleCLoseCite() {
+      this.headerText = '';
+    },
+  },
+};
+</script>
+<style>
+.demo-content-citation-container {
+    padding: 56rpx 0 0 0;
+    background-color: var(--td-bg-color-container);
+    height: 568rpx;
+    position: relative;
+}
+/* 聊天发送器包装器 */
+.chat-sender-demo-wrapper {
+    margin-bottom: 32rpx;
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.chat-sender-height-limit {
+    height: 72rpx;
+    padding: 0 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-sender-height-left-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-left: 1px var(--td-component-stroke) dashed;
+    border-top-left-radius: 32rpx;
+}
+.chat-sender-height-right-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-right: 1px var(--td-component-stroke) dashed;
+    border-top-right-radius: 32rpx;
+}
+.chat-sender-placeholder {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--demo-chat-sender-placeholder);
+    text-align: center;
+    height: 48rpx;
+}
+
+
+.show-upload-menu {
+    height: 780rpx;
+}
+
+.demo-attachments-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+.chat-sender-wrapper {
+    position: absolute;
+    width: 100%;
+    bottom: 0rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+
+.demo-content-citation-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: var(--td-text-color-placeholder);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+/* 聊天发送器包装器 */
+
+.chat-sender-wrapper {
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: var(--td-bg-color-container);
+}
+
+.demo-footer-prefix {
+    display: flex;
+    align-items: center;
+}
+
+.deep-think-block {
+    padding: 0 24rpx;
+    height: 60rpx;
+    margin-right: 16rpx;
+}
+
+.deep-think-text {
+    margin-left: 8rpx;
+}
+
+.deep-think-block,
+.net-search-block {
+    color: var(--td-text-color-primary);
+    border-radius: 200rpx;
+    border: 2rpx solid var(--td-component-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.net-search-block {
+    width: 64rpx;
+    height: 60rpx;
+}
+
+.active {
+    border-color: var(--td-brand-color-light-active);
+    color: var(--td-brand-color);
+    background-color: var(--td-brand-color-light);
+}
+
+.demo-header {
+    display: flex;
+    width: calc(100% - 48rpx);
+    margin-left: 24rpx;
+    height: 62rpx;
+    border-bottom: 2rpx solid var(--td-component-stroke);
+}
+
+.header-content {
+    padding: 2rpx 24rpx;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--td-font-size-body-medium);
+    line-height: 44rpx;
+    color: var(--td-text-color-placeholder);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/file-citation/index.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/file-citation/index.vue
new file mode 100644
index 000000000..dfaf2861b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/file-citation/index.vue
@@ -0,0 +1,445 @@
+<template>
+  <view class="demo-content-citation-container">
+    <view class="chat-sender-demo-wrapper">
+      <view class="chat-sender-height-limit">
+        <view class="chat-sender-height-left-limit" />
+        <view class="chat-sender-height-right-limit" />
+      </view>
+      <view class="chat-sender-placeholder">
+        高度限制：最大高度为132px
+      </view>
+      <view class="chat-sender-wrapper">
+        <t-chat-sender
+          :value="value"
+          :loading="loading"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :textarea-props="textareaProps"
+          :file-list="fileList"
+          :attachments-props="attachmentsProps"
+          :render-presets="renderPresets"
+          :visible="visible"
+          @send="onSend"
+          @stop="onStop"
+          @focus="onFocus"
+          @blur="onBlur"
+          @change="onChange"
+          @uploadClick="onUploadClick"
+          @fileClick="onFileClick"
+          @fileDelete="onFileDelete"
+          @fileChange="onFileChange"
+          @fileAdd="onFileAdd"
+          @fileSelect="onFileSelect"
+          @updateVisible="onUpdateVisible"
+          @keyboardheightchange="onKeyboardHeightChange"
+        >
+          <template
+            #header
+          >
+            <view
+              v-if="headerText"
+              class="demo-header"
+            >
+              <view style="padding: 4rpx; height: 40rpx; color: var(--td-text-color-disabled)">
+                <t-icon
+                  name="enter"
+                  size="40rpx"
+                  style="transform: scaleX(-1)"
+                />
+              </view>
+              <view class="header-content-wrapper">
+                <t-icon
+                  name="file-word-filled"
+                  color="var(--td-brand-color)"
+                  size="32rpx"
+                  style="margin-top: 8rpx; margin-right: 16rpx"
+                />
+                <view
+                  class="header-file-content"
+                  hover-class="none"
+                  :hover-stop-propagation="false"
+                >
+                  {{ headerText }}
+                </view>
+              </view>
+              <view style="padding: 4rpx; height: 40rpx; margin-left: auto; color: var(--td-text-color-placeholder)">
+                <t-icon
+                  name="close"
+                  size="40rpx"
+                  @click="handleCLoseCite"
+                />
+              </view>
+            </view>
+          </template>
+
+          <template
+            #footer-prefix
+          >
+            <view
+              class="demo-footer-prefix"
+            >
+              <view
+                :class="'deep-think-block ' + (deepThinkActive ? 'active' : '')"
+                @click.stop="onDeepThinkTap"
+              >
+                <t-icon
+                  name="system-sum"
+                  size="40rpx"
+                />
+                <text class="deep-think-text">
+                  深度思考
+                </text>
+              </view>
+              <view
+                :class="'net-search-block ' + (netSearchActive ? 'active' : '')"
+                @click.stop="onNetSearchTap"
+              >
+                <t-icon
+                  name="internet"
+                  size="40rpx"
+                />
+              </view>
+            </view>
+          </template>
+        </t-chat-sender>
+      </view>
+      <view class="demo-file-citation-footer">
+        内容由AI生成，仅供参考
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatSender from 'tdesign-uniapp-chat/chat-sender/chat-sender.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tChatSender,
+    tIcon,
+  },
+  data() {
+    return {
+      value: '',
+      loading: false,
+      disabled: false,
+      fileList: [],
+      visible: false,
+      placeholder: '请输入消息...',
+      textareaProps: {
+        autosize: {
+          maxHeight: 264,
+          minHeight: 48, // 设置为0时，用自动计算height的高度
+        }, // 默认为false
+      },
+      attachmentsProps: {
+        items: [],
+        removable: true,
+        imageViewer: true,
+        addable: false,
+      },
+      renderPresets: [
+        {
+          name: 'send',
+          type: 'icon',
+        },
+      ],
+      deepThinkActive: false,
+      netSearchActive: false,
+      headerText: 'word文件.docx',
+    };
+  },
+  methods: {
+    // 发送消息
+    onSend(e) {
+      const { value } = e;
+      console.log('发送消息:', value);
+      if (!value.trim()) {
+        uni.showToast({
+          title: '请输入消息内容',
+          icon: 'none',
+        });
+        return;
+      }
+
+      // 模拟发送状态
+      this.loading = true;
+      setTimeout(() => {
+        if (this.loading) {
+          this.loading = false;
+          this.value = ''; // 清空输入框
+          uni.showToast({
+            title: '发送成功',
+            icon: 'success',
+          });
+        }
+      }, 3000);
+    },
+
+    // 停止发送
+    onStop(e) {
+      const { value } = e;
+      console.log('停止发送:', value);
+      this.loading = false;
+      uni.showToast({
+        title: '已停止发送',
+        icon: 'none',
+      });
+    },
+
+    // 输入框聚焦
+    onFocus(e) {
+      const { value, context } = e;
+      console.log('输入框聚焦:', value, context);
+    },
+
+    // 输入框失焦
+    onBlur(e) {
+      const { value, context } = e;
+      console.log('输入框失焦:', value, context);
+    },
+
+    // 输入内容变化
+    onChange(e) {
+      const { value } = e;
+      console.log('输入内容变化:', value);
+      this.value = value;
+    },
+
+    // 点击上传按钮
+    onUploadClick() {
+      console.log('点击上传按钮');
+    },
+
+    // 点击文件
+    onFileClick(e) {
+      const { file } = e;
+      console.log('点击文件:', file);
+      uni.showToast({
+        title: `点击了文件: ${file.name}`,
+        icon: 'none',
+      });
+    },
+
+    // 删除文件
+    onFileDelete(e) {
+      const { file } = e;
+      console.log('删除文件:', file);
+      uni.showToast({
+        title: '文件删除成功',
+        icon: 'success',
+      });
+    },
+
+    // 文件列表变化
+    onFileChange(e) {
+      console.log(e, 'e----');
+      const { files } = e;
+      console.log('文件列表变化:', files);
+      this.fileList = files;
+    },
+
+    // 添加文件
+    onFileAdd() {
+      console.log('添加文件');
+    },
+
+    // 选择文件
+    onFileSelect(e) {
+      const { name, files } = e;
+      console.log('选择文件:', name, files);
+      uni.showToast({
+        title: `选择了${files.length}个文件`,
+        icon: 'success',
+      });
+    },
+
+    // 上传面板显示状态变化
+    onUpdateVisible(e) {
+      const visible = e;
+      console.log('上传面板显示状态:', visible);
+      this.visible = visible;
+    },
+
+    // 键盘高度变化
+    onKeyboardHeightChange(e) {
+      console.log('键盘高度变化:', e);
+    },
+
+    // 切换禁用状态
+    toggleDisabled() {
+      this.disabled = !this.disabled;
+    },
+
+    // 切换加载状态
+    toggleLoading() {
+      this.loading = !this.loading;
+    },
+
+    // 清空输入框
+    clearInput() {
+      this.value = '';
+    },
+
+    onDeepThinkTap() {
+      this.deepThinkActive = !this.deepThinkActive;
+    },
+
+    onNetSearchTap() {
+      this.netSearchActive = !this.netSearchActive;
+    },
+
+    handleCLoseCite() {
+      this.headerText = '';
+    },
+  },
+};
+</script>
+<style>
+.demo-content-citation-container {
+    padding: 56rpx 0 0 0;
+    background-color: var(--td-bg-color-container);
+    height: 568rpx;
+    position: relative;
+}
+
+/* 聊天发送器包装器 */
+.chat-sender-demo-wrapper {
+    margin-bottom: 32rpx;
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.chat-sender-height-limit {
+    height: 72rpx;
+    padding: 0 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-sender-height-left-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-left: 1px var(--td-component-stroke) dashed;
+    border-top-left-radius: 32rpx;
+}
+.chat-sender-height-right-limit {
+    height: 70rpx;
+    width: 70rpx;
+    border-top: 1px var(--td-component-stroke) dashed;
+    border-right: 1px var(--td-component-stroke) dashed;
+    border-top-right-radius: 32rpx;
+}
+.chat-sender-placeholder {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--demo-chat-sender-placeholder);
+    text-align: center;
+    height: 48rpx;
+}
+
+
+.show-upload-menu {
+    height: 780rpx;
+}
+
+.demo-attachments-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: rgba(0, 0, 0, 0.4);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+.chat-sender-wrapper {
+    position: absolute;
+    width: 100%;
+    bottom: 0rpx;
+    background-color: var(--td-bg-color-container);
+}
+
+
+.demo-file-citation-footer {
+    height: 32rpx;
+    width: 100%;
+    text-align: center;
+    font-size: 20rpx;
+    line-height: 32rpx;
+    color: var(--td-text-color-placeholder);
+    position: absolute;
+    bottom: 32rpx;
+}
+
+.chat-sender-wrapper {
+    /* border: 2rpx solid #e5e5e5; */
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: var(--td-bg-color-container);
+}
+
+.demo-footer-prefix {
+    display: flex;
+    align-items: center;
+}
+
+.deep-think-block {
+    padding: 0 24rpx;
+    height: 60rpx;
+    margin-right: 16rpx;
+}
+
+.deep-think-text {
+    margin-left: 8rpx;
+}
+
+.deep-think-block,
+.net-search-block {
+    color: var(--td-text-color-primary);
+    border-radius: 200rpx;
+    border: 2rpx solid var(--td-component-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.net-search-block {
+    width: 64rpx;
+    height: 60rpx;
+}
+
+.active {
+    border-color: var(--td-brand-color-light-active);
+    color: var(--td-brand-color);
+    background-color: var(--td-brand-color-light);
+}
+
+.demo-header {
+    display: flex;
+    width: calc(100% - 48rpx);
+    margin-left: 24rpx;
+    height: 62rpx;
+    border-bottom: 2rpx solid var(--td-component-stroke);
+}
+
+.header-content-wrapper {
+    padding: 0 24rpx;
+    display: flex;
+}
+
+.header-file-content {
+    padding: 2rpx 0;
+    line-height: 44rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--td-font-size-body-medium);
+    color: var(--td-text-color-placeholder);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/_example/theme/index.vue b/packages/tdesign-uniapp-chat/components/chat-sender/_example/theme/index.vue
new file mode 100644
index 000000000..b94c49872
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/_example/theme/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <view>
+    <view class="button-example">
+      <t-button size="large">
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        variant="outline"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="primary"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="primary"
+        variant="outline"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="primary"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="danger"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="danger"
+        variant="outline"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="danger"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="light"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="light"
+        variant="outline"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="light"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.button-example {
+    margin: 32rpx;
+    display: flex;
+    justify-content: space-between;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.less b/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.less
new file mode 100644
index 000000000..3907e0cd7
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.less
@@ -0,0 +1,284 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-sender: ~'@{prefix}-chat-sender';
+
+@chat-sender-border-radius: 32rpx;
+@chat-sender-padding: 22rpx 0;
+@chat-sender-margin: 24rpx 24rpx 80rpx 24rpx;
+@chat-sender-border-width: 2rpx;
+@chat-sender-border-color: @component-border;
+@chat-sender-shadow: @shadow-3;
+@chat-sender-margin-bottom-transition: margin-bottom 0.3s ease;
+
+@chat-sender-header-padding-bottom: 16rpx;
+@chat-sender-attachments-padding: 0 24rpx;
+@chat-sender-attachments-gap: 20rpx;
+@chat-sender-attachments-item-size: 128rpx;
+@chat-sender-attachments-item-radius: 8rpx;
+
+@chat-sender-textarea-gap: 10rpx;
+@chat-sender-textarea-padding: 0 24rpx;
+@chat-sender-textarea-hook-padding-bottom: 16rpx;
+@chat-sender-textarea-hook-max-height: 280rpx;
+
+@chat-sender-input-max-height: 264rpx;
+@chat-sender-input-font-size: @font-size-m;
+@chat-sender-input-line-height: 48rpx;
+@chat-sender-input-color: @text-color-primary;
+@chat-sender-input-caret-color: @brand-color;
+@chat-sender-input-font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+@chat-sender-input-letter-spacing: 5%;
+
+@chat-sender-placeholder-color: @text-color-disabled;
+@chat-sender-placeholder-transition: opacity 0.25s linear;
+
+@chat-sender-icon-size: 32rpx;
+@chat-sender-footer-z-index: 2;
+@chat-sender-send-btn-size: 64rpx;
+@chat-sender-send-btn-margin-left: 16rpx;
+@chat-sender-send-btn-bg-color: @brand-color;
+@chat-sender-send-btn-bg-color-disabled: @bg-color-secondarycomponent;
+@chat-sender-send-btn-text-color: @brand-color;
+@chat-sender-send-btn-text-color-disabled: @text-color-disabled;
+@chat-sender-send-btn-transition: all 0.3s ease;
+
+@chat-sender-upload-margin-top: -40rpx;
+@chat-sender-upload-margin-bottom: 24rpx;
+@chat-sender-upload-item-margin-right: 24rpx;
+@chat-sender-upload-item-icon-size: 96rpx;
+@chat-sender-upload-item-icon-radius: 12rpx;
+@chat-sender-upload-item-icon-bg: @bg-color-secondarycontainer;
+@chat-sender-upload-item-icon-margin-bottom: 16rpx;
+@chat-sender-upload-item-text-font-size: 28rpx;
+@chat-sender-upload-item-text-line-height: 44rpx;
+
+@chat-sender-btn-func-size: 58rpx;
+@chat-sender-btn-func-bg: @bg-color-container;
+@chat-sender-btn-func-border: 2rpx solid @component-border;
+@chat-sender-btn-func-disabled-bg: #c9ccd2;
+@chat-sender-btn-func-disabled-opacity: 0.24;
+
+@chat-sender-menu-top: -24rpx;
+@chat-sender-menu-padding: 0 24rpx;
+@chat-sender-menu-radius: 16rpx;
+@chat-sender-menu-bg: #ffffff;
+@chat-sender-menu-shadow: 0 16rpx 16rpx 0 rgba(0, 119, 254, 0.08);
+@chat-sender-menu-item-width: 172rpx;
+@chat-sender-menu-item-padding: 24rpx 8rpx;
+@chat-sender-menu-item-border: 1rpx solid #ebedf0;
+@chat-sender-menu-item-icon-margin-right: 24rpx;
+@chat-sender-menu-item-text-color: #535d6d;
+@chat-sender-menu-item-text-font-size: 28rpx;
+@chat-sender-menu-item-text-font-weight: 500;
+@chat-sender-menu-item-text-line-height: 36rpx;
+@chat-sender-menu-item-text-letter-spacing: 1rpx;
+
+@chat-sender-bg-color: var(--td-bg-color-specialcomponent, #fff);
+
+.@{chat-sender} {
+  position: relative;
+  border-radius: @chat-sender-border-radius;
+  padding: @chat-sender-padding;
+  border: @chat-sender-border-width solid @chat-sender-border-color;
+  box-sizing: border-box;
+  margin: @chat-sender-margin;
+  box-shadow: @chat-sender-shadow;
+  transition: @chat-sender-margin-bottom-transition;
+  background-color: @chat-sender-bg-color;
+
+  // 头部区域
+  &__header {
+    padding-bottom: @chat-sender-header-padding-bottom;
+    width: 100%;
+    overflow: hidden;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  // 附件区域
+  &__attachments {
+    padding: @chat-sender-attachments-padding;
+  }
+
+  // 文本输入区域
+  &__actions {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    // gap: @chat-sender-textarea-gap;
+    padding: @chat-sender-textarea-padding;
+  }
+
+  // 输入框容器
+  &__textarea {
+    position: relative;
+    flex: 1;
+    padding-bottom: @chat-sender-textarea-hook-padding-bottom;
+    max-height: @chat-sender-textarea-hook-max-height;
+
+    // 输入框
+    &--control {
+      max-height: @chat-sender-input-max-height;
+      display: block;
+      width: 100%;
+      color: @chat-sender-input-color;
+      font-size: @chat-sender-input-font-size;
+      line-height: @chat-sender-input-line-height;
+      word-break: break-word;
+      caret-color: @chat-sender-input-caret-color;
+      font-family: @chat-sender-input-font-family;
+      font-weight: 400;
+      letter-spacing: @chat-sender-input-letter-spacing;
+      padding-bottom: @chat-sender-textarea-hook-padding-bottom;
+    }
+
+    // 占位符
+    &--placeholder {
+      color: @chat-sender-placeholder-color;
+      font-size: @chat-sender-input-font-size;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translateY(1%);
+      z-index: 1;
+      pointer-events: none;
+      opacity: 1;
+      transition: @chat-sender-placeholder-transition;
+
+      &.hide {
+        opacity: 0;
+      }
+    }
+  }
+
+  // 底部区域
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: @chat-sender-footer-z-index;
+  }
+
+  // 上传区域
+  &__upload {
+    display: flex;
+    margin-top: @chat-sender-upload-margin-top;
+    margin-bottom: @chat-sender-upload-margin-bottom;
+    align-items: center;
+    justify-content: flex-start;
+    transition: @chat-sender-send-btn-transition;
+
+    // 上传项
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border-radius: @chat-sender-attachments-item-radius;
+      flex-shrink: 0;
+      // margin-right: @chat-sender-upload-item-margin-right;
+      flex-grow: 1;
+      color: @text-color-primary;
+
+      // 上传项图标
+      &__icon {
+        width: @chat-sender-upload-item-icon-size;
+        height: @chat-sender-upload-item-icon-size;
+        border-radius: @chat-sender-upload-item-icon-radius;
+        margin-bottom: @chat-sender-upload-item-icon-margin-bottom;
+        background-color: @chat-sender-upload-item-icon-bg;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      // 上传项文本
+      &__text {
+        font-size: @chat-sender-upload-item-text-font-size;
+        line-height: @chat-sender-upload-item-text-line-height;
+      }
+    }
+  }
+
+  // 按钮区域
+  &__sendbtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // 发送按钮默认状态
+    &--default {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .plus-btn {
+        color: @text-color-primary;
+
+        .btn-icon {
+          display: block;
+        }
+
+        &.disabled {
+          pointer-events: none;
+          opacity: @chat-sender-btn-func-disabled-opacity;
+
+          .btn-func:after {
+            background: @chat-sender-btn-func-disabled-bg;
+          }
+        }
+      }
+
+      .send-btn-text {
+        color: @chat-sender-send-btn-text-color;
+
+        &.disabled {
+          color: @chat-sender-send-btn-text-color-disabled;
+        }
+      }
+
+      .send-btn-icon {
+        color: @bg-color-container;
+        width: @chat-sender-send-btn-size;
+        height: @chat-sender-send-btn-size;
+        margin-left: @chat-sender-send-btn-margin-left;
+        border-radius: 999rpx;
+        background-color: @chat-sender-send-btn-bg-color;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: rotate(-90deg);
+        transition: @chat-sender-send-btn-transition;
+
+        &.active {
+          color: @text-color-anti;
+        }
+
+        &.disabled {
+          background-color: @chat-sender-send-btn-bg-color-disabled;
+          color: @bg-color-container;
+        }
+
+        &.stop {
+          // 停止按钮样式
+        }
+      }
+    }
+  }
+
+  // 功能按钮
+  .btn-func {
+    width: @chat-sender-btn-func-size;
+    height: @chat-sender-btn-func-size;
+    position: relative;
+    z-index: @chat-sender-footer-z-index;
+    background-color: @chat-sender-btn-func-bg;
+    border-radius: 999rpx;
+    border: @chat-sender-btn-func-border;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.vue b/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.vue
new file mode 100644
index 000000000..0dadd3e15
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/chat-sender.vue
@@ -0,0 +1,464 @@
+<template>
+  <view>
+    <view
+      :class="classPrefix"
+      :style="_._style([customStyle, inputStyle])"
+      @click.stop="handleOutsideClick"
+    >
+      <view
+        :class="classPrefix + '__header'"
+        :style="attachmentsProps && attachmentsProps.items && attachmentsProps.items.length > 0 ? 'margin-top:-8rpx;' : ''"
+      >
+        <block v-if="attachmentsProps && attachmentsProps.items && attachmentsProps.items.length > 0">
+          <view :class="classPrefix + '__attachments'">
+            <attachments
+              :items="attachmentsProps.items"
+              :removable="attachmentsProps.removable"
+              :image-viewer="attachmentsProps.imageViewer"
+              @fileClick="handleFileClick"
+              @remove="handleFileRemove"
+              @add="handleFileAdd"
+            />
+          </view>
+        </block>
+        <block v-else>
+          <slot name="header" />
+        </block>
+      </view>
+
+      <view :class="classPrefix + '__actions'">
+        <view :class="classPrefix + '__textarea'">
+          <slot name="input-prefix" />
+          <textarea
+            :class="classPrefix + '__textarea--control'"
+            :style="textareaStyle(textareaProps.autosize)"
+            :disabled="disabled"
+            :auto-height="!!textareaProps.autosize"
+            confirm-type="send"
+            :adjust-position="adjustPosition"
+            :disable-default-padding="false"
+            cursor-spacing="30"
+            maxlength="-1"
+            :value="innerValue"
+            @change="textChange"
+            @focus="focusFn"
+            @blur="blurFn"
+            @click="handlerClick"
+            @input="textChange"
+            @keyboardheightchange="onkeyboardheightchange"
+            @confirm="handleSendClick"
+          />
+          <view :class="classPrefix + '__textarea--placeholder ' + (focusFlag || innerValue ? 'hide' : '')">
+            {{ placeholder }}
+          </view>
+        </view>
+
+        <view :class="classPrefix + '__footer'">
+          <view :class="classPrefix + '__mode'">
+            <slot name="footer-prefix" />
+          </view>
+          <view :class="classPrefix + '__sendbtn'">
+            <block v-if="renderPresets">
+              <view :class="classPrefix + '__sendbtn--default'">
+                <block
+                  v-for="(item, index) in renderPresets"
+                  :key="index"
+                >
+                  <view>
+                    <view
+                      v-if="item.name === 'upload'"
+                      :class="'plus-btn ' + (item.status === 'disabled' ? 'disabled' : '')"
+                    >
+                      <view
+                        class="btn-func"
+                        :data-status="item.status"
+                        @click.stop="handleUploadClick"
+                      >
+                        <t-icon
+                          :name="visible ? 'close' : 'add'"
+                          size="40rpx"
+                        />
+                      </view>
+                    </view>
+
+                    <block v-if="item.name === 'send'">
+                      <block v-if="item.type === 'text'">
+                        <view
+                          :class="'send-btn-' + item.type + ' ' + (innerValue || loading ? 'active' : 'disabled')"
+                          @click.stop="handleSendClick"
+                        >
+                          {{ loading ? '停止' : '发送' }}
+                        </view>
+                      </block>
+                      <block v-else>
+                        <view
+                          :class="
+                            'send-btn-icon send-btn-' + item.type + ' ' + (innerValue || loading ? 'active' : 'disabled') + ' ' + (loading ? 'stop' : '')
+                          "
+                          @click.stop="handleSendClick"
+                        >
+                          <block v-if="!loading">
+                            <t-icon
+                              name="send-filled"
+                              size="32rpx"
+                            />
+                          </block>
+                          <block v-else>
+                            <view style="width: 24rpx; height: 24rpx; background-color: #ffffff" />
+                          </block>
+                        </view>
+                      </block>
+                    </block>
+                  </view>
+                </block>
+              </view>
+            </block>
+            <block v-else>
+              <slot name="suffix" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="visible"
+      :class="classPrefix + '__upload'"
+      @click.stop="handleUploadClick"
+    >
+      <block
+        v-for="(name, index) in uploadNames"
+        :key="index"
+      >
+        <view
+          :class="classPrefix + '__upload-item'"
+          :data-name="name"
+          @click.stop="handleUploadEntryClick"
+        >
+          <view :class="classPrefix + '__upload-item__icon'">
+            <t-icon
+              :name="uploadConfig[name].iconClass"
+              size="56rpx"
+            />
+          </view>
+          <view :class="classPrefix + '__upload-item__text'">
+            {{ uploadConfig[name].text }}
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import attachments from 'tdesign-uniapp-chat/attachments/attachments.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+import { textareaStyle } from './computed';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { nextTick } from 'tdesign-uniapp/common/utils';
+
+const name = `${prefix}-chat-sender`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tIcon,
+    attachments,
+  },
+
+  props: {
+    ...props,
+  },
+
+  emits: [
+    'update:visible',
+    'update:value',
+  ],
+
+  data() {
+    return {
+      classPrefix: name,
+      scrollViewTop: 0,
+      focusFlag: false,
+      isSending: false,
+      inputStyle: '',
+      originalMarginBottom: 12, // 设计稿的 margin-bottom 值（单位：px）
+      files: [],
+      uploadPlacement: 'bottom',
+      uploadConfig: {
+        uploadCamera: {
+          iconClass: 'camera',
+          text: '拍摄',
+          handler: 'handleImageUpload',
+          handlerArg: 'camera',
+        },
+        uploadImage: {
+          iconClass: 'image',
+          text: '图片',
+          handler: 'handleImageUpload',
+          handlerArg: 'album',
+        },
+        uploadAttachment: {
+          iconClass: 'file-add',
+          text: '文件',
+          handler: 'handleWechatFileUpload',
+          handlerArg: 'attachment',
+        },
+      },
+      uploadNames: [],
+
+      _,
+
+      innerValue: this.value,
+    };
+  },
+
+  watch: {
+    value: {
+      handler(v) {
+        this.innerValue = v;
+        nextTick().then(() => {
+          this.innerValue = v;
+        });
+      },
+      immediate: true,
+    },
+    fileList: {
+      handler(newVal) {
+      // 添加空值检查
+        this.files = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
+      },
+      immediate: true,
+      deep: true,
+    },
+    renderPresets: {
+      handler(newVal) {
+        const preset = newVal.find(item => Array.isArray(item.presets));
+        this.uploadNames = preset ? preset.presets : [];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  methods: {
+    textareaStyle,
+
+    onkeyboardheightchange(e) {
+      // 业务侧控制键盘顶起高度，如果用fix布局，不需要监听键盘高度变化
+      this.$emit('keyboardheightchange', e.detail);
+      // 不开启自动顶起，不做处理
+      if (!this.autoRiseWithKeyboard) return;
+      const keyboardHeight = e.detail.height;
+      if (keyboardHeight > 0) {
+        // 键盘弹起时，将键盘高度与原始 margin-bottom 相加
+        // todo：使用js计算实际的margin-bottom，因为业务侧可能会覆盖样式
+        const totalMarginBottom = keyboardHeight + this.originalMarginBottom;
+        this.inputStyle = `margin-bottom: ${totalMarginBottom}px;`;
+      } else {
+        // 键盘收起时，恢复原始 margin-bottom
+        this.inputStyle = '';
+      }
+    },
+
+    handleSendClick(e) {
+      this.loading ? this.handleStop(e) : this.sendClick(e);
+    },
+
+    handleOutsideClick() {
+      this.$emit('update:visible', false);
+    },
+
+    sendClick(e) {
+      if (this.innerValue && !this.disabled) {
+        this.$emit('send', {
+          value: this.innerValue,
+          e,
+        });
+      }
+    },
+
+    handleStop(e) {
+      this.$emit(
+        'stop',
+        {
+          value: this.innerValue,
+          e,
+        },
+        { bubbles: false },
+      );
+    },
+
+    handlerClick() {
+      // 禁用状态输入框无焦点
+      if (this.disabled) {
+        this.focusFlag = false;
+      } else {
+        this.focusFlag = true;
+      }
+    },
+
+    focusFn(e) {
+      this.focusFlag = true;
+      this.$emit('focus', {
+        value: e.detail.value,
+        context: e,
+      });
+    },
+
+    blurFn(e) {
+      this.focusFlag = false;
+      this.$emit('blur', {
+        value: e.detail.value,
+        context: e,
+      });
+    },
+
+    textChange(e) {
+      const { value } = e.detail;
+      this.innerValue = value;
+      this.$emit('change', {
+        value,
+        context: e,
+      });
+      this.$emit('update:value', value);
+    },
+
+    handleUploadClick(e) {
+      const { status } = e.currentTarget.dataset;
+      this.$emit('uploadClick');
+      // 禁用状态不显示上传面板
+      if (this.disabled || status === 'disabled') return;
+      // 点击按钮切换面板显示状态
+      this.$emit('update:visible', !this.visible);
+      // 透传处理上传按钮点击事件,由业务侧控制是否显示上传面板
+    },
+
+    handleFileClick(e) {
+      // 透传 处理文件点击事件
+      const { item } = e.detail;
+      this.$emit('fileClick', {
+        file: item,
+      });
+    },
+
+    handleFileRemove(e) {
+      // 添加数组存在性检查
+      if (!Array.isArray(this.files)) return;
+      const { item: file, index } = e;
+      this.$emit('fileDelete', {
+        file,
+      });
+      const files = [...this.files];
+      files.splice(index, 1);
+      this.files = files;
+
+      this.$emit('fileChange', {
+        files,
+      }); // 确保传递新数组
+    },
+
+    handleFileAdd() {
+      this.$emit('fileAdd');
+    },
+
+    async handleImageUpload(e) {
+      const { type } = e.currentTarget.dataset;
+      const sourceType = [type];
+      try {
+        const res = await wx.chooseImage({
+          count: 1,
+          // 最多可选9张
+          sizeType: ['original', 'compressed'],
+          // 可以指定是原图还是压缩图
+          sourceType, // 从相册选择
+        });
+        // 处理选择的图片
+        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
+          const files = res.tempFilePaths.map(item => ({
+            url: item,
+            name: item,
+            // 获取文件名
+            size: 0,
+            // 暂时不支持获取文件大小
+            fileType: 'image', // 文件类型为图片
+          }));
+          const name = type === 'album' ? 'uploadImage' : 'uploadCamera';
+          this.$emit('fileSelect', {
+            e,
+            name,
+            files,
+          });
+          const newFiles = [...this.files, ...files];
+          this.files = newFiles;
+
+          this.$emit('fileChange', {
+            files: newFiles,
+          });
+        }
+      } catch (err) {
+        wx.showToast({
+          title: type === 'album' ? '选择图片失败' : '拍照失败',
+          icon: 'none',
+        });
+      } finally {
+        this.$emit('update:visible', false);
+      }
+    },
+
+    async handleWechatFileUpload(e) {
+      try {
+        // 使用微信小程序的选择文件API
+        const res = await wx.chooseMessageFile({
+          count: 5,
+          // 最多5个文件
+          type: 'all', // 所有类型文件
+        });
+        if (res.tempFiles && res.tempFiles.length > 0) {
+          const files = res.tempFiles.map(item => ({
+            ...item,
+            // 其他属性保留
+            url: item.path, // 获取文件路径
+          }));
+          const newFiles = [...this.files, ...files];
+          this.files = newFiles;
+
+          this.$emit('fileSelect', {
+            e,
+            name: 'uploadAttachment',
+            files,
+          });
+          this.$emit('fileChange', {
+            files: newFiles,
+          });
+        }
+      } catch (err) {
+        wx.showToast({
+          title: '选择微信文件失败',
+          icon: 'none',
+        });
+      } finally {
+        this.$emit('update:visible', false);
+      }
+    },
+
+    handleUploadEntryClick(e) {
+      const { name } = e.currentTarget.dataset;
+      const config = this.uploadConfig[name];
+      if (config && this[config.handler]) {
+        this[config.handler]({ currentTarget: { dataset: { type: config.handlerArg } } });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './chat-sender.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/computed.js b/packages/tdesign-uniapp-chat/components/chat-sender/computed.js
new file mode 100644
index 000000000..cebf46a03
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/computed.js
@@ -0,0 +1,22 @@
+import utils from 'tdesign-uniapp/common/utils.wxs';
+import { getRegExp } from 'tdesign-uniapp/common/runtime/wxs-polyfill';
+
+
+export function textareaStyle(autosize) {
+  if (autosize && autosize.constructor === 'Object') {
+    return utils._style({
+      'min-height': addUnit(autosize.minHeight),
+      'max-height': addUnit(autosize.maxHeight),
+    });
+  }
+  return '';
+}
+
+function addUnit(value) {
+  const REGEXP = getRegExp('^-?\\d+(.\\d+)?$');
+  if (value == null) {
+    return undefined;
+  }
+  return REGEXP.test(`${value}`) ? `${value}rpx` : value;
+}
+
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/props.ts b/packages/tdesign-uniapp-chat/components/chat-sender/props.ts
new file mode 100644
index 000000000..aec787191
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/props.ts
@@ -0,0 +1,118 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatSenderProps } from './type';
+export default {
+  /** 默认键盘弹起不会把页面顶起来 */
+  adjustPosition: Boolean,
+  /** 附件列表属性 */
+  attachmentsProps: {
+    type: Object,
+  },
+  /** 键盘弹起时自动顶起来输入框 */
+  autoRiseWithKeyboard: Boolean,
+  /** 是否禁用输入框 */
+  disabled: Boolean,
+  /** 附件文件列表 */
+  fileList: {
+    type: Array,
+    default: (): TdChatSenderProps['fileList'] => [],
+  },
+  /** 发送按钮是否处于加载状态 */
+  loading: Boolean,
+  /** 输入框默认文案 */
+  placeholder: {
+    type: String,
+    default: '请输入消息...',
+  },
+  /** 预设发送区渲染配置，用于灵活配置发送区的上传入口和发送按钮，支持自定义类型、顺序、样式 */
+  renderPresets: {
+    type: Array,
+    default: () => [{name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: ''},{ name: 'send', type: 'icon'}],
+  },
+  /** 透传给 Textarea 组件的属性，autosize数值单位为 rpx */
+  textareaProps: {
+    type: [Boolean, Object],
+    default: () =>({ autosize: { maxHeight: 264, minHeight: 48 } }) as TdChatSenderProps['textareaProps'],
+  },
+  /** 输入框的值 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 上传面板是否可见 */
+  visible: Boolean,
+  /** 输入框聚焦时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入框值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 添加附件时触发 */
+  onFileAdd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 附件列表变化时触发 */
+  onFileChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击附件时触发 */
+  onFileClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 删除附件时触发 */
+  onFileDelete: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择文件（图片/微信文件）时触发 */
+  onFileSelect: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入框聚焦时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择文件（图片/微信文件）时触发 */
+  onKeyboardheightchange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击消息发送的回调方法 */
+  onSend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击消息终止的回调方法 */
+  onStop: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入框值发生变化时触发 */
+  onUpdateValue: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传面板可见性发生变化时触发 */
+  onUpdateVisible: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 【实验】点击上传按钮时触发 */
+  onUploadClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-sender/type.ts b/packages/tdesign-uniapp-chat/components/chat-sender/type.ts
new file mode 100644
index 000000000..b73fded32
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-sender/type.ts
@@ -0,0 +1,137 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAttachmentsProps as AttachmentsProps, FileItem } from '../attachments/type';
+
+export interface TdChatSenderProps {
+  /**
+   * 默认键盘弹起不会把页面顶起来
+   * @default false
+   */
+  adjustPosition?: boolean;
+  /**
+   * 附件列表属性
+   */
+  attachmentsProps?: AttachmentsProps;
+  /**
+   * 键盘弹起时自动顶起来输入框
+   * @default false
+   */
+  autoRiseWithKeyboard?: boolean;
+  /**
+   * 是否禁用输入框
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 附件文件列表
+   * @default []
+   */
+  fileList?: FileItem[];
+  /**
+   * 发送按钮是否处于加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 输入框默认文案
+   * @default 请输入消息...
+   */
+  placeholder?: string;
+  /**
+   * 预设发送区渲染配置，用于灵活配置发送区的上传入口和发送按钮，支持自定义类型、顺序、样式
+   * @default [{name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: ''},{ name: 'send', type: 'icon'}]
+   */
+  renderPresets?: ChatActionButtons;
+  /**
+   * 透传给 Textarea 组件的属性，autosize数值单位为 rpx
+   * @default { autosize: { maxHeight: 264, minHeight: 48 } }
+   */
+  textareaProps?: boolean | object;
+  /**
+   * 输入框的值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 上传面板是否可见
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 输入框聚焦时触发
+   */
+  onBlur?: (value: string, context: { e: FocusEvent }) => void;
+  /**
+   * 输入框值发生变化时触发
+   */
+  onChange?: (value: string, context: { e: InputEvent | MouseEvent | KeyboardEvent }) => void;
+  /**
+   * 添加附件时触发
+   */
+  onFileAdd?: () => void;
+  /**
+   * 附件列表变化时触发
+   */
+  onFileChange?: (file: FileItem) => void;
+  /**
+   * 点击附件时触发
+   */
+  onFileClick?: (file: FileItem) => void;
+  /**
+   * 删除附件时触发
+   */
+  onFileDelete?: (file: FileItem) => void;
+  /**
+   * 选择文件（图片/微信文件）时触发
+   */
+  onFileSelect?: (context: { files: FileList; name: UploadActionType }) => void;
+  /**
+   * 输入框聚焦时触发
+   */
+  onFocus?: (value: string, context: { e: FocusEvent }) => void;
+  /**
+   * 选择文件（图片/微信文件）时触发
+   */
+  onKeyboardheightchange?: (context: { height: number; duration: number }) => void;
+  /**
+   * 点击消息发送的回调方法
+   */
+  onSend?: (value: string, context: { e: MouseEvent | KeyboardEvent }) => void;
+  /**
+   * 点击消息终止的回调方法
+   */
+  onStop?: (value: string, context: { e: MouseEvent }) => void;
+  /**
+   * 输入框值发生变化时触发
+   */
+  onUpdateValue?: (value: boolean) => void;
+  /**
+   * 上传面板可见性发生变化时触发
+   */
+  onUpdateVisible?: (value: boolean) => void;
+  /**
+   * 【实验】点击上传按钮时触发
+   */
+  onUploadClick?: () => void;
+}
+
+export type ChatActionButtons = Array<ChatActionButton>;
+
+export type ChatActionButton = UploadButton | SendButton;
+
+export interface UploadButton {
+  name: 'upload';
+  presets: string[];
+  status?: string;
+}
+
+export interface SendButton {
+  name: 'send';
+  type: 'icon' | 'text';
+}
+
+export type UploadActionType = 'uploadAttachment' | 'uploadImage';
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/README.en-US.md b/packages/tdesign-uniapp-chat/components/chat-thinking/README.en-US.md
new file mode 100644
index 000000000..6f6a16689
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/README.en-US.md
@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatThinking Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | String | moving | options: skeleton/moving/gradient/dot | N
+collapsed | Boolean | false | \- | N
+content | Object | - | required。Typescript: `{ text?: string; title?: string }` | Y
+layout | String | block | options: block/border | N
+max-height | Number | - | \- | N
+status | String | pending | required。options: complete/stop/error/pending | Y
+
+### ChatThinking Events
+
+name | params | description
+-- | -- | --
+collapsed-change | `(value: Boolean)` | \-
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/README.md b/packages/tdesign-uniapp-chat/components/chat-thinking/README.md
new file mode 100644
index 000000000..f620e6ea2
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/README.md
@@ -0,0 +1,71 @@
+---
+title: ChatThinking 思考过程
+description: 用于展示思考过程的组件。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TChatThinking from 'tdesign-uniapp-chat/chat-thinking/chat-thinking.vue';
+```
+
+### 01 组件类型
+
+支持多种加载动效类型，包括gradient、moving、dots
+
+
+{{ base }}
+
+### 02 组件状态
+
+#### 思考中
+
+{{ pending }}
+
+#### 思考完成
+
+{{ complete }}
+
+### 03 组件样式
+
+支持通过`layout`来设置思考过程的布局方式
+
+{{ layout }}
+
+## API
+
+### ChatThinking Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | String | moving | 内容区域最大高度，超出会自动滚动。可选项：skeleton/moving/gradient/dot | N
+collapsed | Boolean | false | 是否折叠 | N
+content | Object | - | 必需。思考内容对象。TS 类型：`{ text?: string; title?: string }` | Y
+layout | String | block | 布局方式。可选项：block/border | N
+max-height | Number | - | 内容区域最大高度，超出会自动滚动 | N
+status | String | pending | 必需。思考状态。可选项：complete/stop/error/pending | Y
+
+### ChatThinking Events
+
+名称 | 参数 | 描述
+-- | -- | --
+collapsed-change | `(value: Boolean)` | 切换折叠面板时触发
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述
+-- | -- | --
+--td-chat-thinking-bg-color | @bg-color-container | 思考过程背景色
+--td-chat-thinking-border-color | @component-border | 思考过程边框颜色
+--td-chat-thinking-border-radius | @radius-default | 思考过程边框圆角
+--td-chat-thinking-color | @text-color-primary | 思考过程文字颜色
+--td-chat-thinking-font-size | @font-size-base | 思考过程文字大小
+--td-chat-thinking-line-height | @line-height-base | 思考过程行高
+--td-chat-thinking-padding | @spacer-2 | 思考过程内边距
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/base/index.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/base/index.vue
new file mode 100644
index 000000000..845fc96c1
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/base/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-thinking
+      :content="content"
+      layout="block"
+      :status="status"
+      animation="moving"
+      @expandChange="handleExpandChange"
+    />
+  </view>
+</template>
+
+<script>
+import tChatThinking from 'tdesign-uniapp-chat/chat-thinking/chat-thinking.vue';
+export default {
+  components: {
+    tChatThinking,
+  },
+  data() {
+    return {
+      thinking: true,
+      fullText:
+                '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说， 保持原来的运动状态。',
+      currentText: '',
+      isTyping: true,
+      content: {
+        text: '',
+        title: '思考过程',
+      },
+      typeSpeed: 50,
+      status: 'pending',
+      startTime: 0,
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    this.attached();
+  },
+  unmounted() {
+    if (this.typingTimer) {
+      clearTimeout(this.typingTimer);
+    }
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.startTime = Date.now();
+
+      this.startTyping();
+    },
+
+    startTyping() {
+      const { fullText, typeSpeed } = this;
+      let currentIndex = 0;
+      const typeNextChar = () => {
+        if (currentIndex <= fullText.length) {
+          const currentText = fullText.substring(0, currentIndex);
+          // 检查是否已经完成打字
+          if (currentIndex === fullText.length) {
+            const endTime = Date.now();
+            const duration = Math.round((endTime - this.startTime) / 1000);
+
+            this.currentText = currentText;
+            this.content = {
+              text: currentText,
+              title: `已完成思考（耗时${duration}秒）`,
+            };
+            this.isTyping = false;
+            this.status = 'complete';
+            return; // 直接返回，不再继续执行
+          }
+          // 正常打字过程
+          this.currentText = currentText;
+          this.content = {
+            text: currentText,
+            title: '思考过程',
+          };
+          this.isTyping = currentIndex < fullText.length;
+          if (currentIndex < fullText.length) {
+            this.typingTimer = setTimeout(typeNextChar, typeSpeed);
+          }
+          currentIndex += 1;
+        }
+      };
+      typeNextChar();
+    },
+
+    replayTyping() {
+      if (this.typingTimer) {
+        clearTimeout(this.typingTimer);
+      }
+      this.currentText = '';
+      this.content = {
+        text: '',
+        title: '思考过程',
+      };
+      this.isTyping = true;
+      this.startTime = Date.now();
+      this.startTyping();
+    },
+
+    onStop() {
+      console.log('停止思考');
+      this.thinking = false;
+      uni.showToast({
+        title: '已停止思考',
+        icon: 'success',
+      });
+    },
+
+    toggleThinking() {
+      this.thinking = !this.thinking;
+    },
+
+    resetThinking() {
+      this.thinking = true;
+      uni.showToast({
+        title: '已重置',
+        icon: 'success',
+      });
+    },
+
+    handleExpandChange() {
+      console.log('占位：函数 handleExpandChange 未声明');
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.less b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.vue
new file mode 100644
index 000000000..f56e1498b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/chat-thinking.vue
@@ -0,0 +1,62 @@
+<template>
+  <view>
+    <t-navbar
+      class="demo-navbar"
+      title="ChatThinking"
+      left-arrow
+    />
+
+    <view class="demo">
+      <t-demo-header
+        title="ChatThinking 思考过程"
+        desc="用于展示思考过程的组件。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="支持多种加载动效类型，包括 gradient、moving、dots"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="思考中"
+      >
+        <pending />
+      </t-demo>
+      <t-demo desc="思考完成">
+        <complete />
+      </t-demo>
+      <t-demo
+        title="03 组件样式"
+        desc=""
+      >
+        <layout />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import baseDemo from './base/index.vue';
+import layout from './layout/index.vue';
+import pending from './pending/index.vue';
+import complete from './complete/index.vue';
+
+
+export default {
+  components: {
+    baseDemo,
+    layout,
+    pending,
+    complete,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './chat-thinking.less';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/complete/index.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/complete/index.vue
new file mode 100644
index 000000000..3403cde3f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/complete/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-thinking
+      :content="content"
+      layout="block"
+      :status="status"
+      @collapsedChange="handleCollapsedChange"
+    />
+  </view>
+</template>
+
+<script>
+import tChatThinking from 'tdesign-uniapp-chat/chat-thinking/chat-thinking.vue';
+export default {
+  components: {
+    tChatThinking,
+  },
+  data() {
+    return {
+      animation: 'moving',
+      status: 'complete',
+      content: {
+        text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说， 保持原来的运动状态。',
+        title: '已深度思考(用时19秒)',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleCollapsedChange(e) {
+      console.log('展开状态变化:', e.detail);
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/layout/index.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/layout/index.vue
new file mode 100644
index 000000000..7a5fcbe0f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/layout/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <view class="chat-example-desc">
+      block 样式
+    </view>
+    <view class="chat-example-block">
+      <t-chat-thinking
+        layout="block"
+        :content="content"
+        :status="status"
+        :animation="animation"
+      />
+    </view>
+
+    <view class="chat-example-desc">
+      border 样式
+    </view>
+    <view class="chat-example-block">
+      <t-chat-thinking
+        layout="border"
+        :content="content"
+        :status="status"
+        :animation="animation"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tChatThinking from 'tdesign-uniapp-chat/chat-thinking/chat-thinking.vue';
+
+
+export default {
+  components: {
+    tChatThinking,
+  },
+  data() {
+    return {
+      animation: 'moving',
+      status: 'complete',
+      content: {
+        text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说， 保持原来的运动状态。',
+        title: '已深度思考(用时19秒)',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.chat-example-desc {
+    margin: var(--td-spacer-3) var(--td-spacer-2) var(--td-spacer-2);
+    font-size: var(--td-font-size-base);
+    white-space: pre-line;
+    color: var(--bg-color-demo-desc);
+    line-height: 22px;
+}
+
+.chat-example-desc:first-child {
+    margin-top: -8px;
+}
+
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: var(--td-spacer-2);
+}
+
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/_example/pending/index.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/pending/index.vue
new file mode 100644
index 000000000..a21cf35ca
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/_example/pending/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <view class="chat-example-block">
+    <t-chat-thinking
+      :content="content"
+      layout="block"
+      :status="status"
+      @collapsedChange="handleCollapsedChange"
+    />
+  </view>
+</template>
+
+<script>
+import tChatThinking from 'tdesign-uniapp-chat/chat-thinking/chat-thinking.vue';
+export default {
+  components: {
+    tChatThinking,
+  },
+  data() {
+    return {
+      animation: 'moving',
+      content: {
+        text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律',
+        title: '思考中···',
+      },
+      status: 'pending',
+    };
+  },
+  created() {},
+  methods: {
+    handleCollapsedChange(e) {
+      console.log('展开状态变化:', e.detail);
+    },
+  },
+};
+</script>
+<style>
+.chat-example-block {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.less b/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.less
new file mode 100644
index 000000000..79d252051
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.less
@@ -0,0 +1,101 @@
+@import 'tdesign-uniapp/common/style/base.less';
+
+@chat-thinking: ~'@{prefix}-chat-thinking';
+
+.@{chat-thinking} {
+  width: 100%;
+  box-sizing: border-box;
+
+  &__inner {
+    &--block {
+      background-color: @bg-color-page;
+      border-radius: @radius-default;
+      padding: @spacer @spacer-1;
+    }
+
+    &--border {
+      padding: @spacer @spacer-1;
+    }
+  }
+
+  &__hd {
+    height: 48rpx;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    :deep(.@{chat-thinking}__icon) {
+      font-size: @font-size-xl;
+
+      &--close {
+        color: @text-color-secondary;
+      }
+
+      &--complete,
+      &--stop {
+        color: @success-color;
+      }
+
+      &--collapse {
+        color: @text-color-secondary;
+        transition: transform 0.3s ease-in-out;
+      }
+    }
+
+    .@{chat-thinking}__txt {
+      color: @text-color-primary;
+      font-size: @font-size-base;
+      line-height: 32rpx;
+      flex: 1;
+      margin-left: @spacer;
+    }
+  }
+
+  &__bd {
+    color: @text-color-placeholder;
+    font-size: @font-size-base;
+    line-height: 170%;
+    margin-top: @spacer-1;
+    white-space: pre-wrap;
+    overflow-y: auto;
+
+    &--border {
+      border-left: 4rpx solid @component-stroke;
+      padding-left: @spacer;
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1.333) translateY(-50%);
+  }
+  33% {
+    transform: scale(1.333) translateY(-50%);
+  }
+  34% {
+    transform: scale(1) translateY(-50%);
+  }
+  100% {
+    transform: scale(1) translateY(-50%);
+  }
+}
+
+@-webkit-keyframes scale {
+  0% {
+    -webkit-transform: scale(1.333) translateY(-50%);
+    transform: scale(1.333) translateY(-50%);
+  }
+  33% {
+    -webkit-transform: scale(1.333) translateY(-50%);
+    transform: scale(1.333) translateY(-50%);
+  }
+  34% {
+    -webkit-transform: scale(1) translateY(-50%);
+    transform: scale(1) translateY(-50%);
+  }
+  100% {
+    -webkit-transform: scale(1) translateY(-50%);
+    transform: scale(1) translateY(-50%);
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.vue b/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.vue
new file mode 100644
index 000000000..18a105a1d
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/chat-thinking.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="_._style([customStyle])"
+  >
+    <view :class="_.cls(classPrefix + '__inner', [layout])">
+      <view :class="classPrefix + '__hd'">
+        <block v-if="status === 'error' || status === 'complete' || status === 'stop'">
+          <t-icon
+            :t-class="_.cls(classPrefix + '__icon', [status])"
+            :name="status === 'error' ? 'close-circle' : 'check-circle'"
+          />
+        </block>
+        <block v-else>
+          <t-chat-loading :animation="animation" />
+        </block>
+        <view :class="classPrefix + '__txt'">
+          {{ content.title || '正在思考中...' }}
+        </view>
+        <view :data-event-opts="[['tap', [['handleCollapse', ['$event']]]]]">
+          <t-icon
+            :custom-style="localCollapsed ? 'transform: rotate(180deg)' : ''"
+            :t-class="_.cls(classPrefix + '__icon', [['collapse', true]])"
+            name="chevron-up"
+            @click="handleCollapse"
+          />
+        </view>
+      </view>
+      <view
+        v-if="!localCollapsed"
+        :class="_.cls(classPrefix + '__bd', [layout])"
+        :style="contentStyle"
+      >
+        {{ content.text || '' }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tChatLoading from 'tdesign-uniapp-chat/chat-loading/chat-loading.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import { prefix } from 'tdesign-uniapp/common/config';
+import props from './props';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+import { uniComponent } from 'tdesign-uniapp/common/src/index';
+
+
+const name = `${prefix}-chat-thinking`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+
+  components: {
+    tIcon,
+    tChatLoading,
+  },
+
+  props: {
+    ...props,
+  },
+
+  data() {
+    return {
+      localCollapsed: false,
+      contentStyle: '',
+      classPrefix: name,
+      _,
+    };
+  },
+
+  watch: {
+    maxHeight: {
+      handler() {
+        this.setContentStyle();
+      },
+      immediate: true,
+    },
+  },
+
+  created() {
+  },
+
+  mounted() {
+    const createdFn = function __anonymous() {
+      // 初始化折叠状态
+      this.localCollapsed = this.collapsed || false;
+    };
+    createdFn.call(this);
+
+
+    // 调用新增的函数
+    this.setContentStyle();
+  },
+
+  methods: {
+    handleCollapse() {
+      // 切换内部折叠状态
+      this.localCollapsed = !this.localCollapsed;
+
+      // 通知父组件状态变化
+      this.$emit('collapsedChange',  this.localCollapsed);
+    },
+    setContentStyle() {
+      if (this.maxHeight) {
+        this.contentStyle = `max-height: ${this.maxHeight}px;`;
+      } else {
+        this.contentStyle = '';
+      }
+    },
+  },
+
+});
+
+
+</script>
+<style scoped>
+@import './chat-thinking.css';
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/props.ts b/packages/tdesign-uniapp-chat/components/chat-thinking/props.ts
new file mode 100644
index 000000000..e40e185ae
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/props.ts
@@ -0,0 +1,52 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdChatThinkingProps } from './type';
+export default {
+  /** 内容区域最大高度，超出会自动滚动 */
+  animation: {
+    type: String,
+    default: 'moving' as TdChatThinkingProps['animation'],
+    validator(val: TdChatThinkingProps['animation']): boolean {
+      if (!val) return true;
+      return ['skeleton', 'moving', 'gradient', 'dot'].includes(val);
+    },
+  },
+  /** 是否折叠 */
+  collapsed: Boolean,
+  /** 思考内容对象 */
+  content: {
+    type: Object,
+    required: true,
+  },
+  /** 布局方式 */
+  layout: {
+    type: String,
+    default: 'block' as TdChatThinkingProps['layout'],
+    validator(val: TdChatThinkingProps['layout']): boolean {
+      if (!val) return true;
+      return ['block', 'border'].includes(val);
+    },
+  },
+  /** 内容区域最大高度，超出会自动滚动 */
+  maxHeight: {
+    type: Number,
+  },
+  /** 思考状态 */
+  status: {
+    type: String,
+    default: 'pending' as TdChatThinkingProps['status'],
+    required: true,
+    validator(val: TdChatThinkingProps['status']): boolean {
+            return ['complete', 'stop', 'error', 'pending'].includes(val);
+    },
+  },
+  /** 切换折叠面板时触发 */
+  onCollapsedChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp-chat/components/chat-thinking/type.ts b/packages/tdesign-uniapp-chat/components/chat-thinking/type.ts
new file mode 100644
index 000000000..3c83fefee
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/chat-thinking/type.ts
@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdChatThinkingProps {
+  /**
+   * 内容区域最大高度，超出会自动滚动
+   * @default moving
+   */
+  animation?: 'skeleton' | 'moving' | 'gradient' | 'dot';
+  /**
+   * 是否折叠
+   * @default false
+   */
+  collapsed?: boolean;
+  /**
+   * 思考内容对象
+   */
+  content: { text?: string; title?: string };
+  /**
+   * 布局方式
+   * @default block
+   */
+  layout?: 'block' | 'border';
+  /**
+   * 内容区域最大高度，超出会自动滚动
+   */
+  maxHeight?: number;
+  /**
+   * 思考状态
+   * @default pending
+   */
+  status: 'complete' | 'stop' | 'error' | 'pending';
+  /**
+   * 切换折叠面板时触发
+   */
+  onCollapsedChange?: (value: Boolean) => void;
+}
diff --git a/packages/tdesign-uniapp-chat/components/global.d.ts b/packages/tdesign-uniapp-chat/components/global.d.ts
new file mode 100644
index 000000000..a2752f1e9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/global.d.ts
@@ -0,0 +1,15 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    TAttachments: typeof import('tdesign-uniapp/attachments/attachments.vue').default;
+    TChatActionbar: typeof import('tdesign-uniapp/chat-actionbar/chat-actionbar.vue').default;
+    TChatContent: typeof import('tdesign-uniapp/chat-content/chat-content.vue').default;
+    TChatList: typeof import('tdesign-uniapp/chat-list/chat-list.vue').default;
+    TChatLoading: typeof import('tdesign-uniapp/chat-loading/chat-loading.vue').default;
+    TChatMarkdown: typeof import('tdesign-uniapp/chat-markdown/chat-markdown.vue').default;
+    TChatMessage: typeof import('tdesign-uniapp/chat-message/chat-message.vue').default;
+    TChatSender: typeof import('tdesign-uniapp/chat-sender/chat-sender.vue').default;
+    TChatThinking: typeof import('tdesign-uniapp/chat-thinking/chat-thinking.vue').default;
+  }
+}
+
+export {};
diff --git a/packages/tdesign-uniapp-chat/components/npm/marked/index.js b/packages/tdesign-uniapp-chat/components/npm/marked/index.js
new file mode 100644
index 000000000..e247a5f99
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/npm/marked/index.js
@@ -0,0 +1,72 @@
+/**
+ * marked v16.3.0 - a markdown parser
+ * Copyright (c) 2011-2025, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/markedjs/marked
+ */
+
+/**
+ * DO NOT EDIT THIS FILE
+ * The code in this file is generated from files in ./src/
+ */
+
+function L(){return{async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null}}var O=L();function G(l){O=l}var E={exec:()=>null};function h(l,e=""){let t=typeof l=="string"?l:l.source,n={replace:(r,i)=>{let s=typeof i=="string"?i:i.source;return s=s.replace(m.caret,"$1"),t=t.replace(r,s),n},getRegex:()=>new RegExp(t,e)};return n}var m={codeRemoveIndent:/^(?: {1,4}| {0,3}\t)/gm,outputLinkReplace:/\\([\[\]])/g,indentCodeCompensation:/^(\s+)(?:```)/,beginningSpace:/^\s+/,endingHash:/#$/,startingSpaceChar:/^ /,endingSpaceChar:/ $/,nonSpaceChar:/[^ ]/,newLineCharGlobal:/\n/g,tabCharGlobal:/\t/g,multipleSpaceGlobal:/\s+/g,blankLine:/^[ \t]*$/,doubleBlankLine:/\n[ \t]*\n[ \t]*$/,blockquoteStart:/^ {0,3}>/,blockquoteSetextReplace:/\n {0,3}((?:=+|-+) *)(?=\n|$)/g,blockquoteSetextReplace2:/^ {0,3}>[ \t]?/gm,listReplaceTabs:/^\t+/,listReplaceNesting:/^ {1,4}(?=( {4})*[^ ])/g,listIsTask:/^\[[ xX]\] /,listReplaceTask:/^\[[ xX]\] +/,anyLine:/\n.*\n/,hrefBrackets:/^<(.*)>$/,tableDelimiter:/[:|]/,tableAlignChars:/^\||\| *$/g,tableRowBlankLine:/\n[ \t]*$/,tableAlignRight:/^ *-+: *$/,tableAlignCenter:/^ *:-+: *$/,tableAlignLeft:/^ *:-+ *$/,startATag:/^<a /i,endATag:/^<\/a>/i,startPreScriptTag:/^<(pre|code|kbd|script)(\s|>)/i,endPreScriptTag:/^<\/(pre|code|kbd|script)(\s|>)/i,startAngleBracket:/^</,endAngleBracket:/>$/,pedanticHrefTitle:/^([^'"]*[^\s])\s+(['"])(.*)\2/,unicodeAlphaNumeric:/[\p{L}\p{N}]/u,escapeTest:/[&<>"']/,escapeReplace:/[&<>"']/g,escapeTestNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,escapeReplaceNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,unescapeTest:/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig,caret:/(^|[^\[])\^/g,percentDecode:/%25/g,findPipe:/\|/g,splitPipe:/ \|/,slashPipe:/\\\|/g,carriageReturn:/\r\n|\r/g,spaceLine:/^ +$/gm,notSpaceStart:/^\S*/,endingNewline:/\n$/,listItemRegex:l=>new RegExp(`^( {0,3}${l})((?:[	 ][^\\n]*)?(?:\\n|$))`),nextBulletRegex:l=>new RegExp(`^ {0,${Math.min(3,l-1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ 	][^\\n]*)?(?:\\n|$))`),hrRegex:l=>new RegExp(`^ {0,${Math.min(3,l-1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`),fencesBeginRegex:l=>new RegExp(`^ {0,${Math.min(3,l-1)}}(?:\`\`\`|~~~)`),headingBeginRegex:l=>new RegExp(`^ {0,${Math.min(3,l-1)}}#`),htmlBeginRegex:l=>new RegExp(`^ {0,${Math.min(3,l-1)}}<(?:[a-z].*>|!--)`,"i")},xe=/^(?:[ \t]*(?:\n|$))+/,be=/^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/,Re=/^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/,C=/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,Oe=/^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,j=/(?:[*+-]|\d{1,9}[.)])/,se=/^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/,ie=h(se).replace(/bull/g,j).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/\|table/g,"").getRegex(),Te=h(se).replace(/bull/g,j).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/table/g,/ {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex(),F=/^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/,we=/^[^\n]+/,Q=/(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/,ye=h(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label",Q).replace("title",/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(),Pe=h(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g,j).getRegex(),v="address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul",U=/<!--(?:-?>|[\s\S]*?(?:-->|$))/,Se=h("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))","i").replace("comment",U).replace("tag",v).replace("attribute",/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),oe=h(F).replace("hr",C).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("|lheading","").replace("|table","").replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",v).getRegex(),$e=h(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph",oe).getRegex(),K={blockquote:$e,code:be,def:ye,fences:Re,heading:Oe,hr:C,html:Se,lheading:ie,list:Pe,newline:xe,paragraph:oe,table:E,text:we},re=h("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr",C).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("blockquote"," {0,3}>").replace("code","(?: {4}| {0,3}	)[^\\n]").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",v).getRegex(),_e={...K,lheading:Te,table:re,paragraph:h(F).replace("hr",C).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("|lheading","").replace("table",re).replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",v).getRegex()},Le={...K,html:h(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment",U).replace(/tag/g,"(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(),def:/^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,heading:/^(#{1,6})(.*)(?:\n+|$)/,fences:E,lheading:/^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,paragraph:h(F).replace("hr",C).replace("heading",` *#{1,6} *[^
+]`).replace("lheading",ie).replace("|table","").replace("blockquote"," {0,3}>").replace("|fences","").replace("|list","").replace("|html","").replace("|tag","").getRegex()},Me=/^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,ze=/^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,ae=/^( {2,}|\\)\n(?!\s*$)/,Ae=/^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/,D=/[\p{P}\p{S}]/u,W=/[\s\p{P}\p{S}]/u,le=/[^\s\p{P}\p{S}]/u,Ee=h(/^((?![*_])punctSpace)/,"u").replace(/punctSpace/g,W).getRegex(),ue=/(?!~)[\p{P}\p{S}]/u,Ce=/(?!~)[\s\p{P}\p{S}]/u,Ie=/(?:[^\s\p{P}\p{S}]|~)/u,Be=/\[[^\[\]]*?\]\((?:\\[\s\S]|[^\\\(\)]|\((?:\\[\s\S]|[^\\\(\)])*\))*\)|`[^`]*?`|<(?! )[^<>]*?>/g,pe=/^(?:\*+(?:((?!\*)punct)|[^\s*]))|^_+(?:((?!_)punct)|([^\s_]))/,qe=h(pe,"u").replace(/punct/g,D).getRegex(),ve=h(pe,"u").replace(/punct/g,ue).getRegex(),ce="^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)",De=h(ce,"gu").replace(/notPunctSpace/g,le).replace(/punctSpace/g,W).replace(/punct/g,D).getRegex(),He=h(ce,"gu").replace(/notPunctSpace/g,Ie).replace(/punctSpace/g,Ce).replace(/punct/g,ue).getRegex(),Ze=h("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)","gu").replace(/notPunctSpace/g,le).replace(/punctSpace/g,W).replace(/punct/g,D).getRegex(),Ge=h(/\\(punct)/,"gu").replace(/punct/g,D).getRegex(),Ne=h(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme",/[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email",/[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex(),je=h(U).replace("(?:-->|$)","-->").getRegex(),Fe=h("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment",je).replace("attribute",/\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex(),q=/(?:\[(?:\\[\s\S]|[^\[\]\\])*\]|\\[\s\S]|`[^`]*`|[^\[\]\\`])*?/,Qe=h(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]*(?:\n[ \t]*)?)(title))?\s*\)/).replace("label",q).replace("href",/<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]*/).replace("title",/"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex(),he=h(/^!?\[(label)\]\[(ref)\]/).replace("label",q).replace("ref",Q).getRegex(),de=h(/^!?\[(ref)\](?:\[\])?/).replace("ref",Q).getRegex(),Ue=h("reflink|nolink(?!\\()","g").replace("reflink",he).replace("nolink",de).getRegex(),X={_backpedal:E,anyPunctuation:Ge,autolink:Ne,blockSkip:Be,br:ae,code:ze,del:E,emStrongLDelim:qe,emStrongRDelimAst:De,emStrongRDelimUnd:Ze,escape:Me,link:Qe,nolink:de,punctuation:Ee,reflink:he,reflinkSearch:Ue,tag:Fe,text:Ae,url:E},Ke={...X,link:h(/^!?\[(label)\]\((.*?)\)/).replace("label",q).getRegex(),reflink:h(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label",q).getRegex()},N={...X,emStrongRDelimAst:He,emStrongLDelim:ve,url:h(/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/,"i").replace("email",/[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(),_backpedal:/(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/,del:/^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/,text:/^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/},We={...N,br:h(ae).replace("{2,}","*").getRegex(),text:h(N.text).replace("\\b_","\\b_| {2,}\\n").replace(/\{2,\}/g,"*").getRegex()},I={normal:K,gfm:_e,pedantic:Le},M={normal:X,gfm:N,breaks:We,pedantic:Ke};var Xe={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},ke=l=>Xe[l];function w(l,e){if(e){if(m.escapeTest.test(l))return l.replace(m.escapeReplace,ke)}else if(m.escapeTestNoEncode.test(l))return l.replace(m.escapeReplaceNoEncode,ke);return l}function J(l){try{l=encodeURI(l).replace(m.percentDecode,"%")}catch{return null}return l}function V(l,e){let t=l.replace(m.findPipe,(i,s,o)=>{let a=!1,u=s;for(;--u>=0&&o[u]==="\\";)a=!a;return a?"|":" |"}),n=t.split(m.splitPipe),r=0;if(n[0].trim()||n.shift(),n.length>0&&!n.at(-1)?.trim()&&n.pop(),e)if(n.length>e)n.splice(e);else for(;n.length<e;)n.push("");for(;r<n.length;r++)n[r]=n[r].trim().replace(m.slashPipe,"|");return n}function z(l,e,t){let n=l.length;if(n===0)return"";let r=0;for(;r<n;){let i=l.charAt(n-r-1);if(i===e&&!t)r++;else if(i!==e&&t)r++;else break}return l.slice(0,n-r)}function ge(l,e){if(l.indexOf(e[1])===-1)return-1;let t=0;for(let n=0;n<l.length;n++)if(l[n]==="\\")n++;else if(l[n]===e[0])t++;else if(l[n]===e[1]&&(t--,t<0))return n;return t>0?-2:-1}function fe(l,e,t,n,r){let i=e.href,s=e.title||null,o=l[1].replace(r.other.outputLinkReplace,"$1");n.state.inLink=!0;let a={type:l[0].charAt(0)==="!"?"image":"link",raw:t,href:i,title:s,text:o,tokens:n.inlineTokens(o)};return n.state.inLink=!1,a}function Je(l,e,t){let n=l.match(t.other.indentCodeCompensation);if(n===null)return e;let r=n[1];return e.split(`
+`).map(i=>{let s=i.match(t.other.beginningSpace);if(s===null)return i;let[o]=s;return o.length>=r.length?i.slice(r.length):i}).join(`
+`)}var y=class{options;rules;lexer;constructor(e){this.options=e||O}space(e){let t=this.rules.block.newline.exec(e);if(t&&t[0].length>0)return{type:"space",raw:t[0]}}code(e){let t=this.rules.block.code.exec(e);if(t){let n=t[0].replace(this.rules.other.codeRemoveIndent,"");return{type:"code",raw:t[0],codeBlockStyle:"indented",text:this.options.pedantic?n:z(n,`
+`)}}}fences(e){let t=this.rules.block.fences.exec(e);if(t){let n=t[0],r=Je(n,t[3]||"",this.rules);return{type:"code",raw:n,lang:t[2]?t[2].trim().replace(this.rules.inline.anyPunctuation,"$1"):t[2],text:r}}}heading(e){let t=this.rules.block.heading.exec(e);if(t){let n=t[2].trim();if(this.rules.other.endingHash.test(n)){let r=z(n,"#");(this.options.pedantic||!r||this.rules.other.endingSpaceChar.test(r))&&(n=r.trim())}return{type:"heading",raw:t[0],depth:t[1].length,text:n,tokens:this.lexer.inline(n)}}}hr(e){let t=this.rules.block.hr.exec(e);if(t)return{type:"hr",raw:z(t[0],`
+`)}}blockquote(e){let t=this.rules.block.blockquote.exec(e);if(t){let n=z(t[0],`
+`).split(`
+`),r="",i="",s=[];for(;n.length>0;){let o=!1,a=[],u;for(u=0;u<n.length;u++)if(this.rules.other.blockquoteStart.test(n[u]))a.push(n[u]),o=!0;else if(!o)a.push(n[u]);else break;n=n.slice(u);let p=a.join(`
+`),c=p.replace(this.rules.other.blockquoteSetextReplace,`
+    $1`).replace(this.rules.other.blockquoteSetextReplace2,"");r=r?`${r}
+${p}`:p,i=i?`${i}
+${c}`:c;let f=this.lexer.state.top;if(this.lexer.state.top=!0,this.lexer.blockTokens(c,s,!0),this.lexer.state.top=f,n.length===0)break;let k=s.at(-1);if(k?.type==="code")break;if(k?.type==="blockquote"){let x=k,g=x.raw+`
+`+n.join(`
+`),T=this.blockquote(g);s[s.length-1]=T,r=r.substring(0,r.length-x.raw.length)+T.raw,i=i.substring(0,i.length-x.text.length)+T.text;break}else if(k?.type==="list"){let x=k,g=x.raw+`
+`+n.join(`
+`),T=this.list(g);s[s.length-1]=T,r=r.substring(0,r.length-k.raw.length)+T.raw,i=i.substring(0,i.length-x.raw.length)+T.raw,n=g.substring(s.at(-1).raw.length).split(`
+`);continue}}return{type:"blockquote",raw:r,tokens:s,text:i}}}list(e){let t=this.rules.block.list.exec(e);if(t){let n=t[1].trim(),r=n.length>1,i={type:"list",raw:"",ordered:r,start:r?+n.slice(0,-1):"",loose:!1,items:[]};n=r?`\\d{1,9}\\${n.slice(-1)}`:`\\${n}`,this.options.pedantic&&(n=r?n:"[*+-]");let s=this.rules.other.listItemRegex(n),o=!1;for(;e;){let u=!1,p="",c="";if(!(t=s.exec(e))||this.rules.block.hr.test(e))break;p=t[0],e=e.substring(p.length);let f=t[2].split(`
+`,1)[0].replace(this.rules.other.listReplaceTabs,H=>" ".repeat(3*H.length)),k=e.split(`
+`,1)[0],x=!f.trim(),g=0;if(this.options.pedantic?(g=2,c=f.trimStart()):x?g=t[1].length+1:(g=t[2].search(this.rules.other.nonSpaceChar),g=g>4?1:g,c=f.slice(g),g+=t[1].length),x&&this.rules.other.blankLine.test(k)&&(p+=k+`
+`,e=e.substring(k.length+1),u=!0),!u){let H=this.rules.other.nextBulletRegex(g),ee=this.rules.other.hrRegex(g),te=this.rules.other.fencesBeginRegex(g),ne=this.rules.other.headingBeginRegex(g),me=this.rules.other.htmlBeginRegex(g);for(;e;){let Z=e.split(`
+`,1)[0],A;if(k=Z,this.options.pedantic?(k=k.replace(this.rules.other.listReplaceNesting,"  "),A=k):A=k.replace(this.rules.other.tabCharGlobal,"    "),te.test(k)||ne.test(k)||me.test(k)||H.test(k)||ee.test(k))break;if(A.search(this.rules.other.nonSpaceChar)>=g||!k.trim())c+=`
+`+A.slice(g);else{if(x||f.replace(this.rules.other.tabCharGlobal,"    ").search(this.rules.other.nonSpaceChar)>=4||te.test(f)||ne.test(f)||ee.test(f))break;c+=`
+`+k}!x&&!k.trim()&&(x=!0),p+=Z+`
+`,e=e.substring(Z.length+1),f=A.slice(g)}}i.loose||(o?i.loose=!0:this.rules.other.doubleBlankLine.test(p)&&(o=!0));let T=null,Y;this.options.gfm&&(T=this.rules.other.listIsTask.exec(c),T&&(Y=T[0]!=="[ ] ",c=c.replace(this.rules.other.listReplaceTask,""))),i.items.push({type:"list_item",raw:p,task:!!T,checked:Y,loose:!1,text:c,tokens:[]}),i.raw+=p}let a=i.items.at(-1);if(a)a.raw=a.raw.trimEnd(),a.text=a.text.trimEnd();else return;i.raw=i.raw.trimEnd();for(let u=0;u<i.items.length;u++)if(this.lexer.state.top=!1,i.items[u].tokens=this.lexer.blockTokens(i.items[u].text,[]),!i.loose){let p=i.items[u].tokens.filter(f=>f.type==="space"),c=p.length>0&&p.some(f=>this.rules.other.anyLine.test(f.raw));i.loose=c}if(i.loose)for(let u=0;u<i.items.length;u++)i.items[u].loose=!0;return i}}html(e){let t=this.rules.block.html.exec(e);if(t)return{type:"html",block:!0,raw:t[0],pre:t[1]==="pre"||t[1]==="script"||t[1]==="style",text:t[0]}}def(e){let t=this.rules.block.def.exec(e);if(t){let n=t[1].toLowerCase().replace(this.rules.other.multipleSpaceGlobal," "),r=t[2]?t[2].replace(this.rules.other.hrefBrackets,"$1").replace(this.rules.inline.anyPunctuation,"$1"):"",i=t[3]?t[3].substring(1,t[3].length-1).replace(this.rules.inline.anyPunctuation,"$1"):t[3];return{type:"def",tag:n,raw:t[0],href:r,title:i}}}table(e){let t=this.rules.block.table.exec(e);if(!t||!this.rules.other.tableDelimiter.test(t[2]))return;let n=V(t[1]),r=t[2].replace(this.rules.other.tableAlignChars,"").split("|"),i=t[3]?.trim()?t[3].replace(this.rules.other.tableRowBlankLine,"").split(`
+`):[],s={type:"table",raw:t[0],header:[],align:[],rows:[]};if(n.length===r.length){for(let o of r)this.rules.other.tableAlignRight.test(o)?s.align.push("right"):this.rules.other.tableAlignCenter.test(o)?s.align.push("center"):this.rules.other.tableAlignLeft.test(o)?s.align.push("left"):s.align.push(null);for(let o=0;o<n.length;o++)s.header.push({text:n[o],tokens:this.lexer.inline(n[o]),header:!0,align:s.align[o]});for(let o of i)s.rows.push(V(o,s.header.length).map((a,u)=>({text:a,tokens:this.lexer.inline(a),header:!1,align:s.align[u]})));return s}}lheading(e){let t=this.rules.block.lheading.exec(e);if(t)return{type:"heading",raw:t[0],depth:t[2].charAt(0)==="="?1:2,text:t[1],tokens:this.lexer.inline(t[1])}}paragraph(e){let t=this.rules.block.paragraph.exec(e);if(t){let n=t[1].charAt(t[1].length-1)===`
+`?t[1].slice(0,-1):t[1];return{type:"paragraph",raw:t[0],text:n,tokens:this.lexer.inline(n)}}}text(e){let t=this.rules.block.text.exec(e);if(t)return{type:"text",raw:t[0],text:t[0],tokens:this.lexer.inline(t[0])}}escape(e){let t=this.rules.inline.escape.exec(e);if(t)return{type:"escape",raw:t[0],text:t[1]}}tag(e){let t=this.rules.inline.tag.exec(e);if(t)return!this.lexer.state.inLink&&this.rules.other.startATag.test(t[0])?this.lexer.state.inLink=!0:this.lexer.state.inLink&&this.rules.other.endATag.test(t[0])&&(this.lexer.state.inLink=!1),!this.lexer.state.inRawBlock&&this.rules.other.startPreScriptTag.test(t[0])?this.lexer.state.inRawBlock=!0:this.lexer.state.inRawBlock&&this.rules.other.endPreScriptTag.test(t[0])&&(this.lexer.state.inRawBlock=!1),{type:"html",raw:t[0],inLink:this.lexer.state.inLink,inRawBlock:this.lexer.state.inRawBlock,block:!1,text:t[0]}}link(e){let t=this.rules.inline.link.exec(e);if(t){let n=t[2].trim();if(!this.options.pedantic&&this.rules.other.startAngleBracket.test(n)){if(!this.rules.other.endAngleBracket.test(n))return;let s=z(n.slice(0,-1),"\\");if((n.length-s.length)%2===0)return}else{let s=ge(t[2],"()");if(s===-2)return;if(s>-1){let a=(t[0].indexOf("!")===0?5:4)+t[1].length+s;t[2]=t[2].substring(0,s),t[0]=t[0].substring(0,a).trim(),t[3]=""}}let r=t[2],i="";if(this.options.pedantic){let s=this.rules.other.pedanticHrefTitle.exec(r);s&&(r=s[1],i=s[3])}else i=t[3]?t[3].slice(1,-1):"";return r=r.trim(),this.rules.other.startAngleBracket.test(r)&&(this.options.pedantic&&!this.rules.other.endAngleBracket.test(n)?r=r.slice(1):r=r.slice(1,-1)),fe(t,{href:r&&r.replace(this.rules.inline.anyPunctuation,"$1"),title:i&&i.replace(this.rules.inline.anyPunctuation,"$1")},t[0],this.lexer,this.rules)}}reflink(e,t){let n;if((n=this.rules.inline.reflink.exec(e))||(n=this.rules.inline.nolink.exec(e))){let r=(n[2]||n[1]).replace(this.rules.other.multipleSpaceGlobal," "),i=t[r.toLowerCase()];if(!i){let s=n[0].charAt(0);return{type:"text",raw:s,text:s}}return fe(n,i,n[0],this.lexer,this.rules)}}emStrong(e,t,n=""){let r=this.rules.inline.emStrongLDelim.exec(e);if(!r||r[3]&&n.match(this.rules.other.unicodeAlphaNumeric))return;if(!(r[1]||r[2]||"")||!n||this.rules.inline.punctuation.exec(n)){let s=[...r[0]].length-1,o,a,u=s,p=0,c=r[0][0]==="*"?this.rules.inline.emStrongRDelimAst:this.rules.inline.emStrongRDelimUnd;for(c.lastIndex=0,t=t.slice(-1*e.length+s);(r=c.exec(t))!=null;){if(o=r[1]||r[2]||r[3]||r[4]||r[5]||r[6],!o)continue;if(a=[...o].length,r[3]||r[4]){u+=a;continue}else if((r[5]||r[6])&&s%3&&!((s+a)%3)){p+=a;continue}if(u-=a,u>0)continue;a=Math.min(a,a+u+p);let f=[...r[0]][0].length,k=e.slice(0,s+r.index+f+a);if(Math.min(s,a)%2){let g=k.slice(1,-1);return{type:"em",raw:k,text:g,tokens:this.lexer.inlineTokens(g)}}let x=k.slice(2,-2);return{type:"strong",raw:k,text:x,tokens:this.lexer.inlineTokens(x)}}}}codespan(e){let t=this.rules.inline.code.exec(e);if(t){let n=t[2].replace(this.rules.other.newLineCharGlobal," "),r=this.rules.other.nonSpaceChar.test(n),i=this.rules.other.startingSpaceChar.test(n)&&this.rules.other.endingSpaceChar.test(n);return r&&i&&(n=n.substring(1,n.length-1)),{type:"codespan",raw:t[0],text:n}}}br(e){let t=this.rules.inline.br.exec(e);if(t)return{type:"br",raw:t[0]}}del(e){let t=this.rules.inline.del.exec(e);if(t)return{type:"del",raw:t[0],text:t[2],tokens:this.lexer.inlineTokens(t[2])}}autolink(e){let t=this.rules.inline.autolink.exec(e);if(t){let n,r;return t[2]==="@"?(n=t[1],r="mailto:"+n):(n=t[1],r=n),{type:"link",raw:t[0],text:n,href:r,tokens:[{type:"text",raw:n,text:n}]}}}url(e){let t;if(t=this.rules.inline.url.exec(e)){let n,r;if(t[2]==="@")n=t[0],r="mailto:"+n;else{let i;do i=t[0],t[0]=this.rules.inline._backpedal.exec(t[0])?.[0]??"";while(i!==t[0]);n=t[0],t[1]==="www."?r="http://"+t[0]:r=t[0]}return{type:"link",raw:t[0],text:n,href:r,tokens:[{type:"text",raw:n,text:n}]}}}inlineText(e){let t=this.rules.inline.text.exec(e);if(t){let n=this.lexer.state.inRawBlock;return{type:"text",raw:t[0],text:t[0],escaped:n}}}};var b=class l{tokens;options;state;tokenizer;inlineQueue;constructor(e){this.tokens=[],this.tokens.links=Object.create(null),this.options=e||O,this.options.tokenizer=this.options.tokenizer||new y,this.tokenizer=this.options.tokenizer,this.tokenizer.options=this.options,this.tokenizer.lexer=this,this.inlineQueue=[],this.state={inLink:!1,inRawBlock:!1,top:!0};let t={other:m,block:I.normal,inline:M.normal};this.options.pedantic?(t.block=I.pedantic,t.inline=M.pedantic):this.options.gfm&&(t.block=I.gfm,this.options.breaks?t.inline=M.breaks:t.inline=M.gfm),this.tokenizer.rules=t}static get rules(){return{block:I,inline:M}}static lex(e,t){return new l(t).lex(e)}static lexInline(e,t){return new l(t).inlineTokens(e)}lex(e){e=e.replace(m.carriageReturn,`
+`),this.blockTokens(e,this.tokens);for(let t=0;t<this.inlineQueue.length;t++){let n=this.inlineQueue[t];this.inlineTokens(n.src,n.tokens)}return this.inlineQueue=[],this.tokens}blockTokens(e,t=[],n=!1){for(this.options.pedantic&&(e=e.replace(m.tabCharGlobal,"    ").replace(m.spaceLine,""));e;){let r;if(this.options.extensions?.block?.some(s=>(r=s.call({lexer:this},e,t))?(e=e.substring(r.raw.length),t.push(r),!0):!1))continue;if(r=this.tokenizer.space(e)){e=e.substring(r.raw.length);let s=t.at(-1);r.raw.length===1&&s!==void 0?s.raw+=`
+`:t.push(r);continue}if(r=this.tokenizer.code(e)){e=e.substring(r.raw.length);let s=t.at(-1);s?.type==="paragraph"||s?.type==="text"?(s.raw+=(s.raw.endsWith(`
+`)?"":`
+`)+r.raw,s.text+=`
+`+r.text,this.inlineQueue.at(-1).src=s.text):t.push(r);continue}if(r=this.tokenizer.fences(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.heading(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.hr(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.blockquote(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.list(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.html(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.def(e)){e=e.substring(r.raw.length);let s=t.at(-1);s?.type==="paragraph"||s?.type==="text"?(s.raw+=(s.raw.endsWith(`
+`)?"":`
+`)+r.raw,s.text+=`
+`+r.raw,this.inlineQueue.at(-1).src=s.text):this.tokens.links[r.tag]||(this.tokens.links[r.tag]={href:r.href,title:r.title},t.push(r));continue}if(r=this.tokenizer.table(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.lheading(e)){e=e.substring(r.raw.length),t.push(r);continue}let i=e;if(this.options.extensions?.startBlock){let s=1/0,o=e.slice(1),a;this.options.extensions.startBlock.forEach(u=>{a=u.call({lexer:this},o),typeof a=="number"&&a>=0&&(s=Math.min(s,a))}),s<1/0&&s>=0&&(i=e.substring(0,s+1))}if(this.state.top&&(r=this.tokenizer.paragraph(i))){let s=t.at(-1);n&&s?.type==="paragraph"?(s.raw+=(s.raw.endsWith(`
+`)?"":`
+`)+r.raw,s.text+=`
+`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=s.text):t.push(r),n=i.length!==e.length,e=e.substring(r.raw.length);continue}if(r=this.tokenizer.text(e)){e=e.substring(r.raw.length);let s=t.at(-1);s?.type==="text"?(s.raw+=(s.raw.endsWith(`
+`)?"":`
+`)+r.raw,s.text+=`
+`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=s.text):t.push(r);continue}if(e){let s="Infinite loop on byte: "+e.charCodeAt(0);if(this.options.silent){console.error(s);break}else throw new Error(s)}}return this.state.top=!0,t}inline(e,t=[]){return this.inlineQueue.push({src:e,tokens:t}),t}inlineTokens(e,t=[]){let n=e,r=null;if(this.tokens.links){let o=Object.keys(this.tokens.links);if(o.length>0)for(;(r=this.tokenizer.rules.inline.reflinkSearch.exec(n))!=null;)o.includes(r[0].slice(r[0].lastIndexOf("[")+1,-1))&&(n=n.slice(0,r.index)+"["+"a".repeat(r[0].length-2)+"]"+n.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex))}for(;(r=this.tokenizer.rules.inline.anyPunctuation.exec(n))!=null;)n=n.slice(0,r.index)+"++"+n.slice(this.tokenizer.rules.inline.anyPunctuation.lastIndex);for(;(r=this.tokenizer.rules.inline.blockSkip.exec(n))!=null;)n=n.slice(0,r.index)+"["+"a".repeat(r[0].length-2)+"]"+n.slice(this.tokenizer.rules.inline.blockSkip.lastIndex);n=this.options.hooks?.emStrongMask?.call({lexer:this},n)??n;let i=!1,s="";for(;e;){i||(s=""),i=!1;let o;if(this.options.extensions?.inline?.some(u=>(o=u.call({lexer:this},e,t))?(e=e.substring(o.raw.length),t.push(o),!0):!1))continue;if(o=this.tokenizer.escape(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.tag(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.link(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.reflink(e,this.tokens.links)){e=e.substring(o.raw.length);let u=t.at(-1);o.type==="text"&&u?.type==="text"?(u.raw+=o.raw,u.text+=o.text):t.push(o);continue}if(o=this.tokenizer.emStrong(e,n,s)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.codespan(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.br(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.del(e)){e=e.substring(o.raw.length),t.push(o);continue}if(o=this.tokenizer.autolink(e)){e=e.substring(o.raw.length),t.push(o);continue}if(!this.state.inLink&&(o=this.tokenizer.url(e))){e=e.substring(o.raw.length),t.push(o);continue}let a=e;if(this.options.extensions?.startInline){let u=1/0,p=e.slice(1),c;this.options.extensions.startInline.forEach(f=>{c=f.call({lexer:this},p),typeof c=="number"&&c>=0&&(u=Math.min(u,c))}),u<1/0&&u>=0&&(a=e.substring(0,u+1))}if(o=this.tokenizer.inlineText(a)){e=e.substring(o.raw.length),o.raw.slice(-1)!=="_"&&(s=o.raw.slice(-1)),i=!0;let u=t.at(-1);u?.type==="text"?(u.raw+=o.raw,u.text+=o.text):t.push(o);continue}if(e){let u="Infinite loop on byte: "+e.charCodeAt(0);if(this.options.silent){console.error(u);break}else throw new Error(u)}}return t}};var P=class{options;parser;constructor(e){this.options=e||O}space(e){return""}code({text:e,lang:t,escaped:n}){let r=(t||"").match(m.notSpaceStart)?.[0],i=e.replace(m.endingNewline,"")+`
+`;return r?'<pre><code class="language-'+w(r)+'">'+(n?i:w(i,!0))+`</code></pre>
+`:"<pre><code>"+(n?i:w(i,!0))+`</code></pre>
+`}blockquote({tokens:e}){return`<blockquote>
+${this.parser.parse(e)}</blockquote>
+`}html({text:e}){return e}def(e){return""}heading({tokens:e,depth:t}){return`<h${t}>${this.parser.parseInline(e)}</h${t}>
+`}hr(e){return`<hr>
+`}list(e){let t=e.ordered,n=e.start,r="";for(let o=0;o<e.items.length;o++){let a=e.items[o];r+=this.listitem(a)}let i=t?"ol":"ul",s=t&&n!==1?' start="'+n+'"':"";return"<"+i+s+`>
+`+r+"</"+i+`>
+`}listitem(e){let t="";if(e.task){let n=this.checkbox({checked:!!e.checked});e.loose?e.tokens[0]?.type==="paragraph"?(e.tokens[0].text=n+" "+e.tokens[0].text,e.tokens[0].tokens&&e.tokens[0].tokens.length>0&&e.tokens[0].tokens[0].type==="text"&&(e.tokens[0].tokens[0].text=n+" "+w(e.tokens[0].tokens[0].text),e.tokens[0].tokens[0].escaped=!0)):e.tokens.unshift({type:"text",raw:n+" ",text:n+" ",escaped:!0}):t+=n+" "}return t+=this.parser.parse(e.tokens,!!e.loose),`<li>${t}</li>
+`}checkbox({checked:e}){return"<input "+(e?'checked="" ':"")+'disabled="" type="checkbox">'}paragraph({tokens:e}){return`<p>${this.parser.parseInline(e)}</p>
+`}table(e){let t="",n="";for(let i=0;i<e.header.length;i++)n+=this.tablecell(e.header[i]);t+=this.tablerow({text:n});let r="";for(let i=0;i<e.rows.length;i++){let s=e.rows[i];n="";for(let o=0;o<s.length;o++)n+=this.tablecell(s[o]);r+=this.tablerow({text:n})}return r&&(r=`<tbody>${r}</tbody>`),`<table>
+<thead>
+`+t+`</thead>
+`+r+`</table>
+`}tablerow({text:e}){return`<tr>
+${e}</tr>
+`}tablecell(e){let t=this.parser.parseInline(e.tokens),n=e.header?"th":"td";return(e.align?`<${n} align="${e.align}">`:`<${n}>`)+t+`</${n}>
+`}strong({tokens:e}){return`<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return`<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return`<code>${w(e,!0)}</code>`}br(e){return"<br>"}del({tokens:e}){return`<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:n}){let r=this.parser.parseInline(n),i=J(e);if(i===null)return r;e=i;let s='<a href="'+e+'"';return t&&(s+=' title="'+w(t)+'"'),s+=">"+r+"</a>",s}image({href:e,title:t,text:n,tokens:r}){r&&(n=this.parser.parseInline(r,this.parser.textRenderer));let i=J(e);if(i===null)return w(n);e=i;let s=`<img src="${e}" alt="${n}"`;return t&&(s+=` title="${w(t)}"`),s+=">",s}text(e){return"tokens"in e&&e.tokens?this.parser.parseInline(e.tokens):"escaped"in e&&e.escaped?e.text:w(e.text)}};var $=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return""+e}image({text:e}){return""+e}br(){return""}};var R=class l{options;renderer;textRenderer;constructor(e){this.options=e||O,this.options.renderer=this.options.renderer||new P,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new $}static parse(e,t){return new l(t).parse(e)}static parseInline(e,t){return new l(t).parseInline(e)}parse(e,t=!0){let n="";for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let o=i,a=this.options.extensions.renderers[o.type].call({parser:this},o);if(a!==!1||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(o.type)){n+=a||"";continue}}let s=i;switch(s.type){case"space":{n+=this.renderer.space(s);continue}case"hr":{n+=this.renderer.hr(s);continue}case"heading":{n+=this.renderer.heading(s);continue}case"code":{n+=this.renderer.code(s);continue}case"table":{n+=this.renderer.table(s);continue}case"blockquote":{n+=this.renderer.blockquote(s);continue}case"list":{n+=this.renderer.list(s);continue}case"html":{n+=this.renderer.html(s);continue}case"def":{n+=this.renderer.def(s);continue}case"paragraph":{n+=this.renderer.paragraph(s);continue}case"text":{let o=s,a=this.renderer.text(o);for(;r+1<e.length&&e[r+1].type==="text";)o=e[++r],a+=`
+`+this.renderer.text(o);t?n+=this.renderer.paragraph({type:"paragraph",raw:a,text:a,tokens:[{type:"text",raw:a,text:a,escaped:!0}]}):n+=a;continue}default:{let o='Token with "'+s.type+'" type was not found.';if(this.options.silent)return console.error(o),"";throw new Error(o)}}}return n}parseInline(e,t=this.renderer){let n="";for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let o=this.options.extensions.renderers[i.type].call({parser:this},i);if(o!==!1||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(i.type)){n+=o||"";continue}}let s=i;switch(s.type){case"escape":{n+=t.text(s);break}case"html":{n+=t.html(s);break}case"link":{n+=t.link(s);break}case"image":{n+=t.image(s);break}case"strong":{n+=t.strong(s);break}case"em":{n+=t.em(s);break}case"codespan":{n+=t.codespan(s);break}case"br":{n+=t.br(s);break}case"del":{n+=t.del(s);break}case"text":{n+=t.text(s);break}default:{let o='Token with "'+s.type+'" type was not found.';if(this.options.silent)return console.error(o),"";throw new Error(o)}}}return n}};var S=class{options;block;constructor(e){this.options=e||O}static passThroughHooks=new Set(["preprocess","postprocess","processAllTokens","emStrongMask"]);static passThroughHooksRespectAsync=new Set(["preprocess","postprocess","processAllTokens"]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(){return this.block?b.lex:b.lexInline}provideParser(){return this.block?R.parse:R.parseInline}};var B=class{defaults=L();options=this.setOptions;parse=this.parseMarkdown(!0);parseInline=this.parseMarkdown(!1);Parser=R;Renderer=P;TextRenderer=$;Lexer=b;Tokenizer=y;Hooks=S;constructor(...e){this.use(...e)}walkTokens(e,t){let n=[];for(let r of e)switch(n=n.concat(t.call(this,r)),r.type){case"table":{let i=r;for(let s of i.header)n=n.concat(this.walkTokens(s.tokens,t));for(let s of i.rows)for(let o of s)n=n.concat(this.walkTokens(o.tokens,t));break}case"list":{let i=r;n=n.concat(this.walkTokens(i.items,t));break}default:{let i=r;this.defaults.extensions?.childTokens?.[i.type]?this.defaults.extensions.childTokens[i.type].forEach(s=>{let o=i[s].flat(1/0);n=n.concat(this.walkTokens(o,t))}):i.tokens&&(n=n.concat(this.walkTokens(i.tokens,t)))}}return n}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(n=>{let r={...n};if(r.async=this.defaults.async||r.async||!1,n.extensions&&(n.extensions.forEach(i=>{if(!i.name)throw new Error("extension name required");if("renderer"in i){let s=t.renderers[i.name];s?t.renderers[i.name]=function(...o){let a=i.renderer.apply(this,o);return a===!1&&(a=s.apply(this,o)),a}:t.renderers[i.name]=i.renderer}if("tokenizer"in i){if(!i.level||i.level!=="block"&&i.level!=="inline")throw new Error("extension level must be 'block' or 'inline'");let s=t[i.level];s?s.unshift(i.tokenizer):t[i.level]=[i.tokenizer],i.start&&(i.level==="block"?t.startBlock?t.startBlock.push(i.start):t.startBlock=[i.start]:i.level==="inline"&&(t.startInline?t.startInline.push(i.start):t.startInline=[i.start]))}"childTokens"in i&&i.childTokens&&(t.childTokens[i.name]=i.childTokens)}),r.extensions=t),n.renderer){let i=this.defaults.renderer||new P(this.defaults);for(let s in n.renderer){if(!(s in i))throw new Error(`renderer '${s}' does not exist`);if(["options","parser"].includes(s))continue;let o=s,a=n.renderer[o],u=i[o];i[o]=(...p)=>{let c=a.apply(i,p);return c===!1&&(c=u.apply(i,p)),c||""}}r.renderer=i}if(n.tokenizer){let i=this.defaults.tokenizer||new y(this.defaults);for(let s in n.tokenizer){if(!(s in i))throw new Error(`tokenizer '${s}' does not exist`);if(["options","rules","lexer"].includes(s))continue;let o=s,a=n.tokenizer[o],u=i[o];i[o]=(...p)=>{let c=a.apply(i,p);return c===!1&&(c=u.apply(i,p)),c}}r.tokenizer=i}if(n.hooks){let i=this.defaults.hooks||new S;for(let s in n.hooks){if(!(s in i))throw new Error(`hook '${s}' does not exist`);if(["options","block"].includes(s))continue;let o=s,a=n.hooks[o],u=i[o];S.passThroughHooks.has(s)?i[o]=p=>{if(this.defaults.async&&S.passThroughHooksRespectAsync.has(s))return Promise.resolve(a.call(i,p)).then(f=>u.call(i,f));let c=a.call(i,p);return u.call(i,c)}:i[o]=(...p)=>{let c=a.apply(i,p);return c===!1&&(c=u.apply(i,p)),c}}r.hooks=i}if(n.walkTokens){let i=this.defaults.walkTokens,s=n.walkTokens;r.walkTokens=function(o){let a=[];return a.push(s.call(this,o)),i&&(a=a.concat(i.call(this,o))),a}}this.defaults={...this.defaults,...r}}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return b.lex(e,t??this.defaults)}parser(e,t){return R.parse(e,t??this.defaults)}parseMarkdown(e){return(n,r)=>{let i={...r},s={...this.defaults,...i},o=this.onError(!!s.silent,!!s.async);if(this.defaults.async===!0&&i.async===!1)return o(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof n>"u"||n===null)return o(new Error("marked(): input parameter is undefined or null"));if(typeof n!="string")return o(new Error("marked(): input parameter is of type "+Object.prototype.toString.call(n)+", string expected"));s.hooks&&(s.hooks.options=s,s.hooks.block=e);let a=s.hooks?s.hooks.provideLexer():e?b.lex:b.lexInline,u=s.hooks?s.hooks.provideParser():e?R.parse:R.parseInline;if(s.async)return Promise.resolve(s.hooks?s.hooks.preprocess(n):n).then(p=>a(p,s)).then(p=>s.hooks?s.hooks.processAllTokens(p):p).then(p=>s.walkTokens?Promise.all(this.walkTokens(p,s.walkTokens)).then(()=>p):p).then(p=>u(p,s)).then(p=>s.hooks?s.hooks.postprocess(p):p).catch(o);try{s.hooks&&(n=s.hooks.preprocess(n));let p=a(n,s);s.hooks&&(p=s.hooks.processAllTokens(p)),s.walkTokens&&this.walkTokens(p,s.walkTokens);let c=u(p,s);return s.hooks&&(c=s.hooks.postprocess(c)),c}catch(p){return o(p)}}}onError(e,t){return n=>{if(n.message+=`
+Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error occurred:</p><pre>"+w(n.message+"",!0)+"</pre>";return t?Promise.resolve(r):r}if(t)return Promise.reject(n);throw n}}};var _=new B;function d(l,e){return _.parse(l,e)}d.options=d.setOptions=function(l){return _.setOptions(l),d.defaults=_.defaults,G(d.defaults),d};d.getDefaults=L;d.defaults=O;d.use=function(...l){return _.use(...l),d.defaults=_.defaults,G(d.defaults),d};d.walkTokens=function(l,e){return _.walkTokens(l,e)};d.parseInline=_.parseInline;d.Parser=R;d.parser=R.parse;d.Renderer=P;d.TextRenderer=$;d.Lexer=b;d.lexer=b.lex;d.Tokenizer=y;d.Hooks=S;d.parse=d;var Dt=d.options,Ht=d.setOptions,Zt=d.use,Gt=d.walkTokens,Nt=d.parseInline,jt=d,Ft=R.parse,Qt=b.lex;export{S as Hooks,b as Lexer,B as Marked,R as Parser,P as Renderer,$ as TextRenderer,y as Tokenizer,O as defaults,L as getDefaults,Qt as lexer,d as marked,Dt as options,jt as parse,Nt as parseInline,Ft as parser,Ht as setOptions,Zt as use,Gt as walkTokens};
+//# sourceMappingURL=marked.esm.js.map
diff --git a/packages/tdesign-uniapp-chat/components/package.json b/packages/tdesign-uniapp-chat/components/package.json
new file mode 100644
index 000000000..8cfabbf71
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/package.json
@@ -0,0 +1,157 @@
+{
+  "name": "tdesign-uniapp-chat",
+  "id": "tdesign-uniapp-chat",
+  "version": "0.1.1",
+  "author": "novlan1",
+  "title": "tdesign-uniapp-chat",
+  "description": "TDesign Chat Component for uniapp",
+  "typings": "./types/index.d.ts",
+  "exports": {
+    "./*": "./*",
+    "./attachments/attachments.vue": {
+      "types": "./types/attachments.d.ts",
+      "import": "./attachments/attachments.vue",
+      "default": "./attachments/attachments.vue"
+    },
+    "./chat-actionbar/chat-actionbar.vue": {
+      "types": "./types/chat-actionbar.d.ts",
+      "import": "./chat-actionbar/chat-actionbar.vue",
+      "default": "./chat-actionbar/chat-actionbar.vue"
+    },
+    "./chat-content/chat-content.vue": {
+      "types": "./types/chat-content.d.ts",
+      "import": "./chat-content/chat-content.vue",
+      "default": "./chat-content/chat-content.vue"
+    },
+    "./chat-list/chat-list.vue": {
+      "types": "./types/chat-list.d.ts",
+      "import": "./chat-list/chat-list.vue",
+      "default": "./chat-list/chat-list.vue"
+    },
+    "./chat-loading/chat-loading.vue": {
+      "types": "./types/chat-loading.d.ts",
+      "import": "./chat-loading/chat-loading.vue",
+      "default": "./chat-loading/chat-loading.vue"
+    },
+    "./chat-markdown/chat-markdown.vue": {
+      "types": "./types/chat-markdown.d.ts",
+      "import": "./chat-markdown/chat-markdown.vue",
+      "default": "./chat-markdown/chat-markdown.vue"
+    },
+    "./chat-message/chat-message.vue": {
+      "types": "./types/chat-message.d.ts",
+      "import": "./chat-message/chat-message.vue",
+      "default": "./chat-message/chat-message.vue"
+    },
+    "./chat-sender/chat-sender.vue": {
+      "types": "./types/chat-sender.d.ts",
+      "import": "./chat-sender/chat-sender.vue",
+      "default": "./chat-sender/chat-sender.vue"
+    },
+    "./chat-thinking/chat-thinking.vue": {
+      "types": "./types/chat-thinking.d.ts",
+      "import": "./chat-thinking/chat-thinking.vue",
+      "default": "./chat-thinking/chat-thinking.vue"
+    }
+  },
+  "keywords": [
+    "tdesign",
+    "miniprogram",
+    "uniapp",
+    "vue"
+  ],
+  "homepage": "https://uwayfly.com/tdesign-uniapp-chat/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev:custom": "uni -p",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:mp-xhs": "uni -p mp-xhs",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:mp-xhs": "uni build -p mp-xhs",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "type-check": "vue-tsc --noEmit",
+    "postinstall": "node ./script/postinstall",
+    "publish": "node ../demo/script/release/publish-tdesign-uniapp-chat.js"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-app": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
+    "@dcloudio/uni-automator": "3.0.0-4030620241128001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
+    "@dcloudio/uni-components": "3.0.0-4030620241128001",
+    "@dcloudio/uni-h5": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
+    "@stylistic/eslint-plugin-jsx": "3.1.0",
+    "@types/node": "^24.2.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "8.57.1",
+    "eslint-config-light": "latest",
+    "eslint-config-light-vue3": "latest",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-node": "0.3.9",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "25",
+    "eslint-plugin-light": "latest",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.26.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-tailwindcss": "3.18.0",
+    "eslint-plugin-vue": "9.14.0",
+    "prismjs": "^1.30.0",
+    "typescript": "5.1",
+    "vite": "5.2.8",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.1.9",
+    "vue-tsc": "^1.0.24"
+  },
+  "dependencies": {
+    "tdesign-uniapp": "latest"
+  },
+  "license": "MIT"
+}
diff --git a/packages/tdesign-uniapp-chat/components/script/postinstall.js b/packages/tdesign-uniapp-chat/components/script/postinstall.js
new file mode 100644
index 000000000..49615aabb
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/script/postinstall.js
@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+
+function switchVersion(version) {
+  const pkg = require('../package.json');
+  if (version != 2) {
+    return;
+  }
+
+  delete pkg.exports;
+
+  const pkgStr = JSON.stringify(pkg, null, 2);
+
+  fs.writeFileSync(path.resolve(__dirname, '../package.json'), pkgStr, 'utf-8');
+}
+
+
+function loadModule(name) {
+  try {
+    return require(name);
+  } catch (e) {
+    return undefined;
+  }
+}
+
+const Vue  = loadModule('vue');
+
+function main() {
+  const version =  process.env.npm_config_vueVersion || (Vue ? Vue.version : '2.7.');
+  if (!Vue || typeof version !== 'string') {
+    console.warn('Vue is not found. Please run "npm install vue" to install.');
+    return;
+  }
+
+  if (version.startsWith('2.')) {
+    switchVersion(2);
+  } else if (version.startsWith('3.')) {
+    switchVersion(3);
+  } else {
+    console.warn(`Vue version v${version} is not supported.`);
+  }
+}
+
+main();
+
diff --git a/packages/tdesign-uniapp-chat/components/tdesign-uniapp-chat/tdesign-uniapp.vue b/packages/tdesign-uniapp-chat/components/tdesign-uniapp-chat/tdesign-uniapp.vue
new file mode 100644
index 000000000..b5c54095b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/tdesign-uniapp-chat/tdesign-uniapp.vue
@@ -0,0 +1,11 @@
+<template>
+  <div />
+</template>
+<script>
+export default {
+
+};
+</script>
+
+<style>
+</style>
diff --git a/packages/tdesign-uniapp-chat/components/types/attachments.d.ts b/packages/tdesign-uniapp-chat/components/types/attachments.d.ts
new file mode 100644
index 000000000..e4fa00aa4
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/attachments.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdAttachmentsProps } from '../attachments/type';
+
+export type AttachmentsProps = ExtractNonOnProps<TdAttachmentsProps>;
+export type AttachmentsEmits = TransformEventHandlers<TdAttachmentsProps, true>;
+declare const AttachmentsComponent: import('vue').DefineComponent<AttachmentsProps, {}, {}, {}, {}, {}, {}, AttachmentsEmits, any>;
+export default AttachmentsComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-actionbar.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-actionbar.d.ts
new file mode 100644
index 000000000..f7d9404f7
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-actionbar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatActionbarProps } from '../chat-actionbar/type';
+
+export type ChatActionbarProps = ExtractNonOnProps<TdChatActionbarProps>;
+export type ChatActionbarEmits = TransformEventHandlers<TdChatActionbarProps, true>;
+declare const ChatActionbarComponent: import('vue').DefineComponent<ChatActionbarProps, {}, {}, {}, {}, {}, {}, ChatActionbarEmits, any>;
+export default ChatActionbarComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-content.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-content.d.ts
new file mode 100644
index 000000000..f5b11bdef
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-content.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatContentProps } from '../chat-content/type';
+
+export type ChatContentProps = ExtractNonOnProps<TdChatContentProps>;
+export type ChatContentEmits = TransformEventHandlers<TdChatContentProps, true>;
+declare const ChatContentComponent: import('vue').DefineComponent<ChatContentProps, {}, {}, {}, {}, {}, {}, ChatContentEmits, any>;
+export default ChatContentComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-list.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-list.d.ts
new file mode 100644
index 000000000..9f4697f26
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-list.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatListProps } from '../chat-list/type';
+
+export type ChatListProps = ExtractNonOnProps<TdChatListProps>;
+export type ChatListEmits = TransformEventHandlers<TdChatListProps, true>;
+declare const ChatListComponent: import('vue').DefineComponent<ChatListProps, {}, {}, {}, {}, {}, {}, ChatListEmits, any>;
+export default ChatListComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-loading.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-loading.d.ts
new file mode 100644
index 000000000..fc091812b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-loading.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatLoadingProps } from '../chat-loading/type';
+
+export type ChatLoadingProps = ExtractNonOnProps<TdChatLoadingProps>;
+export type ChatLoadingEmits = TransformEventHandlers<TdChatLoadingProps, true>;
+declare const ChatLoadingComponent: import('vue').DefineComponent<ChatLoadingProps, {}, {}, {}, {}, {}, {}, ChatLoadingEmits, any>;
+export default ChatLoadingComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-markdown.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-markdown.d.ts
new file mode 100644
index 000000000..89a847220
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-markdown.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatMarkdownProps } from '../chat-markdown/type';
+
+export type ChatMarkdownProps = ExtractNonOnProps<TdChatMarkdownProps>;
+export type ChatMarkdownEmits = TransformEventHandlers<TdChatMarkdownProps, true>;
+declare const ChatMarkdownComponent: import('vue').DefineComponent<ChatMarkdownProps, {}, {}, {}, {}, {}, {}, ChatMarkdownEmits, any>;
+export default ChatMarkdownComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-message.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-message.d.ts
new file mode 100644
index 000000000..12c1a18da
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-message.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatMessageProps } from '../chat-message/type';
+
+export type ChatMessageProps = ExtractNonOnProps<TdChatMessageProps>;
+export type ChatMessageEmits = TransformEventHandlers<TdChatMessageProps, true>;
+declare const ChatMessageComponent: import('vue').DefineComponent<ChatMessageProps, {}, {}, {}, {}, {}, {}, ChatMessageEmits, any>;
+export default ChatMessageComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-sender.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-sender.d.ts
new file mode 100644
index 000000000..d87595b4f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-sender.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatSenderProps } from '../chat-sender/type';
+
+export type ChatSenderProps = ExtractNonOnProps<TdChatSenderProps>;
+export type ChatSenderEmits = TransformEventHandlers<TdChatSenderProps, true>;
+declare const ChatSenderComponent: import('vue').DefineComponent<ChatSenderProps, {}, {}, {}, {}, {}, {}, ChatSenderEmits, any>;
+export default ChatSenderComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/chat-thinking.d.ts b/packages/tdesign-uniapp-chat/components/types/chat-thinking.d.ts
new file mode 100644
index 000000000..8cd40952f
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/chat-thinking.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from 'tdesign-uniapp/common/common';
+import type { TdChatThinkingProps } from '../chat-thinking/type';
+
+export type ChatThinkingProps = ExtractNonOnProps<TdChatThinkingProps>;
+export type ChatThinkingEmits = TransformEventHandlers<TdChatThinkingProps, true>;
+declare const ChatThinkingComponent: import('vue').DefineComponent<ChatThinkingProps, {}, {}, {}, {}, {}, {}, ChatThinkingEmits, any>;
+export default ChatThinkingComponent;
diff --git a/packages/tdesign-uniapp-chat/components/types/index.d.ts b/packages/tdesign-uniapp-chat/components/types/index.d.ts
new file mode 100644
index 000000000..8af04abe2
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/components/types/index.d.ts
@@ -0,0 +1,9 @@
+export * from '../attachments/type';
+export * from '../chat-actionbar/type';
+export * from '../chat-content/type';
+export * from '../chat-list/type';
+export * from '../chat-loading/type';
+export * from '../chat-markdown/type';
+export * from '../chat-message/type';
+export * from '../chat-sender/type';
+export * from '../chat-thinking/type';
diff --git a/packages/tdesign-uniapp-chat/package.json b/packages/tdesign-uniapp-chat/package.json
new file mode 100644
index 000000000..490f65050
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "tdesign-uniapp",
+  "version": "0.0.0",
+  "private": "true",
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:h5\" \"pnpm --filter=\"./packages/site\" dev\"",
+    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
+    "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-weixin\"",
+    "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-alipay\"",
+    "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-toutiao\"",
+    "dev:mp-lark": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-lark\"",
+    "dev:mp-xhs": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-xhs\"",
+    "dev:mp-qq": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-qq\"",
+    "dev:mp-kuaishou": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-kuaishou\"",
+    "dev:mp-jd": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-jd\"",
+    "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-baidu\"",
+    "dev:mp": "npm run dev:mp-weixin",
+    "dev:mp:pure": "pnpm --filter=\"./packages/demo\" dev:mp-weixin",
+    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./packages/demo\" build:h5",
+    "build:mp-weixin": "pnpm --filter=\"./packages/demo\" build:mp-weixin",
+    "build:mp-alipay": "pnpm --filter=\"./packages/demo\" build:mp-alipay",
+    "build:mp-toutiao": "pnpm --filter=\"./packages/demo\" build:mp-toutiao",
+    "build:mp-lark": "pnpm --filter=\"./packages/demo\" build:mp-lark",
+    "build:mp-xhs": "pnpm --filter=\"./packages/demo\" build:mp-xhs",
+    "build:mp-qq": "pnpm --filter=\"./packages/demo\" build:mp-qq",
+    "build:mp-kuaishou": "pnpm --filter=\"./packages/demo\" build:mp-kuaishou",
+    "build:mp-jd": "pnpm --filter=\"./packages/demo\" build:mp-jd",
+    "build:mp-baidu": "pnpm --filter=\"./packages/demo\" build:mp-baidu",
+    "build:mp": "npm run build:mp-weixin",
+    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./packages/demo\" build:h5",
+    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./packages/demo\" build:h5",
+    "type-check": "vue-tsc --noEmit",
+    "init": "node packages/demo/script/watch/init.js && node packages/demo/script/pages/index.js",
+    "watch": "node packages/demo/script/watch/watch.js",
+    "prepare": "npm run init && npm run release:prepare",
+    "release:prepare": "node packages/demo/script/release/prepare.js",
+    "publish": "cd npm_dist && npm publish",
+    "commit": "git-cz"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@dcloudio/types": "^3.4.19",
+    "@stylistic/eslint-plugin-jsx": "3.1.0",
+    "@types/node": "^24.2.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.7.0",
+    "concurrently": "^9.2.1",
+    "dotenv": "^17.2.3",
+    "echarts": "^6.0.0",
+    "eslint": "8.57.1",
+    "eslint-config-light": "latest",
+    "eslint-config-light-vue3": "latest",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-node": "0.3.9",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "25",
+    "eslint-plugin-light": "latest",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.26.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-tailwindcss": "3.18.0",
+    "eslint-plugin-vue": "9.14.0",
+    "glob": "^11.0.3",
+    "husky": "^6.0.0",
+    "less": "^4.4.2",
+    "lint-staged": "^10.5.4",
+    "miniprogram-api-typings": "^4.1.0",
+    "postcss-less": "^6.0.0",
+    "postcss-rpx-transform": "^1.0.1",
+    "stylelint": "14.16.1",
+    "stylelint-config-common": "1.0.10",
+    "stylelint-config-standard": "^39.0.1",
+    "stylelint-less": "^3.0.1",
+    "stylelint-scss": "6.10.0",
+    "t-comm": "^2.0.26",
+    "tslib": "^2.3.1",
+    "typescript": "5.1",
+    "vite": "5.2.8",
+    "vue-tsc": "^1.0.24",
+    "zrender": "^6.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,js,vue}": [
+      "eslint --fix"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp-chat/shims-uni.d.ts b/packages/tdesign-uniapp-chat/shims-uni.d.ts
new file mode 100644
index 000000000..9a8c66b04
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/shims-uni.d.ts
@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable import/no-unresolved */
+/// <reference types='@dcloudio/types' />
+import 'vue';
+
+declare module '@vue/runtime-core' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+
+  interface ComponentCustomOptions extends Hooks {
+
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/site/.env.intranet b/packages/tdesign-uniapp-chat/site/.env.intranet
new file mode 100644
index 000000000..995fca4af
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/.env.intranet
@@ -0,0 +1 @@
+NODE_ENV=production
\ No newline at end of file
diff --git a/packages/tdesign-uniapp-chat/site/.env.preview b/packages/tdesign-uniapp-chat/site/.env.preview
new file mode 100644
index 000000000..c0d665211
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/.env.preview
@@ -0,0 +1 @@
+NODE_ENV=development
diff --git a/packages/tdesign-uniapp-chat/site/.env.production b/packages/tdesign-uniapp-chat/site/.env.production
new file mode 100644
index 000000000..20f7e8ded
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/.env.production
@@ -0,0 +1 @@
+VUE_APP_PUBLICPATH = https://cdn.uwayfly.com/tdesign-uniapp-chat
diff --git a/packages/tdesign-uniapp-chat/site/docs.config.js b/packages/tdesign-uniapp-chat/site/docs.config.js
new file mode 100644
index 000000000..4193a5df5
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs.config.js
@@ -0,0 +1,166 @@
+export const docs = [
+  {
+    title: '开始',
+    titleEn: 'Start',
+    type: 'document', // 普通文档
+    children: [
+      {
+        title: '快速开始',
+        titleEn: 'Getting Started',
+        name: 'getting-started',
+        meta: { docType: 'explain' },
+        path: '/tdesign-uniapp-chat/getting-started',
+        component: () => import('@docs/getting-started.md'),
+      },
+      {
+        title: '更新日志',
+        titleEn: 'CHANGELOG',
+        name: 'changelog',
+        path: '/tdesign-uniapp-chat/changelog',
+        component: () => import('@/CHANGELOG.md'),
+      },
+      {
+        title: '常见问题',
+        titleEn: 'FAQ',
+        name: 'faq',
+        path: '/tdesign-uniapp-chat/faq',
+        component: () => import('@docs/faq.md'),
+      },
+      {
+        title: '什么是流式输出',
+        name: 'sse',
+        path: '/tdesign-uniapp-chat/sse',
+        component: () => import('@docs/sse.md'),
+      },
+    ],
+  },
+  {
+    title: '全局配置',
+    titleEn: 'Global Config',
+    type: 'document',
+    children: [
+      {
+        title: '样式覆盖',
+        titleEn: 'Custom Style',
+        name: 'custom-style',
+        meta: { docType: 'explain' },
+        path: '/tdesign-uniapp-chat/custom-style',
+        component: () => import('@docs/custom-style.md'),
+      },
+      {
+        title: '自定义主题',
+        titleEn: 'Custom Theme',
+        name: 'custom-theme',
+        meta: { docType: 'explain' },
+        path: '/tdesign-uniapp-chat/custom-theme',
+        component: () => import('@docs/custom-theme.md'),
+      },
+      {
+        title: '深色模式',
+        titleEn: 'Dark Mode',
+        name: 'dark-mode',
+        meta: { docType: 'explain' },
+        path: '/tdesign-uniapp-chat/dark-mode',
+        component: () => import('@docs/dark-mode.md'),
+      },
+    ],
+  },
+  {
+    title: '基础',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'ChatList 对话列表',
+        titleEn: 'ChatList',
+        name: 'ChatList 对话列表',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-list',
+        component: () => import('@/chat-list/README.md'),
+      },
+      {
+        title: 'ChatSender 对话输入',
+        titleEn: 'ChatSender',
+        name: 'ChatSender 对话输入',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-sender',
+        component: () => import('@/chat-sender/README.md'),
+      },
+      {
+        title: 'ChatMessage 对话消息体',
+        titleEn: 'ChatMessage',
+        name: 'ChatMessage 对话消息体',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-message',
+        component: () => import('@/chat-message/README.md'),
+      },
+      {
+        title: 'ChatActionbar 对话操作',
+        titleEn: 'ChatActionbar',
+        name: 'ChatActionbar 对话操作',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-actionbar',
+        component: () => import('@/chat-actionbar/README.md'),
+      },
+      {
+        title: 'ChatMarkdown Markdown内容',
+        titleEn: 'ChatMarkdown',
+        name: 'ChatMarkdown Markdown内容',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-markdown',
+        component: () => import('@/chat-markdown/README.md'),
+        componentEn: () => import('@/chat-markdown/README.en-US.md'),
+      },
+      {
+        title: 'ChatThinking 思考过程',
+        titleEn: 'ChatThinking',
+        name: 'ChatThinking 思考过程',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-thinking',
+        component: () => import('@/chat-thinking/README.md'),
+        componentEn: () => import('@/chat-thinking/README.en-US.md'),
+      },
+      {
+        title: 'ChatLoading 对话加载',
+        titleEn: 'ChatLoading',
+        name: 'ChatLoading 对话加载',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-loading',
+        component: () => import('@/chat-loading/README.md'),
+        componentEn: () => import('@/chat-loading/README.en-US.md'),
+      },
+      {
+        title: 'Attachments 文件附件',
+        titleEn: 'Attachments',
+        name: 'Attachments 文件附件',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/attachments',
+        component: () => import('@/attachments/README.md'),
+        componentEn: () => import('@/attachments/README.en-US.md'),
+      },
+      {
+        title: 'ChatContent 对话正文',
+        titleEn: 'ChatContent',
+        name: 'ChatContent 对话正文',
+        meta: { docType: 'base' },
+        path: '/tdesign-uniapp-chat/components/chat-content',
+        component: () => import('@/chat-content/README.md'),
+        componentEn: () => import('@/chat-content/README.en-US.md'),
+      },
+    ],
+  },
+];
+
+export const enDocs = docs.map(doc => ({
+  ...doc,
+  title: doc.titleEn || '',
+  children: doc?.children?.map(child => ({
+    title: child.titleEn || '',
+    name: `${child.name}-en`,
+    path: `${child.path}-en`,
+    meta: { lang: 'en' },
+    component: child.componentEn || child.component,
+  })),
+}));
+
+export default { enDocs, docs };
+
diff --git a/packages/tdesign-uniapp-chat/site/docs/custom-style.md b/packages/tdesign-uniapp-chat/site/docs/custom-style.md
new file mode 100644
index 000000000..4f3df2fae
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/custom-style.md
@@ -0,0 +1,117 @@
+---
+title: 样式覆盖
+description: TDesign 提供了多种方式可以实现样式覆盖
+spline: explain
+---
+
+TDesign UniApp 提供了 4 种方式用于样式覆盖
+
+## 1 使用 Custom Style
+
+> TDesign 全部组件均支持 `custom-style` 属性。可传入 CSS 字符串，将会应用于组件的根元素。
+
+<!-- 注意与 [tdesign-miniprogram](https://tdesign.tencent.com/miniprogram/overview) 不同的是，不支持 `style` 属性，可将其替换为 `custom-style`。 -->
+
+### 开启 virtualHost
+
+在微信小程序基础库版本高于 2.19.2 的情况下，TDesign 会默认开启 `virtualHost` 属性。
+
+此时 `custom-style` 和 `style` 的效果是一致的，任选其一即可：
+
+```html
+<t-button style="color: red">填充按钮</t-button>
+
+<t-button custom-style="color: red">填充按钮</t-button>
+```
+
+渲染的结果如下：
+
+```html
+<button class="t-button" style="color: red">填充按钮</t-button>
+```
+
+### 关闭 virtualHost
+
+但在没有开启 `virtualHost` 的情况下，小程序使用的是 Shadow DOM 的渲染机制，自定义组件本身那个节点也会渲染成一个普通节点。
+
+使用 `style` 赋予的样式，将会被自定义组件本身那个节点劫持，导致无法正确传入组件内部，此时只能使用 `custom-style`：
+
+```html
+<t-button custom-style="color: red">填充按钮</t-button>
+```
+
+渲染的结果如下：
+
+```html
+<t-button>
+  <button class="t-button" style="color: red">填充按钮</t-button>
+<t-button>
+```
+
+## 2 解除样式隔离
+
+样式隔离相关文档：[微信官网文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)
+
+TDesign 全体组件均开启了 `addGlobalClass`，可以接受外部传入的样式。
+
+### 在页面中使用 TDesign
+
+```html
+<t-button theme="primary" >填充按钮</t-button>
+```
+
+```css
+.t-button--primary {
+  background-color: navy;
+}
+```
+
+### 在自定义组件中使用 TDesign
+
+> 需要在自定义组件的 options 中开启： `styleIsolation: 'shared'`
+
+```html
+<t-button theme="primary" >填充按钮</t-button>
+```
+
+对应的自定义组件：
+
+```js
+Component({
+  options: {
+    styleIsolation: 'shared'
+  }
+})
+```
+
+```css
+.t-button--primary {
+  background-color: navy;
+}
+```
+
+## 3 使用外部样式类
+
+外部样式类相关文档：[微信官网文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB)
+
+TDesign 在每个组件的内部都预置了许多外部样式类供开发者使用。
+
+**注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，所以最好加上 `!important`**
+
+```html
+<t-button t-class-loading="red-loading">填充按钮</t-button>
+```
+
+```css
+.red-loading {
+  color: red !important;
+}
+```
+
+**实现上，TDesign UniApp 将外部样式类都转成了 `props`**
+
+## 4 使用 CSS 变量
+
+TDesign 为所有组件预置了许多 CSS 变量，具体可以查看每个组件的 WXSS 文件。
+
+使用 CSS 变量的好处在于可以多页面复用，不需要重复修改。具体可以参考 [自定义主题](./custom-theme)
diff --git a/packages/tdesign-uniapp-chat/site/docs/custom-theme.md b/packages/tdesign-uniapp-chat/site/docs/custom-theme.md
new file mode 100644
index 000000000..bab175746
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/custom-theme.md
@@ -0,0 +1,63 @@
+---
+title: 自定义主题
+description: 如何使用 CSS Variables 自定义主题
+spline: explain
+---
+
+组件库通用的 Design Token 均使用 CSS Variables 声明，你可以在自己的项目中声明同名变量来覆盖他们的值。
+
+## 全局自定义
+
+TDesign UniApp 的 CSS Variables 全部定义可以在这里看到: [_variables.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less)
+
+如果你想改变主题色，主要改变这几个变量即可：
+
+```css
+@brand-color: var(--td-brand-color, #0052d9); // 主题色
+@success-color: var(--td-success-color, #00a870); // 成功
+@warning-color: var(--td-warning-color, #ed7b2f); // 警告
+@error-color: var(--td-error-color, #e34d59); // 失败
+```
+
+在 `App.vue` 文件添加下行代码即可：
+
+```css
+page {
+  --td-brand-color: navy; // 任何你想要的主题色
+}
+```
+
+> 当然，[_variables.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less) 里面都是通用的全局变量，都可以修改
+
+## 局部自定义
+
+在 TDesign UniApp 里，你也可以只给某个组件修改主题，下面以 `Rate` 举例：
+
+```css
+page {
+  --td-rate-selected-color: #ed7b2f; /* 选中的颜色 */
+  --td-rate-unselected-color: #e3e6eb; /* 未选中的颜色 */
+}
+```
+
+## 自定义 TabBar
+
+当然，有些组件可能不会被包裹在 `page` 里，比如自定义 `tab-bar`。
+
+此时，可以通过给组件增加 `t-class` 来实现：
+
+```html
+<t-tab-bar t-class="custom-tab-bar">
+  <t-tab-bar-item value="home" icon="home">home</t-tab-bar-item>
+</t-tab-bar>
+```
+
+对应的 `CSS` 可以这么定义：
+
+```css
+.custom-tab-bar {
+  --td-tab-bar-item-color: red;
+}
+```
+
+> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Variables，可以访问 [tab-bar-item.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/tab-bar-item.less)
diff --git a/packages/tdesign-uniapp-chat/site/docs/dark-mode.md b/packages/tdesign-uniapp-chat/site/docs/dark-mode.md
new file mode 100644
index 000000000..a82bcbcca
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/dark-mode.md
@@ -0,0 +1,95 @@
+---
+title: 深色模式
+description: 组件库提供了深色模式支持，可以点击官网右上角开关切换整体浅色与深色模式体验
+spline: design-mode
+---
+<!-- 
+<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>
+ 该特性于 1.3.0 上线，请留意版本。
+</div> -->
+
+## 使用之前
+
+使用之前，请确保你已阅读 [微信小程序深色模式适配文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html)。
+
+## 实现方案
+
+TDesign UniApp 基于 Design Token 变量和媒体查询 `prefers-color-scheme` 实现了深色模式。默认情况下，每个组件自带了组件级别 light 样式变量，无需手动引入。如需使用深色模式，请按照以下步骤操作。
+
+## 使用方式
+
+### 1. 修改配置
+
+在 `manifest.json` 中配置 `darkmode` 为 `true`，即表示当前平台已适配 DarkMode。
+
+```json
+{
+  "h5": {
+    "darkmode": true // 开启深色模式
+  },
+  "mp-weixin": {
+    "darkmode": true // 开启深色模式
+  }
+}
+```
+
+> ⚠️ 注意：如果你仍然在使用小程序原生导航栏，需要参考 [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html#%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE) 自行适配。
+
+### 2. 引入 Design Token 样式文件
+
+在 `main.ts` 中引入 Design Token 文件：
+
+```ts
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+### 3. 深色模式适配
+
+现在，在页面级别的样式文件中，所有的 CSS Variable 都已可用。请替换你的样式文件中原有的颜色值，以实现深色模式适配。
+
+```css
+/* 例如 */
+.text {
+  font-size: 28rpx;
+  color: var(--td-text-color-secondary); // 使用 CSS Variable
+}
+```
+
+> 💡Tips：所有的 [Design Token](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less) 可以在这里找到。
+
+### 4. 体验深色模式
+
+在微信开发者工具的调试中打开深色模式，请参见 [微信文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html#%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E8%B0%83%E8%AF%95)。
+
+## 特殊组件适配深色模式
+
+我们的全局 `CSS Variables` 声明在 `page` 标签选择器下，对非页面内容无效。目前已知两种场景：1. 基于`TabBar`组件的`custom-tab-bar` 组件，`TabBar` 的深色模式失效；2. `root-portal` 组件包裹的组件，在 `webview` 下其深色模式失效。
+
+为了处理这个问题，我们补充了一个同级类选择器：`.page` ，需要在对应的位置手动添加 `.page` 类名。
+
+```html
+// 开启虚拟节点
+<view class="page" >
+  <t-tab-bar  />
+</view>
+
+// 不开启虚拟节点
+<t-tab-bar class="page" />
+
+// root-portal 场景
+<root-portal>
+	<view class="page">
+	</view>
+</root-portal>
+```
+
+> 💡Tips：什么是虚拟节点请参考 [微信文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E8%99%9A%E6%8B%9F%E5%8C%96%E7%BB%84%E4%BB%B6%E8%8A%82%E7%82%B9)。
diff --git a/packages/tdesign-uniapp-chat/site/docs/faq.md b/packages/tdesign-uniapp-chat/site/docs/faq.md
new file mode 100644
index 000000000..9d4d2cf3c
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/faq.md
@@ -0,0 +1,28 @@
+---
+title: 常见问题
+description: 看看有没有你想要的。
+spline: explain
+---
+
+### 与 TDesign UniApp 库的关系
+
+[TDsign UniApp](https://www.npmjs.com/package/tdesign-uniapp) 和 [TDesign UniApp Chat](https://www.npmjs.com/package/tdesign-uniapp-chat) 是两个不同的包，后者依赖前者。
+
+样式文件从 TDesign UniApp 引入一份即可。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.css';
+
+// 或者引入与 tdesign-miniprogram 完全一致的文件，单位为 rpx
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+### ChatList 抖动问题
+
+`chat-list` 新增消息时，页面元素如果抖动，，可以加唯一 `key` 解决。
+
+### ChatList 为什么默认倒序
+
+倒序的话，新消息来时页面可以自然的滚动上去，以及下拉加载更多也会更顺滑。
+
+你也可以设置 `reverse` 为 `false`，来禁用这一效果。
diff --git a/packages/tdesign-uniapp-chat/site/docs/getting-started.en-US.md b/packages/tdesign-uniapp-chat/site/docs/getting-started.en-US.md
new file mode 100644
index 000000000..8c7bfbc12
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/getting-started.en-US.md
@@ -0,0 +1,94 @@
+---
+title: Uni App Chat
+description: TDesign UniApp Chat is a UI component library for Uni App.
+spline: explain
+---
+
+## Preview
+
+Please use WeChat to scan the QR code to preview the TDesign UniApp example. ↓
+<br/>
+
+<img src="https://cdn.uwayfly.com/tdesign-uniapp/tdesign-uniapp-qrcodes.png?a=3" width="600" />
+
+## Before use
+
+Before using it, please make sure you have studied WeChat’s official [Simple Tutorial on Mini Programs](https://developers.weixin.qq.com/miniprogram/dev/framework/) and [Introduction to Custom Components](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/).
+
+## Installation
+
+### npm
+
+TDesign MiniProgram already supports using NPM to install third-party packages. For details, see [NPM Support](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
+
+```bash
+npm i tdesign-miniprogram -S --production
+```
+
+> After installation, npm needs to be built in WeChat developer tools: `tool -  build npm`.(If `NPM packages not found` appears during the build, please go to the `project.config.json` file to add the `packNpmManually` and `packNpmRelationList` configuration items. For details, see [NPM Support](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm))
+
+> After the build is successful, check the box `Compile JS to ES5`
+> <br/>
+><img width="200" src="https://tdesign.gtimg.com/miniprogram/docs/getting-started.png" />
+
+## Modify app.json
+
+Remove `"style": "v2"` in `app.json`.
+
+> Because [v2 configuration](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style) means enabling a new version of component styles, it will cause TDesign component styles to be disordered.
+
+## Modify tsconfig.json
+
+If you use `typescript` to develop, you need to modify `tsconfig.json` to specify `paths`
+
+```json
+{
+  "paths": {
+      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
+    }
+}
+```
+
+## Use components
+
+Taking the button component as an example, you only need to introduce the custom component corresponding to the button in the `JSON` file.
+
+```json
+{
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}
+```
+
+Then you can use the component directly in wxml.
+
+```html
+<t-button theme="primary">按钮</t-button>
+```
+
+## Preview in developer tools
+
+```bash
+# Install project dependencies
+npm install
+
+# compile
+npm run dev
+```
+
+Open [WeChat Developer Tools](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html) and add the `_example` directory to preview the example.
+
+## Base library version
+
+Minimum base library version `^2.12.0`
+
+### Correspondence between component and basic library versions
+
+| 组件   | API  | 最低基础库 | 描述 |
+| -- | -- | -- | -- | 
+| Upload | [wx.previewMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewMedia.html)                                   | 2.12.0     | -    |
+| Upload | [wx.chooseMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html)                                     | 2.10.0     | -    |
+| Upload | [wx.chooseMessageFile](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html)                         | 2.5.0      | -    |
+| Navbar | [wx.getMenuButtonBoundingClientRect](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) | 2.1.0      | -    |
+
diff --git a/packages/tdesign-uniapp-chat/site/docs/getting-started.md b/packages/tdesign-uniapp-chat/site/docs/getting-started.md
new file mode 100644
index 000000000..329221bbb
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/getting-started.md
@@ -0,0 +1,73 @@
+---
+title: Uni App Chat
+description: TDesign UniApp Chat 组件库。
+spline: explain
+---
+
+## 预览
+
+扫码查看 ↓
+
+<img src="https://cdn.uwayfly.com/tdesign-uniapp/tdesign-uniapp-qrcodes.png?a=3" width="600" />
+
+> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
+
+## 安装
+
+### NPM 方式
+
+```bash
+npm i tdesign-uniapp-chat
+```
+
+### UNI_MODULES 方式
+
+已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp-chat) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
+
+## 使用
+
+1. 在 `main.ts` 中引入样式文件
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+2. 在文件中使用
+
+```html
+<template>
+  <t-chat-list />
+</template>
+
+<script lang="ts" setup>
+import TChatList from 'tdesign-uniapp-chat/chat-list/chat-list.vue';
+</script>
+```
+
+只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+
+## 编辑器提示
+
+安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+
+推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/tdesign-uniapp-chat/global.d.ts`，即可实现该效果。
+
+## 平台兼容性
+
+| 平台         | Vue2 | Vue3 | H5  | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
+| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
+| **支持情况** | ✅    | ✅    | ✅   | ✅       | ✅   | ⚠️        | ✅          |  ⚠️        |
+
+## 浏览器兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |[<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" />]()<br/>Android Browser|
+| --------- | --------- | --------- | --------- | --------- |--------- |
+| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
+
+详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
diff --git a/packages/tdesign-uniapp-chat/site/docs/sse.md b/packages/tdesign-uniapp-chat/site/docs/sse.md
new file mode 100644
index 000000000..f35ba0690
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/docs/sse.md
@@ -0,0 +1,199 @@
+---
+title: 什么是流式输出
+order: 3
+group:
+  title: 快速上手
+  order: 2
+---
+## 简述
+
+流式输出，也称为流式传输，指的是服务器持续地将数据推送到客户端，而不是一次性发送完毕。这种模式下，连接一旦建立，服务器就能实时地发送更新给客户端。
+
+### 使用场景
+
+流式输出的典型应用场景包括实时消息推送、股票行情更新、实时通知等，任何需要服务器向客户端实时传输数据的场合都可以使用。
+
+### 与普通请求的区别
+
+与传统的 HTTP 请求不同，普通请求是基于请求-响应模型，客户端发送请求后，服务器处理完毕即刻响应并关闭连接。流式输出则保持连接开放，允许服务器连续发送多个响应。
+
+## 如何创建一个 SSE
+
+### Python
+
+在 Python 中，可以使用 fastAPI 框架来实现 Server-Sent Events。以下是一个示例：
+1. 安装 FastAPI 和 Uvicorn
+首先，确保你已经安装了 FastAPI 和 Uvicorn ：
+```
+pip install fastapi uvicorn
+```
+2. 创建 FastAPI 应用
+接下来，创建一个 FastAPI 应用，并定义一个流式接口。我们将使用异步生成器来逐步生成数据，并使用 StreamingResponse 来流式发送数据给客户端。
+
+```js
+import json
+import asyncio
+from fastapi import FastAPI
+from sse_starlette.sse import EventSourceResponse
+import uvicorn
+from fastapi.middleware.cors import CORSMiddleware
+
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=['*'], # 设置允许跨域的域名列表，* 代表所有域名
+    allow_credentials=True,
+    allow_methods=['*'],
+    allow_headers=['*'],
+)
+async def event_generator():
+    count = 0
+    while True:
+        await asyncio.sleep(1)
+        count += 1
+        data = {"count": count}
+        yield json.dumps(data)
+
+@app.get("/events")
+async def get_events():
+    return EventSourceResponse(event_generator())
+@app.post("/events")
+async def post_events():
+      return EventSourceResponse(event_generator())
+
+if __name__ == '__main__':
+    uvicorn.run(app, host='0.0.0.0', port=4000)
+
+```
+3. 运行应用
+保存上述代码到一个文件（例如main.py），然后运行应用：
+```
+python3 main.py
+```
+4. 测试流式接口
+- get接口
+```
+curl http://0.0.0.0:4000/events
+```
+- post接口
+```
+curl -X POST "http://0.0.0.0:4000/events" -H "Content-Type: application/json"
+```
+你应该会看到每秒钟输出一行数据，类似于：
+```
+data: {"count": 1}
+
+data: {"count": 2}
+
+data: {"count": 3}
+
+data: {"count": 4}
+
+data: {"count": 5}
+
+...
+```
+## 为什么大模型 LLM 需要使用 SSE ？
+
+从某种意义上说，现阶段 LLM 模型采用 SSE 是历史遗留原因。
+
+Transformer 前后内容是需要推理拼接的，且不说内容很多的时候，推理的时间会很长（还有 Max Token 的限制）。推理上下文的时候也是逐步推理生成的，因此默认就是流式输出进行包裹。如果哪天 AI 的速度可以不受这些内容的限制了，可能一次性返回是一个更好的交互。
+
+## TDesign AI Chat 如何接入 SSE
+
+对于流式请求来说，组件其实只关心一个内容，那就是返回的 String，下面是 hunyuan 的流式返回案例。
+
+```js
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"我是"}}],"usage":{"prompt_tokens":10,"completion_tokens":1,"total_tokens":11}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"由腾"}}],"usage":{"prompt_tokens":10,"completion_tokens":3,"total_tokens":13}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"讯公"}}],"usage":{"prompt_tokens":10,"completion_tokens":5,"total_tokens":15}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"司开"}}],"usage":{"prompt_tokens":10,"completion_tokens":7,"total_tokens":17}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"发的"}}],"usage":{"prompt_tokens":10,"completion_tokens":8,"total_tokens":18}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"大型"}}],"usage":{"prompt_tokens":10,"completion_tokens":9,"total_tokens":19}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"语言"}}],"usage":{"prompt_tokens":10,"completion_tokens":10,"total_tokens":20}}
+
+data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"模型"}}],"usage":{"prompt_tokens":10,"completion_tokens":11,"total_tokens":21}}
+```
+下面是解析流式接口请求的代码片段：
+```js
+export const fetchSSE = async (options: FetchSSEOptions = {}) => {
+  const { success, fail, complete } = options;
+  // fetch请求流式接口url，需传入接口url和参数
+  const responsePromise = fetch().catch((e) => {
+    const msg = e.toString() || '流式接口异常';
+    complete?.(false, msg);
+    return Promise.reject(e); // 确保错误能够被后续的.catch()捕获
+  });
+
+  responsePromise
+    .then((response) => {
+      if (!response?.ok) {
+        complete?.(false, response.statusText);
+        fail?.();
+        throw new Error('Request failed'); // 抛出错误以便链式调用中的下一个.catch()处理
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) throw new Error('No reader available');
+
+      const bufferArr: string[] = [];
+      let dataText = ''; // 记录数据
+      const event: SSEEvent = { type: null, data: null };
+
+      async function processText({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> {
+        if (done) {
+          complete?.(true);
+          return Promise.resolve();
+        }
+        const chunk = decoder.decode(value);
+        const buffers = chunk.toString().split(/\r?\n/);
+        bufferArr.push(...buffers);
+        const i = 0;
+        while (i < bufferArr.length) {
+          const line = bufferArr[i];
+          if (line) {
+            dataText += line;
+            const response = line.slice(6);
+            if (response === '[DONE]') {
+              event.type = 'finish';
+              dataText = '';
+            } else {
+              const choices = JSON.parse(response.trim())?.choices?.[0];
+              if (choices.finish_reason === 'stop') {
+                event.type = 'finish';
+                dataText = '';
+              } else {
+                event.type = 'delta';
+                event.data = choices;
+              }
+            }
+          }
+          if (event.type && event.data) {
+            const jsonData = JSON.parse(JSON.stringify(event));
+            console.log('流式数据解析结果:', jsonData);
+            // 回调更新数据
+            success(jsonData);
+            event.type = null;
+            event.data = null;
+          }
+          bufferArr.splice(i, 1);
+        }
+        return reader.read().then(processText);
+      }
+
+      return reader.read().then(processText);
+    })
+    .catch(() => {
+      // 处理整个链式调用过程中发生的任何错误
+      fail?.();
+    });
+};
+```
+
+
diff --git a/packages/tdesign-uniapp-chat/site/index.html b/packages/tdesign-uniapp-chat/site/index.html
new file mode 100644
index 000000000..aac60a8b0
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon"
+    href="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/10/own_mike_tYYDt364MCtSXHsn.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" href="/favicon.ico">
+  <title>TDesign</title>
+  <!--[if lte IE 9]>
+  <style>
+    #app {
+      display: none;
+    }
+  </style>
+  <![endif]-->
+  <style>
+    td-doc-phone {
+      --phone-body-height: 667px !important;
+    }
+  </style>
+</head>
+
+<body>
+  <!--[if lte IE 9]>
+    <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
+  <![endif]-->
+
+  <td-stats></td-stats>
+  <div id="app">
+    <app></app>
+  </div>
+  <script type="module" src="./web/main.ts"></script>
+</body>
+
+</html>
diff --git a/packages/tdesign-uniapp-chat/site/mobile.html b/packages/tdesign-uniapp-chat/site/mobile.html
new file mode 100644
index 000000000..8d0eb716b
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/mobile.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" href="/favicon.ico">
+  <title>TDesign</title>
+  <style>
+    body {
+      -webkit-font-smoothing: antialiased;
+    }
+  </style>
+  <!--[if lte IE 9]>
+  <style>
+    #app {
+      display: none;
+    }
+  </style>
+  <![endif]-->
+</head>
+
+<body>
+  <!--[if lte IE 9]>
+    <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
+  <![endif]-->
+  <div id="app">
+    <app></app>
+  </div>
+  <script type="module" src="./mobile/main.ts"></script>
+  <script>
+    !function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator();},b.src="https://tdesign.gtimg.com/js/touch-emulator.js",a.body.appendChild(b)}(document);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/tdesign-uniapp-chat/site/package.json b/packages/tdesign-uniapp-chat/site/package.json
new file mode 100644
index 000000000..eb52dcf69
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/package.json
@@ -0,0 +1,136 @@
+{
+  "name": "tdesign-uniapp-chat-site",
+  "private": "true",
+  "version": "0.0.1",
+  "description": "site of tdesign-uniapp-chat",
+  "author": "novlan1",
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development vite",
+    "dev:debug": "cross-env NODE_ENV=development vite --debug",
+    "site": "vite build",
+    "build": "npm run site",
+    "site:preview": "vite build --mode preview",
+    "postsite:preview": "cp dist/index.html dist/404.html"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "keywords": [
+    "vue",
+    "uniapp",
+    "tdesign"
+  ],
+  "title": "tdesign-uniapp",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.16.5",
+    "@use-gesture/vanilla": "^10.3.0",
+    "@vueuse/core": "10.7.0",
+    "dayjs": "^1.10.7",
+    "lodash-es": "^4.17.21",
+    "tdesign-icons-vue-next": "^0.4.1",
+    "tinycolor2": "^1.6.0",
+    "validator": "^13.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": ">=7.13.0 <8.0.0",
+    "@babel/helper-module-imports": "7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.16.0",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-url": "^6.0.0",
+    "@soerenmartius/vue3-clipboard": "^0.1.1",
+    "@tdesign/site-components": "^0.17.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "18.8.0",
+    "@types/prismjs": "^1.16.2",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/validator": "^13.6.3",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "~5.34.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "@vue/babel-plugin-jsx": "1.1.1",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/runtime-core": "^3.2.41",
+    "@vue/shared": "3.3.8",
+    "@vue/test-utils": "2.4.1",
+    "autoprefixer": "^10.2.4",
+    "axios": "^1.7.2",
+    "camelcase": "~6.3.0",
+    "commitizen": "^4.2.3",
+    "concurrently": "^6.5.1",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.1.1",
+    "cz-conventional-changelog": "3.3.0",
+    "debug": "^4.3.1",
+    "dom-parser": "^0.1.6",
+    "esbuild": "^0.14.3",
+    "eslint": "^8.4.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^8.2.0",
+    "gray-matter": "^4.0.3",
+    "husky": "^6.0.0",
+    "jsdom": "^20.0.0",
+    "less": "^4.1.2",
+    "lint-staged": "^10.5.4",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.upperfirst": "^4.3.1",
+    "mockdate": "^3.0.5",
+    "postcss": "^8.2.1",
+    "prettier": "^3.4.2",
+    "prismjs": "^1.23.0",
+    "qrcode.vue": "^3.2.2",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^5.0.7",
+    "rollup": "^2.47.0",
+    "rollup-plugin-analyzer": "^3.3.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-esbuild": "^4.5.0",
+    "rollup-plugin-ignore-import": "^1.3.2",
+    "rollup-plugin-multi-input": "1.1.1",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-static-import": "^1.0.0",
+    "rollup-plugin-styles": "^3.14.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "rollup-pluginutils": "^2.8.2",
+    "tdesign-publish-cli": "^0.0.12",
+    "tdesign-site-components-uniapp": "0.17.3",
+    "tdesign-theme-generator": "^1.1.0",
+    "tdesign-uniapp-theme-generator": "^1.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "~4.7.2",
+    "vite": "^6.2.3",
+    "vite-plugin-tdoc": "^2.0.1",
+    "vitest": "^3.2.4",
+    "vue": "3.3.8",
+    "vue-eslint-parser": "^8.0.1",
+    "vue-router": "4.0.11",
+    "vue-tsc": "^0.40.0"
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/site/styles/mixins/index.less b/packages/tdesign-uniapp-chat/site/styles/mixins/index.less
new file mode 100644
index 000000000..590996ffc
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/mixins/index.less
@@ -0,0 +1,16 @@
+@import './text.less';
+
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp-chat/site/styles/mixins/text.less b/packages/tdesign-uniapp-chat/site/styles/mixins/text.less
new file mode 100644
index 000000000..e0b946570
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/mixins/text.less
@@ -0,0 +1,55 @@
+@import '../vars.less';
+
+.text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.primary-link() {
+  color: @link-color;
+
+  &:hover, &:focus {
+    color: @link-hover-color;
+  }
+  &:active {
+    color: @link-active-color;
+  }
+}
+
+.title-level-1() {
+  font-size: @title-level-1-size;
+  line-height: @title-level-1-line;
+  color: @title-level-1-color;
+}
+.title-level-2() {
+  font-size: @title-level-2-size;
+  line-height: @title-level-2-line;
+  color: @title-level-2-color;
+}
+.title-level-3() {
+  font-size: @title-level-3-size;
+  line-height: @title-level-3-line;
+  color: @title-level-3-color;
+}
+.title-level-4() {
+  font-size: @title-level-4-size;
+  line-height: @title-level-4-line;
+  color: @title-level-4-color;
+}
+
+.text-level-1() {
+  font-size: @text-level-1-size;
+  line-height: @text-level-1-line;
+  color: @text-level-1-color;
+}
+.text-level-2() {
+  font-size: @text-level-2-size;
+  line-height: @text-level-2-line;
+  color: @text-level-2-color;
+}
+.text-level-3() {
+  font-size: @text-level-3-size;
+  line-height: @text-level-3-line;
+  color: @text-level-3-color;
+}
diff --git a/packages/tdesign-uniapp-chat/site/styles/mobile/components.less b/packages/tdesign-uniapp-chat/site/styles/mobile/components.less
new file mode 100644
index 000000000..3776f76c6
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/mobile/components.less
@@ -0,0 +1,112 @@
+@import "../vars.less";
+@import "../mixins/index.less";
+
+.tdesign-mobile-demo-block {
+  .button-demo {
+
+    .t-button {
+      margin-bottom: 16px;
+    }
+  }
+
+  .tdesign-demo-iconfont {
+    .tdesign-demo-icon {
+      display: inline-block;
+      width: 25%;
+      text-align: center;
+
+      .t-icon {
+        color: inherit;
+        font-size: 28px;
+      }
+
+      p {
+        margin: 10px 0;
+        .text-ellipsis();
+      }
+    }
+  }
+
+  .cell-base {
+    background-color: #fbfbfb;
+  }
+
+  .tag-demo {
+    background-color: var(--bg-color-demo, #fff);
+    padding: 16px;
+    display: flex;
+
+    .t-tag+.t-tag {
+      margin-left: 16px;
+    }
+  }
+
+  .tag-demo+.tag-demo {
+    margin-top: 16px;
+  }
+
+  .segmented-control-demo {
+    background-color: #fff;
+    padding: 12px 16px;
+  }
+
+  .toast-demo,
+  .message-demo,
+  .dialog-demo,
+  .action-sheet-demo {
+    padding: 0 16px;
+
+    > .t-button + .t-button {
+      margin-top: 16px;
+    }
+  }
+
+  .slider-demo {
+    background-color: #fff;
+    padding: 12px 16px;
+  }
+
+  .stepper-demo {
+    background-color: #fff;
+    // max-height: 69px;
+  }
+
+  .stepper-demo+.stepper-demo {
+    margin-top: 16px;
+  }
+  .stepper-inline-demo .t-stepper{
+    padding: 12px 16px;
+  }
+
+  .stepper-pure-demo {
+    display: inline-block;
+  }
+
+  .step-demo {
+    background-color: #fff;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 40px;
+
+    .t-steps {
+      padding-bottom: 40px;
+    }
+  }
+
+  .step-demo+.step-demo {
+    margin-top: 16px;
+  }
+
+
+  .badge-demo {
+    display: flex;
+    margin-top: 28px;
+    margin-bottom: 24px;
+    margin-left: 16px;
+    align-items: center;
+
+    .badge-item {
+      margin-right: 48px;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/site/styles/mobile/demo.less b/packages/tdesign-uniapp-chat/site/styles/mobile/demo.less
new file mode 100644
index 000000000..4b9a027d9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/mobile/demo.less
@@ -0,0 +1,61 @@
+.tdesign-mobile-demo {
+  background-color: #f6f6f6;
+  font-family: "PingFang SC";
+  padding-bottom: 28px;
+  box-sizing: border-box;
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    padding: 24px 16px 0;
+    color: var(--td-text-color-primary);
+  }
+
+  .summary {
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+    margin: 8px 16px 0;
+    line-height: 22px;
+  }
+
+  &-block {
+    margin: 32px 0 0;
+
+    &__header {
+      color: #000;
+      margin: 0 16px;
+    }
+
+    &__title {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 26px;
+      color: var(--td-text-color-primary);
+    }
+
+    &__summary {
+      margin-top: 8px;
+      font-size: 14px;
+      white-space: pre-line;
+      color: var(--td-text-color-secondary);
+      line-height: 22px;
+    }
+
+    &__slot {
+      margin-top: 16px;
+
+      &.with-padding {
+        margin: 16px 16px 0;
+      }
+    }
+  }
+}
+
+.tdesign-mobile-demo-block_notitle {
+  margin-top: 0px;
+
+  .tdesign-mobile-demo-block_subtitle {
+    margin-top: 24px;
+  }
+}
diff --git a/packages/tdesign-uniapp-chat/site/styles/mobile/index.less b/packages/tdesign-uniapp-chat/site/styles/mobile/index.less
new file mode 100644
index 000000000..62d6a3426
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/mobile/index.less
@@ -0,0 +1,152 @@
+@import '../vars.less';
+@import '../mixins/index.less';
+@import './components.less';
+@import './demo.less';
+
+
+:root[theme-mode="dark"] {
+  --bg-color-demo: #181818;
+  --bg-color-demo-secondary: #2c2c2c;
+  --bg-color-scroll: #434343;
+
+  body{
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-topnav {
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-main .tdesign-mobile-demo {
+    background-color: var(--bg-color-demo);
+  }
+}
+
+  html::-webkit-scrollbar, body::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+    background: transparent;
+  }
+
+  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+    background: var(--bg-color-demo);
+  }
+
+  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 4px solid transparent;
+    background-clip: content-box;
+    background-color: var(--bg-color-scroll);
+  }
+  html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
+    width: 0;
+  }
+
+
+body {
+  background-color: #F6F6F6;
+  color: var(--bg-color-tab);
+}
+
+
+#app {
+  height: 100%;
+  z-index: 0;
+}
+
+.tdesign-demo-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.tdesign-demo-main {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+.tdesign-mobile-home {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 24px;
+  & p{
+    padding-top:16px;
+    opacity: 1;
+    color: rgba(0,0,0,0.4);
+    font-size: 14px;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    line-height: 22px;
+  }
+  &-navlink{
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding-left: 20px;
+  }
+  &-navs {
+    position: relative;
+    display: flex;
+    margin: 0 0 12px;
+    color: #323233;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 40px;
+    background: #f7f8fa;
+    & a {
+      text-decoration: none;
+      color: #323233
+    }
+  }
+  .tdesign-mobile-logo {
+    padding-bottom: 24px;
+    img {
+      width: 126px;
+    }
+  }
+  .t-collapse {
+    margin-bottom: 12px;
+    background-color: #fff;
+    &-panel {
+      &--active{
+        .t-collapse-panel__title {
+          color: rgba(0,0,0,0.4)
+        }
+      }
+      &__body {
+        padding: 0;
+        &-slot {
+          padding: 0;
+        }
+      }
+      &__content {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+
+.tdesign-demo-topnav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background-color: #fff;
+
+  &-title{
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--td-text-color-primary);
+  }
+  &__back{
+    position: absolute;
+    left: 16px;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--td-text-color-primary);
+  }
+}
+
+
diff --git a/packages/tdesign-uniapp-chat/site/styles/vars.less b/packages/tdesign-uniapp-chat/site/styles/vars.less
new file mode 100644
index 000000000..f4ef0efa1
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/styles/vars.less
@@ -0,0 +1,125 @@
+@prefix: tdesign;
+@primary-color: #0052d9;
+
+@primary-color-darken-1: darken(@primary-color, (43 - 35) * 1%);
+@primary-color-darken-2: darken(@primary-color, (43 - 27) * 1%);
+@primary-color-darken-3: darken(@primary-color, (43 - 19) * 1%);
+@primary-color-darken-4: darken(@primary-color, (43 - 11) * 1%);
+
+@primary-color-lighter-1: lighten(@primary-color, (51 - 43) * 1%);
+@primary-color-lighter-2: lighten(@primary-color, (59 - 43) * 1%);
+@primary-color-lighter-3: lighten(@primary-color, (67 - 43) * 1%);
+@primary-color-lighter-4: lighten(@primary-color, (75 - 43) * 1%);
+@primary-color-lighter-5: lighten(@primary-color, (83 - 43) * 1%);
+@primary-color-lighter-6: lighten(@primary-color, (91 - 43) * 1%);
+@primary-color-lighter-7: lighten(@primary-color, (96 - 43) * 1%);
+// @primary-color-lighter-6: hsl(217, 100, 91);
+
+// 状态色
+@success-color: #3ecc36;
+@error-color: #ff3e00;
+@warning-color: #ffa700;
+@info-color: #c7ddf3;
+
+@disabled-color: #c0c0c0;
+
+// 文字色
+@text-color: #333; // 黑 80%
+@text-color-lighter-1: #666; // 黑 60%
+@text-color-lighter-2: #999; // 黑 40%
+@text-color-lighter-3: #ccc; // 黑 20%
+
+// 文字色
+@text-color-white: #fff;
+@text-color-white-lighter-1: rgba(255, 255, 255, 0.8);
+@text-color-white-lighter-2: rgba(255, 255, 255, 0.6);
+@text-color-white-lighter-3: rgba(255, 255, 255, 0.4);
+
+@placeholder-color: #999;
+
+@font-size-base: 14px;
+@line-height-base: 1.5;
+@font-family:  "PingFang SC", -apple-system, "Helvetica Neue", Helvetica, BlinkMacSystemFont, "Microsoft YaHei", tahoma, Arial, "Open Sans", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
+
+/**
+ * 文字部分 
+ * size 大小，line 行高， color 颜色
+ */
+// 字体大小
+@font-size-small: 12px;
+@font-size: 14px;
+@font-size-large: 16px;
+@font-size-larger: 18px;
+// 行高
+@line-height-small: 30px;
+@line-height: 38px;
+@line-height-large: 48px;
+@line-height-larger: 60px;
+
+// 标题文字
+@title-level-1-size: 38px;
+@title-level-1-line: 53 / 38;
+@title-level-1-color: @text-color;
+@title-level-2-size: 20px;
+@title-level-2-line: 28 / 20;
+@title-level-2-color: @text-color;
+@title-level-3-size: 16px;
+@title-level-3-line: 22 / 16;
+@title-level-3-color: @text-color;
+@title-level-4-size: 16px;
+@title-level-4-line: 22 / 16;
+@title-level-4-color: @text-color-lighter-1;
+
+// 正常文字
+@text-level-1-size: 14px;
+@text-level-1-line: 20 / 14;
+@text-level-1-color: @text-color;
+@text-level-2-size: 14px;
+@text-level-2-line: 20 / 14;
+@text-level-2-color: @text-color-lighter-1;
+@text-level-3-size: 14px;
+@text-level-3-line: 20 / 14;
+@text-level-3-color: @text-color-lighter-2;
+
+// 小字
+@smalltext-level-1-size: 12px;
+@smalltext-level-1-line: 17 / 14;
+@smalltext-level-1-color: @text-color-lighter-1;
+@smalltext-level-2-size: 12px;
+@smalltext-level-2-line: 17 / 14;
+@smalltext-level-2-color: @text-color-lighter-2;
+
+@link-color: @primary-color;
+@link-hover-color: lighten(@primary-color, 20%);
+@link-active-color: darken(@primary-color, 20%);
+@link-decoration: none;
+@link-hover-decoration: none;
+
+// Shadow
+@shadow-level-1: 3px 3px 8px 2px rgba(0, 0, 0, 0.06);
+@shadow-level-2: 6px 6px 12px 6px rgba(0, 0, 0, 0.08);
+
+
+// border
+@border-color: #d9d9d9;
+@border-main: 1px solid @border-color;
+@border-color-2: lighten(@border-color, 5.9124%);
+@border-main-2: 1px solid @border-color-2;
+
+// rate
+@background-color-disabled: #e9e9e9;
+@background-color-active: #ffa700;
+
+@border-radius-percent: 0;
+
+@body-background: #ffffff;
+@component-background: #ffffff;
+
+// layout
+@layoutMargin: 10px;
+
+// header 
+@headerHeight: 81px;
+
+// footer
+@footerHeight: 160px;
diff --git a/packages/tdesign-uniapp-chat/site/vite.config.ts b/packages/tdesign-uniapp-chat/site/vite.config.ts
new file mode 100644
index 000000000..1f766b712
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/vite.config.ts
@@ -0,0 +1,94 @@
+import * as path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { removeLastSlash } from 't-comm/es/slash/slash';
+
+// import changelog2Json from './web/plugins/changelog-to-json';
+import tdocPlugin from './web/plugins/plugin-tdoc';
+
+const resolvePath = r => path.resolve(__dirname, r);
+
+const publicPathMap = {
+  preview: '/',
+  production: '/tdesign-uniapp-chat/',
+};
+
+const isCustomElement = tag => tag.startsWith('td-');
+
+// Rollup 4+ 的 tree-shaking 策略调整, 这里是为了让样式在站点构建正常
+const disableTreeShakingPlugin = paths => ({
+  name: 'disable-treeshake',
+  transform(code, id) {
+    for (const path of paths) {
+      if (id.includes(path)) {
+        return { code, map: null, moduleSideEffects: 'no-treeshake' };
+      }
+    }
+  },
+});
+
+const root: string = process.cwd();
+const ENV_PREFIX = ['VITE_', 'VUE_APP'];
+
+export default ({ mode }) => {
+  const env = loadEnv(mode, root, ENV_PREFIX);
+  const vueAppBase = env.VUE_APP_PUBLICPATH;
+  const experimentalConfig = vueAppBase ? {
+    experimental: {
+      renderBuiltUrl(filename: string, { hostId, hostType, type }: {
+        hostId: string;
+        hostType: string;
+        type: string;
+      }) {
+        console.log('[experimental] ', hostType, hostId, type, filename);
+
+        return `${removeLastSlash(vueAppBase)}/${filename}`;
+      },
+    },
+  } : {};
+
+
+  const result = defineConfig({
+    base: publicPathMap[mode],
+    ...experimentalConfig,
+    root: '.',
+    resolve: {
+      alias: {
+        '@': resolvePath('../tdesign-uniapp-chat'),
+        '@docs': resolvePath('./docs'),
+      },
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 18000,
+      open: '/',
+      https: false as any,
+    },
+    build: {
+      outDir: './dist',
+      rollupOptions: {
+        input: {
+          sites: 'index.html',
+        },
+      },
+    },
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement,
+          },
+        },
+      }),
+      vueJsx({
+        isCustomElement,
+      }),
+      tdocPlugin(mode),
+      // changelog2Json(),
+      disableTreeShakingPlugin(['style/', 'toast/']),
+    ],
+  });
+
+  return result;
+};
diff --git a/packages/tdesign-uniapp-chat/site/web/app.vue b/packages/tdesign-uniapp-chat/site/web/app.vue
new file mode 100644
index 000000000..33573fab4
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/app.vue
@@ -0,0 +1,149 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <td-doc-layout>
+    <td-header
+      slot="header"
+      platform="mobile"
+      framework="uniapp"
+    >
+      <td-doc-search
+        slot="search"
+        ref="tdDocSearch"
+      />
+    </td-header>
+    <td-doc-aside
+      ref="tdDocAside"
+      title="Uni App Chat"
+    >
+      <!-- <td-select ref="tdSelect" :value="version" slot="extra"></td-select> -->
+    </td-doc-aside>
+
+    <router-view
+      :style="contentStyle"
+      :doc-type="docType"
+      @loaded="contentLoaded"
+    />
+  </td-doc-layout>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import packageJson from '../../tdesign/package.json';
+import siteConfig from '../docs.config';
+import { filterVersions, sortDocs } from './utils';
+
+const registryUrl =  'https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/npm/versions/tdesign-mobile-vue';
+const currentVersion = packageJson.version.replace(/\./g, '_');
+
+// eslint-disable-next-line light/json-parse-try-catch
+const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+
+const docsMap = {
+  zh: sortDocs(docs),
+  en: sortDocs(enDocs),
+};
+
+export default defineComponent({
+  data() {
+    return {
+      docType: '',
+      loaded: false,
+      version: currentVersion,
+    };
+  },
+
+  computed: {
+    contentStyle() {
+      const { loaded } = this;
+      return { visibility: loaded ? 'visible' : 'hidden' };
+    },
+  },
+
+  watch: {
+    $route(route) {
+      this.$refs.tdDocAside.routerList = docsMap[route.meta.lang || 'zh'];
+      if (!route.meta.docType) return;
+      this.docType = route.meta.docType;
+    },
+  },
+
+  mounted() {
+    this.docType = this.$route.meta.docType;
+    this.$refs.tdDocSearch.docsearchInfo = { indexName: 'tdesign_doc_vue_mobile' };
+    this.$refs.tdDocAside.routerList = docsMap[this.$route?.meta?.lang || 'zh'];
+    this.$refs.tdDocAside.onchange = ({ detail }) => {
+      if (this.$route.path === detail) return;
+      this.loaded = false;
+      this.$router.push({ path: detail });
+      window.scrollTo(0, 0);
+    };
+    // this.$refs.tdSelect.onchange = ({ detail }) => {
+    //   const { value: version } = detail;
+    //   if (version === currentVersion) return;
+
+    //   const historyUrl = `https://${version}-tdesign-mobile-vue.surge.sh`;
+    //   window.open(historyUrl, '_blank');
+    // };
+    // this.initHistoryVersions();
+    this.initThemeGenerator();
+  },
+
+  methods: {
+    initHistoryVersions() {
+      fetch(registryUrl)
+        .then(res => res.json())
+        .then((res) => {
+          const options = [];
+          const versions = filterVersions(Object.keys(res.versions));
+
+          versions.forEach((v) => {
+            options.unshift({ label: v, value: v.replace(/\./g, '_') });
+          });
+
+          if (this.version !== options[0].value) {
+            this.version = options[0].value;
+          }
+
+          this.$refs.tdSelect.options = options;
+        });
+    },
+    initThemeGenerator() {
+      const generator = document.createElement('td-theme-generator');
+      generator.setAttribute('device', 'uniapp');
+      document.body.appendChild(generator);
+    },
+    contentLoaded(callback) {
+      requestAnimationFrame(() => {
+        this.loaded = true;
+        callback();
+      });
+    },
+  },
+});
+</script>
+
+<style lang="less">
+div[slot='action'] {
+  display: inline-flex;
+  column-gap: 8px;
+}
+
+.action-online {
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  transition: all 0.2s linear;
+  cursor: pointer;
+  border-radius: 3px;
+  color: var(--text-secondary);
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
+  }
+}
+</style>
diff --git a/packages/tdesign-uniapp-chat/site/web/main.ts b/packages/tdesign-uniapp-chat/site/web/main.ts
new file mode 100644
index 000000000..d9bbe989d
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/main.ts
@@ -0,0 +1,24 @@
+import { createApp } from 'vue';
+
+// @ts-ignore
+// import TDesign from '@/index';
+// import 'tdesign-mobile-vue/style/index.js';
+
+import { registerLocaleChange } from 'tdesign-site-components-uniapp';
+import 'tdesign-site-components-uniapp/lib/styles/prism-theme-dark.less';
+import 'tdesign-site-components-uniapp/lib/styles/prism-theme.less';
+import 'tdesign-site-components-uniapp/lib/styles/style.css';
+
+import 'tdesign-uniapp-theme-generator';
+
+import App from './app.vue';
+import router from './router';
+import Stackblitz from './stackblitz/index.vue';
+
+registerLocaleChange();
+
+const app = createApp(App);
+
+app.component('Stackblitz', Stackblitz);
+
+app.use(router).mount('#app');
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/components.ts b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/components.ts
new file mode 100644
index 000000000..cd019ed10
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/components.ts
@@ -0,0 +1,166 @@
+/**
+ * 不符合帕斯卡命名规范的组件映射
+ */
+export const NON_PASCAL_CASE_NAMES: Record<string, string> = {
+  qrcode: 'QRCode',
+};
+
+export const WEB_COMPONENT_MAP: Record<string, string[]> = {
+  affix: ['Affix'],
+  alert: ['Alert'],
+  anchor: ['Anchor', 'AnchorItem', 'AnchorTarget'],
+  'auto-complete': ['AutoComplete', 'HighlightOption'],
+  avatar: ['Avatar', 'AvatarGroup'],
+  'back-top': ['BackTop'],
+  badge: ['Badge'],
+  breadcrumb: ['Breadcrumb', 'BreadcrumbItem'],
+  button: ['Button'],
+  calendar: ['Calendar'],
+  card: ['Card'],
+  cascader: ['Cascader', 'CascaderPanel'],
+  checkbox: ['Checkbox', 'CheckboxGroup'],
+  collapse: ['Collapse', 'CollapsePanel'],
+  'color-picker': ['ColorPicker', 'ColorPickerPanel'],
+  comment: ['Comment'],
+  'config-provider': ['ConfigProvider'],
+  'date-picker': [
+    'DatePicker',
+    'DatePickerPanel',
+    'DateRangePicker',
+    'DateRangePickerPanel',
+  ],
+  descriptions: ['Descriptions', 'DescriptionsItem'],
+  dialog: ['Dialog', 'DialogPlugin'],
+  divider: ['Divider'],
+  drawer: ['Drawer', 'DrawerPlugin'],
+  dropdown: ['Dropdown', 'DropdownItem', 'DropdownMenu'],
+  empty: ['Empty'],
+  form: ['Form', 'FormItem', 'FormList'],
+  grid: ['Row', 'Col'],
+  guide: ['Guide'],
+  icon: ['Icon'],
+  image: ['Image'],
+  'image-viewer': ['ImageViewer'],
+  input: ['Input', 'InputGroup'],
+  'input-adornment': ['InputAdornment'],
+  'input-number': ['InputNumber'],
+  layout: ['Layout', 'Aside', 'Content', 'Footer', 'Header'],
+  link: ['Link'],
+  list: ['List', 'ListItem', 'ListItemMeta'],
+  loading: ['Loading', 'LoadingPlugin'],
+  menu: ['Menu', 'MenuGroup', 'MenuItem', 'HeadMenu', 'Submenu'],
+  message: ['Message', 'MessagePlugin'],
+  notification: ['Notification', 'NotifyPlugin'],
+  pagination: ['Pagination', 'PaginationMini'],
+  popconfirm: ['Popconfirm'],
+  popup: ['Popup'],
+  progress: ['Progress'],
+  qrcode: ['QRCode'],
+  radio: ['Radio', 'RadioButton', 'RadioGroup'],
+  'range-input': ['RangeInput', 'RangeInputPopup'],
+  rate: ['Rate'],
+  select: ['Select', 'Option', 'OptionGroup'],
+  'select-input': ['SelectInput'],
+  skeleton: ['Skeleton'],
+  slider: ['Slider', 'SliderButton'],
+  space: ['Space'],
+  statistic: ['Statistic'],
+  steps: ['Steps', 'StepItem'],
+  'sticky-tool': ['StickyTool', 'StickyItem'],
+  switch: ['Switch'],
+  swiper: ['Swiper', 'SwiperItem'],
+  table: ['Table', 'BaseTable', 'EnhancedTable', 'PrimaryTable'],
+  tabs: ['Tabs', 'TabPanel'],
+  tag: ['Tag', 'CheckTag', 'CheckTagGroup'],
+  'tag-input': ['TagInput'],
+  textarea: ['Textarea'],
+  'time-picker': ['TimePicker', 'TimePickerPanel', 'TimeRangePicker'],
+  timeline: ['Timeline', 'TimelineItem'],
+  tooltip: ['Tooltip', 'TooltipLite'],
+  transfer: ['Transfer'],
+  tree: ['Tree'],
+  'tree-select': ['TreeSelect'],
+  typography: ['Typography', 'Text', 'Title', 'Paragraph'],
+  upload: ['Upload'],
+  watermark: ['Watermark'],
+};
+
+export const MOBILE_COMPONENT_MAP: Record<string, string[]> = {
+  'action-sheet': ['ActionSheet'],
+  avatar: ['Avatar', 'AvatarGroup'],
+  'back-top': ['BackTop'],
+  badge: ['Badge'],
+  button: ['Button'],
+  calendar: ['Calendar'],
+  cascader: ['Cascader'],
+  cell: ['Cell', 'CellGroup'],
+  checkbox: ['Checkbox', 'CheckboxGroup'],
+  collapse: ['Collapse', 'CollapsePanel'],
+  'color-picker': ['ColorPicker'],
+  'config-provider': ['ConfigProvider'],
+  'count-down': ['CountDown'],
+  'date-time-picker': ['DateTimePicker'],
+  dialog: ['Dialog', 'DialogPlugin'],
+  divider: ['Divider'],
+  drawer: ['Drawer'],
+  'dropdown-menu': ['DropdownMenu', 'DropdownItem'],
+  empty: ['Empty'],
+  fab: ['Fab'],
+  footer: ['Footer'],
+  form: ['Form', 'FormItem'],
+  grid: ['Grid', 'GridItem'],
+  guide: ['Guide'],
+  icon: ['Icon'],
+  image: ['Image'],
+  'image-viewer': ['ImageViewer'],
+  indexes: ['Indexes', 'IndexesAnchor'],
+  input: ['Input'],
+  layout: ['Row', 'Col'],
+  link: ['Link'],
+  list: ['List'],
+  loading: ['Loading', 'LoadingPlugin'],
+  message: ['Message', 'MessagePlugin'],
+  navbar: ['Navbar'],
+  'notice-bar': ['NoticeBar'],
+  overlay: ['Overlay'],
+  picker: ['Picker'],
+  popover: ['Popover'],
+  popup: ['Popup'],
+  progress: ['Progress'],
+  'pull-down-refresh': ['PullDownRefresh'],
+  qrcode: ['QRCode'],
+  radio: ['Radio', 'RadioGroup'],
+  rate: ['Rate'],
+  result: ['Result'],
+  search: ['Search'],
+  'side-bar': ['SideBar', 'SideBarItem'],
+  skeleton: ['Skeleton'],
+  slider: ['Slider'],
+  stepper: ['Stepper'],
+  steps: ['Steps', 'StepItem'],
+  sticky: ['Sticky'],
+  'swipe-cell': ['SwipeCell'],
+  swiper: ['Swiper', 'SwiperItem'],
+  switch: ['Switch'],
+  'tab-bar': ['TabBar', 'TabBarItem'],
+  table: ['Table'],
+  tabs: ['Tabs', 'TabPanel'],
+  tag: ['Tag', 'CheckTag'],
+  textarea: ['Textarea'],
+  toast: ['Toast'],
+  'tree-select': ['TreeSelect'],
+  upload: ['Upload'],
+};
+
+export const CHAT_COMPONENT_MAP: Record<string, string[]> = {
+  chat: [
+    'Chat',
+    'ChatItem',
+    'ChatInput',
+    'ChatContent',
+    'ChatReasoning',
+    'ChatAction',
+    'ChatLoading',
+    'ChatSender',
+  ],
+};
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/index.ts b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/index.ts
new file mode 100644
index 000000000..7c9123287
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/index.ts
@@ -0,0 +1,194 @@
+/* eslint-disable no-console */
+/* eslint-disable no-use-before-define */
+import { promises } from 'fs';
+import { mapToParentName } from './libs';
+import type { ComponentLog, ComponentLogMap, LogItem, Logs, LogType, Platform, VersionLog } from './types';
+
+export const LOG_TYPES = ['🚨 Breaking Changes', '🚀 Features', '🐞 Bug Fixes'] as const;
+
+let targetPlatform: Platform = 'web';
+
+export default async function generateChangelogJson(changelogPath: string, platform: Platform) {
+  try {
+    const logMd = await promises.readFile(changelogPath, 'utf-8');
+    targetPlatform = platform;
+    const detailedLogs = parseMd2Json(logMd);
+    const compMap = formatJson2CompMap(detailedLogs);
+    console.log('\x1b[32m%s\x1b[0m', '✅ Sync CHANGELOG.md to changelog.json');
+    return compMap;
+  } catch (error) {
+    console.error('\x1b[31m%s\x1b[0m', '❌ Fail to generate changelog.json', '\x1b[33m', error);
+    return {};
+  }
+}
+
+/**
+ * 将整份 Markdown 先根据版本号拆分
+ */
+function parseMd2Json(logMd: string) {
+  const headerRegex = /^\s*##\s*🌈\s*(\d+\.\d+\.\d+)\s+`(\d{4}-\d{2}-\d{2})`\s*$/gm;
+  const matches = Array.from(logMd.matchAll(headerRegex));
+
+  const logs = matches.map((match, i) => {
+    const version = match[1];
+    const date = match[2];
+
+    const start = match.index + match[0].length;
+    const end = i < matches.length - 1 ? matches[i + 1].index : logMd.length;
+    const log = logMd.slice(start, end).trim();
+
+    return {
+      version,
+      date,
+      log: parseLogByType(log),
+    };
+  });
+
+  return logs;
+}
+
+/**
+ * 进一步根据指定的变更类型拆分
+ */
+function parseLogByType(logBlock: string) {
+  const logs: Logs = {};
+
+  LOG_TYPES.forEach((type) => {
+    const typeRegex = new RegExp(`### ${type}\\r?\\n([\\s\\S]+?)(?=### |$)`, 'g');
+    const matches = Array.from(logBlock.matchAll(typeRegex));
+
+    if (matches.length > 0) {
+      const logBlock = matches.map((match) => match[1]).join('\n');
+      const entries = extractLogEntries(logBlock);
+      logs[type] = groupLogByComponent(entries);
+    }
+  });
+
+  return logs;
+}
+
+/**
+ * 获取每种变更类型里面的每一段日志
+ * - case 1: 单独一行 -> 作为一条
+ * - case 2: 存在父子列表 -> 使用换行符，合并为一条
+ */
+function extractLogEntries(logBlock: string) {
+  const lines = logBlock.split('\n').filter((line) => line.trim() !== '');
+  const logs: string[] = [];
+
+  let currEntry = '';
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    // 跳过空行
+    if (!line) continue;
+
+    // 是否为子项（短横线前面有空格）
+    const isChildEntry = /^\s+-/.test(lines[i]);
+
+    // 是否为父项（直接以短横线开头）
+    const isParentEntry = line.startsWith('-') && !isChildEntry;
+
+    if (isParentEntry) {
+      // 如果是父项，保存之前的日志
+      if (currEntry) {
+        logs.push(currEntry.trim());
+      }
+      // 开始新项，去掉开头的 -
+      currEntry = line.substring(1).trim();
+    } else if (isChildEntry) {
+      // 如果是子项，添加到当前项中
+      const childContent = line.replace(/^\s*-\s*/, '').trim();
+      currEntry += `\n${childContent}`;
+    }
+  }
+
+  // 处理最后一项
+  logs.push(currEntry.trim());
+  return logs;
+}
+
+/**
+ * 根据每一条日志提及的组件名，将其归类
+ */
+function groupLogByComponent(entries: string[]) {
+  const logs: LogItem[] = [];
+
+  entries.forEach((entry) => {
+    const nameRegex = /`([^`]+)`:/;
+    const match = entry.match(nameRegex);
+    if (!match) return;
+
+    const rawName = match[1];
+    const compName = mapToParentName(rawName, targetPlatform);
+    if (!compName) return;
+
+    // 当前日志为父组件，去掉前缀
+    if (rawName === compName) {
+      const logWithoutPrefix = entry.replace(nameRegex, '').trim();
+      const lines = logWithoutPrefix.split('\n').map((line) => line.trim());
+      const isGroupedLog = lines[0].startsWith('@');
+      // 首行存在 @用户名 -> 同一个PR
+      if (isGroupedLog) {
+        // 整体插入，渲染为列表
+        logs.push({ component: compName, description: logWithoutPrefix });
+      } else {
+        // 每一行渲染为单独的日志项
+        lines.forEach((line) => {
+          logs.push({ component: compName, description: line });
+        });
+      }
+    } else {
+      // 子组件保留前缀，且整体插入
+      logs.push({ component: compName, description: entry });
+    }
+  });
+
+  return logs;
+}
+
+/**
+ * 将解析后的日志 JSON 转换为以组件名作为 key 的映射格式
+ */
+function formatJson2CompMap(logJson: VersionLog[]) {
+  const compMap: ComponentLogMap = {};
+
+  logJson.forEach((entry) => {
+    const { version, date, log } = entry;
+
+    (Object.keys(log) as LogType[]).forEach((type) => {
+      log[type]?.forEach((item: LogItem) => {
+        const { component, description } = item;
+
+        if (!compMap[component]) {
+          compMap[component] = [];
+        }
+
+        // 查找当前组件的版本记录
+        let versionEntry = compMap[component].find(
+          (v) => v.version === version
+        );
+
+        if (!versionEntry) {
+          versionEntry = {
+            version,
+            date,
+          } as ComponentLog;
+          compMap[component].push(versionEntry);
+        }
+
+        if (!versionEntry[type]) {
+          versionEntry[type] = [];
+        }
+        versionEntry[type].push(description);
+      });
+    });
+  });
+
+  // 按组件名字母顺序排序
+  const sortedCompMap = Object.keys(compMap)
+    .sort((a, b) => a.localeCompare(b))
+    .reduce((acc, key) => ({ ...acc, [key]: compMap[key] }), {});
+
+  return sortedCompMap as ComponentLogMap;
+}
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/libs.ts b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/libs.ts
new file mode 100644
index 000000000..a40ccb1e9
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/libs.ts
@@ -0,0 +1,23 @@
+import { MOBILE_COMPONENT_MAP, NON_PASCAL_CASE_NAMES, WEB_COMPONENT_MAP } from './components';
+import type { Platform } from './types';
+
+export const convert2PascalCase = (name: string) => name
+  .split('-')
+  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+  .join('');
+
+export const COMPONENT_MAPS = {
+  web: WEB_COMPONENT_MAP,
+  mobile: MOBILE_COMPONENT_MAP,
+};
+
+export const mapToParentName = (name: string, platform: Platform) => {
+  const targetMap = COMPONENT_MAPS[platform];
+
+  const found = Object.entries(targetMap).find(([_, values]) => values.includes(name));
+
+  // 返回父组件名
+  if (found) return NON_PASCAL_CASE_NAMES[found[0]] || convert2PascalCase(found[0]);
+
+  return null;
+};
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/types.ts b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/types.ts
new file mode 100644
index 000000000..f7ec876be
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json-core/types.ts
@@ -0,0 +1,29 @@
+import { LOG_TYPES } from '.';
+
+export type Platform = 'web' | 'mobile';
+
+export type LogType = typeof LOG_TYPES[number];
+
+type LogMetadata = {
+  version: string;
+  date: string;
+};
+
+export type LogItem = {
+  component: string;
+  description: string;
+};
+
+export type Logs = {
+  [K in LogType]?: LogItem[];
+};
+
+export type VersionLog = LogMetadata & {
+  log: Logs;
+};
+
+export type ComponentLog = LogMetadata & {
+  [K in LogType]?: string[];
+};
+
+export type ComponentLogMap = Record<string, ComponentLog[]>;
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json/index.js b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json/index.js
new file mode 100644
index 000000000..5e48e3d9a
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/changelog-to-json/index.js
@@ -0,0 +1,32 @@
+import { promises } from 'fs';
+import path from 'path';
+
+import generateChangelogJson from '../changelog-to-json-core';
+
+const outputPath = path.resolve(__dirname, '../../../../_site/changelog.json');
+const changelogPath = path.resolve(__dirname, '../../../../CHANGELOG.md');
+
+export default function changelog2Json() {
+  let config;
+  return {
+    name: 'changelog-to-json',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(server) {
+      // 开发模式时拦截请求
+      server.middlewares.use('/changelog.json', async (_, res) => {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(json));
+      });
+    },
+    async closeBundle() {
+      // 生产构建时写入物理文件
+      if (config.env.PROD || config.env.MODE === 'preview') {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        await promises.writeFile(outputPath, JSON.stringify(json));
+      }
+    },
+  };
+}
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/demo.js b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/demo.js
new file mode 100644
index 000000000..4413037bc
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/demo.js
@@ -0,0 +1,42 @@
+/* eslint-disable */
+import path from 'path';
+
+export default function renderDemo(md, container) {
+  md.use(container, 'demo', {
+    validate(params) {
+      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+    },
+    render(tokens, idx) {
+      if (tokens[idx].nesting === 1) {
+        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+        const [, demoPath, componentName = ''] = match;
+        const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, '');
+        const demoName = path.basename(demoPath).trim();
+        const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
+
+        const tpl = `
+          <td-doc-demo
+            :code="${demoCodeDefName}"
+            language="markup"
+            show-code
+            mode="open"
+            demo-name="${demoName}"
+            component-name="${componentName}"
+          >
+          <div slot="action">
+            <Stackblitz demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
+          </div>
+          </td-doc-demo>
+        `;
+
+        // eslint-disable-next-line no-param-reassign
+        tokens.tttpl = tpl;
+
+        return `<div class="tdesign-demo-wrapper tdesign-demo-item--${componentName}-${demoName} tdesign-demo-item--${componentName}">`;
+      }
+      if (tokens.tttpl) return `${tokens.tttpl || ''}</div>`;
+
+      return '';
+    },
+  });
+}
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/index.js b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/index.js
new file mode 100644
index 000000000..f174b4384
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/index.js
@@ -0,0 +1,38 @@
+import vue from '@vitejs/plugin-vue';
+import vitePluginTdoc from 'vite-plugin-tdoc';
+
+import getTransforms from './transforms';
+import renderDemo from './demo';
+
+export default (mode) =>
+  vitePluginTdoc({
+    plugins: [
+      vue({
+        include: [/\.md$/],
+        ssr: false,
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => tag.startsWith('td-'),
+          },
+        },
+      }),
+    ],
+    transforms: getTransforms(mode), // 解析markdown 数据
+    markdown: {
+      anchor: {
+        tabIndex: false,
+        config: (anchor) => ({
+          permalink: anchor.permalink.linkInsideHeader({ symbol: '' }),
+        }),
+      },
+      toc: {
+        listClass: 'tdesign-toc_list',
+        itemClass: 'tdesign-toc_list_item',
+        linkClass: 'tdesign-toc_list_item_a',
+        containerClass: 'tdesign-toc_container',
+      },
+      container(md, container) {
+        renderDemo(md, container);
+      },
+    },
+  });
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
new file mode 100644
index 000000000..0df525ec2
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
@@ -0,0 +1,212 @@
+/* eslint-disable */
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import camelCase from 'camelcase';
+
+import testCoverage from '../../test-coverage';
+
+const DEFAULT_TABS = [
+  { tab: 'demo', name: '示例' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: '指南' },
+];
+
+const DEFAULT_EN_TABS = [
+  { tab: 'demo', name: 'DEMO' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: 'Guideline' },
+];
+
+
+function getMobilePrefix(mode) {
+  if (mode === 'preview') {
+    return '/mobile';
+  }
+  if (process.env.NODE_ENV === 'development') {
+    return 'http://localhost:11111/tdesign-uniapp/mobile';
+  }
+  return '/tdesign-uniapp/mobile';
+}
+
+export default function mdToVue(options) {
+  const mdSegment = customRender(options);
+  const { demoCodesDefsStr, demoCodeInstallStr } = options;
+
+  let coverage = {};
+  if (mdSegment.isComponent) {
+    coverage = testCoverage[camelCase(mdSegment.componentName || '')] || {};
+  }
+
+  // removed badge
+  const sfc = `
+    <template>
+      <td-doc-content ref="tdDocContent" page-status="hidden" platform="mobile">
+        ${
+          mdSegment.tdDocHeader
+            ? `
+          <td-doc-header
+            slot="doc-header"
+            ref="tdDocHeader"
+            platform="mobile"
+            spline="${mdSegment.spline}"
+            component-name="${mdSegment.isComponent ? mdSegment.componentName : ''}"
+          >
+          </td-doc-header>`
+            : ''
+        }
+        ${
+          mdSegment.isComponent
+            ? `
+          <td-doc-tabs ref="tdDocTabs" :tab="tab"></td-doc-tabs>
+          <div v-show="tab === 'demo'">
+            <div name="DEMO">${mdSegment.demoMd}</div>
+
+            <td-doc-phone ref="tdDocPhone">
+              <iframe src="${mdSegment.mobileUrl}" frameborder="0" width="100%" height="100%" style="border-radius: 0 0 6px 6px;"></iframe>
+            </td-doc-phone>
+
+          </div>
+          <div v-show="tab === 'api'" name="API">${mdSegment.apiMd}</div>
+          <div v-show="tab === 'design'" name="DESIGN">${mdSegment.designMd}</div>
+        `
+            : `<div name="DOC" class="${mdSegment.docClass}">${mdSegment.docMd}</div>`
+        }
+        <div style="margin-top: 48px;">
+          <td-doc-history time="${mdSegment.lastUpdated}"></td-doc-history>
+        </div>
+        <td-doc-footer slot="doc-footer" platform="mobile"></td-doc-footer>
+      </td-doc-content>
+    </template>
+
+    <script>
+      import { defineComponent } from 'vue';
+      import Prismjs from 'prismjs';
+      import 'prismjs/components/prism-bash.js';
+      ${demoCodesDefsStr}
+
+      export default defineComponent({
+        data() {
+          return {
+            ${demoCodeInstallStr}
+          };
+        },
+
+        computed: {
+          tab: {
+            get() {
+              return this.$route.query.tab || 'demo';
+            },
+            set(v) {
+              if (this.$route.query.tab !== v)
+                this.$router.push({ query: { tab: v } });
+            }
+          },
+        },
+
+        mounted() {
+          const { tdDocContent, tdDocHeader, tdDocTabs, tdDocPhone } = this.$refs;
+          const completeUrl = '${mdSegment.mobileUrl}';
+
+          if (tdDocHeader) {
+            tdDocHeader.docInfo = {
+              title: \`${mdSegment.title}\`,
+              desc: \`${mdSegment.description}\`,
+            };
+          }
+
+          if (tdDocTabs) {
+            tdDocTabs.tabs = ${JSON.stringify(mdSegment.tdDocTabs)};
+            tdDocTabs.onchange = ({ detail: currentTab }) => this.tab = currentTab;
+          }
+
+          if (tdDocPhone) {
+            tdDocPhone.qrcodeUrl = completeUrl;
+          }
+
+          Prismjs.highlightAll();
+
+          this.$emit('loaded', () => {
+            tdDocContent.pageStatus = 'show';
+          });
+        },
+      });
+    </script>
+  `;
+
+  return sfc;
+}
+
+// 解析 markdown 内容
+function customRender({ source, file, md, mode }) {
+  const { content, data } = matter(source);
+  const isEn = file.endsWith('en-US.md');
+  // md top data
+  const pageData = {
+    spline: '',
+    toc: false,
+    title: '',
+    description: '',
+    isComponent: false,
+    tdDocHeader: true,
+    tdDocTabs: !isEn ? DEFAULT_TABS : DEFAULT_EN_TABS,
+    apiFlag: /#+\s*API/i,
+    docClass: '',
+    lastUpdated: Math.round(fs.statSync(file).mtimeMs),
+    ...data,
+  };
+
+  // md filename
+  const reg = file.match(/tdesign-uniapp-chat\/(\S*)(?=\/\S*.md)/);
+  // const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+  const componentName = reg && reg[1];
+
+  // split md
+  let [demoMd = '', apiMd = ''] = content.split(pageData.apiFlag);
+
+  const mdSegment = {
+    ...pageData,
+    componentName,
+    docMd: '<td-doc-empty></td-doc-empty>',
+    demoMd: '<td-doc-empty></td-doc-empty>',
+    apiMd: '<td-doc-empty></td-doc-empty>',
+    designMd: '<td-doc-empty></td-doc-empty>',
+  };
+
+  // fix table | render error
+  apiMd = apiMd.replace(/`[^`]+`/g, (str) => str.replace(/\|/g, '\\|'));
+
+  if (pageData.isComponent) {
+    mdSegment.demoMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${demoMd.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+    mdSegment.apiMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${apiMd.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+  } else {
+    mdSegment.docMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${content.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+  }
+
+  // 移动端路由地址
+  const prefix = getMobilePrefix(mode);
+  mdSegment.mobileUrl = `${prefix}#/pages-more/${componentName}/${componentName}`;
+
+  // 设计指南内容 不展示 design Tab 则不解析
+  if (pageData.isComponent && pageData.tdDocTabs.some((item) => item.tab === 'design')) {
+    const designDocPath = path.resolve(__dirname, `../../../docs/design/${componentName}.md`);
+
+    if (fs.existsSync(designDocPath)) {
+      const designMd = fs.readFileSync(designDocPath, 'utf-8');
+      mdSegment.designMd = md.render.call(md, `${pageData.toc ? '[toc]\n' : ''}${designMd}`).html;
+    } else {
+      // console.log(`[vite-plugin-tdoc]: 未找到 ${designDocPath} 文件`);
+    }
+  }
+
+  return mdSegment;
+}
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/transforms.js b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/transforms.js
new file mode 100644
index 000000000..94e79d5d2
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/transforms.js
@@ -0,0 +1,77 @@
+import path from 'path';
+import fs from 'fs';
+
+import mdToVue from './md-to-vue';
+
+let demoCodesImports = {};
+
+export default (mode) => ({
+  before({ source, file }) {
+    const resourceDir = path.dirname(file);
+    const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+    const fileName = reg && reg[0];
+    const componentName = reg && reg[1];
+    const localeName = reg && reg[2];
+    demoCodesImports = {};
+
+    // 统一换成 common 文档内容
+    if (fileName && source.includes(':: BASE_DOC ::')) {
+      const localeDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${componentName}.md`);
+      let baseDoc = '';
+      if (fs.existsSync(localeDocPath)) {
+        // 优先载入语言版本
+        baseDoc = fs.readFileSync(localeDocPath, 'utf-8');
+      } else if (fs.existsSync(defaultDocPath)) {
+        // 回退中文默认版本
+        baseDoc = fs.readFileSync(defaultDocPath, 'utf-8');
+      } else {
+        console.error(`未找到 ${defaultDocPath} 文件`);
+      }
+
+      source = source.replace(':: BASE_DOC ::', baseDoc);
+    }
+
+    // 替换成对应 demo 文件
+    source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
+      const defaultDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}/index.vue`);
+      const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}.${localeName}.vue`);
+      // const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
+      // localeDemo 优先级最高
+      if (fs.existsSync(localeDemoPath)) return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`;
+
+      if (!fs.existsSync(defaultDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`);
+        return '\n<h3>DEMO (🚧建设中）...</h3>';
+      }
+
+      return `\n::: demo _example/${demoFileName} ${componentName}\n:::\n`;
+    });
+
+    source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
+      const demoPathOnlyLetters = relativeDemoPath.replace(/[^a-zA-Z\d]/g, '');
+      const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
+      demoCodesImports[demoCodeDefName] = `import ${demoCodeDefName} from './${relativeDemoPath}/index.vue?raw';`;
+    });
+
+    return source;
+  },
+  render({ source, file, md }) {
+    const demoCodesDefsStr = Object.keys(demoCodesImports)
+      .map(key => demoCodesImports[key])
+      .join(';\n');
+
+    const demoCodeInstallStr = Object.keys(demoCodesImports).join(',');
+
+    const sfc = mdToVue({
+      md,
+      file,
+      source,
+      demoCodesDefsStr,
+      demoCodeInstallStr,
+      mode,
+    });
+
+    return sfc;
+  },
+});
diff --git a/packages/tdesign-uniapp-chat/site/web/router.ts b/packages/tdesign-uniapp-chat/site/web/router.ts
new file mode 100644
index 000000000..58760a232
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/router.ts
@@ -0,0 +1,68 @@
+import {
+  type RouteRecordRaw,
+  createRouter,
+  createWebHistory,
+  type RouterOptions } from 'vue-router';
+import * as config from '../docs.config';
+import { sortDocs } from './utils';
+
+const docs = sortDocs(config.docs);
+const enDocs = sortDocs(config.enDocs);
+
+function getDocsRoutes(docs: any[], type: string): RouteRecordRaw[] {
+  let docsRoutes: Array<RouteRecordRaw> = [];
+  let docRoute;
+
+  docs.forEach((item) => {
+    const docType = item.type || type;
+    if (docType === type) {
+      const { children } = item;
+      if (children) {
+        docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType));
+      } else {
+        docRoute = { ...item };
+        docsRoutes.push(docRoute);
+      }
+    }
+  });
+  return docsRoutes;
+}
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/tdesign-uniapp-chat/getting-started',
+  },
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/tdesign-uniapp-chat/getting-started',
+  },
+  ...getDocsRoutes(docs, 'document'),
+  ...getDocsRoutes(docs, 'component'),
+  ...getDocsRoutes(enDocs, 'document'),
+  ...getDocsRoutes(enDocs, 'component'),
+];
+
+const routerConfig: RouterOptions = {
+  routes,
+  history: createWebHistory('/'),
+};
+
+const router = createRouter(routerConfig);
+
+router.beforeEach((to, from, next) => {
+  if (to.name !== from.name) {
+    // @ts-ignore
+    window.NProgress?.start();
+  }
+  next();
+});
+
+router.afterEach(() => {
+  // @ts-ignore
+  window.NProgress?.done();
+  // @ts-ignore
+  document.querySelector('td-stats')?.track?.();
+});
+
+export default router;
diff --git a/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts b/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
new file mode 100644
index 000000000..6bb7dd015
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
@@ -0,0 +1,237 @@
+import orgPkg from '../../../tdesign/package.json';
+
+export const HTML_CONTENT = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+`;
+
+export const MAN_JS_CONTENT = `
+import 'tdesign-uniapp/common/style/theme/index.css';
+
+import {
+  createSSRApp,
+} from 'vue';
+import App from './App.vue';
+
+
+
+export function createApp() {
+  const app = createSSRApp(App);
+  return {
+    app,
+  };
+}
+`;
+
+export const MANIFEST_JSON_CONTENT = JSON.stringify({
+  name: 'TDesign UniApp',
+  appid: '',
+  description: '',
+  versionName: '1.0.0',
+  versionCode: '100',
+  transformPx: false,
+  'app-plus': {
+    usingComponents: true,
+    nvueStyleCompiler: 'uni-app',
+    compilerVersion: 3,
+    splashscreen: {
+      alwaysShowBeforeRender: true,
+      waiting: true,
+      autoclose: true,
+      delay: 0,
+    },
+    modules: {},
+    distribute: {
+      android: {
+        permissions: [
+          '<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
+          '<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
+          '<uses-permission android:name="android.permission.VIBRATE"/>',
+          '<uses-permission android:name="android.permission.READ_LOGS"/>',
+          '<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
+          '<uses-feature android:name="android.hardware.camera.autofocus"/>',
+          '<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
+          '<uses-permission android:name="android.permission.CAMERA"/>',
+          '<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
+          '<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
+          '<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
+          '<uses-permission android:name="android.permission.WAKE_LOCK"/>',
+          '<uses-permission android:name="android.permission.FLASHLIGHT"/>',
+          '<uses-feature android:name="android.hardware.camera"/>',
+          '<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
+        ],
+      },
+      ios: {},
+      sdkConfigs: {},
+    },
+  },
+  quickapp: {},
+  'mp-weixin': {
+    appid: '',
+    setting: {
+      urlCheck: false,
+    },
+    usingComponents: true,
+  },
+  'mp-alipay': {
+    usingComponents: true,
+  },
+  'mp-baidu': {
+    usingComponents: true,
+  },
+  'mp-toutiao': {
+    usingComponents: true,
+  },
+  uniStatistics: {
+    enable: false,
+  },
+  vueVersion: '3',
+}, null, 2);
+
+export const PAGES_JSON_CONTENT = JSON.stringify({
+  pages: [
+    {
+      path: 'pages/index/index',
+      style: {
+        navigationBarTitleText: 'TDesign UniApp',
+      },
+    },
+  ],
+  globalStyle: {
+    navigationBarTextStyle: 'black',
+    navigationBarTitleText: 'uni-app',
+    navigationBarBackgroundColor: '#F8F8F8',
+    backgroundColor: '#F8F8F8',
+  },
+}, null, 2);
+
+export const APP_VUE_CONTENT = `
+<script>
+export default {
+  onLaunch() {
+    console.log('App Launch');
+  },
+  onShow() {
+    console.log('App Show');
+  },
+  onHide() {
+    console.log('App Hide');
+  },
+};
+</script>
+
+<style>
+/*每个页面公共css */
+</style>
+`;
+
+
+export const STACKBLITZ_RZ = `
+  {
+    "installDependencies": false,
+    "startCommand": "pnpm install && pnpm run dev:h5"
+  }
+`;
+
+export const VITE_CONFIG_CONTENT = `
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+
+export default defineConfig({
+  plugins: [
+    uni(),
+  ],
+});
+`;
+
+export const PACKAGE_JSON_CONTENT = JSON.stringify(
+  {
+    name: 'tdesign-uniapp-demo',
+    author: 'novlan1',
+    version: orgPkg.version,
+    scripts: {
+      'dev:custom': 'uni -p',
+      'dev:h5': 'uni',
+      'dev:h5:ssr': 'uni --ssr',
+      'dev:mp-alipay': 'uni -p mp-alipay',
+      'dev:mp-baidu': 'uni -p mp-baidu',
+      'dev:mp-jd': 'uni -p mp-jd',
+      'dev:mp-kuaishou': 'uni -p mp-kuaishou',
+      'dev:mp-lark': 'uni -p mp-lark',
+      'dev:mp-qq': 'uni -p mp-qq',
+      'dev:mp-toutiao': 'uni -p mp-toutiao',
+      'dev:mp-harmony': 'uni -p mp-harmony',
+      'dev:mp-weixin': 'uni -p mp-weixin',
+      'dev:mp-xhs': 'uni -p mp-xhs',
+      'dev:quickapp-webview': 'uni -p quickapp-webview',
+      'dev:quickapp-webview-huawei': 'uni -p quickapp-webview-huawei',
+      'dev:quickapp-webview-union': 'uni -p quickapp-webview-union',
+      'build:custom': 'uni build -p',
+      'build:h5': 'uni build',
+      'build:h5:ssr': 'uni build --ssr',
+      'build:mp-alipay': 'uni build -p mp-alipay',
+      'build:mp-baidu': 'uni build -p mp-baidu',
+      'build:mp-jd': 'uni build -p mp-jd',
+      'build:mp-kuaishou': 'uni build -p mp-kuaishou',
+      'build:mp-lark': 'uni build -p mp-lark',
+      'build:mp-qq': 'uni build -p mp-qq',
+      'build:mp-toutiao': 'uni build -p mp-toutiao',
+      'build:mp-harmony': 'uni build -p mp-harmony',
+      'build:mp-weixin': 'uni build -p mp-weixin',
+      'build:mp-xhs': 'uni build -p mp-xhs',
+      'build:quickapp-webview': 'uni build -p quickapp-webview',
+      'build:quickapp-webview-huawei': 'uni build -p quickapp-webview-huawei',
+      'build:quickapp-webview-union': 'uni build -p quickapp-webview-union',
+    },
+    dependencies: {
+      '@dcloudio/uni-app': '3.0.0-4070620250821001',
+      '@dcloudio/uni-app-harmony': '3.0.0-4070620250821001',
+      '@dcloudio/uni-app-plus': '3.0.0-4070620250821001',
+      '@dcloudio/uni-components': '3.0.0-4070620250821001',
+      '@dcloudio/uni-h5': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-alipay': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-baidu': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-harmony': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-jd': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-kuaishou': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-lark': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-qq': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-toutiao': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-weixin': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-xhs': '3.0.0-4070620250821001',
+      '@dcloudio/uni-quickapp-webview': '3.0.0-4070620250821001',
+      'tdesign-uniapp': orgPkg.version,
+      vue: '^3.4.21',
+      'vue-router': '4.5.1',
+    },
+    devDependencies: {
+      '@dcloudio/types': '^3.4.8',
+      '@dcloudio/uni-automator': '3.0.0-4070620250821001',
+      '@dcloudio/uni-cli-shared': '3.0.0-4070620250821001',
+      '@dcloudio/uni-stacktracey': '3.0.0-4070620250821001',
+      '@dcloudio/vite-plugin-uni': '3.0.0-4070620250821001',
+      '@vue/runtime-core': '^3.4.21',
+      vite: '5.2.8',
+    },
+  },
+  null,
+  2,
+);
diff --git a/packages/tdesign-uniapp-chat/site/web/stackblitz/index.vue b/packages/tdesign-uniapp-chat/site/web/stackblitz/index.vue
new file mode 100644
index 000000000..9ae2cbd18
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/stackblitz/index.vue
@@ -0,0 +1,130 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <td-tooltip trigger-type="hover">
+    <form
+      ref="formRef"
+      method="post"
+      action="https://stackblitz.com/run"
+      target="_blank"
+      @click="submit"
+    >
+      <input
+        type="hidden"
+        name="project[files][src/pages/index/index.vue]"
+        :value="code"
+      >
+      <input
+        type="hidden"
+        name="project[files][index.html]"
+        :value="HTML_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/main.js]"
+        :value="MAN_JS_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/App.vue]"
+        :value="APP_VUE_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/pages.json]"
+        :value="PAGES_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/manifest.json]"
+        :value="MANIFEST_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][package.json]"
+        :value="PACKAGE_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][vite.config.js]"
+        :value="VITE_CONFIG_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][.stackblitzrc]"
+        :value="STACKBLITZ_RZ"
+      >
+      <input
+        type="hidden"
+        name="project[template]"
+        value="node"
+      >
+
+      <div class="action-online">
+        <svg
+          viewBox="0 0 28 28"
+          height="20"
+        >
+          <path
+            fill="currentColor"
+            d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
+          />
+        </svg>
+      </div>
+    </form>
+    <span slot="content">在 Stackblitz 中打开</span>
+  </td-tooltip>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import {
+  HTML_CONTENT,
+  MAN_JS_CONTENT,
+  MANIFEST_JSON_CONTENT,
+  PAGES_JSON_CONTENT,
+  APP_VUE_CONTENT,
+  STACKBLITZ_RZ,
+  VITE_CONFIG_CONTENT,
+  PACKAGE_JSON_CONTENT,
+} from './content';
+
+export default defineComponent({
+  name: 'Stackblitz',
+  props: {
+    code: String,
+    demoName: String,
+    componentName: String,
+  },
+
+  setup() {
+    const data = {
+      HTML_CONTENT,
+      MAN_JS_CONTENT,
+      MANIFEST_JSON_CONTENT,
+      PAGES_JSON_CONTENT,
+      APP_VUE_CONTENT,
+      STACKBLITZ_RZ,
+      VITE_CONFIG_CONTENT,
+      PACKAGE_JSON_CONTENT,
+    };
+    const match = window.location.hostname.match(/preview-pr-(\d+)-tdesign-mobile-vue.surge.sh/);
+    if (match) {
+      let packageJSON = {};
+      try {
+        packageJSON = JSON.parse(PACKAGE_JSON_CONTENT);
+      } catch (e) {
+      }
+
+      packageJSON.dependencies['tdesign-mobile-vue'] = `https://pkg.pr.new/Tencent/tdesign-mobile-vue/tdesign-mobile-vue@${match[1]}`;
+      data.PACKAGE_JSON_CONTENT = JSON.stringify(packageJSON, null, 2);
+    }
+    const formRef = ref(null);
+
+    const submit = () => {
+      formRef.value.submit();
+    };
+
+    return { ...data, formRef, submit };
+  },
+});
+</script>
diff --git a/packages/tdesign-uniapp-chat/site/web/test-coverage.js b/packages/tdesign-uniapp-chat/site/web/test-coverage.js
new file mode 100644
index 000000000..3ae43ce91
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/test-coverage.js
@@ -0,0 +1,69 @@
+module.exports = {
+  util: { statements: '48.86%', branches: '71.42%', functions: '22.22%', lines: '48.86%' },
+  actionSheet: { statements: '85.39%', branches: '89.33%', functions: '94.28%', lines: '85.39%' },
+  avatar: { statements: '95.21%', branches: '93.75%', functions: '76.92%', lines: '95.21%' },
+  backTop: { statements: '88.99%', branches: '80%', functions: '75%', lines: '88.99%' },
+  badge: { statements: '99.27%', branches: '89.79%', functions: '100%', lines: '99.27%' },
+  button: { statements: '100%', branches: '96.29%', functions: '100%', lines: '100%' },
+  calendar: { statements: '69.24%', branches: '75.78%', functions: '50%', lines: '69.24%' },
+  cascader: { statements: '83.72%', branches: '77.1%', functions: '64.28%', lines: '83.72%' },
+  cell: { statements: '100%', branches: '84.37%', functions: '100%', lines: '100%' },
+  checkbox: { statements: '99.18%', branches: '87.96%', functions: '92.85%', lines: '99.18%' },
+  collapse: { statements: '88.88%', branches: '86.2%', functions: '100%', lines: '88.88%' },
+  colorPicker: { statements: '99.41%', branches: '95.18%', functions: '100%', lines: '99.41%' },
+  configProvider: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  countDown: { statements: '94.56%', branches: '89.47%', functions: '71.42%', lines: '94.56%' },
+  dateTimePicker: { statements: '98.82%', branches: '94.84%', functions: '93.33%', lines: '98.82%' },
+  dialog: { statements: '90.25%', branches: '85.29%', functions: '79.31%', lines: '90.25%' },
+  divider: { statements: '94.64%', branches: '90.9%', functions: '80%', lines: '94.64%' },
+  drawer: { statements: '100%', branches: '96.96%', functions: '100%', lines: '100%' },
+  dropdownMenu: { statements: '94.51%', branches: '71.53%', functions: '90.62%', lines: '94.51%' },
+  empty: { statements: '94.54%', branches: '91.66%', functions: '75%', lines: '94.54%' },
+  fab: { statements: '68.64%', branches: '61.9%', functions: '53.84%', lines: '68.64%' },
+  footer: { statements: '95.08%', branches: '94.11%', functions: '85.71%', lines: '95.08%' },
+  form: { statements: '89.94%', branches: '80.86%', functions: '90.74%', lines: '89.94%' },
+  grid: { statements: '97.63%', branches: '89.58%', functions: '100%', lines: '97.63%' },
+  guide: { statements: '82.74%', branches: '69.81%', functions: '87.09%', lines: '82.74%' },
+  hooks: { statements: '77.42%', branches: '85.64%', functions: '76.08%', lines: '77.42%' },
+  icon: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  image: { statements: '92.3%', branches: '95.12%', functions: '87.5%', lines: '92.3%' },
+  imageViewer: { statements: '60.13%', branches: '72.09%', functions: '36.84%', lines: '60.13%' },
+  indexes: { statements: '95.98%', branches: '85.18%', functions: '100%', lines: '95.98%' },
+  input: { statements: '94.53%', branches: '85.52%', functions: '92.59%', lines: '94.53%' },
+  layout: { statements: '89.21%', branches: '71.42%', functions: '75%', lines: '89.21%' },
+  link: { statements: '100%', branches: '96%', functions: '100%', lines: '100%' },
+  list: { statements: '100%', branches: '87.5%', functions: '100%', lines: '100%' },
+  loading: { statements: '97.86%', branches: '87.5%', functions: '100%', lines: '97.86%' },
+  locale: { statements: '0%', branches: '0%', functions: '0%', lines: '0%' },
+  message: { statements: '63.11%', branches: '65.45%', functions: '68.75%', lines: '63.11%' },
+  navbar: { statements: '95.79%', branches: '94.11%', functions: '87.5%', lines: '95.79%' },
+  noticeBar: { statements: '98.78%', branches: '92.42%', functions: '95%', lines: '98.78%' },
+  overlay: { statements: '97.46%', branches: '90.9%', functions: '100%', lines: '97.46%' },
+  picker: { statements: '85.62%', branches: '78.57%', functions: '90%', lines: '85.62%' },
+  popover: { statements: '70.93%', branches: '71.42%', functions: '42.85%', lines: '70.93%' },
+  popup: { statements: '98.92%', branches: '92.85%', functions: '100%', lines: '98.92%' },
+  progress: { statements: '97.23%', branches: '83.33%', functions: '100%', lines: '97.23%' },
+  pullDownRefresh: { statements: '93.7%', branches: '73.52%', functions: '94.11%', lines: '93.7%' },
+  qrcode: { statements: '98.59%', branches: '76%', functions: '100%', lines: '98.59%' },
+  radio: { statements: '98.12%', branches: '89.04%', functions: '100%', lines: '98.12%' },
+  rate: { statements: '92.42%', branches: '82.5%', functions: '84%', lines: '92.42%' },
+  result: { statements: '94.25%', branches: '91.66%', functions: '88.88%', lines: '94.25%' },
+  search: { statements: '84.06%', branches: '76.31%', functions: '76.19%', lines: '84.06%' },
+  sideBar: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  skeleton: { statements: '93.28%', branches: '81.08%', functions: '90.9%', lines: '93.28%' },
+  slider: { statements: '87.12%', branches: '69.09%', functions: '93.1%', lines: '87.12%' },
+  stepper: { statements: '97.26%', branches: '83.72%', functions: '87.5%', lines: '97.26%' },
+  steps: { statements: '99.23%', branches: '86.2%', functions: '100%', lines: '99.23%' },
+  sticky: { statements: '84.81%', branches: '84.61%', functions: '100%', lines: '84.81%' },
+  swipeCell: { statements: '70.37%', branches: '62.63%', functions: '60.52%', lines: '70.37%' },
+  swiper: { statements: '94.17%', branches: '79.23%', functions: '91.66%', lines: '94.17%' },
+  switch: { statements: '92.8%', branches: '88.57%', functions: '87.5%', lines: '92.8%' },
+  tabBar: { statements: '86.48%', branches: '81.03%', functions: '88.88%', lines: '86.48%' },
+  table: { statements: '94.42%', branches: '68.11%', functions: '84.21%', lines: '94.42%' },
+  tabs: { statements: '97.31%', branches: '79.06%', functions: '100%', lines: '97.31%' },
+  tag: { statements: '98.33%', branches: '92.72%', functions: '93.75%', lines: '98.33%' },
+  textarea: { statements: '91.83%', branches: '79.48%', functions: '92.3%', lines: '91.83%' },
+  toast: { statements: '98.06%', branches: '88.88%', functions: '100%', lines: '98.06%' },
+  treeSelect: { statements: '100%', branches: '91.66%', functions: '95.45%', lines: '100%' },
+  upload: { statements: '95.38%', branches: '81.48%', functions: '71.42%', lines: '95.38%' },
+};
diff --git a/packages/tdesign-uniapp-chat/site/web/utils.ts b/packages/tdesign-uniapp-chat/site/web/utils.ts
new file mode 100644
index 000000000..8862ff936
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/site/web/utils.ts
@@ -0,0 +1,63 @@
+interface DocType {
+  title: string;
+  titleEn?: string;
+  type?: string;
+  children?: DocType[];
+}
+
+export function sortDocs(docs: DocType[]): DocType[] {
+  const innerDocs: DocType[] = [];
+  docs.forEach((item: DocType) => {
+    let { children } = item;
+    if (item.type === 'component') {
+      children = item.children?.sort((a: any, b: any) => {
+        const nameA = a.name.toUpperCase();
+        const nameB = b.name.toUpperCase();
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+    }
+    if (children) {
+      item.children = sortDocs(children);
+    }
+    innerDocs.push(item);
+  });
+  return innerDocs;
+}
+
+function compareVersion(version1, version2) {
+  const v1 = version1.split('.');
+  const v2 = version2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10);
+    const num2 = parseInt(v2[i], 10);
+
+    if (num1 > num2) {
+      return 1;
+    }
+    if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+function filterStableVersions(versionList) {
+  return versionList.filter(version => !version.includes('-'));
+}
+
+// 过滤小版本 + 版本号排序
+export function filterVersions(versions) {
+  return filterStableVersions(versions).sort(compareVersion);
+}
diff --git a/packages/tdesign-uniapp-chat/tsconfig.eslint.json b/packages/tdesign-uniapp-chat/tsconfig.eslint.json
new file mode 100644
index 000000000..14e544d39
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/tsconfig.eslint.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "packages/**/*.d.ts",
+    "packages/types/**/*.d.ts",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.vue",
+    ".eslintrc.js"
+  ]
+}
diff --git a/packages/tdesign-uniapp-chat/tsconfig.json b/packages/tdesign-uniapp-chat/tsconfig.json
new file mode 100644
index 000000000..b82fdd8fc
--- /dev/null
+++ b/packages/tdesign-uniapp-chat/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": true,
+    "baseUrl": ".",
+    "allowJs": true,
+    "paths": {
+      "tdesign-uniapp/*": [
+        "packages/tdesign/*"
+      ],
+      "tdesign-site/*": [
+        "packages/demo/*"
+      ],
+      "tdesign-uniapp-chat/*": [
+        "packages/tdesign-uniapp-chat/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "@dcloudio/types",
+      "node",
+      "miniprogram-api-typings"
+    ],
+    "noImplicitAny": false,
+  },
+  "include": [
+    "packages/**/*.ts",
+    "packages/**/*.d.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.vue",
+    "./*.ts",
+    "./types/*.ts"
+  ],
+  "exclude": [
+    "packages/tdesign-app/uni_modules/uni-upgrade-center-app/**/*.ts"
+  ]
+}
diff --git a/packages/tdesign-uniapp/.eslintignore b/packages/tdesign-uniapp/.eslintignore
new file mode 100644
index 000000000..865dc3fbd
--- /dev/null
+++ b/packages/tdesign-uniapp/.eslintignore
@@ -0,0 +1,17 @@
+unpackage
+node_modules/
+coverage
+static/common/*
+
+dist/
+/log/
+!.vuepress
+
+uni_modules/
+miniprogram_npm/
+packages/tdesign/npm/
+packages/tdesign-uniapp-chat/npm/
+packages/tdesign-uniapp-chat/chat-list/_example/ec-canvas/echarts.js
+
+*.html
+!.stylelintrc.js
diff --git a/packages/tdesign-uniapp/.eslintrc.js b/packages/tdesign-uniapp/.eslintrc.js
new file mode 100644
index 000000000..ff525544c
--- /dev/null
+++ b/packages/tdesign-uniapp/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  extends: ['eslint-config-light-vue3'],
+  globals: {
+    getCurrentPages: true,
+    uni: true,
+    globalThis: true,
+    qq: true,
+    weex: true,
+    plus: true,
+    getApp: true,
+  },
+  parserOptions: {
+    project: 'tsconfig.eslint.json',
+    // https://stackoverflow.com/questions/77792745/fatalerror-error-ts6046-argument-for-moduleresolution-option-must-be-nod
+    tsconfigRootDir: __dirname,
+
+    ecmaVersion: 'latest',
+    extraFileExtensions: ['.vue'],
+  },
+  rules: {
+    'vue/no-v-text-v-html-on-component': 0,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/.npmrc b/packages/tdesign-uniapp/components/.npmrc
new file mode 100644
index 000000000..214c29d13
--- /dev/null
+++ b/packages/tdesign-uniapp/components/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/packages/tdesign-uniapp/components/CHANGELOG.md b/packages/tdesign-uniapp/components/CHANGELOG.md
new file mode 100644
index 000000000..ba9c367b9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/CHANGELOG.md
@@ -0,0 +1,41 @@
+---
+title: 更新日志
+spline: explain
+toc: false
+docClass: timeline
+---
+
+
+## 🌈 0.5.5 `2025-11-17` 
+### 🚀 Features
+- `Picker`: 支持 `v-model:visible` 语法糖 @novlan1 ([#77](https://github.com/novlan1/tdesign-uniapp/pull/77))
+- `PullDownRefresh`: 修改 `dragstart/dragging/dragend` 事件参数为 `TouchEvent` @novlan1 ([#63](https://github.com/novlan1/tdesign-uniapp/pull/63))
+
+### 🐞 Bug Fixes
+- `Input`: 修复 `readonly` 时点击无效问题 @novlan1 ([#76](https://github.com/novlan1/tdesign-uniapp/pull/76))
+- `PullDownRefresh`: 修复加载中再次点击时触发的 `value` 变化问题 @novlan1 ([#63](https://github.com/novlan1/tdesign-uniapp/pull/63))
+
+
+## 🌈 0.5.4 `2025-11-14` 
+### 🐞 Bug Fixes
+- `DropdownMenu`: 修复使用自带导航栏时的高度错误 @novlan1 ([#56](https://github.com/novlan1/tdesign-uniapp/pull/56))
+
+
+
+## 🌈 0.5.3 `2025-11-12` 
+### 🐞 Bug Fixes
+- `Form`: 修复 `FormItem` 中 `padding` 错误问题 @novlan1
+### 🚧 Others
+- site: 使用 `history` 模式 @novlan1 ([#35](https://github.com/novlan1/tdesign-uniapp/pull/35))
+- ci: 使用多种 CI @novlan1 ([#42](https://github.com/novlan1/tdesign-uniapp/pull/42))
+
+
+## 🌈 0.5.2 `2025-11-10` 
+### 🐞 Bug Fixes
+- `Popup`: 修复滚动穿透问题 @novlan1 ([#33](https://github.com/novlan1/tdesign-uniapp/pull/33))
+- `Tabs`: 修复 `scroll-view` 事件参数问题 @novlan1 ([#32](https://github.com/novlan1/tdesign-uniapp/pull/32))
+
+
+## 🌈 0.5.1 `2025-11-07` 
+### 🚀 Features
+- `PullDownRefresh`: 支持 `successDuration` 属性 @novlan1 ([#29](https://github.com/novlan1/tdesign-uniapp/pull/29))
diff --git a/packages/tdesign-uniapp/components/LICENSE b/packages/tdesign-uniapp/components/LICENSE
new file mode 100644
index 000000000..bce416bd7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2021-present novlan1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/tdesign-uniapp/components/README.md b/packages/tdesign-uniapp/components/README.md
new file mode 100644
index 000000000..dc4ee99a4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/README.md
@@ -0,0 +1,144 @@
+
+<p align="center">
+  <a href="https://tdesign.tencent.com/" target="_blank">
+    <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/site/TDesign.png">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/novlan1/tdesign-uniapp/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-uniapp.svg?sanitize=true" alt="License">
+  </a>
+  <a href="https://www.npmjs.com/package/tdesign-uniapp">
+    <img src="https://img.shields.io/npm/v/tdesign-uniapp.svg?sanitize=true" alt="Version">
+  </a>
+  <a href="https://www.npmjs.com/package/tdesign-uniapp">
+    <img src="https://img.shields.io/npm/dm/tdesign-uniapp" alt="Downloads">
+  </a>
+  <a href="https://pkg.pr.new/~/novlan1/tdesign-uniapp">
+    <img src="https://pkg.pr.new/badge/novlan1/tdesign-uniapp?style=flat&color=000&logoSize=auto" alt="Downloads">
+  </a>
+  <a href="https://deepwiki.com/novlan1/tdesign-uniapp">
+    <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki">
+  </a>
+</p>
+
+[TDesign](https://github.com/Tencent/tdesign) 适配 [uniapp](https://uniapp.dcloud.net.cn/) 的组件库。
+
+## 文档
+
+[点此查看](https://uwayfly.com/tdesign-uniapp/)
+
+## 预览
+
+扫码查看 ↓
+
+<img src="https://cdn.uwayfly.com/tdesign-uniapp/tdesign-uniapp-qrcodes.png?a=3" width="600" />
+
+> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
+
+## 安装
+
+### NPM 方式
+
+```bash
+npm i tdesign-uniapp
+```
+
+### UNI_MODULES 方式
+
+已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
+
+## 使用
+
+1. 在 `main.ts` 中引入样式文件
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+2. 在文件中使用
+
+```html
+<template>
+  <t-loading />
+</template>
+
+<script lang="ts" setup>
+import TLoading from 'tdesign-uniapp/loading/loading.vue';
+</script>
+```
+
+只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+
+## 自动导入
+
+在 `pages.json` 配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)，可实现自动导入。
+
+### CLI 模式
+
+使用 CLI 模式，即使用 `node_modules` 下的 `tdesign-uniapp` 时，配置如下。
+
+```json
+{
+  "easycom": {
+    "custom": {
+      "^t-(.*)": "tdesign-uniapp/$1/$1.vue"
+    }
+  }
+}
+```
+
+### UNI_MODULES 模式
+
+使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。
+
+```json
+{
+  "easycom": {
+    "custom": {
+      "^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
+    }
+  }
+}
+```
+
+## 编辑器提示
+
+安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+
+推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/tdesign-uniapp/global.d.ts`，即可实现该效果。
+
+## 平台兼容性
+
+| 平台         | Vue2 | Vue3 | H5  | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
+| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
+| **支持情况** | ✅    | ✅    | ✅   | ✅       | ✅   | ⚠️        | ✅          | ✅        |
+
+| 平台         | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 小红书小程序 | 京东小程序 |
+| ------------ | ------------ | ---------- | ---------- | ---------- | ------------ | ---------- |
+| **支持情况** | ✅            | ✅          | ✅          | ✅          | ✅            | ✅          |
+
+## 浏览器兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |[<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" />]()<br/>Android Browser|
+| --------- | --------- | --------- | --------- | --------- |--------- |
+| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
+
+详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
+
+## 反馈
+
+有任何问题，建议通过 [Github issues](https://github.com/novlan1/tdesign-uniapp/issues) 反馈或扫码加入用户微信群。
+
+<img src="https://raw.githubusercontent.com/Tencent/tdesign/main/packages/site-components/src/images/groups/wx-group.png" width="200" />
+
+## 开源协议
+
+TDesign 遵循 [MIT 协议](https://github.com/novlan1/tdesign-uniapp/blob/develop/LICENSE)。
diff --git a/packages/tdesign-uniapp/components/action-sheet/README.en-US.md b/packages/tdesign-uniapp/components/action-sheet/README.en-US.md
new file mode 100644
index 000000000..10604d9dc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/README.en-US.md
@@ -0,0 +1,59 @@
+:: BASE_DOC ::
+
+## API
+
+### ActionSheet Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: center/left | N
+cancel-text | String | - | \- | N
+count | Number | 8 | \- | N
+description | String | - | \- | N
+items | Array | [] | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: string; suffixIcon?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts) | N
+popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts) | N
+show-cancel | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+theme | String | list | options: list/grid | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | `v-model:visible` is supported | N
+default-visible | Boolean | false | uncontrolled property | N
+
+### ActionSheet Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+close | `(context: { trigger: ActionSheetTriggerSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+selected | `(context: {  selected: ActionSheetItem \| string, index: number })` | \-
+
+### ActionSheet Slots
+
+name | Description
+-- | --
+\- | \-
+
+### ActionSheet External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-cancel | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @border-level-1-color | - 
+--td-action-sheet-border-radius | @radius-extraLarge | - 
+--td-action-sheet-cancel-color | @text-color-primary | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @text-color-primary | - 
+--td-action-sheet-description-color | @text-color-placeholder | - 
+--td-action-sheet-gap-color | @bg-color-page | - 
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/action-sheet/README.md b/packages/tdesign-uniapp/components/action-sheet/README.md
new file mode 100644
index 000000000..607b28c39
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/README.md
@@ -0,0 +1,130 @@
+---
+title: ActionSheet 动作面板
+description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+```
+
+
+### 组件类型
+
+列表型动作面板
+
+{{ list }}
+
+宫格型动作面板
+
+{{ grid }}
+
+### 组件状态
+
+宫格型动作面板
+
+{{ status }}
+
+### 组件样式
+
+列表型对齐方式
+
+{{ align }}
+
+### 支持指令调用
+
+```javascript
+import ActionSheet, { ActionSheetTheme } from 'tdesign-uniapp/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
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 水平对齐方式。可选项：center/left | N
+cancel-text | String | - | 设置取消按钮的文本 | N
+count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
+description | String | - | 动作面板描述文字 | N
+items | Array | [] | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: string; suffixIcon?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts) | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts) | N
+show-cancel | Boolean | true | 是否显示取消按钮 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 显示与隐藏。支持语法糖 `v-model:visible` | N
+default-visible | Boolean | false | 显示与隐藏。非受控属性 | N
+
+### ActionSheet Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 点击取消按钮时触发
+close | `(context: { trigger: ActionSheetTriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+selected | `(context: {  selected: ActionSheetItem \| string, index: number })` | 选择菜单项时触发
+
+### ActionSheet Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### ActionSheet External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-cancel | 取消样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-action-sheet-border-color | @border-level-1-color | - |
+| --td-action-sheet-border-radius | @radius-extraLarge | - |
+| --td-action-sheet-cancel-color | @text-color-primary | - |
+| --td-action-sheet-cancel-height | 96rpx | - |
+| --td-action-sheet-color | @text-color-primary | - |
+| --td-action-sheet-description-color | @text-color-placeholder | - |
+| --td-action-sheet-gap-color | @bg-color-page | - |
+| --td-action-sheet-list-item-disabled-color | @text-color-disabled | - |
+| --td-action-sheet-list-item-height | 112rpx | - |
+| --td-action-sheet-text-align | center | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.less b/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.less
new file mode 100644
index 000000000..54dc49c67
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    :deep(.t-button) {
+        margin-top: 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.vue b/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.vue
new file mode 100644
index 000000000..2b38d1300
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/action-sheet.vue
@@ -0,0 +1,74 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="ActionSheet"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="ActionSheet 动作面板"
+        desc="从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="列表型动作面板"
+        padding
+      >
+        <list />
+      </t-demo>
+
+      <t-demo
+        desc="宫格型动作面板"
+        padding
+      >
+        <grid />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="列表型选项状态"
+        padding
+      >
+        <status />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="列表型对齐方式"
+        padding
+      >
+        <align />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import list from './list/index.vue';
+import status from './status/index.vue';
+import grid from './grid/index.vue';
+import align from './align/index.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    list,
+    status,
+    grid,
+    align,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './action-sheet.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/align/index.vue b/packages/tdesign-uniapp/components/action-sheet/_example/align/index.vue
new file mode 100644
index 000000000..4ddaa0c3e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/align/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <TActionSheet
+      id="t-action-sheet"
+      ref="t-action-sheet"
+      :using-custom-navbar="!isMPAlipay"
+      @selected="handleSelected($event, { tagId: 't-action-sheet' })"
+    />
+
+    <TButton
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="handleAction"
+    >
+      左对齐列表型
+    </TButton>
+  </view>
+</template>
+
+<script>
+import { default as ActionSheet, ActionSheetTheme } from 'tdesign-uniapp/action-sheet/index';
+import TActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+export default {
+  components: {
+    TActionSheet,
+    TButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.List,
+        selector: '#t-action-sheet',
+        context: this,
+        align: 'left',
+        description: '动作面板描述文字',
+        items: [
+          {
+            label: '选项一',
+            icon: 'app',
+            suffixIcon: 'chevron-right',
+          },
+          {
+            label: '选项二',
+            icon: 'app',
+            suffixIcon: 'chevron-right',
+          },
+          {
+            label: '选项三',
+            icon: 'app',
+            suffixIcon: 'chevron-right',
+          },
+          {
+            label: '选项四',
+            icon: 'app',
+            suffixIcon: 'chevron-right',
+          },
+        ],
+      });
+    },
+    handleSelected(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/grid/index.vue b/packages/tdesign-uniapp/components/action-sheet/_example/grid/index.vue
new file mode 100644
index 000000000..ba1e798b4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/grid/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <view>
+    <TActionSheet
+      id="t-action-sheet"
+      ref="t-action-sheet"
+      :using-custom-navbar="!isMPAlipay"
+      @selected="handleSelected($event, { tagId: 't-action-sheet' })"
+    />
+
+    <TButton
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="handleAction"
+    >
+      常规宫格型
+    </TButton>
+
+    <TButton
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="handleMultiAction"
+    >
+      带翻页宫格型
+    </TButton>
+  </view>
+</template>
+
+<script>
+import ActionSheet, { ActionSheetTheme } from 'tdesign-uniapp/action-sheet/index';
+import TActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+
+const firstGrid = [
+  {
+    label: '微信',
+    image: 'https://tdesign.gtimg.com/mobile/demos/wechat.png',
+  },
+  {
+    label: '朋友圈',
+    image: 'https://tdesign.gtimg.com/mobile/demos/times.png',
+  },
+  {
+    label: 'QQ',
+    image: 'https://tdesign.gtimg.com/mobile/demos/qq.png',
+  },
+  {
+    label: '企业微信',
+    image: 'https://tdesign.gtimg.com/mobile/demos/wecom.png',
+  },
+  {
+    label: '收藏',
+    icon: 'star',
+  },
+  {
+    label: '刷新',
+    icon: 'refresh',
+  },
+  {
+    label: '下载',
+    icon: 'download',
+  },
+  {
+    label: '复制',
+    icon: 'queue',
+  },
+];
+export default {
+  components: {
+    TActionSheet,
+    TButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.Grid,
+        selector: '#t-action-sheet',
+        context: this,
+        items: firstGrid,
+      });
+    },
+    handleMultiAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.Grid,
+        selector: '#t-action-sheet',
+        context: this,
+        items: firstGrid.concat(new Array(8).fill({
+          label: '标题文字',
+          icon: 'image',
+        })),
+      });
+    },
+    handleSelected(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/list/index.vue b/packages/tdesign-uniapp/components/action-sheet/_example/list/index.vue
new file mode 100644
index 000000000..a1e205eb0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/list/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <view>
+    <t-action-sheet
+      id="t-action-sheet"
+      ref="t-action-sheet"
+      :using-custom-navbar="!isMPAlipay"
+      @selected="handleSelected($event, { tagId: 't-action-sheet' })"
+    />
+
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="handleAction"
+    >
+      列表型
+    </t-button>
+
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="showDescAction"
+    >
+      带描述列表型
+    </t-button>
+
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="showIconAction"
+    >
+      带图标列表型
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+import ActionSheet, { ActionSheetTheme } from 'tdesign-uniapp/action-sheet/index';
+export default {
+  components: {
+    tButton,
+    tActionSheet,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.List,
+        selector: '#t-action-sheet',
+        context: this,
+        items: [
+          {
+            label: '选项一',
+          },
+          {
+            label: '选项二',
+          },
+          {
+            label: '选项三',
+          },
+          {
+            label: '选项四',
+          },
+        ],
+      });
+    },
+    showDescAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.List,
+        selector: '#t-action-sheet',
+        context: this,
+        description: '动作面板描述文字',
+        items: [
+          {
+            label: '选项一',
+          },
+          {
+            label: '选项二',
+          },
+          {
+            label: '选项三',
+          },
+        ],
+      });
+    },
+    showIconAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.List,
+        selector: '#t-action-sheet',
+        context: this,
+        items: [
+          {
+            label: '选项一',
+            icon: 'app',
+          },
+          {
+            label: '选项二',
+            icon: 'app',
+          },
+          {
+            label: '选项三',
+            icon: 'app',
+          },
+          {
+            label: '选项四',
+            icon: 'app',
+          },
+        ],
+      });
+    },
+    handleSelected(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
diff --git a/packages/tdesign-uniapp/components/action-sheet/_example/status/index.vue b/packages/tdesign-uniapp/components/action-sheet/_example/status/index.vue
new file mode 100644
index 000000000..ba64c681b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/_example/status/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <t-action-sheet
+      id="t-action-sheet"
+      ref="t-action-sheet"
+      :using-custom-navbar="!isMPAlipay"
+      @selected="handleSelected($event, { tagId: 't-action-sheet' })"
+    />
+
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="handleAction"
+    >
+      列表型选项状态
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+import ActionSheet, { ActionSheetTheme } from 'tdesign-uniapp/action-sheet/index';
+export default {
+  components: {
+    tButton,
+    tActionSheet,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleAction() {
+      ActionSheet.show({
+        theme: ActionSheetTheme.List,
+        selector: '#t-action-sheet',
+        context: this,
+        items: [
+          {
+            label: '默认选项',
+            icon: 'app',
+          },
+          {
+            label: '自定义选项',
+            icon: 'app',
+            color: '#0052D9',
+          },
+          {
+            label: '失效选项',
+            disabled: true,
+            icon: 'app',
+          },
+          {
+            label: '警告选项',
+            color: '#e34d59',
+            icon: 'app',
+          },
+        ],
+      });
+    },
+    handleSelected(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
diff --git a/packages/tdesign-uniapp/components/action-sheet/action-sheet.less b/packages/tdesign-uniapp/components/action-sheet/action-sheet.less
new file mode 100644
index 000000000..83e9ed6e7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/action-sheet.less
@@ -0,0 +1,156 @@
+@import '../common/style/base.less';
+
+@action-sheet: ~'@{prefix}-action-sheet';
+
+@action-sheet-list-item-height: var(--td-action-sheet-list-item-height, 112rpx);
+@action-sheet-list-item-disabled-color: var(--td-action-sheet-list-item-disabled-color, @text-color-disabled);
+@action-sheet-border-color: var(--td-action-sheet-border-color, @border-level-1-color);
+@action-sheet-gap-color: var(--td-action-sheet-gap-color, @bg-color-page);
+@action-sheet-color: var(--td-action-sheet-color, @text-color-primary);
+@action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extraLarge);
+@action-sheet-description-color: var(--td-action-sheet-description-color, @text-color-placeholder);
+@action-sheet-text-align: var(--td-action-sheet-text-align, center);
+@action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 96rpx);
+@action-sheet-cancel-color: var(--td-action-sheet-cancel-color, @text-color-primary);
+.@{action-sheet} {
+  &__content {
+    color: @action-sheet-color;
+    border-top-left-radius: @action-sheet-border-radius;
+    border-top-right-radius: @action-sheet-border-radius;
+    background-color: @bg-color-container;
+    overflow: hidden;
+
+    &--grid {
+      padding-top: 16rpx;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .flex-center() {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ellipsis() {
+    word-wrap: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :deep(&__grid) {
+    padding-bottom: 16rpx;
+
+    &--swiper {
+      padding-bottom: 48rpx;
+    }
+  }
+
+  &__description {
+    color: @action-sheet-description-color;
+    line-height: 44rpx;
+    font-size: 28rpx;
+    text-align: @action-sheet-text-align;
+    padding: 24rpx 32rpx;
+
+    &:focus {
+      outline: 0;
+    }
+    .border(bottom, @action-sheet-border-color);
+
+    &--left {
+      text-align: left;
+
+      &::after {
+        left: 32rpx;
+      }
+    }
+  }
+
+  &__list {
+    &-item {
+      .flex-center();
+      .border(bottom, @action-sheet-border-color);
+      height: @action-sheet-list-item-height;
+      padding: 0 32rpx;
+
+      &:focus {
+        outline: 0;
+      }
+      &--left {
+        justify-content: start;
+
+        &::after {
+          left: 32rpx;
+        }
+      }
+
+      &--disabled {
+        color: @action-sheet-list-item-disabled-color;
+      }
+
+      &-text {
+        font-size: @font-size-m;
+        .ellipsis();
+      }
+
+      // :deep(&-icon) {
+      //   margin-right: 16rpx;
+
+      //   &--suffix {
+      //     margin-left: auto;
+      //   }
+      // }
+    }
+  }
+
+  &__swiper-wrap {
+    margin-top: 8rpx;
+    position: relative;
+  }
+
+  &__footer {
+    background-color: @bg-color-container;
+  }
+
+  &__gap-list {
+    height: 16rpx;
+    background-color: @action-sheet-gap-color;
+  }
+
+  &__gap-grid {
+    height: 1rpx;
+    background-color: @action-sheet-border-color;
+  }
+
+  &__cancel {
+    .flex-center();
+    color: @action-sheet-cancel-color;
+    height: @action-sheet-cancel-height;
+  }
+
+  &__dots {
+    position: absolute;
+    left: 50%;
+    bottom: 32rpx;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: row;
+    &-item {
+      width: 16rpx;
+      height: 16rpx;
+      background-color: #dcdcdc;
+      border-radius: 50%;
+      margin: 0 16rpx;
+      transition: all 0.4s ease-in;
+
+      &.@{prefix}-is-active {
+        background-color: #0052d9;
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/action-sheet/action-sheet.vue b/packages/tdesign-uniapp/components/action-sheet/action-sheet.vue
new file mode 100644
index 000000000..961c3decf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/action-sheet.vue
@@ -0,0 +1,334 @@
+<template>
+  <view
+    :id="classPrefix"
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+  >
+    <t-popup
+      :visible="dataVisible"
+      placement="bottom"
+      :using-custom-navbar="dataUsingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :show-overlay="dataShowOverlay"
+      :z-index="dataPopupProps?.zIndex || defaultPopUpzIndex"
+      :overlay-props="dataPopupProps?.overlayProps || defaultPopUpProps"
+      @visible-change="onPopupVisibleChange"
+    >
+      <view
+        :class="_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]]) + ' ' + tClassContent"
+        tabindex="0"
+      >
+        <view
+          v-if="dataDescription"
+          tabindex="0"
+          :class="_.cls(classPrefix + '__description', [dataAlign])"
+        >
+          {{ dataDescription }}
+        </view>
+        <block v-if="gridThemeItems.length">
+          <block v-if="gridThemeItems.length === 1">
+            <t-grid
+              align="center"
+              :t-class="classPrefix + '__grid'"
+              :column="dataCount / 2"
+              :class="classPrefix + '__single-wrap'"
+            >
+              <t-grid-item
+                v-for="(item, index) in gridThemeItems[0]"
+                :key="index"
+                :t-class="classPrefix + '__grid-item ' + classPrefix + '__square'"
+                :data-index="index"
+                :icon="{ name: item.icon, color: item.color }"
+                :text="item.label || ''"
+                :image="item.image || ''"
+                :style="'--td-grid-item-text-color: ' + item.color"
+                @click="onSelect($event, { index })"
+              />
+            </t-grid>
+          </block>
+          <block v-else-if="gridThemeItems.length > 1">
+            <view :class="classPrefix + '__swiper-wrap'">
+              <swiper
+                :style="heightStyle"
+                :autoplay="false"
+                :current="currentSwiperIndex"
+                @change="onSwiperChange"
+              >
+                <swiper-item
+                  v-for="(item, index) in gridThemeItems"
+                  :key="index"
+                >
+                  <t-grid
+                    align="center"
+                    :t-class="classPrefix + '__grid ' + classPrefix + '__grid--swiper'"
+                    :column="dataCount / 2"
+                    :custom-style="heightStyle"
+                  >
+                    <t-grid-item
+                      v-for="(item, index1) in item"
+                      :key="index1"
+                      :t-class="classPrefix + '__grid-item'"
+                      :class="classPrefix + '__square'"
+                      :data-index="index"
+                      :icon="{ name: item.icon, color: item.color }"
+                      :text="item.label || ''"
+                      :image="item.image || ''"
+                      :style="'--td-grid-item-text-color: ' + item.color"
+                      @click="onSelect($event, { index })"
+                    />
+                  </t-grid>
+                </swiper-item>
+              </swiper>
+              <view :class="classPrefix + '__nav'">
+                <view :class="classPrefix + '__dots'">
+                  <view
+                    v-for="(item, index) in gridThemeItems.length"
+                    :key="index"
+                    :class="classPrefix + '__dots-item ' + (index === currentSwiperIndex ? prefix + '-is-active' : '')"
+                  />
+                </view>
+              </view>
+            </view>
+          </block>
+        </block>
+        <view
+          v-else-if="dataItems && dataItems.length"
+          :class="classPrefix + '__list'"
+        >
+          <block
+            v-for="(item, index) in dataItems"
+            :key="index"
+          >
+            <view
+              :data-index="index"
+              :style="item.color ? 'color: ' + item.color : ''"
+              :class="_.cls(classPrefix + '__list-item', [dataAlign, ['disabled', item.disabled]])"
+              :aria-role="ariaRole || 'button'"
+              :aria-label="item.label || item"
+              tabindex="0"
+              @click="() => onSelect(item, { index })"
+            >
+              <t-icon
+                v-if="item.icon"
+                :name="item.icon"
+                :t-class="classPrefix + '__list-item-icon'"
+                size="48rpx"
+                :custom-style="iconCustomStyle"
+              />
+              <view :class="classPrefix + '__list-item-text'">
+                {{ item.label || item }}
+              </view>
+              <t-icon
+                v-if="item.suffixIcon"
+                :name="item.suffixIcon"
+                :t-class="classPrefix + '__list-item-icon ' + classPrefix + '__list-item-icon--suffix'"
+                size="48rpx"
+                style="margin-left: auto;"
+                :custom-style="suffixIconCustomStyle"
+              />
+            </view>
+          </block>
+          <!-- </block> -->
+        </view>
+      </view>
+      <slot />
+      <view
+        v-if="dataShowCancel"
+        :class="classPrefix + '__footer'"
+      >
+        <view :class="classPrefix + '__gap-' + dataTheme" />
+        <view
+          :class="classPrefix + '__cancel ' + tClassCancel"
+          :hover-class="classPrefix + '__cancel--hover'"
+          hover-stay-time="70"
+          aria-role="button"
+          @click="onCancel"
+        >
+          {{ dataCancelText || '取消' }}
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tPopup from '../popup/popup';
+import tGrid from '../grid/grid';
+import tGridItem from '../grid-item/grid-item';
+import { chunk } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { actionSheetTheme } from './show';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+import { getFunctionalMixin } from '../common/functional/mixin';
+
+
+const name = `${prefix}-action-sheet`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'visible',
+    event: 'visible-change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-cancel`,
+  ],
+  mixins: [getFunctionalMixin(props), useCustomNavbar],
+  components: {
+    tIcon,
+    tPopup,
+    tGrid,
+    tGridItem,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      gridThemeItems: [],
+      currentSwiperIndex: 0,
+      defaultPopUpProps: {},
+      defaultPopUpzIndex: 11500,
+      _,
+
+      heightStyle: 'height: 228px;',
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      return 'margin-right: 8px;';
+    },
+    suffixIconCustomStyle() {
+      return 'margin-right: 8px;margin-left: auto;';
+    },
+  },
+  watch: {
+    dataVisible: {
+      handler(e) {
+        if (e) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+    dataItems: {
+      handler() {
+        if (this.dataVisible) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    init() {
+      this.memoInitialData();
+      this.splitGridThemeActions();
+    },
+
+    memoInitialData() {
+      this.initialData = {
+      };
+    },
+
+    splitGridThemeActions() {
+      if (this.dataTheme !== actionSheetTheme.Grid) return;
+      this.gridThemeItems = chunk(this.dataItems, this.dataCount);
+    },
+
+    /** 指令调用显示 */
+    show(options) {
+      const defaultOptions = [
+        'align',
+        'cancelText',
+        'count',
+        'description',
+        'items',
+        'popupProps',
+        'showCancel',
+        'showOverlay',
+        'theme',
+        'usingCustomNavbar',
+      ].reduce((acc, key) => ({
+        ...acc,
+        [key]: props[key].default,
+      }));
+
+      this.setData({
+        ...defaultOptions,
+        ...options,
+        visible: true,
+      });
+      this.splitGridThemeActions();
+      this.autoClose = true;
+      this._trigger('visible-change', { visible: true });
+    },
+
+    /** 指令调用隐藏 */
+    close() {
+      this.$emit('close', { trigger: 'command' });
+      this._trigger('visible-change', { visible: false });
+    },
+
+    /** 默认点击遮罩关闭 */
+    onPopupVisibleChange(detail) {
+      if (!detail.visible) {
+        this.$emit('close', { trigger: 'overlay' });
+        this._trigger('visible-change', { visible: false });
+      }
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.autoClose = false;
+      }
+    },
+
+    onSwiperChange(e) {
+      const { current } = e.detail;
+      this.currentSwiperIndex = current;
+    },
+
+    onSelect(event, { index }) {
+      const { currentSwiperIndex, dataItems, gridThemeItems, dataCount, dataTheme } = this;
+      const isSwiperMode = dataTheme === actionSheetTheme.Grid;
+      const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : dataItems[index];
+      const realIndex = isSwiperMode ? index + currentSwiperIndex * dataCount : index;
+
+      if (item) {
+        this.$emit('selected', { selected: item, index: realIndex });
+
+        if (!item.disabled) {
+          this.$emit('close', { trigger: 'select' });
+          this._trigger('visible-change', { visible: false });
+        }
+      }
+    },
+
+    onCancel() {
+      this.$emit('cancel');
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.autoClose = false;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './action-sheet.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/action-sheet/computed.js b/packages/tdesign-uniapp/components/action-sheet/computed.js
new file mode 100644
index 000000000..129bfc18e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/computed.js
@@ -0,0 +1,15 @@
+export const getListThemeItemClass = function (props) {
+  const { classPrefix } = props;
+  const { item } = props;
+  const { prefix } = props;
+  const classList = [`${classPrefix}__list-item`];
+  if (item.disabled) {
+    classList.push(`${prefix}-is-disabled`);
+  }
+  return classList.join(' ');
+};
+
+export const isImage = function (name) {
+  return name.indexOf('/') !== -1;
+};
+
diff --git a/packages/tdesign-uniapp/components/action-sheet/index.ts b/packages/tdesign-uniapp/components/action-sheet/index.ts
new file mode 100644
index 000000000..c58357edf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/index.ts
@@ -0,0 +1,13 @@
+import { show, close, type ActionSheetItem, ActionSheetTheme, type ActionSheetShowOption } from './show';
+
+export { type ActionSheetItem, ActionSheetTheme, type ActionSheetShowOption };
+
+export default {
+  show(options: ActionSheetShowOption) {
+    return show(options);
+  },
+
+  close(options: ActionSheetShowOption) {
+    return close(options);
+  },
+};
diff --git a/packages/tdesign-uniapp/components/action-sheet/props.ts b/packages/tdesign-uniapp/components/action-sheet/props.ts
new file mode 100644
index 000000000..7cba6413b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/props.ts
@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdActionSheetProps } from './type';
+export default {
+  /** 水平对齐方式 */
+  align: {
+    type: String,
+    default: 'center' as TdActionSheetProps['align'],
+    validator(val: TdActionSheetProps['align']): boolean {
+      if (!val) return true;
+      return ['center', 'left'].includes(val);
+    },
+  },
+  /** 设置取消按钮的文本 */
+  cancelText: {
+    type: String,
+    default: '',
+  },
+  /** 设置每页展示菜单的数量，仅当 type=grid 时有效 */
+  count: {
+    type: Number,
+    default: 8,
+  },
+  /** 动作面板描述文字 */
+  description: {
+    type: String,
+    default: '',
+  },
+  /** 菜单项 */
+  items: {
+    type: Array,
+    default: (): TdActionSheetProps['items'] => [],
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否显示取消按钮 */
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 展示类型，列表和表格形式展示 */
+  theme: {
+    type: String,
+    default: 'list' as TdActionSheetProps['theme'],
+    validator(val: TdActionSheetProps['theme']): boolean {
+      if (!val) return true;
+      return ['list', 'grid'].includes(val);
+    },
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 显示与隐藏 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 显示与隐藏，非受控属性 */
+  defaultVisible: Boolean,
+  /** 点击取消按钮时触发 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择菜单项时触发 */
+  onSelected: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/action-sheet/show.ts b/packages/tdesign-uniapp/components/action-sheet/show.ts
new file mode 100644
index 000000000..b39d23369
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/show.ts
@@ -0,0 +1,52 @@
+import { getInstance } from '../common/utils';
+import { type ActionSheetItem } from './type';
+
+export { type ActionSheetItem };
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+export enum ActionSheetTheme {
+  List = 'list',
+  Grid = 'grid',
+}
+
+export const actionSheetTheme = {
+  List: ActionSheetTheme.List,
+  Grid: ActionSheetTheme.Grid,
+} as const;
+
+interface ActionSheetProps {
+  align: 'center' | 'left';
+  cancelText?: string;
+  count?: number;
+  description: string;
+  items: Array<string | ActionSheetItem>;
+  showCancel?: boolean;
+  theme?: ActionSheetTheme;
+  visible: boolean;
+  defaultVisible?: boolean;
+}
+export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
+  context?: Context;
+  selector?: string;
+}
+
+export const show = function (options: ActionSheetShowOption) {
+  const { context, selector = '#t-action-sheet', ...otherOptions } = { ...options };
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.show({
+      ...otherOptions,
+    });
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export const close = function (options: ActionSheetShowOption) {
+  const { context, selector = '#t-action-sheet' } = { ...options };
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.close();
+  }
+};
diff --git a/packages/tdesign-uniapp/components/action-sheet/type.ts b/packages/tdesign-uniapp/components/action-sheet/type.ts
new file mode 100644
index 000000000..9614e239b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/action-sheet/type.ts
@@ -0,0 +1,92 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+
+export interface TdActionSheetProps {
+  /**
+   * 水平对齐方式
+   * @default center
+   */
+  align?: 'center' | 'left';
+  /**
+   * 设置取消按钮的文本
+   * @default ''
+   */
+  cancelText?: string;
+  /**
+   * 设置每页展示菜单的数量，仅当 type=grid 时有效
+   * @default 8
+   */
+  count?: number;
+  /**
+   * 动作面板描述文字
+   * @default ''
+   */
+  description?: string;
+  /**
+   * 菜单项
+   * @default []
+   */
+  items?: Array<string | ActionSheetItem>;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancel?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 展示类型，列表和表格形式展示
+   * @default list
+   */
+  theme?: 'list' | 'grid';
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 显示与隐藏
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 显示与隐藏，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 点击取消按钮时触发
+   */
+  onCancel?: () => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: ActionSheetTriggerSource }) => void;
+  /**
+   * 选择菜单项时触发
+   */
+  onSelected?: (context: { selected: ActionSheetItem | string; index: number }) => void;
+}
+
+export interface ActionSheetItem {
+  label: string;
+  color?: string;
+  disabled?: boolean;
+  icon?: string;
+  suffixIcon?: string;
+}
+
+export type ActionSheetTriggerSource = 'overlay' | 'command' | 'select';
diff --git a/packages/tdesign-uniapp/components/avatar-group/avatar-group.less b/packages/tdesign-uniapp/components/avatar-group/avatar-group.less
new file mode 100644
index 000000000..40834d490
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar-group/avatar-group.less
@@ -0,0 +1,66 @@
+@import '../common/style/base.less';
+
+//组合头像偏移量
+@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -16rpx);
+@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -16rpx);
+@avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -16rpx);
+@avatar-group-line-spacing: var(--td-avatar-group-line-spacing, 4rpx);
+
+@avatar-group-init-zIndex: 50;
+
+// .generate-z-index(@n, @i: 1) when (@i =< @n) {
+//   & :deep(.@{prefix}-avatar__wrapper):nth-child(@{i}) {
+//     z-index: calc(var(--td-avatar-group-init-z-index, @avatar-group-init-zIndex) - @i);
+//   }
+
+//   .generate-z-index(@n, (@i + 1));
+// }
+
+.@{prefix}-avatar-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  &-offset-left,
+  &-offset-right {
+    // & :deep(.@{prefix}-avatar__wrapper) {
+    //   padding: @avatar-group-line-spacing 0;
+    // }
+
+    &-small {
+      --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距
+    }
+
+    &-medium {
+      --td-avatar-margin-left: @avatar-group-offset-medium; // ‘medium’尺寸组合头像偏移间距
+    }
+
+    &-large {
+      --td-avatar-margin-left: @avatar-group-offset-large; // ‘large’尺寸组合头像偏移间距
+    }
+  }
+
+  // &-offset-left {
+  //   .generate-z-index(@avatar-group-init-zIndex);
+  // }
+
+  &__collapse--slot,
+  &__collapse--default {
+    z-index: 0;
+    font-weight: 600;
+  }
+
+  &__collapse--slot {
+    float: left;
+  }
+
+  &__collapse--slot:not(:empty) + &__collapse--default {
+    display: none;
+    float: left;
+  }
+
+  &__collapse--slot:empty + &__collapse--default {
+    display: block;
+    float: left;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/avatar-group/avatar-group.vue b/packages/tdesign-uniapp/components/avatar-group/avatar-group.vue
new file mode 100644
index 000000000..c087bf531
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar-group/avatar-group.vue
@@ -0,0 +1,121 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="className"
+  >
+    <slot />
+    <view :class="classPrefix + '__collapse--slot'">
+      <slot name="collapse-avatar" />
+    </view>
+    <view
+      v-if="max && max < length"
+      :class="classPrefix + '__collapse--default'"
+      @click="onCollapsedItemClick"
+    >
+      <t-avatar
+        :t-class-image="prefix + '-avatar--border ' + prefix + '-avatar--border-' + size + ' ' + tClassImage"
+        :t-class-content="tClassContent"
+        :size="size"
+        :shape="shape"
+        :icon="collapseAvatar ? '' : 'user-add'"
+        aria-role="none"
+      >
+        {{ collapseAvatar }}
+      </t-avatar>
+    </view>
+  </view>
+</template>
+<script>
+import tAvatar from '../avatar/avatar';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import avatarGroupProps from './props';
+
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-avatar-group`;
+const AVATAR_GROUP_INIT_Z_INDEX = 50;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-image`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.Avatar)],
+  components: {
+    tAvatar,
+  },
+  props: {
+    ...avatarGroupProps,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      hasChild: true,
+      length: 0,
+      className: '',
+      _,
+    };
+  },
+  watch: {
+    cascading: 'setClass',
+    size: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+    this.length = this.children?.length || 0;
+    if (this.length) {
+      this.handleMax();
+    }
+  },
+  methods: {
+    setClass() {
+      const { cascading, size } = this;
+      const direction = cascading.split('-')[0];
+      const classList = [
+        name,
+        this.tClass,
+        `${name}-offset-${direction}`,
+        `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
+      ];
+
+      this.className = classList.join(' ');
+    },
+
+    handleMax() {
+      const { max, cascading } = this;
+      const len = this.children.length;
+      if (!max || max > len) return;
+
+      const restAvatars = this.children.splice(max, len - max);
+
+      const isLeft = cascading === 'left-up';
+      this.children.forEach((child, index) => {
+        child.setStyle({
+          zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
+          padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
+        });
+      });
+
+      restAvatars.forEach((child) => {
+        child.hide();
+      });
+    },
+    onCollapsedItemClick(e) {
+      this.$emit('collapsed-item-click', e);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './avatar-group.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar-group/props.ts b/packages/tdesign-uniapp/components/avatar-group/props.ts
new file mode 100644
index 000000000..d20b734ee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar-group/props.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAvatarGroupProps } from './type';
+export default {
+  /** 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上 */
+  cascading: {
+    type: String,
+    default: 'left-up' as TdAvatarGroupProps['cascading'],
+    validator(val: TdAvatarGroupProps['cascading']): boolean {
+      if (!val) return true;
+      return ['left-up', 'right-up'].includes(val);
+    },
+  },
+  /** 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` */
+  collapseAvatar: {
+    type: String,
+  },
+  /** 能够同时显示的最多头像数量 */
+  max: {
+    type: Number,
+  },
+  /** 形状。优先级低于 Avatar.shape */
+  shape: {
+    type: String,
+    validator(val: TdAvatarGroupProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
+    },
+  },
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size */
+  size: {
+    type: String,
+    default: '',
+  },
+  /** 点击头像折叠元素触发 */
+  onCollapsedItemClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/avatar-group/type.ts b/packages/tdesign-uniapp/components/avatar-group/type.ts
new file mode 100644
index 000000000..8e918483f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar-group/type.ts
@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { ShapeEnum } from '../common/common';
+
+export interface TdAvatarGroupProps {
+  /**
+   * 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上
+   * @default 'left-up'
+   */
+  cascading?: CascadingValue;
+  /**
+   * 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`
+   */
+  collapseAvatar?: string;
+  /**
+   * 能够同时显示的最多头像数量
+   */
+  max?: number;
+  /**
+   * 形状。优先级低于 Avatar.shape
+   */
+  shape?: ShapeEnum;
+  /**
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
+   * @default ''
+   */
+  size?: string;
+  /**
+   * 点击头像折叠元素触发
+   */
+  onCollapsedItemClick?: (e: MouseEvent) => void;
+}
+
+export type CascadingValue = 'left-up' | 'right-up';
diff --git a/packages/tdesign-uniapp/components/avatar/README.en-US.md b/packages/tdesign-uniapp/components/avatar/README.en-US.md
new file mode 100644
index 000000000..1df2d3571
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/README.en-US.md
@@ -0,0 +1,102 @@
+:: BASE_DOC ::
+
+## API
+
+### Avatar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+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/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar/type.ts) | N
+bordered | Boolean | false | \- | 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 | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar/type.ts) | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+size | String | - | size | N
+
+### Avatar Events
+
+name | params | description
+-- | -- | --
+error | `(e: Event)` | trigger on image load failed
+
+### Avatar Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Avatar External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-alt | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-image | \-
+
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar-group/type.ts) | N
+collapse-avatar | String | - | \- | N
+max | Number | - | \- | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+size | String | - | size | N
+
+### AvatarGroup Events
+
+name | params | description
+-- | -- | --
+collapsed-item-click | `(e: MouseEvent)` | \-
+
+### AvatarGroup Slots
+
+name | Description
+-- | --
+\- | \-
+collapse-avatar | \-
+
+### AvatarGroup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-image | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | - 
+--td-avatar-group-line-spacing | 4rpx | - 
+--td-avatar-group-margin-left-large | -16rpx | - 
+--td-avatar-group-margin-left-medium | -16rpx | - 
+--td-avatar-group-margin-left-small | -16rpx | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 6rpx | - 
+--td-avatar-border-width-medium | 4rpx | - 
+--td-avatar-border-width-small | 2rpx | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 64rpx | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--td-avatar-text-large-font-size | @font-size-xl | - 
+--td-avatar-text-medium-font-size | @font-size-m | - 
+--td-avatar-text-small-font-size | @font-size-base | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/avatar/README.md b/packages/tdesign-uniapp/components/avatar/README.md
new file mode 100644
index 000000000..bb109fcd4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/README.md
@@ -0,0 +1,152 @@
+---
+title: Avatar 头像
+description: 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+import TAvatarGroup from 'tdesign-uniapp/avatar-group/avatar-group.vue';
+```
+
+### 头像类型
+
+图片头像
+
+{{ image-avatar }}
+
+字符头像
+
+{{ character-avatar }}
+
+图标头像
+
+{{ icon-avatar }}
+
+徽标头像
+
+{{ badge-avatar }}
+
+
+### 组合头像
+
+纯展示
+
+{{ exhibition }}
+
+带操作
+
+{{ action }}
+
+### 头像尺寸
+
+头像 large/medium/small 尺寸
+
+{{ size }}
+
+## API
+
+### Avatar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+badge-props | Object | {} | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar/type.ts) | N
+bordered | Boolean | false | 已废弃。是否显示外边框 | N
+hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片地址 | N
+image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar/type.ts) | N
+shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N
+
+### Avatar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | `(e: Event)` | 图片加载失败时触发
+
+### Avatar Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Avatar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-alt | 替代文本样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-image | 图片样式类
+
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/avatar-group/type.ts) | N
+collapse-avatar | String | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+### AvatarGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+collapsed-item-click | `(e: MouseEvent)` | 点击头像折叠元素触发
+
+### AvatarGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+collapse-avatar | 自定义 `collapse-avatar` 显示内容
+
+### AvatarGroup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-image | 图片样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | - |
+| --td-avatar-group-line-spacing | 4rpx | - |
+| --td-avatar-group-margin-left-large | -16rpx | - |
+| --td-avatar-group-margin-left-medium | -16rpx | - |
+| --td-avatar-group-margin-left-small | -16rpx | - |
+| --td-avatar-bg-color | @brand-color-light-active | - |
+| --td-avatar-border-color | #fff | - |
+| --td-avatar-border-width-large | 6rpx | - |
+| --td-avatar-border-width-medium | 4rpx | - |
+| --td-avatar-border-width-small | 2rpx | - |
+| --td-avatar-circle-border-radius | @radius-circle | - |
+| --td-avatar-content-color | @brand-color | - |
+| --td-avatar-icon-large-font-size | 64rpx | - |
+| --td-avatar-icon-medium-font-size | 48rpx | - |
+| --td-avatar-icon-small-font-size | 40rpx | - |
+| --td-avatar-large-width | 128rpx | - |
+| --td-avatar-margin-left | 0 | - |
+| --td-avatar-medium-width | 96rpx | - |
+| --td-avatar-round-border-radius | @radius-default | - |
+| --td-avatar-small-width | 80rpx | - |
+| --td-avatar-text-large-font-size | @font-size-xl | - |
+| --td-avatar-text-medium-font-size | @font-size-m | - |
+| --td-avatar-text-small-font-size | @font-size-base | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/avatar/_example/action/index.vue b/packages/tdesign-uniapp/components/avatar/_example/action/index.vue
new file mode 100644
index 000000000..5d4a211c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/action/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <view>
+    <t-avatar-group
+      cascading="right-up"
+      :max="5"
+      @collapsed-item-click="onClickCollapsedAvatar"
+    >
+      <t-avatar
+        v-for="(pic, index) in pics"
+        :key="index"
+        :image="pic"
+      />
+    </t-avatar-group>
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+import tAvatarGroup from 'tdesign-uniapp/avatar-group/avatar-group.vue';
+export default {
+  components: {
+    tAvatar,
+    tAvatarGroup,
+  },
+  data() {
+    return {
+      pics: [
+        'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+      ],
+      pic: '',
+    };
+  },
+  created() {},
+  methods: {
+    onAddTap() {
+      uni.showToast({
+        title: '您按下了添加',
+        icon: 'none',
+        duration: 1000,
+      });
+    },
+    onClickCollapsedAvatar() {
+      console.log('click collapsed avatar');
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/avatar.less b/packages/tdesign-uniapp/components/avatar/_example/avatar.less
new file mode 100644
index 000000000..2feca6aee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/avatar.less
@@ -0,0 +1,13 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.demo-avatar {
+    margin: 0 32rpx;
+}
+.desc {
+    margin: 10rpx 32rpx;
+    color: #999;
+    font-size: 26rpx;
+    line-height: 36rpx;
+}
diff --git a/packages/tdesign-uniapp/components/avatar/_example/avatar.vue b/packages/tdesign-uniapp/components/avatar/_example/avatar.vue
new file mode 100644
index 000000000..78034b132
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/avatar.vue
@@ -0,0 +1,100 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Avatar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Avatar 头像"
+          desc="用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="图片头像"
+          padding
+        >
+          <imageAvatar />
+        </t-demo>
+        <t-demo
+          desc="字符头像"
+          padding
+        >
+          <characterAvatar />
+        </t-demo>
+        <t-demo
+          desc="图标头像"
+          padding
+        >
+          <iconAvatar />
+        </t-demo>
+
+        <t-demo
+          desc="带徽标头像"
+          padding
+        >
+          <badgeAvatar />
+        </t-demo>
+
+        <t-demo
+          title="02 特殊类型"
+          desc="纯展示的头像组"
+          padding
+        >
+          <exhibition />
+        </t-demo>
+        <t-demo
+          desc="带操作的头像组"
+          padding
+        >
+          <action />
+        </t-demo>
+
+        <t-demo
+          title="03 组件尺寸"
+          desc="组件尺寸"
+          padding
+        >
+          <size />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import imageAvatar from './image-avatar/index.vue';
+import characterAvatar from './character-avatar/index.vue';
+import iconAvatar from './icon-avatar/index.vue';
+import badgeAvatar from './badge-avatar/index.vue';
+import size from './size/index.vue';
+import exhibition from './exhibition/index.vue';
+import action from './action/index.vue';
+export default {
+  components: {
+    imageAvatar,
+    characterAvatar,
+    iconAvatar,
+    badgeAvatar,
+    size,
+    exhibition,
+    action,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './avatar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/badge-avatar/index.vue b/packages/tdesign-uniapp/components/avatar/_example/badge-avatar/index.vue
new file mode 100644
index 000000000..96269d0fc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/badge-avatar/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <t-avatar
+      t-class="avatar-example"
+      :image="image"
+      :badge-props="{dot: true, offset: [0, 4] }"
+    />
+    <t-avatar
+      t-class="avatar-example"
+      t-class-content="external-class-content"
+      :badge-props="{count: 8, offset: [-6, 6] }"
+    >
+      A
+    </t-avatar>
+    <t-avatar
+      t-class="avatar-example"
+      icon="user"
+      :badge-props="{count: 12, offset: [-6, 6] }"
+    />
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tAvatar,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.avatar-example:not(:last-child) {
+  margin-right: 64rpx;
+}
+
+:deep(.external-class-content) {
+  color: #fff;
+  background-color: var(--td-brand-color, #0052d9);
+  font-weight: 400;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/character-avatar/index.vue b/packages/tdesign-uniapp/components/avatar/_example/character-avatar/index.vue
new file mode 100644
index 000000000..43eb6f225
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/character-avatar/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-avatar
+      t-class="avatar-example"
+      t-class-content="external-class-content"
+      aria-label="字符头像"
+    >
+      A
+    </t-avatar>
+    <t-avatar
+      t-class="avatar-example"
+      t-class-content="external-class-content"
+      shape="round"
+    >
+      A
+    </t-avatar>
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tAvatar,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.avatar-example:not(:last-child) {
+  margin-right: 64rpx;
+}
+
+:deep(.external-class-content) {
+  color: #fff;
+  background-color: var(--td-brand-color, #0052d9);
+  font-weight: 400;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/exhibition/index.vue b/packages/tdesign-uniapp/components/avatar/_example/exhibition/index.vue
new file mode 100644
index 000000000..361ead93c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/exhibition/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-avatar-group
+      :max="5"
+      collapse-avatar="+5"
+    >
+      <t-avatar
+        v-for="(pic, index) in pics"
+        :key="index"
+        :image="pic"
+      />
+    </t-avatar-group>
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+import tAvatarGroup from 'tdesign-uniapp/avatar-group/avatar-group.vue';
+export default {
+  components: {
+    tAvatar,
+    tAvatarGroup,
+  },
+  data() {
+    return {
+      pics: [
+        'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+        'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+      ],
+      pic: '',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/icon-avatar/index.vue b/packages/tdesign-uniapp/components/avatar/_example/icon-avatar/index.vue
new file mode 100644
index 000000000..1544fd9c6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/icon-avatar/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-avatar
+      t-class="avatar-example"
+      icon="user"
+    />
+    <t-avatar
+      t-class="avatar-example"
+      shape="round"
+      icon="user"
+    />
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  components: {
+    tAvatar,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.avatar-example:not(:last-child) {
+    margin-right: 64rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/image-avatar/index.vue b/packages/tdesign-uniapp/components/avatar/_example/image-avatar/index.vue
new file mode 100644
index 000000000..5cfc158fa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/image-avatar/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <t-avatar
+      t-class="avatar-example"
+      :image="image"
+    />
+    <t-avatar
+      t-class="avatar-example"
+      shape="round"
+      :image="image"
+    />
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tAvatar,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+:deep(.avatar-example) {
+    margin-right: 64rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/size/index.vue b/packages/tdesign-uniapp/components/avatar/_example/size/index.vue
new file mode 100644
index 000000000..1be2c8aa1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/size/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <view>
+    <view class="avatar-example">
+      <t-avatar
+        t-class="avatar-example--large"
+        :image="image"
+        size="large"
+      />
+      <t-avatar
+        t-class="avatar-example--large"
+        t-class-content="external-class-content"
+        size="large"
+      >
+        A
+      </t-avatar>
+      <t-avatar
+        t-class="avatar-example--large"
+        icon="user"
+        size="large"
+      />
+    </view>
+
+    <view class="avatar-example">
+      <t-avatar
+        t-class="avatar-example--medium"
+        :image="image"
+      />
+      <t-avatar
+        t-class="avatar-example--medium"
+        t-class-content="external-class-content"
+        size="medium"
+      >
+        A
+      </t-avatar>
+      <t-avatar
+        t-class="avatar-example--medium"
+        icon="user"
+        size="medium"
+      />
+    </view>
+
+    <view class="avatar-example">
+      <t-avatar
+        t-class="avatar-example--small"
+        :image="image"
+        size="small"
+      />
+      <t-avatar
+        t-class="avatar-example--small"
+        t-class-content="external-class-content"
+        size="small"
+      >
+        A
+      </t-avatar>
+      <t-avatar
+        t-class="avatar-example--small"
+        icon="user"
+        size="small"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tAvatar,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.avatar-example {
+    display: flex;
+    margin-bottom: 32rpx;
+}
+
+:deep(.external-class-content) {
+    color: #fff;
+    background-color: var(--td-brand-color, #0052d9);
+    font-weight: 400;
+}
+
+.avatar-example--small:not(:last-child) {
+    margin-right: 112rpx;
+}
+
+.avatar-example--medium:not(:last-child) {
+    margin-right: 96rpx;
+}
+
+.avatar-example--large:not(:last-child) {
+    margin-right: 64rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.less b/packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.vue b/packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.vue
new file mode 100644
index 000000000..89084a6ac
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/_example/skyline/avatar.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <demo-avatar />
+  </view>
+</template>
+
+<script lang="ts">
+
+import demoAvatar from '../avatar.vue';
+export default {
+  components: {
+    demoAvatar,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './avatar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/avatar.less b/packages/tdesign-uniapp/components/avatar/avatar.less
new file mode 100644
index 000000000..069a5819f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/avatar.less
@@ -0,0 +1,116 @@
+@import '../common/style/base.less';
+
+@avatar-bg-color: var(--td-avatar-bg-color, @brand-color-light-active);
+@avatar-content-color: var(--td-avatar-content-color, @brand-color);
+@avatar-small-width: var(--td-avatar-small-width, 80rpx);
+@avatar-medium-width: var(--td-avatar-medium-width, 96rpx);
+@avatar-large-width: var(--td-avatar-large-width, 128rpx);
+
+@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-base);
+@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-m);
+@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, @font-size-xl);
+
+@avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 40rpx);
+@avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
+@avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 64rpx);
+
+@avatar-border-width-small: var(--td-avatar-border-width-small, 2rpx);
+@avatar-border-width-medium: var(--td-avatar-border-width-medium, 4rpx);
+@avatar-border-width-large: var(--td-avatar-border-width-large, 6rpx);
+@avatar-border-color: var(--td-avatar-border-color, #fff);
+@avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle);
+@avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default);
+
+@avatar-margin-left: var(--td-avatar-margin-left, 0);
+
+.@{prefix}-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: @avatar-bg-color;
+  color: @avatar-content-color;
+
+  &__wrapper {
+    display: inline-flex;
+    position: relative;
+    vertical-align: top;
+    margin-left: @avatar-margin-left;
+  }
+
+  &--large {
+    width: @avatar-large-width;
+    height: @avatar-large-width;
+    font-size: @avatar-text-large-font-size;
+
+    // :deep(.@{prefix}-avatar__icon) {
+    //   font-size: @avatar-icon-large-font-size;
+    // }
+  }
+
+  &--medium {
+    width: @avatar-medium-width;
+    height: @avatar-medium-width;
+    font-size: @avatar-text-medium-font-size;
+
+    // :deep(.@{prefix}-avatar__icon) {
+    //   font-size: @avatar-icon-medium-font-size;
+    // }
+  }
+
+  &--small {
+    width: @avatar-small-width;
+    height: @avatar-small-width;
+    font-size: @avatar-text-small-font-size;
+
+    // :deep(.@{prefix}-avatar__icon) {
+    //   font-size: @avatar-icon-small-font-size;
+    // }
+  }
+
+  // :deep(.@{prefix}-image),
+  // :deep(&__image) {
+  //   width: 100%;
+  //   height: 100%;
+  // }
+
+  &--circle {
+    border-radius: @avatar-circle-border-radius;
+    overflow: hidden;
+  }
+
+  &--round {
+    border-radius: @avatar-round-border-radius;
+    overflow: hidden;
+  }
+
+  &__text,
+  &__icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:empty {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  // 头像边框
+  &--border {
+    border-color: @avatar-border-color;
+    border-style: solid;
+    &-small {
+      border-width: @avatar-border-width-small;
+    }
+
+    &-medium {
+      border-width: @avatar-border-width-medium;
+    }
+
+    &-large {
+      border-width: @avatar-border-width-large;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/avatar/avatar.vue b/packages/tdesign-uniapp/components/avatar/avatar.vue
new file mode 100644
index 000000000..a1be9863a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/avatar.vue
@@ -0,0 +1,200 @@
+<template>
+  <view
+    :class="[
+      classPrefix + '__wrapper',
+      tClass
+    ]"
+    :style="_._style([utils.getStyles(isShow), customStyle, innerStyle])"
+  >
+    <t-badge
+      v-if="badgeProps"
+      :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="[
+          utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
+          tClassImage
+        ]"
+        :style="utils.getSize(dataSize, systemInfo)"
+        :aria-label="ariaLabel || alt || '头像'"
+        :aria-role="ariaRole || 'img'"
+        :aria-hidden="ariaHidden"
+      >
+        <t-image
+          v-if="image"
+          :t-class="prefix + '-image ' + classPrefix + '__image'"
+          :t-class-load="tClassAlt"
+          :custom-style="imageCustomStyle"
+          style="width: 100%;height: 100%;"
+          :src="image"
+          :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+          :lazy="(imageProps && imageProps.lazy) || false"
+          :loading="(imageProps && imageProps.loading) || 'default'"
+          :shape="(imageProps && imageProps.shape) || 'round'"
+          :webp="(imageProps && imageProps.webp) || false"
+          :error="alt || 'default'"
+          @error="onLoadError"
+        />
+        <block
+          v-else-if="iconName || _.isNoEmptyObj(iconData)"
+          name="icon"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ') + tClassIcon"
+            :prefix="iconData.prefix"
+            :name="iconName || iconData.name"
+            :size="iconData.size"
+            :color="iconData.color"
+            :aria-hidden="!!iconData.ariaHidden"
+            :aria-label="iconData.ariaLabel"
+            :aria-role="iconData.ariaRole"
+            :custom-style="iconCustomStyle"
+            @click="iconData.click || ''"
+          />
+        </block>
+        <view
+          v-else
+          :class="[
+            classPrefix + '__text ',
+            tClassContent
+          ]"
+        >
+          <slot />
+        </view>
+      </view>
+    </t-badge>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tBadge from '../badge/badge';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import avatarProps from './props';
+import { setIcon, systemInfo } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { utils } from './computed.js';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-avatar`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-image`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-alt`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+  components: {
+    tIcon,
+    tBadge,
+    tImage,
+  },
+  props: {
+    ...avatarProps,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      isShow: true,
+      zIndex: 0,
+      systemInfo,
+      utils,
+      _,
+
+      iconName: '',
+      iconData: {},
+
+      dataShape: this.shape,
+      dataSize: this.size,
+      dataBordered: this.bordered,
+      innerStyle: '',
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      const fontSize = {
+        small: 'var(--td-avatar-icon-small-font-size, 20px)',
+        medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
+        large: 'var(--td-avatar-icon-large-font-size, 32px)',
+      };
+      if (!fontSize[this.dataSize]) return '';
+      return _._style([
+        {
+          fontSize: fontSize[this.dataSize],
+        },
+        this.iconData.style || '',
+      ]);
+    },
+    imageCustomStyle() {
+      return _._style([
+        {
+          width: '100%',
+          height: '100%',
+        },
+        this.imageProps?.style || '',
+      ]);
+    },
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
+      this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
+      this.dataBordered = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    onLoadError(e) {
+      if (this.hideOnLoadFailed) {
+        this.isShow = false;
+      }
+      this.$emit('error', e && e.e);
+    },
+    setStyle(val = '') {
+      this.innerStyle = val;
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './avatar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/avatar/computed.js b/packages/tdesign-uniapp/components/avatar/computed.js
new file mode 100644
index 000000000..d086d0c34
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/computed.js
@@ -0,0 +1,32 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+export const utils = {
+  getClass(classPrefix, size, shape, bordered) {
+    const hasPx = (size || '').indexOf('px') > -1;
+    const borderSize = hasPx ? 'medium' : size;
+    const classNames = [
+      classPrefix,
+      classPrefix + (shape === 'round' ? '--round' : '--circle'),
+      bordered ? `${classPrefix}--border` + ` ${classPrefix}--border-${borderSize}` : '',
+      hasPx ? '' : `${classPrefix}--${size}`,
+    ];
+    return classNames.join(' ');
+  },
+
+  getSize(size = 'medium', systemInfo) {
+    const res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
+
+    if (res && res.length >= 3) {
+      let px = res[1];
+      if (res[2] === 'rpx') {
+        px = Math.floor((systemInfo.windowWidth * res[1]) / 750);
+      }
+
+      return `width:${size};height:${size};font-size:${(px / 8) * 3 + 2}px`;
+    }
+  },
+
+  getStyles(isShow) {
+    return isShow ? '' : 'display: none;';
+  },
+};
diff --git a/packages/tdesign-uniapp/components/avatar/props.ts b/packages/tdesign-uniapp/components/avatar/props.ts
new file mode 100644
index 000000000..0d4e6e0c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/props.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAvatarProps } from './type';
+export default {
+  /** 头像替换文本，仅当图片加载失败时有效 */
+  alt: {
+    type: String,
+    default: '',
+  },
+  /** 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 已废弃。是否显示外边框 */
+  bordered: Boolean,
+  /** 加载失败时隐藏图片 */
+  hideOnLoadFailed: Boolean,
+  /** 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+    default: '',
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+  },
+  /** 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定 */
+  shape: {
+    type: String,
+    validator(val: TdAvatarProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
+    },
+  },
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 */
+  size: {
+    type: String,
+    default: '',
+  },
+  /** 图片加载失败时触发 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/avatar/type.ts b/packages/tdesign-uniapp/components/avatar/type.ts
new file mode 100644
index 000000000..c7695c05e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/avatar/type.ts
@@ -0,0 +1,58 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+import type { TdImageProps as ImageProps } from '../image/type';
+import type { ShapeEnum } from '../common/common';
+
+export interface TdAvatarProps {
+  /**
+   * 头像替换文本，仅当图片加载失败时有效
+   * @default ''
+   */
+  alt?: string;
+  /**
+   * 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 已废弃。是否显示外边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 加载失败时隐藏图片
+   * @default false
+   */
+  hideOnLoadFailed?: boolean;
+  /**
+   * 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片地址
+   * @default ''
+   */
+  image?: string;
+  /**
+   * 透传至 Image 组件
+   */
+  imageProps?: ImageProps;
+  /**
+   * 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定
+   */
+  shape?: ShapeEnum;
+  /**
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定
+   * @default ''
+   */
+  size?: string;
+  /**
+   * 图片加载失败时触发
+   */
+  onError?: (e: Event) => void;
+}
diff --git a/packages/tdesign-uniapp/components/back-top/README.en-US.md b/packages/tdesign-uniapp/components/back-top/README.en-US.md
new file mode 100644
index 000000000..af0c2fa1e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/README.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+fixed | Boolean | true | \- | N
+icon | String / Boolean / Object | true | \- | N
+scroll-top | Number | 0 | \- | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | \- | N
+
+### BackTop Events
+
+name | params | description
+-- | -- | --
+to-top | \- | \-
+
+### BackTop Slots
+
+name | Description
+-- | --
+\- | \-
+icon | \-
+
+### BackTop External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @bg-color-container | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @text-color-primary | - 
+--td-back-top-round-dark-bg-color | @gray-color-13 | - 
+--td-back-top-round-dark-color | @text-color-anti | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/back-top/README.md b/packages/tdesign-uniapp/components/back-top/README.md
new file mode 100644
index 000000000..003299837
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/README.md
@@ -0,0 +1,67 @@
+---
+title: BackTop 返回顶部
+description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TBackTop from 'tdesign-uniapp/back-top/back-top.vue';
+```
+
+### 基础返回顶部
+
+{{ base }}
+
+## API
+
+### BackTop Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
+icon | String / Boolean / Object | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
+scroll-top | Number | 0 | 页面滚动距离 | N
+text | String | '' | 文案 | N
+theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
+
+### BackTop Events
+
+名称 | 参数 | 描述
+-- | -- | --
+to-top | \- | 点击触发
+
+### BackTop Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+icon |  自定义图标内容
+
+### BackTop External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-back-top-half-round-border-radius | @radius-round | - |
+| --td-back-top-round-bg-color | @bg-color-container | - |
+| --td-back-top-round-border-color | @component-border | - |
+| --td-back-top-round-border-radius | @radius-circle | - |
+| --td-back-top-round-color | @text-color-primary | - |
+| --td-back-top-round-dark-bg-color | @gray-color-13 | - |
+| --td-back-top-round-dark-color | @text-color-anti | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/back-top/_example/back-top.less b/packages/tdesign-uniapp/components/back-top/_example/back-top.less
new file mode 100644
index 000000000..7155e9994
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/back-top.less
@@ -0,0 +1,14 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    :deep(.skeleton-item) {
+        padding-bottom: 48rpx;
+    }
+
+    .container-flex {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 48rpx;
+        flex-wrap: wrap;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/back-top/_example/back-top.vue b/packages/tdesign-uniapp/components/back-top/_example/back-top.vue
new file mode 100644
index 000000000..7883212f7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/back-top.vue
@@ -0,0 +1,150 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="BackTop"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="BackTop 返回顶部"
+        desc="用于当页面过长往下滑动时，帮助用户快速回到页面顶部。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="组件类型"
+        desc="圆形返回顶部"
+        padding
+      >
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-source="round"
+          @click="onBtnClick($event, { source: 'round' })"
+        >
+          圆形返回顶部
+        </t-button>
+      </t-demo>
+      <t-demo
+        desc="半圆形返回顶部"
+        padding
+      >
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-source="half-round"
+          @click="onBtnClick($event, { source: 'half-round' })"
+        >
+          半圆形返回顶部
+        </t-button>
+      </t-demo>
+      <t-demo padding>
+        <view class="container-flex">
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+          <t-skeleton
+            :row-col="rowCol"
+            t-class="skeleton-item"
+            loading
+          />
+        </view>
+      </t-demo>
+
+      <BaseDemo
+        v-if="type == 'round'"
+        :scroll-top="scrollTop"
+      />
+      <half-round
+        v-if="type == 'half-round'"
+        :scroll-top="scrollTop"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import BaseDemo from './base/index.vue';
+import halfRound from './half-round/index.vue';
+export default {
+  components: {
+    tButton,
+    tSkeleton,
+    BaseDemo,
+    halfRound,
+  },
+  data() {
+    return {
+      type: 'round',
+      scrollTop: 0,
+      rowCol: [
+        {
+          size: '327rpx',
+          borderRadius: '24rpx',
+        },
+        1,
+        {
+          width: '61%',
+        },
+      ],
+    };
+  },
+  onPageScroll(e: any) {
+    const { scrollTop } = e;
+    this.scrollTop = scrollTop;
+  },
+  methods: {
+    onBtnClick(e: any, { source: type }) {
+      this.type = type;
+      uni.pageScrollTo({
+        duration: 300,
+        scrollTop: 1000,
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './back-top.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/back-top/_example/base/index.vue b/packages/tdesign-uniapp/components/back-top/_example/base/index.vue
new file mode 100644
index 000000000..cd5d1649e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/base/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-back-top
+      :theme="backTopTheme"
+      :text="backTopText"
+      :scroll-top="scrollTop"
+      @to-top="onToTop"
+    />
+  </view>
+</template>
+
+<script>
+import tBackTop from 'tdesign-uniapp/back-top/back-top.vue';
+export default {
+  components: {
+    tBackTop,
+  },
+  props: {
+    scrollTop: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: [
+    'to-top',
+  ],
+  data() {
+    return {
+      backTopTheme: 'round',
+      backTopText: '顶部',
+    };
+  },
+  created() {},
+  methods: {
+    onToTop(e) {
+      this.$emit('to-top', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/back-top/_example/half-round/index.vue b/packages/tdesign-uniapp/components/back-top/_example/half-round/index.vue
new file mode 100644
index 000000000..96b89f585
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/half-round/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-back-top
+      :theme="backTopTheme"
+      :text="backTopText"
+      :scroll-top="scrollTop"
+      @to-top="onToTop"
+    />
+  </view>
+</template>
+
+<script>
+import tBackTop from 'tdesign-uniapp/back-top/back-top.vue';
+export default {
+  components: {
+    tBackTop,
+  },
+  props: {
+    scrollTop: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: [
+    'to-top',
+  ],
+  data() {
+    return {
+      backTopTheme: 'half-round-dark',
+      backTopText: '返回顶部',
+    };
+  },
+  created() {},
+  methods: {
+    onToTop(e) {
+      this.$emit('to-top', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.less b/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.less
new file mode 100644
index 000000000..84648496c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.less
@@ -0,0 +1,14 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    .skeleton-item {
+        padding-bottom: 48rpx;
+    }
+
+    .container-flex {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 48rpx;
+        flex-wrap: wrap;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.vue b/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.vue
new file mode 100644
index 000000000..86715b384
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/_example/skyline/back-top.vue
@@ -0,0 +1,167 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="BackTop"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+      :scroll-top="scrollTo"
+      @scroll="onScroll"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          BackTop 返回顶部
+        </view>
+        <view class="demo-desc">
+          用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
+        </view>
+
+        <t-demo
+          title="组件类型"
+          desc="圆形返回顶部"
+          padding
+        >
+          <t-button
+            theme="primary"
+            size="large"
+            block
+            variant="outline"
+            data-source="round"
+            @click="onBtnClick($event, { source: 'round' })"
+          >
+            圆形返回顶部
+          </t-button>
+        </t-demo>
+        <t-demo
+          desc="半圆形返回顶部"
+          padding
+        >
+          <t-button
+            theme="primary"
+            size="large"
+            block
+            variant="outline"
+            data-source="half-round"
+            @click="onBtnClick($event, { source: 'half-round' })"
+          >
+            半圆形返回顶部
+          </t-button>
+        </t-demo>
+        <t-demo padding>
+          <view class="container-flex">
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol"
+              class="skeleton-item"
+              loading
+            />
+          </view>
+        </t-demo>
+
+        <baseDemo
+          v-if="type == 'round'"
+          :scroll-top="scrollTop"
+          @to-top="onToTop"
+        />
+        <half-round
+          v-if="type == 'half-round'"
+          :scroll-top="scrollTop"
+          @to-top="onToTop"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import baseDemo from '../base/index.vue';
+import halfRound from '../half-round/index.vue';
+export default {
+  components: {
+    tNavbar,
+    tButton,
+    tSkeleton,
+    baseDemo,
+    halfRound,
+  },
+  data() {
+    return {
+      type: 'round',
+      scrollTop: 0,
+      scrollTo: 0,
+      rowCol: [
+        {
+          size: '327rpx',
+          borderRadius: '24rpx',
+        },
+        1,
+        {
+          width: '61%',
+        },
+      ],
+    };
+  },
+  methods: {
+    onScroll(e: any) {
+      const { scrollTop } = e.detail;
+      this.scrollTop = scrollTop;
+    },
+
+    onToTop() {
+      this.scrollTo = 0;
+    },
+
+    onBtnClick(e: any, { source: type }) {
+      this.type = type;
+      this.scrollTo = 100;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './back-top.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/back-top/back-top.less b/packages/tdesign-uniapp/components/back-top/back-top.less
new file mode 100644
index 000000000..b594ba14a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/back-top.less
@@ -0,0 +1,97 @@
+@import '../common/style/base.less';
+
+@backtop: ~'@{prefix}-back-top';
+@back-top-text-font-size: @font-size;
+@back-top-text-line-height: 24rpx;
+@back-top-icon-font-size: 44rpx;
+@back-top-round-width: 96rpx;
+@back-top-half-round-width: 120rpx;
+@back-top-half-round-height: 80rpx;
+@back-top-fixed-right: @spacer;
+@safe-area-inset-bottom: constant(safe-area-inset-bottom);
+@safe-area-inset-bottom: env(safe-area-inset-bottom);
+@back-top-fixed-bottom: calc(@spacer-2 + @safe-area-inset-bottom);
+@back-top-round-color: var(--td-back-top-round-color, @text-color-primary);
+@back-top-round-bg-color: var(--td-back-top-round-bg-color, @bg-color-container);
+@back-top-round-border-color: var(--td-back-top-round-border-color, @component-border);
+@back-top-round-border-radius: var(--td-back-top-round-border-radius, @radius-circle); // 'round'主题圆角大小
+@back-top-round-dark-color: var(--td-back-top-round-dark-color, @text-color-anti); // 'round-dark'主题内容颜色
+@back-top-round-dark-bg-color: var(--td-back-top-round-dark-bg-color, @gray-color-13); // 'round-dark'主题背景颜色
+@back-top-half-round-border-radius: var(
+  --td-back-top-half-round-border-radius,
+  @radius-round
+); // 'round-dark'主题圆角大小
+
+.@{backtop} {
+  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;
+
+  &--fixed {
+    position: fixed;
+    right: @back-top-fixed-right;
+    bottom: @back-top-fixed-bottom;
+  }
+
+  &--round,
+  &--round-dark {
+    width: @back-top-round-width;
+    height: @back-top-round-width;
+    border-radius: @back-top-round-border-radius;
+  }
+
+  &--round,
+  &--half-round {
+    color: @back-top-round-color;
+    border: 1rpx solid @back-top-round-border-color;
+    background-color: @back-top-round-bg-color;
+  }
+
+  &--round-dark,
+  &--half-round-dark {
+    color: @back-top-round-dark-color;
+    background-color: @back-top-round-dark-bg-color;
+  }
+
+  &--half-round,
+  &--half-round-dark {
+    width: @back-top-half-round-width;
+    height: @back-top-half-round-height;
+    border-radius: 0;
+    border-top-left-radius: @back-top-half-round-border-radius;
+    border-bottom-left-radius: @back-top-half-round-border-radius;
+    flex-direction: row;
+    right: 0;
+  }
+
+  &__text--round,
+  &__text--round-dark,
+  &__text--half-round,
+  &__text--half-round-dark {
+    font-size: @back-top-text-font-size;
+    line-height: @back-top-text-line-height;
+  }
+
+  &__text--half-round,
+  &__text--half-round-dark {
+    width: 48rpx;
+  }
+
+  &__icon:not(:empty) + &__text--half-round,
+  &__icon:not(:empty) + &__text--half-round-dark {
+    margin-left: 8rpx;
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: @back-top-icon-font-size;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/back-top/back-top.vue b/packages/tdesign-uniapp/components/back-top/back-top.vue
new file mode 100644
index 000000000..8c4d05424
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/back-top.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    v-if="!hidden"
+    :style="_._style([customStyle])"
+    :class="tClass + ' ' + _.cls(classPrefix, [['fixed', fixed], theme])"
+    aria-role="button"
+    @click="toTop"
+  >
+    <view
+      :class="classPrefix + '__icon'"
+      aria-hidden
+    >
+      <slot name="icon" />
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="tClassIcon"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+          @click="_icon.click || ''"
+        />
+      </block>
+    </view>
+    <view
+      v-if="!!text"
+      :class="classPrefix + '__text--' + theme + ' ' + tClassText"
+    >
+      {{ text }}
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-back-top`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.BackTop),
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'to-top',
+  ],
+  watch: {
+    icon() {
+      this.setIcon();
+    },
+    scrollTop: {
+      handler(value) {
+        const { visibilityHeight } = this;
+        this.hidden = value < visibilityHeight;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    const { icon } = this;
+    this.setIcon(icon);
+  },
+  methods: {
+    setIcon(v) {
+      this._icon = calcIcon(v, 'backtop');
+    },
+
+    toTop() {
+      this.$emit('to-top');
+      if (this[RELATION_MAP.BackTop]) {
+        this[RELATION_MAP.BackTop]?.scrollToTop();
+        this.hidden = true;
+      } else {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 300,
+        });
+      }
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _icon: null,
+      hidden: true,
+      _,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './back-top.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/back-top/props.ts b/packages/tdesign-uniapp/components/back-top/props.ts
new file mode 100644
index 000000000..3ad55cfc4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/props.ts
@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBackTopProps } from './type';
+export default {
+  /** 是否绝对定位固定到屏幕右下方 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdBackTopProps['icon'],
+  },
+  /** 页面滚动距离 */
+  scrollTop: {
+    type: Number,
+    default: 0,
+  },
+  /** 文案 */
+  text: {
+    type: String,
+    default: '',
+  },
+  /** 预设的样式类型 */
+  theme: {
+    type: String,
+    default: 'round' as TdBackTopProps['theme'],
+    validator(val: TdBackTopProps['theme']): boolean {
+      if (!val) return true;
+      return ['round', 'half-round', 'round-dark', 'half-round-dark'].includes(val);
+    },
+  },
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200,
+  },
+  /** 点击触发 */
+  onToTop: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/back-top/type.ts b/packages/tdesign-uniapp/components/back-top/type.ts
new file mode 100644
index 000000000..8e28115af
--- /dev/null
+++ b/packages/tdesign-uniapp/components/back-top/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdBackTopProps {
+  /**
+   * 是否绝对定位固定到屏幕右下方
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 页面滚动距离
+   * @default 0
+   */
+  scrollTop?: number;
+  /**
+   * 文案
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 预设的样式类型
+   * @default round
+   */
+  theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/badge/README.en-US.md b/packages/tdesign-uniapp/components/badge/README.en-US.md
new file mode 100644
index 000000000..0207d5001
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/README.en-US.md
@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String | - | \- | N
+content | String | - | \- | N
+count | String / Number | 0 | \- | N
+dot | Boolean | false | \- | N
+max-count | Number | 99 | \- | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon | N
+show-zero | Boolean | false | \- | N
+size | String | medium | options: medium/large | N
+
+### Badge Slots
+
+name | Description
+-- | --
+\- | \-
+count | \-
+
+### Badge External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-count | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-content-text-color | @text-color-primary | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @text-color-anti | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/badge/README.md b/packages/tdesign-uniapp/components/badge/README.md
new file mode 100644
index 000000000..82953faf2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/README.md
@@ -0,0 +1,84 @@
+---
+title: Badge 徽标
+description: 用于告知用户，该区域的状态变化或者待处理任务的数量。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TBadge from 'tdesign-uniapp/badge/badge.vue';
+```
+
+### 组件类型
+
+{{ base }}
+
+### 组件样式
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+## FAQ
+
+### 如何处理由 ribbon 徽标溢出导致页面出现横向滚动？
+角标溢出问题建议从父容器组件处理。如 <a href="https://github.com/Tencent/tdesign-miniprogram/issues/3063" title="如 #3063 " target="_blank" rel="noopener noreferrer"> #3063 </a>，可以给父容器 `cell` 组件添加 `overflow: hidden`，处理溢出造成页面出现横向滚动的问题。
+
+## API
+
+### Badge Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String | - | 颜色 | N
+content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
+count | String / Number | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 | N
+dot | Boolean | false | 是否为红点 | N
+max-count | Number | 99 | 封顶的数字值 | N
+offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
+shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
+show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
+size | String | medium | 尺寸。可选项：medium/large | N
+
+### Badge Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+count | 徽标右上角内容
+
+### Badge External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-count | 计数样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-badge-basic-height | 32rpx | - |
+| --td-badge-basic-padding | 8rpx | - |
+| --td-badge-basic-width | 32rpx | - |
+| --td-badge-bg-color | @error-color | - |
+| --td-badge-border-radius | 4rpx | - |
+| --td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - |
+| --td-badge-content-text-color | @text-color-primary | - |
+| --td-badge-dot-size | 16rpx | - |
+| --td-badge-font-size | @font-size-xs | - |
+| --td-badge-font-weight | 600 | - |
+| --td-badge-large-font-size | @font-size-s | - |
+| --td-badge-large-height | 40rpx | - |
+| --td-badge-large-padding | 10rpx | - |
+| --td-badge-text-color | @text-color-anti | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/badge/_example/api.md b/packages/tdesign-uniapp/components/badge/_example/api.md
new file mode 100644
index 000000000..dc1cfd588
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/api.md
@@ -0,0 +1,14 @@
+### Badge Props
+
+| 名称            | 类型                   | 默认值 | 说明                                                                                                                                                                                           | 必传     |
+| -- | -- | -- | -- | -- | --- |
+| color           | String                 | -      | 颜色                                                                                                                                                                                           | N        |
+| content         | String                 | -      | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义                                                                                                                                 | N        |
+| count           | String / Number / Slot | 0      | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N        |
+| dot             | Boolean                | false  | 是否为红点                                                                                                                                                                                     | N        |
+| externalClasses | Array                  | -      | 组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']`                                                                              | N        |
+| maxCount        | Number                 | 99     | 封顶的数字值                                                                                                                                                                                   | N        |
+| offset          | Array                  | [0,0]  | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string                                                                                                              | number>` | N   |
+| shape           | String                 | circle | 形状。可选值：circle/square/round/ribbon                                                                                                                                                       | N        |
+| size            | String                 | medium | 尺寸。可选值：small/medium                                                                                                                                                                     | N        |
+| visible         | Boolean                | false  | 当数值为 0 时，是否展示徽标                                                                                                                                                                    | N        |
diff --git a/packages/tdesign-uniapp/components/badge/_example/badge.less b/packages/tdesign-uniapp/components/badge/_example/badge.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/badge/_example/badge.vue b/packages/tdesign-uniapp/components/badge/_example/badge.vue
new file mode 100644
index 000000000..b22b59985
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/badge.vue
@@ -0,0 +1,43 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Badge"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="Badge 徽标"
+      desc="用于告知用户，该区域的状态变化或者待处理任务的数量。"
+    />
+    <t-demo title="01 组件类型">
+      <baseComp />
+    </t-demo>
+    <t-demo title="02 组件样式">
+      <theme />
+    </t-demo>
+    <t-demo title="03 组件尺寸">
+      <size />
+    </t-demo>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import theme from './theme/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    baseComp,
+    theme,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './badge.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/_example/base/index.vue b/packages/tdesign-uniapp/components/badge/_example/base/index.vue
new file mode 100644
index 000000000..12e0f611e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/base/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      红点徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        dot
+        t-class="wrapper"
+        content="消息"
+      />
+      <t-badge
+        dot
+        :offset="[1, -1]"
+        t-class="wrapper"
+      >
+        <t-icon
+          name="notification"
+          size="48rpx"
+          aria-label="通知"
+        />
+      </t-badge>
+      <t-badge
+        dot
+        :offset="[1, 1]"
+        t-class="wrapper"
+      >
+        <t-button>按钮</t-button>
+      </t-badge>
+    </view>
+
+    <view class="demo-desc">
+      数字徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        count="8"
+        content="消息"
+        :offset="[4]"
+        t-class="wrapper"
+      />
+      <t-badge
+        count="2"
+        :offset="[2, -2]"
+        t-class="wrapper"
+      >
+        <t-icon
+          name="notification"
+          size="48rpx"
+          aria-label="通知"
+        />
+      </t-badge>
+      <t-badge
+        count="8"
+        :offset="[2, 2]"
+        t-class="wrapper"
+      >
+        <t-button>按钮</t-button>
+      </t-badge>
+    </view>
+
+    <view class="demo-desc">
+      自定义徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        count="NEW"
+        :offset="[0, 2]"
+        aria-role="button"
+      >
+        <t-button
+          icon="notification"
+          aria-label="通知"
+          shape="square"
+          size="large"
+        />
+      </t-badge>
+    </view>
+  </view>
+</template>
+
+<script>
+import tBadge from 'tdesign-uniapp/badge/badge.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tBadge,
+    tIcon,
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+:deep(.wrapper) {
+    margin-right: 48px;
+}
+
+.demo-wrapper {
+    display: flex;
+    margin-left: 32rpx;
+    margin-top: 28px;
+    margin-bottom: 24px;
+    align-items: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/_example/size/index.vue b/packages/tdesign-uniapp/components/badge/_example/size/index.vue
new file mode 100644
index 000000000..b112a6068
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/size/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      Large
+    </view>
+
+    <view class="block">
+      <t-avatar
+        icon="user"
+        size="large"
+        :badge-props="{count: 8, size: 'large', offset: [7, 7]}"
+      />
+    </view>
+
+    <view class="demo-desc">
+      Middle
+    </view>
+
+    <view class="block">
+      <t-avatar
+        icon="user"
+        :badge-props="{count: 8, offset: [5, 5]}"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+// import tBadge from 'tdesign-uniapp/badge/badge.vue';
+import tAvatar from 'tdesign-uniapp/avatar/avatar.vue';
+export default {
+  components: {
+    // tBadge,
+    tAvatar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    padding: 32rpx 32rpx 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/_example/skyline/badge.less b/packages/tdesign-uniapp/components/badge/_example/skyline/badge.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/badge/_example/skyline/badge.vue b/packages/tdesign-uniapp/components/badge/_example/skyline/badge.vue
new file mode 100644
index 000000000..fd143fee1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/skyline/badge.vue
@@ -0,0 +1,55 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="Badge"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        Badge 徽标
+      </view>
+      <view class="demo-desc">
+        用于告知用户，该区域的状态变化或者待处理任务的数量。
+      </view>
+      <t-demo title="01 组件类型">
+        <baseDemo />
+      </t-demo>
+      <t-demo title="02 组件样式">
+        <theme />
+      </t-demo>
+      <t-demo title="03 组件尺寸">
+        <size />
+      </t-demo>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import theme from '../theme/index.vue';
+import size from '../size/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    theme,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './badge.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/_example/theme/index.vue b/packages/tdesign-uniapp/components/badge/_example/theme/index.vue
new file mode 100644
index 000000000..1d1409c45
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/_example/theme/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <view>
+    <!--
+  由于 button 被 t-badeg包裹，t-badge 中存在 role="option", 导致button中的 role=button 失去作用。相当于button 被申明了 role=presentation
+  因此提升了 aria-role=button 到 t-badge上
+  可参考： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+  https://www.zhangxinxu.com/wordpress/2017/01/voiceover-aria-web-accessible-iphone/
+-->
+
+    <view class="demo-desc">
+      圆形徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        count="2"
+        :offset="[2, -2]"
+      >
+        <t-icon
+          name="notification"
+          size="48rpx"
+          aria-label="通知"
+        />
+      </t-badge>
+    </view>
+
+    <view class="demo-desc">
+      方形徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        count="2"
+        shape="square"
+        :offset="[1, -2]"
+      >
+        <t-icon
+          name="notification"
+          size="48rpx"
+          aria-label="通知"
+        />
+      </t-badge>
+    </view>
+
+    <view class="demo-desc">
+      气泡徽标
+    </view>
+    <view class="demo-wrapper">
+      <t-badge
+        count="领积分"
+        shape="bubble"
+        aria-role="button"
+      >
+        <t-button
+          icon="shop"
+          aria-label="商店"
+          shape="square"
+          size="large"
+        />
+      </t-badge>
+    </view>
+
+    <view
+      class="demo-desc"
+      style="margin-bottom: 32rpx"
+    >
+      角标
+    </view>
+    <t-cell
+      title="单行标题"
+      t-class="t-class-cell"
+    >
+      <template
+        #note
+      >
+        <t-badge
+          count="New"
+          :offset="skylineRender ? ['-16rpx', '-56rpx'] : [0, 0]"
+          shape="ribbon"
+        />
+      </template>
+    </t-cell>
+  </view>
+</template>
+
+<script>
+import tBadge from 'tdesign-uniapp/badge/badge.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tBadge,
+    tCell,
+    tIcon,
+    tButton,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-wrapper {
+    display: flex;
+    margin-left: 32rpx;
+    margin-top: 28px;
+    margin-bottom: 24px;
+    align-items: center;
+}
+
+:deep(.t-class-cell) {
+    overflow: hidden;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/badge.less b/packages/tdesign-uniapp/components/badge/badge.less
new file mode 100644
index 000000000..d761fbc89
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/badge.less
@@ -0,0 +1,123 @@
+@import '../common/style/base.less';
+
+@badge-text-color: var(--td-badge-text-color, @text-color-anti);
+@badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary);
+@badge-color: var(--td-badge-bg-color, @error-color);
+@badge-font-size: var(--td-badge-font-size, @font-size-xs);
+@badge-basic-height: var(--td-badge-basic-height, 32rpx);
+@badge-basic-width: var(--td-badge-basic-width, 32rpx);
+@badge-basic-padding: var(--td-badge-basic-padding, 8rpx);
+@badge-font-weight: var(--td-badge-font-weight, 600);
+@badge-border-radius: var(--td-badge-border-radius, 4rpx);
+@border-bubble-border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
+@badge-dot-size: var(--td-badge-dot-size, 16rpx);
+
+// large
+@badge-large-font-size: var(--td-badge-large-font-size, @font-size-s);
+@badge-large-height: var(--td-badge-large-height, 40rpx);
+@badge-large-padding: var(--td-badge-large-padding, 10rpx);
+
+.@{prefix}-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: start;
+
+  &--basic {
+    z-index: 100;
+    padding: 0 @badge-basic-padding;
+    font-size: @badge-font-size;
+    color: @badge-text-color;
+    background-color: @badge-color;
+    text-align: center;
+    height: @badge-basic-height;
+    line-height: @badge-basic-height;
+    font-weight: @badge-font-weight;
+    border-radius: @badge-border-radius;
+  }
+
+  &--dot {
+    height: @badge-dot-size;
+    border-radius: 50%;
+    min-width: @badge-dot-size;
+    padding: 0;
+  }
+
+  &--count {
+    min-width: @badge-basic-width;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  &--circle {
+    border-radius: calc(@badge-basic-height / 2);
+  }
+
+  &__ribbon {
+    &-outer {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  &--ribbon {
+    position: relative;
+    display: inline-block;
+    transform-origin: center center;
+    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
+    border-radius: 0;
+    // padding: 0;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: @badge-basic-height solid @badge-color;
+      font-size: 0;
+    }
+
+    &::before {
+      left: calc(-1 * @badge-basic-height + 1rpx);
+      border-left: @badge-basic-height solid transparent;
+    }
+
+    &::after {
+      right: calc(-1 * @badge-basic-height + 1rpx);
+      border-right: @badge-basic-height solid transparent;
+    }
+  }
+
+  &--bubble {
+    border-radius: @border-bubble-border-radius;
+  }
+
+  // size
+  &--large {
+    font-size: @badge-large-font-size;
+    height: @badge-large-height;
+    min-width: @badge-large-height;
+    line-height: @badge-large-height;
+    padding: 0 @badge-large-padding;
+  }
+
+  &--large&--circle {
+    border-radius: calc(@badge-large-height / 2);
+  }
+
+  &__content:not(:empty) + .t-has-count {
+    transform-origin: center center;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    left: 100%;
+    top: 0;
+  }
+
+  &__content-text {
+    display: block;
+    line-height: 48rpx;
+    color: @badge-content-text-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/badge/badge.vue b/packages/tdesign-uniapp/components/badge/badge.vue
new file mode 100644
index 000000000..fae6764a9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/badge.vue
@@ -0,0 +1,119 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      getBadgeOuterClass({ shape }),
+      tClass
+    ]"
+    :aria-labelledby="labelID"
+    :aria-describedby="descriptionID"
+    :aria-role="ariaRole || 'option'"
+  >
+    <view
+      :id="labelID"
+      :class="_.cls(classPrefix + '__content', [['empty', !content && !hasChild]]) + ' ' + tClassContent"
+      :aria-hidden="true"
+    >
+      <!-- #ifdef H5 -->
+
+      <slot
+        v-if="!content"
+        :class="classPrefix + '__content-slot'"
+      />
+      <!-- #endif -->
+
+      <!-- 小程序下在 slot 下加 :class 属性，会导致渲染失败 -->
+      <!-- #ifndef H5 -->
+      <slot
+        v-if="!content"
+      />
+      <!-- #endif -->
+
+      <text
+        v-else
+        :class="classPrefix + '__content-text'"
+      >
+        {{ content }}
+      </text>
+    </view>
+    <view
+      v-if="isShowBadge({ dot, count, showZero })"
+      :id="descriptionID"
+      :aria-hidden="true"
+      :aria-label="ariaLabel || _.getBadgeAriaLabel({ dot, count, maxCount })"
+      :class="[
+        getBadgeInnerClass({ dot, size, shape, count }) + ' ' + prefix + '-has-count ',
+        tClassCount
+      ]"
+      :style="_._style([getBadgeStyles({ color, offset })])"
+    >
+      {{ getBadgeValue({ dot, count, maxCount }) }}
+    </view>
+    <slot name="count" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniqueFactory } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+import {
+  getBadgeValue,
+  getBadgeStyles,
+  getBadgeOuterClass,
+  getBadgeInnerClass,
+  isShowBadge,
+} from './computed.js';
+
+
+const name = `${prefix}-badge`;
+const getUniqueID = uniqueFactory('badge');
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-count`,
+    `${prefix}-class-content`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      value: '',
+      labelID: '',
+      descriptionID: '',
+      _,
+    };
+  },
+  computed: {
+    hasChild() {
+      return !!this.$slots?.default;
+    },
+  },
+  mounted() {
+    const e = getUniqueID();
+    this.labelID = `${e}_label`;
+    this.descriptionID = `${e}_description`;
+  },
+  methods: {
+    getBadgeValue,
+    getBadgeStyles,
+    getBadgeOuterClass,
+    getBadgeInnerClass,
+    isShowBadge,
+  },
+});
+</script>
+<style scoped>
+@import './badge.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/badge/computed.js b/packages/tdesign-uniapp/components/badge/computed.js
new file mode 100644
index 000000000..de7b7d54f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/computed.js
@@ -0,0 +1,66 @@
+export const 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;
+};
+
+export const 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
+  );
+};
+
+export const getBadgeStyles = function (props) {
+  let styleStr = '';
+  if (props.color) {
+    styleStr += `background:${props.color};`;
+  }
+  if (props.offset?.[0]) {
+    styleStr
+      += `left: calc(100% + ${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;
+};
+
+export const getBadgeOuterClass = function (props) {
+  const baseClass = 't-badge';
+  const classNames = [baseClass, props.shape === 'ribbon' ? `${baseClass}__ribbon-outer` : ''];
+  return classNames.join(' ');
+};
+
+export const getBadgeInnerClass = function (props) {
+  const baseClass = 't-badge';
+  const classNames = [
+    `${baseClass}--basic`,
+    props.dot ? `${baseClass}--dot` : '',
+    `${baseClass}--${props.size}`,
+    `${baseClass}--${props.shape}`,
+    !props.dot && props.count ? `${baseClass}--count` : '',
+  ];
+  return classNames.join(' ');
+};
+
+export const 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;
+};
+
diff --git a/packages/tdesign-uniapp/components/badge/props.ts b/packages/tdesign-uniapp/components/badge/props.ts
new file mode 100644
index 000000000..0b874d154
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/props.ts
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps } from './type';
+export default {
+  /** 颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 */
+  content: {
+    type: String,
+    default: '',
+  },
+  /** 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 */
+  count: {
+    type: [String, Number],
+    default: 0 as TdBadgeProps['count'],
+  },
+  /** 是否为红点 */
+  dot: Boolean,
+  /** 封顶的数字值 */
+  maxCount: {
+    type: Number,
+    default: 99,
+  },
+  /** 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem'] */
+  offset: {
+    type: Array,
+  },
+  /** 形状 */
+  shape: {
+    type: String,
+    default: 'circle' as TdBadgeProps['shape'],
+    validator(val: TdBadgeProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'square', 'bubble', 'ribbon'].includes(val);
+    },
+  },
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: Boolean,
+  /** 尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdBadgeProps['size'],
+    validator(val: TdBadgeProps['size']): boolean {
+      if (!val) return true;
+      return ['medium', 'large'].includes(val);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/badge/type.ts b/packages/tdesign-uniapp/components/badge/type.ts
new file mode 100644
index 000000000..5433d1802
--- /dev/null
+++ b/packages/tdesign-uniapp/components/badge/type.ts
@@ -0,0 +1,52 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdBadgeProps {
+  /**
+   * 颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义
+   * @default ''
+   */
+  content?: string;
+  /**
+   * 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染
+   * @default 0
+   */
+  count?: string | number;
+  /**
+   * 是否为红点
+   * @default false
+   */
+  dot?: boolean;
+  /**
+   * 封顶的数字值
+   * @default 99
+   */
+  maxCount?: number;
+  /**
+   * 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 形状
+   * @default circle
+   */
+  shape?: 'circle' | 'square' | 'bubble' | 'ribbon';
+  /**
+   * 当数值为 0 时，是否展示徽标
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: 'medium' | 'large';
+}
diff --git a/packages/tdesign-uniapp/components/button/README.en-US.md b/packages/tdesign-uniapp/components/button/README.en-US.md
new file mode 100644
index 000000000..8fc41c0c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/README.en-US.md
@@ -0,0 +1,238 @@
+---
+title: Button
+description: Buttons are used to open a closed-loop task, such as "delete" an object, "buy" an item, etc.
+spline: base
+isComponent: true
+---
+
+
+
+
+## Usage
+
+For global import, configure it in `app.json` in the root directory of the miniprogram. For local import, configure it in `index.json` of the page or component that needs to be imported.
+
+```json
+"usingComponents": {
+  "t-button": "tdesign-miniprogram/button/button"
+}
+```
+
+
+## Code Demo
+
+### 01 Component Type
+
+#### Basic Buttons
+
+{{ base }}
+
+#### Icon Button
+
+{{ icon-btn }}
+
+#### Ghost Button
+
+{{ ghost-btn }}
+
+#### Combination Button
+
+{{ group-btn }}
+
+#### Banner Button
+
+{{ block-btn }}
+
+### 02 Component State
+
+#### Buttons for different states
+
+{{ disabled }}
+
+### 03 Component Style
+
+#### Different sizes of buttons
+
+{{ size }}
+
+#### Different shaped buttons
+
+{{ shape }}
+
+#### Different color theme buttons
+
+{{ theme }}
+
+
+
+## API
+
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+app-parameter | String | - | \- | N
+block | Boolean | false | make button to be a block-level element | N
+content | String | - | button's children elements | N
+custom-dataset | String / Number / Boolean / Object / Array | {} | Typescript：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
+disabled | Boolean | undefined | disable the button, make it can not be clicked | N
+ghost | Boolean | false | make background-color to be transparent | N
+hover-class | String | - | \- | N
+hover-start-time | Number | 20 | \- | N
+hover-stay-time | Number | 70 | \- | N
+hover-stop-propagation | Boolean | false | \- | N
+icon | String / Object | - | icon name | N
+lang | String | - | message language。options: en/zh_CN/zh_TW | 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/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/button/type.ts) | N
+open-type | String | - | open type of button, [Miniprogram Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
+phone-number-no-quota-toast | Boolean | true | \- | N
+send-message-img | String | 截图 | \- | N
+send-message-path | String | 当前分享路径 | \- | N
+send-message-title | String | 当前标题 | \- | N
+session-from | String | - | \- | N
+shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
+show-message-card | Boolean | false | \- | N
+size | String | medium | a button has four size。options: extra-small/small/medium/large | N
+t-id | String | - | id | N
+theme | String | default | button theme。options: default/primary/danger/light | N
+type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N
+variant | String | base | variant of button。options: base/outline/dashed/text | N
+
+### Button Events
+
+name | params | description
+-- | -- | --
+agreeprivacyauthorization | \- | \-
+chooseavatar | \- | \-
+click | `(e: MouseEvent)` | trigger on click
+contact | \- | \-
+createliveactivity | \- | \-
+error | \- | \-
+getphonenumber | \- | \-
+getrealtimephonenumber | \- | \-
+getuserinfo | \- | \-
+launchapp | \- | \-
+opensetting | \- | \-
+
+### Button Slots
+
+name | Description
+-- | --
+\- | \-
+content | button's children elements
+suffix | \-
+
+### Button External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | class name of icon
+t-class-loading | class name of loading
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+| Name | Default Value | Description |
+| -- | -- | -- | 
+| --td-button-border-radius | @radius-default | - |
+| --td-button-border-width | 4rpx | - |
+| --td-button-danger-active-bg-color | @error-color-active | - |
+| --td-button-danger-active-border-color | @error-color-active | - |
+| --td-button-danger-bg-color | @error-color | - |
+| --td-button-danger-border-color | @error-color | - |
+| --td-button-danger-color | @text-color-anti | - |
+| --td-button-danger-dashed-border-color | @button-danger-dashed-color | - |
+| --td-button-danger-dashed-color | @error-color | - |
+| --td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - |
+| --td-button-danger-disabled-bg | @error-color-3 | - |
+| --td-button-danger-disabled-border-color | @error-color-3 | - |
+| --td-button-danger-disabled-color | @font-white-1 | - |
+| --td-button-danger-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-danger-outline-active-border-color | @error-color-active | - |
+| --td-button-danger-outline-border-color | @button-danger-outline-color | - |
+| --td-button-danger-outline-color | @error-color | - |
+| --td-button-danger-outline-disabled-color | @error-color-3 | - |
+| --td-button-danger-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-danger-text-color | @error-color | - |
+| --td-button-danger-text-disabled-color | @button-danger-disabled-color | - |
+| --td-button-default-active-bg-color | @bg-color-component-active | - |
+| --td-button-default-active-border-color | @bg-color-component-active | - |
+| --td-button-default-bg-color | @bg-color-component | - |
+| --td-button-default-border-color | @bg-color-component | - |
+| --td-button-default-color | @text-color-primary | - |
+| --td-button-default-disabled-bg | @bg-color-component-disabled | - |
+| --td-button-default-disabled-border-color | @bg-color-component-disabled | - |
+| --td-button-default-disabled-color | @text-color-disabled | - |
+| --td-button-default-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-default-outline-active-border-color | @component-border | - |
+| --td-button-default-outline-border-color | @component-border | - |
+| --td-button-default-outline-color | @text-color-primary | - |
+| --td-button-default-outline-disabled-color | @component-border | - |
+| --td-button-default-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-extra-small-font-size | @font-size-base | - |
+| --td-button-extra-small-height | 56rpx | - |
+| --td-button-extra-small-icon-font-size | 36rpx | - |
+| --td-button-extra-small-padding-horizontal | 16rpx | - |
+| --td-button-font-weight | 600 | - |
+| --td-button-ghost-border-color | @button-ghost-color | - |
+| --td-button-ghost-color | @text-color-anti | - |
+| --td-button-ghost-danger-border-color | @error-color | - |
+| --td-button-ghost-danger-color | @error-color | - |
+| --td-button-ghost-danger-hover-color | @error-color-active | - |
+| --td-button-ghost-disabled-color | @font-white-4 | - |
+| --td-button-ghost-hover-color | @font-white-2 | - |
+| --td-button-ghost-primary-border-color | @brand-color | - |
+| --td-button-ghost-primary-color | @brand-color | - |
+| --td-button-ghost-primary-hover-color | @brand-color-active | - |
+| --td-button-icon-border-radius | 8rpx | - |
+| --td-button-icon-spacer | @spacer | - |
+| --td-button-large-font-size | @font-size-m | - |
+| --td-button-large-height | 96rpx | - |
+| --td-button-large-icon-font-size | 48rpx | - |
+| --td-button-large-padding-horizontal | 40rpx | - |
+| --td-button-light-active-bg-color | @brand-color-light-active | - |
+| --td-button-light-active-border-color | @brand-color-light-active | - |
+| --td-button-light-bg-color | @brand-color-light | - |
+| --td-button-light-border-color | @brand-color-light | - |
+| --td-button-light-color | @brand-color | - |
+| --td-button-light-disabled-bg | @brand-color-light | - |
+| --td-button-light-disabled-border-color | @brand-color-light | - |
+| --td-button-light-disabled-color | @brand-color-disabled | - |
+| --td-button-light-outline-active-bg-color | @brand-color-light-active | - |
+| --td-button-light-outline-active-border-color | @brand-color-active | - |
+| --td-button-light-outline-bg-color | @brand-color-light | - |
+| --td-button-light-outline-border-color | @button-light-outline-color | - |
+| --td-button-light-outline-color | @brand-color | - |
+| --td-button-light-outline-disabled-color | @brand-color-disabled | - |
+| --td-button-light-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-light-text-color | @brand-color | - |
+| --td-button-medium-font-size | @font-size-m | - |
+| --td-button-medium-height | 80rpx | - |
+| --td-button-medium-icon-font-size | 40rpx | - |
+| --td-button-medium-padding-horizontal | 32rpx | - |
+| --td-button-primary-active-bg-color | @brand-color-active | - |
+| --td-button-primary-active-border-color | @brand-color-active | - |
+| --td-button-primary-bg-color | @brand-color | - |
+| --td-button-primary-border-color | @brand-color | - |
+| --td-button-primary-color | @text-color-anti | - |
+| --td-button-primary-dashed-border-color | @button-primary-dashed-color | - |
+| --td-button-primary-dashed-color | @brand-color | - |
+| --td-button-primary-dashed-disabled-color | @brand-color-disabled | - |
+| --td-button-primary-disabled-bg | @brand-color-disabled | - |
+| --td-button-primary-disabled-border-color | @brand-color-disabled | - |
+| --td-button-primary-disabled-color | @text-color-anti | - |
+| --td-button-primary-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-primary-outline-active-border-color | @brand-color-active | - |
+| --td-button-primary-outline-border-color | @button-primary-outline-color | - |
+| --td-button-primary-outline-color | @brand-color | - |
+| --td-button-primary-outline-disabled-color | @brand-color-disabled | - |
+| --td-button-primary-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-primary-text-color | @brand-color | - |
+| --td-button-primary-text-disabled-color | @brand-color-disabled | - |
+| --td-button-small-font-size | @font-size-base | - |
+| --td-button-small-height | 64rpx | - |
+| --td-button-small-icon-font-size | 36rpx | - |
+| --td-button-small-padding-horizontal | 24rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/button/README.md b/packages/tdesign-uniapp/components/button/README.md
new file mode 100644
index 000000000..ea5e59f7a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/README.md
@@ -0,0 +1,229 @@
+---
+title: Button 按钮
+description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TButton from 'tdesign-uniapp/button/button.vue';
+```
+
+### 01 组件类型
+
+#### 基础按钮
+
+{{ base }}
+
+#### 图标按钮
+
+{{ icon-btn }}
+
+#### 幽灵按钮
+
+{{ ghost-btn }}
+
+#### 组合按钮
+
+{{ group-btn }}
+
+#### 通栏按钮
+
+{{ block-btn }}
+
+### 02 组件状态
+
+#### 按钮禁用态
+
+{{ disabled }}
+
+### 03 组件样式
+
+#### 按钮尺寸
+
+{{ size }}
+
+#### 按钮形状
+
+{{ shape }}
+
+#### 按钮主题
+
+{{ theme }}
+
+## API
+
+### Button Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
+block | Boolean | false | 是否为块级元素 | N
+content | String | - | 按钮内容 | N
+custom-dataset | String / Number / Boolean / Object / Array | {} | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
+disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+hover-class | String | - | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N
+hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
+hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
+hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+lang | String | - | 指定返回用户信息的语言，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
+loading | Boolean | false | 是否显示为加载状态 | N
+loading-props | Object | {} | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/button/type.ts) | 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> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<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 />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
+phone-number-no-quota-toast | Boolean | true | 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | N
+send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
+send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
+send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
+session-from | String | - | 会话来源，open-type="contact"时有效 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N
+t-id | String | - | 按钮标签id | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
+type | String | - | 同小程序的 formType。可选项：submit/reset | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+
+### Button Events
+
+名称 | 参数 | 描述
+-- | -- | --
+agreeprivacyauthorization | \- | 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
+chooseavatar | \- | 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
+click | `(e: MouseEvent)` | 点击时触发
+contact | \- | 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
+createliveactivity | \- | 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
+error | \- | 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
+getphonenumber | \- | 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+getrealtimephonenumber | \- | 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+getuserinfo | \- | 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
+launchapp | \- | 打开 APP 成功的回调，`open-type=launchApp` 时有效
+opensetting | \- | 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
+
+### Button Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+suffix | 右侧内容，可用于定义右侧图标
+
+### Button External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-loading | 加载样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-button-border-radius | @radius-default | - |
+| --td-button-border-width | 4rpx | - |
+| --td-button-danger-active-bg-color | @error-color-active | - |
+| --td-button-danger-active-border-color | @error-color-active | - |
+| --td-button-danger-bg-color | @error-color | - |
+| --td-button-danger-border-color | @error-color | - |
+| --td-button-danger-color | @text-color-anti | - |
+| --td-button-danger-dashed-border-color | @button-danger-dashed-color | - |
+| --td-button-danger-dashed-color | @error-color | - |
+| --td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - |
+| --td-button-danger-disabled-bg | @error-color-3 | - |
+| --td-button-danger-disabled-border-color | @error-color-3 | - |
+| --td-button-danger-disabled-color | @font-white-1 | - |
+| --td-button-danger-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-danger-outline-active-border-color | @error-color-active | - |
+| --td-button-danger-outline-border-color | @button-danger-outline-color | - |
+| --td-button-danger-outline-color | @error-color | - |
+| --td-button-danger-outline-disabled-color | @error-color-3 | - |
+| --td-button-danger-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-danger-text-color | @error-color | - |
+| --td-button-danger-text-disabled-color | @button-danger-disabled-color | - |
+| --td-button-default-active-bg-color | @bg-color-component-active | - |
+| --td-button-default-active-border-color | @bg-color-component-active | - |
+| --td-button-default-bg-color | @bg-color-component | - |
+| --td-button-default-border-color | @bg-color-component | - |
+| --td-button-default-color | @text-color-primary | - |
+| --td-button-default-disabled-bg | @bg-color-component-disabled | - |
+| --td-button-default-disabled-border-color | @bg-color-component-disabled | - |
+| --td-button-default-disabled-color | @text-color-disabled | - |
+| --td-button-default-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-default-outline-active-border-color | @component-border | - |
+| --td-button-default-outline-border-color | @component-border | - |
+| --td-button-default-outline-color | @text-color-primary | - |
+| --td-button-default-outline-disabled-color | @component-border | - |
+| --td-button-default-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-extra-small-font-size | @font-size-base | - |
+| --td-button-extra-small-height | 56rpx | - |
+| --td-button-extra-small-icon-font-size | 36rpx | - |
+| --td-button-extra-small-padding-horizontal | 16rpx | - |
+| --td-button-font-weight | 600 | - |
+| --td-button-ghost-border-color | @button-ghost-color | - |
+| --td-button-ghost-color | @text-color-anti | - |
+| --td-button-ghost-danger-border-color | @error-color | - |
+| --td-button-ghost-danger-color | @error-color | - |
+| --td-button-ghost-danger-hover-color | @error-color-active | - |
+| --td-button-ghost-disabled-color | @font-white-4 | - |
+| --td-button-ghost-hover-color | @font-white-2 | - |
+| --td-button-ghost-primary-border-color | @brand-color | - |
+| --td-button-ghost-primary-color | @brand-color | - |
+| --td-button-ghost-primary-hover-color | @brand-color-active | - |
+| --td-button-icon-border-radius | 8rpx | - |
+| --td-button-icon-spacer | @spacer | - |
+| --td-button-large-font-size | @font-size-m | - |
+| --td-button-large-height | 96rpx | - |
+| --td-button-large-icon-font-size | 48rpx | - |
+| --td-button-large-padding-horizontal | 40rpx | - |
+| --td-button-light-active-bg-color | @brand-color-light-active | - |
+| --td-button-light-active-border-color | @brand-color-light-active | - |
+| --td-button-light-bg-color | @brand-color-light | - |
+| --td-button-light-border-color | @brand-color-light | - |
+| --td-button-light-color | @brand-color | - |
+| --td-button-light-disabled-bg | @brand-color-light | - |
+| --td-button-light-disabled-border-color | @brand-color-light | - |
+| --td-button-light-disabled-color | @brand-color-disabled | - |
+| --td-button-light-outline-active-bg-color | @brand-color-light-active | - |
+| --td-button-light-outline-active-border-color | @brand-color-active | - |
+| --td-button-light-outline-bg-color | @brand-color-light | - |
+| --td-button-light-outline-border-color | @button-light-outline-color | - |
+| --td-button-light-outline-color | @brand-color | - |
+| --td-button-light-outline-disabled-color | @brand-color-disabled | - |
+| --td-button-light-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-light-text-color | @brand-color | - |
+| --td-button-medium-font-size | @font-size-m | - |
+| --td-button-medium-height | 80rpx | - |
+| --td-button-medium-icon-font-size | 40rpx | - |
+| --td-button-medium-padding-horizontal | 32rpx | - |
+| --td-button-primary-active-bg-color | @brand-color-active | - |
+| --td-button-primary-active-border-color | @brand-color-active | - |
+| --td-button-primary-bg-color | @brand-color | - |
+| --td-button-primary-border-color | @brand-color | - |
+| --td-button-primary-color | @text-color-anti | - |
+| --td-button-primary-dashed-border-color | @button-primary-dashed-color | - |
+| --td-button-primary-dashed-color | @brand-color | - |
+| --td-button-primary-dashed-disabled-color | @brand-color-disabled | - |
+| --td-button-primary-disabled-bg | @brand-color-disabled | - |
+| --td-button-primary-disabled-border-color | @brand-color-disabled | - |
+| --td-button-primary-disabled-color | @text-color-anti | - |
+| --td-button-primary-outline-active-bg-color | @bg-color-container-active | - |
+| --td-button-primary-outline-active-border-color | @brand-color-active | - |
+| --td-button-primary-outline-border-color | @button-primary-outline-color | - |
+| --td-button-primary-outline-color | @brand-color | - |
+| --td-button-primary-outline-disabled-color | @brand-color-disabled | - |
+| --td-button-primary-text-active-bg-color | @bg-color-container-active | - |
+| --td-button-primary-text-color | @brand-color | - |
+| --td-button-primary-text-disabled-color | @brand-color-disabled | - |
+| --td-button-small-font-size | @font-size-base | - |
+| --td-button-small-height | 64rpx | - |
+| --td-button-small-icon-font-size | 36rpx | - |
+| --td-button-small-padding-horizontal | 24rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/button/_example/base/index.vue b/packages/tdesign-uniapp/components/button/_example/base/index.vue
new file mode 100644
index 000000000..7a6969b20
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/base/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <view>
+    <view class="button-example">
+      <TButton
+        theme="primary"
+        size="large"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </TButton>
+      <TButton
+        theme="light"
+        size="large"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </TButton>
+      <TButton size="large">
+        填充按钮
+      </TButton>
+    </view>
+
+    <view class="button-example">
+      <TButton
+        theme="primary"
+        size="large"
+        variant="outline"
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </TButton>
+      <TButton
+        theme="primary"
+        size="large"
+        custom-style="margin-right: 16px;"
+        variant="dashed"
+      >
+        虚框按钮
+      </TButton>
+      <TButton
+        theme="primary"
+        size="large"
+        variant="text"
+      >
+        文字按钮
+      </TButton>
+    </view>
+  </view>
+</template>
+
+<script>
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  components: {
+    TButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 16px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-example:after {
+    content: '';
+    flex: auto;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/block-btn/index.vue b/packages/tdesign-uniapp/components/button/_example/block-btn/index.vue
new file mode 100644
index 000000000..c7203cdaf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/block-btn/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <view class="button-example">
+    <t-button
+      theme="primary"
+      size="large"
+      block
+    >
+      填充按钮
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/button.less b/packages/tdesign-uniapp/components/button/_example/button.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/button.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/button/_example/button.vue b/packages/tdesign-uniapp/components/button/_example/button.vue
new file mode 100644
index 000000000..869643329
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/button.vue
@@ -0,0 +1,99 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Button"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Button 按钮"
+        desc="用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础按钮"
+      >
+        <baseComp />
+      </t-demo>
+
+      <t-demo desc="图标按钮">
+        <icon-btn />
+      </t-demo>
+
+      <t-demo desc="幽灵按钮">
+        <ghost-btn />
+      </t-demo>
+
+      <t-demo desc="组合按钮">
+        <group-btn />
+      </t-demo>
+
+      <t-demo desc="通栏按钮">
+        <block-btn />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="按钮禁用态"
+      >
+        <disabled />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="按钮尺寸"
+      >
+        <size />
+      </t-demo>
+
+      <t-demo desc="按钮形状">
+        <shape />
+      </t-demo>
+
+      <t-demo desc="按钮主题">
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import size from './size/index.vue';
+import iconBtn from './icon-btn/index.vue';
+import groupBtn from './group-btn/index.vue';
+import blockBtn from './block-btn/index.vue';
+import ghostBtn from './ghost-btn/index.vue';
+import shape from './shape/index.vue';
+import theme from './theme/index.vue';
+import disabled from './disabled/index.vue';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    baseComp,
+    size,
+    iconBtn,
+    groupBtn,
+    blockBtn,
+    ghostBtn,
+    shape,
+    theme,
+    disabled,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './button.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/disabled/index.vue b/packages/tdesign-uniapp/components/button/_example/disabled/index.vue
new file mode 100644
index 000000000..d6dbdb84c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/disabled/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <view>
+    <view class="button-example">
+      <t-button
+        theme="primary"
+        size="large"
+        disabled
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        theme="light"
+        size="large"
+        disabled
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        disabled
+      >
+        填充按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        theme="primary"
+        size="large"
+        variant="outline"
+        disabled
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        variant="dashed"
+        disabled
+        custom-style="margin-right: 16px;"
+      >
+        虚框按钮
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        variant="text"
+        disabled
+      >
+        文字按钮
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 32rpx;
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-example:after {
+    content: '';
+    flex: auto;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/ghost-btn/index.vue b/packages/tdesign-uniapp/components/button/_example/ghost-btn/index.vue
new file mode 100644
index 000000000..ac0db17aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/ghost-btn/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view class="button-example">
+    <t-button
+      theme="primary"
+      ghost
+      size="large"
+      custom-style="margin-right: 16px;"
+    >
+      幽灵按钮
+    </t-button>
+    <t-button
+      theme="danger"
+      ghost
+      size="large"
+      custom-style="margin-right: 16px;"
+    >
+      幽灵按钮
+    </t-button>
+    <t-button
+      ghost
+      size="large"
+    >
+      幽灵按钮
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    display: flex;
+    justify-content: space-between;
+    background-color: #181818;
+    padding: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/group-btn/index.vue b/packages/tdesign-uniapp/components/button/_example/group-btn/index.vue
new file mode 100644
index 000000000..411db86b1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/group-btn/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <view class="button-example">
+    <t-button
+      theme="light"
+      block
+      size="large"
+      t-class="group-btn"
+      :custom-style="useVirtualHost ? flex1Mr16 : ''"
+      :style="!useVirtualHost ? flex1Mr16 : ''"
+    >
+      填充按钮
+    </t-button>
+    <t-button
+      theme="primary"
+      block
+      size="large"
+      t-class="group-btn"
+      :custom-style="useVirtualHost ? flex1 : ''"
+      :style="!useVirtualHost ? flex1 : ''"
+    >
+      填充按钮
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {
+      flex1Mr16: 'flex: 1;margin-right: 16px;',
+      flex1: 'flex: 1;',
+    };
+  },
+  computed: {
+    useVirtualHost() {
+      return canUseVirtualHost();
+    },
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 32rpx;
+    display: flex;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/icon-btn/index.vue b/packages/tdesign-uniapp/components/button/_example/icon-btn/index.vue
new file mode 100644
index 000000000..4b79d0fd3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/icon-btn/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="button-example">
+    <t-button
+      theme="primary"
+      icon="app"
+      content="填充按钮"
+      size="large"
+      custom-style="margin-right: 16px;"
+    />
+    <t-button
+      v-if="skylineRender"
+      theme="light"
+      size="large"
+      custom-style="margin-right: 16px;"
+    >
+      <t-loading
+        t-class="loading"
+        theme="spinner"
+        size="40rpx"
+        text="加载中..."
+      />
+    </t-button>
+    <t-button
+      v-else
+      theme="primary"
+      size="large"
+      loading
+      custom-style="margin-right: 16px;"
+    >
+      加载中
+    </t-button>
+    <t-button
+      theme="primary"
+      icon="search"
+      shape="square"
+      size="large"
+      aria-label="搜索"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  components: {
+    tButton,
+    tLoading,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 32rpx;
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-example:after {
+    content: '';
+    flex: auto;
+}
+
+.button-example .loading {
+    display: flex;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/shape/index.vue b/packages/tdesign-uniapp/components/button/_example/shape/index.vue
new file mode 100644
index 000000000..cfe2b4183
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/shape/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <view class="button-example">
+      <t-button
+        theme="primary"
+        size="large"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        icon="search"
+        shape="square"
+        aria-label="搜索"
+        custom-style="margin-right: 16px;"
+      />
+      <t-button
+        theme="primary"
+        size="large"
+        shape="round"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        icon="search"
+        shape="circle"
+        aria-label="搜索"
+      />
+    </view>
+
+    <t-button
+      theme="primary"
+      size="large"
+      block
+      t-class="external-class"
+      custom-style="border-radius: 0"
+    >
+      填充按钮
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 32rpx 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/size/index.vue b/packages/tdesign-uniapp/components/button/_example/size/index.vue
new file mode 100644
index 000000000..793e8ae82
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/size/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view class="button-example">
+    <t-button
+      theme="primary"
+      size="large"
+      custom-style="margin-right: 16px;"
+    >
+      按钮48
+    </t-button>
+    <t-button
+      theme="primary"
+      custom-style="margin-right: 16px;"
+    >
+      按钮40
+    </t-button>
+    <t-button
+      theme="primary"
+      size="small"
+      custom-style="margin-right: 16px;"
+    >
+      按钮32
+    </t-button>
+    <t-button
+      theme="primary"
+      size="extra-small"
+    >
+      按钮28
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin: 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/skyline/button.less b/packages/tdesign-uniapp/components/button/_example/skyline/button.less
new file mode 100644
index 000000000..da3435121
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/skyline/button.less
@@ -0,0 +1,18 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.button-example {
+    margin: 32rpx;
+    display: flex;
+    justify-content: space-between;
+}
+
+.t-button {
+    margin-right: 32rpx;
+}
+
+:deep(.t-button:last-child) {
+    margin-right: 0;
+}
+
diff --git a/packages/tdesign-uniapp/components/button/_example/skyline/button.vue b/packages/tdesign-uniapp/components/button/_example/skyline/button.vue
new file mode 100644
index 000000000..49ffa55f2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/skyline/button.vue
@@ -0,0 +1,107 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="Button"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Button 按钮
+        </view>
+        <view class="demo-desc">
+          用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础按钮"
+        >
+          <baseDemo />
+        </t-demo>
+
+        <t-demo desc="图标按钮">
+          <icon-btn :skyline="true" />
+        </t-demo>
+
+        <t-demo desc="幽灵按钮">
+          <ghost-btn />
+        </t-demo>
+
+        <t-demo desc="组合按钮">
+          <group-btn />
+        </t-demo>
+
+        <t-demo desc="通栏按钮">
+          <block-btn />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          desc="按钮禁用态"
+        >
+          <disabled />
+        </t-demo>
+
+        <t-demo
+          title="03 组件样式"
+          desc="按钮尺寸"
+        >
+          <size />
+        </t-demo>
+
+        <t-demo desc="按钮形状">
+          <shape />
+        </t-demo>
+
+        <t-demo desc="按钮主题">
+          <theme />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import size from '../size/index.vue';
+import iconBtn from '../icon-btn/index.vue';
+import groupBtn from '../group-btn/index.vue';
+import blockBtn from '../block-btn/index.vue';
+import ghostBtn from '../ghost-btn/index.vue';
+import shape from '../shape/index.vue';
+import theme from '../theme/index.vue';
+import disabled from '../disabled/index.vue';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tNavbar,
+    baseDemo,
+    size,
+    iconBtn,
+    groupBtn,
+    blockBtn,
+    ghostBtn,
+    shape,
+    theme,
+    disabled,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+@import './button.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/button/_example/theme/index.vue b/packages/tdesign-uniapp/components/button/_example/theme/index.vue
new file mode 100644
index 000000000..0e531fedb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/_example/theme/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <view>
+    <view class="button-example">
+      <t-button
+        size="large"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        variant="outline"
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="primary"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="primary"
+        variant="outline"
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="primary"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="danger"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="danger"
+        variant="outline"
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="danger"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+
+    <view class="button-example">
+      <t-button
+        size="large"
+        theme="light"
+        custom-style="margin-right: 16px;"
+      >
+        填充按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="light"
+        variant="outline"
+        custom-style="margin-right: 16px;"
+      >
+        描边按钮
+      </t-button>
+      <t-button
+        size="large"
+        theme="light"
+        variant="text"
+      >
+        文字按钮
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.button-example {
+    margin: 32rpx;
+    display: flex;
+    justify-content: space-between;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/button/button.less b/packages/tdesign-uniapp/components/button/button.less
new file mode 100644
index 000000000..8ea9af99d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/button.less
@@ -0,0 +1,645 @@
+@import '../common/style/base.less';
+
+@button-border-width: var(--td-button-border-width, 4rpx);
+@button-border-radius: var(--td-button-border-radius, @radius-default);
+@button-font-weight: var(--td-button-font-weight, 600);
+
+@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base);
+@button-small-font-size: var(--td-button-small-font-size, @font-size-base);
+@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m);
+@button-large-font-size: var(--td-button-large-font-size, @font-size-m);
+
+@button-extra-small-height: var(--td-button-extra-small-height, 56rpx);
+@button-small-height: var(--td-button-small-height, 64rpx);
+@button-medium-height: var(--td-button-medium-height, 80rpx);
+@button-large-height: var(--td-button-large-height, 96rpx);
+
+// button icon
+@button-icon-spacer: var(--td-button-icon-spacer, @spacer);
+@button-icon-border-radius: var(--td-button-icon-border-radius, 8rpx);
+
+// padding
+@button-extra-small-padding-horizontal: var(--td-button-extra-small-padding-horizontal, 16rpx);
+@button-small-padding-horizontal: var(--td-button-small-padding-horizontal, 24rpx);
+@button-medium-padding-horizontal: var(--td-button-medium-padding-horizontal, 32rpx);
+@button-large-padding-horizontal: var(--td-button-large-padding-horizontal, 40rpx);
+
+// 图标大小
+@button-extra-small-icon-font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
+@button-small-icon-font-size: var(--td-button-small-icon-font-size, 36rpx);
+@button-medium-icon-font-size: var(--td-button-medium-icon-font-size, 40rpx);
+@button-large-icon-font-size: var(--td-button-large-icon-font-size, 48rpx);
+
+// default
+@button-default-color: var(--td-button-default-color, @text-color-primary);
+@button-default-bg-color: var(--td-button-default-bg-color, @bg-color-component);
+@button-default-border-color: var(--td-button-default-border-color, @bg-color-component);
+@button-default-disabled-color: var(--td-button-default-disabled-color, @text-color-disabled);
+@button-default-disabled-bg: var(--td-button-default-disabled-bg, @bg-color-component-disabled);
+@button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @bg-color-component-disabled);
+// primary
+@button-primary-color: var(--td-button-primary-color, @text-color-anti);
+@button-primary-border-color: var(--td-button-primary-border-color, @brand-color);
+@button-primary-bg-color: var(--td-button-primary-bg-color, @brand-color);
+@button-primary-disabled-color: var(--td-button-primary-disabled-color, @text-color-anti);
+@button-primary-disabled-bg: var(--td-button-primary-disabled-bg, @brand-color-disabled);
+@button-primary-disabled-border-color: var(--td-button-primary-disabled-border-color, @brand-color-disabled);
+// light
+@button-light-color: var(--td-button-light-color, @brand-color);
+@button-light-border-color: var(--td-button-light-border-color, @brand-color-light);
+@button-light-bg-color: var(--td-button-light-bg-color, @brand-color-light);
+@button-light-disabled-color: var(--td-button-light-disabled-color, @brand-color-disabled);
+@button-light-disabled-bg: var(--td-button-light-disabled-bg, @brand-color-light);
+@button-light-disabled-border-color: var(--td-button-light-disabled-border-color, @brand-color-light);
+// danger
+@button-danger-color: var(--td-button-danger-color, @text-color-anti);
+@button-danger-border-color: var(--td-button-danger-border-color, @error-color);
+@button-danger-bg-color: var(--td-button-danger-bg-color, @error-color);
+@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1);
+@button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
+@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
+// default + outline
+@button-default-outline-color: var(--td-button-default-outline-color, @text-color-primary);
+@button-default-outline-border-color: var(--td-button-default-outline-border-color, @component-border);
+@button-default-outline-disabled-color: var(--td-button-default-outline-disabled-color, @component-border);
+// primary + outline
+@button-primary-outline-color: var(--td-button-primary-outline-color, @brand-color);
+@button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color);
+@button-primary-outline-disabled-color: var(--td-button-primary-outline-disabled-color, @brand-color-disabled);
+// danger + outline
+@button-danger-outline-color: var(--td-button-danger-outline-color, @error-color);
+@button-danger-outline-border-color: var(--td-button-danger-outline-border-color, @button-danger-outline-color);
+@button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @error-color-3);
+// light + outline
+@button-light-outline-color: var(--td-button-light-outline-color, @brand-color);
+@button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color);
+@button-light-outline-bg-color: var(--td-button-light-outline-bg-color, @brand-color-light);
+@button-light-outline-disabled-color: var(--td-button-light-outline-disabled-color, @brand-color-disabled);
+// primary + dashed
+@button-primary-dashed-color: var(--td-button-primary-dashed-color, @brand-color);
+@button-primary-dashed-border-color: var(--td-button-primary-dashed-border-color, @button-primary-dashed-color);
+@button-primary-dashed-disabled-color: var(--td-button-primary-dashed-disabled-color, @brand-color-disabled);
+// danger + dashed
+@button-danger-dashed-color: var(--td-button-danger-dashed-color, @error-color);
+@button-danger-dashed-border-color: var(--td-button-danger-dashed-border-color, @button-danger-dashed-color);
+@button-danger-dashed-disabled-color: var(--td-button-danger-dashed-disabled-color, @button-danger-disabled-color);
+// primary + text
+@button-primary-text-color: var(--td-button-primary-text-color, @brand-color);
+@button-primary-text-disabled-color: var(--td-button-primary-text-disabled-color, @brand-color-disabled);
+// danger + text
+@button-danger-text-color: var(--td-button-danger-text-color, @error-color);
+@button-danger-text-disabled-color: var(--td-button-danger-text-disabled-color, @button-danger-disabled-color);
+// light + text
+@button-light-text-color: var(--td-button-light-text-color, @brand-color);
+// ghost 优先级高于 theme，固定透明背景，白色边框，白色字体
+@button-ghost-color: var(--td-button-ghost-color, @text-color-anti);
+@button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color);
+@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, @font-white-4);
+@button-ghost-hover-color: var(--td-button-ghost-hover-color, @font-white-2);
+@button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color);
+@button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color);
+@button-ghost-primary-hover-color: var(--td-button-ghost-primary-hover-color, @brand-color-active);
+@button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color);
+@button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color);
+@button-ghost-danger-hover-color: var(--td-button-ghost-danger-hover-color, @error-color-active);
+
+// 激活态背景和边框色
+@button-default-active-bg-color: var(--td-button-default-active-bg-color, @bg-color-component-active);
+@button-default-active-border-color: var(--td-button-default-active-border-color, @bg-color-component-active);
+@button-light-active-bg-color: var(--td-button-light-active-bg-color, @brand-color-light-active);
+@button-light-active-border-color: var(--td-button-light-active-border-color, @brand-color-light-active);
+@button-primary-active-bg-color: var(--td-button-primary-active-bg-color, @brand-color-active);
+@button-primary-active-border-color: var(--td-button-primary-active-border-color, @brand-color-active);
+@button-danger-active-bg-color: var(--td-button-danger-active-bg-color, @error-color-active);
+@button-danger-active-border-color: var(--td-button-danger-active-border-color, @error-color-active);
+@button-default-outline-active-bg-color: var(--td-button-default-outline-active-bg-color, @bg-color-container-active);
+@button-default-outline-active-border-color: var(--td-button-default-outline-active-border-color, @component-border);
+@button-primary-outline-active-bg-color: var(--td-button-primary-outline-active-bg-color, @bg-color-container-active);
+@button-primary-outline-active-border-color: var(--td-button-primary-outline-active-border-color, @brand-color-active);
+@button-danger-outline-active-bg-color: var(--td-button-danger-outline-active-bg-color, @bg-color-container-active);
+@button-danger-outline-active-border-color: var(--td-button-danger-outline-active-border-color, @error-color-active);
+@button-light-outline-active-bg-color: var(--td-button-light-outline-active-bg-color, @brand-color-light-active);
+@button-light-outline-active-border-color: var(--td-button-light-outline-active-border-color, @brand-color-active);
+@button-default-text-active-bg-color: var(--td-button-default-text-active-bg-color, @bg-color-container-active);
+@button-primary-text-active-bg-color: var(--td-button-primary-text-active-bg-color, @bg-color-container-active);
+@button-danger-text-active-bg-color: var(--td-button-danger-text-active-bg-color, @bg-color-container-active);
+@button-light-text-active-bg-color: var(--td-button-light-text-active-bg-color, @bg-color-container-active);
+
+@button: ~'@{prefix}-button';
+
+.button-size(@size) {
+  @fontSize: 'button-@{size}-font-size';
+  @padding: 'button-@{size}-padding-horizontal';
+  @height: 'button-@{size}-height';
+  @iconSize: 'button-@{size}-icon-font-size';
+
+  .@{button}--size-@{size} {
+    font-size: @@fontSize;
+    padding-left: @@padding;
+    padding-right: @@padding;
+    height: @@height;
+    line-height: @@height;
+
+    // --td-icon-font-size: @@iconSize;
+
+    // & :deep(.@{button}__icon) {
+    //   font-size: @@iconSize;
+    // }
+  }
+}
+
+.button-theme(@theme) {
+  @color: 'button-@{theme}-color';
+  @bgColor: 'button-@{theme}-bg-color';
+  @borderColor: 'button-@{theme}-border-color';
+  @disabledColor: 'button-@{theme}-disabled-color';
+  @disabledBorderColor: 'button-@{theme}-disabled-border-color';
+  @disabledBgColor: 'button-@{theme}-disabled-bg';
+  @activeBgColor: 'button-@{theme}-active-bg-color';
+  @activeBorderColor: 'button-@{theme}-active-border-color';
+
+  .@{button}--@{theme} {
+    color: @@color;
+    background-color: @@bgColor;
+
+    &::after {
+      border-width: @button-border-width;
+      border-color: @@borderColor;
+    }
+    border-color: @@borderColor;
+
+    &.@{button}--hover {
+      z-index: 0;
+      &,
+      &::after {
+        background-color: @@activeBgColor;
+        border-color: @@activeBorderColor;
+      }
+    }
+
+    &.@{button}--disabled {
+      color: @@disabledColor;
+      background-color: @@disabledBgColor;
+
+      &,
+      &::after {
+        border-color: @@disabledBorderColor;
+      }
+    }
+  }
+}
+
+.button-size(extra-small);
+.button-size(small);
+.button-size(medium);
+.button-size(large);
+
+.button-theme(default);
+.button-theme(primary);
+.button-theme(light);
+.button-theme(danger);
+
+.ghost-theme(@theme) {
+  @color: 'button-ghost-@{theme}-color';
+  @hoverColor: 'button-ghost-@{theme}-hover-color';
+  @borderColor: 'button-ghost-@{theme}-border-color';
+
+  &.@{button}--@{theme} when (@theme = primary), (@theme = danger) {
+    color: @@color;
+
+    &,
+    &::after {
+      border-color: @@borderColor;
+    }
+
+    &.@{button}--hover {
+      color: @@hoverColor;
+
+      &,
+      &::after {
+        background-color: transparent;
+        border-color: @@hoverColor;
+      }
+    }
+  }
+
+  &.@{button}--@{theme} {
+    &.@{button}--text.@{button}--hover,
+    &.@{button}--text.@{button}--hover::after {
+      background-color: @gray-color-10;
+    }
+
+    &.@{button}--disabled {
+      background-color: transparent;
+      color: @button-ghost-disabled-color;
+
+      &,
+      &::after {
+        border-color: @button-ghost-disabled-color;
+      }
+    }
+  }
+}
+
+.@{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: @button-border-radius;
+  outline: none;
+  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  font-weight: @button-font-weight;
+  vertical-align: top;
+  box-sizing: border-box;
+  
+  margin-left: auto;
+  margin-right: auto;
+
+  .cursor-pointer();
+
+  /* stylelint-disable-next-line */
+  -webkit-appearance: none;
+
+  &::after {
+    border-radius: calc(@button-border-radius * 2);
+  }
+
+  &--text {
+    color: @button-default-color;
+    background-color: transparent;
+
+    &,
+    &::after {
+      border: 0;
+    }
+
+    &.@{button}--hover,
+    &.@{button}--hover::after {
+      background-color: @button-default-text-active-bg-color;
+    }
+
+    &.@{button}--primary {
+      color: @button-primary-text-color;
+      background-color: transparent;
+
+      &.@{button}--hover,
+      &.@{button}--hover::after {
+        background-color: @button-primary-text-active-bg-color;
+      }
+
+      &.@{button}--disabled {
+        color: @button-primary-text-disabled-color;
+        background-color: @bg-color-container;
+      }
+    }
+
+    &.@{button}--danger {
+      color: @button-danger-text-color;
+      background-color: transparent;
+
+      &.@{button}--hover,
+      &.@{button}--hover::after {
+        background-color: @button-danger-text-active-bg-color;
+      }
+
+      &.@{button}--disabled {
+        color: @button-danger-text-disabled-color;
+        background-color: @bg-color-container;
+      }
+    }
+
+    &.@{button}--light {
+      color: @button-light-text-color;
+      background-color: transparent;
+
+      &.@{button}--hover,
+      &.@{button}--hover::after {
+        background-color: @button-light-text-active-bg-color;
+      }
+    }
+
+    &.@{button}--disabled {
+      color: @button-default-disabled-color;
+    }
+  }
+
+  &--outline {
+    color: @button-default-outline-color;
+    background-color: @bg-color-container;
+
+    &,
+    &::after {
+      border-color: @button-default-outline-border-color;
+    }
+
+    &.@{button}--hover,
+    &.@{button}--hover::after {
+      background-color: @button-default-outline-active-bg-color;
+      border-color: @button-default-outline-active-border-color;
+    }
+
+    &.@{button}--disabled {
+      color: @button-default-outline-disabled-color;
+
+      &,
+      &::after {
+        border-color: @button-default-outline-disabled-color;
+      }
+    }
+
+    &.@{button}--primary {
+      color: @button-primary-outline-color;
+
+      &,
+      &::after {
+        border-color: @button-primary-outline-border-color;
+      }
+
+      &.@{button}--hover {
+        color: @button-primary-outline-active-border-color;
+
+        &::after {
+          background-color: @button-primary-outline-active-bg-color;
+          border-color: @button-primary-outline-active-border-color;
+        }
+      }
+
+      &.@{button}--disabled {
+        background-color: transparent;
+        color: @button-primary-outline-disabled-color;
+
+        &,
+        &::after {
+          border-color: @button-primary-outline-disabled-color;
+        }
+      }
+    }
+
+    &.@{button}--danger {
+      color: @button-danger-outline-color;
+
+      &,
+      &::after {
+        border-color: @button-danger-outline-border-color;
+      }
+
+      &.@{button}--hover {
+        color: @button-danger-outline-active-border-color;
+
+        &::after {
+          background-color: @button-danger-outline-active-bg-color;
+          border-color: @button-danger-outline-active-border-color;
+        }
+      }
+
+      &.@{button}--disabled {
+        background-color: @bg-color-container;
+        color: @button-danger-outline-disabled-color;
+
+        &,
+        &::after {
+          border-color: @button-danger-outline-disabled-color;
+        }
+      }
+    }
+
+    &.@{button}--light {
+      color: @button-light-outline-color;
+      background-color: @button-light-outline-bg-color;
+
+      &,
+      &::after {
+        border-color: @button-light-outline-border-color;
+      }
+
+      &.@{button}--hover {
+        color: @button-light-outline-active-border-color;
+
+        &,
+        &::after {
+          background-color: @button-light-outline-active-bg-color;
+          border-color: @button-light-outline-active-border-color;
+        }
+      }
+
+      &.@{button}--disabled {
+        background-color: @bg-color-container;
+        color: @button-light-outline-disabled-color;
+
+        &,
+        &::after {
+          border-color: @button-light-outline-disabled-color;
+        }
+      }
+    }
+  }
+
+  &--dashed {
+    background-color: @bg-color-container;
+    border-style: dashed;
+    border-width: 2rpx;
+
+    &::after {
+      border: 0;
+    }
+
+    &.@{button}--hover,
+    &.@{button}--hover::after {
+      background-color: @button-default-outline-active-bg-color;
+      border-color: @button-default-outline-active-border-color;
+    }
+
+    &.@{button}--primary {
+      color: @button-primary-dashed-color;
+
+      &,
+      &::after {
+        border-color: @button-primary-dashed-border-color;
+      }
+
+      &.@{button}--disabled {
+        background-color: @bg-color-container;
+        color: @button-primary-dashed-disabled-color;
+
+        &,
+        &::after {
+          border-color: @button-primary-dashed-disabled-color;
+        }
+      }
+    }
+
+    &.@{button}--danger {
+      color: @button-danger-dashed-color;
+
+      &,
+      &::after {
+        border-color: @button-danger-dashed-border-color;
+      }
+
+      &.@{button}--disabled {
+        background-color: transparent;
+        color: @button-danger-dashed-disabled-color;
+
+        &::after {
+          border-color: @button-danger-dashed-disabled-color;
+        }
+      }
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    color: @button-ghost-color;
+
+    &,
+    &::after {
+      border-color: @button-ghost-border-color;
+    }
+
+    &.@{button}--default.@{button}--hover {
+      color: @button-ghost-hover-color;
+
+      &,
+      &::after {
+        background-color: transparent;
+        border-color: @button-ghost-hover-color;
+      }
+    }
+
+    // 不考虑 ghost + light 场景
+    .ghost-theme(primary);
+    .ghost-theme(danger);
+    .ghost-theme(default);
+  }
+
+  // :deep(&__loading) + &__content:not(:empty),
+  // :deep(&__icon) + &__content:not(:empty),
+  &__content--has-icon {
+    margin-left: 8rpx;
+  }
+
+  // :deep(&__icon) {
+  //   border-radius: @button-icon-border-radius;
+  // }
+
+  // 圆角长方形
+  &--round {
+    &.@{button}--size-large {
+      border-radius: calc(@button-large-height / 2);
+
+      &::after {
+        border-radius: @button-large-height;
+      }
+    }
+
+    &.@{button}--size-medium {
+      border-radius: calc(@button-medium-height / 2);
+
+      &::after {
+        border-radius: @button-medium-height;
+      }
+    }
+
+    &.@{button}--size-small {
+      border-radius: calc(@button-small-height / 2);
+
+      &::after {
+        border-radius: @button-small-height;
+      }
+    }
+
+    &.@{button}--size-extra-small {
+      border-radius: calc(@button-extra-small-height / 2);
+
+      &::after {
+        border-radius: @button-extra-small-height;
+      }
+    }
+  }
+
+  // 正方形
+  &--square {
+    padding: 0;
+
+    &.@{button}--size-large {
+      width: @button-large-height;
+    }
+
+    &.@{button}--size-medium {
+      width: @button-medium-height;
+    }
+
+    &.@{button}--size-small {
+      width: @button-small-height;
+    }
+
+    &.@{button}--size-extra-small {
+      width: @button-extra-small-height;
+    }
+  }
+
+  // 圆形
+  &--circle {
+    padding: 0;
+    border-radius: 50%;
+
+    &.@{button}--size-large {
+      width: @button-large-height;
+
+      &::after {
+        border-radius: 50%;
+      }
+    }
+
+    &.@{button}--size-medium {
+      width: @button-medium-height;
+
+      &::after {
+        border-radius: 50%;
+      }
+    }
+
+    &.@{button}--size-small {
+      width: @button-small-height;
+
+      &::after {
+        border-radius: 50%;
+      }
+    }
+
+    &.@{button}--size-extra-small {
+      width: @button-extra-small-height;
+
+      &::after {
+        border-radius: 50%;
+      }
+    }
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  // :deep(&__loading) {
+  //   &--wrapper {
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+  //   }
+  // }
+
+  &.@{button}--hover::after {
+    z-index: -1;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/button/button.vue b/packages/tdesign-uniapp/components/button/button.vue
new file mode 100644
index 000000000..dddaf8bfb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/button.vue
@@ -0,0 +1,237 @@
+<template>
+  <button
+    :id="tId"
+    :style="_._style([customStyle])"
+    :data-custom="customDataset"
+    :class="className"
+    :form-type="disabled || loading ? '' : type"
+    :open-type="disabled || loading ? '' : openType"
+    :hover-stop-propagation="hoverStopPropagation"
+    :hover-start-time="hoverStartTime"
+    :hover-stay-time="hoverStayTime"
+    :lang="lang"
+    :session-from="sessionFrom"
+    :hover-class="disabled || loading ? '' : hoverClass || classPrefix + '--hover'"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :app-parameter="appParameter"
+    :show-message-card="showMessageCard"
+    :aria-label="ariaLabel"
+    @click.stop.prevent="handleTap"
+    @getuserinfo="getuserinfo"
+    @contact="contact"
+    @getphonenumber="getphonenumber"
+    @error="error"
+    @opensetting="opensetting"
+    @launchapp="launchapp"
+    @chooseavatar="chooseavatar"
+    @agreeprivacyauthorization="agreeprivacyauthorization"
+  >
+    <block
+      v-if="_icon"
+      name="icon"
+    >
+      <t-icon
+        :custom-style="iconCustomStyle"
+        :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ') + tClassIcon"
+        :prefix="_icon.prefix"
+        :name="_icon.name || ''"
+        :size="_icon.size"
+        :color="_icon.color"
+        @click="'handleClose' || ''"
+      />
+    </block>
+    <t-loading
+      v-if="loading"
+      :delay="loadingProps.delay || 0"
+      :duration="loadingProps.duration || 800"
+      :indicator="loadingProps.indicator || true"
+      :inherit-color="loadingProps.inheritColor || true"
+      :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 ' + tClassLoading"
+      :custom-style="loadingCustomStyle"
+    />
+    <view
+      :class="classPrefix + '__content '
+        + ((_icon && _icon.name || loading) && content ? classPrefix + '__content--has-icon' : '')"
+    >
+      <slot name="content" />
+      <block v-if="content">
+        {{ content }}
+      </block>
+      <slot />
+    </view>
+    <slot name="suffix" />
+  </button>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tLoading from '../loading/loading';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-button`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-loading`,
+  ],
+  components: {
+    tIcon,
+    tLoading,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      _,
+      prefix,
+      className: '',
+      classPrefix: name,
+      _icon: undefined,
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      const fontSize = {
+        'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
+        small: 'var(--td-button-small-icon-font-size, 18px)',
+        medium: 'var(--td-button-medium-icon-font-size, 20px)',
+        large: 'var(--td-button-large-icon-font-size, 24px)',
+      };
+
+      return _._style([
+        {
+          fontSize: fontSize[this.size || 'medium'],
+          borderRadius: 'var(--td-button-icon-border-radius, 4px)',
+        },
+        this._icon.style || '',
+      ]);
+    },
+    loadingCustomStyle() {
+      return _._style({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      });
+    },
+  },
+  watch: {
+    icon: {
+      handler(value) {
+        this._icon = calcIcon(value, '');
+      },
+      immediate: true,
+    },
+    theme: 'setClass',
+    size: 'setClass',
+    plain: 'setClass',
+    block: 'setClass',
+    shape: 'setClass',
+    disabled: 'setClass',
+    loading: 'setClass',
+    variant: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+  },
+  methods: {
+    setClass() {
+      const t = [
+        name,
+        this.tClass,
+        `${name}--${this.variant || 'base'}`,
+        `${name}--${this.theme || 'default'}`,
+        `${name}--${this.shape || 'rectangle'}`,
+        `${name}--size-${this.size || 'medium'}`,
+      ];
+      if (this.block) {
+        t.push(`${name}--block`);
+      }
+      if (this.disabled) {
+        t.push(`${name}--disabled`);
+      }
+      if (this.ghost) {
+        t.push(`${name}--ghost`);
+      }
+      this.className = t.join(' ');
+    },
+    getuserinfo(t) {
+      this.$emit('getuserinfo', t);
+    },
+    contact(t) {
+      this.$emit('contact', t);
+    },
+    getphonenumber(t) {
+      this.$emit('getphonenumber', t);
+    },
+    error(t) {
+      this.$emit('error', t);
+    },
+    opensetting(t) {
+      this.$emit('opensetting', t);
+    },
+    launchapp(t) {
+      this.$emit('launchapp', t);
+    },
+    chooseavatar(t) {
+      this.$emit('chooseavatar', t);
+    },
+    agreeprivacyauthorization(t) {
+      this.$emit('agreeprivacyauthorization', t);
+    },
+    handleTap(t) {
+      if (this.disabled || this.loading) return;
+      this.$emit('click', t);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './button.css';
+
+/* #ifdef MP-QQ */
+/* 适配 qq 小程序 */
+.t-button--outline {
+  border-style: solid;
+  border-width: 1px;
+}
+.t-button--ghost {
+  border-style: solid;
+  border-width: 1px;
+}
+/* #endif */
+
+/* #ifdef H5 || MP-WEIXIN */
+:deep(.t-button__loading) + .t-button__content:not(:empty) {
+  margin-left: 4px;
+}
+:deep(.t-button__icon) + .t-button__content:not(:empty) {
+  margin-left: 4px;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/button/props.ts b/packages/tdesign-uniapp/components/button/props.ts
new file mode 100644
index 000000000..c16b0530b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/props.ts
@@ -0,0 +1,207 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps } from './type';
+export default {
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
+  appParameter: {
+    type: String,
+    default: '',
+  },
+  /** 是否为块级元素 */
+  block: Boolean,
+  /** 按钮内容 */
+  content: {
+    type: String,
+  },
+  /** 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取 */
+  customDataset: {
+    type: [String, Number, Boolean, Object, Array],
+    default: () => ({}) as TdButtonProps['customDataset'],
+  },
+  /** 禁用状态。优先级：Button.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否为幽灵按钮（镂空按钮） */
+  ghost: Boolean,
+  /** 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 */
+  hoverClass: {
+    type: String,
+    default: '',
+  },
+  /** 按住后多久出现点击态，单位毫秒 */
+  hoverStartTime: {
+    type: Number,
+    default: 20,
+  },
+  /** 手指松开后点击态保留时间，单位毫秒 */
+  hoverStayTime: {
+    type: Number,
+    default: 70,
+  },
+  /** 指定是否阻止本节点的祖先节点出现点击态 */
+  hoverStopPropagation: Boolean,
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 指定返回用户信息的语言，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) */
+  lang: {
+    type: String,
+    validator(val: TdButtonProps['lang']): boolean {
+      if (!val) return true;
+      return ['en', 'zh_CN', 'zh_TW'].includes(val);
+    },
+  },
+  /** 是否显示为加载状态 */
+  loading: Boolean,
+  /** 透传 Loading 组件全部属性 */
+  loadingProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<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 />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */
+  openType: {
+    type: String,
+    validator(val: TdButtonProps['openType']): boolean {
+      if (!val) return true;
+      return ['contact', 'share', 'getPhoneNumber', 'getUserInfo', 'launchApp', 'openSetting', 'feedback', 'chooseAvatar', 'agreePrivacyAuthorization'].includes(val);
+    },
+  },
+  /** 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 */
+  phoneNumberNoQuotaToast: {
+    type: Boolean,
+    default: true,
+  },
+  /** 会话内消息卡片图片，open-type="contact"时有效 */
+  sendMessageImg: {
+    type: String,
+    default: '截图',
+  },
+  /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
+  sendMessagePath: {
+    type: String,
+    default: '当前分享路径',
+  },
+  /** 会话内消息卡片标题，open-type="contact"时有效 */
+  sendMessageTitle: {
+    type: String,
+    default: '当前标题',
+  },
+  /** 会话来源，open-type="contact"时有效 */
+  sessionFrom: {
+    type: String,
+    default: '',
+  },
+  /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
+  shape: {
+    type: String,
+    default: 'rectangle' as TdButtonProps['shape'],
+    validator(val: TdButtonProps['shape']): boolean {
+      if (!val) return true;
+      return ['rectangle', 'square', 'round', 'circle'].includes(val);
+    },
+  },
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 */
+  showMessageCard: Boolean,
+  /** 组件尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdButtonProps['size'],
+    validator(val: TdButtonProps['size']): boolean {
+      if (!val) return true;
+      return ['extra-small', 'small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 按钮标签id */
+  tId: {
+    type: String,
+    default: '',
+  },
+  /** 组件风格，依次为品牌色、危险色 */
+  theme: {
+    type: String,
+    default: 'default' as TdButtonProps['theme'],
+    validator(val: TdButtonProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'primary', 'danger', 'light'].includes(val);
+    },
+  },
+  /** 同小程序的 formType */
+  type: {
+    type: String,
+    validator(val: TdButtonProps['type']): boolean {
+      if (!val) return true;
+      return ['submit', 'reset'].includes(val);
+    },
+  },
+  /** 按钮形式，基础、线框、虚线、文字 */
+  variant: {
+    type: String,
+    default: 'base' as TdButtonProps['variant'],
+    validator(val: TdButtonProps['variant']): boolean {
+      if (!val) return true;
+      return ['base', 'outline', 'dashed', 'text'].includes(val);
+    },
+  },
+  /** 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })） */
+  onAgreeprivacyauthorization: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接 */
+  onChooseavatar: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，客服消息回调，`open-type="contact"` 时有效 */
+  onContact: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效 */
+  onCreateliveactivity: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
+  onGetphonenumber: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
+  onGetrealtimephonenumber: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 */
+  onGetuserinfo: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 打开 APP 成功的回调，`open-type=launchApp` 时有效 */
+  onLaunchapp: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效 */
+  onOpensetting: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/button/type.ts b/packages/tdesign-uniapp/components/button/type.ts
new file mode 100644
index 000000000..5d62b1436
--- /dev/null
+++ b/packages/tdesign-uniapp/components/button/type.ts
@@ -0,0 +1,192 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps as LoadingProps } from '../loading/type';
+
+export interface TdButtonProps {
+  /**
+   * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+   * @default ''
+   */
+  appParameter?: string;
+  /**
+   * 是否为块级元素
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 按钮内容
+   */
+  content?: string;
+  /**
+   * 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取
+   * @default {}
+   */
+  customDataset?: string | number | boolean | object | Array<string | number | boolean | object>;
+  /**
+   * 禁用状态。优先级：Button.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 是否为幽灵按钮（镂空按钮）
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果
+   * @default ''
+   */
+  hoverClass?: string;
+  /**
+   * 按住后多久出现点击态，单位毫秒
+   * @default 20
+   */
+  hoverStartTime?: number;
+  /**
+   * 手指松开后点击态保留时间，单位毫秒
+   * @default 70
+   */
+  hoverStayTime?: number;
+  /**
+   * 指定是否阻止本节点的祖先节点出现点击态
+   * @default false
+   */
+  hoverStopPropagation?: boolean;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 指定返回用户信息的语言，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)
+   */
+  lang?: 'en' | 'zh_CN' | 'zh_TW';
+  /**
+   * 是否显示为加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 透传 Loading 组件全部属性
+   * @default {}
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<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 />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
+   */
+  openType?:
+    | 'contact'
+    | 'share'
+    | 'getPhoneNumber'
+    | 'getUserInfo'
+    | 'launchApp'
+    | 'openSetting'
+    | 'feedback'
+    | 'chooseAvatar'
+    | 'agreePrivacyAuthorization';
+  /**
+   * 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效
+   * @default true
+   */
+  phoneNumberNoQuotaToast?: boolean;
+  /**
+   * 会话内消息卡片图片，open-type="contact"时有效
+   * @default 截图
+   */
+  sendMessageImg?: string;
+  /**
+   * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+   * @default 当前分享路径
+   */
+  sendMessagePath?: string;
+  /**
+   * 会话内消息卡片标题，open-type="contact"时有效
+   * @default 当前标题
+   */
+  sendMessageTitle?: string;
+  /**
+   * 会话来源，open-type="contact"时有效
+   * @default ''
+   */
+  sessionFrom?: string;
+  /**
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
+   */
+  shape?: 'rectangle' | 'square' | 'round' | 'circle';
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
+   * @default false
+   */
+  showMessageCard?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: 'extra-small' | 'small' | 'medium' | 'large';
+  /**
+   * 按钮标签id
+   * @default ''
+   */
+  tId?: string;
+  /**
+   * 组件风格，依次为品牌色、危险色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'light';
+  /**
+   * 同小程序的 formType
+   */
+  type?: 'submit' | 'reset';
+  /**
+   * 按钮形式，基础、线框、虚线、文字
+   * @default base
+   */
+  variant?: 'base' | 'outline' | 'dashed' | 'text';
+  /**
+   * 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
+   */
+  onAgreeprivacyauthorization?: () => void;
+  /**
+   * 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
+   */
+  onChooseavatar?: () => void;
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
+   */
+  onContact?: () => void;
+  /**
+   * 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
+   */
+  onCreateliveactivity?: () => void;
+  /**
+   * 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
+   */
+  onError?: () => void;
+  /**
+   * 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+   */
+  onGetphonenumber?: () => void;
+  /**
+   * 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+   */
+  onGetrealtimephonenumber?: () => void;
+  /**
+   * 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
+   */
+  onGetuserinfo?: () => void;
+  /**
+   * 打开 APP 成功的回调，`open-type=launchApp` 时有效
+   */
+  onLaunchapp?: () => void;
+  /**
+   * 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
+   */
+  onOpensetting?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/calendar/README.en-US.md b/packages/tdesign-uniapp/components/calendar/README.en-US.md
new file mode 100644
index 000000000..3977a5a6d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/README.en-US.md
@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+
+### Calendar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-close | Boolean | true | \- | N
+confirm-btn | String / Object | '' | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+first-day-of-week | Number | 0 | \- | N
+format | Function | - | Typescript：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+locale-text | Object | - | Typescript：`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+max-date | Number | - | \- | N
+min-date | Number | - | \- | N
+readonly | Boolean | - | \- | N
+switch-mode | String | none | options: none/month/year-month | N
+title | String | - | \- | N
+type | String | 'single' | options: single/multiple/range | N
+use-popup | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+value | Number / Array | - | `v-model:value` is supported。Typescript：`number \| number[]` | N
+default-value | Number / Array | - | uncontrolled property。Typescript：`number \| number[]` | N
+visible | Boolean | false | \- | N
+
+### Calendar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number \| number[] })` | \-
+close | `(context: { trigger: CalendarTrigger })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay' \| 'auto-close'`<br/>
+confirm | `(context: { value: number \| number[] })` | \-
+panel-change | `(context: { year: number, month: number })` | \-
+scroll | `(context: {scrollLeft: number, scrollTop: number, scrollHeight: number, scrollWidth: number, deltaX: number, deltaY: number})` | triggered when scrolling
+select | `(context: { value: number \| number[] })` | \-
+
+### Calendar Slots
+
+name | Description
+-- | --
+confirm-btn | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @text-color-secondary | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @text-color-disabled | - 
+--td-calendar-item-suffix-color | @text-color-placeholder | - 
+--td-calendar-radius | 24rpx | - 
+--td-calendar-selected-border-radius | @radius-default | - 
+--td-calendar-selected-color | @text-color-anti | - 
+--td-calendar-switch-mode-icon-color | @text-color-secondary | - 
+--td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | - 
+--td-calendar-title-color | @text-color-primary | - 
+--td-calendar-title-font-size | 18px | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/calendar/README.md b/packages/tdesign-uniapp/components/calendar/README.md
new file mode 100644
index 000000000..778b4c2bd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/README.md
@@ -0,0 +1,112 @@
+---
+title: Calendar 日历
+description: 按照日历形式展示数据或日期的容器。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+```
+
+### 组件类型
+
+#### 单个选择日历
+
+{{ base }}
+
+#### 多个选择日历
+
+{{ multiple }}
+
+#### 带单行/双行描述的日历
+
+{{ custom-text }}
+
+#### 带翻页功能的日历
+
+{{ switch-mode }}
+
+#### 可选择区间日期的日历
+
+{{ range }}
+
+### 组件样式
+
+#### 国际化
+
+{{ local-text }}
+
+#### 含不可选的日历
+
+{{ custom-range }}
+
+#### 不使用 Popup
+
+{{ without-popup }}
+
+## API
+
+### Calendar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-close | Boolean | true | 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
+confirm-btn | String / Object | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+first-day-of-week | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
+format | Function | - | 用于格式化日期的函数。TS 类型：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+locale-text | Object | - | 国际化文案。TS 类型：`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts) | N
+max-date | Number | - | 最大可选的日期，不传则默认半年后 | N
+min-date | Number | - | 最小可选的日期，不传则默认今天 | N
+readonly | Boolean | - | 是否只读，只读状态下不能选择日期 | N
+switch-mode | String | none | 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换。可选项：none/month/year-month | N
+title | String | - | 标题，不传默认为“请选择日期” | N
+type | String | 'single' | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N
+use-popup | Boolean | true | 是否使用弹出层包裹日历 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+value | Number / Array | - | 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组。支持语法糖 `v-model:value`。TS 类型：`number \| number[]` | N
+default-value | Number / Array | - | 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组。非受控属性。TS 类型：`number \| number[]` | N
+visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 | N
+
+### Calendar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number \| number[] })` | 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
+close | `(context: { trigger: CalendarTrigger })` | 关闭按钮时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay' \| 'auto-close'`<br/>
+confirm | `(context: { value: number \| number[] })` | 点击确认按钮时触发
+panel-change | `(context: { year: number, month: number })` | 切换月或年时触发（switch-mode 不为 none 时有效）
+scroll | `(context: {scrollLeft: number, scrollTop: number, scrollHeight: number, scrollWidth: number, deltaX: number, deltaY: number})` | 滚动时触发
+select | `(context: { value: number \| number[] })` | 点击日期时触发
+
+### Calendar Slots
+
+名称 | 描述
+-- | --
+confirm-btn | 确认按钮
+title | 标题
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-calendar-active-color | @brand-color | - |
+| --td-calendar-bg-color | @bg-color-container | - |
+| --td-calendar-days-color | @text-color-secondary | - |
+| --td-calendar-item-centre-color | @brand-color-light | - |
+| --td-calendar-item-disabled-color | @text-color-disabled | - |
+| --td-calendar-item-suffix-color | @text-color-placeholder | - |
+| --td-calendar-radius | 24rpx | - |
+| --td-calendar-selected-border-radius | @radius-default | - |
+| --td-calendar-selected-color | @text-color-anti | - |
+| --td-calendar-switch-mode-icon-color | @text-color-secondary | - |
+| --td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | - |
+| --td-calendar-title-color | @text-color-primary | - |
+| --td-calendar-title-font-size | 18px | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/calendar/_example/base/index.vue b/packages/tdesign-uniapp/components/calendar/_example/base/index.vue
new file mode 100644
index 000000000..c575277ba
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/base/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      @confirm="handleConfirm"
+      @close="onClose"
+    />
+    <t-cell
+      arrow
+      title="单个选择日历"
+      :note="formatTimestamp(value)"
+      @click="handleCalendar"
+    />
+  </view>
+</template>
+<script>
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import { formatTimestamp } from '../computed';
+
+
+export default {
+  components: {
+    tCalendar,
+    tCell,
+  },
+  data() {
+    return {
+      visible: false,
+      value: null,
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      const { value } = e;
+      console.log(value);
+      this.value = value;
+    },
+    onClose(detail) {
+      console.log(detail.trigger);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/calendar.css b/packages/tdesign-uniapp/components/calendar/_example/calendar.css
new file mode 100644
index 000000000..0649306d4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/calendar.css
@@ -0,0 +1,3 @@
+.is-holiday:not(.t-calendar__dates-item--selected) {
+    color: #e34d59 !important;
+}
diff --git a/packages/tdesign-uniapp/components/calendar/_example/calendar.vue b/packages/tdesign-uniapp/components/calendar/_example/calendar.vue
new file mode 100644
index 000000000..06e305b03
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/calendar.vue
@@ -0,0 +1,84 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Calendar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Calendar 日历"
+        desc="按照日历形式展示数据或日期的容器"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础日历"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="">
+        <multiple />
+      </t-demo>
+
+      <t-demo desc="带单行描述的日历">
+        <custom-text />
+      </t-demo>
+
+      <t-demo desc="带翻页功能的日历">
+        <switch-mode />
+      </t-demo>
+
+      <t-demo desc="可选择区间日期的日历">
+        <range />
+      </t-demo>
+
+      <t-demo
+        title="02 组件样式"
+        desc="国际化"
+      >
+        <local-text />
+      </t-demo>
+
+      <t-demo desc="含不可选的日历">
+        <custom-range />
+      </t-demo>
+
+      <t-demo desc="不使用 Popup">
+        <without-popup />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import BaseDemo from './base';
+import multiple from './multiple';
+import customText from './custom-text';
+import switchMode from './switch-mode';
+import range from './range';
+import localText from './local-text';
+import customRange from './custom-range';
+import withoutPopup from './without-popup';
+export default {
+  components: {
+    BaseDemo,
+    multiple,
+    customText,
+    switchMode,
+    range,
+    localText,
+    customRange,
+    withoutPopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style>
+@import './calendar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/computed.js b/packages/tdesign-uniapp/components/calendar/_example/computed.js
new file mode 100644
index 000000000..8f0627eea
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/computed.js
@@ -0,0 +1,24 @@
+import { getDate } from 'tdesign-uniapp/common/runtime/wxs-polyfill';
+
+function getDateByTimestamp(val) {
+  const date = getDate(val);
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return [date.getFullYear(), month < 10 ? `0${month}` : month, day < 10 ? `0${day}` : day].join('-');
+}
+
+export function formatTimestamp(val) {
+  if (!val) return '';
+
+  let i = 0;
+  if (Array.isArray(val)) {
+    let _str = '';
+    for (let len = val.length; i < len; i++) {
+      _str += `${getDateByTimestamp(val[i])}、`;
+    }
+    return _str;
+  }
+
+  return getDateByTimestamp(val);
+}
+
diff --git a/packages/tdesign-uniapp/components/calendar/_example/custom-range/index.vue b/packages/tdesign-uniapp/components/calendar/_example/custom-range/index.vue
new file mode 100644
index 000000000..aa69d6ec3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/custom-range/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="handleConfirm"
+    />
+    <t-cell
+      arrow
+      title="含不可选的日历"
+      :note="formatTimestamp(value)"
+      @click="handleCalendar"
+    />
+  </view>
+</template>
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import { formatTimestamp } from '../computed';
+
+
+export default {
+  components: {
+    tCell,
+    tCalendar,
+  },
+  data() {
+    return {
+      visible: false,
+      value: new Date(2022, 1, 18).getTime(),
+      minDate: new Date(2022, 1, 18).getTime(),
+      maxDate: new Date(2022, 2, 1).getTime(),
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      const { value } = e;
+      this.value = value;
+      console.log(value);
+    },
+  },
+};
+</script>
+<style>
+.is-holiday:not(.t-calendar__dates-item--selected) {
+    color: #e34d59 !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/custom-text/index.vue b/packages/tdesign-uniapp/components/calendar/_example/custom-text/index.vue
new file mode 100644
index 000000000..fca0d94b7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/custom-text/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <view>
+    <t-cell
+      arrow
+      title="带单行描述的日历"
+      :note="formatTimestamp(singleValue)"
+      data-type="single"
+      @click="handleCalendar($event, { type: 'single' })"
+    />
+
+    <view class="demo-desc">
+      带双行描述的日历
+    </view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="type === 'single' ? singleValue : value"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :format="type === 'single' ? singleFormat : format"
+      :data-type="type"
+      @confirm="handleConfirm($event, { type })"
+    />
+    <t-cell
+      arrow
+      title="带双行描述的日历"
+      :note="formatTimestamp(value)"
+      data-type="multiple"
+      @click="handleCalendar($event, { type: 'multiple' })"
+    />
+  </view>
+</template>
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import { formatTimestamp } from '../computed';
+
+export default {
+  components: {
+    tCell,
+    tCalendar,
+  },
+  data() {
+    return {
+      type: 'single',
+      visible: false,
+      value: new Date(2022, 1, 18).getTime(),
+      singleValue: new Date(2022, 1, 18).getTime(),
+      minDate: new Date(2022, 1, 1).getTime(),
+      maxDate: new Date(2022, 2, 15).getTime(),
+      singleFormat(day) {
+        day.suffix = '¥60';
+        return day;
+      },
+      format(day) {
+        const { date } = day;
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const curDate = date.getDate();
+        day.suffix = '¥60';
+        if (year === 2022) {
+          if (month === 2) {
+            const map = {
+              1: '初一',
+              2: '初二',
+              3: '初三',
+              14: '情人节',
+              15: '元宵节',
+            };
+            if (curDate in map) {
+              day.prefix = map[curDate];
+              day.suffix = '¥100';
+              day.className = 'is-holiday';
+            }
+          }
+        }
+        return day;
+      },
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar(e, { type }) {
+      this.type = type;
+      console.log('type', type);
+      this.visible = true;
+    },
+    handleConfirm(e, { type }) {
+      const { value } = e;
+      if (type === 'single') {
+        this.singleValue = value;
+      } else {
+        this.value = value;
+      }
+      console.log(e.value);
+    },
+  },
+};
+</script>
+<style>
+.demo-desc {
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+:deep(.is-holiday:not(.t-calendar__dates-item--selected)) {
+    color: #e34d59 !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/local-text/index.vue b/packages/tdesign-uniapp/components/calendar/_example/local-text/index.vue
new file mode 100644
index 000000000..06c9d36aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/local-text/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :locale-text="localeText"
+      @confirm="handleConfirm"
+      @close="onClose"
+    />
+    <t-cell
+      arrow
+      title="国际化"
+      :note="formatTimestamp(value)"
+      @click="handleCalendar"
+    />
+  </view>
+</template>
+<script>
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import { formatTimestamp } from '../computed';
+
+
+export default {
+  components: {
+    tCalendar,
+    tCell,
+  },
+  data() {
+    return {
+      visible: false,
+      value: new Date(2022, 1, 18).getTime(),
+      minDate: new Date(2022, 1, 1).getTime(),
+      maxDate: new Date(2022, 2, 15).getTime(),
+      localeText: {
+        title: 'Select Date',
+        weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        monthTitle: '{month} {year}',
+        confirm: 'Confirm',
+        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      const { value } = e;
+      this.value = value;
+    },
+    onClose(detail) {
+      console.log(detail.trigger);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/multiple/index.vue b/packages/tdesign-uniapp/components/calendar/_example/multiple/index.vue
new file mode 100644
index 000000000..a445c84a2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/multiple/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      type="multiple"
+      @confirm="handleConfirm"
+    />
+    <t-cell
+      arrow
+      title="多个选择日历"
+      @click="handleCalendar"
+    >
+      <template
+        #note
+      >
+        <view
+          class="custom-class-note"
+        >
+          {{ formatTimestamp(value) }}
+        </view>
+      </template>
+    </t-cell>
+  </view>
+</template>
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import { formatTimestamp } from '../computed';
+
+
+export default {
+  components: {
+    tCell,
+    tCalendar,
+  },
+  data() {
+    return {
+      visible: false,
+      value: null,
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      const { value } = e;
+      this.value = value;
+      console.log(e.value);
+    },
+  },
+};
+</script>
+<style>
+.custom-class-note {
+    width: 360rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/range/index.vue b/packages/tdesign-uniapp/components/calendar/_example/range/index.vue
new file mode 100644
index 000000000..60d7009a8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/range/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      :min-date="minDate"
+      :max-date="maxDate"
+      type="range"
+      @confirm="handleConfirm"
+    />
+
+    <view
+      class="wrapper"
+      @click="handleCalendar"
+    >
+      <view class="wrapper__left">
+        {{ formatTimestamp(value[0]) }}
+      </view>
+      <t-icon
+        class="wrapper__center"
+        name="swap-right"
+        size="40rpx"
+      />
+      <view class="wrapper__right">
+        {{ formatTimestamp(value[1]) }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import { formatTimestamp } from '../computed';
+
+
+export default {
+  components: {
+    tIcon,
+    tCalendar,
+  },
+  data() {
+    return {
+      visible: false,
+      value: [new Date(2024, 11, 5).getTime(), new Date(2024, 11, 10).getTime()],
+      minDate: new Date(2024, 10, 1).getTime(),
+      maxDate: new Date(2024, 12, 1).getTime(),
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      console.log(e.value);
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    background-color: var(--td-bg-color-container);
+    padding: 32rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.wrapper__center {
+    color: var(--td-text-color-placeholder);
+}
+
+.wrapper__left,
+.wrapper__right {
+    width: 240rpx;
+    color: var(--td-text-color-primary);
+    font-size: 32rpx;
+    font-weight: 600;
+    line-height: 48rpx;
+}
+
+.wrapper__right {
+    text-align: right;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/switch-mode/index.vue b/packages/tdesign-uniapp/components/calendar/_example/switch-mode/index.vue
new file mode 100644
index 000000000..2f8168edd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/switch-mode/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <view>
+    <t-calendar
+      v-model:visible="visible"
+      :value="value"
+      switch-mode="year-month"
+      :min-date="minDate"
+      :max-date="maxDate"
+      @confirm="handleConfirm"
+      @panel-change="handlePanelChange"
+    />
+    <t-cell
+      arrow
+      title="带翻页功能的日历"
+      :note="formatTimestamp(value)"
+      @click="handleCalendar"
+    />
+  </view>
+</template>
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+import { formatTimestamp } from '../computed';
+
+export default {
+  components: {
+    tCell,
+    tCalendar,
+  },
+  data() {
+    return {
+      visible: false,
+      value: new Date(2022, 1, 27).getTime(),
+      minDate: new Date(2022, 0, 10).getTime(),
+      maxDate: new Date(2027, 10, 27).getTime(),
+    };
+  },
+  created() {},
+  methods: {
+    formatTimestamp,
+    handleCalendar() {
+      this.visible = true;
+    },
+    handleConfirm(e) {
+      this.value = e.value;
+      console.log(e.value);
+    },
+    handlePanelChange(e) {
+      const { year, month } = e;
+      console.log('year: ', year, 'month: ', month);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/_example/without-popup/index.vue b/packages/tdesign-uniapp/components/calendar/_example/without-popup/index.vue
new file mode 100644
index 000000000..dcb8a4131
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/_example/without-popup/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+    <t-calendar
+      title="日历标题"
+      :use-popup="false"
+      type="multiple"
+      @select="handleSelect"
+    />
+  </view>
+</template>
+
+<script>
+import tCalendar from 'tdesign-uniapp/calendar/calendar.vue';
+export default {
+  components: {
+    tCalendar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleSelect(e) {
+      const { value } = e;
+      console.log(value);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/calendar-header.props.js b/packages/tdesign-uniapp/components/calendar/calendar-header.props.js
new file mode 100644
index 000000000..e30be2117
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/calendar-header.props.js
@@ -0,0 +1,42 @@
+export default {
+  tClass: {
+    type: String,
+    default: '',
+  },
+  classPrefix: {
+    type: String,
+    default: '',
+  },
+  switchMode: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  preYearBtnDisable: {
+    type: Boolean,
+  },
+  prevMonthBtnDisable: {
+    type: Boolean,
+  },
+  nextYearBtnDisable: {
+    type: Boolean,
+  },
+  nextMonthBtnDisable: {
+    type: Boolean,
+  },
+  tId: {
+    type: String,
+    default: '',
+  },
+  // realLocalText: {
+  //   type: Object,
+  //   default: () => ({}),
+  // },
+  // currentMonth: {
+  //   type: Array,
+  //   default: () => ([]),
+  // },
+};
diff --git a/packages/tdesign-uniapp/components/calendar/calendar-header.vue b/packages/tdesign-uniapp/components/calendar/calendar-header.vue
new file mode 100644
index 000000000..fe2629edf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/calendar-header.vue
@@ -0,0 +1,98 @@
+<template>
+  <view
+    :id="tId"
+    :class="' ' + tClass + ' ' + classPrefix + ' '+(switchMode !== 'none' ? classPrefix + '__with-action' : '')"
+  >
+    <view
+      v-if="switchMode !== 'none'"
+      :class="classPrefix + '__action'"
+    >
+      <view
+        v-if="switchMode === 'year-month'"
+        :class="utils.cls(classPrefix + '__icon', [['disabled', preYearBtnDisable]])"
+        :data-disabled="preYearBtnDisable"
+        data-type="pre-year"
+        @click="handleSwitchModeChange"
+      >
+        <TIcon name="chevron-left-double" />
+      </view>
+      <view
+        :class="utils.cls(classPrefix + '__icon', [['disabled', prevMonthBtnDisable]])"
+        :data-disabled="prevMonthBtnDisable"
+        data-type="pre-month"
+        @click="handleSwitchModeChange"
+      >
+        <TIcon name="chevron-left" />
+      </view>
+    </view>
+    <view :class="classPrefix + '__title'">
+      {{ title }}
+    </view>
+    <view
+      v-if="switchMode !== 'none'"
+      :class="classPrefix + '__action'"
+    >
+      <view
+        :class="utils.cls(classPrefix + '__icon', [['disabled', nextMonthBtnDisable]])"
+        :data-disabled="nextMonthBtnDisable"
+        data-type="next-month"
+        @click="handleSwitchModeChange"
+      >
+        <TIcon name="chevron-right" />
+      </view>
+      <view
+        v-if="switchMode === 'year-month'"
+        :class="utils.cls(classPrefix + '__icon', [['disabled', nextYearBtnDisable]])"
+        :data-disabled="nextYearBtnDisable"
+        data-type="next-year"
+        @click="handleSwitchModeChange"
+      >
+        <TIcon name="chevron-right-double" />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon.vue';
+import utils from '../common/utils.wxs';
+import props from './calendar-header.props';
+import { getMonthTitle } from './computed';
+
+export default {
+  name: 'TCalendarHeader',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'handleSwitchModeChange',
+  ],
+  data() {
+    return {
+      utils,
+    };
+  },
+  watch: {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleSwitchModeChange(...args) {
+      this.$emit('handleSwitchModeChange', ...args);
+    },
+    getMonthTitle,
+  },
+};
+
+</script>
+
+<style scoped>
+@import './calendar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/calendar.less b/packages/tdesign-uniapp/components/calendar/calendar.less
new file mode 100644
index 000000000..6ae0d896c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/calendar.less
@@ -0,0 +1,251 @@
+@import '../common/style/base.less';
+
+@calendar-radius: var(--td-calendar-radius, 24rpx);
+@calendar-bg-color: var(--td-calendar-bg-color, @bg-color-container);
+@calendar-active-color: var(--td-calendar-active-color, @brand-color);
+@calendar-selected-color: var(--td-calendar-selected-color, @text-color-anti);
+@calendar-selected-border-radius: var(--td-calendar-selected-border-radius, @radius-default);
+@calendar-title-font-size: var(--td-calendar-title-font-size, 18px);
+@calendar-title-color: var(--td-calendar-title-color, @text-color-primary);
+@calendar-days-color: var(--td-calendar-days-color, @text-color-secondary);
+@calendar-item-suffix-color: var(--td-calendar-item-suffix-color, @text-color-placeholder);
+@calendar-item-centre-color: var(--td-calendar-item-centre-color, @brand-color-light);
+@calendar-item-disabled-color: var(--td-calendar-item-disabled-color, @text-color-disabled);
+@calendar-switch-mode-icon-color: var(--td-calendar-switch-mode-icon-color, @text-color-secondary);
+@calendar-switch-mode-icon-disabled-color: var(--td-calendar-switch-mode-icon-disabled-color, @text-color-disabled);
+
+.@{prefix}-calendar {
+  width: inherit;
+  position: relative;
+  z-index: 9999;
+  background: @calendar-bg-color;
+  overflow-x: hidden;
+
+  &--popup {
+    border-top-left-radius: @calendar-radius;
+    border-top-right-radius: @calendar-radius;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: @calendar-title-font-size;
+    font-weight: 600;
+    color: @calendar-title-color;
+    height: 52rpx;
+    padding: 32rpx;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  // :deep(&__close-btn) {
+  //   position: absolute;
+  //   top: 32rpx;
+  //   right: 32rpx;
+  //   margin: -24rpx;
+  //   padding: 24rpx;
+  //   color: @calendar-title-color;
+  // }
+
+  &__days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-column-gap: 8rpx;
+    padding: 0 32rpx;
+    text-align: center;
+    line-height: 92rpx;
+
+    &-item {
+      height: 92rpx;
+      font-size: 28rpx;
+      color: @calendar-days-color;
+    }
+  }
+
+  &__content {
+    min-height: 400rpx;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__month {
+    font-size: 28rpx;
+    color: @calendar-title-color;
+    font-weight: 600;
+    padding: 32rpx 0 0;
+
+    &s {
+      height: 712rpx;
+      padding: 0 32rpx 32rpx;
+      box-sizing: border-box;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &__dates {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-column-gap: 8rpx;
+
+    &-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      border-radius: @calendar-selected-border-radius;
+      height: 120rpx;
+      line-height: 48rpx;
+      font-weight: 600;
+      margin-top: 16rpx;
+      color: @calendar-title-color;
+
+      .cursor-pointer();
+
+      &-prefix,
+      &-suffix {
+        position: absolute;
+        font-size: 20rpx;
+        line-height: 32rpx;
+        width: 100%;
+        text-align: center;
+        font-weight: 400;
+      }
+
+      &-prefix {
+        top: 8rpx;
+      }
+
+      &-suffix {
+        bottom: 8rpx;
+        color: @calendar-item-suffix-color;
+
+        &--selected,
+        &--start,
+        &--end {
+          color: @calendar-selected-color;
+        }
+
+        &--disabled {
+          color: @calendar-item-disabled-color;
+        }
+      }
+
+      &--selected,
+      &--start,
+      &--end {
+        background: @calendar-active-color;
+        color: @calendar-selected-color;
+        border-radius: @calendar-selected-border-radius;
+      }
+
+      &--start {
+        border-radius: @calendar-selected-border-radius 0 0 @calendar-selected-border-radius;
+      }
+
+      &--end {
+        border-radius: 0 @calendar-selected-border-radius @calendar-selected-border-radius 0;
+      }
+
+      &--start + &--end {
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 8rpx;
+          height: 100%;
+          background: @calendar-active-color;
+        }
+
+        &:before {
+          left: -8rpx;
+        }
+      }
+
+      &--centre {
+        border-radius: 0;
+        background-color: @calendar-item-centre-color;
+
+        &::before,
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 8rpx;
+          height: 100%;
+          background-color: @calendar-item-centre-color;
+        }
+
+        &:before {
+          left: -8rpx;
+        }
+
+        &:after {
+          right: -8rpx;
+        }
+      }
+
+      &--disabled {
+        color: @calendar-item-disabled-color;
+        cursor: default;
+      }
+    }
+  }
+
+  &__footer {
+    padding: 32rpx;
+  }
+}
+
+.@{prefix}-calendar-switch-mode--none > .@{prefix}-calendar__months {
+  height: 60vh;
+  width: 100%;
+}
+
+.@{prefix}-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 44rpx;
+
+  &__with-action {
+    padding: 0rpx 32rpx 16rpx 32rpx;
+    box-sizing: border-box;
+
+    .border(bottom, @border-color);
+  }
+
+  &__with-action &__title {
+    flex: 1;
+    text-align: center;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__action {
+    display: flex;
+    font-size: 40rpx;
+    color: @calendar-switch-mode-icon-color;
+  }
+
+  &__icon {
+    padding: 16rpx;
+  }
+
+  &__icon--disabled {
+    color: @calendar-switch-mode-icon-disabled-color;
+  }
+
+  &__title {
+    text-align: left;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/calendar/calendar.vue b/packages/tdesign-uniapp/components/calendar/calendar.vue
new file mode 100644
index 000000000..979e7cce0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/calendar.vue
@@ -0,0 +1,445 @@
+<template>
+  <view>
+    <t-popup
+      v-if="usePopup"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <!-- parse <include src="./template.wxml"/> -->
+      <CalendarTemplate
+        :class-prefix="classPrefix"
+        :use-popup="usePopup"
+        :switch-mode="switchMode"
+        :t-class="tClass"
+        :custom-style="_._style([customStyle])"
+        :title="title"
+        :real-local-text="realLocalText"
+        :months="months"
+        :current-month="currentMonth"
+        :action-buttons="actionButtons"
+        :days="days"
+        :scroll-into-view="scrollIntoView"
+        :first-day-of-week="firstDayOfWeek"
+        :inner-confirm-btn="innerConfirmBtn"
+        @scroll="onScroll"
+        @close="handleClose"
+        @select="handleSelect"
+        @clickButton="onTplButtonTap"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      >
+        <template #confirm-btn>
+          <slot name="confirm-btn" />
+        </template>
+        <template #title>
+          <slot name="title" />
+        </template>
+      </CalendarTemplate>
+    </t-popup>
+    <block v-else>
+      <!-- parse <include src="./template.wxml"/> -->
+      <CalendarTemplate
+        :class-prefix="classPrefix"
+        :use-popup="usePopup"
+        :switch-mode="switchMode"
+        :t-class="tClass"
+        :custom-style="_._style([customStyle])"
+        :title="title"
+        :real-local-text="realLocalText"
+        :months="months"
+        :current-month="currentMonth"
+        :action-buttons="actionButtons"
+        :days="days"
+        :scroll-into-view="scrollIntoView"
+        :first-day-of-week="firstDayOfWeek"
+        :inner-confirm-btn="innerConfirmBtn"
+        @scroll="onScroll"
+        @close="handleClose"
+        @select="handleSelect"
+        @clickButton="onTplButtonTap"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      >
+        <template #confirm-btn>
+          <slot name="confirm-btn" />
+        </template>
+        <template #title>
+          <slot name="title" />
+        </template>
+      </CalendarTemplate>
+    </block>
+  </view>
+</template>
+<script>
+import tPopup from '../popup/popup';
+import tButton from '../button/button';
+import tIcon from '../icon/icon';
+import CalendarTemplate from './template.vue';
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+
+import props from './props';
+import TCalendar from '../common/shared/calendar/index';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
+import _ from '../common/utils.wxs';
+import {
+  getMonthTitle,
+  getDateLabel,
+  isDateSelected,
+} from './computed.js';
+
+
+const name = `${prefix}-calendar`;
+
+
+const defaultLocaleText = {
+  title: '请选择日期',
+  weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+  monthTitle: '{year} 年 {month}',
+  months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+  confirm: '确认',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'confirm',
+    },
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [useCustomNavbar],
+  components: {
+    tPopup,
+    tButton,
+    tIcon,
+    CalendarTemplate,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      months: [],
+      scrollIntoView: '',
+      innerConfirmBtn: {},
+      realLocalText: {},
+      currentMonth: {},
+      actionButtons: {
+        preYearBtnDisable: false,
+        prevMonthBtnDisable: false,
+        nextMonthBtnDisable: false,
+        nextYearBtnDisable: false,
+      },
+      _,
+
+      dataVisible: this.visible,
+      dataValue: coalesce(this.value, this.defaultValue),
+      days: [],
+    };
+  },
+  watch: {
+    type: {
+      handler(v) {
+        this.base.type = v;
+      },
+    },
+
+    confirmBtn: {
+      handler(v) {
+        if (typeof v === 'string') {
+          this.innerConfirmBtn = v === 'slot' ? 'slot' : { content: v };
+        } else if (typeof v === 'object') {
+          this.innerConfirmBtn = v;
+        }
+      },
+      immediate: true,
+    },
+
+    firstDayOfWeek: 'onWatchMinMaxDate',
+    minDate: 'onWatchMinMaxDate',
+    maxDate: 'onWatchMinMaxDate',
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler(v) {
+        this.base.value = v;
+        this.calcMonths();
+        this.updateCurrentMonth(v);
+      },
+      // immediate: true,
+      deep: true,
+    },
+
+    dataVisible: {
+      handler(v) {
+        if (v) {
+          this.onScrollIntoView();
+          this.base.value = this.dataValue;
+          this.calcMonths();
+        }
+      },
+      immediate: true,
+    },
+    format: {
+      handler(v) {
+        const { usePopup, dataVisible: visible } = this;
+
+        if (this.base) {
+          this.base.format = v;
+        }
+
+        if (!usePopup || visible) {
+          this.calcMonths();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    const values = Object.keys(props).reduce((acc, key) => ({
+      ...acc,
+      [key]: this[key],
+    }));
+    this.base = new TCalendar(values);
+  },
+
+  mounted() {
+    const realLocalText = { ...defaultLocaleText, ...this.localeText };
+    this.initialValue();
+    this.onWatchMinMaxDate();
+    this.days = this.base.getDays(realLocalText.weekdays);
+    this.realLocalText = realLocalText;
+
+    this.calcMonths();
+    this.updateCurrentMonth();
+
+    if (!this.usePopup) {
+      this.onScrollIntoView();
+    }
+  },
+  methods: {
+    getMonthTitle,
+    getDateLabel,
+    isDateSelected,
+    initialValue() {
+      const { dataValue: value, type, minDate } = this;
+
+      if (!value) {
+        const today = new Date();
+        const now = minDate || new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime(); // 获取 0 点的时间戳
+        const initialValue = type === 'single' ? now : [now];
+
+        if (type === 'range') {
+          initialValue[1] = now + 24 * 3600 * 1000; // 第二天
+        }
+
+        this.dataValue = initialValue;
+        this.base.value = initialValue;
+      }
+    },
+
+    onScrollIntoView() {
+      const { dataValue: value } = this;
+
+      if (!value) return;
+
+      const date = new Date(Array.isArray(value) ? value[0] : value);
+
+      if (date) {
+        this.scrollIntoView = `year_${date.getFullYear()}_month_${date.getMonth()}`;
+      }
+    },
+
+    getCurrentYearAndMonth(v) {
+      const date = new Date(v);
+      return { year: date.getFullYear(), month: date.getMonth() };
+    },
+
+    updateActionButton(value) {
+      const _min = this.getCurrentYearAndMonth(this.base.minDate);
+      const _max = this.getCurrentYearAndMonth(this.base.maxDate);
+
+      const _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
+      const _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
+
+      const _prevYearTimestamp = getPrevYear(value).getTime();
+      const _prevMonthTimestamp = getPrevMonth(value).getTime();
+      const _nextMonthTimestamp = getNextMonth(value).getTime();
+      const _nextYearTimestamp = getNextYear(value).getTime();
+
+      const preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
+      const prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
+      const nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
+      const nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
+
+      this.actionButtons = {
+        preYearBtnDisable,
+        prevMonthBtnDisable,
+        nextYearBtnDisable,
+        nextMonthBtnDisable,
+      };
+    },
+
+    updateCurrentMonth(newValue) {
+      if (this.switchMode === 'none') return;
+      this.calcCurrentMonth(newValue);
+    },
+
+    calcCurrentMonth(newValue) {
+      const date = newValue || this.getCurrentDate();
+      const { year, month } = this.getCurrentYearAndMonth(date);
+      const currentMonth = this.months.filter(item => item.year === year && item.month === month);
+
+      this.updateActionButton(date);
+
+      this.currentMonth = currentMonth.length > 0 ? currentMonth : [this.months[0]];
+    },
+
+    calcMonths() {
+      if (!this.base) return;
+
+      const months = this.base.getMonths();
+
+      this.months = months;
+    },
+
+    close(trigger) {
+      if (this.autoClose) {
+        this.$emit('update:visible', false);
+        this.dataVisible = false;
+      }
+      this.$emit('close', { trigger });
+    },
+
+    onVisibleChange() {
+      this.close('overlay');
+    },
+
+    handleClose() {
+      this.close('close-btn');
+    },
+
+    handleSelect(e) {
+      const { readonly } = this;
+      const { date, year, month } = e.currentTarget.dataset;
+
+      if (date.type === 'disabled' || readonly) return;
+
+      const rawValue = this.base.select({ cellType: date.type, year, month, date: date.day });
+
+      const value = this.toTime(rawValue);
+
+      this.calcMonths();
+      this.updateCurrentMonth();
+
+      if (this.confirmBtn == null) {
+        // 不显示确认按钮，则选择完即关闭 popup
+        if (this.type === 'single' || rawValue.length === 2) {
+          this.dataVisible = false;
+          this._trigger('change', { value }); // 受控
+        }
+      }
+
+      this.$emit('select', { value });
+    },
+
+    onTplButtonTap() {
+      const rawValue = this.base.getTrimValue();
+      const value = this.toTime(rawValue);
+
+      this.close('confirm-btn');
+      this._trigger('confirm', { value });
+    },
+
+    toTime(val) {
+      if (!val) return null;
+      if (Array.isArray(val)) {
+        return val.map(item => item.getTime());
+      }
+      return val.getTime();
+    },
+
+    onScroll(e) {
+      this.$emit('scroll', e.detail);
+    },
+
+    getCurrentDate() {
+      let time = Array.isArray(this.base.value) ? this.base.value[0] : this.base.value;
+
+      if (this.currentMonth.length > 0) {
+        const year = this.currentMonth[0]?.year;
+        const month = this.currentMonth[0]?.month;
+        time = new Date(year, month, 1).getTime();
+      }
+
+      return time;
+    },
+
+    handleSwitchModeChange(e) {
+      const { type, disabled } = e.currentTarget.dataset;
+      if (disabled) return;
+
+      const date = this.getCurrentDate();
+
+      const funcMap = {
+        'pre-year': () => getPrevYear(date),
+        'pre-month': () => getPrevMonth(date),
+        'next-month': () => getNextMonth(date),
+        'next-year': () => getNextYear(date),
+      };
+      const newValue = funcMap[type]();
+      if (!newValue) return;
+
+      const { year, month } = this.getCurrentYearAndMonth(newValue);
+      this.$emit('panel-change', { year, month: month + 1 });
+
+      this.calcCurrentMonth(newValue);
+    },
+
+    onWatchMinMaxDate() {
+      const { firstDayOfWeek, minDate, maxDate } = this;
+      firstDayOfWeek && (this.base.firstDayOfWeek = firstDayOfWeek);
+      minDate && (this.base.minDate = minDate);
+      maxDate && (this.base.maxDate = maxDate);
+      this.calcMonths();
+    },
+  },
+});
+</script>
+<style scoped>
+@import './calendar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/computed.js b/packages/tdesign-uniapp/components/calendar/computed.js
new file mode 100644
index 000000000..98b9b791a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/computed.js
@@ -0,0 +1,42 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+
+export function getDateLabel(monthItem, dateItem) {
+  const weekdayText = ['日', '一', '二', '三', '四', '五', '六'];
+  const weekday = (monthItem.weekdayOfFirstDay + dateItem.day - 1) % 7;
+  let label = `${monthItem.month + 1}月${dateItem.day}日, 星期${weekdayText[weekday]}`;
+  if (dateItem.type === 'start') {
+    label = `开始日期：${label}`;
+  }
+  if (dateItem.type === 'end') {
+    label = `结束日期：${label}`;
+  }
+  if (isDateSelected(dateItem)) {
+    label = `已选中, ${label}`;
+  }
+  if (dateItem.prefix) {
+    label += `, ${dateItem.prefix}`;
+  }
+  if (dateItem.suffix) {
+    label += `, ${dateItem.suffix}`;
+  }
+  return label;
+}
+
+export function isDateSelected(dateItem) {
+  return ['start', 'end', 'selected', 'centre'].indexOf(dateItem.type) >= 0;
+}
+
+export function getMonthTitle(year, month, pattern = '') {
+  // prettier-ignore
+  const REGEXP = getRegExp('\\{year\\}|\\{month\\}', 'g');
+
+  return pattern.replace(REGEXP, (match) => {
+    const replacements = {
+      '{year}': year,
+      '{month}': month < 10 ? `0${month}` : month,
+    };
+    return replacements[match] || match;
+  });
+}
+
diff --git a/packages/tdesign-uniapp/components/calendar/props.ts b/packages/tdesign-uniapp/components/calendar/props.ts
new file mode 100644
index 000000000..1827f4f6d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/props.ts
@@ -0,0 +1,111 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCalendarProps } from './type';
+export default {
+  /** 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性 */
+  confirmBtn: {
+    type: [String, Object],
+    default: '' as TdCalendarProps['confirmBtn'],
+  },
+  /** 第一天从星期几开始，默认 0 = 周日 */
+  firstDayOfWeek: {
+    type: Number,
+    default: 0,
+  },
+  /** 用于格式化日期的函数 */
+  format: {
+    type: Function,
+  },
+  /** 国际化文案 */
+  localeText: {
+    type: Object,
+  },
+  /** 最大可选的日期，不传则默认半年后 */
+  maxDate: {
+    type: Number,
+  },
+  /** 最小可选的日期，不传则默认今天 */
+  minDate: {
+    type: Number,
+  },
+  /** 是否只读，只读状态下不能选择日期 */
+  readonly: Boolean,
+  /** 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换 */
+  switchMode: {
+    type: String,
+    default: 'none' as TdCalendarProps['switchMode'],
+    validator(val: TdCalendarProps['switchMode']): boolean {
+      if (!val) return true;
+      return ['none', 'month', 'year-month'].includes(val);
+    },
+  },
+  /** 标题，不传默认为“请选择日期” */
+  title: {
+    type: String,
+  },
+  /** 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择 */
+  type: {
+    type: String,
+    default: 'single' as TdCalendarProps['type'],
+    validator(val: TdCalendarProps['type']): boolean {
+      if (!val) return true;
+      return ['single', 'multiple', 'range'].includes(val);
+    },
+  },
+  /** 是否使用弹出层包裹日历 */
+  usePopup: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组 */
+  value: {
+    type: [Number, Array],
+  },
+  /** 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组，非受控属性 */
+  defaultValue: {
+    type: [Number, Array],
+  },
+  /** 是否显示日历；`usePopup` 为 true 时有效 */
+  visible: Boolean,
+  /** 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple） */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击确认按钮时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 切换月或年时触发（switch-mode 不为 none 时有效） */
+  onPanelChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滚动时触发 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击日期时触发 */
+  onSelect: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/calendar/template.props.js b/packages/tdesign-uniapp/components/calendar/template.props.js
new file mode 100644
index 000000000..c421f3358
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/template.props.js
@@ -0,0 +1,57 @@
+export default {
+  classPrefix: {
+    type: String,
+    default: '',
+  },
+  usePopup: {
+    type: Boolean,
+  },
+  switchMode: {
+    type: String,
+    default: '',
+  },
+  tClass: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  realLocalText: {
+    type: Object,
+    default: () => ({}),
+  },
+  months: {
+    type: Array,
+    default: () => ([]),
+  },
+  currentMonth: {
+    type: [Array, Object],
+    default: () => ([]),
+  },
+  actionButtons: {
+    type: Object,
+    default: () => ({}),
+  },
+  days: {
+    type: Array,
+    default: () => ([]),
+  },
+  scrollIntoView: {
+    type: String,
+    default: '',
+  },
+  firstDayOfWeek: {
+    type: Number,
+    default: 0,
+  },
+  innerConfirmBtn: {
+    type: [Object, String],
+    default: '',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/calendar/template.vue b/packages/tdesign-uniapp/components/calendar/template.vue
new file mode 100644
index 000000000..13bb1cfc7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/template.vue
@@ -0,0 +1,257 @@
+<template>
+  <view
+    :class="utils.cls(classPrefix, [['popup', usePopup]]) + ' ' + classPrefix + '-switch-mode--' + switchMode + ' ' + tClass"
+    :style="customStyle"
+  >
+    <view
+      :class="classPrefix + '__title'"
+      tabindex="0"
+    >
+      <slot name="title" />
+      <text v-if="title || realLocalText.title">
+        {{ title || realLocalText.title }}
+      </text>
+    </view>
+    <TIcon
+      v-if="usePopup"
+      name="close"
+      :t-class="classPrefix + '__close-btn'"
+      size="48rpx"
+      aria-role="button"
+      aria-label="关闭"
+      :custom-style="closeBtnCustomStyle"
+      @click="handleClose"
+    />
+    <block
+      v-if="switchMode !== 'none'"
+      name="calendar-header"
+    >
+      <CalendarHeader
+        :class-prefix="classPrefix + '-header'"
+        :switch-mode="switchMode"
+        :title="getMonthTitle(currentMonth[0]?.year, realLocalText.months?.[currentMonth[0]?.month], realLocalText.monthTitle)"
+        :pre-year-btn-disable="actionButtons.preYearBtnDisable"
+        :prev-month-btn-disable="actionButtons.prevMonthBtnDisable"
+        :next-year-btn-disable="actionButtons.nextYearBtnDisable"
+        :next-month-btn-disable="actionButtons.nextMonthBtnDisable"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      />
+    </block>
+    <view
+      aria-hidden
+      :class="classPrefix + '__days'"
+    >
+      <view
+        v-for="(item, index) in days"
+        :key="index"
+        :class="classPrefix + '__days-item'"
+      >
+        {{ item }}
+      </view>
+    </view>
+    <scroll-view
+      :class="classPrefix + '__months'"
+      :scroll-into-view="scrollIntoView"
+      scroll-y
+      enhanced
+      :show-scrollbar="false"
+      @scroll="onScroll"
+    >
+      <block
+        v-for="(item, index) in switchMode === 'none' ? months : currentMonth"
+        :key="index"
+      >
+        <block
+          v-if="switchMode === 'none'"
+          name="calendar-header"
+        >
+          <CalendarHeader
+            :t-class="classPrefix + '__month'"
+            :class-prefix="classPrefix + '-header'"
+            :switch-mode="switchMode"
+            :t-id="'year_' + item.year + '_month_' + item.month"
+            :title="getMonthTitle(item.year, realLocalText.months?.[item.month], realLocalText.monthTitle)"
+            :pre-year-btn-disable="actionButtons.preYearBtnDisable"
+            :prev-month-btn-disable="actionButtons.prevMonthBtnDisable"
+            :next-year-btn-disable="actionButtons.nextYearBtnDisable"
+            :next-month-btn-disable="actionButtons.nextMonthBtnDisable"
+            @handleSwitchModeChange="handleSwitchModeChange"
+          />
+        </block>
+
+        <view :class="classPrefix + '__dates'">
+          <view
+            v-for="(item, index1) in (item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7"
+            :key="index1"
+          />
+          <block
+            v-for="(dateItem, dateIndex) in item.months"
+            :key="dateIndex"
+          >
+            <view
+              :class="classPrefix + '__dates-item ' + dateItem.className + ' ' + classPrefix + '__dates-item--' + dateItem.type"
+              :data-year="item.year"
+              :data-month="item.month"
+              :data-date="dateItem"
+              aria-role="button"
+              :aria-label="getDateLabel(item, dateItem)"
+              :aria-disabled="dateItem.type === 'disabled'"
+              @click="handleSelect"
+            >
+              <view
+                v-if="dateItem.prefix"
+                :class="classPrefix + '__dates-item-prefix'"
+              >
+                {{ dateItem.prefix }}
+              </view>
+              {{ dateItem.day }}
+              <view
+                v-if="dateItem.suffix"
+                :class="classPrefix + '__dates-item-suffix ' + classPrefix + '__dates-item-suffix--' + dateItem.type"
+              >
+                {{ dateItem.suffix }}
+              </view>
+            </view>
+          </block>
+        </view>
+      </block>
+    </scroll-view>
+    <view
+      v-if="innerConfirmBtn != null && usePopup"
+      :class="classPrefix + '__footer'"
+    >
+      <slot
+        v-if="innerConfirmBtn === 'slot'"
+        name="confirm-btn"
+      />
+      <block v-else-if="innerConfirmBtn">
+        <TButton
+          :t-id="innerConfirmBtn.tId"
+          :custom-style="innerConfirmBtn.style"
+          :block="coalesce(innerConfirmBtn.block, true)"
+          :t-class="coalesce(coalesce(innerConfirmBtn.tClass, prefix + '-class-action'))"
+          :class="prefix + '-calendar__confirm-btn'"
+          :disabled="innerConfirmBtn.disabled"
+          :data-type="'action'"
+          :data-extra="innerConfirmBtn.dataExtra"
+          :custom-dataset="innerConfirmBtn.customDataset"
+          :content="innerConfirmBtn.content || realLocalText.confirm"
+          :icon="innerConfirmBtn.icon"
+          :loading="innerConfirmBtn.loading"
+          :loading-props="innerConfirmBtn.loadingProps"
+          :theme="coalesce(innerConfirmBtn.theme, 'primary')"
+          :ghost="innerConfirmBtn.ghost"
+          :shape="innerConfirmBtn.shape"
+          :size="innerConfirmBtn.size"
+          :variant="innerConfirmBtn.variant"
+          :open-type="innerConfirmBtn.openType"
+          :hover-class="innerConfirmBtn.hoverClass"
+          :hover-stop-propagation="innerConfirmBtn.hoverStopPropagation"
+          :hover-start-time="innerConfirmBtn.hoverStartTime"
+          :hover-stay-time="innerConfirmBtn.hoverStayTime"
+          :lang="innerConfirmBtn.lang"
+          :session-from="innerConfirmBtn.sessionFrom"
+          :send-message-title="innerConfirmBtn.sendMessageTitle"
+          :send-message-path="innerConfirmBtn.sendMessagePath"
+          :send-message-img="innerConfirmBtn.sendMessageImg"
+          :app-parameter="innerConfirmBtn.appParameter"
+          :show-message-card="innerConfirmBtn.showMessageCard"
+          :aria-label="innerConfirmBtn.ariaLabel"
+          @click="onTplButtonTap"
+          @getuserinfo="onTplButtonTap"
+          @contact="onTplButtonTap"
+          @getphonenumber="onTplButtonTap"
+          @error="onTplButtonTap"
+          @opensetting="onTplButtonTap"
+          @launchapp="onTplButtonTap"
+          @agreeprivacyauthorization="onTplButtonTap"
+        >
+          <slot v-if="innerConfirmBtn.useDefaultSlot" />
+        </TButton>
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon.vue';
+import TButton from '../button/button.vue';
+import utils from '../common/utils.wxs';
+import {
+  getDateLabel,
+  getMonthTitle,
+} from './computed.js';
+import CalendarHeader from './calendar-header.vue';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './template.props';
+
+
+export default {
+  name: 'TCalendarContent',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    CalendarHeader,
+    TIcon,
+    TButton,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'clickButton',
+    'close',
+    'scroll',
+    'select',
+    'handleSwitchModeChange',
+  ],
+  data() {
+    return {
+      prefix,
+      utils,
+    };
+  },
+  computed: {
+    closeBtnCustomStyle() {
+      return utils._style({
+        position: 'absolute',
+        top: '16px',
+        right: '16px',
+        margin: '-12px',
+        padding: '12px',
+        color: 'var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, .9))))',
+      });
+    },
+  },
+  watch: {
+  },
+  mounted() {
+
+  },
+  methods: {
+    coalesce,
+    getDateLabel,
+    getMonthTitle,
+    onTplButtonTap() {
+      this.$emit('clickButton');
+    },
+    handleSelect(...args) {
+      this.$emit('select', ...args);
+    },
+    handleClose() {
+      this.$emit('close');
+    },
+    onScroll(...args) {
+      this.$emit('scroll', ...args);
+    },
+    handleSwitchModeChange(...args) {
+      this.$emit('handleSwitchModeChange', ...args);
+    },
+  },
+};
+
+</script>
+<style scoped>
+@import './calendar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/calendar/type.ts b/packages/tdesign-uniapp/components/calendar/type.ts
new file mode 100644
index 000000000..62c9032a1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/type.ts
@@ -0,0 +1,136 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+
+export interface TdCalendarProps {
+  /**
+   * 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+   * @default ''
+   */
+  confirmBtn?: string | ButtonProps | null;
+  /**
+   * 第一天从星期几开始，默认 0 = 周日
+   * @default 0
+   */
+  firstDayOfWeek?: number;
+  /**
+   * 用于格式化日期的函数
+   */
+  format?: CalendarFormatType;
+  /**
+   * 国际化文案
+   */
+  localeText?: CalendarLocaleText;
+  /**
+   * 最大可选的日期，不传则默认半年后
+   */
+  maxDate?: number;
+  /**
+   * 最小可选的日期，不传则默认今天
+   */
+  minDate?: number;
+  /**
+   * 是否只读，只读状态下不能选择日期
+   */
+  readonly?: boolean;
+  /**
+   * 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换
+   * @default none
+   */
+  switchMode?: 'none' | 'month' | 'year-month';
+  /**
+   * 标题，不传默认为“请选择日期”
+   */
+  title?: string;
+  /**
+   * 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择
+   * @default 'single'
+   */
+  type?: 'single' | 'multiple' | 'range';
+  /**
+   * 是否使用弹出层包裹日历
+   * @default true
+   */
+  usePopup?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组
+   */
+  value?: number | number[];
+  /**
+   * 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组，非受控属性
+   */
+  defaultValue?: number | number[];
+  /**
+   * 是否显示日历；`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
+   */
+  onChange?: (context: { value: number | number[] }) => void;
+  /**
+   * 关闭按钮时触发
+   */
+  onClose?: (context: { trigger: CalendarTrigger }) => void;
+  /**
+   * 点击确认按钮时触发
+   */
+  onConfirm?: (context: { value: number | number[] }) => void;
+  /**
+   * 切换月或年时触发（switch-mode 不为 none 时有效）
+   */
+  onPanelChange?: (context: { year: number; month: number }) => void;
+  /**
+   * 滚动时触发
+   */
+  onScroll?: (context: {
+    scrollLeft: number;
+    scrollTop: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    deltaX: number;
+    deltaY: number;
+  }) => void;
+  /**
+   * 点击日期时触发
+   */
+  onSelect?: (context: { value: number | number[] }) => void;
+}
+
+export type CalendarFormatType = (day: TDate) => TDate;
+
+export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
+
+export interface TDate {
+  date: Date;
+  day: number;
+  type: TDateType;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface CalendarLocaleText {
+  title?: string;
+  weekdays?: string[];
+  monthTitle?: string;
+  months?: string[];
+  confirm?: string;
+}
+
+export type CalendarTrigger = 'close-btn' | 'confirm-btn' | 'overlay' | 'auto-close';
diff --git a/packages/tdesign-uniapp/components/calendar/utils.ts b/packages/tdesign-uniapp/components/calendar/utils.ts
new file mode 100644
index 000000000..431d65ced
--- /dev/null
+++ b/packages/tdesign-uniapp/components/calendar/utils.ts
@@ -0,0 +1,18 @@
+export function getMonthByOffset(date: Date, offset: number) {
+  const _date = new Date(date);
+  _date.setMonth(_date.getMonth() + offset);
+  _date.setDate(1);
+  return _date;
+}
+
+export function getYearByOffset(date: Date, offset: number) {
+  const _date = new Date(date);
+  _date.setFullYear(_date.getFullYear() + offset);
+  _date.setDate(1);
+  return _date;
+}
+
+export const getPrevMonth = (date: Date) => getMonthByOffset(date, -1);
+export const getNextMonth = (date: Date) => getMonthByOffset(date, 1);
+export const getPrevYear = (date: Date) => getYearByOffset(date, -1);
+export const getNextYear = (date: Date) => getYearByOffset(date, 1);
diff --git a/packages/tdesign-uniapp/components/cascader/README.en-US.md b/packages/tdesign-uniapp/components/cascader/README.en-US.md
new file mode 100644
index 000000000..801c1f74e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/README.en-US.md
@@ -0,0 +1,57 @@
+:: BASE_DOC ::
+
+## API
+
+### Cascader Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+check-strictly | Boolean | false | \- | N
+close-btn | Boolean | true | \- | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+options | Array | [] | Typescript：`Array<CascaderOption>` | N
+placeholder | String | 选择选项 | \- | N
+sub-titles | Array | [] | Typescript：`Array<string>` | N
+theme | String | step | options: step/tab | N
+title | String | - | \- | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+visible | Boolean | false | \- | N
+
+### Cascader Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string \| number, selectedOptions: string[] })` | \-
+close | `(context: { trigger: CascaderTriggerSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | \-
+
+### Cascader Slots
+
+name | Description
+-- | --
+close-btn | \-
+header | \-
+middle-content | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cascader-active-color | @brand-color | - 
+--td-cascader-bg-color | @bg-color-container | - 
+--td-cascader-border-color | @component-stroke | - 
+--td-cascader-content-height | 78vh | - 
+--td-cascader-disabled-color | @text-color-disabled | - 
+--td-cascader-options-height | calc(100% - @cascader-step-height) | - 
+--td-cascader-options-title-color | @text-color-placeholder | - 
+--td-cascader-step-arrow-color | @text-color-placeholder | - 
+--td-cascader-step-dot-size | 16rpx | - 
+--td-cascader-step-height | 88rpx | - 
+--td-cascader-title-color | @text-color-primary | - 
+--td-cascader-title-height | 26rpx | - 
+--td-cascader-title-padding | @spacer-2 | - 
+--td-cascader-title-font-size | 36rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/cascader/README.md b/packages/tdesign-uniapp/components/cascader/README.md
new file mode 100644
index 000000000..2f8103313
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/README.md
@@ -0,0 +1,97 @@
+---
+title: Cascader 级联选择器
+description: 级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCascader from 'tdesign-uniapp/cascader/cascader.vue';
+```
+
+### 基础用法
+
+{{ base }}
+
+### 选项卡风格
+
+{{ theme-tab }}
+
+### 进阶
+
+#### 带初始值
+
+{{ with-value }}
+
+#### 自定义 keys
+
+{{ keys }}
+
+#### 使用次级标题
+
+{{ with-title }}
+
+#### 选择任意一项
+
+{{ check-strictly }}
+
+## API
+
+### Cascader Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+check-strictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
+close-btn | Boolean | true | 关闭按钮 | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+placeholder | String | 选择选项 | 未选中时的提示文案 | N
+sub-titles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
+theme | String | step | 展示风格。可选项：step/tab | N
+title | String | - | 标题 | N
+value | String / Number | - | 选项值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 选项值。非受控属性 | N
+visible | Boolean | false | 是否展示 | N
+
+### Cascader Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string \| number, selectedOptions: string[] })` | 值发生变更时触发
+close | `(context: { trigger: CascaderTriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | 选择后触发
+
+### Cascader Slots
+
+名称 | 描述
+-- | --
+close-btn | 自定义 `close-btn` 显示内容
+header | 头部
+middle-content | 中间内容
+title | 自定义 `title` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-cascader-active-color | @brand-color | - |
+| --td-cascader-bg-color | @bg-color-container | - |
+| --td-cascader-border-color | @component-stroke | - |
+| --td-cascader-content-height | 78vh | - |
+| --td-cascader-disabled-color | @text-color-disabled | - |
+| --td-cascader-options-height | calc(100% - @cascader-step-height) | - |
+| --td-cascader-options-title-color | @text-color-placeholder | - |
+| --td-cascader-step-arrow-color | @text-color-placeholder | - |
+| --td-cascader-step-dot-size | 16rpx | - |
+| --td-cascader-step-height | 88rpx | - |
+| --td-cascader-title-color | @text-color-primary | - |
+| --td-cascader-title-height | 26rpx | - |
+| --td-cascader-title-padding | @spacer-2 | - |
+| --td-cascader-title-font-size | 36rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/cascader/_example/base/index.vue b/packages/tdesign-uniapp/components/cascader/_example/base/index.vue
new file mode 100644
index 000000000..177c75604
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/base/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      :value="value"
+      :options="options"
+      title="请选择地址"
+      @change="onChange"
+      @pick="onPick"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            {
+              value: '110101',
+              label: '东城区',
+            },
+            {
+              value: '110102',
+              label: '西城区',
+            },
+            {
+              value: '110105',
+              label: '朝阳区',
+            },
+            {
+              value: '110106',
+              label: '丰台区',
+            },
+            {
+              value: '110107',
+              label: '石景山区',
+            },
+            {
+              value: '110108',
+              label: '海淀区',
+            },
+            {
+              value: '110109',
+              label: '门头沟区',
+            },
+            {
+              value: '110111',
+              label: '房山区',
+            },
+            {
+              value: '110112',
+              label: '通州区',
+            },
+            {
+              value: '110113',
+              label: '顺义区',
+            },
+            {
+              value: '110114',
+              label: '昌平区',
+            },
+            {
+              value: '110115',
+              label: '大兴区',
+            },
+            {
+              value: '110116',
+              label: '怀柔区',
+            },
+            {
+              value: '110117',
+              label: '平谷区',
+            },
+            {
+              value: '110118',
+              label: '密云区',
+            },
+            {
+              value: '110119',
+              label: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            {
+              value: '120101',
+              label: '和平区',
+            },
+            {
+              value: '120102',
+              label: '河东区',
+            },
+            {
+              value: '120103',
+              label: '河西区',
+            },
+            {
+              value: '120104',
+              label: '南开区',
+            },
+            {
+              value: '120105',
+              label: '河北区',
+            },
+            {
+              value: '120106',
+              label: '红桥区',
+            },
+            {
+              value: '120110',
+              label: '东丽区',
+            },
+            {
+              value: '120111',
+              label: '西青区',
+            },
+            {
+              value: '120112',
+              label: '津南区',
+            },
+            {
+              value: '120113',
+              label: '北辰区',
+            },
+            {
+              value: '120114',
+              label: '武清区',
+            },
+            {
+              value: '120115',
+              label: '宝坻区',
+            },
+            {
+              value: '120116',
+              label: '滨海新区',
+            },
+            {
+              value: '120117',
+              label: '宁河区',
+            },
+            {
+              value: '120118',
+              label: '静海区',
+            },
+            {
+              value: '120119',
+              label: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+      value: '',
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onPick(e) {
+      console.log('pick: ', e);
+    },
+    onChange(e) {
+      console.log('change: ', e);
+      const { selectedOptions, value } = e;
+      this.value = value;
+      this.note =  selectedOptions.map(item => item.label).join('/');
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/cascader.vue b/packages/tdesign-uniapp/components/cascader/_example/cascader.vue
new file mode 100644
index 000000000..e8ed138a5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/cascader.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Cascader"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Cascader 级联选择器"
+        desc="用于多层级数据的逐级选择。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 类型"
+        desc=""
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="选项卡风格">
+        <theme-tab />
+      </t-demo>
+
+      <t-demo
+        title="02 进阶"
+        desc="带初始值"
+      >
+        <with-value />
+      </t-demo>
+
+      <t-demo desc="自定义 keys">
+        <keys />
+      </t-demo>
+
+      <t-demo desc="使用次级标题">
+        <with-title />
+      </t-demo>
+
+      <t-demo desc="选择任意一项">
+        <check-strictly />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import BaseDemo from './base';
+import themeTab from './theme-tab';
+import withValue from './with-value';
+import keys from './keys';
+import withTitle from './with-title';
+import checkStrictly from './check-strictly';
+export default {
+  components: {
+    BaseDemo,
+    themeTab,
+    withValue,
+    keys,
+    withTitle,
+    checkStrictly,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/check-strictly/index.vue b/packages/tdesign-uniapp/components/cascader/_example/check-strictly/index.vue
new file mode 100644
index 000000000..45c6c9eb6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/check-strictly/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      :close-btn="false"
+      :check-strictly="true"
+      :value="value"
+      :options="options"
+      title="请选择地址"
+      @change="onChange"
+      @pick="onPick"
+    >
+      <template
+        #close-btn
+      >
+        <text
+          class="confirm-btn"
+        >
+          确定
+        </text>
+      </template>
+    </t-cascader>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            {
+              value: '110101',
+              label: '东城区',
+            },
+            {
+              value: '110102',
+              label: '西城区',
+            },
+            {
+              value: '110105',
+              label: '朝阳区',
+            },
+            {
+              value: '110106',
+              label: '丰台区',
+            },
+            {
+              value: '110107',
+              label: '石景山区',
+            },
+            {
+              value: '110108',
+              label: '海淀区',
+            },
+            {
+              value: '110109',
+              label: '门头沟区',
+            },
+            {
+              value: '110111',
+              label: '房山区',
+            },
+            {
+              value: '110112',
+              label: '通州区',
+            },
+            {
+              value: '110113',
+              label: '顺义区',
+            },
+            {
+              value: '110114',
+              label: '昌平区',
+            },
+            {
+              value: '110115',
+              label: '大兴区',
+            },
+            {
+              value: '110116',
+              label: '怀柔区',
+            },
+            {
+              value: '110117',
+              label: '平谷区',
+            },
+            {
+              value: '110118',
+              label: '密云区',
+            },
+            {
+              value: '110119',
+              label: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            {
+              value: '120101',
+              label: '和平区',
+            },
+            {
+              value: '120102',
+              label: '河东区',
+            },
+            {
+              value: '120103',
+              label: '河西区',
+            },
+            {
+              value: '120104',
+              label: '南开区',
+            },
+            {
+              value: '120105',
+              label: '河北区',
+            },
+            {
+              value: '120106',
+              label: '红桥区',
+            },
+            {
+              value: '120110',
+              label: '东丽区',
+            },
+            {
+              value: '120111',
+              label: '西青区',
+            },
+            {
+              value: '120112',
+              label: '津南区',
+            },
+            {
+              value: '120113',
+              label: '北辰区',
+            },
+            {
+              value: '120114',
+              label: '武清区',
+            },
+            {
+              value: '120115',
+              label: '宝坻区',
+            },
+            {
+              value: '120116',
+              label: '滨海新区',
+            },
+            {
+              value: '120117',
+              label: '宁河区',
+            },
+            {
+              value: '120118',
+              label: '静海区',
+            },
+            {
+              value: '120119',
+              label: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+      value: '',
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onPick(e) {
+      console.log(e);
+    },
+    onChange(e) {
+      const { selectedOptions, value } = e;
+      console.log('change', value);
+      this.value = value;
+      this.note = selectedOptions.map(item => item.label).join('/');
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+.confirm-btn {
+    color: #0052d9;
+    font-size: 16px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/keys/index.vue b/packages/tdesign-uniapp/components/cascader/_example/keys/index.vue
new file mode 100644
index 000000000..fa8f42f33
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/keys/index.vue
@@ -0,0 +1,215 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      class="demo"
+      :keys="keys"
+      :options="options"
+      title="请选择地址"
+      placeholder="未选中时的提示文案"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      name: '北京市',
+      id: '110000',
+      sub: [
+        {
+          id: '110100',
+          name: '北京市',
+          sub: [
+            {
+              id: '110101',
+              name: '东城区',
+            },
+            {
+              id: '110102',
+              name: '西城区',
+            },
+            {
+              id: '110105',
+              name: '朝阳区',
+            },
+            {
+              id: '110106',
+              name: '丰台区',
+            },
+            {
+              id: '110107',
+              name: '石景山区',
+            },
+            {
+              id: '110108',
+              name: '海淀区',
+            },
+            {
+              id: '110109',
+              name: '门头沟区',
+            },
+            {
+              id: '110111',
+              name: '房山区',
+            },
+            {
+              id: '110112',
+              name: '通州区',
+            },
+            {
+              id: '110113',
+              name: '顺义区',
+            },
+            {
+              id: '110114',
+              name: '昌平区',
+            },
+            {
+              id: '110115',
+              name: '大兴区',
+            },
+            {
+              id: '110116',
+              name: '怀柔区',
+            },
+            {
+              id: '110117',
+              name: '平谷区',
+            },
+            {
+              id: '110118',
+              name: '密云区',
+            },
+            {
+              id: '110119',
+              name: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: '天津市',
+      id: '120000',
+      sub: [
+        {
+          id: '120100',
+          name: '天津市',
+          sub: [
+            {
+              id: '120101',
+              name: '和平区',
+            },
+            {
+              id: '120102',
+              name: '河东区',
+            },
+            {
+              id: '120103',
+              name: '河西区',
+            },
+            {
+              id: '120104',
+              name: '南开区',
+            },
+            {
+              id: '120105',
+              name: '河北区',
+            },
+            {
+              id: '120106',
+              name: '红桥区',
+            },
+            {
+              id: '120110',
+              name: '东丽区',
+            },
+            {
+              id: '120111',
+              name: '西青区',
+            },
+            {
+              id: '120112',
+              name: '津南区',
+            },
+            {
+              id: '120113',
+              name: '北辰区',
+            },
+            {
+              id: '120114',
+              name: '武清区',
+            },
+            {
+              id: '120115',
+              name: '宝坻区',
+            },
+            {
+              id: '120116',
+              name: '滨海新区',
+            },
+            {
+              id: '120117',
+              name: '宁河区',
+            },
+            {
+              id: '120118',
+              name: '静海区',
+            },
+            {
+              id: '120119',
+              name: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+      keys: {
+        label: 'name',
+        value: 'id',
+        children: 'sub',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onChange(e) {
+      const { selectedOptions } = e;
+      this.note = selectedOptions.map(item => item.name).join('/');
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+page .demo {
+    --td-cascader-active-color: green;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/theme-tab/index.vue b/packages/tdesign-uniapp/components/cascader/_example/theme-tab/index.vue
new file mode 100644
index 000000000..c7492abb7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/theme-tab/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      theme="tab"
+      :options="options"
+      title="请选择地址"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            {
+              value: '110101',
+              label: '东城区',
+            },
+            {
+              value: '110102',
+              label: '西城区',
+            },
+            {
+              value: '110105',
+              label: '朝阳区',
+            },
+            {
+              value: '110106',
+              label: '丰台区',
+            },
+            {
+              value: '110107',
+              label: '石景山区',
+            },
+            {
+              value: '110108',
+              label: '海淀区',
+            },
+            {
+              value: '110109',
+              label: '门头沟区',
+            },
+            {
+              value: '110111',
+              label: '房山区',
+            },
+            {
+              value: '110112',
+              label: '通州区',
+            },
+            {
+              value: '110113',
+              label: '顺义区',
+            },
+            {
+              value: '110114',
+              label: '昌平区',
+            },
+            {
+              value: '110115',
+              label: '大兴区',
+            },
+            {
+              value: '110116',
+              label: '怀柔区',
+            },
+            {
+              value: '110117',
+              label: '平谷区',
+            },
+            {
+              value: '110118',
+              label: '密云区',
+            },
+            {
+              value: '110119',
+              label: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            {
+              value: '120101',
+              label: '和平区',
+            },
+            {
+              value: '120102',
+              label: '河东区',
+            },
+            {
+              value: '120103',
+              label: '河西区',
+            },
+            {
+              value: '120104',
+              label: '南开区',
+            },
+            {
+              value: '120105',
+              label: '河北区',
+            },
+            {
+              value: '120106',
+              label: '红桥区',
+            },
+            {
+              value: '120110',
+              label: '东丽区',
+            },
+            {
+              value: '120111',
+              label: '西青区',
+            },
+            {
+              value: '120112',
+              label: '津南区',
+            },
+            {
+              value: '120113',
+              label: '北辰区',
+            },
+            {
+              value: '120114',
+              label: '武清区',
+            },
+            {
+              value: '120115',
+              label: '宝坻区',
+            },
+            {
+              value: '120116',
+              label: '滨海新区',
+            },
+            {
+              value: '120117',
+              label: '宁河区',
+            },
+            {
+              value: '120118',
+              label: '静海区',
+            },
+            {
+              value: '120119',
+              label: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onChange(e) {
+      const { selectedOptions } = e;
+      this.note = selectedOptions.map(item => item.label).join('/');
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/with-title/index.vue b/packages/tdesign-uniapp/components/cascader/_example/with-title/index.vue
new file mode 100644
index 000000000..0340537e9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/with-title/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      :options="options"
+      title="请选择地址"
+      :sub-titles="subTitles"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            {
+              value: '110101',
+              label: '东城区',
+            },
+            {
+              value: '110102',
+              label: '西城区',
+            },
+            {
+              value: '110105',
+              label: '朝阳区',
+            },
+            {
+              value: '110106',
+              label: '丰台区',
+            },
+            {
+              value: '110107',
+              label: '石景山区',
+            },
+            {
+              value: '110108',
+              label: '海淀区',
+            },
+            {
+              value: '110109',
+              label: '门头沟区',
+            },
+            {
+              value: '110111',
+              label: '房山区',
+            },
+            {
+              value: '110112',
+              label: '通州区',
+            },
+            {
+              value: '110113',
+              label: '顺义区',
+            },
+            {
+              value: '110114',
+              label: '昌平区',
+            },
+            {
+              value: '110115',
+              label: '大兴区',
+            },
+            {
+              value: '110116',
+              label: '怀柔区',
+            },
+            {
+              value: '110117',
+              label: '平谷区',
+            },
+            {
+              value: '110118',
+              label: '密云区',
+            },
+            {
+              value: '110119',
+              label: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            {
+              value: '120101',
+              label: '和平区',
+            },
+            {
+              value: '120102',
+              label: '河东区',
+            },
+            {
+              value: '120103',
+              label: '河西区',
+            },
+            {
+              value: '120104',
+              label: '南开区',
+            },
+            {
+              value: '120105',
+              label: '河北区',
+            },
+            {
+              value: '120106',
+              label: '红桥区',
+            },
+            {
+              value: '120110',
+              label: '东丽区',
+            },
+            {
+              value: '120111',
+              label: '西青区',
+            },
+            {
+              value: '120112',
+              label: '津南区',
+            },
+            {
+              value: '120113',
+              label: '北辰区',
+            },
+            {
+              value: '120114',
+              label: '武清区',
+            },
+            {
+              value: '120115',
+              label: '宝坻区',
+            },
+            {
+              value: '120116',
+              label: '滨海新区',
+            },
+            {
+              value: '120117',
+              label: '宁河区',
+            },
+            {
+              value: '120118',
+              label: '静海区',
+            },
+            {
+              value: '120119',
+              label: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+      subTitles: ['请选择省份', '请选择城市', '请选择区/县'],
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onChange(e) {
+      const { selectedOptions } = e;
+      this.note = selectedOptions.map(item => item.label).join('/');
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/_example/with-value/index.vue b/packages/tdesign-uniapp/components/cascader/_example/with-value/index.vue
new file mode 100644
index 000000000..74ba6207f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/_example/with-value/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <view>
+    <t-cell
+      title="地址"
+      :note="note"
+      arrow
+      @click="showCascader"
+    />
+
+    <t-cascader
+      v-model:visible="visible"
+      value="120119"
+      :options="options"
+      title="请选择地址"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            {
+              value: '110101',
+              label: '东城区',
+            },
+            {
+              value: '110102',
+              label: '西城区',
+            },
+            {
+              value: '110105',
+              label: '朝阳区',
+            },
+            {
+              value: '110106',
+              label: '丰台区',
+            },
+            {
+              value: '110107',
+              label: '石景山区',
+            },
+            {
+              value: '110108',
+              label: '海淀区',
+            },
+            {
+              value: '110109',
+              label: '门头沟区',
+            },
+            {
+              value: '110111',
+              label: '房山区',
+            },
+            {
+              value: '110112',
+              label: '通州区',
+            },
+            {
+              value: '110113',
+              label: '顺义区',
+            },
+            {
+              value: '110114',
+              label: '昌平区',
+            },
+            {
+              value: '110115',
+              label: '大兴区',
+            },
+            {
+              value: '110116',
+              label: '怀柔区',
+            },
+            {
+              value: '110117',
+              label: '平谷区',
+            },
+            {
+              value: '110118',
+              label: '密云区',
+            },
+            {
+              value: '110119',
+              label: '延庆区',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: '天津市',
+      value: '120000',
+      children: [
+        {
+          value: '120100',
+          label: '天津市',
+          children: [
+            {
+              value: '120101',
+              label: '和平区',
+            },
+            {
+              value: '120102',
+              label: '河东区',
+            },
+            {
+              value: '120103',
+              label: '河西区',
+            },
+            {
+              value: '120104',
+              label: '南开区',
+            },
+            {
+              value: '120105',
+              label: '河北区',
+            },
+            {
+              value: '120106',
+              label: '红桥区',
+            },
+            {
+              value: '120110',
+              label: '东丽区',
+            },
+            {
+              value: '120111',
+              label: '西青区',
+            },
+            {
+              value: '120112',
+              label: '津南区',
+            },
+            {
+              value: '120113',
+              label: '北辰区',
+            },
+            {
+              value: '120114',
+              label: '武清区',
+            },
+            {
+              value: '120115',
+              label: '宝坻区',
+            },
+            {
+              value: '120116',
+              label: '滨海新区',
+            },
+            {
+              value: '120117',
+              label: '宁河区',
+            },
+            {
+              value: '120118',
+              label: '静海区',
+            },
+            {
+              value: '120119',
+              label: '蓟州区',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export default {
+  components: {
+    tCell,
+    tCascader,
+  },
+  data() {
+    return {
+      options: data.areaList,
+      note: '请选择地址',
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    showCascader() {
+      this.visible = true;
+    },
+    onChange(e) {
+      const { selectedOptions } = e;
+      this.note = selectedOptions.map(item => item.label).join('/');
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/cascader.less b/packages/tdesign-uniapp/components/cascader/cascader.less
new file mode 100644
index 000000000..cccd21110
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/cascader.less
@@ -0,0 +1,123 @@
+@import '../common/style/base.less';
+
+@cascader: ~'@{prefix}-cascader';
+
+@cascader-bg-color: var(--td-cascader-bg-color, @bg-color-container);
+@cascader-active-color: var(--td-cascader-active-color, @brand-color);
+@cascader-disabled-color: var(--td-cascader-disabled-color, @text-color-disabled);
+@cascader-title-color: var(--td-cascader-title-color, @text-color-primary);
+@cascader-title-height: var(--td-cascader-title-height, 26rpx);
+@cascader-title-padding: var(--td-cascader-title-padding, @spacer-2);
+@cascader-title-font-size: var(--td-cascader-title-font-size, 36rpx);
+@cascader-options-title-color: var(--td-cascader-options-title-color, @text-color-placeholder);
+@cascader-border-color: var(--td-cascader-border-color, @component-stroke);
+@cascader-content-height: var(--td-cascader-content-height, 78vh);
+@cascader-options-height: var(--td-cascader-options-height, calc(100% - @cascader-step-height));
+// steps
+@cascader-step-height: var(--td-cascader-step-height, 88rpx);
+@cascader-step-dot-size: var(--td-cascader-step-dot-size, 16rpx);
+@cascader-step-arrow-color: var(--td-cascader-step-arrow-color, @text-color-placeholder);
+
+.@{cascader} {
+  display: flex;
+  flex-direction: column;
+  background-color: @cascader-bg-color;
+  color: @cascader-title-color;
+  border-radius: @radius-extraLarge @radius-extraLarge 0 0;
+  --td-radio-icon-checked-color: @cascader-active-color;
+  --td-tab-item-active-color: @cascader-active-color;
+  --td-tab-track-color: @cascader-active-color;
+
+  &__close-btn {
+    right: 32rpx;
+    top: 24rpx;
+    position: absolute;
+  }
+
+  &__title {
+    position: relative;
+    font-weight: 700;
+    text-align: center;
+    line-height: @cascader-title-height;
+    padding: @cascader-title-padding;
+    font-size: @cascader-title-font-size;
+  }
+
+  &__content {
+    width: 100%;
+    height: @cascader-content-height;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__options {
+    width: 100vw;
+
+    &-title {
+      color: @cascader-options-title-color;
+      font-size: @font-size-base;
+      line-height: 44rpx;
+      padding-top: 40rpx;
+      padding-left: @spacer-2;
+      box-sizing: border-box;
+    }
+
+    &-container {
+      flex: 1;
+      display: flex;
+      transition: all ease 0.3s;
+    }
+  }
+
+  &__step {
+    display: flex;
+    align-items: center;
+    height: @cascader-step-height;
+
+    &s {
+      padding: 0 32rpx 10rpx;
+      .border(bottom, @cascader-border-color);
+    }
+
+    &-dot {
+      position: relative;
+      width: @cascader-step-dot-size;
+      height: @cascader-step-dot-size;
+      border-radius: 50%;
+      border: 2rpx solid @cascader-active-color;
+      box-sizing: border-box;
+
+      &:not(.@{cascader}__step-dot--last)::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: calc(@cascader-step-dot-size + 14rpx);
+        height: 36rpx;
+        width: 2rpx;
+        background: @cascader-active-color;
+        transform: translateX(-50%);
+      }
+
+      &--active {
+        background: @cascader-active-color;
+        border-color: @cascader-active-color;
+      }
+    }
+
+    &-label {
+      padding-left: @spacer-2;
+      font-size: @font-size-m;
+
+      &--active {
+        color: @cascader-active-color;
+        font-weight: 600;
+      }
+    }
+
+    // :deep(&-arrow) {
+    //   color: @cascader-step-arrow-color;
+    //   margin-left: auto;
+    // }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/cascader/cascader.vue b/packages/tdesign-uniapp/components/cascader/cascader.vue
new file mode 100644
index 000000000..373e89dbb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/cascader.vue
@@ -0,0 +1,516 @@
+<template>
+  <view>
+    <TPopup
+      :class="tClass"
+      :visible="dataVisible"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <view
+        :style="_._style([customStyle])"
+        :class="name"
+      >
+        <view :class="name + '__title'">
+          <slot name="title" />
+          {{ title }}
+        </view>
+        <view
+          :class="name + '__close-btn'"
+          @click="onClose"
+        >
+          <slot name="close-btn" />
+          <TIcon
+            v-if="closeBtn"
+            size="48rpx"
+            name="close"
+          />
+        </view>
+
+        <slot name="header" />
+
+        <view :class="name + '__content'">
+          <block v-if="steps && steps.length">
+            <view
+              v-if="theme == 'step'"
+              :class="name + '__steps'"
+            >
+              <view
+                v-for="(item, index) in steps"
+                :key="index"
+                :class="name + '__step'"
+                :data-index="index"
+                @click="() => onStepClick(index)"
+              >
+                <view
+                  :class="
+                    name +
+                      '__step-dot ' +
+                      name +
+                      '__step-dot--' +
+                      (item !== placeholder ? 'active' : '') +
+                      ' ' +
+                      name +
+                      '__step-dot--' +
+                      (index === steps.length - 1 ? 'last' : '')
+                  "
+                />
+
+                <view :class="name + '__step-label ' + name + '__step-label--' + (index === stepIndex ? 'active' : '')">
+                  {{ item }}
+                </view>
+
+                <TIcon
+                  name="chevron-right"
+                  size="44rpx"
+                  :t-class="name + '__step-arrow'"
+                  :custom-style="stepArrowCustomStyle"
+                  style="margin-left: auto"
+                />
+              </view>
+            </view>
+
+            <TTabs
+              v-if="theme == 'tab'"
+              id="tabs"
+              ref="tabs"
+              :value="stepIndex"
+              :space-evenly="false"
+              @change="({value}) => onTabChange(value)"
+            >
+              <TTabPanel
+                v-for="(item, index) in steps"
+                :key="index"
+                :ref="`tab-${index}`"
+                :value="index"
+                :label="item"
+              />
+            </TTabs>
+          </block>
+
+          <view
+            v-if="subTitles && subTitles[stepIndex]"
+            :class="name + '__options-title'"
+          >
+            {{ subTitles[stepIndex] }}
+          </view>
+
+          <view
+            :class="name + '__options-container'"
+            :style="'width: ' + (items.length + 1) + '00vw; transform: translateX(-' + stepIndex + '00vw)'"
+          >
+            <scroll-view
+              v-for="(options, index) in items"
+              :key="index"
+              :class="name + '__options'"
+              scroll-y
+              :scroll-top="scrollTopList[index]"
+              type="list"
+              :style="'height: ' + _optionsHeight + 'px'"
+            >
+              <view :class="'cascader-radio-group-' + index">
+                <TRadioGroup
+                  :value="selectedValue[index]"
+                  :keys="keys"
+                  :options="options"
+                  :data-level="index"
+                  placement="right"
+                  icon="line"
+                  borderless
+                  @change="({ value }) => handleSelect($event, { level: index, value })"
+                />
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </TPopup>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TPopup from '../popup/popup';
+import TTabs from '../tabs/tabs';
+import TTabPanel from '../tab-panel/tab-panel';
+import TRadioGroup from '../radio-group/radio-group';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, coalesce, nextTick } from '../common/utils';
+
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-cascader`;
+
+function parseOptions(options, keys) {
+  const label = coalesce(keys?.label, 'label');
+  const value = coalesce(keys?.value, 'value');
+
+  return options.map(item => ({
+    [label]: item[label],
+    [value]: item[value],
+  }));
+}
+
+const defaultState = {
+  contentHeight: 0,
+  stepHeight: 0,
+  tabsHeight: 0,
+  subTitlesHeight: 0,
+  stepsInitHeight: 0,
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    TIcon,
+    TPopup,
+    TTabs,
+    TTabPanel,
+    TRadioGroup,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      name,
+      stepIndex: 0,
+      selectedIndexes: [],
+      selectedValue: [],
+      scrollTopList: [],
+      steps: [],
+      _optionsHeight: 0,
+      _,
+
+      dataVisible: this.visible,
+      dataValue: coalesce(this.value, this.defaultValue),
+      items: [],
+    };
+  },
+  computed: {
+    stepArrowCustomStyle() {
+      return _._style({
+        color: 'var(--td-cascader-step-arrow-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
+        marginLeft: 'auto',
+      });
+    },
+  },
+  watch: {
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+    dataVisible: {
+      handler(v) {
+        if (v) {
+          nextTick().then(() => {
+            const $tabs = this.$refs.tabs;
+            $tabs?.setTrack();
+            $tabs?.getTabHeight().then((res) => {
+              this.state.tabsHeight = res.height;
+            });
+          });
+
+          // 不能使用 this.$nextTick，在头条小程序下会报错
+          nextTick().then(() => {
+            this.initOptionsHeight(this.steps.length);
+            this.updateScrollTop();
+            this.initWithValue();
+          });
+        } else {
+          this.state = { ...defaultState };
+        }
+      },
+      immediate: true,
+    },
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler() {
+        this.initWithValue();
+      },
+      immediate: true,
+    },
+
+    options: {
+      handler() {
+        const { selectedValue, steps, items } = this.genItems();
+
+        this.steps = steps;
+        this.items = items;
+        this.selectedValue = selectedValue;
+        this.stepIndex = items.length - 1;
+        this.setTabParent();
+      },
+      immediate: true,
+      deep: true,
+    },
+    selectedIndexes: {
+      handler() {
+        const { visible, theme } = this;
+        const { selectedValue, steps, items } = this.genItems();
+
+        this.steps = steps;
+        this.setTabParent();
+        this.selectedValue = selectedValue;
+        this.stepIndex = items.length - 1;
+
+        if (JSON.stringify(items) !== JSON.stringify(this.items)) {
+          this.items = items;
+        }
+
+
+        if (visible && theme === 'step') {
+          this.updateOptionsHeight(steps.length);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    stepIndex: {
+      handler() {
+        const { dataVisible: visible } = this;
+
+        if (visible) {
+          this.updateScrollTop();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  created() {
+    this.state = {
+      ...defaultState,
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    setTabParent() {
+      // #ifdef MP-TOUTIAO
+      nextTick().then(() => {
+        const tabsRef = this.$refs.tabs;
+        this.steps.forEach((_, index) => {
+          const tabRef = this.$refs[`tab-${index}`];
+          tabRef?.[0]?.setParent(tabsRef);
+        });
+      });
+      // #endif
+    },
+    updateOptionsHeight(steps) {
+      const { contentHeight, stepsInitHeight, stepHeight, subTitlesHeight } = this.state;
+      this._optionsHeight = contentHeight - stepsInitHeight - subTitlesHeight - (steps - 1) * stepHeight;
+    },
+
+    async initOptionsHeight(steps) {
+      const { theme, subTitles } = this;
+
+      const { height } = await getRect(this, `.${name}__content`);
+      this.state.contentHeight = height;
+
+      if (theme === 'step') {
+        await Promise.all([
+          getRect(this, `.${name}__steps`),
+          getRect(this, `.${name}__step`),
+        ])
+          .then(([stepsRect, stepRect]) => {
+            this.state.stepsInitHeight = stepsRect.height - (steps - 1) * stepRect.height;
+            this.state.stepHeight = stepRect.height;
+          })
+          .catch(() => {
+          });
+      }
+
+      if (subTitles.length > 0) {
+        const { height } = await getRect(this, `.${name}__options-title`);
+        this.state.subTitlesHeight = height;
+      }
+
+      const optionsInitHeight = this.state.contentHeight - this.state.subTitlesHeight;
+      this._optionsHeight = theme === 'step'
+        ? optionsInitHeight - this.state.stepsInitHeight - (steps - 1) * this.state.stepHeight
+        : optionsInitHeight - this.state.tabsHeight;
+    },
+
+    initWithValue() {
+      if (this.dataValue != null && this.dataValue !== '') {
+        const selectedIndexes = this.getIndexesByValue(this.options, this.dataValue);
+
+        if (selectedIndexes) {
+          this.selectedIndexes = selectedIndexes;
+        }
+      } else {
+        this.selectedIndexes = [];
+      }
+    },
+    getIndexesByValue(options, value) {
+      const { keys } = this;
+
+      for (let i = 0, size = options.length; i < size; i += 1) {
+        const opt = options[i];
+        if (opt[coalesce(keys?.value, 'value')] === value) {
+          return [i];
+        }
+        if (opt[coalesce(keys?.children, 'children')]) {
+          const res = this.getIndexesByValue(opt[coalesce(keys?.children, 'children')], value);
+          if (res) {
+            return [i, ...res];
+          }
+        }
+      }
+    },
+    updateScrollTop() {
+      const { dataVisible: visible, items, selectedIndexes, stepIndex } = this;
+
+      if (visible) {
+        getRect(this, '.cascader-radio-group-0').then((rect) => {
+          const eachRadioHeight = rect.height / items[0]?.length;
+
+          this[`scrollTopList[${stepIndex}]`] = eachRadioHeight * selectedIndexes[stepIndex];
+        })
+          .catch(() => {
+          });
+      }
+    },
+    hide(trigger) {
+      this.dataVisible = false;
+      this.$emit('close', { trigger });
+      this.$emit('update:visible', false);
+    },
+    onVisibleChange() {
+      this.hide('overlay');
+    },
+    onClose() {
+      if (this.checkStrictly) {
+        this.triggerChange();
+      }
+      this.hide('close-btn');
+    },
+    onStepClick(index) {
+      this.stepIndex = index;
+    },
+    onTabChange(value) {
+      this.stepIndex = value;
+    },
+    genItems() {
+      const { options, selectedIndexes, keys, placeholder } = this;
+      const selectedValue = [];
+      const steps = [];
+      const items = [parseOptions(options, keys)];
+
+      if (options.length > 0) {
+        let current = options;
+        for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
+          const index = selectedIndexes[i];
+          const next = current[index];
+          current = next[coalesce(keys?.children, 'children')];
+
+          selectedValue.push(next[coalesce(keys?.value, 'value')]);
+          steps.push(next[coalesce(keys?.label, 'label')]);
+
+          if (next[coalesce(keys?.children, 'children')]) {
+            items.push(parseOptions(next[coalesce(keys?.children, 'children')], keys));
+          }
+        }
+      }
+
+      if (steps.length < items.length) {
+        steps.push(placeholder);
+      }
+
+      return {
+        selectedValue,
+        steps,
+        items,
+      };
+    },
+    handleSelect(_, { level, value }) {
+      const { checkStrictly } = this;
+      const { selectedIndexes, items, keys, options, selectedValue } = this;
+
+      const index = items[level].findIndex(item => item[coalesce(keys?.value, 'value')] === value);
+
+      let item = selectedIndexes.slice(0, level).reduce((acc, item, index) => {
+        if (index === 0) {
+          return acc[item];
+        }
+        return acc[coalesce(keys?.children, 'children')][item];
+      }, options);
+
+
+      if (level === 0) {
+        item = item[index];
+      } else {
+        item = item[coalesce(keys?.children, 'children')][index];
+      }
+
+      if (item.disabled) {
+        return;
+      }
+      this.$emit('pick', {
+        value: item[coalesce(keys?.value, 'value')],
+        label: item[coalesce(keys?.label, 'label')],
+        index,
+        level,
+      });
+      selectedIndexes[level] = index;
+      if (checkStrictly && selectedValue.includes(String(value))) {
+        selectedIndexes.length = level;
+        this.selectedIndexes = selectedIndexes;
+        return;
+      }
+      selectedIndexes.length = level + 1;
+
+      const { items: newItems } = this.genItems();
+      if (item?.[coalesce(keys?.children, 'children')]?.length >= 0) {
+        this.selectedIndexes = selectedIndexes;
+        this[`items[${level + 1}]`] = newItems[level + 1];
+      } else {
+        // setCascaderValue(item.value);
+        this.selectedIndexes = selectedIndexes;
+        setTimeout(this.triggerChange);
+
+        this.hide('finish');
+      }
+    },
+    triggerChange() {
+      const { items, selectedValue, selectedIndexes } = this;
+      this._trigger('change', {
+        value: coalesce(selectedValue[selectedValue.length - 1], ''),
+        selectedOptions: items.map((item, index) => item[selectedIndexes[index]]).filter(Boolean),
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cascader.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/cascader/props.ts b/packages/tdesign-uniapp/components/cascader/props.ts
new file mode 100644
index 000000000..e749dbba2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/props.ts
@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCascaderProps } from './type';
+export default {
+  /** 父子节点选中状态不再关联，可各自选中或取消 */
+  checkStrictly: Boolean,
+  /** 关闭按钮 */
+  closeBtn: {
+    type: Boolean,
+    default: true as TdCascaderProps['closeBtn'],
+  },
+  /** 用来定义 value / label 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** 可选项数据源 */
+  options: {
+    type: Array,
+    default: (): TdCascaderProps['options'] => [],
+  },
+  /** 未选中时的提示文案 */
+  placeholder: {
+    type: String,
+    default: '选择选项',
+  },
+  /** 每级展示的次标题 */
+  subTitles: {
+    type: Array,
+    default: (): TdCascaderProps['subTitles'] => [],
+  },
+  /** 展示风格 */
+  theme: {
+    type: String,
+    default: 'step' as TdCascaderProps['theme'],
+    validator(val: TdCascaderProps['theme']): boolean {
+      if (!val) return true;
+      return ['step', 'tab'].includes(val);
+    },
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 选项值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选项值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 是否展示 */
+  visible: Boolean,
+  /** 值发生变更时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择后触发 */
+  onPick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/cascader/type.ts b/packages/tdesign-uniapp/components/cascader/type.ts
new file mode 100644
index 000000000..24aec3bb0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cascader/type.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TreeOptionData, KeysType } from '../common/common';
+
+export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 父子节点选中状态不再关联，可各自选中或取消
+   * @default false
+   */
+  checkStrictly?: boolean;
+  /**
+   * 关闭按钮
+   * @default true
+   */
+  closeBtn?: boolean;
+  /**
+   * 用来定义 value / label 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 可选项数据源
+   * @default []
+   */
+  options?: Array<CascaderOption>;
+  /**
+   * 未选中时的提示文案
+   * @default 选择选项
+   */
+  placeholder?: string;
+  /**
+   * 每级展示的次标题
+   * @default []
+   */
+  subTitles?: Array<string>;
+  /**
+   * 展示风格
+   * @default step
+   */
+  theme?: 'step' | 'tab';
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 选项值
+   */
+  value?: string | number;
+  /**
+   * 选项值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 是否展示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 值发生变更时触发
+   */
+  onChange?: (context: { value: string | number; selectedOptions: string[] }) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: CascaderTriggerSource }) => void;
+  /**
+   * 选择后触发
+   */
+  onPick?: (context: { value: string | number; label: string; index: number; level: number }) => void;
+}
+
+export type CascaderTriggerSource = 'overlay' | 'close-btn' | 'finish';
diff --git a/packages/tdesign-uniapp/components/cell-group/_example/api.md b/packages/tdesign-uniapp/components/cell-group/_example/api.md
new file mode 100644
index 000000000..05270849e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/_example/api.md
@@ -0,0 +1,7 @@
+### CellGroup Props
+
+| 名称             | 类型    | 默认值 | 说明                    | 必传 |
+| -- | -- | -- | -- | -- |
+| bordered         | Boolean | -      | 是否显示组边框          | N    |
+| external-classes | Array   | -      | 组件类名。`['t-class']` | N    |
+| title            | String  | -      | 必需。单元格组标题      | Y    |
diff --git a/packages/tdesign-uniapp/components/cell-group/_example/cell-group.less b/packages/tdesign-uniapp/components/cell-group/_example/cell-group.less
new file mode 100644
index 000000000..7b7bb0f49
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/_example/cell-group.less
@@ -0,0 +1,7 @@
+page {
+    // 覆盖t-cell-group组件内部样式
+    .t-cell-group__title {
+        line-height: 104rpx;
+        font-size: 24rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/cell-group/_example/cell-group.vue b/packages/tdesign-uniapp/components/cell-group/_example/cell-group.vue
new file mode 100644
index 000000000..dc4d89903
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/_example/cell-group.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="cell-group 组合单元格"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <view class="demo-title">
+        Cell-group 组合单元格
+      </view>
+      <view class="demo-desc">
+        cell的组合单元格
+      </view>
+
+      <view>
+        <t-cell-group title="01 基础用法">
+          <t-cell
+            title="单行标题"
+            required
+          />
+          <t-cell
+            title="单行标题"
+            hover
+            note="辅助信息"
+          />
+          <t-cell
+            title="单行标题"
+            hover
+            arrow
+          />
+          <t-cell
+            title="单行标题"
+            hover
+            note="辅助信息"
+            arrow
+          />
+        </t-cell-group>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './cell-group.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/cell-group/cell-group.less b/packages/tdesign-uniapp/components/cell-group/cell-group.less
new file mode 100644
index 000000000..d094d769d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/cell-group.less
@@ -0,0 +1,43 @@
+// @import (css) '../common/index.wxss';
+@import '../common/style/base.less';
+
+@cell-group-title-font-size: var(--td-cell-group-title-font-size, 28rpx);
+@cell-group-title-line-height: var(--td-cell-group-title-line-height, 90rpx);
+@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 32rpx);
+@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer);
+@cell-group-title-color: var(--td-cell-group-title-color, @text-color-placeholder);
+@cell-group-border-color: var(--td-cell-group-border-color, @component-stroke);
+
+.@{prefix}-cell-group {
+  position: relative;
+
+  &__title {
+    font-family: PingFangSC-Regular;
+    font-size: @cell-group-title-font-size;
+    color: @cell-group-title-color;
+    text-align: left;
+    line-height: @cell-group-title-line-height;
+    background-color: @cell-group-title-bg-color;
+    padding-left: @cell-group-title-padding-left;
+  }
+
+  &--bordered {
+    &::before {
+      .hairline-top(@cell-group-border-color);
+      transform-origin: top;
+      z-index: 1;
+    }
+
+    &::after {
+      .hairline-bottom(@cell-group-border-color);
+      transform-origin: bottom;
+      z-index: 1;
+    }
+  }
+
+  &--card {
+    margin: 0 32rpx;
+    border-radius: @radius-large;
+    overflow: hidden;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/cell-group/cell-group.vue b/packages/tdesign-uniapp/components/cell-group/cell-group.vue
new file mode 100644
index 000000000..8522dabb3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/cell-group.vue
@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <view
+      v-if="title"
+      :class="[
+        classPrefix + '__title ',
+        tClassTitle
+      ]"
+    >
+      {{ title }}
+    </view>
+    <view
+      :style="_._style([customStyle])"
+      :class="[
+        _.cls(classPrefix, [['bordered', bordered], theme]),
+        tClass
+      ]"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-cell-group`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`, `${prefix}-class-title`],
+  mixins: [ParentMixin(RELATION_MAP.Cell)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+    };
+  },
+  methods: {
+    innerAfterLinked() {
+      this.updateLastChid();
+    },
+    innerAfterUnLinked() {
+      this.updateLastChid();
+    },
+    updateLastChid() {
+      const { children } = this;
+      children.forEach((child, index) => {
+        child.isLastChild = index === children.length - 1;
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cell-group.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/cell-group/props.ts b/packages/tdesign-uniapp/components/cell-group/props.ts
new file mode 100644
index 000000000..490c8a146
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/props.ts
@@ -0,0 +1,25 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCellGroupProps } from './type';
+export default {
+  /** 是否显示组边框 */
+  bordered: Boolean,
+  /** 单元格组风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdCellGroupProps['theme'],
+    validator(val: TdCellGroupProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'card'].includes(val);
+    },
+  },
+  /** 单元格组标题 */
+  title: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/cell-group/type.ts b/packages/tdesign-uniapp/components/cell-group/type.ts
new file mode 100644
index 000000000..76ed34bd0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell-group/type.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCellGroupProps {
+  /**
+   * 是否显示组边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 单元格组风格
+   * @default default
+   */
+  theme?: 'default' | 'card';
+  /**
+   * 单元格组标题
+   * @default ''
+   */
+  title?: string;
+}
diff --git a/packages/tdesign-uniapp/components/cell/README.en-US.md b/packages/tdesign-uniapp/components/cell/README.en-US.md
new file mode 100644
index 000000000..fa976f5ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/README.en-US.md
@@ -0,0 +1,118 @@
+:: BASE_DOC ::
+
+## API
+
+### Cell Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | middle | options: top/middle/bottom | N
+arrow | Boolean / Object | false | \- | N
+bordered | Boolean | true | \- | N
+description | String | - | \- | N
+hover | Boolean | - | \- | N
+image | String | - | \- | N
+jump-type | String | navigateTo | options: switchTab/reLaunch/redirectTo/navigateTo | N
+left-icon | String / Object | - | \- | N
+note | String | - | \- | N
+note-style | String / Object | - | \- | N
+required | Boolean | false | \- | N
+right-icon | String / Object | - | \- | N
+right-icon-style | String / Object | - | \- | N
+title | String | - | \- | N
+title-style | String / Object | - | \- | N
+url | String | - | \- | N
+
+### Cell Events
+
+name | params | description
+-- | -- | --
+click | `(e: MouseEvent)` | \-
+
+### Cell Slots
+
+name | Description
+-- | --
+description | \-
+image | \-
+left-icon | \-
+note | \-
+right-icon | \-
+title | \-
+
+### Cell External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-center | \-
+t-class-description | \-
+t-class-hover | \-
+t-class-image | \-
+t-class-left | \-
+t-class-left-icon | \-
+t-class-note | \-
+t-class-right | \-
+t-class-right-icon | \-
+t-class-title | \-
+
+
+### CellGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bordered | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+title | String | - | \- | N
+
+### CellGroup Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CellGroup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cell-group-border-color | @component-stroke | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @text-color-placeholder | - 
+--td-cell-group-title-font-size | 28rpx | - 
+--td-cell-group-title-line-height | 90rpx | - 
+--td-cell-group-title-padding-left | 32rpx | - 
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-left-space | @cell-horizontal-padding | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-border-width | 1px | - 
+--td-cell-description-color | @text-color-secondary | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 44rpx | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 32rpx | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 96rpx | - 
+--td-cell-image-width | 96rpx | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 48rpx | - 
+--td-cell-line-height | 48rpx | - 
+--td-cell-note-color | @text-color-placeholder | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @text-color-placeholder | - 
+--td-cell-right-icon-font-size | 48rpx | - 
+--td-cell-title-color | @text-color-primary | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/cell/README.md b/packages/tdesign-uniapp/components/cell/README.md
new file mode 100644
index 000000000..261c3cea1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/README.md
@@ -0,0 +1,149 @@
+---
+title: Cell 单元格
+description: 用于各个类别行的信息展示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCell from 'tdesign-uniapp/cell/cell.vue';
+import TCellGroup from 'tdesign-uniapp/cell-group/cell-group.vue';
+```
+
+### 类型
+
+单行单元格
+
+{{ base }}
+
+多行单元格
+
+{{ multiple }}
+
+### 样式
+
+卡片单元格
+
+{{ theme }}
+
+## API
+
+### Cell Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+arrow | Boolean / Object | false | 是否显示右侧箭头 | N
+bordered | Boolean | true | 是否显示下边框 | N
+description | String | - | 下方内容描述 | N
+hover | Boolean | - | 是否开启点击反馈 | N
+image | String | - | 主图 | N
+jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
+left-icon | String / Object | - | 左侧图标，出现在单元格标题的左侧 | N
+note | String | - | 和标题同行的说明文字 | N
+note-style | String / Object | - | 说明文字自定义样式 | N
+required | Boolean | false | 是否显示表单必填星号 | N
+right-icon | String / Object | - | 最右侧图标 | N
+right-icon-style | String / Object | - | 右侧图标自定义样式 | N
+title | String | - | 标题 | N
+title-style | String / Object | - | 标题自定义样式 | N
+url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
+
+### Cell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(e: MouseEvent)` | 右侧内容
+
+### Cell Slots
+
+名称 | 描述
+-- | --
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+left-icon | 自定义 `left-icon` 显示内容
+note | 自定义 `note` 显示内容
+right-icon | 自定义 `right-icon` 显示内容
+title | 自定义 `title` 显示内容
+
+### Cell External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-center | 中间（`title`, `description`）内容样式类
+t-class-description | 下方描述内容样式类
+t-class-hover | 悬停样式类
+t-class-image | 图片样式类
+t-class-left | 左侧内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-note | 右侧说明文字样式类
+t-class-right | 右侧内容样式类
+t-class-right-icon | 右侧图标样式类
+t-class-title | 标题样式类
+
+
+### CellGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bordered | Boolean | false | 是否显示组边框 | N
+theme | String | default | 单元格组风格。可选项：default/card | N
+title | String | - | 单元格组标题 | N
+
+### CellGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### CellGroup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-cell-group-border-color | @component-stroke | - |
+| --td-cell-group-title-bg-color | @bg-color-secondarycontainer | - |
+| --td-cell-group-title-color | @text-color-placeholder | - |
+| --td-cell-group-title-font-size | 28rpx | - |
+| --td-cell-group-title-line-height | 90rpx | - |
+| --td-cell-group-title-padding-left | 32rpx | - |
+| --td-cell-bg-color | @bg-color-container | - |
+| --td-cell-border-color | @component-stroke | - |
+| --td-cell-border-left-space | @cell-horizontal-padding | - |
+| --td-cell-border-right-space | 0 | - |
+| --td-cell-border-width | 1px | - |
+| --td-cell-description-color | @text-color-secondary | - |
+| --td-cell-description-font-size | @font-size-base | - |
+| --td-cell-description-line-height | 44rpx | - |
+| --td-cell-height | auto | - |
+| --td-cell-horizontal-padding | 32rpx | - |
+| --td-cell-hover-color | @bg-color-secondarycontainer | - |
+| --td-cell-image-height | 96rpx | - |
+| --td-cell-image-width | 96rpx | - |
+| --td-cell-left-icon-color | @brand-color | - |
+| --td-cell-left-icon-font-size | 48rpx | - |
+| --td-cell-line-height | 48rpx | - |
+| --td-cell-note-color | @text-color-placeholder | - |
+| --td-cell-note-font-size | @font-size-m | - |
+| --td-cell-required-color | @error-color | - |
+| --td-cell-required-font-size | @font-size-m | - |
+| --td-cell-right-icon-color | @text-color-placeholder | - |
+| --td-cell-right-icon-font-size | 48rpx | - |
+| --td-cell-title-color | @text-color-primary | - |
+| --td-cell-title-font-size | @font-size-m | - |
+| --td-cell-vertical-padding | 32rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/cell/_example/base/index.vue b/packages/tdesign-uniapp/components/cell/_example/base/index.vue
new file mode 100644
index 000000000..3c7760770
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/_example/base/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <t-cell
+      title="单行标题"
+      hover
+      :arrow="true"
+    />
+    <t-cell
+      title="单行标题"
+      hover
+      required
+      arrow
+    />
+    <t-cell
+      title="单行标题"
+      hover
+      arrow
+      aria-label="单行标题，有16条消息"
+    >
+      <template
+        #note
+      >
+        <t-badge
+          :count="16"
+          style="display: inline-flex;"
+        />
+      </template>
+    </t-cell>
+    <t-cell
+      title="单行标题"
+      hover
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+        />
+      </template>
+    </t-cell>
+    <t-cell
+      title="单行标题"
+      hover
+      note="辅助信息"
+      arrow
+    />
+    <t-cell
+      title="单行标题"
+      hover
+      arrow
+      left-icon="app"
+      :bordered="false"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tBadge from 'tdesign-uniapp/badge/badge.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tBadge,
+    tSwitch,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/_example/cell.less b/packages/tdesign-uniapp/components/cell/_example/cell.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/cell/_example/cell.vue b/packages/tdesign-uniapp/components/cell/_example/cell.vue
new file mode 100644
index 000000000..2197c556d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/_example/cell.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Cell"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Cell 单元格"
+        desc="用于各个类别行的信息展示。"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="单行单元格"
+      >
+        <baseComp />
+      </t-demo>
+      <t-demo desc="多行单元格">
+        <multiple />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="卡片单元格"
+      >
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import multiple from './multiple/index.vue';
+import theme from './theme/index.vue';
+export default {
+  components: {
+    baseComp,
+    multiple,
+    theme,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './cell.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/_example/multiple/index.vue b/packages/tdesign-uniapp/components/cell/_example/multiple/index.vue
new file mode 100644
index 000000000..41d59d878
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/_example/multiple/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <view>
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      hover
+      arrow
+    />
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      hover
+      arrow
+      required
+    />
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      hover
+      arrow
+    >
+      <template
+        #note
+      >
+        <t-badge
+          :count="16"
+          style="display: inline-flex;"
+        />
+      </template>
+    </t-cell>
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      hover
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+        />
+      </template>
+    </t-cell>
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      note="辅助信息"
+      hover
+      arrow
+    />
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      left-icon="app"
+      hover
+      arrow
+    />
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
+      hover
+    />
+    <t-cell
+      title="单行标题"
+      description="一段很长很长很长的内容文字"
+      hover
+      arrow
+    >
+      <template
+        #left-icon
+      >
+        <view
+          class="avatar"
+        >
+          <!-- #ifdef MP-WEIXIN -->
+          <open-data type="userAvatarUrl" />
+          <!-- #endif -->
+
+          <!-- #ifndef MP-WEIXIN -->
+          <TIcon
+            name="user"
+            size="36"
+          />
+        <!-- #endif -->
+        </view>
+      </template>
+    </t-cell>
+    <t-cell
+      title="单行标题"
+      description="一段很长很长的内容文字"
+      align="top"
+      image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+      hover
+      :bordered="false"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tBadge from 'tdesign-uniapp/badge/badge.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+import TIcon from 'tdesign-uniapp/icon/icon.vue';
+
+
+export default {
+  components: {
+    tCell,
+    tBadge,
+    tSwitch,
+    TIcon,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.avatar {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-self: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/_example/skyline/cell.less b/packages/tdesign-uniapp/components/cell/_example/skyline/cell.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/cell/_example/skyline/cell.vue b/packages/tdesign-uniapp/components/cell/_example/skyline/cell.vue
new file mode 100644
index 000000000..571faa6db
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/_example/skyline/cell.vue
@@ -0,0 +1,60 @@
+<template>
+  <view class="skyline">
+    <t-navbar
+      title="Cell"
+      left-arrow
+    />
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Cell 单元格
+        </view>
+        <view class="demo-desc">
+          用于各个类别行的信息展示。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="单行单元格"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo desc="多行单元格">
+          <multiple />
+        </t-demo>
+        <t-demo
+          title="02 组件样式"
+          desc="卡片单元格"
+        >
+          <theme />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import multiple from '../multiple/index.vue';
+import theme from '../theme/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    multiple,
+    theme,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './cell.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/_example/theme/index.vue b/packages/tdesign-uniapp/components/cell/_example/theme/index.vue
new file mode 100644
index 000000000..18f87118b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/_example/theme/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-cell-group theme="card">
+      <t-cell
+        title="单行标题"
+        left-icon="service"
+        hover
+        arrow
+      />
+      <t-cell
+        title="单行标题"
+        left-icon="internet"
+        hover
+        arrow
+      />
+      <t-cell
+        title="单行标题"
+        left-icon="lock-on"
+        hover
+        arrow
+      />
+    </t-cell-group>
+  </view>
+</template>
+
+<script>
+import tCellGroup from 'tdesign-uniapp/cell-group/cell-group.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+export default {
+  components: {
+    tCellGroup,
+    tCell,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/cell.less b/packages/tdesign-uniapp/components/cell/cell.less
new file mode 100644
index 000000000..fed5a813d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/cell.less
@@ -0,0 +1,138 @@
+@import '../common/style/base.less';
+
+@cell-height: var(--td-cell-height, auto);
+@cell-line-height: var(--td-cell-line-height, 48rpx);
+@cell-vertical-padding: var(--td-cell-vertical-padding, 32rpx);
+@cell-horizontal-padding: var(--td-cell-horizontal-padding, 32rpx);
+@cell-bg-color: var(--td-cell-bg-color, @bg-color-container);
+@cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer);
+@cell-border-color: var(--td-cell-border-color, @component-stroke);
+@cell-border-width: var(--td-cell-border-width, 1px);
+@cell-border-left-space: var(--td-cell-border-left-space, @cell-horizontal-padding);
+@cell-border-right-space: var(--td-cell-border-right-space, 0);
+@cell-description-color: var(--td-cell-description-color, @text-color-secondary);
+@cell-description-font-size: var(--td-cell-description-font-size, @font-size-base);
+@cell-description-line-height: var(--td-cell-description-line-height, 44rpx);
+@cell-note-color: var(--td-cell-note-color, @text-color-placeholder);
+@cell-note-font-size: var(--td-cell-note-font-size, @font-size-m);
+@cell-title-color: var(--td-cell-title-color, @text-color-primary);
+@cell-title-font-size: var(--td-cell-title-font-size, @font-size-m);
+@cell-left-icon-color: var(--td-cell-left-icon-color, @brand-color);
+@cell-left-icon-font-size: var(--td-cell-left-icon-font-size, 48rpx);
+@cell-right-icon-color: var(--td-cell-right-icon-color, @text-color-placeholder);
+@cell-right-icon-font-size: var(--td-cell-right-icon-font-size, 48rpx);
+@cell-required-color: var(--td-cell-required-color, @error-color);
+@cell-required-font-size: var(--td-cell-required-font-size, @font-size-m);
+@cell-image-width: var(--td-cell-image-width, 96rpx);
+@cell-image-height: var(--td-cell-image-height, 96rpx);
+
+.@{prefix}-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: @cell-vertical-padding @cell-horizontal-padding;
+  line-height: @cell-line-height;
+  height: @cell-height;
+  background-color: @cell-bg-color;
+
+  &--bordered::after {
+    .hairline-bottom(@cell-border-color, @cell-border-width);
+    transform-origin: bottom;
+    left: @cell-border-left-space;
+    right: @cell-border-right-space;
+  }
+
+  &__description {
+    font-size: @cell-description-font-size;
+    line-height: @cell-description-line-height;
+    color: @cell-description-color;
+
+    &-text {
+      margin-top: calc(@spacer / 2);
+    }
+  }
+
+  &__note {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: @cell-note-color;
+    font-size: @cell-note-font-size;
+  }
+
+  &__title {
+    margin-right: @spacer-2;
+  }
+
+  &__title,
+  &__note {
+    flex: 1 1 auto;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__title-text {
+    display: flex;
+    font-size: @cell-title-font-size;
+    color: @cell-title-color;
+    font-weight: 400;
+  }
+
+  &__left,
+  &__right {
+    align-self: stretch;
+  }
+
+  &__left {
+    &:not(:empty) {
+      margin-right: @spacer-1;
+    }
+
+    // :deep(&-icon) {
+    //   color: @cell-left-icon-color;
+    //   font-size: @cell-left-icon-font-size;
+    // }
+
+    // :deep(&-image) {
+    //   height: @cell-image-height;
+    //   width: @cell-image-width;
+    // }
+  }
+
+  &__note:not(:empty) + &__right {
+    margin-left: calc(@spacer / 2);
+  }
+
+  &__right {
+    display: flex;
+
+    // :deep(&-icon) {
+    //   color: @cell-right-icon-color;
+    //   font-size: @cell-right-icon-font-size;
+    // }
+
+    &--middle {
+      align-items: center;
+    }
+
+    &--top {
+      align-items: flex-start;
+    }
+
+    &--bottom {
+      align-items: flex-end;
+    }
+  }
+
+  &--hover {
+    background-color: @cell-hover-color;
+  }
+
+  &--required {
+    font-size: @cell-required-font-size;
+    color: @cell-required-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/cell/cell.vue b/packages/tdesign-uniapp/components/cell/cell.vue
new file mode 100644
index 000000000..a50703037
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/cell.vue
@@ -0,0 +1,260 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      tClass,
+      _.cls(classPrefix, [['bordered', bordered || isLastChild]])
+    ]"
+    :hover-class="hover ? classPrefix + '--hover' : ''"
+    hover-stay-time="70"
+    :aria-role="ariaRole || (arrow ? 'button' : '')"
+    :aria-label="ariaLabel"
+    @click="onClick"
+  >
+    <view :class="classPrefix + '__left ' + tClassLeft">
+      <block
+        v-if="_leftIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="leftIconCustomStyle"
+          :t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
+          :name="_leftIcon.name"
+          :size="_leftIcon.size"
+          :color="_leftIcon.color"
+          :aria-hidden="true"
+          :aria-label="_leftIcon.ariaLabel"
+          :aria-role="_leftIcon.ariaRole"
+          @click="'handleClose' || ''"
+        />
+      </block>
+      <slot name="left-icon" />
+      <t-image
+        v-if="image"
+        shape="round"
+        :t-class="classPrefix + '__left-image ' + tClassImage"
+        :src="image"
+        :custom-style="leftImageCustomStyle"
+      />
+      <slot name="image" />
+    </view>
+    <view :class="classPrefix + '__title ' + tClassCenter">
+      <view
+        :class="[
+          classPrefix + '__title-text ',
+          tClassTitle
+        ]"
+        :style="_._style(titleStyle)"
+      >
+        <block v-if="title">
+          {{ title }}
+        </block>
+        <slot name="title" />
+        <block v-if="required">
+          <text
+            decode
+            :class="classPrefix + '--required'"
+          >
+            &nbsp;*
+          </text>
+        </block>
+      </view>
+      <view
+        :class="[
+          classPrefix + '__description ',
+          tClassDescription
+        ]"
+      >
+        <view
+          v-if="description"
+          :class="classPrefix + '__description-text'"
+        >
+          {{ description }}
+        </view>
+        <slot name="description" />
+      </view>
+    </view>
+    <view
+      :class="[
+        classPrefix + '__note ',
+        tClassNote
+      ]"
+      :style="_._style(noteStyle)"
+    >
+      <text v-if="note">
+        {{ note }}
+      </text>
+      <slot name="note" />
+    </view>
+    <view
+      :class="[
+        _.cls(classPrefix + '__right', [align]),
+        tClassRight
+      ]"
+    >
+      <t-icon
+        v-if="_arrow"
+        :custom-style="rightArrowCustomStyle"
+        :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+        :name="_arrow.name || ''"
+        :size="_arrow.size"
+        :color="_arrow.color"
+        :aria-hidden="true"
+        :aria-label="_arrow.ariaLabel"
+        :aria-role="_arrow.ariaRole"
+        @click="'handleClose' || ''"
+      />
+      <block v-else>
+        <block
+          v-if="_rightIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="rightIconCustomStyle"
+            :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+            :name="_rightIcon.name"
+            :size="_rightIcon.size"
+            :color="_rightIcon.color || ''"
+            :aria-hidden="true"
+            :aria-label="_rightIcon.ariaLabel"
+            :aria-role="_rightIcon.ariaRole"
+            @click="'handleClose' || ''"
+          />
+        </block>
+        <slot name="right-icon" />
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-cell`;
+const COMMON_RIGHT_ICON_STYLE = {
+  color: 'var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
+  fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-title`,
+    `${prefix}-class-description`,
+    `${prefix}-class-note`,
+    `${prefix}-class-hover`,
+    `${prefix}-class-image`,
+    `${prefix}-class-left`,
+    `${prefix}-class-left-icon`,
+    `${prefix}-class-center`,
+    `${prefix}-class-right`,
+    `${prefix}-class-right-icon`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Cell)],
+  components: {
+    tIcon,
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _arrow: null,
+      _rightIcon: null,
+      _leftIcon: null,
+      isLastChild: false,
+      _,
+    };
+  },
+  computed: {
+    rightArrowCustomStyle() {
+      return _._style([
+        COMMON_RIGHT_ICON_STYLE,
+        this.rightIconStyle || '',
+        this._arrow.style || '',
+      ]);
+    },
+    rightIconCustomStyle() {
+      return _._style([
+        COMMON_RIGHT_ICON_STYLE,
+        this.rightIconStyle || '',
+        this._rightIcon.style || '',
+      ]);
+    },
+    leftIconCustomStyle() {
+      return _._style([
+        {
+          color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
+          fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
+        },
+        this._leftIcon.style || '',
+      ]);
+    },
+    leftImageCustomStyle() {
+      return _._style({
+        height: 'var(--td-cell-image-height, 48px)',
+        width: 'var(--td-cell-image-width, 48px)',
+      });
+    },
+  },
+  watch: {
+    leftIcon: {
+      handler(e) {
+        this.setIcon('_leftIcon', e, '');
+      },
+      immediate: true,
+    },
+    rightIcon: {
+      handler(e) {
+        this.setIcon('_rightIcon', e, '');
+      },
+      immediate: true,
+    },
+    arrow: {
+      handler(e) {
+        this.setIcon('_arrow', e, 'chevron-right');
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    setIcon(e, t, s) {
+      this[e] = calcIcon(t, s);
+    },
+    onClick(e) {
+      this.$emit('click', e);
+      this.jumpLink();
+    },
+    jumpLink(e = 'url', t = 'jumpType') {
+      const s = this[e];
+      const i = this[t];
+      if (s) {
+        uni[i]({
+          url: s,
+        });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cell.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/cell/props.ts b/packages/tdesign-uniapp/components/cell/props.ts
new file mode 100644
index 000000000..b1374919b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/props.ts
@@ -0,0 +1,87 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCellProps } from './type';
+export default {
+  /** 右侧内容的对齐方式，默认居中对齐 */
+  align: {
+    type: String,
+    default: 'middle' as TdCellProps['align'],
+    validator(val: TdCellProps['align']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+  /** 是否显示右侧箭头 */
+  arrow: {
+    type: [Boolean, Object],
+    default: false as TdCellProps['arrow'],
+  },
+  /** 是否显示下边框 */
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  /** 下方内容描述 */
+  description: {
+    type: String,
+  },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
+  /** 主图 */
+  image: {
+    type: String,
+  },
+  /** 链接跳转类型 */
+  jumpType: {
+    type: String,
+    default: 'navigateTo' as TdCellProps['jumpType'],
+    validator(val: TdCellProps['jumpType']): boolean {
+      if (!val) return true;
+      return ['switchTab', 'reLaunch', 'redirectTo', 'navigateTo'].includes(val);
+    },
+  },
+  /** 左侧图标，出现在单元格标题的左侧 */
+  leftIcon: {
+    type: [String, Object],
+  },
+  /** 和标题同行的说明文字 */
+  note: {
+    type: String,
+  },
+  /** 说明文字自定义样式 */
+  noteStyle: {
+    type: [String, Object],
+  },
+  /** 是否显示表单必填星号 */
+  required: Boolean,
+  /** 最右侧图标 */
+  rightIcon: {
+    type: [String, Object],
+  },
+  /** 右侧图标自定义样式 */
+  rightIconStyle: {
+    type: [String, Object],
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 标题自定义样式 */
+  titleStyle: {
+    type: [String, Object],
+  },
+  /** 点击后跳转链接地址。如果值为空，则表示不需要跳转 */
+  url: {
+    type: String,
+    default: '',
+  },
+  /** 右侧内容 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/cell/type.ts b/packages/tdesign-uniapp/components/cell/type.ts
new file mode 100644
index 000000000..915dab70d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/cell/type.ts
@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCellProps {
+  /**
+   * 右侧内容的对齐方式，默认居中对齐
+   * @default middle
+   */
+  align?: 'top' | 'middle' | 'bottom';
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean | object;
+  /**
+   * 是否显示下边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 下方内容描述
+   */
+  description?: string;
+  /**
+   * 是否开启点击反馈
+   */
+  hover?: boolean;
+  /**
+   * 主图
+   */
+  image?: string;
+  /**
+   * 链接跳转类型
+   * @default navigateTo
+   */
+  jumpType?: 'switchTab' | 'reLaunch' | 'redirectTo' | 'navigateTo';
+  /**
+   * 左侧图标，出现在单元格标题的左侧
+   */
+  leftIcon?: string | object;
+  /**
+   * 和标题同行的说明文字
+   */
+  note?: string;
+  /**
+   * 说明文字自定义样式
+   */
+  noteStyle?: string | object;
+  /**
+   * 是否显示表单必填星号
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * 最右侧图标
+   */
+  rightIcon?: string | object;
+  /**
+   * 右侧图标自定义样式
+   */
+  rightIconStyle?: string | object;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 标题自定义样式
+   */
+  titleStyle?: string | object;
+  /**
+   * 点击后跳转链接地址。如果值为空，则表示不需要跳转
+   * @default ''
+   */
+  url?: string;
+  /**
+   * 右侧内容
+   */
+  onClick?: (e: MouseEvent) => void;
+}
diff --git a/packages/tdesign-uniapp/components/check-tag/check-tag.less b/packages/tdesign-uniapp/components/check-tag/check-tag.less
new file mode 100644
index 000000000..fc5df7cd3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/check-tag/check-tag.less
@@ -0,0 +1,193 @@
+@import '../common/style/base.less';
+
+// themes
+@tag-default-color: var(--td-tag-default-color, @bg-color-component);
+@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer);
+@tag-primary-color: var(--td-tag-primary-color, @brand-color);
+@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light);
+@tag-success-color: var(--td-tag-success-color, @success-color);
+@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1);
+@tag-warning-color: var(--td-tag-warning-color, @warning-color);
+@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1);
+@tag-danger-color: var(--td-tag-danger-color, @error-color);
+@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1);
+
+// variant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container);
+@tag-default-font-color: var(--td-tag-default-font-color, @text-color-primary);
+
+// status
+@tag-disabled-color: var(--td-tag-disabled-color, @text-color-disabled);
+@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled);
+@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border);
+
+// size
+@tag-small-padding: var(--td-tag-small-padding, 12rpx - 1px);
+@tag-medium-padding: var(--td-tag-medium-padding, 16rpx - 1px);
+@tag-large-padding: var(--td-tag-large-padding, 16rpx - 1px);
+@tag-extra-large-padding: var(--td-tag-extra-large-padding, 32rpx - 1px);
+
+@tag-small-font-size: var(--td-tag-small-font-size, @font-size);
+@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s);
+@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base);
+@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base);
+
+@tag-small-icon-size: var(--td-tag-small-icon-size, 24rpx);
+@tag-medium-icon-size: var(--td-tag-medium-icon-size, 28rpx);
+@tag-large-icon-size: var(--td-tag-large-icon-size, 32rpx);
+@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 32rpx);
+
+@tag-small-height: var(--td-tag-small-height, 40rpx);
+@tag-medium-height: var(--td-tag-medium-height, 48rpx);
+@tag-large-height: var(--td-tag-large-height, 56rpx);
+@tag-extra-large-height: var(--td-tag-extra-large-height, 80rpx);
+
+@tag-square-border-radius: var(--td-tag-square-border-radius, 8rpx);
+@tag-round-border-radius: var(--td-tag-round-border-radius, 999px);
+@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius);
+
+.genVariant(@variant) {
+  @themes: default, primary, success, warning, danger;
+  each(@themes, {
+    @theme-color: 'tag-@{value}-color';
+    @theme-light-color: 'tag-@{value}-light-color';
+
+    &.@{prefix}-tag--@{value} {
+      color: if(@variant = dark, @text-color-anti, @@theme-color);
+      border-color: if(@variant = light, @@theme-light-color, @@theme-color);
+      background-color: if(@variant = dark, @@theme-color, @@theme-light-color);
+    }
+  });
+}
+
+.@{prefix}-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: @tag-square-border-radius;
+  font-size: @tag-medium-font-size;
+  user-select: none;
+  vertical-align: middle;
+
+  &__text {
+    word-wrap: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon:not(:empty) + &__text:not(:empty) {
+    margin-left: 8rpx;
+  }
+
+  &--small {
+    height: @tag-small-height;
+    line-height: @tag-small-height;
+    padding: 0 @tag-small-padding;
+    font-size: @tag-small-font-size;
+
+    .@{prefix}-icon,
+    .@{prefix}-icon-close {
+      font-size: @tag-small-icon-size;
+    }
+  }
+
+  &--medium {
+    height: @tag-medium-height;
+    line-height: @tag-medium-height;
+    padding: 0 @tag-medium-padding;
+    font-size: @tag-medium-font-size;
+
+    .@{prefix}-icon,
+    .@{prefix}-icon-close {
+      font-size: @tag-medium-icon-size;
+    }
+  }
+
+  &--large {
+    height: @tag-large-height;
+    line-height: @tag-large-height;
+    padding: 0 @tag-large-padding;
+    font-size: @tag-large-font-size;
+
+    .@{prefix}-icon,
+    .@{prefix}-icon-close {
+      font-size: @tag-large-icon-size;
+    }
+  }
+
+  &--extra-large {
+    height: @tag-extra-large-height;
+    line-height: @tag-extra-large-height;
+    padding: 0 @tag-extra-large-padding;
+    font-size: @tag-extra-large-font-size;
+
+    .@{prefix}-icon,
+    .@{prefix}-icon-close {
+      font-size: @tag-extra-large-icon-size;
+    }
+  }
+
+  &.@{prefix}-tag {
+    &--square {
+      border-radius: @tag-square-border-radius;
+    }
+
+    &--round {
+      border-radius: @tag-round-border-radius;
+    }
+
+    &--mark {
+      border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0;
+    }
+  }
+
+  &--dark {
+    .genVariant(dark);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+  }
+
+  &--outline {
+    .genVariant(outline);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+    each(@themes, {
+      &.@{prefix}-tag--@{value} {
+        background-color: @tag-outline-bg-color;
+      }
+    });
+  }
+
+  &--light {
+    .genVariant(light);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+  }
+
+  &--light-outline {
+    .genVariant(light-outline);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+      border-color: @component-border;
+    }
+  }
+
+  &.@{prefix}-tag--closable {
+    &.@{prefix}-tag--disabled {
+      cursor: not-allowed;
+      color: @tag-disabled-color;
+      background-color: @tag-disabled-background-color;
+      border-color: @tag-disabled-border-color;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/check-tag/check-tag.vue b/packages/tdesign-uniapp/components/check-tag/check-tag.vue
new file mode 100644
index 000000000..29ac62b25
--- /dev/null
+++ b/packages/tdesign-uniapp/components/check-tag/check-tag.vue
@@ -0,0 +1,149 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="className + ' ' + tClass"
+    @click="onClick"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__icon'"
+    >
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="prefix + '-icon'"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+        />
+      </block>
+      <slot name="icon" />
+    </view>
+    <view :class="classPrefix + '__text'">
+      <slot />
+      <slot name="content" />
+      <block v-if="_.isArray(content) && content.length == 2">
+        {{ dataChecked ? content[0] : content[1] }}
+      </block>
+      <block v-else>
+        {{ content }}
+      </block>
+    </view>
+    <t-icon
+      v-if="closable"
+      :class="classPrefix + '__icon-close'"
+      :t-class="prefix + '-icon'"
+      name="close"
+      aria-role="button"
+      aria-label="关闭"
+      @click="onClose"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames, calcIcon, coalesce } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-tag`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'checked',
+    event: 'change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      className: '',
+      _,
+      _icon: null,
+
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  watch: {
+    size: 'setClass',
+    disabled: 'setClass',
+    dataChecked: 'setClass',
+    icon: {
+      handler(e) {
+        this._icon = calcIcon(e);
+      },
+      immediate: true,
+    },
+    checked: {
+      handler(value) {
+        this.dataChecked = value;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.setClass();
+  },
+  methods: {
+    setClass() {
+      const { classPrefix } = this;
+      const { size, variant, disabled, dataChecked, shape } = this;
+      const tagClass = [
+        classPrefix,
+        `${classPrefix}--checkable`,
+        disabled ? `${classPrefix}--disabled` : '',
+        dataChecked ? `${classPrefix}--checked` : '',
+        `${classPrefix}--${dataChecked ? 'primary' : 'default'}`,
+        `${classPrefix}--${size}`,
+        `${classPrefix}--${variant}`,
+        `${classPrefix}--${shape}`,
+      ];
+      const className = classNames(tagClass);
+      this.className = className;
+    },
+
+    onClick() {
+      if (this.disabled) return;
+      const { dataChecked } = this;
+
+      this._trigger('click');
+      this._trigger('change', { checked: !dataChecked });
+    },
+
+    onClose(e) {
+      if (this.disabled) return;
+      this._trigger('close', e);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './check-tag.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/check-tag/props.ts b/packages/tdesign-uniapp/components/check-tag/props.ts
new file mode 100644
index 000000000..fa4e78a00
--- /dev/null
+++ b/packages/tdesign-uniapp/components/check-tag/props.ts
@@ -0,0 +1,67 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCheckTagProps } from './type';
+export default {
+  /** 标签选中的状态，默认风格（theme=default）才有选中态 */
+  checked: Boolean,
+  /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
+  defaultChecked: Boolean,
+  /** 标签是否可关闭 */
+  closable: Boolean,
+  /** 组件子元素；传入数组时：[选中内容，非选中内容] */
+  content: {
+    type: [String, Number, Array],
+  },
+  /** 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 */
+  disabled: Boolean,
+  /** 标签图标 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 标签类型，有三种：方形、圆角方形、标记型 */
+  shape: {
+    type: String,
+    default: 'square' as TdCheckTagProps['shape'],
+    validator(val: TdCheckTagProps['shape']): boolean {
+      if (!val) return true;
+      return ['square', 'round', 'mark'].includes(val);
+    },
+  },
+  /** 标签尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdCheckTagProps['size'],
+    validator(val: TdCheckTagProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 标签风格变体 */
+  variant: {
+    type: String,
+    default: 'dark' as TdCheckTagProps['variant'],
+    validator(val: TdCheckTagProps['variant']): boolean {
+      if (!val) return true;
+      return ['dark', 'light', 'outline', 'light-outline'].includes(val);
+    },
+  },
+  /** 状态切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击标签时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果关闭按钮存在，点击关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/check-tag/type.ts b/packages/tdesign-uniapp/components/check-tag/type.ts
new file mode 100644
index 000000000..7fe35c5e1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/check-tag/type.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { SizeEnum } from '../common/common';
+
+export interface TdCheckTagProps {
+  /**
+   * 标签选中的状态，默认风格（theme=default）才有选中态
+   */
+  checked?: boolean;
+  /**
+   * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
+   */
+  defaultChecked?: boolean;
+  /**
+   * 标签是否可关闭
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 组件子元素；传入数组时：[选中内容，非选中内容]
+   */
+  content?: string | number | string[];
+  /**
+   * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 标签图标
+   */
+  icon?: string | object;
+  /**
+   * 标签类型，有三种：方形、圆角方形、标记型
+   * @default square
+   */
+  shape?: 'square' | 'round' | 'mark';
+  /**
+   * 标签尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 标签风格变体
+   * @default dark
+   */
+  variant?: 'dark' | 'light' | 'outline' | 'light-outline';
+  /**
+   * 状态切换时触发
+   */
+  onChange?: (context: { checked: boolean }) => void;
+  /**
+   * 点击标签时触发
+   */
+  onClick?: () => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发
+   */
+  onClose?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/checkbox-group/checkbox-group.vue b/packages/tdesign-uniapp/components/checkbox-group/checkbox-group.vue
new file mode 100644
index 000000000..d5fd4fe57
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox-group/checkbox-group.vue
@@ -0,0 +1,245 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle])"
+  >
+    <slot />
+    <t-checkbox
+      v-for="(item, index) in checkboxOptions"
+      :key="index"
+      :ref="prefix + '-checkbox-option'"
+      :class="prefix + '-checkbox-option'"
+      :data-item="item"
+      :label="item.label || item.text || ''"
+      :value="item.value == null ? '' : item.value"
+      :block="item.block || true"
+      :check-all="item.checkAll || false"
+      :checked="item.checked || false"
+      :content="item.content || ''"
+      :content-disabled="item.contentDisabled || false"
+      :icon="item.icon || 'circle'"
+      :indeterminate="item.indeterminate || false"
+      :disabled="item.disabled == null ? disabled : item.disabled"
+      :max-content-row="item.maxContentRow || 5"
+      :max-label-row="item.maxLabelRow || 3"
+      :name="item.name || ''"
+      :borderless="borderless"
+      :readonly="item.readonly || false"
+      :placement="item.placement || 'left'"
+      :relation-key="relationKey"
+      @change="({checked}) => handleInnerChildChange($event, { item, checked })"
+    />
+  </view>
+</template>
+<script>
+import tCheckbox from '../checkbox/checkbox';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-checkbox-group`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.Checkbox)],
+  components: {
+    tCheckbox,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      checkboxOptions: [],
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+    dataValue: {
+      handler() {
+        this.updateChildren();
+      },
+      immediate: true,
+      deep: true,
+    },
+    options: {
+      handler() {
+        this.initWithOptions();
+      },
+      immediate: true,
+      deep: true,
+    },
+    disabled: {
+      handler(v) {
+        if (this.options?.length) {
+          this.initWithOptions();
+          return;
+        }
+        this.getChildren()?.forEach((item) => {
+          item.setDisabled(v);
+        });
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.$checkAll = null;
+  },
+  mounted() {
+    this.setCheckall();
+
+    this.getChildren()?.forEach((item) => {
+      item.setDisabled(this.disabled);
+    });
+    setTimeout(() => {
+      this.updateChildren();
+    }, 33);
+  },
+  methods: {
+    getChildren() {
+      let items = this.children;
+      if (!items?.length) {
+        items = this.$refs[`${prefix}-checkbox-option`];
+      }
+      return items || [];
+    },
+
+    updateChildren() {
+      const items = this.getChildren();
+      const { dataValue } = this;
+
+
+      if (items.length > 0) {
+        items.forEach((item) => {
+          if (!item.checkAll) {
+            item.dataChecked = dataValue?.includes(item.value);
+          }
+        });
+        // 关联可全选项
+        if (items.some(item => item.checkAll)) {
+          this.setCheckall();
+        }
+      }
+    },
+
+    updateValue({ validChildren, trigger, value, checked, checkAll, item, indeterminate }) {
+      let { dataValue: newValue } = this;
+      const { max } = this;
+
+      if (validChildren !== false) {
+        const keySet = new Set(this.getChildren().map(item => item.value));
+        newValue = newValue.filter(value => keySet.has(value));
+      }
+
+      if (max && checked && newValue.length === max) return;
+
+      if (checkAll) {
+        const items = this.getChildren();
+        newValue = !checked && indeterminate
+          ? items
+            .filter(data => !(data.disabled && !newValue.includes(data.value)))
+            .map(item => item.value)
+          : items
+            .filter((data) => {
+              if (data.disabled) {
+                return newValue.includes(data.value);
+              }
+              return checked && !data.checkAll;
+            })
+            .map(data => data.value);
+      } else if (checked) {
+        newValue = newValue.concat(value);
+      } else {
+        const index = newValue.findIndex(v => v === value);
+        newValue.splice(index, 1);
+      }
+
+      if (trigger !== 'init') {
+        this._trigger('change', { value: newValue, context: item });
+      }
+    },
+
+    initWithOptions() {
+      const { options, dataValue: value, keys } = this;
+
+      if (!options?.length || !Array.isArray(options)) return;
+
+      const checkboxOptions = options.map((item) => {
+        const isLabel = ['number', 'string'].includes(typeof item);
+        return isLabel
+          ? {
+            label: `${item}`,
+            value: item,
+            checked: value?.includes(item),
+          }
+          : {
+            ...item,
+            label: item[coalesce(keys?.label, 'label')],
+            value: item[coalesce(keys?.value, 'value')],
+            checked: value?.includes(item[coalesce(keys?.value, 'value')]),
+          };
+      });
+
+      this.checkboxOptions = checkboxOptions;
+    },
+
+    handleInnerChildChange(_, { item, checked }) {
+      const rect = {};
+
+      if (item.checkAll) {
+        rect.indeterminate = this.$checkAll?.indeterminate;
+      }
+
+      this.updateValue({ ...item, checked, item, ...rect });
+    },
+
+    setCheckall() {
+      const items = this.getChildren();
+
+      if (!this.$checkAll) {
+        this.$checkAll = items.find(item => item.checkAll);
+      }
+
+      if (!this.$checkAll) return;
+
+      const { dataValue } = this;
+      const valueSet = new Set(dataValue?.filter(val => val !== this.$checkAll.value));
+      const isCheckall = items.every(item => (item.checkAll ? true : valueSet.has(item.value)));
+
+      this.$checkAll.dataChecked = valueSet.size > 0;
+      this.$checkAll.dataIndeterminate = !isCheckall;
+    },
+  },
+});
+
+</script>
+<style scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox-group/props.ts b/packages/tdesign-uniapp/components/checkbox-group/props.ts
new file mode 100644
index 000000000..18179aec7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox-group/props.ts
@@ -0,0 +1,58 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCheckboxGroupProps } from './type';
+export default {
+  /** 是否开启无边框模式。优先级低于 Checkbox.borderless */
+  borderless: Boolean,
+  /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** 支持最多选中的数量 */
+  max: {
+    type: Number,
+    default: undefined,
+  },
+  /** 统一设置内部复选框 HTML 属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」 */
+  options: {
+    type: Array,
+    default: (): TdCheckboxGroupProps['options'] => [],
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 选中值 */
+  value: {
+    type: Array,
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: Array,
+  },
+  /** 值变化时触发。`context` 表示当前点击项内容 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/checkbox-group/type.ts b/packages/tdesign-uniapp/components/checkbox-group/type.ts
new file mode 100644
index 000000000..004c68ce6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox-group/type.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { KeysType } from '../common/common';
+
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
+  /**
+   * 是否开启无边框模式。优先级低于 Checkbox.borderless
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 支持最多选中的数量
+   */
+  max?: number;
+  /**
+   * 统一设置内部复选框 HTML 属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」
+   * @default []
+   */
+  options?: Array<CheckboxOption>;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 选中值
+   */
+  value?: T;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: T;
+  /**
+   * 值变化时触发。`context` 表示当前点击项内容
+   */
+  onChange?: (context: {
+    value: CheckboxGroupValue;
+    context: { value: boolean | number | string; label: boolean | number | string };
+  }) => void;
+}
+
+export type CheckboxOption = string | number | CheckboxOptionObj;
+
+export interface CheckboxOptionObj {
+  label?: string;
+  value?: string | number;
+  disabled?: boolean;
+  checkAll?: true;
+}
+
+export type CheckboxGroupValue = Array<string | number | boolean>;
diff --git a/packages/tdesign-uniapp/components/checkbox/README.en-US.md b/packages/tdesign-uniapp/components/checkbox/README.en-US.md
new file mode 100644
index 000000000..809d5ef99
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/README.en-US.md
@@ -0,0 +1,103 @@
+:: BASE_DOC ::
+
+## API
+
+### Checkbox Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+block | Boolean | true | \- | N
+borderless | Boolean | undefined | \- | N
+check-all | Boolean | false | \- | N
+checked | Boolean | - | `v-model:checked` is supported | N
+default-checked | Boolean | - | uncontrolled property | N
+content | String | - | \- | N
+content-disabled | Boolean | - | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+indeterminate | Boolean | false | \- | N
+label | String | - | \- | N
+max-content-row | Number | 5 | \- | N
+max-label-row | Number | 3 | \- | N
+name | String | - | \- | N
+placement | String | left | options: left/right | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
+
+### Checkbox Events
+
+name | params | description
+-- | -- | --
+change | `(context: { checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | \-
+
+### Checkbox Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+label | \-
+
+### Checkbox External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-border | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-label | \-
+
+
+### CheckboxGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+borderless | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+max | Number | undefined | \- | N
+name | String | - | \- | N
+options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | Array | - | `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+default-value | Array | - | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+
+### CheckboxGroup Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | \-
+
+### CheckboxGroup Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-checkbox-bg-color | @bg-color-container | - 
+--td-checkbox-border-color | @component-stroke | - 
+--td-checkbox-description-color | @text-color-secondary | - 
+--td-checkbox-description-disabled-color | @text-color-disabled | - 
+--td-checkbox-description-line-height | 44rpx | - 
+--td-checkbox-font-size | 32rpx | - 
+--td-checkbox-icon-checked-color | @brand-color | - 
+--td-checkbox-icon-color | @component-border | - 
+--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-checkbox-icon-disabled-color | @brand-color-disabled | - 
+--td-checkbox-icon-size | 48rpx | - 
+--td-checkbox-tag-active-bg-color | @brand-color-light | - 
+--td-checkbox-tag-active-color | @brand-color | - 
+--td-checkbox-title-color | @text-color-primary | - 
+--td-checkbox-title-disabled-color | @text-color-disabled | - 
+--td-checkbox-title-line-height | 48rpx | - 
+--td-checkbox-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/checkbox/README.md b/packages/tdesign-uniapp/components/checkbox/README.md
new file mode 100644
index 000000000..1de901e42
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/README.md
@@ -0,0 +1,158 @@
+---
+title: Checkbox 多选框
+description: 用于预设的一组选项中执行多项选择，并呈现选择结果。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+import TCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+```
+
+### 组件类型
+
+纵向多选框
+
+{{ base }}
+
+横向多选框
+
+{{ horizontal }}
+
+带全选多选框
+
+{{ all }}
+
+### 组件状态
+
+多选框状态
+
+{{ status }}
+
+### 组件样式
+
+勾选样式
+
+{{ type }}
+
+勾选显示位置
+
+{{ right }}
+
+非通栏多选样式
+
+{{ card }}
+
+### 组件规格
+
+多选框尺寸规格
+
+{{ special }}
+
+## API
+
+### Checkbox Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+block | Boolean | true | 是否为块级元素 | N
+borderless | Boolean | undefined | 是否开启无边框模式 | N
+check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
+checked | Boolean | - | 是否选中。支持语法糖 `v-model:checked` | N
+default-checked | Boolean | - | 是否选中。非受控属性 | N
+content | String | - | 多选框内容 | N
+content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+indeterminate | Boolean | false | 是否为半选 | N
+label | String | - | 主文案 | N
+max-content-row | Number | 5 | 内容最大行数限制 | N
+max-label-row | Number | 3 | 主文案最大行数限制 | N
+name | String | - | HTML 元素原生属性 | N
+placement | String | left | 多选框和内容相对位置。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
+
+### Checkbox Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | 值变化时触发。`context` 表示当前点击项内容
+
+### Checkbox Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，主文案
+content | 自定义 `content` 显示内容
+label | 自定义 `label` 显示内容
+
+### Checkbox External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-border | 边框样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-label | 标签样式类
+
+
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
+disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | N
+options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/checkbox-group/type.ts) | N
+
+### CheckboxGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string }})` | 值变化时触发。`context` 表示当前点击项内容
+
+### CheckboxGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，多选框组内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-checkbox-bg-color | @bg-color-container | - |
+| --td-checkbox-border-color | @component-stroke | - |
+| --td-checkbox-description-color | @text-color-secondary | - |
+| --td-checkbox-description-disabled-color | @text-color-disabled | - |
+| --td-checkbox-description-line-height | 44rpx | - |
+| --td-checkbox-font-size | 32rpx | - |
+| --td-checkbox-icon-checked-color | @brand-color | - |
+| --td-checkbox-icon-color | @component-border | - |
+| --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - |
+| --td-checkbox-icon-disabled-color | @brand-color-disabled | - |
+| --td-checkbox-icon-size | 48rpx | - |
+| --td-checkbox-tag-active-bg-color | @brand-color-light | - |
+| --td-checkbox-tag-active-color | @brand-color | - |
+| --td-checkbox-title-color | @text-color-primary | - |
+| --td-checkbox-title-disabled-color | @text-color-disabled | - |
+| --td-checkbox-title-line-height | 48rpx | - |
+| --td-checkbox-vertical-padding | 32rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/all/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/all/index.vue
new file mode 100644
index 000000000..6b15d0035
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/all/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <t-checkbox-group
+      :options="options"
+      :default-value="checkAllValues"
+      :relation-key="relationKey"
+      @change="onCheckAllChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+export default {
+  components: {
+    tCheckboxGroup,
+  },
+  data() {
+    return {
+      relationKey: `${Math.random()}`,
+      options: [
+        {
+          label: '全选',
+          checkAll: true,
+        },
+        {
+          label: '多选',
+          value: 1,
+        },
+        {
+          label: '多选',
+          value: 2,
+        },
+        {
+          label: '多选',
+          value: 3,
+          content: '单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息',
+        },
+      ],
+      checkAllValues: [1, 2, 3, ''],
+    };
+  },
+  created() {},
+  methods: {
+    onCheckAllChange(event) {
+      console.log('change: ', event);
+      this.checkAllValues = event.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/base/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/base/index.vue
new file mode 100644
index 000000000..d99292675
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/base/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <t-checkbox-group
+      :value="current"
+      :options="options"
+      :relation-key="relationKey"
+      @change="handleGroupChange"
+    />
+  </view>
+</template>
+
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+
+export default {
+  components: {
+    tCheckboxGroup,
+  },
+  data() {
+    return {
+      relationKey: `${Math.random()}`,
+      current: ['checkbox1', 'checkbox2'],
+      options: [
+        {
+          label: '多选',
+          value: 'checkbox1',
+        },
+        {
+          label: '多选',
+          value: 'checkbox2',
+        },
+        {
+          label: '多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行',
+          value: 'checkbox3',
+          maxLabelRow: 2,
+        },
+        {
+          label: '多选',
+          value: 'checkbox4',
+          content: '描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息',
+          maxContentRow: 2,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    handleGroupChange(event) {
+      console.log('change: ', event);
+      const { value } = event;
+      this.current = value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/card/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/card/index.vue
new file mode 100644
index 000000000..57dd7dc99
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/card/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <view>
+    <t-checkbox-group
+      t-class="theme-card"
+      :custom-style="cardCustomStyle"
+      :default-value="['1', '2']"
+    >
+      <t-checkbox
+        value="1"
+        label="多选"
+      />
+      <t-checkbox
+        value="2"
+        label="多选"
+      />
+      <t-checkbox
+        value="3"
+        label="多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题"
+      />
+    </t-checkbox-group>
+  </view>
+</template>
+
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+
+export default {
+  components: {
+    tCheckboxGroup,
+    tCheckbox,
+  },
+  data() {
+    return {
+      checked: true,
+    };
+  },
+  computed: {
+    cardCustomStyle() {
+      return _._style({
+        borderRadius: '24rpx',
+        margin: '16px',
+        overflow: 'hidden',
+      });
+    },
+  },
+  methods: {
+    changeChecked(e) {
+      this.checked = e.checked;
+    },
+  },
+};
+</script>
+<style>
+/* .theme-card {
+    border-radius: 24rpx;
+    margin: 32rpx;
+    overflow: hidden;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/checkbox.less b/packages/tdesign-uniapp/components/checkbox/_example/checkbox.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/checkbox.vue b/packages/tdesign-uniapp/components/checkbox/_example/checkbox.vue
new file mode 100644
index 000000000..1c2a36d1e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/checkbox.vue
@@ -0,0 +1,97 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Checkbox"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Checkbox 多选框"
+          desc="用于预设的一组选项中执行多项选择，并呈现选择结果。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="纵向多选框"
+        >
+          <BaseDemo />
+        </t-demo>
+
+        <t-demo desc="横向多选框">
+          <HorizontalDemo />
+        </t-demo>
+
+        <t-demo desc="带全选多选框">
+          <all />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          desc="多选框状态"
+        >
+          <status />
+        </t-demo>
+
+        <t-demo
+          title="03 组件样式"
+          desc="勾选样式"
+        >
+          <typeDemo />
+        </t-demo>
+
+        <t-demo desc="勾选显示位置">
+          <right />
+        </t-demo>
+
+        <t-demo desc="非通栏多选样式">
+          <card />
+        </t-demo>
+
+        <t-demo
+          title="04 组件规格"
+          desc="多选框尺寸规格"
+        >
+          <special />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import HorizontalDemo from './horizontal/index.vue';
+import all from './all/index.vue';
+import status from './status/index.vue';
+import typeDemo from './type/index.vue';
+import right from './right/index.vue';
+import card from './card/index.vue';
+import special from './special/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    HorizontalDemo,
+    all,
+    status,
+    typeDemo,
+    right,
+    card,
+    special,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './checkbox.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/horizontal/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/horizontal/index.vue
new file mode 100644
index 000000000..bf331a438
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/horizontal/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <view>
+    <t-checkbox-group
+      :custom-style="boxCustomStyle"
+      borderless
+      :value="current"
+      @change="onChange"
+    >
+      <t-checkbox
+        :block="false"
+        value="checkbox1"
+        label="多选标题"
+      />
+      <t-checkbox
+        :block="false"
+        value="checkbox2"
+        label="多选标题"
+      />
+      <t-checkbox
+        :block="false"
+        value="checkbox3"
+        label="上限四字"
+      />
+    </t-checkbox-group>
+  </view>
+</template>
+
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tCheckboxGroup,
+    tCheckbox,
+  },
+  data() {
+    return {
+      current: ['checkbox1', 'checkbox2'],
+    };
+  },
+  computed: {
+    boxCustomStyle() {
+      return _._style({
+        padding: '16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        backgroundColor: 'var(--td-bg-color-container, #fff)',
+      });
+    },
+  },
+  created() {},
+  methods: {
+    onChange(event) {
+      console.log('checkbox', event.value);
+      this.current =  event.value;
+    },
+  },
+};
+</script>
+<style>
+/* .box {
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    background-color: var(--td-bg-color-container, #fff);
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/right/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/right/index.vue
new file mode 100644
index 000000000..bca69f06b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/right/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <view>
+    <t-checkbox
+      value="1"
+      label="多选"
+      default-checked
+      relation-key="-1"
+    />
+
+    <view
+      style="height: 32rpx"
+    />
+
+    <t-checkbox
+      value="2"
+      label="多选"
+      placement="right"
+      default-checked
+      relation-key="-1"
+    />
+  </view>
+</template>
+
+<script>
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+export default {
+  components: {
+    tCheckbox,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.less b/packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.vue b/packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.vue
new file mode 100644
index 000000000..d7ae8ed81
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/skyline/checkbox.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <checkbox-demo />
+  </view>
+</template>
+
+<script lang="ts">
+
+import checkboxDemo from '../checkbox.vue';
+export default {
+  components: {
+    checkboxDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './checkbox.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/special/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/special/index.vue
new file mode 100644
index 000000000..fd2e390d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/special/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <view>
+    <t-checkbox-group
+      :value="value"
+      @change="onChange"
+    >
+      <view
+        v-for="(item, index) in 3"
+        :key="index"
+        :class="'card ' + (contain(value, index) ? 'card--active' : '')"
+      >
+        <t-icon
+          v-if="contain(value, index)"
+          name="check"
+          :t-class="cardIconTClass"
+          :class="cardIconClass"
+          :aria-hidden="true"
+        />
+
+        <t-checkbox
+          :value="index"
+          label="多选"
+          content="描述信息描述信息描述信息描述信息描述信息"
+          icon="none"
+          borderless
+        />
+      </view>
+    </t-checkbox-group>
+
+    <view
+      class="demo-desc"
+      style="margin: 48rpx 32rpx 32rpx"
+    >
+      横向卡片多选框
+    </view>
+
+    <t-checkbox-group
+      :t-class="horBoxTClass"
+      :class="horBoxClass"
+      :custom-style="horBoxCustomStyle"
+      :value="value1"
+      @change="onChange1"
+    >
+      <view
+        v-for="(item, index) in 3"
+        :key="index"
+        :class="'card ' + (contain(value1, index) ? 'card--active' : '')"
+      >
+        <t-icon
+          v-if="contain(value1, index)"
+          name="check"
+          :t-class="cardIconTClass"
+          :class="cardIconClass"
+          custom-style="font-size: 12px;"
+          :aria-hidden="true"
+        />
+
+        <t-checkbox
+          :value="index"
+          label="多选"
+          icon="none"
+          borderless
+        />
+      </view>
+    </t-checkbox-group>
+  </view>
+</template>
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tCheckboxGroup,
+    tCheckbox,
+    tIcon,
+  },
+  data() {
+    return {
+      value: [0, 1],
+      value1: [0, 1],
+    };
+  },
+  computed: {
+    cardIconTClass() {
+      return canUseVirtualHost() ? this.cardIconRealClass : '';
+    },
+    cardIconClass() {
+      return !canUseVirtualHost() ? this.cardIconRealClass : '';
+    },
+    cardIconRealClass() {
+      return 'card__icon';
+    },
+    horBoxTClass() {
+      return canUseVirtualHost() ? this.horBoxRealClass : '';
+    },
+    horBoxClass() {
+      return !canUseVirtualHost() ? this.horBoxRealClass : '';
+    },
+    horBoxRealClass() {
+      return 'horizontal-box';
+    },
+    horBoxCustomStyle() {
+      return _._style({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        margin: '16px',
+      });
+    },
+  },
+  created() {},
+  methods: {
+    contain(arr, key) {
+      return arr.indexOf(key) > -1;
+    },
+    onChange(e) {
+      this.value = e.value;
+      console.log('[change] e:', e);
+    },
+    onChange1(e) {
+      this.value1 = e.value;
+      console.log('[change] e:', e);
+    },
+  },
+};
+</script>
+<style>
+.card {
+    position: relative;
+    margin: 32rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    border: 3rpx solid var(--td-bg-color-container, #fff);
+}
+
+.card--active {
+    border-color: var(--td-brand-color, #0052d9);
+}
+
+.card--active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-width: 28px 28px 28px 0;
+    border-style: solid;
+    border-color: #0052d9 transparent transparent transparent;
+    border: 14px solid var(--td-brand-color, #0052d9);
+    border-bottom-color: transparent;
+    border-right-color: transparent;
+}
+
+.card__icon {
+    color: var(--td-bg-color-container, #fff);
+    position: absolute;
+    left: 1.5px;
+    top: 1.5px;
+    z-index: 1;
+    font-size: 16px;
+}
+
+/* 横向布局 */
+/* .horizontal-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 32rpx;
+} */
+
+.horizontal-box .card {
+    flex: 0 0 calc(33.33% - 12rpx);
+    margin: 0 0 24rpx 0;
+}
+
+.horizontal-box .card::after {
+    border-width: 48rpx 48rpx 48rpx 0;
+}
+
+/* .horizontal-box .card__icon {
+    font-size: 24rpx;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/status/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/status/index.vue
new file mode 100644
index 000000000..a4efd3cf1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/status/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <view>
+    <t-checkbox-group
+      :default-value="['checkbox1']"
+      disabled
+    >
+      <t-checkbox
+        value="checkbox1"
+        label="选项禁用-已选"
+      />
+      <t-checkbox
+        value="checkbox2"
+        label="选项禁用-默认"
+      />
+    </t-checkbox-group>
+  </view>
+</template>
+
+<script>
+import tCheckboxGroup from 'tdesign-uniapp/checkbox-group/checkbox-group.vue';
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+export default {
+  components: {
+    tCheckboxGroup,
+    tCheckbox,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/_example/type/index.vue b/packages/tdesign-uniapp/components/checkbox/_example/type/index.vue
new file mode 100644
index 000000000..5603a5064
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/_example/type/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <view>
+    <t-checkbox
+      label="多选"
+      icon="line"
+      default-checked
+      relation-key="-1"
+    />
+
+    <view
+      style="height: 32rpx"
+    />
+
+    <t-checkbox
+      label="多选"
+      icon="rectangle"
+      default-checked
+      relation-key="-1"
+    />
+
+    <view
+      style="height: 32rpx"
+    />
+
+    <t-checkbox
+      value="checkbox1"
+      label="图片图标"
+      :icon="[activeImage, inActiveImage]"
+      relation-key="-1"
+    />
+  </view>
+</template>
+
+<script>
+import tCheckbox from 'tdesign-uniapp/checkbox/checkbox.vue';
+export default {
+  components: {
+    tCheckbox,
+  },
+  data() {
+    return {
+      demoCheckbox2: ['checkbox2', 'checkbox3'],
+      activeImage: 'https://tdesign.gtimg.com/mobile/demos/checkbox-checked.png',
+      inActiveImage: 'https://tdesign.gtimg.com/mobile/demos/checkbox.png',
+    };
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {
+    onChange(event) {
+      console.log('checkbox', event.value);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/checkbox.less b/packages/tdesign-uniapp/components/checkbox/checkbox.less
new file mode 100644
index 000000000..35552e94f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/checkbox.less
@@ -0,0 +1,229 @@
+@import '../common/style/base.less';
+
+@checkbox: ~'@{prefix}-checkbox';
+
+@checkbox-border-width: 4rpx;
+@checkbox-icon-size: var(--td-checkbox-icon-size, 48rpx);
+@checkbox-font-size: var(--td-checkbox-font-size, 32rpx);
+@checkbox-title-line-height: var(--td-checkbox-title-line-height, 48rpx);
+@checkbox-description-line-height: var(--td-checkbox-description-line-height, 44rpx);
+@checkbox-vertical-padding: var(--td-checkbox-vertical-padding, 32rpx);
+@checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container);
+@checkbox-border-color: var(--td-checkbox-border-color, @component-stroke);
+@checkbox-title-color: var(--td-checkbox-title-color, @text-color-primary);
+@checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled);
+@checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary);
+@checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled);
+@checkbox-icon-color: var(--td-checkbox-icon-color, @component-border);
+@checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled);
+@checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled);
+@checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color);
+@checkbox-tag-active-bg-color: var(--td-checkbox-tag-active-bg-color, @brand-color-light);
+@checkbox-tag-active-color: var(--td-checkbox-tag-active-color, @brand-color);
+
+.@{checkbox} {
+  display: inline-flex;
+  vertical-align: middle;
+  position: relative;
+  font-size: @checkbox-font-size;
+  background: @checkbox-bg-color;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &--block {
+    display: flex;
+    padding: @checkbox-vertical-padding;
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  .limit-title-row {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .image-center {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__icon-left {
+    margin-right: 20rpx;
+    width: 40rpx;
+  }
+
+  &__icon-right {
+    right: 0px;
+    display: contents;
+    .image-center();
+  }
+
+  &__icon-image {
+    width: @checkbox-icon-size;
+    height: @checkbox-icon-size;
+    vertical-align: top;
+  }
+
+  &__icon {
+    position: relative;
+    display: block;
+    width: @checkbox-icon-size;
+    height: @checkbox-icon-size;
+    color: @checkbox-icon-color;
+    font-size: @checkbox-icon-size;
+    margin-top: calc((@checkbox-title-line-height - @checkbox-icon-size) / 2);
+
+    &:empty {
+      display: none;
+    }
+
+    &--checked {
+      color: @checkbox-icon-checked-color;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      color: @checkbox-icon-disabled-color;
+    }
+
+    &--left {
+      margin-right: 16rpx;
+    }
+
+    &-circle {
+      width: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
+      height: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
+      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      box-sizing: border-box;
+
+      &--disabled {
+        background: @checkbox-icon-disabled-bg-color;
+      }
+    }
+
+    &-rectangle {
+      width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
+      height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
+      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      box-sizing: border-box;
+
+      &--disabled {
+        background: @checkbox-icon-disabled-bg-color;
+      }
+    }
+
+    &-line {
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 5rpx;
+        border-radius: 2rpx;
+        background: @checkbox-icon-checked-color;
+        transform-origin: top center;
+      }
+
+      &::before {
+        height: 16rpx;
+        left: 8rpx;
+        top: 22rpx;
+        transform: rotate(-45deg);
+      }
+
+      &::after {
+        height: 26rpx;
+        right: 8rpx;
+        top: 14rpx;
+        transform: rotate(45deg);
+      }
+
+      &--disabled {
+        &::before,
+        &::after {
+          background: @checkbox-icon-disabled-color;
+        }
+      }
+    }
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__title {
+    color: @checkbox-title-color;
+    line-height: @checkbox-title-line-height;
+    .limit-title-row();
+
+    &--disabled {
+      color: @checkbox-title-disabled-color;
+    }
+  }
+
+  &__description {
+    color: @checkbox-description-color;
+    .limit-title-row();
+    font-size: 28rpx;
+    line-height: @checkbox-description-line-height;
+
+    &--disabled {
+      color: @checkbox-description-disabled-color;
+    }
+  }
+
+  &__title + &__description:not(:empty) {
+    margin-top: 8rpx;
+  }
+
+  &__border {
+    position: absolute;
+    bottom: 0;
+    left: 96rpx;
+    right: 0;
+    height: 1px;
+    background: @checkbox-border-color;
+    transform: scaleY(0.5);
+
+    &--right {
+      left: 32rpx;
+    }
+  }
+
+  &--tag {
+    font-size: 28rpx;
+    padding-top: 16rpx;
+    padding-bottom: 16rpx;
+    text-align: center;
+    background-color: @bg-color-secondarycontainer;
+    border-radius: 12rpx;
+
+    &.@{checkbox}--checked {
+      color: @checkbox-tag-active-color;
+      background-color: @checkbox-tag-active-bg-color;
+    }
+
+    .@{checkbox}__title--checked {
+      color: @checkbox-tag-active-color;
+    }
+
+    .@{checkbox}__content {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/checkbox/checkbox.vue b/packages/tdesign-uniapp/components/checkbox/checkbox.vue
new file mode 100644
index 000000000..338c73538
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/checkbox.vue
@@ -0,0 +1,239 @@
+<template>
+  <view
+    :id="tId"
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block]]) + ' ' + tClass"
+    aria-role="checkbox"
+    :aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
+    :aria-disabled="_disabled ? true : false"
+    @click.stop="handleTap"
+  >
+    <view
+      v-if="theme == 'default'"
+      :class="_.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon"
+    >
+      <slot
+        v-if="icon === 'slot'"
+        name="icon"
+      />
+      <view
+        v-else-if="_.isArray(icon)"
+        :class="classPrefix + '__icon'"
+      >
+        <image
+          :src="dataChecked ? (dataIndeterminate && icon[2] ? icon[2] : icon[0]) : icon[1]"
+          :class="classPrefix + '__icon-image'"
+          webp
+        />
+      </view>
+      <block v-else>
+        <t-icon
+          v-if="dataChecked && (icon == 'circle' || icon == 'rectangle')"
+          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check-' + icon + '-filled'"
+          :class="_.cls(classPrefix + '__icon-wrapper', [])"
+        />
+        <t-icon
+          v-if="dataChecked && icon == 'line'"
+          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check'"
+          :class="_.cls(classPrefix + '__icon-wrapper', [])"
+        />
+        <view
+          v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
+          :class="_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+        />
+        <view
+          v-if="!dataChecked && icon == 'line'"
+          class="placeholder"
+        />
+      </block>
+    </view>
+    <view
+      :class="classPrefix + '__content'"
+      data-target="text"
+      @click.stop="handleTap"
+    >
+      <view
+        :class="
+          _.cls(classPrefix + '__title', [
+            ['disabled', _disabled],
+            ['checked', dataChecked]
+          ]) +
+            ' ' +
+            tClassLabel
+        "
+        :style="'-webkit-line-clamp:' + maxLabelRow"
+      >
+        <block v-if="label">
+          {{ label }}
+        </block>
+        <slot />
+        <slot name="label" />
+      </view>
+      <view
+        :class="_.cls(classPrefix + '__description', [['disabled', _disabled]]) + ' ' + tClassContent"
+        :style="'-webkit-line-clamp:' + maxContentRow"
+      >
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+      </view>
+    </view>
+    <view
+      v-if="theme == 'default' && !dataBorderless"
+      :class="_.cls(classPrefix + '__border', [placement]) + ' ' + tClassBorder"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { coalesce } from '../common/utils';
+import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-checkbox`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'checked',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-content`,
+    `${prefix}-class-border`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Checkbox)],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+    theme: {
+      type: String,
+      default: 'default',
+    },
+    tId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _disabled: false,
+      _,
+
+      dataBorderless: this.borderless,
+      dataIndeterminate: this.indeterminate,
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  computed: {
+    isIsolated() {
+      return this.relationKey === ISOLATED_RELATION_KEY;
+    },
+  },
+  watch: {
+    borderless: {
+      handler(v) {
+        this.dataBorderless = v;
+      },
+      immediate: true,
+    },
+    indeterminate: {
+      handler(v) {
+        this.dataIndeterminate = v;
+      },
+      immediate: true,
+    },
+    checked: {
+      handler(v) {
+        this.dataChecked = v;
+      },
+      immediate: true,
+    },
+    disabled: {
+      handler(v) {
+        this._disabled = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      if (this.isIsolated) return;
+      const parent = this[RELATION_MAP.Checkbox];
+      const { value, disabled, borderless } = parent;
+      const { dataValue, checked, checkAll, item, dataIndeterminate } = this;
+      const valueSet = new Set(value);
+      const checkedFromParent = valueSet.has(this.value);
+      const data = {
+        _disabled: this.disabled == null ? disabled : this.disabled,
+      };
+
+      data.dataBorderless = !!(coalesce(this.borderless, borderless));
+
+      data.dataChecked = this.dataChecked || checkedFromParent;
+      if (this.dataChecked) {
+        parent.updateValue({
+          value: dataValue,
+          checked,
+          checkAll,
+          item,
+          indeterminate: dataIndeterminate,
+          trigger: 'init',
+        });
+      }
+
+      if (this.checkAll) {
+        data.dataChecked = valueSet.size > 0;
+        // data.indeterminate =
+      }
+
+      Object.keys(data).forEach((key) => {
+        this[key] = data[key];
+      });
+    },
+    handleTap(e) {
+      const { _disabled, readonly, contentDisabled } = this;
+      const { target } = e.currentTarget.dataset;
+
+      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+
+      const { value, label, checkAll, dataIndeterminate } = this;
+      const checked = !this.dataChecked;
+      const parent = this[RELATION_MAP.Checkbox];
+
+
+      if (parent && !this.isIsolated) {
+        parent.updateValue({ value, checkAll, indeterminate: dataIndeterminate, checked, item: { label, value, checked } });
+      } else {
+        this._trigger('change', { context: { value, label }, checked });
+      }
+    },
+
+    setDisabled(disabled) {
+      this._disabled = this.disabled || disabled;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './checkbox.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/checkbox/props.ts b/packages/tdesign-uniapp/components/checkbox/props.ts
new file mode 100644
index 000000000..34410cdf3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/props.ts
@@ -0,0 +1,90 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCheckboxProps } from './type';
+export default {
+  /** 是否为块级元素 */
+  block: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
+  checkAll: Boolean,
+  /** 是否选中 */
+  checked: Boolean,
+  /** 是否选中，非受控属性 */
+  defaultChecked: Boolean,
+  /** 多选框内容 */
+  content: {
+    type: String,
+  },
+  /** 是否禁用组件内容（content）触发选中 */
+  contentDisabled: Boolean,
+  /** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdCheckboxProps['icon'],
+  },
+  /** 是否为半选 */
+  indeterminate: Boolean,
+  /** 主文案 */
+  label: {
+    type: String,
+  },
+  /** 内容最大行数限制 */
+  maxContentRow: {
+    type: Number,
+    default: 5,
+  },
+  /** 主文案最大行数限制 */
+  maxLabelRow: {
+    type: Number,
+    default: 3,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 多选框和内容相对位置 */
+  placement: {
+    type: String,
+    default: 'left' as TdCheckboxProps['placement'],
+    validator(val: TdCheckboxProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 多选框的值 */
+  value: {
+    type: [String, Number, Boolean],
+  },
+  /** 值变化时触发。`context` 表示当前点击项内容 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/checkbox/type.ts b/packages/tdesign-uniapp/components/checkbox/type.ts
new file mode 100644
index 000000000..d5b965967
--- /dev/null
+++ b/packages/tdesign-uniapp/components/checkbox/type.ts
@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCheckboxProps {
+  /**
+   * 是否为块级元素
+   * @default true
+   */
+  block?: boolean;
+  /**
+   * 是否开启无边框模式
+   */
+  borderless?: boolean;
+  /**
+   * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
+   * @default false
+   */
+  checkAll?: boolean;
+  /**
+   * 是否选中
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   */
+  defaultChecked?: boolean;
+  /**
+   * 多选框内容
+   */
+  content?: string;
+  /**
+   * 是否禁用组件内容（content）触发选中
+   */
+  contentDisabled?: boolean;
+  /**
+   * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'rectangle' | string[];
+  /**
+   * 是否为半选
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * 主文案
+   */
+  label?: string;
+  /**
+   * 内容最大行数限制
+   * @default 5
+   */
+  maxContentRow?: number;
+  /**
+   * 主文案最大行数限制
+   * @default 3
+   */
+  maxLabelRow?: number;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 多选框和内容相对位置
+   * @default left
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 多选框的值
+   */
+  value?: string | number | boolean;
+  /**
+   * 值变化时触发。`context` 表示当前点击项内容
+   */
+  onChange?: (context: {
+    checked: boolean;
+    context: { value: boolean | number | string; label: boolean | number | string };
+  }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/col/README.en-US.md b/packages/tdesign-uniapp/components/col/README.en-US.md
new file mode 100644
index 000000000..2fd9278f9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/README.en-US.md
@@ -0,0 +1,31 @@
+:: BASE_DOC ::
+
+## API
+
+### Col Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+offset | String / Number | - | \- | N
+span | String / Number | - | \- | N
+
+### Col Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### Row Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+gutter | String / Number | - | \- | N
+
+### Row Slots
+
+name | Description
+-- | --
+\- | \-
diff --git a/packages/tdesign-uniapp/components/col/README.md b/packages/tdesign-uniapp/components/col/README.md
new file mode 100644
index 000000000..eb1346784
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/README.md
@@ -0,0 +1,60 @@
+---
+title: Layout 布局
+description: 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+spline: base
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+
+```js
+import TRow from 'tdesign-uniapp/row/row.vue';
+import TCol from 'tdesign-uniapp/col/col.vue';
+```
+
+### 组件类型
+
+基础
+
+{{ base }}
+
+
+增加间距
+
+{{ offset }}
+
+
+
+## API
+
+### Col Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+offset | String / Number | - | 列的偏移量（默认单位px） | N
+span | String / Number | - | 列的宽度（默认单位px） | N
+
+### Col Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，列内容
+
+
+### Row Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+gutter | String / Number | - | 列之间的间距（默认单位px） | N
+
+### Row Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，行内容
diff --git a/packages/tdesign-uniapp/components/col/_example/base/index.vue b/packages/tdesign-uniapp/components/col/_example/base/index.vue
new file mode 100644
index 000000000..b73ab2585
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/_example/base/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <view>
+    <t-row>
+      <t-col
+        span="8"
+        t-class="dark"
+      >
+        col-8
+      </t-col>
+      <t-col
+        span="8"
+        t-class="light"
+      >
+        col-8
+      </t-col>
+      <t-col
+        span="8"
+        t-class="dark"
+      >
+        col-8
+      </t-col>
+    </t-row>
+
+    <t-row>
+      <t-col
+        span="4"
+        t-class="dark"
+      >
+        col-4
+      </t-col>
+      <t-col
+        span="16"
+        offset="4"
+        t-class="light"
+      >
+        col-16 col-offset-4
+      </t-col>
+    </t-row>
+
+    <t-row>
+      <t-col
+        offset="12"
+        span="12"
+        t-class="dark"
+      >
+        col-12 col-offset-12
+      </t-col>
+    </t-row>
+  </view>
+</template>
+
+<script>
+import tCol from 'tdesign-uniapp/col/col.vue';
+import tRow from 'tdesign-uniapp/row/row.vue';
+export default {
+  components: {
+    tCol,
+    tRow,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.dark {
+    background-color: #0052d9;
+}
+.light {
+    background-color: #366ef4;
+}
+.dark,
+.light {
+    background-clip: content-box;
+    color: #fff;
+    font-size: 28rpx;
+    line-height: 96rpx;
+    margin-bottom: 32rpx;
+    text-align: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/col/_example/col.less b/packages/tdesign-uniapp/components/col/_example/col.less
new file mode 100644
index 000000000..719799df2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/_example/col.less
@@ -0,0 +1,17 @@
+:deep(.dark) {
+    background-color: #0052d9;
+}
+
+.light {
+    background-color: #366ef4;
+}
+
+:deep(.dark),
+:deep(.light) {
+    background-clip: content-box;
+    color: #fff;
+    font-size: 28rpx;
+    line-height: 96rpx;
+    margin-bottom: 32rpx;
+    text-align: center;
+}
diff --git a/packages/tdesign-uniapp/components/col/_example/col.vue b/packages/tdesign-uniapp/components/col/_example/col.vue
new file mode 100644
index 000000000..29d43af21
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/_example/col.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Layout"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Layout 布局"
+        desc="以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础用法"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="在列元素之间增加间距">
+        <OffsetDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import OffsetDemo from './offset/index.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    BaseDemo,
+    OffsetDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './col.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/col/_example/offset/index.vue b/packages/tdesign-uniapp/components/col/_example/offset/index.vue
new file mode 100644
index 000000000..6f21c0aaf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/_example/offset/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <t-row gutter="16">
+      <t-col span="8">
+        <view class="dark">
+          col-8
+        </view>
+      </t-col>
+      <t-col span="8">
+        <view class="dark">
+          col-8
+        </view>
+      </t-col>
+      <t-col span="8">
+        <view class="dark">
+          col-8
+        </view>
+      </t-col>
+    </t-row>
+  </view>
+</template>
+
+<script>
+import tCol from 'tdesign-uniapp/col/col.vue';
+import tRow from 'tdesign-uniapp/row/row.vue';
+export default {
+  components: {
+    tCol,
+    tRow,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.dark {
+    background-color: #0052d9;
+}
+
+.light {
+    background-color: #366ef4;
+}
+
+.dark,
+.light {
+    color: #fff;
+    font-size: 28rpx;
+    line-height: 96rpx;
+    margin-bottom: 32rpx;
+    text-align: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/col/_example/skyline/col.less b/packages/tdesign-uniapp/components/col/_example/skyline/col.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/col/_example/skyline/col.vue b/packages/tdesign-uniapp/components/col/_example/skyline/col.vue
new file mode 100644
index 000000000..093b71fb6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/_example/skyline/col.vue
@@ -0,0 +1,53 @@
+<template>
+  <view class="skyline">
+    <t-navbar
+      title="Layout"
+      left-arrow
+    />
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Layout 布局
+        </view>
+        <view class="demo-desc">
+          以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础用法"
+        >
+          <baseDemo />
+        </t-demo>
+
+        <t-demo desc="在列元素之间增加间距">
+          <offset />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import offset from '../offset/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    offset,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './col.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/col/col.less b/packages/tdesign-uniapp/components/col/col.less
new file mode 100644
index 000000000..026f48da1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/col.less
@@ -0,0 +1,21 @@
+@import '../common/style/base.less';
+
+.@{prefix}-col {
+  box-sizing: border-box;
+  min-height: 1px;
+
+  // 适配 qq 小程序等
+  // display: block;
+  float: left;
+}
+
+.col-generate(@n, @i: 1) when(@i <= @n) {
+  .@{prefix}-col--@{i} {
+    width: (@i * 100% / @n);
+  }
+  .@{prefix}-col--offset-@{i} {
+    margin-left: (@i * 100% / @n);
+  }
+  .col-generate(@n, (@i + 1));
+}
+.col-generate(24);
diff --git a/packages/tdesign-uniapp/components/col/col.vue b/packages/tdesign-uniapp/components/col/col.vue
new file mode 100644
index 000000000..a7992ba9d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/col.vue
@@ -0,0 +1,51 @@
+<template>
+  <view
+    :class="[
+      tClass,
+      _.cls(classPrefix, [span]),
+      (offset ? classPrefix + '--offset-' + offset : '')
+    ]"
+    :style="getColStyles(gutter, customStyle)"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { getColStyles } from './computed.js';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-col`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.Col)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      gutter: '',
+    };
+  },
+  methods: {
+    getColStyles,
+  },
+});
+
+</script>
+<style scoped>
+@import './col.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/col/computed.js b/packages/tdesign-uniapp/components/col/computed.js
new file mode 100644
index 000000000..1aa29e89d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/computed.js
@@ -0,0 +1,14 @@
+import utils from '../common/utils.wxs';
+
+export function getColStyles(gutter, customStyle) {
+  let _style = '';
+  if (gutter) {
+    _style = utils._style({
+      'padding-right': utils.addUnit(gutter / 2),
+      'padding-left': utils.addUnit(gutter / 2),
+    });
+  }
+
+  return utils._style([customStyle]) + _style;
+}
+
diff --git a/packages/tdesign-uniapp/components/col/props.ts b/packages/tdesign-uniapp/components/col/props.ts
new file mode 100644
index 000000000..eacc90d57
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/props.ts
@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 列的偏移量（默认单位px） */
+  offset: {
+    type: [String, Number],
+  },
+  /** 列的宽度（默认单位px） */
+  span: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/col/type.ts b/packages/tdesign-uniapp/components/col/type.ts
new file mode 100644
index 000000000..b8f348f4e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/col/type.ts
@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdColProps {
+  /**
+   * 列的偏移量（默认单位px）
+   */
+  offset?: string | number;
+  /**
+   * 列的宽度（默认单位px）
+   */
+  span?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.less b/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.less
new file mode 100644
index 000000000..a4d51113f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.less
@@ -0,0 +1,133 @@
+@import '../common/style/base.less';
+
+@collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary);
+@collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary);
+@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled);
+
+// font-size
+@collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m);
+@collapse-extra-font-size: var(--td-collapse-extra-font-size, @font-size-m);
+@collapse-content-font-size: var(--td-collapse-content-font-size, @font-size-base);
+
+@collapse-header-height: var(--td-collapse-header-height, auto);
+@collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 32rpx);
+@collapse-content-padding: var(--td-collapse-content-padding, 32rpx);
+@collapse-content-line-height: var(--td-collapse-content-line-height, 1.5);
+@collapse-border-color: var(--td-collapse-border-color, @border-level-1-color);
+@collapse-icon-color: var(--td-collapse-icon-color, @font-gray-3);
+
+@collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container);
+
+.@{prefix}-collapse-panel {
+  background-color: @collapse-panel-bg-color;
+
+  &--disabled {
+    pointer-events: none;
+
+    .@{prefix}-collapse-panel__content,
+    .@{prefix}-collapse-panel__header {
+      opacity: 0.3;
+    }
+  }
+
+  &--top {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: @collapse-horizontal-padding;
+    height: @collapse-header-height;
+    --td-cell-title-color: @collapse-header-text-color;
+    --td-cell-left-icon-color: @collapse-icon-color;
+
+    &--top {
+      .border(top, @collapse-border-color);
+    }
+
+    &--bottom {
+      .border(bottom, @collapse-border-color);
+    }
+
+    &::after {
+      left: 32rpx;
+    }
+
+    &-right {
+      display: inline-flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    &-icon {
+      // 增大热区
+      height: 100%;
+      padding-left: 8px;
+      width: 44px;
+      padding-right: 8px;
+      color: @collapse-icon-color;
+    }
+  }
+
+  &__extra {
+    font-size: @collapse-extra-font-size;
+  }
+
+  &__body {
+    .border(bottom, @collapse-border-color);
+  }
+
+  &__wrapper {
+    height: 0;
+    overflow: hidden;
+  }
+
+  &__content {
+    color: @collapse-content-text-color;
+    font-size: @collapse-content-font-size;
+    padding: @collapse-content-padding;
+    line-height: @collapse-content-line-height;
+
+    &--disabled {
+      color: @text-color-disabled;
+    }
+
+    &--expanded&--bottom {
+      .border(bottom, @collapse-border-color);
+    }
+
+    &--expanded&--top {
+      .border(top, @collapse-border-color);
+    }
+  }
+
+  &__arrow--top {
+    transform: rotate(180deg);
+  }
+}
+
+// :deep(.class) {
+//   &-title {
+//     font-size: @collapse-title-font-size;
+
+//     &--disabled {
+//       color: @text-color-disabled;
+//     }
+//   }
+
+//   &-note {
+//     &--disabled {
+//       color: @text-color-disabled;
+//     }
+//   }
+
+//   &-right-icon {
+//     &--disabled {
+//       color: @text-color-disabled;
+//     }
+//   }
+// }
diff --git a/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.vue b/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.vue
new file mode 100644
index 000000000..ce591ccb7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse-panel/collapse-panel.vue
@@ -0,0 +1,237 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      classPrefix + ' ' + classPrefix + '--' + placement,
+      tClass
+    ]"
+  >
+    <view
+      :class="classPrefix + '__title'"
+      aria-role="button"
+      :aria-expanded="expanded"
+      :aria-disabled="ultimateDisabled"
+      @click="onClick"
+    >
+      <t-cell
+        :title="header"
+        :note="headerRightContent"
+        bordered
+        :left-icon="headerLeftIcon"
+        :right-icon="ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : ''"
+        :t-class="_.cls(classPrefix + '__header', [placement, ['expanded', expanded]]) + ' ' + tClassHeader"
+        :t-class-title="'class-title ' + (ultimateDisabled ? 'class-title--disabled' : '')"
+        :t-class-note="'class-note ' + (ultimateDisabled ? 'class-note--disabled' : '')"
+        :t-class-right-icon="'class-right-icon ' + classPrefix + '__arrow--' + placement + ' ' + (ultimateDisabled ? 'class-right-icon--disabled' : '')"
+        t-class-hover="class-header-hover"
+        :title-style="titleCustomStyle"
+        :note-style="noteCustomStyle"
+        :right-icon-style="rightIconCustomStyle"
+      >
+        <template
+          #left-icon
+        >
+          <slot
+            name="header-left-icon"
+          />
+        </template>
+        <template
+          #title
+        >
+          <slot
+            name="header"
+          />
+        </template>
+        <template
+          #note
+        >
+          <slot
+            name="header-right-content"
+          />
+        </template>
+        <template
+          #right-icon
+        >
+          <slot
+            name="expand-icon"
+          />
+        </template>
+      </t-cell>
+    </view>
+    <view
+      :class="classPrefix + '__wrapper'"
+      :animation="animation"
+      :aria-hidden="expanded ? '' : true"
+    >
+      <view :class="_.cls(classPrefix + '__content', [['disabled', ultimateDisabled], ['expanded', expanded], placement]) + ' ' + tClassContent">
+        {{ content }}
+        <slot />
+        <slot name="content" />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tCell from '../cell/cell';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-collapse-panel`;
+const DISABLED_COLOR = 'var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, .26)))';
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-header`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.CollapsePanel)],
+  components: {
+    tCell,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      expanded: false,
+      classPrefix: name,
+      classBasePrefix: prefix,
+      ultimateExpandIcon: false,
+      ultimateDisabled: false,
+      _,
+      animation: null,
+    };
+  },
+  computed: {
+    titleCustomStyle() {
+      return _._style({
+        fontSize: 'var(--td-collapse-title-font-size, var(--td-font-size-m, 16px))',
+        color: this.ultimateDisabled && DISABLED_COLOR,
+      });
+    },
+    noteCustomStyle() {
+      return _._style({
+        color: this.ultimateDisabled && DISABLED_COLOR,
+
+      });
+    },
+    rightIconCustomStyle() {
+      return _._style({
+        color: this.ultimateDisabled && DISABLED_COLOR,
+      });
+    },
+  },
+  watch: {
+    disabled: {
+      handler(e) {
+        this.ultimateDisabled = !!e;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    updateExpanded(activeValues = []) {
+      if (!this[RELATION_MAP.CollapsePanel]) {
+        return;
+      }
+
+      const { value } = this;
+      const { defaultExpandAll } = this[RELATION_MAP.CollapsePanel];
+      const expanded = defaultExpandAll ? !this.expanded : activeValues?.includes(value);
+
+      if (expanded === this.expanded) return;
+
+      this.expanded = expanded;
+      this.updateStyle(expanded);
+    },
+
+    updateStyle(expanded) {
+      return getRect(this, `.${name}__content`)
+        .then(rect => rect.height)
+        .then((height) => {
+          const animation = uni.createAnimation({
+            duration: 0,
+            timingFunction: 'ease-in-out',
+          });
+
+          if (expanded) {
+            animation
+              .height(height)
+              .top(0)
+              .step({ duration: 300 })
+              .height('auto')
+              .step();
+          } else {
+            let doAnimation = false;
+
+            // #ifdef H5 || APP-PLUS
+            animation
+              .height(height)
+              .top(1)
+              .step({ duration: 17 })
+              .height(0)
+              .step({ duration: 300 });
+            doAnimation = true;
+            // #endif
+
+            if (!doAnimation) {
+              animation
+                .height(height)
+                .top(1)
+                .step({ duration: 1 })
+                .height(0)
+                .step({ duration: 300 });
+            }
+          }
+
+          this.animation =  animation.export();
+        });
+    },
+
+    onClick() {
+      const { ultimateDisabled } = this;
+      const { value } = this;
+
+
+      if (ultimateDisabled) return;
+
+      if (this[RELATION_MAP.CollapsePanel].defaultExpandAll) {
+        this.updateExpanded();
+      } else {
+        this[RELATION_MAP.CollapsePanel].switch(value);
+      }
+    },
+
+    innerAfterLinked() {
+      const { dataValue, expandIcon, disabled } =  this[RELATION_MAP.CollapsePanel];
+
+      this.ultimateExpandIcon = this.expandIcon == null ? expandIcon : this.expandIcon;
+      this.ultimateDisabled = this.disabled == null ? disabled : this.disabled;
+
+
+      let interval = 0;
+      // #ifdef APP-PLUS
+      interval = 33;
+      // #endif
+      setTimeout(() => {
+        this.updateExpanded(dataValue);
+      }, interval);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './collapse-panel.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse-panel/props.ts b/packages/tdesign-uniapp/components/collapse-panel/props.ts
new file mode 100644
index 000000000..fc62766a8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse-panel/props.ts
@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCollapsePanelProps } from './type';
+export default {
+  /** 折叠面板内容 */
+  content: {
+    type: String,
+  },
+  /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */
+  expandIcon: {
+    type: Boolean,
+    default: undefined as TdCollapsePanelProps['expandIcon'],
+  },
+  /** 面板头内容 */
+  header: {
+    type: String,
+  },
+  /** 面板头左侧图标 */
+  headerLeftIcon: {
+    type: String,
+  },
+  /** 面板头的右侧区域，一般用于呈现面板操作 */
+  headerRightContent: {
+    type: String,
+  },
+  /** 选项卡内容的位置 */
+  placement: {
+    type: String,
+    default: 'bottom' as TdCollapsePanelProps['placement'],
+    validator(val: TdCollapsePanelProps['placement']): boolean {
+      if (!val) return true;
+      return ['bottom', 'top'].includes(val);
+    },
+  },
+  /** 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 */
+  value: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/collapse-panel/type.ts b/packages/tdesign-uniapp/components/collapse-panel/type.ts
new file mode 100644
index 000000000..636ea81b0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse-panel/type.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCollapsePanelProps {
+  /**
+   * 折叠面板内容
+   */
+  content?: string;
+  /**
+   * 禁止当前面板展开，优先级大于 Collapse 的同名属性
+   */
+  disabled?: boolean;
+  /**
+   * 当前折叠面板展开图标，优先级大于 Collapse 的同名属性
+   */
+  expandIcon?: boolean;
+  /**
+   * 面板头内容
+   */
+  header?: string;
+  /**
+   * 面板头左侧图标
+   */
+  headerLeftIcon?: string;
+  /**
+   * 面板头的右侧区域，一般用于呈现面板操作
+   */
+  headerRightContent?: string;
+  /**
+   * 选项卡内容的位置
+   * @default bottom
+   */
+  placement?: 'bottom' | 'top';
+  /**
+   * 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识
+   */
+  value?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/collapse/README.en-US.md b/packages/tdesign-uniapp/components/collapse/README.en-US.md
new file mode 100644
index 000000000..908ad7f4d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/README.en-US.md
@@ -0,0 +1,81 @@
+:: BASE_DOC ::
+
+## API
+
+### Collapse Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+default-expand-all | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
+expand-icon | Boolean | true | \- | N
+expand-mutex | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+value | Array | - | `v-model:value` is supported。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/collapse/type.ts) | N
+default-value | Array | - | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/collapse/type.ts) | N
+
+### Collapse Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: CollapseValue, context: { e: MouseEvent }})` | \-
+
+### Collapse Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### CollapsePanel Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | String | - | \- | N
+disabled | Boolean | undefined | \- | N
+expand-icon | Boolean | undefined | \- | N
+header | String | - | \- | N
+header-left-icon | String | - | \- | N
+header-right-content | String | - | \- | N
+placement | String | bottom | options: bottom/top | N
+value | String / Number | - | \- | N
+
+### CollapsePanel Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+expand-icon | \-
+header | \-
+header-left-icon | \-
+header-right-content | \-
+
+### CollapsePanel External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-header | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-collapse-border-color | @border-level-1-color | - 
+--td-collapse-content-font-size | @font-size-base | - 
+--td-collapse-content-line-height | 1.5 | - 
+--td-collapse-content-padding | 32rpx | - 
+--td-collapse-content-text-color | @text-color-primary | - 
+--td-collapse-extra-font-size | @font-size-m | - 
+--td-collapse-header-height | auto | - 
+--td-collapse-header-text-color | @text-color-primary | - 
+--td-collapse-header-text-disabled-color | @text-color-disabled | - 
+--td-collapse-horizontal-padding | 32rpx | - 
+--td-collapse-icon-color | @font-gray-3 | - 
+--td-collapse-panel-bg-color | @bg-color-container | - 
+--td-collapse-title-font-size | @font-size-m | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/collapse/README.md b/packages/tdesign-uniapp/components/collapse/README.md
new file mode 100644
index 000000000..08f89407e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/README.md
@@ -0,0 +1,118 @@
+---
+title: Collapse 折叠面板
+description: 用于对复杂区域进行分组和隐藏 常用于订单信息展示等
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import TCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+```
+
+### 类型
+
+基础折叠面板
+
+{{ base }}
+
+
+带操作说明
+
+{{ action }}
+
+手风琴模式
+
+{{ accordion }}
+
+### 样式
+
+卡片折叠面板
+
+{{ theme }}
+
+## API
+
+### Collapse Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+default-expand-all | Boolean | false | 默认是否展开全部 | N
+disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
+expand-icon | Boolean | true | 展开图标 | N
+expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
+theme | String | default | 折叠面板风格。可选项：default/card | N
+value | Array | - | 展开的面板集合。支持语法糖 `v-model:value`。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/collapse/type.ts) | N
+default-value | Array | - | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/collapse/type.ts) | N
+
+### Collapse Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: CollapseValue, context: { e: MouseEvent }})` | 切换面板时触发，返回变化的值
+
+### Collapse Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+
+### CollapsePanel Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | String | - | 折叠面板内容 | N
+disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
+expand-icon | Boolean | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N
+header | String | - | 面板头内容 | N
+header-left-icon | String | - | 面板头左侧图标 | N
+header-right-content | String | - | 面板头的右侧区域，一般用于呈现面板操作 | N
+placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
+value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
+
+### CollapsePanel Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+expand-icon | 自定义 `expand-icon` 显示内容
+header | 自定义 `header` 显示内容
+header-left-icon | 自定义 `header-left-icon` 显示内容
+header-right-content | 自定义 `header-right-content` 显示内容
+
+### CollapsePanel External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-header | 头部样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-collapse-border-color | @border-level-1-color | - |
+| --td-collapse-content-font-size | @font-size-base | - |
+| --td-collapse-content-line-height | 1.5 | - |
+| --td-collapse-content-padding | 32rpx | - |
+| --td-collapse-content-text-color | @text-color-primary | - |
+| --td-collapse-extra-font-size | @font-size-m | - |
+| --td-collapse-header-height | auto | - |
+| --td-collapse-header-text-color | @text-color-primary | - |
+| --td-collapse-header-text-disabled-color | @text-color-disabled | - |
+| --td-collapse-horizontal-padding | 32rpx | - |
+| --td-collapse-icon-color | @font-gray-3 | - |
+| --td-collapse-panel-bg-color | @bg-color-container | - |
+| --td-collapse-title-font-size | @font-size-m | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/collapse/_example/accordion/index.vue b/packages/tdesign-uniapp/components/collapse/_example/accordion/index.vue
new file mode 100644
index 000000000..86b562df3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/accordion/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <t-collapse
+      :default-value="[0]"
+      expand-mutex
+      expand-icon
+    >
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="0"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="1"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="2"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        disabled
+        :value="3"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+</template>
+
+<script>
+import tCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import tCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+export default {
+  components: {
+    tCollapse,
+    tCollapsePanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/_example/action/index.vue b/packages/tdesign-uniapp/components/collapse/_example/action/index.vue
new file mode 100644
index 000000000..cea8bc367
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/action/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view class="wrapper">
+    <t-collapse
+      :value="activeValues"
+      @change="handleChange"
+    >
+      <t-collapse-panel
+        header="折叠面板标题"
+        :header-right-content="activeValues.indexOf(0) > -1 ? '收起' : '展开'"
+        :value="0"
+        expand-icon
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+</template>
+<script>
+import tCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import tCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+export default {
+  components: {
+    tCollapse,
+    tCollapsePanel,
+  },
+  data() {
+    return {
+      activeValues: [0],
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      this.activeValues = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/_example/base/index.vue b/packages/tdesign-uniapp/components/collapse/_example/base/index.vue
new file mode 100644
index 000000000..ddd6dde6e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/base/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <view class="wrapper">
+    <t-collapse
+      :value="activeValues"
+      @change="handleChange"
+    >
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="0"
+        expand-icon
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+</template>
+
+<script>
+import tCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import tCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+export default {
+  components: {
+    tCollapse,
+    tCollapsePanel,
+  },
+  data() {
+    return {
+      activeValues: [0],
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      this.activeValues = e.value;
+    },
+  },
+};
+</script>
+<style>
+/* @import './index.css'; */
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/_example/collapse.less b/packages/tdesign-uniapp/components/collapse/_example/collapse.less
new file mode 100644
index 000000000..fd8247b83
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/collapse.less
@@ -0,0 +1,45 @@
+.flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.collapse-content-item {
+    margin: 16rpx 0;
+
+    &-title {
+        width: 176rpx;
+        display: inline-flex;
+        font-size: 28rpx;
+        color: #666;
+    }
+
+    &-val {
+        display: inline-flex;
+        justify-content: right;
+        font-size: 28rpx;
+        color: #333;
+        align-items: center;
+    }
+}
+
+.copy-button {
+    margin-left: 16rpx;
+
+    .t-btn {
+        width: 80rpx !important;
+        height: 40rpx !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        border: 2rpx solid #ddd !important;
+        font-size: 24rpx !important;
+        color: #333 !important;
+        border-radius: 24rpx !important;
+        background-color: #fff !important;
+        white-space: nowrap;
+    }
+}
+
+.collapse-demo {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/collapse/_example/collapse.vue b/packages/tdesign-uniapp/components/collapse/_example/collapse.vue
new file mode 100644
index 000000000..aebcfaacc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/collapse.vue
@@ -0,0 +1,71 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Collapse"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Collapse 折叠面板"
+        desc="可以折叠/展开的内容区域。"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础折叠面板"
+      >
+        <baseComp />
+      </t-demo>
+
+      <t-demo desc="向上展开">
+        <placement />
+      </t-demo>
+
+      <t-demo desc="带操作说明">
+        <action />
+      </t-demo>
+
+      <t-demo desc="手风琴式">
+        <accordion />
+      </t-demo>
+
+      <t-demo
+        title="02 组件样式"
+        desc="卡片折叠面板"
+      >
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import placement from './placement/index.vue';
+import action from './action/index.vue';
+import accordion from './accordion/index.vue';
+import theme from './theme/index.vue';
+
+
+export default {
+  components: {
+    baseComp,
+    placement,
+    action,
+    accordion,
+    theme,
+  },
+  data() {
+    return {
+      activeValues: [0],
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+<style lang="less">
+@import './collapse.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/_example/placement/index.vue b/packages/tdesign-uniapp/components/collapse/_example/placement/index.vue
new file mode 100644
index 000000000..d95399272
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/placement/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <view class="wrapper">
+    <t-collapse
+      :value="activeValues"
+      @change="handleChange"
+    >
+      <t-collapse-panel
+        header="折叠面板标题"
+        placement="top"
+        :value="0"
+        expand-icon
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+</template>
+
+<script>
+import tCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import tCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+export default {
+  components: {
+    tCollapse,
+    tCollapsePanel,
+  },
+  data() {
+    return {
+      activeValues: [0],
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      this.activeValues = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/_example/theme/index.vue b/packages/tdesign-uniapp/components/collapse/_example/theme/index.vue
new file mode 100644
index 000000000..3f9fa6668
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/_example/theme/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <t-collapse
+      theme="card"
+      :default-value="[3]"
+      expand-icon
+    >
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="0"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="1"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        :value="2"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+      <t-collapse-panel
+        header="折叠面板标题"
+        disabled
+        :value="3"
+      >
+        此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+</template>
+
+<script>
+import tCollapse from 'tdesign-uniapp/collapse/collapse.vue';
+import tCollapsePanel from 'tdesign-uniapp/collapse-panel/collapse-panel.vue';
+export default {
+  components: {
+    tCollapse,
+    tCollapsePanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/collapse.less b/packages/tdesign-uniapp/components/collapse/collapse.less
new file mode 100644
index 000000000..90689bd8b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/collapse.less
@@ -0,0 +1,9 @@
+@import '../common/style/base.less';
+
+.@{prefix}-collapse {
+  &--card {
+    margin: 0 32rpx;
+    border-radius: @radius-large;
+    overflow: hidden;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/collapse/collapse.vue b/packages/tdesign-uniapp/components/collapse/collapse.vue
new file mode 100644
index 000000000..f5ce24ac2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/collapse.vue
@@ -0,0 +1,119 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      tClass,
+      _.cls(classPrefix, [['hairline--top-bottom', border], theme])
+    ]"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-collapse`;
+
+
+export default uniComponent({
+  name,
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ParentMixin(RELATION_MAP.CollapsePanel)],
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:value',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      border: false,
+      dataValue: coalesce(this.value, this.defaultValue),
+      mounted: false,
+    };
+  },
+  watch: {
+    value: {
+      handler(value) {
+        this.dataValue = value;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler() {
+        this.waitUntilMounted(this.updateExpanded);
+      },
+      immediate: true,
+      deep: true,
+    },
+    expandMutex: {
+      handler() {
+        this.waitUntilMounted(this.updateExpanded);
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+    let interval = 0;
+    // #ifdef APP-PLUS
+    interval = 33;
+    // #endif
+    setTimeout(() => {
+      this.mounted = true;
+    }, interval);
+  },
+  methods: {
+    waitUntilMounted(cb) {
+      if (this.mounted) {
+        cb.call(this);
+        return;
+      }
+      setTimeout(() => {
+        cb.call(this);
+      }, 33);
+    },
+
+    updateExpanded() {
+      this.children?.forEach((e) => {
+        e.updateExpanded(this.dataValue);
+      });
+    },
+    switch(panelValue) {
+      const { expandMutex, dataValue: activeValues } = this;
+
+      let value = [];
+      const hit = activeValues?.indexOf(panelValue);
+
+      if (hit > -1) {
+        value = activeValues.filter(item => item !== panelValue);
+      } else {
+        value = expandMutex ? [panelValue] : activeValues.concat(panelValue);
+      }
+
+      this._trigger('change', { value });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './collapse.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/collapse/props.ts b/packages/tdesign-uniapp/components/collapse/props.ts
new file mode 100644
index 000000000..018219562
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/props.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCollapseProps } from './type';
+export default {
+  /** 默认是否展开全部 */
+  defaultExpandAll: Boolean,
+  /** 是否禁用面板展开/收起操作 */
+  disabled: Boolean,
+  /** 展开图标 */
+  expandIcon: {
+    type: Boolean,
+    default: true,
+  },
+  /** 每个面板互斥展开，每次只展开一个面板 */
+  expandMutex: Boolean,
+  /** 折叠面板风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdCollapseProps['theme'],
+    validator(val: TdCollapseProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'card'].includes(val);
+    },
+  },
+  /** 展开的面板集合 */
+  value: {
+    type: Array,
+  },
+  /** 展开的面板集合，非受控属性 */
+  defaultValue: {
+    type: Array,
+  },
+  /** 切换面板时触发，返回变化的值 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/collapse/type.ts b/packages/tdesign-uniapp/components/collapse/type.ts
new file mode 100644
index 000000000..0600170eb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/collapse/type.ts
@@ -0,0 +1,46 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCollapseProps {
+  /**
+   * 默认是否展开全部
+   * @default false
+   */
+  defaultExpandAll?: boolean;
+  /**
+   * 是否禁用面板展开/收起操作
+   */
+  disabled?: boolean;
+  /**
+   * 展开图标
+   * @default true
+   */
+  expandIcon?: boolean;
+  /**
+   * 每个面板互斥展开，每次只展开一个面板
+   * @default false
+   */
+  expandMutex?: boolean;
+  /**
+   * 折叠面板风格
+   * @default default
+   */
+  theme?: 'default' | 'card';
+  /**
+   * 展开的面板集合
+   */
+  value?: CollapseValue;
+  /**
+   * 展开的面板集合，非受控属性
+   */
+  defaultValue?: CollapseValue;
+  /**
+   * 切换面板时触发，返回变化的值
+   */
+  onChange?: (context: { value: CollapseValue; context: { e: MouseEvent } }) => void;
+}
+
+export type CollapseValue = Array<string | number>;
diff --git a/packages/tdesign-uniapp/components/color-picker/README.en-US.md b/packages/tdesign-uniapp/components/color-picker/README.en-US.md
new file mode 100644
index 000000000..f5ce8a72d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/README.en-US.md
@@ -0,0 +1,66 @@
+:: BASE_DOC ::
+
+## API
+
+### ColorPicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-close | Boolean | true | \- | N
+enable-alpha | Boolean | false | \- | N
+fixed | Boolean | false | \- | N
+format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
+popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts) | N
+swatch-colors | Array | undefined | swatch colors。Typescript：`Array<string> \| null \| undefined` | N
+type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts) | N
+use-popup | Boolean | false | \- | N
+value | String | - | color value。`v-model:value` is supported | N
+default-value | String | - | color value。uncontrolled property | N
+visible | Boolean | false | \- | N
+
+### ColorPicker Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }})` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(context: { trigger: ColorPickerTrigger })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
+
+### ColorPicker Slots
+
+name | Description
+-- | --
+footer | \-
+header | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-color-picker-background | #fff | - 
+--td-color-picker-border-radius-circle | 50% | - 
+--td-color-picker-format-background-color | @gray-color-1 | - 
+--td-color-picker-gradient-preview-height | 56rpx | - 
+--td-color-picker-gradient-preview-radius | 6rpx | - 
+--td-color-picker-gradient-preview-width | 56rpx | - 
+--td-color-picker-input-format-margin-left | 48rpx | - 
+--td-color-picker-margin | 24rpx | - 
+--td-color-picker-panel-padding | 32rpx | - 
+--td-color-picker-panel-radius | 24rpx | - 
+--td-color-picker-panel-width | 750rpx | - 
+--td-color-picker-saturation-height | 288rpx | - 
+--td-color-picker-saturation-radius | 12rpx | - 
+--td-color-picker-saturation-thumb-size | 48rpx | - 
+--td-color-picker-slider-height | 16rpx | - 
+--td-color-picker-slider-thumb-padding | 6rpx | - 
+--td-color-picker-slider-thumb-size | 48rpx | - 
+--td-color-picker-slider-thumb-transform-x | -18rpx | - 
+--td-color-picker-slider-wrapper-padding | 0 18rpx | - 
+--td-color-picker-swatch-active | rgba(0, 0, 0, 0.2) | - 
+--td-color-picker-swatch-border-radius | 6rpx | - 
+--td-color-picker-swatch-height | 48rpx | - 
+--td-color-picker-swatch-padding | 0 | - 
+--td-color-picker-swatch-width | 48rpx | - 
+--td-color-picker-swatches-title-font | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/color-picker/README.md b/packages/tdesign-uniapp/components/color-picker/README.md
new file mode 100644
index 000000000..aedde4379
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/README.md
@@ -0,0 +1,114 @@
+---
+title: ColorPicker 颜色选择器
+description: 用于颜色选择，支持多种格式。
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TColorPicker from 'tdesign-uniapp/color-picker/color-picker.vue';
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础颜色选择器
+
+{{ base }}
+
+#### 带色板的颜色选择器
+
+{{ multiple }}
+
+### 组件状态
+
+{{ format }}
+
+## FAQ
+
+如果使用场景为 `scroll-view`，除了需要显示指定 `fixed` 属性为 `true`，还需要手动调用组件的 debouncedUpdateEleRect() 事件。
+
+```html
+<scroll-view type="list" scroll-y bind:scroll="onScroll">
+  <t-color-picker id="ColorPicker" fixed />
+</scroll-view>
+```
+
+```js
+onScroll(e) {
+  if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker');
+  this.colorPicker.debouncedUpdateEleRect(e);
+}
+```
+
+## API
+
+### ColorPicker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
+enable-alpha | Boolean | false | 是否开启透明通道 | N
+fixed | Boolean | false | 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts) | N
+swatch-colors | Array | undefined | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null \| undefined` | N
+type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts) | N
+use-popup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
+value | String | - | 色值。支持语法糖 `v-model:value` | N
+default-value | String | - | 色值。非受控属性 | N
+visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
+
+### ColorPicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }})` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(context: { trigger: ColorPickerTrigger })` | 关闭按钮时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
+
+### ColorPicker Slots
+
+名称 | 描述
+-- | --
+footer | 底部插槽，仅在 `usePopup` 为 `true` 时有效
+header | 顶部插槽，仅在 `usePopup` 为 `true` 时有效
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-color-picker-background | #fff | - |
+| --td-color-picker-border-radius-circle | 50% | - |
+| --td-color-picker-format-background-color | @gray-color-1 | - |
+| --td-color-picker-gradient-preview-height | 56rpx | - |
+| --td-color-picker-gradient-preview-radius | 6rpx | - |
+| --td-color-picker-gradient-preview-width | 56rpx | - |
+| --td-color-picker-input-format-margin-left | 48rpx | - |
+| --td-color-picker-margin | 24rpx | - |
+| --td-color-picker-panel-padding | 32rpx | - |
+| --td-color-picker-panel-radius | 24rpx | - |
+| --td-color-picker-panel-width | 750rpx | - |
+| --td-color-picker-saturation-height | 288rpx | - |
+| --td-color-picker-saturation-radius | 12rpx | - |
+| --td-color-picker-saturation-thumb-size | 48rpx | - |
+| --td-color-picker-slider-height | 16rpx | - |
+| --td-color-picker-slider-thumb-padding | 6rpx | - |
+| --td-color-picker-slider-thumb-size | 48rpx | - |
+| --td-color-picker-slider-thumb-transform-x | -18rpx | - |
+| --td-color-picker-slider-wrapper-padding | 0 18rpx | - |
+| --td-color-picker-swatch-active | rgba(0, 0, 0, 0.2) | - |
+| --td-color-picker-swatch-border-radius | 6rpx | - |
+| --td-color-picker-swatch-height | 48rpx | - |
+| --td-color-picker-swatch-padding | 0 | - |
+| --td-color-picker-swatch-width | 48rpx | - |
+| --td-color-picker-swatches-title-font | 32rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/base/index.vue b/packages/tdesign-uniapp/components/color-picker/_example/base/index.vue
new file mode 100644
index 000000000..ef4365dce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/_example/base/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <view>
+    <t-color-picker @change="onChange" />
+  </view>
+</template>
+
+<script>
+import tColorPicker from 'tdesign-uniapp/color-picker/color-picker.vue';
+export default {
+  components: {
+    tColorPicker,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onChange(...args) {
+      console.log('change:', ...args);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/color-picker.less b/packages/tdesign-uniapp/components/color-picker/_example/color-picker.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/color-picker.vue b/packages/tdesign-uniapp/components/color-picker/_example/color-picker.vue
new file mode 100644
index 000000000..bb33b98f4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/_example/color-picker.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="ColorPicker"
+      left-arrow
+    />
+    <!-- #endif -->
+
+    <view class="demo">
+      <t-demo-header
+        title="ColorPicker 颜色选择器"
+        desc="用于颜色选择，支持多种格式。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础颜色选择器"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="带色板的颜色选择器">
+        <multiple />
+      </t-demo>
+
+      <t-demo
+        desc="弹窗形式的颜色选择器"
+        padding
+      >
+        <usePopup />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="组件模式选择"
+      >
+        <format />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import multiple from './multiple/index.vue';
+import format from './format/index.vue';
+import usePopup from './use-popup/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    multiple,
+    format,
+    usePopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './color-picker.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/format/index.vue b/packages/tdesign-uniapp/components/color-picker/_example/format/index.vue
new file mode 100644
index 000000000..0cff9edd1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/_example/format/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <view>
+    <view
+      v-for="(list, index) in formatList"
+      :key="index"
+      class="format-line"
+    >
+      <view
+        v-for="(item, index1) in list"
+        :key="index1"
+        :class="'format-item ' + (curFormat === item ? 'active' : '')"
+        :data-format="item"
+        @click.stop.prevent="clickFormat"
+      >
+        <t-icon
+          v-if="curFormat === item"
+          name="check"
+          size="14"
+          custom-style="position: absolute; top: 4rpx; left: 4rpx; color: #fff; z-index: 1;"
+        />
+
+        {{ item }}
+      </view>
+    </view>
+    <t-color-picker
+      enable-alpha
+      type="multiple"
+      :format="curFormat"
+      :value="color"
+      @change="onChange"
+      @palette-bar-change="onPaletteBarChange"
+    />
+  </view>
+</template>
+
+<script>
+import tColorPicker from 'tdesign-uniapp/color-picker/color-picker.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tColorPicker,
+    tIcon,
+  },
+  data() {
+    return {
+      curFormat: 'CSS',
+      color: '#7bd60b',
+      formatList: [
+        ['CSS', 'HEX', 'RGB'],
+        ['HSL', 'HSV', 'CMYK'],
+      ],
+      list: [],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change', e);
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e);
+    },
+    clickFormat(e) {
+      this.curFormat = e.target.dataset.format;
+    },
+  },
+};
+</script>
+<style>
+.format-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 112rpx;
+    margin: 0 32rpx 40rpx;
+}
+
+.format-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 32rpx;
+    width: 100%;
+    height: 100%;
+    line-height: 100%;
+    background-color: var(--td-bg-color-container);
+    border: 3rpx solid var(--td-bg-color-container);
+    border-radius: 12rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-size: 16px;
+}
+
+.format-item.active {
+    border-color: var(--td-brand-color);
+}
+
+.format-item.active::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 0;
+    top: 0;
+    border-top-left-radius: 12rpx;
+    border-top: 56rpx solid var(--td-brand-color);
+    border-right: 56rpx solid transparent;
+    border-radius: 0;
+}
+
+.format-item:not(:last-child) {
+    margin-right: 24rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/multiple/index.vue b/packages/tdesign-uniapp/components/color-picker/_example/multiple/index.vue
new file mode 100644
index 000000000..4608a89ab
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/_example/multiple/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <t-color-picker
+      enable-alpha
+      type="multiple"
+      @change="onChange"
+      @palette-bar-change="onPaletteBarChange"
+    />
+  </view>
+</template>
+
+<script>
+import tColorPicker from 'tdesign-uniapp/color-picker/color-picker.vue';
+export default {
+  components: {
+    tColorPicker,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change', e);
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/_example/use-popup/index.vue b/packages/tdesign-uniapp/components/color-picker/_example/use-popup/index.vue
new file mode 100644
index 000000000..17edae32c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/_example/use-popup/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <view>
+    <t-color-picker
+      v-model:visible="visible"
+      use-popup
+      enable-alpha
+      type="multiple"
+      @change="onChange"
+      @palette-bar-change="onPaletteBarChange"
+    />
+
+    <TButton
+      block
+      size="large"
+      variant="outline"
+      theme="primary"
+      t-class="wrapper"
+      @click="handlePopup"
+    >
+      弹窗形式的颜色选择器
+    </TButton>
+  </view>
+</template>
+
+<script>
+import tColorPicker from 'tdesign-uniapp/color-picker/color-picker.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+export default {
+  components: {
+    tColorPicker,
+    TButton,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change', e);
+    },
+    handlePopup() {
+      this.visible = true;
+    },
+    onPaletteBarChange(e) {
+      console.log('onPaletteBarChange', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/color-picker.less b/packages/tdesign-uniapp/components/color-picker/color-picker.less
new file mode 100644
index 000000000..ea83157e5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/color-picker.less
@@ -0,0 +1,366 @@
+@import '../common/style/base.less';
+
+// 防止转成 px 后，尺寸没铺满
+// width: 750rpx => 100%
+@color-picker-panel-width: var(--td-color-picker-panel-width, 100%);
+@color-picker-panel-padding: var(--td-color-picker-panel-padding, 32rpx);
+@color-picker-panel-radius: var(--td-color-picker-panel-radius, 24rpx);
+@color-picker-panel-background: var(--td-color-picker-background, #fff);
+@color-picker-margin: var(--td-color-picker-margin, 24rpx);
+
+@color-picker-saturation-height: var(--td-color-picker-saturation-height, 288rpx);
+@color-picker-saturation-radius: var(--td-color-picker-saturation-radius, 12rpx);
+@color-picker-saturation-thumb-size: var(--td-color-picker-saturation-thumb-size, 48rpx);
+
+@color-picker-slider-height: var(--td-color-picker-slider-height, 16rpx);
+@color-picker-slider-wrapper-radius: calc(@color-picker-slider-height / 2);
+@color-picker-slider-wrapper-padding: var(--td-color-picker-slider-wrapper-padding, 0 18rpx);
+@color-picker-slider-thumb-size: var(--td-color-picker-slider-thumb-size, 48rpx);
+@color-picker-slider-thumb-transform-x: var(--td-color-picker-slider-thumb-transform-x, -18rpx);
+@color-picker-slider-thumb-padding: var(--td-color-picker-slider-thumb-padding, 6rpx);
+
+@color-picker-input-format-margin-left: var(--td-color-picker-input-format-margin-left, 48rpx);
+@color-picker-gradient-preview-width: var(--td-color-picker-gradient-preview-width, 56rpx);
+@color-picker-gradient-preview-height: var(--td-color-picker-gradient-preview-height, 56rpx);
+@color-picker-gradient-preview-radius: var(--td-color-picker-gradient-preview-radius, 6rpx);
+
+@color-picker-swatches-title-font: var(--td-color-picker-swatches-title-font, 32rpx);
+@color-picker-swatch-width: var(--td-color-picker-swatch-width, 48rpx);
+@color-picker-swatch-height: var(--td-color-picker-swatch-height, 48rpx);
+@color-picker-swatch-padding: var(--td-color-picker-swatch-padding, 0);
+@color-picker-swatch-border-radius: var(--td-color-picker-swatch-border-radius, 6rpx);
+@color-picker-swatch-active: var(--td-color-picker-swatch-active, rgba(0, 0, 0, 0.2));
+
+@color-picker-thumbs-shadow: @shadow-1;
+@color-picker-border-radius-circle: var(--td-color-picker-border-radius-circle, 50%);
+@color-picker-format-background-color: var(--td-color-picker-format-background-color, @gray-color-1);
+
+@color-picker: ~'@{prefix}-color-picker';
+
+.@{color-picker} {
+  &__panel {
+    padding: 0;
+    width: @color-picker-panel-width;
+    background: @color-picker-panel-background;
+    border-top-left-radius: @color-picker-panel-radius;
+    border-top-right-radius: @color-picker-panel-radius;
+    user-select: none;
+  }
+
+  &__body {
+    padding: @color-picker-panel-padding;
+    padding-bottom: 56rpx;
+  }
+
+  &__thumb {
+    position: absolute;
+    z-index: 1;
+    outline: none;
+    width: @color-picker-slider-thumb-size;
+    height: @color-picker-slider-thumb-size;
+
+    border-radius: @color-picker-border-radius-circle;
+    box-shadow: @color-picker-thumbs-shadow;
+    color: @text-color-brand;
+    box-sizing: border-box;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: @color-picker-border-radius-circle;
+      box-sizing: border-box;
+      display: block;
+      border: 1px solid #dcdcdc;
+    }
+
+    &::before {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+    }
+
+    &::after {
+      left: 3px;
+      top: 3px;
+      width: calc(100% - 6px);
+      height: calc(100% - 6px);
+      padding: @color-picker-slider-thumb-padding;
+      background: currentcolor;
+    }
+  }
+
+  &__saturation {
+    height: @color-picker-saturation-height;
+    border-radius: @color-picker-saturation-radius;
+    position: relative;
+    overflow: hidden;
+    background: transparent;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &::before {
+      /* stylelint-disable-next-line color-no-hex */
+      background: linear-gradient(90deg, #fff, transparent);
+    }
+
+    &::after {
+      /* stylelint-disable-next-line color-no-hex */
+      background: linear-gradient(0deg, #000, transparent);
+    }
+
+    .@{color-picker}__thumb {
+      width: @color-picker-saturation-thumb-size;
+      height: @color-picker-saturation-thumb-size;
+      border-radius: @color-picker-border-radius-circle;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__slider-wrapper {
+    border-radius: @color-picker-slider-wrapper-radius;
+    padding: @color-picker-slider-wrapper-padding;
+    position: relative;
+
+    &--hue-type {
+      /* stylelint-disable-next-line color-named */
+      background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+      margin: 16rpx 0;
+    }
+
+    &--alpha-type {
+      background: @text-color-anti;
+      margin: 40rpx 0 16rpx 0;
+      .transparentBgImage();
+
+      .@{color-picker}__rail {
+        background: linear-gradient(to right, transparent, currentcolor);
+      }
+    }
+  }
+
+  &__slider-padding {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: @color-picker-slider-height;
+    border-radius: @color-picker-slider-wrapper-radius;
+  }
+
+  &__slider {
+    height: @color-picker-slider-height;
+    position: relative;
+    border-radius: @color-picker-slider-wrapper-radius;
+    color: transparent;
+    outline: none;
+    z-index: 1;
+
+    .@{color-picker}__thumb {
+      transform: translate(@color-picker-slider-thumb-transform-x, -50%);
+      top: 50%;
+    }
+
+    .@{color-picker}__rail {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+  }
+
+  &__sliders-wrapper {
+    display: flex;
+    align-items: center;
+    margin: 32rpx 0 40rpx;
+  }
+
+  &__sliders {
+    width: 100%;
+  }
+
+  &__sliders-preview {
+    flex-shrink: 0;
+    margin-left: @color-picker-margin;
+    width: @color-picker-gradient-preview-width;
+    height: @color-picker-gradient-preview-height;
+    border-radius: @color-picker-gradient-preview-radius;
+    overflow: hidden;
+    background: @text-color-anti;
+    .transparentBgImage();
+  }
+
+  &__sliders-preview-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__format {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 28rpx;
+    text-align: center;
+    line-height: 56rpx;
+    height: 56rpx;
+    margin-top: 40rpx;
+  }
+
+  &__format-item {
+    background: @color-picker-format-background-color;
+    &--first {
+      flex-shrink: 0;
+      width: 136rpx;
+      border: 1px solid #dcdcdc;
+      border-radius: 12rpx;
+      margin-right: 24rpx;
+    }
+
+    &--second {
+      flex: 1;
+    }
+  }
+
+  &__format-inputs {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  &__format-input {
+    flex: 1;
+    width: 0;
+    margin-left: -1px;
+
+    border: 1px solid #dcdcdc;
+    border-radius: 12rpx;
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &--fixed {
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: 133rpx;
+    }
+  }
+
+  &__swatches-wrap {
+    margin-top: 56rpx;
+    position: relative;
+  }
+
+  &__swatches {
+    + .@{color-picker}__swatches {
+      margin-top: @color-picker-margin;
+    }
+  }
+
+  &__swatches-title {
+    font-size: @color-picker-swatches-title-font;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48rpx;
+    line-height: 48rpx;
+  }
+
+  &__swatches-items {
+    margin-top: 24rpx;
+    width: 100%;
+    list-style: none;
+    display: flex;
+
+    overflow-x: auto;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      color: transparent;
+    }
+  }
+
+  &__swatches-item {
+    width: @color-picker-swatch-width;
+    height: @color-picker-swatch-height;
+    border-radius: 6rpx;
+    padding: @color-picker-swatch-padding;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    transform-origin: center;
+    transition: all @anim-duration-base @anim-time-fn-easing;
+    box-sizing: border-box;
+
+    flex-shrink: 0;
+    margin-right: 24rpx;
+    border-radius: @color-picker-swatch-border-radius;
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    &:active {
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__swatches-inner {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: @color-picker-swatch-border-radius;
+    position: relative;
+  }
+}
+
+.transparentBgImage () {
+  /* stylelint-disable-next-line color-no-hex */
+  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5),
+    linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
diff --git a/packages/tdesign-uniapp/components/color-picker/color-picker.vue b/packages/tdesign-uniapp/components/color-picker/color-picker.vue
new file mode 100644
index 000000000..ee1f1b1c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/color-picker.vue
@@ -0,0 +1,498 @@
+<template>
+  <view :class="classPrefix + '__root'">
+    <t-popup
+      v-if="usePopup"
+      :visible="dataVisible"
+      :using-custom-navbar="popupProps?.usingCustomNavbar || false"
+      :custom-navbar-height="popupProps?.customNavbarHeight"
+      :show-overlay="popupProps?.showOverlay || true"
+      :z-index="popupProps?.zIndex || 11500"
+      :overlay-props="popupProps?.overlayProps || defaultOverlayProps"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <slot name="header" />
+      <TemplateVue
+        ref="templateVue"
+        :class-prefix="classPrefix"
+        :custom-style="_._style([customStyle])"
+        :is-multiple="isMultiple"
+        :type="type"
+        :slider-info="sliderInfo"
+        :saturation-thumb-style="saturationThumbStyle"
+        :hue-slider-style="hueSliderStyle"
+        :enable-alpha="enableAlpha"
+        :alpha-slider-style="alphaSliderStyle"
+        :show-primary-color-preview="showPrimaryColorPreview"
+        :preview-color="previewColor"
+        :format-list="formatList"
+        :inner-swatch-list="innerSwatchList"
+        :format="format"
+        @onTouchStart="onTouchStart"
+        @onTouchMove="onTouchMove"
+        @onTouchEnd="onTouchEnd"
+        @clickSwatch="clickSwatch"
+      />
+      <slot name="footer" />
+    </t-popup>
+    <block v-else>
+      <TemplateVue
+        ref="templateVue"
+        :class-prefix="classPrefix"
+        :custom-style="_._style([customStyle])"
+        :is-multiple="isMultiple"
+        :type="type"
+        :slider-info="sliderInfo"
+        :saturation-thumb-style="saturationThumbStyle"
+        :hue-slider-style="hueSliderStyle"
+        :enable-alpha="enableAlpha"
+        :alpha-slider-style="alphaSliderStyle"
+        :show-primary-color-preview="showPrimaryColorPreview"
+        :preview-color="previewColor"
+        :format-list="formatList"
+        :inner-swatch-list="innerSwatchList"
+        :format="format"
+        @onTouchStart="onTouchStart"
+        @onTouchMove="onTouchMove"
+        @onTouchEnd="onTouchEnd"
+        @clickSwatch="clickSwatch"
+      />
+    </block>
+  </view>
+</template>
+<script>
+import tPopup from '../popup/popup';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import {
+  SATURATION_PANEL_DEFAULT_HEIGHT,
+  SATURATION_PANEL_DEFAULT_WIDTH,
+  SLIDER_DEFAULT_WIDTH,
+  DEFAULT_COLOR,
+  ALPHA_MAX,
+  HUE_MAX,
+  DEFAULT_SYSTEM_SWATCH_COLORS,
+} from './constants';
+import { debounce, nextTick } from '../common/utils';
+import { Color, getColorObject } from './utils';
+import TemplateVue from './template.vue';
+
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-color-picker`;
+
+const getCoordinate = (e, react, isFixed) => {
+  const { pageX, pageY, clientY } = e.changedTouches[0] || {};
+
+  const offsetY = isFixed ? react.top : e.currentTarget?.offsetTop;
+
+  return {
+    x: Math.min(Math.max(0, pageX - react.left), react.width),
+    y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - offsetY), react.height),
+  };
+};
+
+const getFormatList = (format, color) => {
+  const FORMAT_MAP = {
+    HSV: Object.values(color.getHsva()),
+    HSVA: Object.values(color.getHsva()),
+
+    HSL: Object.values(color.getHsla()),
+    HSLA: Object.values(color.getHsla()),
+    HSB: Object.values(color.getHsla()),
+
+    RGB: Object.values(color.getRgba()),
+    RGBA: Object.values(color.getRgba()),
+    CMYK: [...Object.values(color.getCmyk()), 0],
+
+    CSS: [color.css, 0],
+    HEX: [color.hex, 0],
+  };
+
+  const cur = FORMAT_MAP[format];
+  if (cur) {
+    return [...cur.slice(0, cur.length - 1), `${Math.round(color.alpha * 100)}%`];
+  }
+  return FORMAT_MAP.RGB;
+};
+
+const genSwatchList = (prop) => {
+  if (prop === undefined) {
+    return DEFAULT_SYSTEM_SWATCH_COLORS;
+  }
+  if (!prop || !prop.length) {
+    return [];
+  }
+  return prop;
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tPopup,
+    TemplateVue,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'palette-bar-change',
+    'close',
+    'change',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      panelRect: {
+        width: SATURATION_PANEL_DEFAULT_WIDTH,
+        height: SATURATION_PANEL_DEFAULT_HEIGHT,
+      },
+      sliderRect: {
+        width: SLIDER_DEFAULT_WIDTH,
+        left: 0,
+      },
+      saturationInfo: {
+        saturation: 0,
+        value: 0,
+      },
+      saturationThumbStyle: {
+        left: 0,
+        top: 0,
+      },
+      sliderInfo: {
+        value: 0, // hue
+      },
+      hueSliderStyle: {
+        left: 0,
+      },
+      alphaSliderStyle: {
+        left: 0,
+      },
+      innerValue: props.defaultValue.default || props.value.default,
+      showPrimaryColorPreview: false,
+      previewColor: props.defaultValue.default || props.value.default,
+      formatList: [],
+      innerSwatchList: genSwatchList(props.swatchColors.default),
+      isMultiple: props.type.default === 'multiple',
+      defaultOverlayProps: {},
+      _,
+      color: {},
+      dataVisible: this.visible,
+    };
+  },
+  watch: {
+    format: {
+      handler() {
+        this.setCoreStyle();
+      },
+      deep: true,
+    },
+    swatchColors: {
+      handler(value) {
+        this.innerSwatchList = genSwatchList(value);
+      },
+      immediate: true,
+    },
+    type: {
+      handler(value) {
+        this.isMultiple = value === 'multiple';
+      },
+      immediate: true,
+    },
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+    usePopup: 'onWatchPopupVisible',
+    dataVisible: 'onWatchPopupVisible',
+
+    value(v) {
+      if (v) {
+        this.init();
+      }
+    },
+  },
+  created() {
+    this.color = new Color(props.defaultValue.default || props.value.default || DEFAULT_COLOR);
+    this.formatList =  getFormatList(props.format.default, this.color);
+  },
+  mounted() {
+    setTimeout(() => {
+      this.init();
+    }, 33);
+    this.debouncedUpdateEleRect = debounce(e => this.updateEleRect(e), 150);
+  },
+  beforeUnMount() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    init() {
+      const { value, defaultValue } = this;
+      const innerValue = value || defaultValue;
+      if (innerValue) {
+        this.innerValue = innerValue;
+      }
+      this.color = new Color(innerValue || DEFAULT_COLOR);
+      this.updateColor();
+      this.getEleReact();
+    },
+
+    updateEleRect(e) {
+      if (!e) return;
+
+      const { scrollTop } = e.detail;
+      const { width, height, left, initTop } = this.panelRect;
+      this.panelRect = {
+        width,
+        height,
+        left,
+        top: initTop - scrollTop,
+        initTop,
+      };
+    },
+
+    getEleReact() {
+      const saturationSelector = `.${name}__saturation`;
+      const sliderSelector = `.${name}__slider`;
+      // }
+      if (!this.$refs.templateVue) return;
+
+      Promise.all([
+        this.$refs.templateVue.getRect(saturationSelector),
+        this.$refs.templateVue.getRect(sliderSelector),
+      ])
+        .then(([saturationRect, sliderRect]) => {
+          this.panelRect = {
+            width: saturationRect.width || SATURATION_PANEL_DEFAULT_WIDTH,
+            height: saturationRect.height || SATURATION_PANEL_DEFAULT_HEIGHT,
+            left: saturationRect.left || 0,
+            top: saturationRect.top || 0,
+            initTop: saturationRect.top || 0,
+          };
+          this.sliderRect = {
+            left: sliderRect.left || 0,
+            width: sliderRect.width || SLIDER_DEFAULT_WIDTH,
+          };
+
+          setTimeout(() => {
+            this.setCoreStyle();
+          }, 33);
+        })
+        .catch(() => {
+        });
+    },
+
+    clickSwatch(e) {
+      const swatch = e.currentTarget.dataset.value;
+      this.color.update(swatch);
+      this.emitColorChange('preset');
+      this.setCoreStyle();
+    },
+
+    setCoreStyle() {
+      this.sliderInfo = {
+        value: this.color.hue,
+      };
+      this.hueSliderStyle = this.getSliderThumbStyle({ value: this.color.hue, maxValue: HUE_MAX });
+      this.alphaSliderStyle = this.getSliderThumbStyle({ value: this.color.alpha * 100, maxValue: ALPHA_MAX });
+      this.saturationInfo = {
+        saturation: this.color.saturation,
+        value: this.color.value,
+      };
+      this.saturationThumbStyle = this.getSaturationThumbStyle({
+        saturation: this.color.saturation,
+        value: this.color.value,
+      });
+      this.previewColor = this.color.rgba;
+      this.formatList = getFormatList(this.format, this.color);
+    },
+
+    emitColorChange(trigger) {
+      this.innerValue = this.formatValue();
+
+      this.$emit('change', {
+        value: this.formatValue(),
+        context: {
+          trigger,
+          color: getColorObject(this.color),
+        },
+      });
+    },
+
+    defaultEmptyColor() {
+      return DEFAULT_COLOR;
+    },
+
+    updateColor() {
+      const result = this.innerValue || this.defaultEmptyColor();
+      this.color.update(result);
+    },
+
+    getSaturationAndValueByCoordinate(coordinate) {
+      const { width, height } = this.panelRect;
+      const { x, y } = coordinate;
+      let saturation = x / width;
+      let value = 1 - y / height;
+      saturation = Math.min(1, Math.max(0, saturation));
+      value = Math.min(1, Math.max(0, value));
+
+      return {
+        saturation,
+        value,
+      };
+    },
+
+    getSaturationThumbStyle({ saturation, value }) {
+      const { width, height } = this.panelRect;
+      const top = Math.round((1 - value) * height);
+      const left = Math.round(saturation * width);
+      return {
+        color: this.color.rgb,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+
+    getSliderThumbStyle({ value, maxValue }) {
+      const { width } = this.sliderRect;
+      if (!width) {
+        return;
+      }
+      const left = Math.round((value / maxValue) * 100);
+      return {
+        left: `${left}%`,
+        color: this.color.rgb,
+      };
+    },
+
+    onChangeSaturation({ saturation, value }) {
+      const { saturation: sat, value: val } = this.color;
+      let changeTrigger = 'palette-saturation-brightness';
+      if (value !== val && saturation !== sat) {
+        this.color.saturation = saturation;
+        this.color.value = value;
+        changeTrigger = 'palette-saturation-brightness';
+      } else if (saturation !== sat) {
+        this.color.saturation = saturation;
+        changeTrigger = 'palette-saturation';
+      } else if (value !== val) {
+        this.color.value = value;
+        changeTrigger = 'palette-brightness';
+      } else {
+        return;
+      }
+
+      this.$emit('palette-bar-change', {
+        color: getColorObject(this.color),
+      });
+
+      this.emitColorChange(changeTrigger);
+      this.setCoreStyle();
+    },
+
+    formatValue() {
+      return this.color.getFormatsColorMap()[this.format] || this.color.css;
+    },
+
+    onChangeSlider({ value, isAlpha }) {
+      if (isAlpha) {
+        this.color.alpha = value / 100;
+      } else {
+        this.color.hue = value;
+      }
+
+      this.emitColorChange(isAlpha ? 'palette-alpha-bar' : 'palette-hue-bar');
+
+      this.setCoreStyle();
+    },
+
+    handleSaturationDrag(e) {
+      const { usePopup, fixed } = this;
+      const coordinate = getCoordinate(e, this.panelRect, usePopup || fixed);
+      const { saturation, value } = this.getSaturationAndValueByCoordinate(coordinate);
+      this.onChangeSaturation({ saturation, value });
+    },
+
+    handleSliderDrag(e, isAlpha = false) {
+      const { width } = this.sliderRect;
+      const coordinate = getCoordinate(e, this.sliderRect);
+      const { x } = coordinate;
+      const maxValue = isAlpha ? ALPHA_MAX : HUE_MAX;
+
+      let value = Math.round((x / width) * maxValue * 100) / 100;
+      if (value < 0) value = 0;
+      if (value > maxValue) value = maxValue;
+      this.onChangeSlider({ value, isAlpha });
+    },
+
+    handleDiffDrag(e) {
+      const dragType = e.target.dataset.type || e.currentTarget.dataset.type;
+      switch (dragType) {
+        case 'saturation':
+          this.handleSaturationDrag(e);
+          break;
+        case 'hue-slider':
+          this.handleSliderDrag(e);
+          break;
+        case 'alpha-slider':
+          this.handleSliderDrag(e, true);
+          break;
+        default:
+          break;
+      }
+    },
+
+    onTouchStart(e) {
+      this.handleDiffDrag(e);
+    },
+
+    onTouchMove(e) {
+      this.handleDiffDrag(e);
+    },
+
+    onTouchEnd(e) {
+      nextTick().then(() => {
+        this.handleDiffDrag(e);
+      });
+    },
+
+    close(trigger) {
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.$emit('update:visible', false);
+      }
+
+      this.$emit('close', { trigger });
+    },
+
+    onVisibleChange() {
+      this.close('overlay');
+    },
+
+    onWatchPopupVisible() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+
+      if (this.usePopup && this.dataVisible) {
+        this.timer = setTimeout(() => {
+          this.getEleReact();
+        }, 350); // popup 的 transition-duration 为 300ms，为保证 popup 已渲染完毕，故使用 350ms
+      }
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './color-picker.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/constants.ts b/packages/tdesign-uniapp/components/color-picker/constants.ts
new file mode 100644
index 000000000..72f64afaf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/constants.ts
@@ -0,0 +1,26 @@
+/** 常量 */
+
+// 默认颜色
+export const DEFAULT_COLOR = '#001F97';
+
+// 默认系统色彩
+export const DEFAULT_SYSTEM_SWATCH_COLORS = [
+  '#F2F3FF',
+  '#D9E1FF',
+  '#B5C7FF',
+  '#8EABFF',
+  '#618DFF',
+  '#366EF4',
+  '#0052D9',
+  '#003CAB',
+  '#002A7C',
+  '#001A57',
+];
+
+// saturation-panel default rect
+export const SATURATION_PANEL_DEFAULT_WIDTH = 343;
+export const SATURATION_PANEL_DEFAULT_HEIGHT = 144;
+export const SLIDER_DEFAULT_WIDTH = 303;
+
+export const HUE_MAX = 360;
+export const ALPHA_MAX = 100;
diff --git a/packages/tdesign-uniapp/components/color-picker/props.ts b/packages/tdesign-uniapp/components/color-picker/props.ts
new file mode 100644
index 000000000..c0c35dd42
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/props.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdColorPickerProps } from './type';
+export default {
+  /** 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启透明通道 */
+  enableAlpha: Boolean,
+  /** 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */
+  fixed: Boolean,
+  /** 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效 */
+  format: {
+    type: String,
+    default: 'RGB' as TdColorPickerProps['format'],
+    validator(val: TdColorPickerProps['format']): boolean {
+      if (!val) return true;
+      return ['HEX', 'HEX8', 'RGB', 'RGBA', 'HSL', 'HSLA', 'HSV', 'HSVA', 'CMYK', 'CSS'].includes(val);
+    },
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
+  swatchColors: {
+    type: Array,
+    default: undefined as TdColorPickerProps['swatchColors'],
+  },
+  /** 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容 */
+  type: {
+    type: String,
+    default: 'base' as TdColorPickerProps['type'],
+    validator(val: TdColorPickerProps['type']): boolean {
+      if (!val) return true;
+      return ['base', 'multiple'].includes(val);
+    },
+  },
+  /** 是否使用弹出层包裹颜色选择器 */
+  usePopup: Boolean,
+  /** 色值 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 色值，非受控属性 */
+  defaultValue: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示颜色选择器。`usePopup` 为 true 时有效 */
+  visible: Boolean,
+  /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */
+  onPaletteBarChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/color-picker/template.props.js b/packages/tdesign-uniapp/components/color-picker/template.props.js
new file mode 100644
index 000000000..971fa24c3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/template.props.js
@@ -0,0 +1,58 @@
+export default {
+  classPrefix: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  isMultiple: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+  sliderInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+  saturationThumbStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  hueSliderStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  enableAlpha: {
+    type: Boolean,
+    default: false,
+  },
+  alphaSliderStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  showPrimaryColorPreview: {
+    type: Boolean,
+    default: false,
+  },
+  previewColor: {
+    type: String,
+    default: '',
+  },
+  formatList: {
+    type: Array,
+    default: () => ([]),
+  },
+  innerSwatchList: {
+    type: Array,
+    default: () => ([]),
+  },
+  format: {
+    type: String,
+    default: 'RGB',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/color-picker/template.vue b/packages/tdesign-uniapp/components/color-picker/template.vue
new file mode 100644
index 000000000..0cb51f18a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/template.vue
@@ -0,0 +1,198 @@
+<template>
+  <view
+    :class="classPrefix + '__panel'"
+    :style="customStyle"
+  >
+    <view
+      :class="classPrefix + '__body ' + classPrefix + '__body--' + type"
+    >
+      <!-- #ifdef MP-ALIPAY -->
+      <view
+        disable-scroll
+      >
+        <!-- #endif -->
+
+        <view
+          v-if="isMultiple"
+          :class="classPrefix + '__saturation'"
+          data-type="saturation"
+          :style="'background: hsl(' + sliderInfo.value + ', 100%, 50%)'"
+          @touchstart.stop.prevent="onTouchStart"
+          @touchmove.stop.prevent="onTouchMove"
+          @touchend.stop.prevent="onTouchEnd"
+        >
+          <view
+            :class="classPrefix + '__thumb'"
+            :tab-index="0"
+            :style="utils._style(saturationThumbStyle)"
+          />
+        </view>
+        <!-- #ifdef MP-ALIPAY -->
+      </view>
+      <!-- #endif -->
+
+
+      <view
+        v-if="isMultiple"
+        :class="classPrefix + '__sliders-wrapper'"
+      >
+        <view
+          :class="classPrefix + '__sliders'"
+        >
+          <view
+            :class="classPrefix + '__slider-wrapper ' + classPrefix + '__slider-wrapper--hue-type'"
+            disable-scroll
+          >
+            <view
+              :class="classPrefix + '__slider'"
+              data-type="hue-slider"
+              @touchstart.stop.prevent="onTouchStart"
+              @touchmove.stop.prevent="onTouchMove"
+              @touchend.stop.prevent="onTouchEnd"
+            >
+              <view :class="classPrefix + '__rail'" />
+              <view
+                :class="classPrefix + '__thumb'"
+                :style="utils._style(hueSliderStyle)"
+              />
+            </view>
+          </view>
+          <view
+            v-if="enableAlpha"
+            :class="classPrefix + '__slider-wrapper ' + classPrefix + '__slider-wrapper--alpha-type'"
+            :disable-scroll="true"
+          >
+            <view
+              :class="classPrefix + '__slider-padding'"
+              :style="
+                'background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ' + alphaSliderStyle.color + ' 93%, ' + alphaSliderStyle.color + ' 100%)'
+              "
+              :disable-scroll="false"
+            />
+            <view
+              :class="classPrefix + '__slider'"
+              data-type="alpha-slider"
+              @touchstart.stop.prevent="onTouchStart"
+              @touchmove.stop.prevent="onTouchMove"
+              @touchend.stop.prevent="onTouchEnd"
+            >
+              <view
+                :class="classPrefix + '__rail'"
+                :style="'background: linear-gradient(to right, rgba(0, 0, 0, 0), ' + alphaSliderStyle.color + ')'"
+              />
+              <view
+                :class="classPrefix + '__thumb'"
+                :style="utils._style(alphaSliderStyle)"
+              />
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="showPrimaryColorPreview"
+          :class="classPrefix + '__sliders-preview ' + classPrefix + '--bg-alpha'"
+        >
+          <view
+            :class="classPrefix + '__sliders-preview-inner'"
+            :style="'background: ' + previewColor"
+          />
+        </view>
+      </view>
+      <view
+        v-if="isMultiple"
+        :class="classPrefix + '__format'"
+      >
+        <view :class="classPrefix + '__format-item ' + classPrefix + '__format-item--first'">
+          {{ format }}
+        </view>
+        <view :class="classPrefix + '__format-item ' + classPrefix + '__format-item--second'">
+          <view :class="classPrefix + '__format-inputs'">
+            <view
+              v-for="(item, index) in formatList"
+              :key="index"
+              :class="
+                classPrefix + '__format-input ' + classPrefix + '__format-input--' + (index === formatList.length - 1 && formatList.length === 2 ? 'fixed' : 'base')
+              "
+            >
+              {{ item }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="innerSwatchList.length"
+        :class="classPrefix + '__swatches-wrap'"
+      >
+        <view :class="classPrefix + '__swatches'">
+          <view
+            v-if="isMultiple"
+            :class="classPrefix + '__swatches-title'"
+          >
+            系统预设色彩
+          </view>
+          <view :class="classPrefix + '__swatches-items'">
+            <view
+              v-for="(swatch, index) in innerSwatchList"
+              :key="index"
+              :class="classPrefix + '__swatches-item'"
+              :data-value="swatch"
+              @click.stop.prevent="clickSwatch"
+            >
+              <view
+                :class="classPrefix + '__swatches-inner'"
+                :style="'background-color: ' + swatch + ';'"
+              />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import utils from '../common/utils.wxs';
+import props from './template.props';
+import { getRect } from '../common/utils';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'onTouchStart',
+    'onTouchMove',
+    'onTouchEnd',
+    'clickSwatch',
+  ],
+  data() {
+    return {
+      utils,
+    };
+  },
+  methods: {
+    onTouchStart(...args) {
+      this.$emit('onTouchStart', ...args);
+    },
+    onTouchMove(...args) {
+      this.$emit('onTouchMove', ...args);
+    },
+    onTouchEnd(...args) {
+      this.$emit('onTouchEnd', ...args);
+    },
+    clickSwatch(...args) {
+      this.$emit('clickSwatch', ...args);
+    },
+    getRect(selector, needAll, useH5Origin) {
+      return getRect(this, selector, needAll, useH5Origin);
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import './color-picker.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/color-picker/type.ts b/packages/tdesign-uniapp/components/color-picker/type.ts
new file mode 100644
index 000000000..2583507f3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/type.ts
@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+
+export interface TdColorPickerProps {
+  /**
+   * 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
+   * @default RGB
+   */
+  format?: 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS';
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+   */
+  swatchColors?: Array<string> | null | undefined;
+  /**
+   * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
+   * @default base
+   */
+  type?: TypeEnum;
+  /**
+   * 是否使用弹出层包裹颜色选择器
+   * @default false
+   */
+  usePopup?: boolean;
+  /**
+   * 色值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
+  /**
+   * 是否显示颜色选择器。`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (context: { value: string; context: { color: ColorObject; trigger: ColorPickerChangeTrigger } }) => void;
+  /**
+   * 关闭按钮时触发
+   */
+  onClose?: (context: { trigger: ColorPickerTrigger }) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
+}
+
+export type TypeEnum = 'base' | 'multiple';
+
+export type ColorPickerChangeTrigger = 'palette-hue-bar' | 'palette-alpha-bar' | 'preset';
+
+export type ColorPickerTrigger = 'overlay';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  value: number;
+}
diff --git a/packages/tdesign-uniapp/components/color-picker/utils.js b/packages/tdesign-uniapp/components/color-picker/utils.js
new file mode 100644
index 000000000..c985ed7d5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/color-picker/utils.js
@@ -0,0 +1 @@
+export * from '../common/shared/color-picker/index';
diff --git a/packages/tdesign-uniapp/components/common/bus.js b/packages/tdesign-uniapp/components/common/bus.js
new file mode 100644
index 000000000..8535007c6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/bus.js
@@ -0,0 +1,84 @@
+export default class Bus {
+  constructor() {
+    this.listeners = new Map();
+    this.emitted = new Map(); // 改为Map存储事件参数
+    this.onceListeners = new Map();
+  }
+
+  on(evtName, listener) {
+    const target = this.listeners.get(evtName) || [];
+    target.push(listener);
+    this.listeners.set(evtName, target);
+
+    // 如果事件已触发过，用保存的参数立即执行
+    if (this.emitted.has(evtName)) {
+      listener(...this.emitted.get(evtName));
+    }
+  }
+
+  once(evtName, listener) {
+    // 如果事件已经触发过，立即执行并返回
+    if (this.emitted.has(evtName)) {
+      listener(...this.emitted.get(evtName));
+      return;
+    }
+
+    // 封装自移除函数
+    const onceWrapper = (...args) => {
+      listener(...args);
+      this.off(evtName, onceWrapper);
+    };
+
+    // 存储原始监听器用于精准移除
+    const onceMap = this.onceListeners.get(evtName) || new Map();
+    onceMap.set(listener, onceWrapper);
+    this.onceListeners.set(evtName, onceMap);
+
+    // 注册封装函数
+    this.on(evtName, onceWrapper);
+  }
+
+  emit(evtName, ...args) {
+    // 保存事件参数
+    this.emitted.set(evtName, args);
+
+    const listeners = this.listeners.get(evtName) || [];
+    // 使用副本避免执行时修改数组
+    [...listeners].forEach(func => func(...args));
+  }
+
+  off(evtName, listener) {
+    if (listener) {
+      // 处理一次性监听器的原始引用
+      const onceMap = this.onceListeners.get(evtName);
+      if (onceMap && onceMap.has(listener)) {
+        const wrapper = onceMap.get(listener);
+        this._removeListener(evtName, wrapper);
+        onceMap.delete(listener);
+        return;
+      }
+
+      // 处理普通监听器
+      this._removeListener(evtName, listener);
+    } else {
+      // 移除所有监听器
+      this.listeners.delete(evtName);
+      this.onceListeners.delete(evtName);
+      this.emitted.delete(evtName);
+    }
+  }
+
+  // 私有方法：从指定事件中移除单个监听器
+  _removeListener(evtName, listener) {
+    const listeners = this.listeners.get(evtName);
+    if (!listeners) return;
+
+    const index = listeners.indexOf(listener);
+    if (index > -1) {
+      listeners.splice(index, 1);
+      if (listeners.length === 0) {
+        this.listeners.delete(evtName);
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/canvas/index.js b/packages/tdesign-uniapp/components/common/canvas/index.js
new file mode 100644
index 000000000..1299b62c2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/canvas/index.js
@@ -0,0 +1,53 @@
+export async function loadImage({
+  canvas,
+  src,
+}) {
+  let result = null;
+  if (!src || !canvas) {
+    return result;
+  }
+
+  // #ifdef MP
+  // 小程序环境：使用 canvas.createImage
+  if (canvas.createImage) {
+    result = new Promise((resolve, reject) => {
+      const img = canvas.createImage();
+      // 必须先设置 onload 和 onerror，再设置 src
+      img.onload = () => resolve(img);
+      img.onerror = (err) => {
+        console.error('创建图片对象失败:', err);
+        reject(err);
+      };
+      img.src = src;
+    });
+  }
+  // #endif
+
+  // #ifdef APP-PLUS
+  result = new Promise((resolve) => {
+    uni.getImageInfo({
+      src,
+      success: (res) => {
+        const imgPath = res.path; // 本地临时路径
+        resolve(imgPath);
+      },
+    });
+  });
+  // #endif
+
+  // #ifdef H5
+  // H5 环境：创建 Image 对象（参考 TSX 实现）
+  result = new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = (err) => {
+      console.error('图标加载失败:', err);
+      reject(err);
+    };
+    img.src = src;
+  });
+  // #endif
+
+  return result;
+}
diff --git a/packages/tdesign-uniapp/components/common/common.ts b/packages/tdesign-uniapp/components/common/common.ts
new file mode 100644
index 000000000..11387f0e0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/common.ts
@@ -0,0 +1,173 @@
+export type Classes = Array<string>;
+
+export interface Styles {
+  [css: string]: string | number;
+}
+
+export type ImageEvent = any;
+
+export type PlainObject = { [key: string]: any };
+
+export type OptionData = {
+  label?: string;
+  value?: string | number;
+} & PlainObject;
+
+export type TreeOptionData<T = string | number> = {
+  children?: Array<TreeOptionData<T>> | boolean;
+  /** option label content */
+  label?: string;
+  /** option search text */
+  text?: string;
+  /** option value */
+  value?: T;
+  /** option node content */
+  content?: string;
+} & PlainObject;
+
+export type FormResetEvent = Event;
+
+export type FormSubmitEvent = Event;
+
+/**
+ * 移除 on 前缀并可选地去掉可选修饰符
+ * @param T - 原始类型
+ * @param MakeRequired - 是否将属性变为必需（默认 false）
+ */
+export type TransformEventHandlers<
+  T,
+  MakeRequired extends boolean = false
+> = MakeRequired extends true
+  ? {
+    [K in keyof T as K extends `on${infer Event}`
+      ? Uncapitalize<Event>
+      : never
+    ]-?: T[K]
+  }
+  : {
+    [K in keyof T as K extends `on${infer Event}`
+      ? Uncapitalize<Event>
+      : never
+    ]: T[K]
+  };
+
+
+type WrapWithContext<T extends (...args: any[]) => any> =
+  T extends (...args: infer P) => infer R
+    ? (context: { [K in keyof P]: P[K] }) => R
+    : never;
+
+
+export type WrapParamsWithContext<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any
+    ? WrapWithContext<T[K]>
+    : T[K];
+};
+
+
+// 提取非 on 开头的属性
+export type ExtractNonOnProps<T> = {
+  [K in keyof T as K extends `on${string}` ? never : K]: T[K]
+};
+
+export interface IsEmailOptions {
+  allow_display_name?: boolean;
+  require_display_name?: boolean;
+  allow_utf8_local_part?: boolean;
+  require_tld?: boolean;
+  allow_ip_dot?: boolean;
+  domain_specific_validation?: boolean;
+  host_blacklist?: string[];
+  ignore_max_length?: boolean;
+}
+
+export interface IsURLOptions {
+  protocols?: string[];
+  require_tld?: boolean;
+  require_protocol?: boolean;
+  require_host?: boolean;
+  require_port?: boolean;
+  require_valid_protocol?: boolean;
+  allow_underscores?: boolean;
+  host_whitelist?: (string | RegExp)[];
+  host_blacklist?: (string | RegExp)[];
+  allow_trailing_dot?: boolean;
+  allow_protocol_relative_urls?: boolean;
+  disallow_auth?: boolean;
+  validate_length?: boolean;
+}
+/**
+ * 通用全局类型
+ * */
+export type SizeEnum = 'small' | 'medium' | 'large';
+
+export type ShapeEnum = 'circle' | 'round';
+
+export type HorizontalAlignEnum = 'left' | 'center' | 'right';
+
+export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
+
+export type LayoutEnum = 'vertical' | 'horizontal';
+
+export type ClassName = { [className: string]: any } | ClassName[] | string;
+
+export type CSSSelector = string;
+
+export interface KeysType {
+  value?: string;
+  label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
+}
+
+export interface HTMLElementAttributes {
+  [attribute: string]: string;
+}
+
+export interface TScroll {
+  /**
+   * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
+   * @default 20
+   */
+  bufferSize?: number;
+  /**
+   * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
+   * @default false
+   */
+  isFixedRowHeight?: boolean;
+  /**
+   * 行高，不会给元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑
+   */
+  rowHeight?: number;
+  /**
+   * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动
+   * @default 100
+   */
+  threshold?: number;
+  /**
+   * 滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性
+   */
+  type: 'lazy' | 'virtual';
+}
+
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;
+
+export interface ScrollToElementParams {
+  /** 跳转元素下标 */
+  index?: number;
+  /** 跳转元素距离顶部的距离 */
+  top?: number;
+  /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
+  time?: number;
+  behavior?: 'auto' | 'smooth';
+}
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/common/config.js b/packages/tdesign-uniapp/components/common/config.js
new file mode 100644
index 000000000..79606c462
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/config.js
@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {};
+  },
+  prefix: 't',
+};
+export const prefix = 't';
+
+export const ISOLATED_RELATION_KEY = '-1';
diff --git a/packages/tdesign-uniapp/components/common/dom/index.js b/packages/tdesign-uniapp/components/common/dom/index.js
new file mode 100644
index 000000000..d0f058608
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/dom/index.js
@@ -0,0 +1 @@
+export { selectComponent } from './select-component';
diff --git a/packages/tdesign-uniapp/components/common/dom/select-component.js b/packages/tdesign-uniapp/components/common/dom/select-component.js
new file mode 100644
index 000000000..f71ced739
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/dom/select-component.js
@@ -0,0 +1,26 @@
+export function selectComponent(context, selector) {
+  if (!selector || !context) return;
+
+  if (typeof selector === 'function') {
+    return selector(context);
+  }
+
+  let attribute = selector;
+  if (attribute.match(/^[^\w]/)) {
+    attribute = attribute.slice(1);
+  }
+
+  if (
+    context.$refs && context.$refs[attribute]) {
+    return context.$refs[attribute];
+  }
+
+  if (context && typeof context.$selectComponent === 'function') {
+    const res =  context.$selectComponent(selector);
+    return res;
+  }
+
+  return context && context.selectComponent && context.selectComponent(selector);
+}
+
+
diff --git a/packages/tdesign-uniapp/components/common/event/dynamic.js b/packages/tdesign-uniapp/components/common/event/dynamic.js
new file mode 100644
index 000000000..3d8a4b8aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/event/dynamic.js
@@ -0,0 +1,10 @@
+/**
+ * 解析事件里的动态函数名，这种没有()的函数名，在uniapp不被执行
+ * 比如：<view bindtap="{{openId==undefined?'denglu':'hy_to'}}">立即</view>
+ * @param {*} exp
+ */
+export function parseEventDynamicCode(e, exp, ...args) {
+  if (typeof(this[exp]) === 'function') {
+    this[exp](e, ...args);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/functional/mixin.js b/packages/tdesign-uniapp/components/common/functional/mixin.js
new file mode 100644
index 000000000..bbda34303
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/functional/mixin.js
@@ -0,0 +1,51 @@
+function formatPropKey(key) {
+  return key.replace(/^(\w)/, (a, b) => `data${b.toUpperCase()}`);
+}
+
+
+function getPropsWatch(props) {
+  const watchProps = Object.keys(props).reduce((acc, item) => {
+    acc[item] = {
+      handler(val) {
+        this[formatPropKey(item)] = val;
+      },
+    };
+    return acc;
+  }, {});
+  return watchProps;
+}
+
+
+function getPropsData(context, props) {
+  const propsData = Object.keys(props).reduce((acc, item) => {
+    acc[formatPropKey(item)] = context[item];
+    return acc;
+  }, {});
+  return propsData;
+}
+
+
+function setPropsToData(data) {
+  Object.keys(data).forEach((key) => {
+    this[formatPropKey(key)] = data[key];
+  });
+}
+
+
+export function getFunctionalMixin(dialogProps) {
+  return {
+    data() {
+      return {
+        ...getPropsData(this, dialogProps),
+      };
+    },
+    watch: {
+      ...getPropsWatch(dialogProps),
+    },
+    methods: {
+      setData(data) {
+        setPropsToData.call(this, data);
+      },
+    },
+  };
+}
diff --git a/packages/tdesign-uniapp/components/common/relation/index.js b/packages/tdesign-uniapp/components/common/relation/index.js
new file mode 100644
index 000000000..039e98233
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/relation/index.js
@@ -0,0 +1,6 @@
+export { RELATION_MAP } from './parent-map';
+
+export {
+  ChildrenMixin,
+  ParentMixin,
+} from './relation';
diff --git a/packages/tdesign-uniapp/components/common/relation/parent-map.js b/packages/tdesign-uniapp/components/common/relation/parent-map.js
new file mode 100644
index 000000000..1118050a0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/relation/parent-map.js
@@ -0,0 +1,24 @@
+export const RELATION_MAP = {
+  CollapsePanel: 'Collapse',
+  TabPanel: 'Tabs',
+
+  StepItem: 'Steps',
+  TabBarItem: 'TabBar',
+  SideBarItem: 'SideBar',
+  GridItem: 'Grid',
+  DropdownItem: 'DropdownMenu',
+
+  Radio: 'RadioGroup',
+  Checkbox: 'CheckboxGroup',
+  Cell: 'CellGroup',
+  Avatar: 'AvatarGroup',
+  PickerItem: 'Picker',
+
+  IndexesAnchor: 'Indexes',
+  SwiperNav: 'Swiper',
+
+  Col: 'Row',
+  BackTop: 'PullDownRefresh',
+
+  FormItem: 'Form',
+};
diff --git a/packages/tdesign-uniapp/components/common/relation/relation.js b/packages/tdesign-uniapp/components/common/relation/relation.js
new file mode 100644
index 000000000..9a45a9dc4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/relation/relation.js
@@ -0,0 +1,213 @@
+// #ifdef H5
+// import { sortChildren } from '../../common/dom/vnodes-h5';
+// #endif
+// #ifndef H5
+// import { sortMPChildren } from '../../common/dom/vnodes-mp';
+// #endif
+
+function findNearListParent(children = [], name) {
+  let temp;
+  for (const item of children) {
+    // console.log('__nodeId__', item, item.$options.name, parentRelationKey, thisRelationKey);
+    const parentRelationKey = item.$props && item.$props.relationKey;
+    const thisRelationKey = this.$props && this.$props.relationKey;
+    if (item.$options.name === name && parentRelationKey === thisRelationKey) {
+      temp = item;
+    }
+    if (item === this && temp) {
+      // console.log('item === this', item);
+      return temp;
+    }
+    const foundInChildren = findNearListParent.call(this, item.$children, name);
+    if (foundInChildren) {
+      return foundInChildren;
+    }
+  }
+
+  return temp;
+}
+
+
+function getParentInToutiao(name) {
+  let parent = this.$parent;
+  if (!parent) {
+    const pages = getCurrentPages();
+    parent = pages[pages.length - 1]?.$vm;
+  }
+
+  if (parent && !parent.$parent) {
+    const children = parent.$children;
+    if (!children || !children.length) return;
+    const result = findNearListParent.call(this, children, name);
+    // const result2 = children.find(item => item.$options.name === name);
+    // console.log('result2', result2, result2.__nodeId__);
+    // console.log('result', result, result.__nodeId__);
+    return result;
+  }
+}
+
+
+function getParent(name = '') {
+  const found = getParentInToutiao.call(this, name);
+  if (found) {
+    return found;
+  }
+
+  let parent = this.$parent;
+
+  if (!parent) {
+    return;
+  }
+
+  let parentName = parent.$options.name;
+  while (parentName !== name) {
+    parent = parent.$parent;
+    if (!parent) return false;
+    parentName = parent.$options.name;
+  }
+  return parent;
+}
+
+
+export function ChildrenMixin(parent, options = {}) {
+  const indexKey = options.indexKey || 'index';
+
+  return {
+    inject: {
+      // #ifndef MP-TOUTIAO
+      [parent]: {
+        default: null,
+      },
+      // #endif
+    },
+    data() {
+      return {
+        // #ifdef MP-TOUTIAO
+        [parent]: null,
+        // #endif
+      };
+    },
+    computed: {
+      // 会造成循环引用
+      // parent() {
+      //   if (this.disableBindRelation) {
+      //     return null;
+      //   }
+
+      //   return this[parent];
+      // },
+
+      [indexKey]() {
+        const that = this;
+
+        that.bindRelation();
+
+        if (that[parent]) {
+          return that[parent].children.indexOf(this);
+        }
+
+        return null;
+      },
+    },
+
+    watch: {
+      disableBindRelation(val) {
+        const that = this;
+        if (!val) {
+          that.bindRelation();
+        }
+      },
+    },
+
+    created() {
+      // 循环引用调试代码
+      // this[parent].children.push(this);
+      // #ifndef H5
+      const that = this;
+      that.bindRelation();
+      // #endif
+    },
+
+
+    mounted() {
+      // #ifdef H5
+      const that = this;
+      that.bindRelation();
+      // #endif
+    },
+
+    // #ifdef VUE2
+    beforeDestroy() {
+      const that = this;
+      that.onBeforeMount();
+    },
+    // #endif
+
+    // #ifdef VUE3
+    beforeUnmount() {
+      const that = this;
+      that.onBeforeMount();
+    },
+    // #endif
+
+    methods: {
+      bindRelation() {
+        // #ifdef MP-TOUTIAO
+        const parentComponentName = `T${parent}`;
+        this[parent] = getParent.call(this, parentComponentName);
+        // #endif
+        if (!this[parent] || (this[parent].children && this[parent].children.indexOf(this) !== -1)) {
+          return;
+        }
+
+        const children = [...(this[parent].children || []), this];
+
+
+        // #ifdef H5
+        try {
+          // sortChildren(children, this[parent]);
+        } catch (err) {
+          console.log('err', err);
+        }
+        // #endif
+
+        // #ifndef H5
+        // sortMPChildren(children);
+        // #endif
+
+        this[parent].children = children;
+        this.innerAfterLinked?.(this);
+        this[parent].innerAfterLinked?.(this);
+
+        // console.log('bindRelation.children', children);
+      },
+      onBeforeMount() {
+        const that = this;
+        if (that[parent]) {
+          that[parent].children = that[parent].children.filter(item => item !== that);
+          this[parent].innerAfterUnLinked?.(this);
+          this.innerAfterUnLinked?.(this);
+
+          that?.destroyCallback?.();
+        }
+      },
+    },
+  };
+}
+
+export function ParentMixin(parent) {
+  return {
+    provide() {
+      return {
+        [parent]: this,
+      };
+    },
+
+    data() {
+      return {
+        // 会造成循环引用
+        // children: [],
+      };
+    },
+  };
+}
diff --git a/packages/tdesign-uniapp/components/common/runtime/index.js b/packages/tdesign-uniapp/components/common/runtime/index.js
new file mode 100644
index 000000000..4b4f3d532
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/runtime/index.js
@@ -0,0 +1,5 @@
+export function initTDesign() {
+  return {
+  };
+}
+
diff --git a/packages/tdesign-uniapp/components/common/runtime/relation.js b/packages/tdesign-uniapp/components/common/runtime/relation.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/common/runtime/wxs-polyfill.js b/packages/tdesign-uniapp/components/common/runtime/wxs-polyfill.js
new file mode 100644
index 000000000..5c972ee8b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/runtime/wxs-polyfill.js
@@ -0,0 +1,16 @@
+function getRegExp() {
+  const args = Array.prototype.slice.call(arguments);
+  args.unshift(RegExp);
+  return new (Function.prototype.bind.apply(RegExp, args))();
+}
+
+/**
+ * wxs getDate
+ */
+function getDate() {
+  const args = Array.prototype.slice.call(arguments);
+  args.unshift(Date);
+  return new (Function.prototype.bind.apply(Date, args))();
+}
+
+export { getDate, getRegExp };
diff --git a/packages/tdesign-uniapp/components/common/shared/calendar/index.ts b/packages/tdesign-uniapp/components/common/shared/calendar/index.ts
new file mode 100644
index 000000000..c369c6b2e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/calendar/index.ts
@@ -0,0 +1,145 @@
+import { getDateRect, isSameDate, getMonthDateRect, isValidDate, getDate } from '../date';
+import type { TDate, TDateType, TCalendarType, TCalendarValue } from './type';
+
+export default class TCalendar {
+  firstDayOfWeek: number;
+
+  value: TCalendarValue | TCalendarValue[];
+
+  type: TCalendarType = 'single';
+
+  minDate: Date;
+
+  maxDate: Date;
+
+  format: (day: TDate) => TDate;
+
+  constructor(options = {}) {
+    Object.assign(this, options);
+
+    if (!this.minDate) this.minDate = getDate();
+    if (!this.maxDate) this.maxDate = getDate(6);
+  }
+
+  getTrimValue() {
+    const { value, type } = this;
+    const format = (val) => {
+      if (val instanceof Date) return val;
+      if (typeof val === 'number') return new Date(val);
+      return new Date();
+    };
+    if (type === 'single' && isValidDate(value)) return format(value);
+
+    if (type === 'multiple' || type === 'range') {
+      if (Array.isArray(value)) {
+        const isValid = value.every((item) => isValidDate(item));
+        return isValid ? value.map((item) => format(item)) : [];
+      }
+      return [];
+    }
+  }
+
+  getDays(weekdays: string[]) {
+    const ans = [];
+    let i = this.firstDayOfWeek % 7;
+
+    while (ans.length < 7) {
+      ans.push(weekdays[i]);
+      i = (i + 1) % 7;
+    }
+
+    return ans;
+  }
+
+  getMonths() {
+    const ans = [];
+    const selectedDate = this.getTrimValue();
+    const { minDate, maxDate, type, format } = this;
+    const minDateRect = getDateRect(minDate);
+    let { year: minYear, month: minMonth } = minDateRect;
+    const { time: minTime } = minDateRect;
+    const { year: maxYear, month: maxMonth, time: maxTime } = getDateRect(maxDate);
+    const calcType = (year: number, month: number, date: number): TDateType => {
+      const curDate = new Date(year, month, date, 23, 59, 59);
+
+      if (type === 'single' && selectedDate) {
+        if (isSameDate({ year, month, date }, selectedDate as Date)) return 'selected';
+      }
+      if (type === 'multiple' && selectedDate) {
+        const hit = (selectedDate as Date[]).some((item: Date) => isSameDate({ year, month, date }, item));
+        if (hit) {
+          return 'selected';
+        }
+      }
+      if (type === 'range' && selectedDate) {
+        if (Array.isArray(selectedDate)) {
+          const [startDate, endDate] = selectedDate;
+
+          if (startDate && isSameDate({ year, month, date }, startDate)) return 'start';
+          if (endDate && isSameDate({ year, month, date }, endDate)) return 'end';
+          if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime())
+            return 'centre';
+        }
+      }
+
+      const minCurDate = new Date(year, month, date, 0, 0, 0);
+      if (curDate.getTime() < minTime || minCurDate.getTime() > maxTime) {
+        return 'disabled';
+      }
+      return '';
+    };
+
+    while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
+      const target = getMonthDateRect(new Date(minYear, minMonth, 1));
+      const months: TDate[] = [];
+      for (let i = 1; i <= 31; i += 1) {
+        if (i > target.lastDate) break;
+        const dateObj: TDate = {
+          date: new Date(minYear, minMonth, i),
+          day: i,
+          type: calcType(minYear, minMonth, i),
+        };
+        months.push(format ? format(dateObj) : dateObj);
+      }
+      ans.push({
+        year: minYear,
+        month: minMonth,
+        months,
+        weekdayOfFirstDay: target.weekdayOfFirstDay,
+      });
+      const curDate = getDateRect(new Date(minYear, minMonth + 1, 1));
+      minYear = curDate.year;
+      minMonth = curDate.month;
+    }
+
+    return ans;
+  }
+
+  select({ cellType, year, month, date }) {
+    const { type } = this;
+    const selectedDate = this.getTrimValue();
+    if (cellType === 'disabled') return;
+    const selected = new Date(year, month, date);
+
+    this.value = selected;
+
+    if (type === 'range' && Array.isArray(selectedDate)) {
+      if (selectedDate.length === 1 && selected > selectedDate[0]) {
+        this.value = [selectedDate[0], selected];
+      } else {
+        this.value = [selected];
+      }
+    } else if (type === 'multiple' && Array.isArray(selectedDate)) {
+      const newVal = [...selectedDate];
+      const index = selectedDate.findIndex((item: Date) => isSameDate(item, selected));
+      if (index > -1) {
+        newVal.splice(index, 1);
+      } else {
+        newVal.push(selected);
+      }
+      this.value = newVal;
+    }
+
+    return this.value;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/shared/calendar/type.ts b/packages/tdesign-uniapp/components/common/shared/calendar/type.ts
new file mode 100644
index 000000000..365a11100
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/calendar/type.ts
@@ -0,0 +1,14 @@
+export type TCalendarValue = number | Date;
+
+export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
+
+export type TCalendarType = 'single' | 'multiple' | 'range';
+
+export interface TDate {
+  date: Date;
+  day: number;
+  type: TDateType;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+}
diff --git a/packages/tdesign-uniapp/components/common/shared/color-picker/cmyk.ts b/packages/tdesign-uniapp/components/common/shared/color-picker/cmyk.ts
new file mode 100644
index 000000000..d367d03b2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/color-picker/cmyk.ts
@@ -0,0 +1,89 @@
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export const rgb2cmyk = (red: number, green: number, blue: number) => {
+  let computedC = 0;
+  let computedM = 0;
+  let computedY = 0;
+  let computedK = 0;
+
+  const r = parseInt(`${red}`.replace(/\s/g, ''), 10);
+  const g = parseInt(`${green}`.replace(/\s/g, ''), 10);
+  const b = parseInt(`${blue}`.replace(/\s/g, ''), 10);
+
+  if (r === 0 && g === 0 && b === 0) {
+    computedK = 1;
+    return [0, 0, 0, 1];
+  }
+
+  computedC = 1 - r / 255;
+  computedM = 1 - g / 255;
+  computedY = 1 - b / 255;
+
+  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = (computedC - minCMY) / (1 - minCMY);
+  computedM = (computedM - minCMY) / (1 - minCMY);
+  computedY = (computedY - minCMY) / (1 - minCMY);
+  computedK = minCMY;
+
+  return [computedC, computedM, computedY, computedK];
+};
+
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
+  let c = cyan / 100;
+  let m = magenta / 100;
+  let y = yellow / 100;
+  const k = black / 100;
+
+  c = c * (1 - k) + k;
+  m = m * (1 - k) + k;
+  y = y * (1 - k) + k;
+
+  let r = 1 - c;
+  let g = 1 - m;
+  let b = 1 - y;
+
+  r = Math.round(255 * r);
+  g = Math.round(255 * g);
+  b = Math.round(255 * b);
+  return {
+    r,
+    g,
+    b,
+  };
+};
+
+const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
+
+const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
+
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export const cmykInputToColor = (input: string) => {
+  if (/cmyk/i.test(input)) {
+    const str = input.replace(/\s/g, '');
+    const match = str.match(REG_CMYK_STRING);
+    const c = toNumber(match[1]);
+    const m = toNumber(match[2]);
+    const y = toNumber(match[3]);
+    const k = toNumber(match[4]);
+    const { r, g, b } = cmyk2rgb(c, m, y, k);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  return input;
+};
diff --git a/packages/tdesign-uniapp/components/common/shared/color-picker/color.ts b/packages/tdesign-uniapp/components/common/shared/color-picker/color.ts
new file mode 100644
index 000000000..13b423ed5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/color-picker/color.ts
@@ -0,0 +1,478 @@
+import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
+import { cmykInputToColor, rgb2cmyk } from './cmyk';
+import { parseGradientString, type GradientColors, type GradientColorPoint, isGradientColor } from './gradient';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  saturation: number;
+  value: number;
+  isGradient: boolean;
+  linearGradient?: string;
+}
+
+interface ColorStates {
+  s: number;
+  v: number;
+  h: number;
+  a: number;
+}
+
+interface GradientStates {
+  colors: GradientColorPoint[];
+  degree: number;
+  selectedId: string;
+  css?: string;
+}
+
+const mathRound = Math.round;
+const hsv2rgba = (states: ColorStates): tinyColor.ColorFormats.RGBA => tinyColor(states).toRgb();
+const hsv2hsva = (states: ColorStates): tinyColor.ColorFormats.HSVA => tinyColor(states).toHsv();
+const hsv2hsla = (states: ColorStates): tinyColor.ColorFormats.HSLA => tinyColor(states).toHsl();
+
+/**
+ * 将渐变对象转换成字符串
+ * @param object
+ * @returns
+ */
+export const gradientColors2string = (object: GradientColors): string => {
+  const { points, degree } = object;
+  const colorsStop = points
+    .sort((pA, pB) => pA.left - pB.left)
+    .map(p => `${p.color} ${Math.round(p.left * 100) / 100}%`);
+
+  return `linear-gradient(${degree}deg,${colorsStop.join(',')})`;
+};
+
+/**
+ * 去除颜色的透明度
+ * @param color
+ * @returns
+ */
+export const getColorWithoutAlpha = (color: string) => tinyColor(color).setAlpha(1)
+  .toHexString();
+
+// 生成一个随机ID
+export const genId = () => (1 + Math.random() * 4294967295).toString(16);
+
+/**
+ * 生成一个渐变颜色
+ * @param left
+ * @param color
+ * @returns
+ */
+export const genGradientPoint = (left: number, color: string): GradientColorPoint => ({
+  id: genId(),
+  left,
+  color,
+});
+
+export class Color {
+  states: ColorStates = {
+    s: 100,
+    v: 100,
+    h: 100,
+    a: 1,
+  };
+
+  originColor: string;
+
+  isGradient: boolean;
+
+  gradientStates: GradientStates = {
+    colors: [],
+    degree: 0,
+    selectedId: null,
+    css: '',
+  };
+
+  constructor(input: string) {
+    this.update(input);
+  }
+
+  update(input: string) {
+    const gradientColors = parseGradientString(input);
+    if (this.isGradient && !gradientColors) {
+      // 处理gradient模式下切换不同格式时的交互问题，输入的不是渐变字符串才使用当前处理
+      const colorHsv = tinyColor(input).toHsv();
+      this.states = colorHsv;
+      this.updateCurrentGradientColor();
+      return;
+    }
+    this.originColor = input;
+    this.isGradient = false;
+    let colorInput = input;
+    if (gradientColors) {
+      this.isGradient = true;
+      const object = gradientColors as GradientColors;
+      const points = object.points.map(c => genGradientPoint(c.left, c.color));
+      this.gradientStates = {
+        colors: points,
+        degree: object.degree,
+        selectedId: points[0]?.id || null,
+      };
+      this.gradientStates.css = this.linearGradient;
+      colorInput = this.gradientSelectedPoint?.color;
+    }
+
+    this.updateStates(colorInput);
+  }
+
+  get saturation() {
+    return this.states.s;
+  }
+
+  set saturation(value) {
+    this.states.s = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get value() {
+    return this.states.v;
+  }
+
+  set value(value) {
+    this.states.v = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get hue() {
+    return this.states.h;
+  }
+
+  set hue(value) {
+    this.states.h = Math.max(0, Math.min(360, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get alpha() {
+    return this.states.a;
+  }
+
+  set alpha(value) {
+    this.states.a = Math.max(0, Math.min(1, Math.round(value * 100) / 100));
+    this.updateCurrentGradientColor();
+  }
+
+  get rgb() {
+    const { r, g, b } = hsv2rgba(this.states);
+    return `rgb(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)})`;
+  }
+
+  get rgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return `rgba(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)}, ${a})`;
+  }
+
+  get hsv() {
+    const { h, s, v } = this.getHsva();
+    return `hsv(${h}, ${s}%, ${v}%)`;
+  }
+
+  get hsva() {
+    const { h, s, v, a } = this.getHsva();
+    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+  }
+
+  get hsl() {
+    const { h, s, l } = this.getHsla();
+    return `hsl(${h}, ${s}%, ${l}%)`;
+  }
+
+  get hsla() {
+    const { h, s, l, a } = this.getHsla();
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  get hex() {
+    return tinyColor(this.states).toHexString();
+  }
+
+  get hex8() {
+    return tinyColor(this.states).toHex8String();
+  }
+
+  get cmyk() {
+    const { c, m, y, k } = this.getCmyk();
+    return `cmyk(${c}, ${m}, ${y}, ${k})`;
+  }
+
+  get css() {
+    if (this.isGradient) {
+      return this.linearGradient;
+    }
+    return this.rgba;
+  }
+
+  get linearGradient() {
+    const { gradientColors, gradientDegree } = this;
+    return gradientColors2string({
+      points: gradientColors,
+      degree: gradientDegree,
+    });
+  }
+
+  get gradientColors() {
+    return this.gradientStates.colors;
+  }
+
+  set gradientColors(colors: GradientColorPoint[]) {
+    this.gradientStates.colors = colors;
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedId() {
+    return this.gradientStates.selectedId;
+  }
+
+  set gradientSelectedId(id: string) {
+    if (id === this.gradientSelectedId) {
+      return;
+    }
+    this.gradientStates.selectedId = id;
+    this.updateStates(this.gradientSelectedPoint?.color);
+  }
+
+  get gradientDegree() {
+    return this.gradientStates.degree;
+  }
+
+  set gradientDegree(degree: number) {
+    this.gradientStates.degree = Math.max(0, Math.min(360, degree));
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedPoint() {
+    const { gradientColors, gradientSelectedId } = this;
+    return gradientColors.find(color => color.id === gradientSelectedId);
+  }
+
+  getFormatsColorMap() {
+    return {
+      HEX: this.hex,
+      CMYK: this.cmyk,
+      RGB: this.rgb,
+      RGBA: this.rgba,
+      HSL: this.hsl,
+      HSLA: this.hsla,
+      HSV: this.hsv,
+      HSVA: this.hsva,
+      CSS: this.css,
+      HEX8: this.hex8,
+    };
+  }
+
+  updateCurrentGradientColor() {
+    const { isGradient, gradientColors, gradientSelectedId } = this;
+    const { length } = gradientColors;
+    const current = this.gradientSelectedPoint;
+    if (!isGradient || length === 0 || !current) {
+      return false;
+    }
+    const index = gradientColors.findIndex(color => color.id === gradientSelectedId);
+    const newColor = {
+      ...current,
+      color: this.rgba,
+    };
+    gradientColors.splice(index, 1, newColor);
+    this.gradientColors = gradientColors.slice();
+    return this;
+  }
+
+  updateStates(input: string) {
+    const color = tinyColor(cmykInputToColor(input));
+    const hsva = color.toHsv();
+    this.states = hsva;
+  }
+
+  getRgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return {
+      r: mathRound(r),
+      g: mathRound(g),
+      b: mathRound(b),
+      a,
+    };
+  }
+
+  getCmyk() {
+    const { r, g, b } = this.getRgba();
+    const [c, m, y, k] = rgb2cmyk(r, g, b);
+    return {
+      c: mathRound(c * 100),
+      m: mathRound(m * 100),
+      y: mathRound(y * 100),
+      k: mathRound(k * 100),
+    };
+  }
+
+  getHsva(): tinyColor.ColorFormats.HSVA {
+    let { h, s, v, a } = hsv2hsva(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    v = mathRound(v * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      v,
+      a,
+    };
+  }
+
+  getHsla(): tinyColor.ColorFormats.HSLA {
+    let { h, s, l, a } = hsv2hsla(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    l = mathRound(l * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      l,
+      a,
+    };
+  }
+
+  /**
+   * 判断输入色是否与当前色相同
+   * @param color
+   * @returns
+   */
+  equals(color: string): boolean {
+    return tinyColor.equals(this.rgba, color);
+  }
+
+  /**
+   * 校验输入色是否是一个有效颜色
+   * @param color
+   * @returns
+   */
+  static isValid(color: string): boolean {
+    if (parseGradientString(color)) {
+      return true;
+    }
+    return tinyColor(color).isValid();
+  }
+
+  static hsva2color(h: number, s: number, v: number, a: number) {
+    return tinyColor({
+      h,
+      s,
+      v,
+      a,
+    }).toHsvString();
+  }
+
+  static hsla2color(h: number, s: number, l: number, a: number) {
+    return tinyColor({
+      h,
+      s,
+      l,
+      a,
+    }).toHslString();
+  }
+
+  static rgba2color(r: number, g: number, b: number, a: number) {
+    return tinyColor({
+      r,
+      g,
+      b,
+      a,
+    }).toHsvString();
+  }
+
+  static hex2color(hex: string, a: number) {
+    const color = tinyColor(hex);
+    color.setAlpha(a);
+    return color.toHexString();
+  }
+
+  /**
+   * 对象转颜色字符串
+   * @param object
+   * @param format
+   * @returns
+   */
+  static object2color(object: any, format: string) {
+    if (format === 'CMYK') {
+      const { c, m, y, k } = object;
+      return `cmyk(${c}, ${m}, ${y}, ${k})`;
+    }
+    const color = tinyColor(object, {
+      format,
+    });
+    return color.toRgbString();
+  }
+
+  /**
+   * 是否是渐变色
+   * @param input
+   * @returns
+   */
+  static isGradientColor = (input: string) => !!isGradientColor(input);
+
+  /**
+   * 比较两个颜色是否相同
+   * @param color1
+   * @param color2
+   * @returns
+   */
+  static compare = (color1: string, color2: string): boolean => {
+    const isGradientColor1 = Color.isGradientColor(color1);
+    const isGradientColor2 = Color.isGradientColor(color2);
+    if (isGradientColor1 && isGradientColor2) {
+      const gradientColor1 = gradientColors2string(parseGradientString(color1) as GradientColors);
+      const gradientColor2 = gradientColors2string(parseGradientString(color2) as GradientColors);
+      return gradientColor1 === gradientColor2;
+    }
+    if (!isGradientColor1 && !isGradientColor2) {
+      return tinyColor.equals(color1, color2);
+    }
+    return false;
+  };
+}
+
+const COLOR_OBJECT_OUTPUT_KEYS = [
+  'alpha',
+  'css',
+  'hex',
+  'hex8',
+  'hsl',
+  'hsla',
+  'hsv',
+  'hsva',
+  'rgb',
+  'rgba',
+  'saturation',
+  'value',
+  'isGradient',
+];
+
+/**
+ * 获取对外输出的color对象
+ * @param color
+ * @returns
+ */
+export const getColorObject = (color: Color): ColorObject => {
+  if (!color) {
+    return null;
+  }
+  const colorObject = Object.create(null);
+  // eslint-disable-next-line no-return-assign
+  COLOR_OBJECT_OUTPUT_KEYS.forEach(key => (colorObject[key] = color[key]));
+  if (color.isGradient) {
+    colorObject.linearGradient = color.linearGradient;
+  }
+  return colorObject;
+};
+
+export default Color;
diff --git a/packages/tdesign-uniapp/components/common/shared/color-picker/gradient.ts b/packages/tdesign-uniapp/components/common/shared/color-picker/gradient.ts
new file mode 100644
index 000000000..f888ab6fe
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/color-picker/gradient.ts
@@ -0,0 +1,234 @@
+/**
+ * 用于反解析渐变字符串为对象
+ * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
+ */
+import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
+
+import { isString, isNull } from '../../validator';
+
+/**
+ * Utility combine multiple regular expressions.
+ *
+ * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
+ * @param {string} flags Normal RegExp flags.
+ */
+const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {
+  let source = '';
+  for (let i = 0; i < regexpList.length; i += 1) {
+    if (isString(regexpList[i])) {
+      source += regexpList[i];
+    } else {
+      source += (regexpList[i] as RegExp).source;
+    }
+  }
+  return new RegExp(source, flags);
+};
+
+interface RegExpLib {
+  gradientSearch: RegExp;
+  colorStopSearch: RegExp;
+}
+
+interface ColorStop {
+  color: string;
+  position?: string;
+}
+
+interface ParseGradientResult {
+  original: string;
+  colorStopList?: ColorStop[];
+  line?: string;
+  angle?: string;
+  sideCorner?: string;
+}
+
+/**
+ * Generate the required regular expressions once.
+ *
+ * Regular Expressions are easier to manage this way and can be well described.
+ *
+ * @result {object} Object containing regular expressions.
+ */
+const generateRegExp = (): RegExpLib => {
+  // Note any variables with "Capture" in name include capturing bracket set(s).
+  const searchFlags = 'gi'; // ignore case for angles, "rgb" etc
+  const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
+  // optional 2nd part
+  const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
+  const rComma = /\s*,\s*/; // Allow space around comma.
+  const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
+  const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
+  const // "(1, 2, 3)"
+    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
+  const // "(1, 2, 3, 4)"
+    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
+  const // ".9", "-5px", "100%".
+    rKeyword = /[_a-z-][_a-z0-9-]*/;
+  const // "red", "transparent".
+    rColor = combineRegExp(
+      ['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'],
+      '',
+    );
+  const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
+  const // Single Color Stop, optional %, optional length.
+    rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
+  const // List of color stops min 1.
+    rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
+  const // Angle or SideCorner
+    rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
+  const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
+    rColorStopSearch = combineRegExp(
+      ['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'],
+      searchFlags,
+    ); // Capture 1:"color" and 2:"position" (optional).
+
+  return {
+    gradientSearch: rGradientSearch,
+    colorStopSearch: rColorStopSearch,
+  };
+};
+
+/**
+ * Actually parse the input gradient parameters string into an object for reusability.
+ *
+ *
+ * @note Really this only supports the standard syntax not historical versions, see MDN for details
+ *       https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
+ *
+ * @param regExpLib
+ * @param {string} input
+ * @returns {object|undefined}
+ */
+const parseGradient = (regExpLib: RegExpLib, input: string) => {
+  let result: ParseGradientResult;
+  let matchColorStop: any;
+  let stopResult: ColorStop;
+
+  // reset search position, because we reuse regex.
+  regExpLib.gradientSearch.lastIndex = 0;
+
+  const matchGradient = regExpLib.gradientSearch.exec(input);
+  if (!isNull(matchGradient)) {
+    result = {
+      original: matchGradient[0],
+      colorStopList: [],
+    };
+
+    // Line (Angle or Side-Corner).
+    if (matchGradient[1]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.line = matchGradient[1];
+    }
+    // Angle or undefined if side-corner.
+    if (matchGradient[2]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.angle = matchGradient[2];
+    }
+    // Side-corner or undefined if angle.
+    if (matchGradient[3]) {
+      // eslint-disable-next-line prefer-destructuring
+      result.sideCorner = matchGradient[3];
+    }
+
+    // reset search position, because we reuse regex.
+    regExpLib.colorStopSearch.lastIndex = 0;
+
+    // Loop though all the color-stops.
+    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    while (!isNull(matchColorStop)) {
+      stopResult = {
+        color: matchColorStop[1],
+      };
+
+      // Position (optional).
+      if (matchColorStop[2]) {
+        // eslint-disable-next-line prefer-destructuring
+        stopResult.position = matchColorStop[2];
+      }
+      result.colorStopList.push(stopResult);
+
+      // Continue searching from previous position.
+      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    }
+  }
+
+  // Can be undefined if match not found.
+  return result;
+};
+
+export interface GradientColorPoint {
+  id?: string;
+  color?: string;
+  left?: number;
+}
+
+export interface GradientColors {
+  points: GradientColorPoint[];
+  degree: number;
+}
+
+const REGEXP_LIB = generateRegExp();
+const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
+
+/**
+ * 验证是否是渐变字符串
+ * @param input
+ * @returns
+ */
+export const isGradientColor = (input: string): null | RegExpExecArray => {
+  REG_GRADIENT.lastIndex = 0;
+  return REG_GRADIENT.exec(input);
+};
+
+// 边界字符串和角度关系
+const sideCornerDegreeMap = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+  'top left': 225,
+  'left top': 225,
+  'top right': 135,
+  'right top': 135,
+  'bottom left': 315,
+  'left bottom': 315,
+  'bottom right': 45,
+  'right bottom': 45,
+};
+
+/**
+ * 解析渐变字符串为 GradientColors 对象
+ * @param input
+ * @returns
+ */
+export const parseGradientString = (input: string): GradientColors | boolean => {
+  const match = isGradientColor(input);
+  if (!match) {
+    return false;
+  }
+  const gradientColors: GradientColors = {
+    points: [],
+    degree: 0,
+  };
+
+  const result: ParseGradientResult = parseGradient(REGEXP_LIB, match[1]);
+  if (result.original.trim() !== match[1].trim()) {
+    return false;
+  }
+  const points: GradientColorPoint[] = result.colorStopList.map(({ color, position }) => {
+    const point = Object.create(null);
+    point.color = tinyColor(color).toRgbString();
+    point.left = parseFloat(position);
+    return point;
+  });
+  gradientColors.points = points;
+  let degree = parseInt(result.angle, 10);
+  if (Number.isNaN(degree)) {
+    degree = sideCornerDegreeMap[result.sideCorner] || 90;
+  }
+  gradientColors.degree = degree;
+
+  return gradientColors;
+};
+
+export default parseGradientString;
diff --git a/packages/tdesign-uniapp/components/common/shared/color-picker/index.ts b/packages/tdesign-uniapp/components/common/shared/color-picker/index.ts
new file mode 100644
index 000000000..ad18475c0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/color-picker/index.ts
@@ -0,0 +1,3 @@
+export * from './cmyk';
+export * from './color';
+export * from './gradient';
diff --git a/packages/tdesign-uniapp/components/common/shared/date.ts b/packages/tdesign-uniapp/components/common/shared/date.ts
new file mode 100644
index 000000000..e3d2542c1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/date.ts
@@ -0,0 +1,47 @@
+export type CompareDate = Date | number | { year: number; month: number; date: number };
+
+export const getDateRect = (date: Date | number) => {
+  const _date = new Date(date);
+
+  return {
+    year: _date.getFullYear(),
+    month: _date.getMonth(),
+    date: _date.getDate(),
+    day: _date.getDay(),
+    time: _date.getTime(),
+  };
+};
+
+export const isSameDate = (date1: CompareDate, date2: CompareDate) => {
+  if (date1 instanceof Date || typeof date1 === 'number') date1 = getDateRect(date1);
+  if (date2 instanceof Date || typeof date2 === 'number') date2 = getDateRect(date2);
+  const keys = ['year', 'month', 'date'];
+  return keys.every((key) => date1[key] === date2[key]);
+};
+
+export const getMonthDateRect = (date: Date | number) => {
+  const { year, month } = getDateRect(date);
+  const firstDay = new Date(year, month, 1);
+  const weekdayOfFirstDay = firstDay.getDay();
+  const lastDate = new Date(+new Date(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
+
+  return {
+    year,
+    month,
+    weekdayOfFirstDay,
+    lastDate,
+  };
+};
+
+export const isValidDate = (val) => typeof val === 'number' || val instanceof Date;
+
+export const getDate = (...args) => {
+  const now = new Date();
+  if (args.length === 0) return now;
+  if (args.length === 1 && args[0] <= 1000) {
+    const { year, month, date } = getDateRect(now);
+    return new Date(year, month + args[0], date);
+  }
+  // eslint-disable-next-line prefer-spread
+  return Date.apply(null, args);
+};
diff --git a/packages/tdesign-uniapp/components/common/shared/qrcode/qrcodegen.ts b/packages/tdesign-uniapp/components/common/shared/qrcode/qrcodegen.ts
new file mode 100644
index 000000000..046df621a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/qrcode/qrcodegen.ts
@@ -0,0 +1,1051 @@
+/* eslint-disable */
+// Copyright (c) Project Nayuki. (MIT License)
+// https://www.nayuki.io/page/qr-code-generator-library
+
+// Modification with code reorder and prettier
+
+// --------------------------------------------
+
+// Appends the given number of low-order bits of the given value
+// to the given buffer. Requires 0 <= len <= 31 and 0 <= val < 2^len.
+function appendBits(val: number, len: number, bb: number[]): void {
+  if (len < 0 || len > 31 || val >>> len !== 0) {
+    throw new RangeError('Value out of range');
+  }
+  for (
+    let i = len - 1;
+    i >= 0;
+    i-- // Append bit by bit
+  ) {
+    bb.push((val >>> i) & 1);
+  }
+}
+
+// Returns true iff the i'th bit of x is set to 1.
+function getBit(x: number, i: number): boolean {
+  return ((x >>> i) & 1) !== 0;
+}
+
+// Throws an exception if the given condition is false.
+function assert(cond: boolean): void {
+  if (!cond) {
+    throw new Error('Assertion error');
+  }
+}
+
+/* ---- Public helper enumeration ----*/
+/*
+ * Describes how a segment's data bits are numbererpreted. Immutable.
+ */
+export class Mode {
+  /* -- Constants --*/
+
+  public static readonly NUMERIC = new Mode(0x1, [10, 12, 14]);
+
+  public static readonly ALPHANUMERIC = new Mode(0x2, [9, 11, 13]);
+
+  public static readonly BYTE = new Mode(0x4, [8, 16, 16]);
+
+  public static readonly KANJI = new Mode(0x8, [8, 10, 12]);
+
+  public static readonly ECI = new Mode(0x7, [0, 0, 0]);
+
+  /* -- Constructor and fields --*/
+
+  // The mode indicator bits, which is a unumber4 value (range 0 to 15).
+  public modeBits: number;
+
+  // Number of character count bits for three different version ranges.
+  private numBitsCharCount: [number, number, number];
+
+  private constructor(modeBits: number, numBitsCharCount: [number, number, number]) {
+    this.modeBits = modeBits;
+    this.numBitsCharCount = numBitsCharCount;
+  }
+
+  /* -- Method --*/
+
+  // (Package-private) Returns the bit width of the character count field for a segment in
+  // this mode in a QR Code at the given version number. The result is in the range [0, 16].
+  public numCharCountBits(ver: number): number {
+    return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
+  }
+}
+
+/* ---- Public helper enumeration ----*/
+
+/*
+ * The error correction level in a QR Code symbol. Immutable.
+ */
+export class Ecc {
+  /* -- Constants --*/
+
+  public static readonly LOW = new Ecc(0, 1); // The QR Code can tolerate about  7% erroneous codewords
+
+  public static readonly MEDIUM = new Ecc(1, 0); // The QR Code can tolerate about 15% erroneous codewords
+
+  public static readonly QUARTILE = new Ecc(2, 3); // The QR Code can tolerate about 25% erroneous codewords
+
+  public static readonly HIGH = new Ecc(3, 2); // The QR Code can tolerate about 30% erroneous codewords
+
+  /* -- Constructor and fields --*/
+  // In the range 0 to 3 (unsigned 2-bit numbereger).
+  public ordinal: number;
+
+  // (Package-private) In the range 0 to 3 (unsigned 2-bit numbereger).
+  public formatBits: number;
+
+  private constructor(ordinal: number, formatBits: number) {
+    this.ordinal = ordinal;
+    this.formatBits = formatBits;
+  }
+}
+
+/*
+ * A segment of character/binary/control data in a QR Code symbol.
+ * Instances of this class are immutable.
+ * The mid-level way to create a segment is to take the payload data
+ * and call a static factory function such as QrSegment.makeNumeric().
+ * The low-level way to create a segment is to custom-make the bit buffer
+ * and call the QrSegment() constructor with appropriate values.
+ * This segment class imposes no length restrictions, but QR Codes have restrictions.
+ * Even in the most favorable conditions, a QR Code can only hold 7089 characters of data.
+ * Any segment longer than this is meaningless for the purpose of generating QR Codes.
+ */
+export class QrSegment {
+  /* -- Static factory functions (mid level) --*/
+
+  // Returns a segment representing the given binary data encoded in
+  // byte mode. All input byte arrays are acceptable. Any text string
+  // can be converted to UTF-8 bytes and encoded as a byte mode segment.
+  public static makeBytes(data: Readonly<number[]>): QrSegment {
+    const bb: number[] = [];
+    for (const b of data) {
+      appendBits(b, 8, bb);
+    }
+    return new QrSegment(Mode.BYTE, data.length, bb);
+  }
+
+  // Returns a segment representing the given string of decimal digits encoded in numeric mode.
+  public static makeNumeric(digits: string): QrSegment {
+    if (!QrSegment.isNumeric(digits)) {
+      throw new RangeError('String contains non-numeric characters');
+    }
+    const bb: number[] = [];
+    for (let i = 0; i < digits.length; ) {
+      // Consume up to 3 digits per iteration
+      const n: number = Math.min(digits.length - i, 3);
+      appendBits(parseInt(digits.substring(i, i + n), 10), n * 3 + 1, bb);
+      i += n;
+    }
+    return new QrSegment(Mode.NUMERIC, digits.length, bb);
+  }
+
+  // Returns a segment representing the given text string encoded in alphanumeric mode.
+  // The characters allowed are: 0 to 9, A to Z (uppercase only), space,
+  // dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+  public static makeAlphanumeric(text: string): QrSegment {
+    if (!QrSegment.isAlphanumeric(text)) {
+      throw new RangeError('String contains unencodable characters in alphanumeric mode');
+    }
+    const bb: number[] = [];
+    let i: number;
+    for (i = 0; i + 2 <= text.length; i += 2) {
+      // Process groups of 2
+      let temp: number = QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
+      temp += QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
+      appendBits(temp, 11, bb);
+    }
+    if (i < text.length) {
+      // 1 character remaining
+      appendBits(QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
+    }
+    return new QrSegment(Mode.ALPHANUMERIC, text.length, bb);
+  }
+
+  // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
+  // The result may use various segment modes and switch modes to optimize the length of the bit stream.
+  public static makeSegments(text: string): QrSegment[] {
+    // Select the most efficient segment encoding automatically
+    if (text === '') {
+      return [];
+    }
+    if (QrSegment.isNumeric(text)) {
+      return [QrSegment.makeNumeric(text)];
+    }
+    if (QrSegment.isAlphanumeric(text)) {
+      return [QrSegment.makeAlphanumeric(text)];
+    }
+    return [QrSegment.makeBytes(QrSegment.toUtf8ByteArray(text))];
+  }
+
+  // Returns a segment representing an Extended Channel Interpretation
+  // (ECI) designator with the given assignment value.
+  public static makeEci(assignVal: number): QrSegment {
+    const bb: number[] = [];
+    if (assignVal < 0) {
+      throw new RangeError('ECI assignment value out of range');
+    } else if (assignVal < 1 << 7) {
+      appendBits(assignVal, 8, bb);
+    } else if (assignVal < 1 << 14) {
+      appendBits(0b10, 2, bb);
+      appendBits(assignVal, 14, bb);
+    } else if (assignVal < 1000000) {
+      appendBits(0b110, 3, bb);
+      appendBits(assignVal, 21, bb);
+    } else {
+      throw new RangeError('ECI assignment value out of range');
+    }
+    return new QrSegment(Mode.ECI, 0, bb);
+  }
+
+  // Tests whether the given string can be encoded as a segment in numeric mode.
+  // A string is encodable iff each character is in the range 0 to 9.
+  public static isNumeric(text: string): boolean {
+    return QrSegment.NUMERIC_REGEX.test(text);
+  }
+
+  // Tests whether the given string can be encoded as a segment in alphanumeric mode.
+  // A string is encodable iff each character is in the following set: 0 to 9, A to Z
+  // (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
+  public static isAlphanumeric(text: string): boolean {
+    return QrSegment.ALPHANUMERIC_REGEX.test(text);
+  }
+
+  /* -- Constructor (low level) and fields --*/
+  // The mode indicator of this segment.
+  public mode: Mode;
+
+  // The length of this segment's unencoded data. Measured in characters for
+  // numeric/alphanumeric/kanji mode, bytes for byte mode, and 0 for ECI mode.
+  // Always zero or positive. Not the same as the data's bit length.
+  public numChars: number;
+
+  // The data bits of this segment. Accessed through getData().
+  private bitData: number[];
+
+  // Creates a new QR Code segment with the given attributes and data.
+  // The character count (numChars) must agree with the mode and the bit buffer length,
+  // but the constranumber isn't checked. The given bit buffer is cloned and stored.
+  public constructor(mode: Mode, numChars: number, bitData: number[]) {
+    this.mode = mode;
+    this.numChars = numChars;
+    this.bitData = bitData;
+    if (numChars < 0) {
+      throw new RangeError('Invalid argument');
+    }
+    this.bitData = bitData.slice(); // Make defensive copy
+  }
+
+  /* -- Methods --*/
+
+  // Returns a new copy of the data bits of this segment.
+  public getData(): number[] {
+    return this.bitData.slice(); // Make defensive copy
+  }
+
+  // (Package-private) Calculates and returns the number of bits needed to encode the given segments at
+  // the given version. The result is infinity if a segment has too many characters to fit its length field.
+  public static getTotalBits(segs: Readonly<QrSegment[]>, version: number): number {
+    let result: number = 0;
+    for (const seg of segs) {
+      const ccbits: number = seg.mode.numCharCountBits(version);
+      if (seg.numChars >= 1 << ccbits) {
+        return Infinity; // The segment's length doesn't fit the field's bit width
+      }
+      result += 4 + ccbits + seg.bitData.length;
+    }
+    return result;
+  }
+
+  // Returns a new array of bytes representing the given string encoded in UTF-8.
+  private static toUtf8ByteArray(input: string): number[] {
+    const str = encodeURI(input);
+    const result: number[] = [];
+    for (let i = 0; i < str.length; i++) {
+      if (str.charAt(i) !== '%') {
+        result.push(str.charCodeAt(i));
+      } else {
+        result.push(parseInt(str.substring(i + 1, i + 3), 16));
+        i += 2;
+      }
+    }
+    return result;
+  }
+
+  /* -- Constants --*/
+
+  // Describes precisely all strings that are encodable in numeric mode.
+  private static readonly NUMERIC_REGEX: RegExp = /^[0-9]*$/;
+
+  // Describes precisely all strings that are encodable in alphanumeric mode.
+  private static readonly ALPHANUMERIC_REGEX: RegExp = /^[A-Z0-9 $%*+.\/:-]*$/;
+
+  // The set of all legal characters in alphanumeric mode,
+  // where each character value maps to the index in the string.
+  private static readonly ALPHANUMERIC_CHARSET: string = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:';
+}
+
+/*
+ * A QR Code symbol, which is a type of two-dimension barcode.
+ * Invented by Denso Wave and described in the ISO/IEC 18004 standard.
+ * Instances of this class represent an immutable square grid of dark and light cells.
+ * The class provides static factory functions to create a QR Code from text or binary data.
+ * The class covers the QR Code Model 2 specification, supporting all versions (sizes)
+ * from 1 to 40, all 4 error correction levels, and 4 character encoding modes.
+ *
+ * Ways to create a QR Code object:
+ * - High level: Take the payload data and call QrCode.encodeText() or QrCode.encodeBinary().
+ * - Mid level: Custom-make the list of segments and call QrCode.encodeSegments().
+ * - Low level: Custom-make the array of data codeword bytes (including
+ *   segment headers and final padding, excluding error correction codewords),
+ *   supply the appropriate version number, and call the QrCode() constructor.
+ * (Note that all ways require supplying the desired error correction level.)
+ */
+export class QrCode {
+  /* -- Static factory functions (high level) --*/
+
+  // Returns a QR Code representing the given Unicode text string at the given error correction level.
+  // As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
+  // Unicode code ponumbers (not UTF-16 code units) if the low error correction level is used. The smallest possible
+  // QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
+  // ecl argument if it can be done without increasing the version.
+  public static encodeText(text: string, ecl: Ecc): QrCode {
+    const segs: QrSegment[] = QrSegment.makeSegments(text);
+    return QrCode.encodeSegments(segs, ecl);
+  }
+
+  // Returns a QR Code representing the given binary data at the given error correction level.
+  // This function always encodes using the binary segment mode, not any text mode. The maximum number of
+  // bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
+  // The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
+  public static encodeBinary(data: Readonly<number[]>, ecl: Ecc): QrCode {
+    const seg = QrSegment.makeBytes(data);
+    return QrCode.encodeSegments([seg], ecl);
+  }
+
+  /* -- Static factory functions (mid level) --*/
+
+  // Returns a QR Code representing the given segments with the given encoding parameters.
+  // The smallest possible QR Code version within the given range is automatically
+  // chosen for the output. Iff boostEcl is true, then the ECC level of the result
+  // may be higher than the ecl argument if it can be done without increasing the
+  // version. The mask number is either between 0 to 7 (inclusive) to force that
+  // mask, or -1 to automatically choose an appropriate mask (which may be slow).
+  // This function allows the user to create a custom sequence of segments that switches
+  // between modes (such as alphanumeric and byte) to encode text in less space.
+  // This is a mid-level API; the high-level API is encodeText() and encodeBinary().
+  public static encodeSegments(
+    segs: Readonly<QrSegment[]>,
+    oriEcl: Ecc,
+    minVersion: number = 1,
+    maxVersion: number = 40,
+    mask: number = -1,
+    boostEcl: boolean = true,
+  ): QrCode {
+    if (
+      !(QrCode.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= QrCode.MAX_VERSION) ||
+      mask < -1 ||
+      mask > 7
+    ) {
+      throw new RangeError('Invalid value');
+    }
+
+    // Find the minimal version number to use
+    let version: number;
+    let dataUsedBits: number;
+    for (version = minVersion; ; version++) {
+      const dataCapacityBits = QrCode.getNumDataCodewords(version, oriEcl) * 8; // Number of data bits available
+      const usedBits: number = QrSegment.getTotalBits(segs, version);
+      if (usedBits <= dataCapacityBits) {
+        dataUsedBits = usedBits;
+        break; // This version number is found to be suitable
+      }
+      if (version >= maxVersion) {
+        // All versions in the range could not fit the given data
+        throw new RangeError('Data too long');
+      }
+    }
+    let ecl: Ecc = oriEcl;
+    // Increase the error correction level while the data still fits in the current version number
+    for (const newEcl of [Ecc.MEDIUM, Ecc.QUARTILE, Ecc.HIGH]) {
+      // From low to high
+      if (boostEcl && dataUsedBits <= QrCode.getNumDataCodewords(version, newEcl) * 8) {
+        ecl = newEcl;
+      }
+    }
+
+    // Concatenate all segments to create the data bit string
+    const bb: number[] = [];
+    for (const seg of segs) {
+      appendBits(seg.mode.modeBits, 4, bb);
+      appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
+      for (const b of seg.getData()) {
+        bb.push(b);
+      }
+    }
+    assert(bb.length === dataUsedBits);
+
+    // Add terminator and pad up to a byte if applicable
+    const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8;
+    assert(bb.length <= dataCapacityBits);
+    appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+    appendBits(0, (8 - (bb.length % 8)) % 8, bb);
+    assert(bb.length % 8 === 0);
+
+    // Pad with alternating bytes until data capacity is reached
+    for (let padByte = 0xec; bb.length < dataCapacityBits; padByte ^= 0xec ^ 0x11) {
+      appendBits(padByte, 8, bb);
+    }
+
+    // Pack bits numbero bytes in big endian
+    const dataCodewords: number[] = [];
+    while (dataCodewords.length * 8 < bb.length) {
+      dataCodewords.push(0);
+    }
+    bb.forEach((b, i) => {
+      dataCodewords[i >>> 3] |= b << (7 - (i & 7));
+    });
+
+    // Create the QR Code object
+    return new QrCode(version, ecl, dataCodewords, mask);
+  }
+
+  /* -- Fields --*/
+
+  // The width and height of this QR Code, measured in modules, between
+  // 21 and 177 (inclusive). This is equal to version * 4 + 17.
+  public readonly size: number;
+
+  // The index of the mask pattern used in this QR Code, which is between 0 and 7 (inclusive).
+  // Even if a QR Code is created with automatic masking requested (mask = -1),
+  // the resulting object still has a mask value between 0 and 7.
+  public readonly mask: number;
+
+  // The modules of this QR Code (false = light, true = dark).
+  // Immutable after constructor finishes. Accessed through getModule().
+  private readonly modules: boolean[][] = [];
+
+  // Indicates function modules that are not subjected to masking. Discarded when constructor finishes.
+  private readonly isFunction: boolean[][] = [];
+
+  /* -- Constructor (low level) and fields --*/
+  // The version number of this QR Code, which is between 1 and 40 (inclusive).
+  // This determines the size of this barcode.
+  public version: number;
+
+  // The error correction level used in this QR Code.
+  public errorCorrectionLevel: Ecc;
+
+  // Creates a new QR Code with the given version number,
+  // error correction level, data codeword bytes, and mask number.
+  // This is a low-level API that most users should not use directly.
+  // A mid-level API is the encodeSegments() function.
+  public constructor(
+    // The version number of this QR Code, which is between 1 and 40 (inclusive).
+    // This determines the size of this barcode.
+    version: number,
+
+    // The error correction level used in this QR Code.
+    errorCorrectionLevel: Ecc,
+
+    dataCodewords: Readonly<number[]>,
+
+    oriMsk: number,
+  ) {
+    let msk = oriMsk;
+    this.version = version;
+    this.errorCorrectionLevel = errorCorrectionLevel;
+    // Check scalar arguments
+    if (version < QrCode.MIN_VERSION || version > QrCode.MAX_VERSION) {
+      throw new RangeError('Version value out of range');
+    }
+    if (msk < -1 || msk > 7) {
+      throw new RangeError('Mask value out of range');
+    }
+    this.size = version * 4 + 17;
+
+    // Initialize both grids to be size*size arrays of Boolean false
+    const row: boolean[] = [];
+    for (let i = 0; i < this.size; i++) {
+      row.push(false);
+    }
+    for (let i = 0; i < this.size; i++) {
+      this.modules.push(row.slice()); // Initially all light
+      this.isFunction.push(row.slice());
+    }
+
+    // Compute ECC, draw modules
+    this.drawFunctionPatterns();
+    const allCodewords: number[] = this.addEccAndInterleave(dataCodewords);
+    this.drawCodewords(allCodewords);
+
+    // Do masking
+    if (msk === -1) {
+      // Automatically choose best mask
+      let minPenalty: number = 1000000000;
+      for (let i = 0; i < 8; i++) {
+        this.applyMask(i);
+        this.drawFormatBits(i);
+        const penalty: number = this.getPenaltyScore();
+        if (penalty < minPenalty) {
+          msk = i;
+          minPenalty = penalty;
+        }
+        this.applyMask(i); // Undoes the mask due to XOR
+      }
+    }
+    assert(msk >= 0 && msk <= 7);
+    this.mask = msk;
+    this.applyMask(msk); // Apply the final choice of mask
+    this.drawFormatBits(msk); // Overwrite old format bits
+
+    this.isFunction = [];
+  }
+
+  /* -- Accessor methods --*/
+
+  // Returns the color of the module (pixel) at the given coordinates, which is false
+  // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
+  // If the given coordinates are out of bounds, then false (light) is returned.
+  public getModule(x: number, y: number): boolean {
+    return x >= 0 && x < this.size && y >= 0 && y < this.size && this.modules[y][x];
+  }
+
+  // Modified to expose modules for easy access
+  public getModules() {
+    return this.modules;
+  }
+
+  /* -- Private helper methods for constructor: Drawing function modules --*/
+
+  // Reads this object's version field, and draws and marks all function modules.
+  private drawFunctionPatterns(): void {
+    // Draw horizontal and vertical timing patterns
+    for (let i = 0; i < this.size; i++) {
+      this.setFunctionModule(6, i, i % 2 === 0);
+      this.setFunctionModule(i, 6, i % 2 === 0);
+    }
+
+    // Draw 3 finder patterns (all corners except bottom right; overwrites some timing modules)
+    this.drawFinderPattern(3, 3);
+    this.drawFinderPattern(this.size - 4, 3);
+    this.drawFinderPattern(3, this.size - 4);
+
+    // Draw numerous alignment patterns
+    const alignPatPos: number[] = this.getAlignmentPatternPositions();
+    const numAlign: number = alignPatPos.length;
+    for (let i = 0; i < numAlign; i++) {
+      for (let j = 0; j < numAlign; j++) {
+        // Don't draw on the three finder corners
+        if (!((i === 0 && j === 0) || (i === 0 && j === numAlign - 1) || (i === numAlign - 1 && j === 0))) {
+          this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
+        }
+      }
+    }
+
+    // Draw configuration data
+    this.drawFormatBits(0); // Dummy mask value; overwritten later in the constructor
+    this.drawVersion();
+  }
+
+  // Draws two copies of the format bits (with its own error correction code)
+  // based on the given mask and this object's error correction level field.
+  private drawFormatBits(mask: number): void {
+    // Calculate error correction code and pack bits
+    const data: number = (this.errorCorrectionLevel.formatBits << 3) | mask; // errCorrLvl is unumber2, mask is unumber3
+    let rem: number = data;
+    for (let i = 0; i < 10; i++) {
+      rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+    }
+    const bits = ((data << 10) | rem) ^ 0x5412; // unumber15
+    assert(bits >>> 15 === 0);
+
+    // Draw first copy
+    for (let i = 0; i <= 5; i++) {
+      this.setFunctionModule(8, i, getBit(bits, i));
+    }
+    this.setFunctionModule(8, 7, getBit(bits, 6));
+    this.setFunctionModule(8, 8, getBit(bits, 7));
+    this.setFunctionModule(7, 8, getBit(bits, 8));
+    for (let i = 9; i < 15; i++) {
+      this.setFunctionModule(14 - i, 8, getBit(bits, i));
+    }
+    // Draw second copy
+    for (let i = 0; i < 8; i++) {
+      this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
+    }
+    for (let i = 8; i < 15; i++) {
+      this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
+    }
+    this.setFunctionModule(8, this.size - 8, true); // Always dark
+  }
+
+  // Draws two copies of the version bits (with its own error correction code),
+  // based on this object's version field, iff 7 <= version <= 40.
+  private drawVersion(): void {
+    if (this.version < 7) {
+      return;
+    }
+
+    // Calculate error correction code and pack bits
+    let rem: number = this.version; // version is unumber6, in the range [7, 40]
+    for (let i = 0; i < 12; i++) {
+      rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+    }
+    const bits: number = (this.version << 12) | rem; // unumber18
+    assert(bits >>> 18 === 0);
+
+    // Draw two copies
+    for (let i = 0; i < 18; i++) {
+      const color: boolean = getBit(bits, i);
+      const a: number = this.size - 11 + (i % 3);
+      const b: number = Math.floor(i / 3);
+      this.setFunctionModule(a, b, color);
+      this.setFunctionModule(b, a, color);
+    }
+  }
+
+  // Draws a 9*9 finder pattern including the border separator,
+  // with the center module at (x, y). Modules can be out of bounds.
+  private drawFinderPattern(x: number, y: number): void {
+    for (let dy = -4; dy <= 4; dy++) {
+      for (let dx = -4; dx <= 4; dx++) {
+        const dist: number = Math.max(Math.abs(dx), Math.abs(dy)); // Chebyshev/infinity norm
+        const xx: number = x + dx;
+        const yy: number = y + dy;
+        if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size) {
+          this.setFunctionModule(xx, yy, dist !== 2 && dist !== 4);
+        }
+      }
+    }
+  }
+
+  // Draws a 5*5 alignment pattern, with the center module
+  // at (x, y). All modules must be in bounds.
+  private drawAlignmentPattern(x: number, y: number): void {
+    for (let dy = -2; dy <= 2; dy++) {
+      for (let dx = -2; dx <= 2; dx++) {
+        this.setFunctionModule(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+      }
+    }
+  }
+
+  // Sets the color of a module and marks it as a function module.
+  // Only used by the constructor. Coordinates must be in bounds.
+  private setFunctionModule(x: number, y: number, isDark: boolean): void {
+    this.modules[y][x] = isDark;
+    this.isFunction[y][x] = true;
+  }
+
+  /* -- Private helper methods for constructor: Codewords and masking --*/
+
+  // Returns a new byte string representing the given data with the appropriate error correction
+  // codewords appended to it, based on this object's version and error correction level.
+  private addEccAndInterleave(data: Readonly<number[]>): number[] {
+    const ver: number = this.version;
+    const ecl: Ecc = this.errorCorrectionLevel;
+    if (data.length !== QrCode.getNumDataCodewords(ver, ecl)) {
+      throw new RangeError('Invalid argument');
+    }
+    // Calculate parameter numbers
+    const numBlocks = QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+    const blockEccLen = QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
+    const rawCodewords = Math.floor(QrCode.getNumRawDataModules(ver) / 8);
+    const numShortBlocks = numBlocks - (rawCodewords % numBlocks);
+    const shortBlockLen = Math.floor(rawCodewords / numBlocks);
+
+    // Split data numbero blocks and append ECC to each block
+    const blocks: number[][] = [];
+    const rsDiv = QrCode.reedSolomonComputeDivisor(blockEccLen);
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+      const dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
+      k += dat.length;
+      const ecc: number[] = QrCode.reedSolomonComputeRemainder(dat, rsDiv);
+      if (i < numShortBlocks) {
+        dat.push(0);
+      }
+      blocks.push(dat.concat(ecc));
+    }
+
+    // Interleave (not concatenate) the bytes from every block numbero a single sequence
+    const result: number[] = [];
+    for (let i = 0; i < blocks[0].length; i++) {
+      blocks.forEach((block, j) => {
+        // Skip the padding byte in short blocks
+        if (i !== shortBlockLen - blockEccLen || j >= numShortBlocks) {
+          result.push(block[i]);
+        }
+      });
+    }
+    assert(result.length === rawCodewords);
+    return result;
+  }
+
+  // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
+  // data area of this QR Code. Function modules need to be marked off before this is called.
+  private drawCodewords(data: Readonly<number[]>): void {
+    if (data.length !== Math.floor(QrCode.getNumRawDataModules(this.version) / 8)) {
+      throw new RangeError('Invalid argument');
+    }
+    let i: number = 0; // Bit index numbero the data
+    // Do the funny zigzag scan
+    for (let right = this.size - 1; right >= 1; right -= 2) {
+      // Index of right column in each column pair
+      if (right === 6) {
+        right = 5;
+      }
+      for (let vert = 0; vert < this.size; vert++) {
+        // Vertical counter
+        for (let j = 0; j < 2; j++) {
+          const x: number = right - j; // Actual x coordinate
+          const upward: boolean = ((right + 1) & 2) === 0;
+          const y: number = upward ? this.size - 1 - vert : vert; // Actual y coordinate
+          if (!this.isFunction[y][x] && i < data.length * 8) {
+            this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
+            i++;
+          }
+          // If this QR Code has any remainder bits (0 to 7), they were assigned as
+          // 0/false/light by the constructor and are left unchanged by this method
+        }
+      }
+    }
+    assert(i === data.length * 8);
+  }
+
+  // XORs the codeword modules in this QR Code with the given mask pattern.
+  // The function modules must be marked and the codeword bits must be drawn
+  // before masking. Due to the arithmetic of XOR, calling applyMask() with
+  // the same mask value a second time will undo the mask. A final well-formed
+  // QR Code needs exactly one (not zero, two, etc.) mask applied.
+  private applyMask(mask: number): void {
+    if (mask < 0 || mask > 7) {
+      throw new RangeError('Mask value out of range');
+    }
+    for (let y = 0; y < this.size; y++) {
+      for (let x = 0; x < this.size; x++) {
+        let invert: boolean;
+        switch (mask) {
+          case 0:
+            invert = (x + y) % 2 === 0;
+            break;
+          case 1:
+            invert = y % 2 === 0;
+            break;
+          case 2:
+            invert = x % 3 === 0;
+            break;
+          case 3:
+            invert = (x + y) % 3 === 0;
+            break;
+          case 4:
+            invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+            break;
+          case 5:
+            invert = ((x * y) % 2) + ((x * y) % 3) === 0;
+            break;
+          case 6:
+            invert = (((x * y) % 2) + ((x * y) % 3)) % 2 === 0;
+            break;
+          case 7:
+            invert = (((x + y) % 2) + ((x * y) % 3)) % 2 === 0;
+            break;
+          default:
+            throw new Error('Unreachable');
+        }
+        if (!this.isFunction[y][x] && invert) {
+          this.modules[y][x] = !this.modules[y][x];
+        }
+      }
+    }
+  }
+
+  // Calculates and returns the penalty score based on state of this QR Code's current modules.
+  // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
+  private getPenaltyScore(): number {
+    let result: number = 0;
+
+    // Adjacent modules in row having same color, and finder-like patterns
+    for (let y = 0; y < this.size; y++) {
+      let runColor = false;
+      let runX = 0;
+      const runHistory = [0, 0, 0, 0, 0, 0, 0];
+      for (let x = 0; x < this.size; x++) {
+        if (this.modules[y][x] === runColor) {
+          runX++;
+          if (runX === 5) {
+            result += QrCode.PENALTY_N1;
+          } else if (runX > 5) {
+            result++;
+          }
+        } else {
+          this.finderPenaltyAddHistory(runX, runHistory);
+          if (!runColor) {
+            result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
+          }
+          runColor = this.modules[y][x];
+          runX = 1;
+        }
+      }
+      result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * QrCode.PENALTY_N3;
+    }
+    // Adjacent modules in column having same color, and finder-like patterns
+    for (let x = 0; x < this.size; x++) {
+      let runColor = false;
+      let runY = 0;
+      const runHistory = [0, 0, 0, 0, 0, 0, 0];
+      for (let y = 0; y < this.size; y++) {
+        if (this.modules[y][x] === runColor) {
+          runY++;
+          if (runY === 5) {
+            result += QrCode.PENALTY_N1;
+          } else if (runY > 5) {
+            result++;
+          }
+        } else {
+          this.finderPenaltyAddHistory(runY, runHistory);
+          if (!runColor) {
+            result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
+          }
+          runColor = this.modules[y][x];
+          runY = 1;
+        }
+      }
+      result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * QrCode.PENALTY_N3;
+    }
+
+    // 2*2 blocks of modules having same color
+    for (let y = 0; y < this.size - 1; y++) {
+      for (let x = 0; x < this.size - 1; x++) {
+        const color: boolean = this.modules[y][x];
+        if (
+          color === this.modules[y][x + 1] &&
+          color === this.modules[y + 1][x] &&
+          color === this.modules[y + 1][x + 1]
+        ) {
+          result += QrCode.PENALTY_N2;
+        }
+      }
+    }
+
+    // Balance of dark and light modules
+    let dark: number = 0;
+    for (const row of this.modules) {
+      dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
+    }
+    const total: number = this.size * this.size; // Note that size is odd, so dark/total !== 1/2
+    // Compute the smallest numbereger k >= 0 such that (45-5k)% <= dark/total <= (55+5k)%
+    const k: number = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+    assert(k >= 0 && k <= 9);
+    result += k * QrCode.PENALTY_N4;
+    assert(result >= 0 && result <= 2568888); // Non-tight upper bound based on default values of PENALTY_N1, ..., N4
+    return result;
+  }
+
+  /* -- Private helper functions --*/
+
+  // Returns an ascending list of positions of alignment patterns for this version number.
+  // Each position is in the range [0,177), and are used on both the x and y axes.
+  // This could be implemented as lookup table of 40 variable-length lists of numberegers.
+  private getAlignmentPatternPositions(): number[] {
+    if (this.version === 1) {
+      return [];
+    }
+    const numAlign = Math.floor(this.version / 7) + 2;
+    const step = this.version === 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+    const result: number[] = [6];
+    for (let pos = this.size - 7; result.length < numAlign; pos -= step) {
+      result.splice(1, 0, pos);
+    }
+    return result;
+  }
+
+  // Returns the number of data bits that can be stored in a QR Code of the given version number, after
+  // all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
+  // The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
+  private static getNumRawDataModules(ver: number): number {
+    if (ver < QrCode.MIN_VERSION || ver > QrCode.MAX_VERSION) {
+      throw new RangeError('Version number out of range');
+    }
+    let result: number = (16 * ver + 128) * ver + 64;
+    if (ver >= 2) {
+      const numAlign: number = Math.floor(ver / 7) + 2;
+      result -= (25 * numAlign - 10) * numAlign - 55;
+      if (ver >= 7) {
+        result -= 36;
+      }
+    }
+    assert(result >= 208 && result <= 29648);
+    return result;
+  }
+
+  // Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
+  // QR Code of the given version number and error correction level, with remainder bits discarded.
+  // This stateless pure function could be implemented as a (40*4)-cell lookup table.
+  private static getNumDataCodewords(ver: number, ecl: Ecc): number {
+    return (
+      Math.floor(QrCode.getNumRawDataModules(ver) / 8) -
+      QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver]
+    );
+  }
+
+  // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
+  // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
+  private static reedSolomonComputeDivisor(degree: number): number[] {
+    if (degree < 1 || degree > 255) {
+      throw new RangeError('Degree out of range');
+    }
+    // Polynomial coefficients are stored from highest to lowest power, excluding the leading term which is always 1.
+    // For example the polynomial x^3 + 255x^2 + 8x + 93 is stored as the unumber8 array [255, 8, 93].
+    const result: number[] = [];
+    for (let i = 0; i < degree - 1; i++) {
+      result.push(0);
+    }
+    result.push(1); // Start off with the monomial x^0
+
+    // Compute the product polynomial (x - r^0) * (x - r^1) * (x - r^2) * ... * (x - r^{degree-1}),
+    // and drop the highest monomial term which is always 1x^degree.
+    // Note that r = 0x02, which is a generator element of this field GF(2^8/0x11D).
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+      // Multiply the current product by (x - r^i)
+      for (let j = 0; j < result.length; j++) {
+        result[j] = QrCode.reedSolomonMultiply(result[j], root);
+        if (j + 1 < result.length) {
+          result[j] ^= result[j + 1];
+        }
+      }
+      root = QrCode.reedSolomonMultiply(root, 0x02);
+    }
+    return result;
+  }
+
+  // Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
+  private static reedSolomonComputeRemainder(data: Readonly<number[]>, divisor: Readonly<number[]>) {
+    const result = divisor.map<number>(() => 0);
+    for (const b of data) {
+      // Polynomial division
+      const factor = b ^ result.shift();
+      result.push(0);
+      divisor.forEach((coef, i) => {
+        result[i] ^= QrCode.reedSolomonMultiply(coef, factor);
+      });
+    }
+    return result;
+  }
+
+  // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
+  // are unsigned 8-bit numberegers. This could be implemented as a lookup table of 256*256 entries of unumber8.
+  private static reedSolomonMultiply(x: number, y: number): number {
+    if (x >>> 8 !== 0 || y >>> 8 !== 0) {
+      throw new RangeError('Byte out of range');
+    }
+    // Russian peasant multiplication
+    let z: number = 0;
+    for (let i = 7; i >= 0; i--) {
+      z = (z << 1) ^ ((z >>> 7) * 0x11d);
+      z ^= ((y >>> i) & 1) * x;
+    }
+    assert(z >>> 8 === 0);
+    return z as number;
+  }
+
+  // Can only be called immediately after a light run is added, and
+  // returns either 0, 1, or 2. A helper function for getPenaltyScore().
+  private finderPenaltyCountPatterns(runHistory: Readonly<number[]>): number {
+    const n: number = runHistory[1];
+    assert(n <= this.size * 3);
+    const core: boolean =
+      n > 0 && runHistory[2] === n && runHistory[3] === n * 3 && runHistory[4] === n && runHistory[5] === n;
+    return (
+      (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) +
+      (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0)
+    );
+  }
+
+  // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
+  private finderPenaltyTerminateAndCount(
+    currentRunColor: boolean,
+    oriCurrentRunLength: number,
+    runHistory: number[],
+  ): number {
+    let currentRunLength = oriCurrentRunLength;
+    if (currentRunColor) {
+      // Terminate dark run
+      this.finderPenaltyAddHistory(currentRunLength, runHistory);
+      currentRunLength = 0;
+    }
+    currentRunLength += this.size; // Add light border to final run
+    this.finderPenaltyAddHistory(currentRunLength, runHistory);
+    return this.finderPenaltyCountPatterns(runHistory);
+  }
+
+  // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
+  private finderPenaltyAddHistory(oriCurrentRunLength: number, runHistory: number[]) {
+    let currentRunLength = oriCurrentRunLength;
+    if (runHistory[0] === 0) {
+      currentRunLength += this.size; // Add light border to initial run
+    }
+    runHistory.pop();
+    runHistory.unshift(currentRunLength);
+  }
+
+  /* -- Constants and tables --*/
+
+  // The minimum version number supported in the QR Code Model 2 standard.
+  public static readonly MIN_VERSION: number = 1;
+
+  // The maximum version number supported in the QR Code Model 2 standard.
+  public static readonly MAX_VERSION: number = 40;
+
+  // For use in getPenaltyScore(), when evaluating which mask is best.
+  private static readonly PENALTY_N1: number = 3;
+
+  private static readonly PENALTY_N2: number = 3;
+
+  private static readonly PENALTY_N3: number = 40;
+
+  private static readonly PENALTY_N4: number = 10;
+
+  private static readonly ECC_CODEWORDS_PER_BLOCK: number[][] = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    // 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [
+      -1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30,
+      30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+    ], // Low
+    [
+      -1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28,
+      28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28,
+    ], // Medium
+    [
+      -1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30,
+      30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+    ], // Quartile
+    [
+      -1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30,
+      30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+    ], // High
+  ];
+
+  private static readonly NUM_ERROR_CORRECTION_BLOCKS: number[][] = [
+    // Version: (note that index 0 is for padding, and is set to an illegal value)
+    // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+    [
+      -1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18,
+      19, 19, 20, 21, 22, 24, 25,
+    ], // Low
+    [
+      -1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31,
+      33, 35, 37, 38, 40, 43, 45, 47, 49,
+    ], // Medium
+    [
+      -1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40,
+      43, 45, 48, 51, 53, 56, 59, 62, 65, 68,
+    ], // Quartile
+    [
+      -1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48,
+      51, 54, 57, 60, 63, 66, 70, 74, 77, 81,
+    ], // High
+  ];
+}
diff --git a/packages/tdesign-uniapp/components/common/shared/qrcode/types.ts b/packages/tdesign-uniapp/components/common/shared/qrcode/types.ts
new file mode 100644
index 000000000..0607a98f5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/qrcode/types.ts
@@ -0,0 +1,55 @@
+import type { Ecc, QrCode } from './qrcodegen';
+
+export type Modules = ReturnType<QrCode['getModules']>;
+export type Excavation = { x: number; y: number; w: number; h: number };
+export type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
+
+export type ERROR_LEVEL_MAPPED_TYPE = {
+  [index in ErrorCorrectionLevel]: Ecc;
+};
+
+export type ImageSettings = {
+  /**
+   * The URI of the embedded image.
+   */
+  src: string;
+  /**
+   * The height, in pixels, of the image.
+   */
+  height: number;
+  /**
+   * The width, in pixels, of the image.
+   */
+  width: number;
+  /**
+   * Whether or not to "excavate" the modules around the embedded image. This
+   * means that any modules the embedded image overlaps will use the background
+   * color.
+   */
+  excavate: boolean;
+  /**
+   * The horizontal offset of the embedded image, starting from the top left corner.
+   * Will center if not specified.
+   */
+  x?: number;
+  /**
+   * The vertical offset of the embedded image, starting from the top left corner.
+   * Will center if not specified.
+   */
+  y?: number;
+  /**
+   * The opacity of the embedded image in the range of 0-1.
+   * @defaultValue 1
+   */
+  opacity?: number;
+  /**
+   * The cross-origin value to use when loading the image. This is used to
+   * ensure compatibility with CORS, particularly when extracting image data
+   * from QRCodeCanvas.
+   * Note: `undefined` is treated differently than the seemingly equivalent
+   * empty string. This is intended to align with HTML behavior where omitting
+   * the attribute behaves differently than the empty string.
+   */
+  crossOrigin?: CrossOrigin;
+};
diff --git a/packages/tdesign-uniapp/components/common/shared/qrcode/utils.ts b/packages/tdesign-uniapp/components/common/shared/qrcode/utils.ts
new file mode 100644
index 000000000..8d71a65f2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/shared/qrcode/utils.ts
@@ -0,0 +1,157 @@
+import type {
+  CrossOrigin,
+  ERROR_LEVEL_MAPPED_TYPE,
+  ErrorCorrectionLevel,
+  Excavation,
+  ImageSettings,
+  Modules,
+} from './types';
+import { Ecc } from './qrcodegen';
+
+// =================== ERROR_LEVEL ==========================
+export const ERROR_LEVEL_MAP: ERROR_LEVEL_MAPPED_TYPE = {
+  L: Ecc.LOW,
+  M: Ecc.MEDIUM,
+  Q: Ecc.QUARTILE,
+  H: Ecc.HIGH,
+} as const;
+
+// =================== DEFAULT_VALUE ==========================
+export const DEFAULT_SIZE = 160;
+export const DEFAULT_LEVEL: ErrorCorrectionLevel = 'M';
+export const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
+export const DEFAULT_FRONT_COLOR = '#000000';
+export const DEFAULT_NEED_MARGIN = false;
+export const DEFAULT_MINVERSION = 1;
+export const SPEC_MARGIN_SIZE = 4;
+export const DEFAULT_MARGIN_SIZE = 0;
+export const DEFAULT_IMG_SCALE = 0.1;
+
+// =================== UTILS ==========================
+/**
+ * Generate a path string from modules
+ * @param modules
+ * @param margin
+ * @returns
+ */
+export const generatePath = (modules: Modules, margin = 0) => {
+  const ops: string[] = [];
+  modules.forEach((row, y) => {
+    let start: number | null = null;
+    row.forEach((cell, x) => {
+      if (!cell && start !== null) {
+        ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`);
+        start = null;
+        return;
+      }
+
+      if (x === row.length - 1) {
+        if (!cell) {
+          return;
+        }
+        if (start === null) {
+          ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+        } else {
+          ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`);
+        }
+        return;
+      }
+
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join('');
+};
+
+/**
+ * Excavate modules
+ * @param modules
+ * @param excavation
+ * @returns
+ */
+export const excavateModules = (modules: Modules, excavation: Excavation) => modules.slice().map((row, y) => {
+  if (y < excavation.y || y >= excavation.y + excavation.h) {
+    return row;
+  }
+  return row.map((cell, x) => {
+    if (x < excavation.x || x >= excavation.x + excavation.w) {
+      return cell;
+    }
+    return false;
+  });
+});
+
+/**
+ * Get image settings
+ * @param cells The modules of the QR code
+ * @param size The size of the QR code
+ * @param margin
+ * @param imageSettings
+ * @returns
+ */
+export const getImageSettings = (
+  cells: Modules,
+  size: number,
+  margin: number,
+  imageSettings?: ImageSettings,
+): null | {
+  x: number;
+  y: number;
+  h: number;
+  w: number;
+  excavation: Excavation | null;
+  opacity: number;
+  crossOrigin: CrossOrigin;
+} => {
+  if (imageSettings == null) {
+    return null;
+  }
+  const numCells = cells.length + margin * 2;
+  const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  const scale = numCells / size;
+  const w = (imageSettings.width || defaultSize) * scale;
+  const h = (imageSettings.height || defaultSize) * scale;
+  const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  const opacity = imageSettings.opacity == null ? 1 : imageSettings.opacity;
+
+  let excavation: null | { x: number; y: number; w: number; h: number; } = null;
+  if (imageSettings.excavate) {
+    const floorX = Math.floor(x);
+    const floorY = Math.floor(y);
+    const ceilW = Math.ceil(w + x - floorX);
+    const ceilH = Math.ceil(h + y - floorY);
+    excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+  }
+
+  const { crossOrigin } = imageSettings;
+
+  return { x, y, h, w, excavation, opacity, crossOrigin };
+};
+
+/**
+ * Get margin size
+ * @param needMargin Whether need margin
+ * @param marginSize Custom margin size
+ * @returns
+ */
+export const getMarginSize = (needMargin: boolean, marginSize?: number) => {
+  if (marginSize != null) {
+    return Math.max(Math.floor(marginSize), 0);
+  }
+  return needMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE;
+};
+
+/**
+ * Check if Path2D is supported
+ */
+export const isSupportPath2d = (() => {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+  return true;
+})();
diff --git a/packages/tdesign-uniapp/components/common/src/control.js b/packages/tdesign-uniapp/components/common/src/control.js
new file mode 100644
index 000000000..777c09f62
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/src/control.js
@@ -0,0 +1,66 @@
+const defaultOption = {
+  valueKey: 'value',
+  defaultValueKey: 'defaultValue',
+  changeEventName: 'change',
+  strict: true,
+};
+/**
+ * 受控函数
+ * 用法示例：
+ * {
+ *  attached() {
+ *    this.control = useControl.call(this);
+ *  }
+ * }
+ * 注意事项：
+ * 1：命名规范：约束value等命名，一般不需要改。内部属性统一命名以_开头。
+ * 2：value默认值：小程序number类型未传值（undefined）会初始化为0，导致无法判断。建议默认值设置为null
+ * 3：prop变化：需要开发者自己监听，observers = { value(val):{ this.control.set(val) } }
+ * @param this 页面实例
+ * @param option 配置项 参见ControlOption
+ * @returns
+ */
+function useControl(option) {
+  const { valueKey, defaultValueKey, changeEventName, strict } = {
+    ...defaultOption,
+    ...option,
+  };
+  const props = this.properties || {};
+  const value = props[valueKey];
+  // 半受控时，不需要defaultValueKey，默认值与valueKey相同
+  const defaultValue = props[strict ? defaultValueKey : valueKey];
+  let controlled = false;
+  // 完全受控模式：检查受控属性，判断是否受控
+  if (strict && typeof value !== 'undefined' && value !== null) {
+    controlled = true;
+  }
+  const set = (newVal, extObj, fn) => {
+    this.setData(
+      {
+        [`_${valueKey}`]: newVal,
+        ...extObj,
+      },
+      fn,
+    );
+  };
+  return {
+    controlled,
+    initValue: controlled ? value : defaultValue,
+    set,
+    get: () => this.data[`_${valueKey}`],
+    change: (newVal, customChangeData, customUpdateFn) => {
+      this.$emit(changeEventName, typeof customChangeData !== 'undefined' ? customChangeData : newVal);
+      // 完全受控模式，使用了受控属性，必须配合change事件来更新
+      if (controlled) {
+        return;
+      }
+      if (typeof customUpdateFn === 'function') {
+        customUpdateFn();
+      } else {
+        set(newVal);
+      }
+    },
+  };
+}
+
+export { useControl };
diff --git a/packages/tdesign-uniapp/components/common/src/flatTool.js b/packages/tdesign-uniapp/components/common/src/flatTool.js
new file mode 100644
index 000000000..7828119cd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/src/flatTool.js
@@ -0,0 +1,99 @@
+import { isObject } from '../validator';
+
+/** ****************************************************************
+ MIT License https://github.com/qiu8310/minapp/blob/v1.0.0-alpha.1/packages/minapp-core/src/system/util/object.ts
+ Author Mora <qiuzhongleiabc@126.com> (https://github.com/qiu8310)
+****************************************************************** */
+
+export const getPrototypeOf = function (obj) {
+  return Object.getPrototypeOf ? Object.getPrototypeOf(obj) : obj.__proto__;
+};
+
+/**
+ * 遍历继承关系类的 prototype
+ *
+ * @export
+ * @param {Function} callback - 回调函数，函数参数是遍历的每个实例的 prototype，函数如果返回 false，会终止遍历
+ * @param {any} fromCtor  - 要遍历的起始 class 或 prototype
+ * @param {any} toCtor    - 要遍历的结束 class 或 prototype
+ * @param {boolean} [includeToCtor=true] - 是否要包含结束 toCtor 本身
+ *
+ * @example
+ * A -> B -> C
+ *
+ * 在 C 中调用： iterateInheritedPrototype(fn, A, C, true)
+ * 则，fn 会被调用三次，分别是 fn(A.prototype) fn(B.prototype) fn(C.prototype)
+ */
+export const iterateInheritedPrototype = function iterateInheritedPrototype(
+  callback,
+  fromCtor,
+  toCtor,
+  includeToCtor = true,
+) {
+  let proto = fromCtor.prototype || fromCtor;
+  const toProto = toCtor.prototype || toCtor;
+
+  while (proto) {
+    if (!includeToCtor && proto === toProto) break;
+    if (callback(proto) === false) break;
+    if (proto === toProto) break;
+    proto = getPrototypeOf(proto);
+  }
+};
+
+
+/**
+ *
+ * 将一个可能包含原型链的对象扁平化成单个对象
+ *
+ * 如，现有这样的类的继承关系 A -> B -> C，当创建一个实例 a = new A() 时
+ *
+ * a 实例会存有 B、C 的原型链，使用此函数 newa = toObject(a) 之后，
+ * newa 就会变成一个 PlainObject，但它有 A、B、C 上的所有属性和方法，
+ * 当然不包括静态属性或方法
+ *
+ * 注意1：用此方法的话，尽量避免在类中使用胖函数，胖函数的 this 死死的绑定
+ * 在原对象中，无法重新绑定
+ *
+ * 注意2：类继承的时候不要在函数中调用 super，toObject 之后是扁平的，没有 super 之说
+ */
+export const toObject = function toObject(
+  something,
+  options = {},
+) {
+  const obj = {};
+  if (!isObject(something)) return obj;
+
+  const excludes = options.excludes || ['constructor'];
+  const { enumerable = true, configurable = 0, writable = 0 } = options;
+  const defaultDesc = {};
+  if (enumerable !== 0) defaultDesc.enumerable = enumerable;
+  if (configurable !== 0) defaultDesc.configurable = configurable;
+  if (writable !== 0) defaultDesc.writable = writable;
+
+  iterateInheritedPrototype(
+    (proto) => {
+      Object.getOwnPropertyNames(proto).forEach((key) => {
+        if (excludes.indexOf(key) >= 0) return;
+        if (Object.prototype.hasOwnProperty.call(obj, key)) return;
+        const desc = Object.getOwnPropertyDescriptor(proto, key);
+
+        const fnKeys = ['get', 'set', 'value'];
+        fnKeys.forEach((k) => {
+          if (typeof desc[k] === 'function') {
+            const oldFn = desc[k];
+            desc[k] = function (...args) {
+              return oldFn.apply(Object.prototype.hasOwnProperty.call(options, 'bindTo') ? options.bindTo : this, args);
+            };
+          }
+        });
+        Object.defineProperty(obj, key, { ...desc, ...defaultDesc });
+      });
+    },
+    something,
+    options.till || Object,
+    false,
+  );
+
+  return obj;
+};
diff --git a/packages/tdesign-uniapp/components/common/src/index.js b/packages/tdesign-uniapp/components/common/src/index.js
new file mode 100644
index 000000000..94e7ce125
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/src/index.js
@@ -0,0 +1,4 @@
+export * from './superComponent';
+export * from './flatTool';
+export * from './instantiationDecorator';
+export * from './control';
diff --git a/packages/tdesign-uniapp/components/common/src/instantiationDecorator.js b/packages/tdesign-uniapp/components/common/src/instantiationDecorator.js
new file mode 100644
index 000000000..c099aecee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/src/instantiationDecorator.js
@@ -0,0 +1,251 @@
+/* eslint-disable no-param-reassign */
+import { isPlainObject } from '../validator';
+import { canUseVirtualHost } from '../version';
+import { toCamel, toPascal, hyphenate } from '../utils';
+
+const getInnerControlledValue = key => `data${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;
+const getDefaultKey = key =>  `default${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;
+
+const ARIAL_PROPS = [
+  { key: 'ariaHidden', type: Boolean },
+  { key: 'ariaRole', type: String },
+  { key: 'ariaLabel', type: String },
+  { key: 'ariaLabelledby', type: String },
+  { key: 'ariaDescribedby', type: String },
+  { key: 'ariaBusy', type: Boolean },
+];
+
+const getPropsDefault = (type, disableBoolean = false) => {
+  if (type === Boolean && !disableBoolean) {
+    return false;
+  }
+  if (type === String) {
+    return '';
+  }
+  return undefined;
+};
+
+const COMMON_PROPS = {
+  ...ARIAL_PROPS.reduce((acc, item) => ({
+    ...acc,
+    [item.key]: {
+      type: item.type,
+      default: getPropsDefault(item.type),
+    },
+  }), {}),
+
+  customStyle: { type: [String, Object], default: '' },
+};
+
+
+export const toComponent = function (options) {
+  if (!options.properties && options.props) {
+    options.properties = options.props;
+  }
+
+  if (options.properties) {
+    Object.keys(options.properties).forEach((k) => {
+      let opt = options.properties[k];
+      // 如果不是 Object 类型，则默认指定 type = options.properties[k]；
+      if (!isPlainObject(opt)) {
+        opt = { type: opt };
+      }
+      options.properties[k] = opt;
+    });
+  }
+
+  if (!options.methods) options.methods = {};
+
+  if (!options.lifetimes) options.lifetimes = {};
+
+  const oldCreated = options.created;
+  const { controlledProps = [] } = options;
+
+  options.created = function (...args) {
+    if (oldCreated) {
+      oldCreated.apply(this, args);
+    }
+    controlledProps.forEach(({ key }) => {
+      const defaultKey = getDefaultKey(key);
+      const tDataKey = getInnerControlledValue(key);
+      this[tDataKey] = this[key];
+
+      if (this[key] == null) {
+        this._selfControlled = true;
+      }
+
+      if (this[key] == null && this[defaultKey] != null) {
+        this[tDataKey] = this[defaultKey];
+      }
+    });
+  };
+
+  options.methods._trigger = function (evtName, detail, opts) {
+    const target = controlledProps.find(item => item.event === evtName);
+
+    if (target) {
+      const { key } = target;
+      if (this._selfControlled) {
+        const tDataKey = getInnerControlledValue(key);
+        this[tDataKey] = detail[key];
+      }
+      this.$emit(
+        `update:${key}`,
+        detail[key],
+        opts,
+      );
+    }
+
+    this.$emit(
+      evtName,
+      detail,
+      opts,
+    );
+  };
+  return options;
+};
+
+
+/**
+ * 将一个继承了 BaseComponent 的类转化成 小程序 Component 的调用
+ * 根据最新的微信 d.ts 描述文件，Component 在实例化的时候，会忽略不支持的自定义属性
+ */
+export const wxComponent = function wxComponent() {
+  return function (baseConstructor) {
+    class WxComponent extends baseConstructor {
+      // 暂时移除了冗余的代码，后续补充
+    }
+
+    const current = new WxComponent();
+
+    current.options = current.options || {};
+
+    // 所有组件默认都开启css作用域
+    // 写到这里是为了防止组件设置 options 时无意覆盖掉了 addGlobalClass
+    // 使用 "styleIsolation": "apply-shared" 代替 addGlobalClass: true，see https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel/migration.html#JSON-%E9%85%8D%E7%BD%AE
+    // if (current.options.addGlobalClass === undefined) {
+    //   current.options.addGlobalClass = true;
+    // }
+
+    if (canUseVirtualHost() && current.options.virtualHost == null) {
+      current.options.virtualHost = true;
+    }
+
+    const obj = toComponent(current);
+
+    return obj;
+  };
+};
+
+function sortPropsType(type) {
+  if (!Array.isArray(type)) {
+    return type;
+  }
+  type.sort((a, b) => {
+    if (a === Boolean) {
+      return -1;
+    }
+    if (b === Boolean) {
+      return 1;
+    }
+    return 0;
+  });
+  return type;
+}
+
+function filterProps(props, controlledProps) {
+  const newProps = {};
+  const emits = [];
+  const reg = /^on[A-Z][a-z]/;
+  const controlledKeys = Object.values(controlledProps).map(item => item.key);
+  const unControlledKeys = controlledKeys.map(key => getDefaultKey(key));
+
+  Object.keys(props).forEach((key) => {
+    const curType = props[key].type || props[key];
+
+    if (reg.test(key) && props[key].type === Function) {
+      const str = key.replace(/^on/, '');
+      const eventName = str.charAt(0).toLowerCase() + str.slice(1);
+      emits.push(...[hyphenate(eventName), eventName]);
+    } else if (controlledKeys.indexOf(key) > -1
+       || unControlledKeys.indexOf(key) > -1
+    ) {
+      const newType = Array.isArray(curType) ? curType : [curType];
+      newProps[key] = {
+        type: [null, ...newType],
+        default: null,
+      };
+    } else if (
+      [Boolean, String].indexOf(props[key].type) > -1
+      && props[key].default === undefined
+    ) {
+      newProps[key] = {
+        ...props[key],
+        default: getPropsDefault(props[key].type, true),
+      };
+    } else {
+      newProps[key] = {
+        ...(typeof props[key] === 'object' ? props[key] : {}),
+        type: sortPropsType(curType),
+      };
+    }
+  });
+
+  return {
+    newProps,
+    emits,
+  };
+}
+
+const getEmitsByControlledProps = controlledProps => Object.values(controlledProps).map(item => `update:${item.key}`);
+
+export const uniComponent = function (info) {
+  const { newProps, emits } = filterProps(info.props || {}, info.controlledProps || {});
+  info.props = {
+    ...getExternalClasses(info),
+    ...newProps,
+    ...COMMON_PROPS,
+  };
+  info.emits = Array.from(new Set([
+    ...(info.emits || []),
+
+    ...(getEmitsByControlledProps(info.controlledProps || {})),
+    ...emits,
+  ]));
+
+  info.options = {
+    ...(info.options || {}),
+    multipleSlots: true,
+  };
+
+  if (canUseVirtualHost() && info.options.virtualHost == null) {
+    info.options.virtualHost = true;
+  }
+
+  if (!info.options.styleIsolation) {
+    info.options.styleIsolation = 'shared';
+  }
+  if (info.name) {
+    info.name = toPascal(info.name);
+  }
+
+  const obj = toComponent(info);
+  return obj;
+};
+
+
+export function getExternalClasses(info) {
+  if (!info.externalClasses) {
+    return {};
+  }
+  const { externalClasses } = info;
+  const list = Array.isArray(externalClasses) ? externalClasses : [externalClasses];
+
+  return list.reduce((acc, item) => ({
+    ...acc,
+    [toCamel(item)]: {
+      type: String,
+      default: '',
+    },
+  }), {});
+}
diff --git a/packages/tdesign-uniapp/components/common/src/superComponent.js b/packages/tdesign-uniapp/components/common/src/superComponent.js
new file mode 100644
index 000000000..3f8506849
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/src/superComponent.js
@@ -0,0 +1,5 @@
+export class SuperComponent {
+  constructor() {
+    this.app = getApp();
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/_variables.less b/packages/tdesign-uniapp/components/common/style/_variables.less
new file mode 100644
index 000000000..5941c1964
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/_variables.less
@@ -0,0 +1,198 @@
+// 公共前缀
+@prefix: t;
+
+@primary-color-1: var(--td-primary-color-1, #f2f3ff);
+@primary-color-2: var(--td-primary-color-2, #d9e1ff);
+@primary-color-3: var(--td-primary-color-3, #b5c7ff);
+@primary-color-4: var(--td-primary-color-4, #8eabff);
+@primary-color-5: var(--td-primary-color-5, #618dff);
+@primary-color-6: var(--td-primary-color-6, #366ef4);
+@primary-color-7: var(--td-primary-color-7, #0052d9);
+@primary-color-8: var(--td-primary-color-8, #003cab);
+@primary-color-9: var(--td-primary-color-9, #002a7c);
+@primary-color-10: var(--td-primary-color-10, #001a57);
+
+@error-color-1: var(--td-error-color-1, #fff0ed);
+@error-color-2: var(--td-error-color-2, #ffd8d2);
+@error-color-3: var(--td-error-color-3, #ffb9b0);
+@error-color-4: var(--td-error-color-4, #ff9285);
+@error-color-5: var(--td-error-color-5, #f6685d);
+@error-color-6: var(--td-error-color-6, #d54941);
+@error-color-7: var(--td-error-color-7, #ad352f);
+@error-color-8: var(--td-error-color-8, #881f1c);
+@error-color-9: var(--td-error-color-9, #68070a);
+@error-color-10: var(--td-error-color-10, #490002);
+
+@warning-color-1: var(--td-warning-color-1, #fff1e9);
+@warning-color-2: var(--td-warning-color-2, #ffd9c2);
+@warning-color-3: var(--td-warning-color-3, #ffb98c);
+@warning-color-4: var(--td-warning-color-4, #fa9550);
+@warning-color-5: var(--td-warning-color-5, #e37318);
+@warning-color-6: var(--td-warning-color-6, #be5a00);
+@warning-color-7: var(--td-warning-color-7, #954500);
+@warning-color-8: var(--td-warning-color-8, #713300);
+@warning-color-9: var(--td-warning-color-9, #532300);
+@warning-color-10: var(--td-warning-color-10, #3b1700);
+
+@success-color-1: var(--td-success-color-1, #e3f9e9);
+@success-color-2: var(--td-success-color-2, #c6f3d7);
+@success-color-3: var(--td-success-color-3, #92dab2);
+@success-color-4: var(--td-success-color-4, #56c08d);
+@success-color-5: var(--td-success-color-5, #2ba471);
+@success-color-6: var(--td-success-color-6, #008858);
+@success-color-7: var(--td-success-color-7, #006c45);
+@success-color-8: var(--td-success-color-8, #005334);
+@success-color-9: var(--td-success-color-9, #003b23);
+@success-color-10: var(--td-success-color-10, #002515);
+
+@gray-color-1: var(--td-gray-color-1, #f3f3f3);
+@gray-color-2: var(--td-gray-color-2, #eeeeee);
+@gray-color-3: var(--td-gray-color-3, #e7e7e7);
+@gray-color-4: var(--td-gray-color-4, #dcdcdc);
+@gray-color-5: var(--td-gray-color-5, #c5c5c5);
+@gray-color-6: var(--td-gray-color-6, #a6a6a6);
+@gray-color-7: var(--td-gray-color-7, #8b8b8b);
+@gray-color-8: var(--td-gray-color-8, #777777);
+@gray-color-9: var(--td-gray-color-9, #5e5e5e);
+@gray-color-10: var(--td-gray-color-10, #4b4b4b);
+@gray-color-11: var(--td-gray-color-11, #383838);
+@gray-color-12: var(--td-gray-color-12, #2c2c2c);
+@gray-color-13: var(--td-gray-color-13, #242424);
+@gray-color-14: var(--td-gray-color-14, #181818);
+
+@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
+@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
+@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, 0.4));
+@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, 0.26));
+
+@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1));
+@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, 0.55));
+@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, 0.35));
+@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, 0.22));
+
+// 边框色
+@border-color: var(--td-border-color, @gray-color-3);
+
+// Spacer
+@spacer: var(--td-spacer, 16rpx);
+@spacer-1: var(--td-spacer-1, 24rpx); // 间距-小-x
+@spacer-2: var(--td-spacer-2, 32rpx); // 间距-小
+@spacer-3: var(--td-spacer-3, 48rpx); // 间距-中
+@spacer-4: var(--td-spacer-4, 64rpx); // 间距-大
+@spacer-5: var(--td-spacer-5, 96rpx); // 间距-大-x
+@spacer-6: var(--td-spacer-6, 160rpx); // 间距-大-xx
+
+// Font
+@font-size: var(--td-font-size, 20rpx);
+@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号
+@font-size-s: var(--td-font-size-s, 24rpx); // 字号-二级字号
+@font-size-base: var(--td-font-size-base, 28rpx); // 字号-三级字号
+@font-size-m: var(--td-font-size-m, 32rpx); // 字号-二级字号
+@font-size-l: var(--td-font-size-l, 36rpx); // 字号-四级字号
+@font-size-xl: var(--td-font-size-xl, 40rpx); // 字号-五级字号
+@font-size-xxl: var(--td-font-size-xxl, 72rpx);
+
+@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
+@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
+
+// 圆角
+@radius-small: var(--td-radius-small, 6rpx);
+@radius-default: var(--td-radius-default, 12rpx);
+@radius-large: var(--td-radius-large, 18rpx);
+@radius-extraLarge: var(--td-radius-extraLarge, 24rpx);
+@radius-round: var(--td-radius-round, 999px);
+@radius-circle: var(--td-radius-circle, 50%);
+
+// 阴影
+@shadow-1: var(
+  --td-shadow-1,
+  0 1px 10px rgba(0, 0, 0, 5%),
+  0 4px 5px rgba(0, 0, 0, 8%),
+  0 2px 4px -1px rgba(0, 0, 0, 12%)
+);
+@shadow-2: var(
+  --td-shadow-2,
+  0 3px 14px 2px rgba(0, 0, 0, 5%),
+  0 8px 10px 1px rgba(0, 0, 0, 6%),
+  0 5px 5px -3px rgba(0, 0, 0, 10%)
+);
+@shadow-3: var(
+  --td-shadow-3,
+  0 6px 30px 5px rgba(0, 0, 0, 5%),
+  0 16px 24px 2px rgba(0, 0, 0, 4%),
+  0 8px 10px -5px rgba(0, 0, 0, 8%)
+);
+@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06));
+
+// 动画
+@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
+@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
+@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
+@anim-duration-base: var(--td-anim-duration-base, 0.2s);
+@anim-duration-moderate: var(--td-anim-duration-moderate, 0.24s);
+@anim-duration-slow: var(--td-anim-duration-slow, 0.28s);
+
+// 容器
+@bg-color-page: var(--td-bg-color-page, @gray-color-1);
+@bg-color-container: var(--td-bg-color-container, @font-white-1);
+@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3);
+
+@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1);
+@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4);
+
+@bg-color-component: var(--td-bg-color-component, @gray-color-3);
+@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6);
+@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2);
+
+@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4);
+@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6);
+
+@component-stroke: var(--td-component-stroke, @gray-color-3);
+@border-level-1-color: var(--td-border-level-1-color, @gray-color-3);
+@component-border: var(--td-component-border, @gray-color-4);
+@border-level-2-color: var(--td-border-level-2-color, @gray-color-4);
+
+// 主题
+@brand-color: var(--td-brand-color, @primary-color-7);
+@brand-color-active: var(--td-brand-color-active, @primary-color-8);
+@brand-color-disabled: var(--td-brand-color-disabled, @primary-color-3);
+@brand-color-focus: var(--td-brand-color-focus, @primary-color-1);
+@brand-color-light: var(--td-brand-color-light, @primary-color-1);
+@brand-color-light-active: var(--td-brand-color-light-active, @primary-color-2);
+
+@error-color: var(--td-error-color, @error-color-6);
+@error-color-active: var(--td-error-color-active, @error-color-7);
+@error-color-disabled: var(--td-error-color-disabled, @error-color-3);
+@error-color-focus: var(--td-error-color-focus, @error-color-2);
+@error-color-light: var(--td-error-color-light, @error-color-1);
+
+@warning-color: var(--td-warning-color, @warning-color-5);
+@warning-color-active: var(--td-warning-color-active, @warning-color-6);
+@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3);
+@warning-color-focus: var(--td-warning-color-focus, @warning-color-2);
+@warning-color-light: var(--td-warning-color-light, @warning-color-1);
+
+@success-color: var(--td-success-color, @success-color-5);
+@success-color-active: var(--td-success-color-active, @success-color-6);
+@success-color-disabled: var(--td-success-color-disabled, @success-color-3);
+@success-color-focus: var(--td-success-color-focus, @success-color-2);
+@success-color-light: var(--td-success-color-light, @success-color-1);
+
+// 文字
+@text-color-primary: var(--td-text-color-primary, @font-gray-1);
+@text-color-secondary: var(--td-text-color-secondary, @font-gray-2);
+@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3);
+@text-color-disabled: var(--td-text-color-disabled, @font-gray-4);
+@text-color-anti: var(--td-text-color-anti, @font-white-1);
+@text-color-brand: var(--td-text-color-brand, @brand-color);
+@text-color-link: var(--td-text-color-link, @brand-color);
+
+// 定位
+@position-fixed-top: var(--td-position-fixed-top, 0);
+
+// 遮罩
+@mask-active: var(--td-mask-active, rgba(0, 0, 0, 0.6)); // 遮罩-弹出
+@mask-disabled: var(--td-mask-disabled, rgba(255, 255, 255, 0.6)); // 遮罩-禁用
+@mask-bg: var(--td-mask-background, rgba(255, 255, 255, 0.96)); // 二维码遮罩
+
+@text-line-height: 1.5;
diff --git a/packages/tdesign-uniapp/components/common/style/base.less b/packages/tdesign-uniapp/components/common/style/base.less
new file mode 100644
index 000000000..4b8938f8e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/base.less
@@ -0,0 +1,4 @@
+// 变量
+@import './_variables.less';
+
+@import './mixins/_index.less';
diff --git a/packages/tdesign-uniapp/components/common/style/icons.less b/packages/tdesign-uniapp/components/common/style/icons.less
new file mode 100644
index 000000000..4463aa76e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/icons.less
@@ -0,0 +1,2132 @@
+@icons: {
+  accessibility-filled: '\E001';
+  accessibility: '\E002';
+  activity-filled: '\E003';
+  activity: '\E004';
+  add-and-subtract: '\E005';
+  add-circle-filled: '\E006';
+  add-circle: '\E007';
+  add-rectangle-filled: '\E008';
+  add-rectangle: '\E009';
+  add: '\E00A';
+  address-book-filled: '\E00B';
+  address-book: '\E00C';
+  adjustment-filled: '\E00D';
+  adjustment: '\E00E';
+  airplay-wave-filled: '\E00F';
+  airplay-wave: '\E010';
+  alarm-add-filled: '\E011';
+  alarm-add: '\E012';
+  alarm-filled: '\E013';
+  alarm-off-filled: '\E014';
+  alarm-off: '\E015';
+  alarm: '\E016';
+  align-bottom: '\E017';
+  align-top: '\E018';
+  align-vertical: '\E019';
+  alpha: '\E01A';
+  analytics-filled: '\E01B';
+  analytics: '\E01C';
+  anchor: '\E01D';
+  angry-filled: '\E01E';
+  angry: '\E01F';
+  animation-1-filled: '\E020';
+  animation-1: '\E021';
+  animation-filled: '\E022';
+  animation: '\E023';
+  anticlockwise-filled: '\E024';
+  anticlockwise: '\E025';
+  api: '\E026';
+  app-filled: '\E027';
+  app: '\E028';
+  apple-filled: '\E029';
+  apple: '\E02A';
+  application-filled: '\E02B';
+  application: '\E02C';
+  architecture-hui-style-filled: '\E02D';
+  architecture-hui-style: '\E02E';
+  archway-1-filled: '\E02F';
+  archway-1: '\E030';
+  archway-filled: '\E031';
+  archway: '\E032';
+  arrow-down-circle-filled: '\E033';
+  arrow-down-circle: '\E034';
+  arrow-down-rectangle-filled: '\E035';
+  arrow-down-rectangle: '\E036';
+  arrow-down: '\E037';
+  arrow-left-circle-filled: '\E038';
+  arrow-left-circle: '\E039';
+  arrow-left-down-circle-filled: '\E03A';
+  arrow-left-down-circle: '\E03B';
+  arrow-left-down: '\E03C';
+  arrow-left-right-1: '\E03D';
+  arrow-left-right-2: '\E03E';
+  arrow-left-right-3: '\E03F';
+  arrow-left-right-circle-filled: '\E040';
+  arrow-left-right-circle: '\E041';
+  arrow-left-up-circle-filled: '\E042';
+  arrow-left-up-circle: '\E043';
+  arrow-left-up: '\E044';
+  arrow-left: '\E045';
+  arrow-right-circle-filled: '\E046';
+  arrow-right-circle: '\E047';
+  arrow-right-down-circle-filled: '\E048';
+  arrow-right-down-circle: '\E049';
+  arrow-right-down: '\E04A';
+  arrow-right-up-circle-filled: '\E04B';
+  arrow-right-up-circle: '\E04C';
+  arrow-right-up: '\E04D';
+  arrow-right: '\E04E';
+  arrow-triangle-down-filled: '\E04F';
+  arrow-triangle-down: '\E050';
+  arrow-triangle-up-filled: '\E051';
+  arrow-triangle-up: '\E052';
+  arrow-up-circle-filled: '\E053';
+  arrow-up-circle: '\E054';
+  arrow-up-down-1: '\E055';
+  arrow-up-down-2: '\E056';
+  arrow-up-down-3: '\E057';
+  arrow-up-down-circle-filled: '\E058';
+  arrow-up-down-circle: '\E059';
+  arrow-up: '\E05A';
+  artboard: '\E05B';
+  article-filled: '\E05C';
+  article: '\E05D';
+  assignment-checked-filled: '\E05E';
+  assignment-checked: '\E05F';
+  assignment-code-filled: '\E060';
+  assignment-code: '\E061';
+  assignment-error-filled: '\E062';
+  assignment-error: '\E063';
+  assignment-filled: '\E064';
+  assignment-user-filled: '\E065';
+  assignment-user: '\E066';
+  assignment: '\E067';
+  attach: '\E068';
+  attic-1-filled: '\E069';
+  attic-1: '\E06A';
+  attic-filled: '\E06B';
+  attic: '\E06C';
+  audio-filled: '\E06D';
+  audio: '\E06E';
+  awkward-filled: '\E06F';
+  awkward: '\E070';
+  backtop-rectangle-filled: '\E071';
+  backtop-rectangle: '\E072';
+  backtop: '\E073';
+  backup-filled: '\E074';
+  backup: '\E075';
+  backward-filled: '\E076';
+  backward: '\E077';
+  bad-laugh-filled: '\E078';
+  bad-laugh: '\E079';
+  bamboo-shoot-filled: '\E07A';
+  bamboo-shoot: '\E07B';
+  banana-filled: '\E07C';
+  banana: '\E07D';
+  barbecue-filled: '\E07E';
+  barbecue: '\E07F';
+  barcode-1: '\E080';
+  barcode: '\E081';
+  base-station: '\E082';
+  battery-add-filled: '\E083';
+  battery-add: '\E084';
+  battery-charging-filled: '\E085';
+  battery-charging: '\E086';
+  battery-filled: '\E087';
+  battery-low-filled: '\E088';
+  battery-low: '\E089';
+  battery: '\E08A';
+  bean-filled: '\E08B';
+  bean: '\E08C';
+  beer-filled: '\E08D';
+  beer: '\E08E';
+  beta: '\E08F';
+  bifurcate-filled: '\E090';
+  bifurcate: '\E091';
+  bill-filled: '\E092';
+  bill: '\E093';
+  bluetooth: '\E094';
+  bone-filled: '\E095';
+  bone: '\E096';
+  book-filled: '\E097';
+  book-open-filled: '\E098';
+  book-open: '\E099';
+  book-unknown-filled: '\E09A';
+  book-unknown: '\E09B';
+  book: '\E09C';
+  bookmark-add-filled: '\E09D';
+  bookmark-add: '\E09E';
+  bookmark-checked-filled: '\E09F';
+  bookmark-checked: '\E0A0';
+  bookmark-double-filled: '\E0A1';
+  bookmark-double: '\E0A2';
+  bookmark-filled: '\E0A3';
+  bookmark-minus-filled: '\E0A4';
+  bookmark-minus: '\E0A5';
+  bookmark: '\E0A6';
+  braces: '\E0A7';
+  brackets: '\E0A8';
+  bread-filled: '\E0A9';
+  bread: '\E0AA';
+  bridge-1-filled: '\E0AB';
+  bridge-1: '\E0AC';
+  bridge-2-filled: '\E0AD';
+  bridge-2: '\E0AE';
+  bridge-3: '\E0AF';
+  bridge-4: '\E0B0';
+  bridge-5-filled: '\E0B1';
+  bridge-5: '\E0B2';
+  bridge-6-filled: '\E0B3';
+  bridge-6: '\E0B4';
+  bridge: '\E0B5';
+  brightness-1-filled: '\E0B6';
+  brightness-1: '\E0B7';
+  brightness-filled: '\E0B8';
+  brightness: '\E0B9';
+  broccoli-filled: '\E0BA';
+  broccoli: '\E0BB';
+  browse-filled: '\E0BC';
+  browse-gallery-filled: '\E0BD';
+  browse-gallery: '\E0BE';
+  browse-off-filled: '\E0BF';
+  browse-off: '\E0C0';
+  browse: '\E0C1';
+  brush-filled: '\E0C2';
+  brush: '\E0C3';
+  bug-filled: '\E0C4';
+  bug-report-filled: '\E0C5';
+  bug-report: '\E0C6';
+  bug: '\E0C7';
+  building-1-filled: '\E0C8';
+  building-1: '\E0C9';
+  building-2-filled: '\E0CA';
+  building-2: '\E0CB';
+  building-3-filled: '\E0CC';
+  building-3: '\E0CD';
+  building-4-filled: '\E0CE';
+  building-4: '\E0CF';
+  building-5-filled: '\E0D0';
+  building-5: '\E0D1';
+  building-filled: '\E0D2';
+  building: '\E0D3';
+  bulletpoint: '\E0D4';
+  button-filled: '\E0D5';
+  button: '\E0D6';
+  cabbage-filled: '\E0D7';
+  cabbage: '\E0D8';
+  cake-filled: '\E0D9';
+  cake: '\E0DA';
+  calculation-1-filled: '\E0DB';
+  calculation-1: '\E0DC';
+  calculation: '\E0DD';
+  calculator-1: '\E0DE';
+  calculator-filled: '\E0DF';
+  calculator: '\E0E0';
+  calendar-1-filled: '\E0E1';
+  calendar-1: '\E0E2';
+  calendar-2-filled: '\E0E3';
+  calendar-2: '\E0E4';
+  calendar-edit-filled: '\E0E5';
+  calendar-edit: '\E0E6';
+  calendar-event-filled: '\E0E7';
+  calendar-event: '\E0E8';
+  calendar-filled: '\E0E9';
+  calendar: '\E0EA';
+  call-1-filled: '\E0EB';
+  call-1: '\E0EC';
+  call-cancel-filled: '\E0ED';
+  call-cancel: '\E0EE';
+  call-filled: '\E0EF';
+  call-forwarded-filled: '\E0F0';
+  call-forwarded: '\E0F1';
+  call-incoming-filled: '\E0F2';
+  call-incoming: '\E0F3';
+  call-off-filled: '\E0F4';
+  call-off: '\E0F5';
+  call: '\E0F6';
+  calm-1-filled: '\E0F7';
+  calm-1: '\E0F8';
+  calm-filled: '\E0F9';
+  calm: '\E0FA';
+  camera-1-filled: '\E0FB';
+  camera-1: '\E0FC';
+  camera-2-filled: '\E0FD';
+  camera-2: '\E0FE';
+  camera-filled: '\E0FF';
+  camera-off-filled: '\E100';
+  camera-off: '\E101';
+  camera: '\E102';
+  candy-filled: '\E103';
+  candy: '\E104';
+  card-filled: '\E105';
+  card: '\E106';
+  cardmembership-filled: '\E107';
+  cardmembership: '\E108';
+  caret-down-small: '\E109';
+  caret-down: '\E10A';
+  caret-left-small: '\E10B';
+  caret-left: '\E10C';
+  caret-right-small: '\E10D';
+  caret-right: '\E10E';
+  caret-up-small: '\E10F';
+  caret-up: '\E110';
+  cart-add-filled: '\E111';
+  cart-add: '\E112';
+  cart-filled: '\E113';
+  cart: '\E114';
+  cast-filled: '\E115';
+  cast: '\E116';
+  castle-1-filled: '\E117';
+  castle-1: '\E118';
+  castle-2-filled: '\E119';
+  castle-2: '\E11A';
+  castle-3-filled: '\E11B';
+  castle-3: '\E11C';
+  castle-4-filled: '\E11D';
+  castle-4: '\E11E';
+  castle-5-filled: '\E11F';
+  castle-5: '\E120';
+  castle-6-filled: '\E121';
+  castle-6: '\E122';
+  castle-7-filled: '\E123';
+  castle-7: '\E124';
+  castle-filled: '\E125';
+  castle: '\E126';
+  cat-filled: '\E127';
+  cat: '\E128';
+  catalog-filled: '\E129';
+  catalog: '\E12A';
+  cd-filled: '\E12B';
+  cd: '\E12C';
+  celsius: '\E12D';
+  center-focus-strong-filled: '\E12E';
+  center-focus-strong: '\E12F';
+  centimeter: '\E130';
+  certificate-1-filled: '\E131';
+  certificate-1: '\E132';
+  certificate-filled: '\E133';
+  certificate: '\E134';
+  chart-3d-filled: '\E135';
+  chart-3d: '\E136';
+  chart-add-filled: '\E137';
+  chart-add: '\E138';
+  chart-analytics: '\E139';
+  chart-area-filled: '\E13A';
+  chart-area-multi-filled: '\E13B';
+  chart-area-multi: '\E13C';
+  chart-area: '\E13D';
+  chart-bar-filled: '\E13E';
+  chart-bar: '\E13F';
+  chart-bubble-filled: '\E140';
+  chart-bubble: '\E141';
+  chart-column-filled: '\E142';
+  chart-column: '\E143';
+  chart-combo-filled: '\E144';
+  chart-combo: '\E145';
+  chart-filled: '\E146';
+  chart-line-data-1: '\E147';
+  chart-line-data: '\E148';
+  chart-line-multi: '\E149';
+  chart-line: '\E14A';
+  chart-maximum: '\E14B';
+  chart-median: '\E14C';
+  chart-minimum: '\E14D';
+  chart-pie-filled: '\E14E';
+  chart-pie: '\E14F';
+  chart-radar-filled: '\E150';
+  chart-radar: '\E151';
+  chart-radial: '\E152';
+  chart-ring-1-filled: '\E153';
+  chart-ring-1: '\E154';
+  chart-ring-filled: '\E155';
+  chart-ring: '\E156';
+  chart-scatter: '\E157';
+  chart-stacked-filled: '\E158';
+  chart-stacked: '\E159';
+  chart: '\E15A';
+  chat-add-filled: '\E15B';
+  chat-add: '\E15C';
+  chat-bubble-1-filled: '\E15D';
+  chat-bubble-1: '\E15E';
+  chat-bubble-add-filled: '\E15F';
+  chat-bubble-add: '\E160';
+  chat-bubble-error-filled: '\E161';
+  chat-bubble-error: '\E162';
+  chat-bubble-filled: '\E163';
+  chat-bubble-help-filled: '\E164';
+  chat-bubble-help: '\E165';
+  chat-bubble-history-filled: '\E166';
+  chat-bubble-history: '\E167';
+  chat-bubble-locked-filled: '\E168';
+  chat-bubble-locked: '\E169';
+  chat-bubble-smile-filled: '\E16A';
+  chat-bubble-smile: '\E16B';
+  chat-bubble: '\E16C';
+  chat-checked-filled: '\E16D';
+  chat-checked: '\E16E';
+  chat-clear-filled: '\E16F';
+  chat-clear: '\E170';
+  chat-double-filled: '\E171';
+  chat-double: '\E172';
+  chat-error-filled: '\E173';
+  chat-error: '\E174';
+  chat-filled: '\E175';
+  chat-heart-filled: '\E176';
+  chat-heart: '\E177';
+  chat-message-filled: '\E178';
+  chat-message: '\E179';
+  chat-off-filled: '\E17A';
+  chat-off: '\E17B';
+  chat-poll-filled: '\E17C';
+  chat-poll: '\E17D';
+  chat-setting-filled: '\E17E';
+  chat-setting: '\E17F';
+  chat: '\E180';
+  check-circle-filled: '\E181';
+  check-circle: '\E182';
+  check-double: '\E183';
+  check-rectangle-filled: '\E184';
+  check-rectangle: '\E185';
+  check: '\E186';
+  cheese-filled: '\E187';
+  cheese: '\E188';
+  cherry-filled: '\E189';
+  cherry: '\E18A';
+  chevron-down-circle-filled: '\E18B';
+  chevron-down-circle: '\E18C';
+  chevron-down-double-s: '\E18D';
+  chevron-down-double: '\E18E';
+  chevron-down-rectangle-filled: '\E18F';
+  chevron-down-rectangle: '\E190';
+  chevron-down-s: '\E191';
+  chevron-down: '\E192';
+  chevron-left-circle-filled: '\E193';
+  chevron-left-circle: '\E194';
+  chevron-left-double-s: '\E195';
+  chevron-left-double: '\E196';
+  chevron-left-rectangle-filled: '\E197';
+  chevron-left-rectangle: '\E198';
+  chevron-left-s: '\E199';
+  chevron-left: '\E19A';
+  chevron-right-circle-filled: '\E19B';
+  chevron-right-circle: '\E19C';
+  chevron-right-double-s: '\E19D';
+  chevron-right-double: '\E19E';
+  chevron-right-rectangle-filled: '\E19F';
+  chevron-right-rectangle: '\E1A0';
+  chevron-right-s: '\E1A1';
+  chevron-right: '\E1A2';
+  chevron-up-circle-filled: '\E1A3';
+  chevron-up-circle: '\E1A4';
+  chevron-up-double-s: '\E1A5';
+  chevron-up-double: '\E1A6';
+  chevron-up-rectangle-filled: '\E1A7';
+  chevron-up-rectangle: '\E1A8';
+  chevron-up-s: '\E1A9';
+  chevron-up: '\E1AA';
+  chicken: '\E1AB';
+  chili-filled: '\E1AC';
+  chili: '\E1AD';
+  chimney-1-filled: '\E1AE';
+  chimney-1: '\E1AF';
+  chimney-2-filled: '\E1B0';
+  chimney-2: '\E1B1';
+  chimney-filled: '\E1B2';
+  chimney: '\E1B3';
+  chinese-cabbage-filled: '\E1B4';
+  chinese-cabbage: '\E1B5';
+  church-filled: '\E1B6';
+  church: '\E1B7';
+  circle-filled: '\E1B8';
+  circle: '\E1B9';
+  city-1-filled: '\E1BA';
+  city-1: '\E1BB';
+  city-10-filled: '\E1BC';
+  city-10: '\E1BD';
+  city-11-filled: '\E1BE';
+  city-11: '\E1BF';
+  city-12-filled: '\E1C0';
+  city-12: '\E1C1';
+  city-13-filled: '\E1C2';
+  city-13: '\E1C3';
+  city-14-filled: '\E1C4';
+  city-14: '\E1C5';
+  city-15-filled: '\E1C6';
+  city-15: '\E1C7';
+  city-2-filled: '\E1C8';
+  city-2: '\E1C9';
+  city-3-filled: '\E1CA';
+  city-3: '\E1CB';
+  city-4-filled: '\E1CC';
+  city-4: '\E1CD';
+  city-5-filled: '\E1CE';
+  city-5: '\E1CF';
+  city-6-filled: '\E1D0';
+  city-6: '\E1D1';
+  city-7-filled: '\E1D2';
+  city-7: '\E1D3';
+  city-8-filled: '\E1D4';
+  city-8: '\E1D5';
+  city-9-filled: '\E1D6';
+  city-9: '\E1D7';
+  city-ancient-1-filled: '\E1D8';
+  city-ancient-1: '\E1D9';
+  city-ancient-2-filled: '\E1DA';
+  city-ancient-2: '\E1DB';
+  city-ancient-filled: '\E1DC';
+  city-ancient: '\E1DD';
+  city-filled: '\E1DE';
+  city: '\E1DF';
+  clear-filled: '\E1E0';
+  clear-formatting-1-filled: '\E1E1';
+  clear-formatting-1: '\E1E2';
+  clear-formatting-filled: '\E1E3';
+  clear-formatting: '\E1E4';
+  clear: '\E1E5';
+  close-circle-filled: '\E1E6';
+  close-circle: '\E1E7';
+  close-octagon-filled: '\E1E8';
+  close-octagon: '\E1E9';
+  close-rectangle-filled: '\E1EA';
+  close-rectangle: '\E1EB';
+  close: '\E1EC';
+  cloud-download: '\E1ED';
+  cloud-filled: '\E1EE';
+  cloud-upload: '\E1EF';
+  cloud: '\E1F0';
+  cloudy-day-filled: '\E1F1';
+  cloudy-day: '\E1F2';
+  cloudy-night-filled: '\E1F3';
+  cloudy-night-rain-filled: '\E1F4';
+  cloudy-night-rain: '\E1F5';
+  cloudy-night: '\E1F6';
+  cloudy-rain-filled: '\E1F7';
+  cloudy-rain: '\E1F8';
+  cloudy-sunny-filled: '\E1F9';
+  cloudy-sunny: '\E1FA';
+  code-1: '\E1FB';
+  code-off: '\E1FC';
+  code: '\E1FD';
+  cola-filled: '\E1FE';
+  cola: '\E1FF';
+  collage-filled: '\E200';
+  collage: '\E201';
+  collection-filled: '\E202';
+  collection: '\E203';
+  color-invert-filled: '\E204';
+  color-invert: '\E205';
+  combination-filled: '\E206';
+  combination: '\E207';
+  command: '\E208';
+  compass-1-filled: '\E209';
+  compass-1: '\E20A';
+  compass-filled: '\E20B';
+  compass: '\E20C';
+  component-breadcrumb-filled: '\E20D';
+  component-breadcrumb: '\E20E';
+  component-checkbox-filled: '\E20F';
+  component-checkbox: '\E210';
+  component-divider-horizontal-filled: '\E211';
+  component-divider-horizontal: '\E212';
+  component-divider-vertical-filled: '\E213';
+  component-divider-vertical: '\E214';
+  component-dropdown-filled: '\E215';
+  component-dropdown: '\E216';
+  component-grid-filled: '\E217';
+  component-grid: '\E218';
+  component-input-filled: '\E219';
+  component-input: '\E21A';
+  component-layout-filled: '\E21B';
+  component-layout: '\E21C';
+  component-radio: '\E21D';
+  component-space-filled: '\E21E';
+  component-space: '\E21F';
+  component-steps-filled: '\E220';
+  component-steps: '\E221';
+  component-switch-filled: '\E222';
+  component-switch: '\E223';
+  constraint: '\E224';
+  contrast-1-filled: '\E225';
+  contrast-1: '\E226';
+  contrast-filled: '\E227';
+  contrast: '\E228';
+  control-platform-filled: '\E229';
+  control-platform: '\E22A';
+  cooperate-filled: '\E22B';
+  cooperate: '\E22C';
+  coordinate-system-filled: '\E22D';
+  coordinate-system: '\E22E';
+  copy-filled: '\E22F';
+  copy: '\E230';
+  copyright-filled: '\E231';
+  copyright: '\E232';
+  corn-filled: '\E233';
+  corn: '\E234';
+  coupon-filled: '\E235';
+  coupon: '\E236';
+  course-filled: '\E237';
+  course: '\E238';
+  cpu-filled: '\E239';
+  cpu: '\E23A';
+  crack-filled: '\E23B';
+  crack: '\E23C';
+  creditcard-add-filled: '\E23D';
+  creditcard-add: '\E23E';
+  creditcard-filled: '\E23F';
+  creditcard-off-filled: '\E240';
+  creditcard-off: '\E241';
+  creditcard: '\E242';
+  crooked-smile-filled: '\E243';
+  crooked-smile: '\E244';
+  cry-and-laugh-filled: '\E245';
+  cry-and-laugh: '\E246';
+  cry-loudly-filled: '\E247';
+  cry-loudly: '\E248';
+  css3-filled: '\E249';
+  css3: '\E24A';
+  cucumber: '\E24B';
+  currency-exchange: '\E24C';
+  cursor-filled: '\E24D';
+  cursor: '\E24E';
+  curtain-filled: '\E24F';
+  curtain: '\E250';
+  curve: '\E251';
+  cut-1: '\E252';
+  cut: '\E253';
+  dam-1-filled: '\E254';
+  dam-1: '\E255';
+  dam-2-filled: '\E256';
+  dam-2: '\E257';
+  dam-3-filled: '\E258';
+  dam-3: '\E259';
+  dam-4-filled: '\E25A';
+  dam-4: '\E25B';
+  dam-5-filled: '\E25C';
+  dam-5: '\E25D';
+  dam-6-filled: '\E25E';
+  dam-6: '\E25F';
+  dam-7-filled: '\E260';
+  dam-7: '\E261';
+  dam-filled: '\E262';
+  dam: '\E263';
+  dart-board-filled: '\E264';
+  dart-board: '\E265';
+  dashboard-1-filled: '\E266';
+  dashboard-1: '\E267';
+  dashboard-filled: '\E268';
+  dashboard: '\E269';
+  data-base-filled: '\E26A';
+  data-base: '\E26B';
+  data-checked-filled: '\E26C';
+  data-checked: '\E26D';
+  data-display: '\E26E';
+  data-error-filled: '\E26F';
+  data-error: '\E270';
+  data-filled: '\E271';
+  data-search-filled: '\E272';
+  data-search: '\E273';
+  data: '\E274';
+  delete-1-filled: '\E275';
+  delete-1: '\E276';
+  delete-filled: '\E277';
+  delete-time-filled: '\E278';
+  delete-time: '\E279';
+  delete: '\E27A';
+  delta-filled: '\E27B';
+  delta: '\E27C';
+  depressed-filled: '\E27D';
+  depressed: '\E27E';
+  desktop-1-filled: '\E27F';
+  desktop-1: '\E280';
+  desktop-filled: '\E281';
+  desktop: '\E282';
+  despise-filled: '\E283';
+  despise: '\E284';
+  device-filled: '\E285';
+  device: '\E286';
+  discount-filled: '\E287';
+  discount: '\E288';
+  dissatisfaction-filled: '\E289';
+  dissatisfaction: '\E28A';
+  divide: '\E28B';
+  dividers-1: '\E28C';
+  dividers: '\E28D';
+  doge-filled: '\E28E';
+  doge: '\E28F';
+  double-storey-filled: '\E290';
+  double-storey: '\E291';
+  download-1: '\E292';
+  download-2-filled: '\E293';
+  download-2: '\E294';
+  download: '\E295';
+  downscale: '\E296';
+  drag-drop: '\E297';
+  drag-move: '\E298';
+  drink-filled: '\E299';
+  drink: '\E29A';
+  drumstick-filled: '\E29B';
+  drumstick: '\E29C';
+  dv-filled: '\E29D';
+  dv: '\E29E';
+  dvd-filled: '\E29F';
+  dvd: '\E2A0';
+  earphone-filled: '\E2A1';
+  earphone: '\E2A2';
+  earth-filled: '\E2A3';
+  earth: '\E2A4';
+  edit-1-filled: '\E2A5';
+  edit-1: '\E2A6';
+  edit-2-filled: '\E2A7';
+  edit-2: '\E2A8';
+  edit-filled: '\E2A9';
+  edit-off-filled: '\E2AA';
+  edit-off: '\E2AB';
+  edit: '\E2AC';
+  education-filled: '\E2AD';
+  education: '\E2AE';
+  eggplant-filled: '\E2AF';
+  eggplant: '\E2B0';
+  ellipsis: '\E2B1';
+  emo-emotional-filled: '\E2B2';
+  emo-emotional: '\E2B3';
+  enter: '\E2B4';
+  equal: '\E2B5';
+  error-circle-filled: '\E2B6';
+  error-circle: '\E2B7';
+  error-triangle-filled: '\E2B8';
+  error-triangle: '\E2B9';
+  error: '\E2BA';
+  excited-1-filled: '\E2BB';
+  excited-1: '\E2BC';
+  excited-filled: '\E2BD';
+  excited: '\E2BE';
+  expand-down-filled: '\E2BF';
+  expand-down: '\E2C0';
+  expand-horizontal: '\E2C1';
+  expand-up-filled: '\E2C2';
+  expand-up: '\E2C3';
+  expand-vertical: '\E2C4';
+  explore-filled: '\E2C5';
+  explore-off-filled: '\E2C6';
+  explore-off: '\E2C7';
+  explore: '\E2C8';
+  exposure-filled: '\E2C9';
+  exposure: '\E2CA';
+  extension-filled: '\E2CB';
+  extension-off-filled: '\E2CC';
+  extension-off: '\E2CD';
+  extension: '\E2CE';
+  face-retouching-filled: '\E2CF';
+  face-retouching: '\E2D0';
+  fact-check-filled: '\E2D1';
+  fact-check: '\E2D2';
+  fahrenheit-scale: '\E2D3';
+  feel-at-ease-filled: '\E2D4';
+  feel-at-ease: '\E2D5';
+  ferocious-filled: '\E2D6';
+  ferocious: '\E2D7';
+  ferris-wheel-filled: '\E2D8';
+  ferris-wheel: '\E2D9';
+  file-1-filled: '\E2DA';
+  file-1: '\E2DB';
+  file-add-1-filled: '\E2DC';
+  file-add-1: '\E2DD';
+  file-add-filled: '\E2DE';
+  file-add: '\E2DF';
+  file-attachment-filled: '\E2E0';
+  file-attachment: '\E2E1';
+  file-blocked-filled: '\E2E2';
+  file-blocked: '\E2E3';
+  file-code-1-filled: '\E2E4';
+  file-code-1: '\E2E5';
+  file-code-filled: '\E2E6';
+  file-code: '\E2E7';
+  file-copy-filled: '\E2E8';
+  file-copy: '\E2E9';
+  file-download-filled: '\E2EA';
+  file-download: '\E2EB';
+  file-excel-filled: '\E2EC';
+  file-excel: '\E2ED';
+  file-export-filled: '\E2EE';
+  file-export: '\E2EF';
+  file-filled: '\E2F0';
+  file-icon-filled: '\E2F1';
+  file-icon: '\E2F2';
+  file-image-filled: '\E2F3';
+  file-image: '\E2F4';
+  file-import-filled: '\E2F5';
+  file-import: '\E2F6';
+  file-locked-filled: '\E2F7';
+  file-locked: '\E2F8';
+  file-minus-filled: '\E2F9';
+  file-minus: '\E2FA';
+  file-music-filled: '\E2FB';
+  file-music: '\E2FC';
+  file-onenote-filled: '\E2FD';
+  file-onenote: '\E2FE';
+  file-outlook-filled: '\E2FF';
+  file-outlook: '\E300';
+  file-paste-filled: '\E301';
+  file-paste: '\E302';
+  file-pdf-filled: '\E303';
+  file-pdf: '\E304';
+  file-powerpoint-filled: '\E305';
+  file-powerpoint: '\E306';
+  file-restore-filled: '\E307';
+  file-restore: '\E308';
+  file-safety-filled: '\E309';
+  file-safety: '\E30A';
+  file-search-filled: '\E30B';
+  file-search: '\E30C';
+  file-setting-filled: '\E30D';
+  file-setting: '\E30E';
+  file-teams-filled: '\E30F';
+  file-teams: '\E310';
+  file-transmit-double-filled: '\E311';
+  file-transmit-double: '\E312';
+  file-transmit-filled: '\E313';
+  file-transmit: '\E314';
+  file-unknown-filled: '\E315';
+  file-unknown: '\E316';
+  file-unlocked-filled: '\E317';
+  file-unlocked: '\E318';
+  file-word-filled: '\E319';
+  file-word: '\E31A';
+  file-zip-filled: '\E31B';
+  file-zip: '\E31C';
+  file: '\E31D';
+  fill-color-1-filled: '\E31E';
+  fill-color-1: '\E31F';
+  fill-color-filled: '\E320';
+  fill-color: '\E321';
+  film-1-filled: '\E322';
+  film-1: '\E323';
+  film-filled: '\E324';
+  film: '\E325';
+  filter-1-filled: '\E326';
+  filter-1: '\E327';
+  filter-2-filled: '\E328';
+  filter-2: '\E329';
+  filter-3-filled: '\E32A';
+  filter-3: '\E32B';
+  filter-clear-filled: '\E32C';
+  filter-clear: '\E32D';
+  filter-filled: '\E32E';
+  filter-off-filled: '\E32F';
+  filter-off: '\E330';
+  filter-sort-filled: '\E331';
+  filter-sort: '\E332';
+  filter: '\E333';
+  fingerprint-1: '\E334';
+  fingerprint-2: '\E335';
+  fingerprint-3: '\E336';
+  fingerprint: '\E337';
+  fish-filled: '\E338';
+  fish: '\E339';
+  flag-1-filled: '\E33A';
+  flag-1: '\E33B';
+  flag-2-filled: '\E33C';
+  flag-2: '\E33D';
+  flag-3-filled: '\E33E';
+  flag-3: '\E33F';
+  flag-4-filled: '\E340';
+  flag-4: '\E341';
+  flag-filled: '\E342';
+  flag: '\E343';
+  flashlight-filled: '\E344';
+  flashlight: '\E345';
+  flight-landing-filled: '\E346';
+  flight-landing: '\E347';
+  flight-takeoff-filled: '\E348';
+  flight-takeoff: '\E349';
+  flip-smiling-face-filled: '\E34A';
+  flip-smiling-face: '\E34B';
+  flip-to-back-filled: '\E34C';
+  flip-to-back: '\E34D';
+  flip-to-front-filled: '\E34E';
+  flip-to-front: '\E34F';
+  focus-filled: '\E350';
+  focus: '\E351';
+  fog-filled: '\E352';
+  fog-night-filled: '\E353';
+  fog-night: '\E354';
+  fog-sunny-filled: '\E355';
+  fog-sunny: '\E356';
+  fog: '\E357';
+  folder-1-filled: '\E358';
+  folder-1: '\E359';
+  folder-add-1-filled: '\E35A';
+  folder-add-1: '\E35B';
+  folder-add-filled: '\E35C';
+  folder-add: '\E35D';
+  folder-blocked-filled: '\E35E';
+  folder-blocked: '\E35F';
+  folder-details-filled: '\E360';
+  folder-details: '\E361';
+  folder-export-filled: '\E362';
+  folder-export: '\E363';
+  folder-filled: '\E364';
+  folder-import-filled: '\E365';
+  folder-import: '\E366';
+  folder-locked-filled: '\E367';
+  folder-locked: '\E368';
+  folder-minus-filled: '\E369';
+  folder-minus: '\E36A';
+  folder-move-filled: '\E36B';
+  folder-move: '\E36C';
+  folder-off-filled: '\E36D';
+  folder-off: '\E36E';
+  folder-open-1-filled: '\E36F';
+  folder-open-1: '\E370';
+  folder-open-filled: '\E371';
+  folder-open: '\E372';
+  folder-search-filled: '\E373';
+  folder-search: '\E374';
+  folder-setting-filled: '\E375';
+  folder-setting: '\E376';
+  folder-shared-filled: '\E377';
+  folder-shared: '\E378';
+  folder-unlocked-filled: '\E379';
+  folder-unlocked: '\E37A';
+  folder-zip-filled: '\E37B';
+  folder-zip: '\E37C';
+  folder: '\E37D';
+  forest-filled: '\E37E';
+  forest: '\E37F';
+  fork-filled: '\E380';
+  fork: '\E381';
+  form-filled: '\E382';
+  form: '\E383';
+  format-horizontal-align-bottom: '\E384';
+  format-horizontal-align-center: '\E385';
+  format-horizontal-align-top: '\E386';
+  format-vertical-align-center: '\E387';
+  format-vertical-align-left: '\E388';
+  format-vertical-align-right: '\E389';
+  forward-filled: '\E38A';
+  forward: '\E38B';
+  frame-1-filled: '\E38C';
+  frame-1: '\E38D';
+  frame-filled: '\E38E';
+  frame: '\E38F';
+  fries-filled: '\E390';
+  fries: '\E391';
+  fullscreen-1: '\E392';
+  fullscreen-2: '\E393';
+  fullscreen-exit-1: '\E394';
+  fullscreen-exit: '\E395';
+  fullscreen: '\E396';
+  function-curve: '\E397';
+  functions-1: '\E398';
+  functions: '\E399';
+  gamepad-1-filled: '\E39A';
+  gamepad-1: '\E39B';
+  gamepad-filled: '\E39C';
+  gamepad: '\E39D';
+  gamma: '\E39E';
+  garlic-filled: '\E39F';
+  garlic: '\E3A0';
+  gender-female: '\E3A1';
+  gender-male: '\E3A2';
+  gesture-applause-filled: '\E3A3';
+  gesture-applause: '\E3A4';
+  gesture-click-filled: '\E3A5';
+  gesture-click: '\E3A6';
+  gesture-down-filled: '\E3A7';
+  gesture-down: '\E3A8';
+  gesture-expansion-filled: '\E3A9';
+  gesture-expansion: '\E3AA';
+  gesture-left-filled: '\E3AB';
+  gesture-left-slip-filled: '\E3AC';
+  gesture-left-slip: '\E3AD';
+  gesture-left: '\E3AE';
+  gesture-open-filled: '\E3AF';
+  gesture-open: '\E3B0';
+  gesture-pray-filled: '\E3B1';
+  gesture-pray: '\E3B2';
+  gesture-press-filled: '\E3B3';
+  gesture-press: '\E3B4';
+  gesture-ranslation-filled: '\E3B5';
+  gesture-ranslation: '\E3B6';
+  gesture-right-filled: '\E3B7';
+  gesture-right-slip-filled: '\E3B8';
+  gesture-right-slip: '\E3B9';
+  gesture-right: '\E3BA';
+  gesture-slide-left-and-right-filled: '\E3BB';
+  gesture-slide-left-and-right: '\E3BC';
+  gesture-slide-up-filled: '\E3BD';
+  gesture-slide-up: '\E3BE';
+  gesture-typing-filled: '\E3BF';
+  gesture-typing: '\E3C0';
+  gesture-up-and-down-filled: '\E3C1';
+  gesture-up-and-down: '\E3C2';
+  gesture-up-filled: '\E3C3';
+  gesture-up: '\E3C4';
+  gesture-wipe-down-filled: '\E3C5';
+  gesture-wipe-down: '\E3C6';
+  gift-filled: '\E3C7';
+  gift: '\E3C8';
+  giggle-filled: '\E3C9';
+  giggle: '\E3CA';
+  git-branch-filled: '\E3CB';
+  git-branch: '\E3CC';
+  git-commit-filled: '\E3CD';
+  git-commit: '\E3CE';
+  git-merge-filled: '\E3CF';
+  git-merge: '\E3D0';
+  git-pull-request-filled: '\E3D1';
+  git-pull-request: '\E3D2';
+  git-repository-commits-filled: '\E3D3';
+  git-repository-commits: '\E3D4';
+  git-repository-filled: '\E3D5';
+  git-repository-private-filled: '\E3D6';
+  git-repository-private: '\E3D7';
+  git-repository: '\E3D8';
+  gps-filled: '\E3D9';
+  gps: '\E3DA';
+  grape-filled: '\E3DB';
+  grape: '\E3DC';
+  greater-than-or-equal: '\E3DD';
+  greater-than: '\E3DE';
+  green-onion: '\E3DF';
+  grid-add-filled: '\E3E0';
+  grid-add: '\E3E1';
+  grid-view-filled: '\E3E2';
+  grid-view: '\E3E3';
+  guitar-filled: '\E3E4';
+  guitar: '\E3E5';
+  hamburger-filled: '\E3E6';
+  hamburger: '\E3E7';
+  happy-filled: '\E3E8';
+  happy: '\E3E9';
+  hard-disk-storage-filled: '\E3EA';
+  hard-disk-storage: '\E3EB';
+  hard-drive-filled: '\E3EC';
+  hard-drive: '\E3ED';
+  hashtag: '\E3EE';
+  hd-filled: '\E3EF';
+  hd: '\E3F0';
+  heart-filled: '\E3F1';
+  heart: '\E3F2';
+  help-circle-filled: '\E3F3';
+  help-circle: '\E3F4';
+  help-rectangle-filled: '\E3F5';
+  help-rectangle: '\E3F6';
+  help: '\E3F7';
+  highlight-1-filled: '\E3F8';
+  highlight-1: '\E3F9';
+  highlight: '\E3FA';
+  history-setting: '\E3FB';
+  history: '\E3FC';
+  home-filled: '\E3FD';
+  home: '\E3FE';
+  horizontal-filled: '\E3FF';
+  horizontal: '\E400';
+  hospital-1-filled: '\E401';
+  hospital-1: '\E402';
+  hospital-filled: '\E403';
+  hospital: '\E404';
+  hotspot-wave-filled: '\E405';
+  hotspot-wave: '\E406';
+  hourglass-filled: '\E407';
+  hourglass: '\E408';
+  houses-1-filled: '\E409';
+  houses-1: '\E40A';
+  houses-2-filled: '\E40B';
+  houses-2: '\E40C';
+  houses-filled: '\E40D';
+  houses: '\E40E';
+  html5-filled: '\E40F';
+  html5: '\E410';
+  https-filled: '\E411';
+  https: '\E412';
+  ice-cream-filled: '\E413';
+  ice-cream: '\E414';
+  icon-filled: '\E415';
+  icon: '\E416';
+  image-1-filled: '\E417';
+  image-1: '\E418';
+  image-add-filled: '\E419';
+  image-add: '\E41A';
+  image-edit-filled: '\E41B';
+  image-edit: '\E41C';
+  image-error-filled: '\E41D';
+  image-error: '\E41E';
+  image-filled: '\E41F';
+  image-off-filled: '\E420';
+  image-off: '\E421';
+  image-search-filled: '\E422';
+  image-search: '\E423';
+  image: '\E424';
+  indent-left: '\E425';
+  indent-right: '\E426';
+  indicator-filled: '\E427';
+  indicator: '\E428';
+  info-circle-filled: '\E429';
+  info-circle: '\E42A';
+  ink-filled: '\E42B';
+  ink: '\E42C';
+  install-desktop-filled: '\E42D';
+  install-desktop: '\E42E';
+  install-filled: '\E42F';
+  install-mobile-filled: '\E430';
+  install-mobile: '\E431';
+  install: '\E432';
+  institution-checked-filled: '\E433';
+  institution-checked: '\E434';
+  institution-filled: '\E435';
+  institution: '\E436';
+  internet-filled: '\E437';
+  internet: '\E438';
+  ipod-filled: '\E439';
+  ipod: '\E43A';
+  joyful-filled: '\E43B';
+  joyful: '\E43C';
+  jump-double: '\E43D';
+  jump-off: '\E43E';
+  jump: '\E43F';
+  key-filled: '\E440';
+  key: '\E441';
+  keyboard-filled: '\E442';
+  keyboard: '\E443';
+  laptop-filled: '\E444';
+  laptop: '\E445';
+  layers-filled: '\E446';
+  layers: '\E447';
+  layout-filled: '\E448';
+  layout: '\E449';
+  leaderboard-filled: '\E44A';
+  leaderboard: '\E44B';
+  lemon-filled: '\E44C';
+  lemon-slice-filled: '\E44D';
+  lemon-slice: '\E44E';
+  lemon: '\E44F';
+  less-than-or-equal: '\E450';
+  less-than: '\E451';
+  letters-a: '\E452';
+  letters-b: '\E453';
+  letters-c: '\E454';
+  letters-d: '\E455';
+  letters-e: '\E456';
+  letters-f: '\E457';
+  letters-g: '\E458';
+  letters-h: '\E459';
+  letters-i: '\E45A';
+  letters-j: '\E45B';
+  letters-k: '\E45C';
+  letters-l: '\E45D';
+  letters-m: '\E45E';
+  letters-n: '\E45F';
+  letters-o: '\E460';
+  letters-p: '\E461';
+  letters-q: '\E462';
+  letters-r: '\E463';
+  letters-s: '\E464';
+  letters-t: '\E465';
+  letters-u: '\E466';
+  letters-v: '\E467';
+  letters-w: '\E468';
+  letters-x: '\E469';
+  letters-y: '\E46A';
+  letters-z: '\E46B';
+  lightbulb-circle-filled: '\E46C';
+  lightbulb-circle: '\E46D';
+  lightbulb-filled: '\E46E';
+  lightbulb: '\E46F';
+  lighthouse-1-filled: '\E470';
+  lighthouse-1: '\E471';
+  lighthouse-2-filled: '\E472';
+  lighthouse-2: '\E473';
+  lighthouse-filled: '\E474';
+  lighthouse: '\E475';
+  lighting-circle-filled: '\E476';
+  lighting-circle: '\E477';
+  line-height: '\E478';
+  link-1: '\E479';
+  link-unlink: '\E47A';
+  link: '\E47B';
+  liquor-filled: '\E47C';
+  liquor: '\E47D';
+  list-numbered: '\E47E';
+  load: '\E47F';
+  loading: '\E480';
+  location-1-filled: '\E481';
+  location-1: '\E482';
+  location-enlargement-filled: '\E483';
+  location-enlargement: '\E484';
+  location-error-filled: '\E485';
+  location-error: '\E486';
+  location-filled: '\E487';
+  location-parking-place-filled: '\E488';
+  location-parking-place: '\E489';
+  location-reduction-filled: '\E48A';
+  location-reduction: '\E48B';
+  location-setting-filled: '\E48C';
+  location-setting: '\E48D';
+  location: '\E48E';
+  lock-off-filled: '\E48F';
+  lock-off: '\E490';
+  lock-on-filled: '\E491';
+  lock-on: '\E492';
+  lock-time-filled: '\E493';
+  lock-time: '\E494';
+  login: '\E495';
+  logo-adobe-illustrate-filled: '\E496';
+  logo-adobe-illustrate: '\E497';
+  logo-adobe-lightroom-filled: '\E498';
+  logo-adobe-lightroom: '\E499';
+  logo-adobe-photoshop-filled: '\E49A';
+  logo-adobe-photoshop: '\E49B';
+  logo-alipay-filled: '\E49C';
+  logo-alipay: '\E49D';
+  logo-android-filled: '\E49E';
+  logo-android: '\E49F';
+  logo-apple-filled: '\E4A0';
+  logo-apple: '\E4A1';
+  logo-behance-filled: '\E4A2';
+  logo-behance: '\E4A3';
+  logo-chrome-filled: '\E4A4';
+  logo-chrome: '\E4A5';
+  logo-cinema4d-filled: '\E4A6';
+  logo-cinema4d: '\E4A7';
+  logo-cnb-filled: '\E4A8';
+  logo-cnb: '\E4A9';
+  logo-codepen: '\E4AA';
+  logo-codesandbox: '\E4AB';
+  logo-dribbble-filled: '\E4AC';
+  logo-dribbble: '\E4AD';
+  logo-facebook-filled: '\E4AE';
+  logo-facebook: '\E4AF';
+  logo-figma-filled: '\E4B0';
+  logo-figma: '\E4B1';
+  logo-framer-filled: '\E4B2';
+  logo-framer: '\E4B3';
+  logo-github-filled: '\E4B4';
+  logo-github: '\E4B5';
+  logo-gitlab-filled: '\E4B6';
+  logo-gitlab: '\E4B7';
+  logo-ie-filled: '\E4B8';
+  logo-ie: '\E4B9';
+  logo-instagram-filled: '\E4BA';
+  logo-instagram: '\E4BB';
+  logo-miniprogram-filled: '\E4BC';
+  logo-miniprogram: '\E4BD';
+  logo-qq-filled: '\E4BE';
+  logo-qq: '\E4BF';
+  logo-stackblitz-filled: '\E4C0';
+  logo-stackblitz: '\E4C1';
+  logo-twitter-filled: '\E4C2';
+  logo-twitter: '\E4C3';
+  logo-wechat-stroke-filled: '\E4C4';
+  logo-wechat-stroke: '\E4C5';
+  logo-wechatpay-filled: '\E4C6';
+  logo-wechatpay: '\E4C7';
+  logo-wecom-filled: '\E4C8';
+  logo-wecom: '\E4C9';
+  logo-windows-filled: '\E4CA';
+  logo-windows: '\E4CB';
+  logo-youtube-filled: '\E4CC';
+  logo-youtube: '\E4CD';
+  logout: '\E4CE';
+  look-around-filled: '\E4CF';
+  look-around: '\E4D0';
+  loudspeaker-filled: '\E4D1';
+  loudspeaker: '\E4D2';
+  mail-filled: '\E4D3';
+  mail: '\E4D4';
+  map-3d-filled: '\E4D5';
+  map-3d: '\E4D6';
+  map-add-filled: '\E4D7';
+  map-add: '\E4D8';
+  map-aiming-filled: '\E4D9';
+  map-aiming: '\E4DA';
+  map-blocked-filled: '\E4DB';
+  map-blocked: '\E4DC';
+  map-bubble-filled: '\E4DD';
+  map-bubble: '\E4DE';
+  map-cancel-filled: '\E4DF';
+  map-cancel: '\E4E0';
+  map-chat-filled: '\E4E1';
+  map-chat: '\E4E2';
+  map-checked-filled: '\E4E3';
+  map-checked: '\E4E4';
+  map-collection-filled: '\E4E5';
+  map-collection: '\E4E6';
+  map-connection-filled: '\E4E7';
+  map-connection: '\E4E8';
+  map-distance-filled: '\E4E9';
+  map-distance: '\E4EA';
+  map-double-filled: '\E4EB';
+  map-double: '\E4EC';
+  map-edit-filled: '\E4ED';
+  map-edit: '\E4EE';
+  map-filled: '\E4EF';
+  map-grid-filled: '\E4F0';
+  map-grid: '\E4F1';
+  map-information-1-filled: '\E4F2';
+  map-information-1: '\E4F3';
+  map-information-2-filled: '\E4F4';
+  map-information-2: '\E4F5';
+  map-information-filled: '\E4F6';
+  map-information: '\E4F7';
+  map-location-filled: '\E4F8';
+  map-location: '\E4F9';
+  map-locked-filled: '\E4FA';
+  map-locked: '\E4FB';
+  map-marked-filled: '\E4FC';
+  map-marked: '\E4FD';
+  map-navigation-filled: '\E4FE';
+  map-navigation: '\E4FF';
+  map-outline-filled: '\E500';
+  map-outline: '\E501';
+  map-route-planning-filled: '\E502';
+  map-route-planning: '\E503';
+  map-ruler-filled: '\E504';
+  map-ruler: '\E505';
+  map-safety-filled: '\E506';
+  map-safety: '\E507';
+  map-search-1-filled: '\E508';
+  map-search-1: '\E509';
+  map-search-filled: '\E50A';
+  map-search: '\E50B';
+  map-setting-filled: '\E50C';
+  map-setting: '\E50D';
+  map-unlocked-filled: '\E50E';
+  map-unlocked: '\E50F';
+  map: '\E510';
+  mark-as-unread-filled: '\E511';
+  mark-as-unread: '\E512';
+  markup-filled: '\E513';
+  markup: '\E514';
+  mathematics-filled: '\E515';
+  mathematics: '\E516';
+  measurement-1-filled: '\E517';
+  measurement-1: '\E518';
+  measurement-2-filled: '\E519';
+  measurement-2: '\E51A';
+  measurement-filled: '\E51B';
+  measurement: '\E51C';
+  meat-pepper-filled: '\E51D';
+  meat-pepper: '\E51E';
+  media-library-filled: '\E51F';
+  media-library: '\E520';
+  member-filled: '\E521';
+  member: '\E522';
+  menu-application: '\E523';
+  menu-filled: '\E524';
+  menu-fold: '\E525';
+  menu-unfold: '\E526';
+  menu: '\E527';
+  merge-cells-filled: '\E528';
+  merge-cells: '\E529';
+  microphone-1-filled: '\E52A';
+  microphone-1: '\E52B';
+  microphone-2-filled: '\E52C';
+  microphone-2: '\E52D';
+  microphone-filled: '\E52E';
+  microphone: '\E52F';
+  milk-filled: '\E530';
+  milk: '\E531';
+  minus-circle-filled: '\E532';
+  minus-circle: '\E533';
+  minus-rectangle-filled: '\E534';
+  minus-rectangle: '\E535';
+  minus: '\E536';
+  mirror-filled: '\E537';
+  mirror: '\E538';
+  mobile-blocked-filled: '\E539';
+  mobile-blocked: '\E53A';
+  mobile-filled: '\E53B';
+  mobile-list-filled: '\E53C';
+  mobile-list: '\E53D';
+  mobile-navigation-filled: '\E53E';
+  mobile-navigation: '\E53F';
+  mobile-shortcut-filled: '\E540';
+  mobile-shortcut: '\E541';
+  mobile-vibrate-filled: '\E542';
+  mobile-vibrate: '\E543';
+  mobile: '\E544';
+  mode-dark-filled: '\E545';
+  mode-dark: '\E546';
+  mode-light-filled: '\E547';
+  mode-light: '\E548';
+  module-filled: '\E549';
+  module: '\E54A';
+  money-filled: '\E54B';
+  money: '\E54C';
+  monument-filled: '\E54D';
+  monument: '\E54E';
+  moon-fall-filled: '\E54F';
+  moon-fall: '\E550';
+  moon-filled: '\E551';
+  moon-rising-filled: '\E552';
+  moon-rising: '\E553';
+  moon: '\E554';
+  more: '\E555';
+  mosque-1-filled: '\E556';
+  mosque-1: '\E557';
+  mosque-filled: '\E558';
+  mosque: '\E559';
+  mouse-filled: '\E55A';
+  mouse: '\E55B';
+  move-1: '\E55C';
+  move: '\E55D';
+  movie-clapper-filled: '\E55E';
+  movie-clapper: '\E55F';
+  multiply: '\E560';
+  museum-1-filled: '\E561';
+  museum-1: '\E562';
+  museum-2-filled: '\E563';
+  museum-2: '\E564';
+  museum-filled: '\E565';
+  museum: '\E566';
+  mushroom-1-filled: '\E567';
+  mushroom-1: '\E568';
+  mushroom-filled: '\E569';
+  mushroom: '\E56A';
+  music-1-filled: '\E56B';
+  music-1: '\E56C';
+  music-2-filled: '\E56D';
+  music-2: '\E56E';
+  music-filled: '\E56F';
+  music-rectangle-add-filled: '\E570';
+  music-rectangle-add: '\E571';
+  music: '\E572';
+  navigation-arrow-filled: '\E573';
+  navigation-arrow: '\E574';
+  next-filled: '\E575';
+  next: '\E576';
+  no-expression-filled: '\E577';
+  no-expression: '\E578';
+  no-result-filled: '\E579';
+  no-result: '\E57A';
+  noodle-filled: '\E57B';
+  noodle: '\E57C';
+  notification-add-filled: '\E57D';
+  notification-add: '\E57E';
+  notification-circle-filled: '\E57F';
+  notification-circle: '\E580';
+  notification-error-filled: '\E581';
+  notification-error: '\E582';
+  notification-filled: '\E583';
+  notification: '\E584';
+  numbers-0-1: '\E585';
+  numbers-0: '\E586';
+  numbers-1-1: '\E587';
+  numbers-1: '\E588';
+  numbers-2-1: '\E589';
+  numbers-2: '\E58A';
+  numbers-3-1: '\E58B';
+  numbers-3: '\E58C';
+  numbers-4-1: '\E58D';
+  numbers-4: '\E58E';
+  numbers-5-1: '\E58F';
+  numbers-5: '\E590';
+  numbers-6-1: '\E591';
+  numbers-6: '\E592';
+  numbers-7-1: '\E593';
+  numbers-7: '\E594';
+  numbers-8-1: '\E595';
+  numbers-8: '\E596';
+  numbers-9-1: '\E597';
+  numbers-9: '\E598';
+  nut-filled: '\E599';
+  nut: '\E59A';
+  object-storage: '\E59B';
+  open-mouth-filled: '\E59C';
+  open-mouth: '\E59D';
+  opera-filled: '\E59E';
+  opera: '\E59F';
+  order-adjustment-column: '\E5A0';
+  order-ascending: '\E5A1';
+  order-descending: '\E5A2';
+  outbox-filled: '\E5A3';
+  outbox: '\E5A4';
+  page-first: '\E5A5';
+  page-head-filled: '\E5A6';
+  page-head: '\E5A7';
+  page-last: '\E5A8';
+  palace-1-filled: '\E5A9';
+  palace-1: '\E5AA';
+  palace-2-filled: '\E5AB';
+  palace-2: '\E5AC';
+  palace-3-filled: '\E5AD';
+  palace-3: '\E5AE';
+  palace-4-filled: '\E5AF';
+  palace-4: '\E5B0';
+  palace-filled: '\E5B1';
+  palace: '\E5B2';
+  palette-1-filled: '\E5B3';
+  palette-1: '\E5B4';
+  palette-filled: '\E5B5';
+  palette: '\E5B6';
+  panorama-horizontal-filled: '\E5B7';
+  panorama-horizontal: '\E5B8';
+  panorama-vertical-filled: '\E5B9';
+  panorama-vertical: '\E5BA';
+  pantone-filled: '\E5BB';
+  pantone: '\E5BC';
+  parabola: '\E5BD';
+  parentheses: '\E5BE';
+  paste-filled: '\E5BF';
+  paste: '\E5C0';
+  patio-filled: '\E5C1';
+  patio: '\E5C2';
+  pause-circle-filled: '\E5C3';
+  pause-circle-stroke-filled: '\E5C4';
+  pause-circle-stroke: '\E5C5';
+  pause-circle: '\E5C6';
+  pause: '\E5C7';
+  pea-filled: '\E5C8';
+  pea: '\E5C9';
+  peach-filled: '\E5CA';
+  peach: '\E5CB';
+  pear-filled: '\E5CC';
+  pear: '\E5CD';
+  pearl-of-the-orient-filled: '\E5CE';
+  pearl-of-the-orient: '\E5CF';
+  pen-ball-filled: '\E5D0';
+  pen-ball: '\E5D1';
+  pen-brush-filled: '\E5D2';
+  pen-brush: '\E5D3';
+  pen-filled: '\E5D4';
+  pen-mark-filled: '\E5D5';
+  pen-mark: '\E5D6';
+  pen-quill-filled: '\E5D7';
+  pen-quill: '\E5D8';
+  pen: '\E5D9';
+  pending-filled: '\E5DA';
+  pending: '\E5DB';
+  percent: '\E5DC';
+  personal-information-filled: '\E5DD';
+  personal-information: '\E5DE';
+  phone-locked-filled: '\E5DF';
+  phone-locked: '\E5E0';
+  phone-search-filled: '\E5E1';
+  phone-search: '\E5E2';
+  pi: '\E5E3';
+  piano-filled: '\E5E4';
+  piano: '\E5E5';
+  pin-filled: '\E5E6';
+  pin: '\E5E7';
+  play-circle-filled: '\E5E8';
+  play-circle-stroke-add-filled: '\E5E9';
+  play-circle-stroke-add: '\E5EA';
+  play-circle-stroke-filled: '\E5EB';
+  play-circle-stroke: '\E5EC';
+  play-circle: '\E5ED';
+  play-demo-filled: '\E5EE';
+  play-demo: '\E5EF';
+  play-rectangle-filled: '\E5F0';
+  play-rectangle: '\E5F1';
+  play: '\E5F2';
+  plus: '\E5F3';
+  popsicle-filled: '\E5F4';
+  popsicle: '\E5F5';
+  portrait-filled: '\E5F6';
+  portrait: '\E5F7';
+  pout-filled: '\E5F8';
+  pout: '\E5F9';
+  poweroff: '\E5FA';
+  precise-monitor: '\E5FB';
+  previous-filled: '\E5FC';
+  previous: '\E5FD';
+  print-filled: '\E5FE';
+  print: '\E5FF';
+  pumpkin-filled: '\E600';
+  pumpkin: '\E601';
+  pyramid-filled: '\E602';
+  pyramid-maya-filled: '\E603';
+  pyramid-maya: '\E604';
+  pyramid: '\E605';
+  qrcode: '\E606';
+  quadratic: '\E607';
+  questionnaire-double-filled: '\E608';
+  questionnaire-double: '\E609';
+  questionnaire-filled: '\E60A';
+  questionnaire: '\E60B';
+  queue-filled: '\E60C';
+  queue: '\E60D';
+  quote-filled: '\E60E';
+  quote: '\E60F';
+  radar: '\E610';
+  radio-1-filled: '\E611';
+  radio-1: '\E612';
+  radio-2-filled: '\E613';
+  radio-2: '\E614';
+  radish-filled: '\E615';
+  radish: '\E616';
+  rain-heavy: '\E617';
+  rain-light-filled: '\E618';
+  rain-light: '\E619';
+  rain-medium: '\E61A';
+  rainbow: '\E61B';
+  rectangle-filled: '\E61C';
+  rectangle: '\E61D';
+  refresh: '\E61E';
+  relation: '\E61F';
+  relativity-filled: '\E620';
+  relativity: '\E621';
+  remote-wave-filled: '\E622';
+  remote-wave: '\E623';
+  remove: '\E624';
+  replay-filled: '\E625';
+  replay: '\E626';
+  rice-ball-filled: '\E627';
+  rice-ball: '\E628';
+  rice-filled: '\E629';
+  rice: '\E62A';
+  roast-filled: '\E62B';
+  roast: '\E62C';
+  rocket-filled: '\E62D';
+  rocket: '\E62E';
+  rollback: '\E62F';
+  rollfront: '\E630';
+  root-list-filled: '\E631';
+  root-list: '\E632';
+  rotate-locked-filled: '\E633';
+  rotate-locked: '\E634';
+  rotate: '\E635';
+  rotation: '\E636';
+  round-filled: '\E637';
+  round: '\E638';
+  router-wave-filled: '\E639';
+  router-wave: '\E63A';
+  rss: '\E63B';
+  ruler-filled: '\E63C';
+  ruler: '\E63D';
+  sailing-hotel-filled: '\E63E';
+  sailing-hotel: '\E63F';
+  sandwich-filled: '\E640';
+  sandwich: '\E641';
+  saturation-filled: '\E642';
+  saturation: '\E643';
+  sausage-filled: '\E644';
+  sausage: '\E645';
+  save-filled: '\E646';
+  save: '\E647';
+  saving-pot-filled: '\E648';
+  saving-pot: '\E649';
+  scan: '\E64A';
+  screen-4k-filled: '\E64B';
+  screen-4k: '\E64C';
+  screencast-filled: '\E64D';
+  screencast: '\E64E';
+  screenshot: '\E64F';
+  scroll-bar-filled: '\E650';
+  scroll-bar: '\E651';
+  sd-card-1-filled: '\E652';
+  sd-card-1: '\E653';
+  sd-card-filled: '\E654';
+  sd-card: '\E655';
+  seal-filled: '\E656';
+  seal: '\E657';
+  search-error-filled: '\E658';
+  search-error: '\E659';
+  search-filled: '\E65A';
+  search: '\E65B';
+  secured-filled: '\E65C';
+  secured: '\E65D';
+  send-cancel-filled: '\E65E';
+  send-cancel: '\E65F';
+  send-filled: '\E660';
+  send: '\E661';
+  sensors-1: '\E662';
+  sensors-2: '\E663';
+  sensors-off: '\E664';
+  sensors: '\E665';
+  sequence-filled: '\E666';
+  sequence: '\E667';
+  serenity-filled: '\E668';
+  serenity: '\E669';
+  server-filled: '\E66A';
+  server: '\E66B';
+  service-filled: '\E66C';
+  service: '\E66D';
+  setting-1-filled: '\E66E';
+  setting-1: '\E66F';
+  setting-filled: '\E670';
+  setting: '\E671';
+  share-1-filled: '\E672';
+  share-1: '\E673';
+  share-filled: '\E674';
+  share: '\E675';
+  sharpness-filled: '\E676';
+  sharpness: '\E677';
+  shield-error-filled: '\E678';
+  shield-error: '\E679';
+  shimen-filled: '\E67A';
+  shimen: '\E67B';
+  shop-1-filled: '\E67C';
+  shop-1: '\E67D';
+  shop-2-filled: '\E67E';
+  shop-2: '\E67F';
+  shop-3-filled: '\E680';
+  shop-3: '\E681';
+  shop-4-filled: '\E682';
+  shop-4: '\E683';
+  shop-5-filled: '\E684';
+  shop-5: '\E685';
+  shop-filled: '\E686';
+  shop: '\E687';
+  shrimp-filled: '\E688';
+  shrimp: '\E689';
+  shrink-horizontal: '\E68A';
+  shrink-vertical: '\E68B';
+  shutter-filled: '\E68C';
+  shutter: '\E68D';
+  shutup-filled: '\E68E';
+  shutup: '\E68F';
+  sim-card-1-filled: '\E690';
+  sim-card-1: '\E691';
+  sim-card-2-filled: '\E692';
+  sim-card-2: '\E693';
+  sim-card-filled: '\E694';
+  sim-card: '\E695';
+  sinister-smile-filled: '\E696';
+  sinister-smile: '\E697';
+  sip-filled: '\E698';
+  sip: '\E699';
+  sitemap-filled: '\E69A';
+  sitemap: '\E69B';
+  slash: '\E69C';
+  sleep-filled: '\E69D';
+  sleep: '\E69E';
+  slice-filled: '\E69F';
+  slice: '\E6A0';
+  slideshow-filled: '\E6A1';
+  slideshow: '\E6A2';
+  smile-filled: '\E6A3';
+  smile: '\E6A4';
+  sneer-filled: '\E6A5';
+  sneer: '\E6A6';
+  snowflake: '\E6A7';
+  sonic: '\E6A8';
+  sound-down-filled: '\E6A9';
+  sound-down: '\E6AA';
+  sound-filled: '\E6AB';
+  sound-high-filled: '\E6AC';
+  sound-high: '\E6AD';
+  sound-low-filled: '\E6AE';
+  sound-low: '\E6AF';
+  sound-mute-1-filled: '\E6B0';
+  sound-mute-1: '\E6B1';
+  sound-mute-filled: '\E6B2';
+  sound-mute: '\E6B3';
+  sound-up-filled: '\E6B4';
+  sound-up: '\E6B5';
+  sound: '\E6B6';
+  space: '\E6B7';
+  speechless-1-filled: '\E6B8';
+  speechless-1: '\E6B9';
+  speechless-filled: '\E6BA';
+  speechless: '\E6BB';
+  star-filled: '\E6BC';
+  star: '\E6BD';
+  statue-of-jesus-filled: '\E6BE';
+  statue-of-jesus: '\E6BF';
+  sticky-note-filled: '\E6C0';
+  sticky-note: '\E6C1';
+  stop-circle-filled: '\E6C2';
+  stop-circle-stroke-filled: '\E6C3';
+  stop-circle-stroke: '\E6C4';
+  stop-circle: '\E6C5';
+  stop: '\E6C6';
+  store-filled: '\E6C7';
+  store: '\E6C8';
+  street-road-1-filled: '\E6C9';
+  street-road-1: '\E6CA';
+  street-road-filled: '\E6CB';
+  street-road: '\E6CC';
+  subtitle-filled: '\E6CD';
+  subtitle: '\E6CE';
+  subway-line-filled: '\E6CF';
+  subway-line: '\E6D0';
+  sum: '\E6D1';
+  sun-fall-filled: '\E6D2';
+  sun-fall: '\E6D3';
+  sun-rising-filled: '\E6D4';
+  sun-rising: '\E6D5';
+  sunny-filled: '\E6D6';
+  sunny: '\E6D7';
+  support-filled: '\E6D8';
+  support: '\E6D9';
+  surprised-1-filled: '\E6DA';
+  surprised-1: '\E6DB';
+  surprised-filled: '\E6DC';
+  surprised: '\E6DD';
+  swap-left: '\E6DE';
+  swap-right: '\E6DF';
+  swap: '\E6E0';
+  swear-1-filled: '\E6E1';
+  swear-1: '\E6E2';
+  swear-2-filled: '\E6E3';
+  swear-2: '\E6E4';
+  system-2: '\E6E5';
+  system-3-filled: '\E6E6';
+  system-3: '\E6E7';
+  system-application-filled: '\E6E8';
+  system-application: '\E6E9';
+  system-blocked-filled: '\E6EA';
+  system-blocked: '\E6EB';
+  system-code-filled: '\E6EC';
+  system-code: '\E6ED';
+  system-components-filled: '\E6EE';
+  system-components: '\E6EF';
+  system-coordinate-filled: '\E6F0';
+  system-coordinate: '\E6F1';
+  system-device-filled: '\E6F2';
+  system-device: '\E6F3';
+  system-interface-filled: '\E6F4';
+  system-interface: '\E6F5';
+  system-location-filled: '\E6F6';
+  system-location: '\E6F7';
+  system-locked-filled: '\E6F8';
+  system-locked: '\E6F9';
+  system-log-filled: '\E6FA';
+  system-log: '\E6FB';
+  system-marked-filled: '\E6FC';
+  system-marked: '\E6FD';
+  system-messages-filled: '\E6FE';
+  system-messages: '\E6FF';
+  system-regulation-filled: '\E700';
+  system-regulation: '\E701';
+  system-search-filled: '\E702';
+  system-search: '\E703';
+  system-setting-filled: '\E704';
+  system-setting: '\E705';
+  system-storage-filled: '\E706';
+  system-storage: '\E707';
+  system-sum: '\E708';
+  system-unlocked-filled: '\E709';
+  system-unlocked: '\E70A';
+  tab-filled: '\E70B';
+  tab: '\E70C';
+  table-1-filled: '\E70D';
+  table-1: '\E70E';
+  table-2-filled: '\E70F';
+  table-2: '\E710';
+  table-add-filled: '\E711';
+  table-add: '\E712';
+  table-filled: '\E713';
+  table-split-filled: '\E714';
+  table-split: '\E715';
+  table: '\E716';
+  tag-filled: '\E717';
+  tag: '\E718';
+  tangerinr-filled: '\E719';
+  tangerinr: '\E71A';
+  tape-filled: '\E71B';
+  tape: '\E71C';
+  task-1-filled: '\E71D';
+  task-1: '\E71E';
+  task-add-1: '\E71F';
+  task-add-filled: '\E720';
+  task-add: '\E721';
+  task-checked-1: '\E722';
+  task-checked-filled: '\E723';
+  task-checked: '\E724';
+  task-double-filled: '\E725';
+  task-double: '\E726';
+  task-error-filled: '\E727';
+  task-error: '\E728';
+  task-filled: '\E729';
+  task-location-filled: '\E72A';
+  task-location: '\E72B';
+  task-marked-filled: '\E72C';
+  task-marked: '\E72D';
+  task-setting-filled: '\E72E';
+  task-setting: '\E72F';
+  task-time-filled: '\E730';
+  task-time: '\E731';
+  task-visible-filled: '\E732';
+  task-visible: '\E733';
+  task: '\E734';
+  tea-filled: '\E735';
+  tea: '\E736';
+  teahouse-filled: '\E737';
+  teahouse: '\E738';
+  template-filled: '\E739';
+  template: '\E73A';
+  temple-filled: '\E73B';
+  temple: '\E73C';
+  terminal-rectangle-1-filled: '\E73D';
+  terminal-rectangle-1: '\E73E';
+  terminal-rectangle-filled: '\E73F';
+  terminal-rectangle: '\E740';
+  terminal-window-filled: '\E741';
+  terminal-window: '\E742';
+  terminal: '\E743';
+  textbox-filled: '\E744';
+  textbox: '\E745';
+  textformat-bold: '\E746';
+  textformat-color: '\E747';
+  textformat-italic: '\E748';
+  textformat-strikethrough: '\E749';
+  textformat-underline: '\E74A';
+  textformat-wrap: '\E74B';
+  theaters-filled: '\E74C';
+  theaters: '\E74D';
+  thumb-down-1-filled: '\E74E';
+  thumb-down-1: '\E74F';
+  thumb-down-2-filled: '\E750';
+  thumb-down-2: '\E751';
+  thumb-down-filled: '\E752';
+  thumb-down: '\E753';
+  thumb-up-1-filled: '\E754';
+  thumb-up-1: '\E755';
+  thumb-up-2-filled: '\E756';
+  thumb-up-2: '\E757';
+  thumb-up-filled: '\E758';
+  thumb-up: '\E759';
+  thunder: '\E75A';
+  thunderstorm-night-filled: '\E75B';
+  thunderstorm-night: '\E75C';
+  thunderstorm-sunny-filled: '\E75D';
+  thunderstorm-sunny: '\E75E';
+  thunderstorm: '\E75F';
+  ticket-filled: '\E760';
+  ticket: '\E761';
+  time-filled: '\E762';
+  time: '\E763';
+  tips-double-filled: '\E764';
+  tips-double: '\E765';
+  tips-filled: '\E766';
+  tips: '\E767';
+  tomato-filled: '\E768';
+  tomato: '\E769';
+  tools-circle-filled: '\E76A';
+  tools-circle: '\E76B';
+  tools-filled: '\E76C';
+  tools: '\E76D';
+  tornado: '\E76E';
+  tower-1-filled: '\E76F';
+  tower-1: '\E770';
+  tower-2-filled: '\E771';
+  tower-2: '\E772';
+  tower-3-filled: '\E773';
+  tower-3: '\E774';
+  tower-clock-filled: '\E775';
+  tower-clock: '\E776';
+  tower-filled: '\E777';
+  tower: '\E778';
+  town-filled: '\E779';
+  town: '\E77A';
+  traffic-events-filled: '\E77B';
+  traffic-events: '\E77C';
+  traffic-filled: '\E77D';
+  traffic: '\E77E';
+  transform-1-filled: '\E77F';
+  transform-1: '\E780';
+  transform-2: '\E781';
+  transform-3: '\E782';
+  transform-filled: '\E783';
+  transform: '\E784';
+  translate-1: '\E785';
+  translate: '\E786';
+  tree-list: '\E787';
+  tree-round-dot-filled: '\E788';
+  tree-round-dot-vertical-filled: '\E789';
+  tree-round-dot-vertical: '\E78A';
+  tree-round-dot: '\E78B';
+  tree-square-dot-filled: '\E78C';
+  tree-square-dot-vertical-filled: '\E78D';
+  tree-square-dot-vertical: '\E78E';
+  tree-square-dot: '\E78F';
+  trending-down: '\E790';
+  trending-up: '\E791';
+  tv-1-filled: '\E792';
+  tv-1: '\E793';
+  tv-2-filled: '\E794';
+  tv-2: '\E795';
+  tv-filled: '\E796';
+  tv: '\E797';
+  typography-filled: '\E798';
+  typography: '\E799';
+  uncomfortable-1-filled: '\E79A';
+  uncomfortable-1: '\E79B';
+  uncomfortable-2-filled: '\E79C';
+  uncomfortable-2: '\E79D';
+  uncomfortable-filled: '\E79E';
+  uncomfortable: '\E79F';
+  undertake-delivery-filled: '\E7A0';
+  undertake-delivery: '\E7A1';
+  undertake-environment-protection-filled: '\E7A2';
+  undertake-environment-protection: '\E7A3';
+  undertake-filled: '\E7A4';
+  undertake-hold-up-filled: '\E7A5';
+  undertake-hold-up: '\E7A6';
+  undertake-transaction-filled: '\E7A7';
+  undertake-transaction: '\E7A8';
+  undertake: '\E7A9';
+  unfold-less: '\E7AA';
+  unfold-more: '\E7AB';
+  unhappy-1-filled: '\E7AC';
+  unhappy-1: '\E7AD';
+  unhappy-filled: '\E7AE';
+  unhappy: '\E7AF';
+  uninstall-filled: '\E7B0';
+  uninstall: '\E7B1';
+  upload-1: '\E7B2';
+  upload: '\E7B3';
+  upscale: '\E7B4';
+  usb-filled: '\E7B5';
+  usb: '\E7B6';
+  user-1-filled: '\E7B7';
+  user-1: '\E7B8';
+  user-add-filled: '\E7B9';
+  user-add: '\E7BA';
+  user-arrow-down-filled: '\E7BB';
+  user-arrow-down: '\E7BC';
+  user-arrow-left-filled: '\E7BD';
+  user-arrow-left: '\E7BE';
+  user-arrow-right-filled: '\E7BF';
+  user-arrow-right: '\E7C0';
+  user-arrow-up-filled: '\E7C1';
+  user-arrow-up: '\E7C2';
+  user-avatar-filled: '\E7C3';
+  user-avatar: '\E7C4';
+  user-blocked-filled: '\E7C5';
+  user-blocked: '\E7C6';
+  user-business-filled: '\E7C7';
+  user-business: '\E7C8';
+  user-checked-1-filled: '\E7C9';
+  user-checked-1: '\E7CA';
+  user-checked-filled: '\E7CB';
+  user-checked: '\E7CC';
+  user-circle-filled: '\E7CD';
+  user-circle: '\E7CE';
+  user-clear-filled: '\E7CF';
+  user-clear: '\E7D0';
+  user-error-1-filled: '\E7D1';
+  user-error-1: '\E7D2';
+  user-filled: '\E7D3';
+  user-invisible-filled: '\E7D4';
+  user-invisible: '\E7D5';
+  user-list-filled: '\E7D6';
+  user-list: '\E7D7';
+  user-locked-filled: '\E7D8';
+  user-locked: '\E7D9';
+  user-marked-filled: '\E7DA';
+  user-marked: '\E7DB';
+  user-password-filled: '\E7DC';
+  user-password: '\E7DD';
+  user-safety-filled: '\E7DE';
+  user-safety: '\E7DF';
+  user-search-filled: '\E7E0';
+  user-search: '\E7E1';
+  user-setting-filled: '\E7E2';
+  user-setting: '\E7E3';
+  user-talk-1-filled: '\E7E4';
+  user-talk-1: '\E7E5';
+  user-talk-filled: '\E7E6';
+  user-talk-off-1-filled: '\E7E7';
+  user-talk-off-1: '\E7E8';
+  user-talk: '\E7E9';
+  user-time-filled: '\E7EA';
+  user-time: '\E7EB';
+  user-transmit-filled: '\E7EC';
+  user-transmit: '\E7ED';
+  user-unknown-filled: '\E7EE';
+  user-unknown: '\E7EF';
+  user-unlocked-filled: '\E7F0';
+  user-unlocked: '\E7F1';
+  user-vip-filled: '\E7F2';
+  user-vip: '\E7F3';
+  user-visible-filled: '\E7F4';
+  user-visible: '\E7F5';
+  user: '\E7F6';
+  usercase-filled: '\E7F7';
+  usercase-link-filled: '\E7F8';
+  usercase-link: '\E7F9';
+  usercase: '\E7FA';
+  usergroup-add-filled: '\E7FB';
+  usergroup-add: '\E7FC';
+  usergroup-clear-filled: '\E7FD';
+  usergroup-clear: '\E7FE';
+  usergroup-filled: '\E7FF';
+  usergroup: '\E800';
+  vehicle-filled: '\E801';
+  vehicle: '\E802';
+  verified-filled: '\E803';
+  verified: '\E804';
+  verify-filled: '\E805';
+  verify: '\E806';
+  vertical-filled: '\E807';
+  vertical: '\E808';
+  video-camera-1-filled: '\E809';
+  video-camera-1: '\E80A';
+  video-camera-2-filled: '\E80B';
+  video-camera-2: '\E80C';
+  video-camera-dollar-filled: '\E80D';
+  video-camera-dollar: '\E80E';
+  video-camera-filled: '\E80F';
+  video-camera-minus-filled: '\E810';
+  video-camera-minus: '\E811';
+  video-camera-music-filled: '\E812';
+  video-camera-music: '\E813';
+  video-camera-off-filled: '\E814';
+  video-camera-off: '\E815';
+  video-camera: '\E816';
+  video-filled: '\E817';
+  video-library-filled: '\E818';
+  video-library: '\E819';
+  video: '\E81A';
+  view-agenda-filled: '\E81B';
+  view-agenda: '\E81C';
+  view-column: '\E81D';
+  view-in-ar-filled: '\E81E';
+  view-in-ar: '\E81F';
+  view-list: '\E820';
+  view-module-filled: '\E821';
+  view-module: '\E822';
+  visual-recognition-filled: '\E823';
+  visual-recognition: '\E824';
+  wallet-filled: '\E825';
+  wallet: '\E826';
+  watch-filled: '\E827';
+  watch: '\E828';
+  watermelon-filled: '\E829';
+  watermelon: '\E82A';
+  wave-bye-filled: '\E82B';
+  wave-bye: '\E82C';
+  wave-left-filled: '\E82D';
+  wave-left: '\E82E';
+  wave-right-filled: '\E82F';
+  wave-right: '\E830';
+  wealth-1-filled: '\E831';
+  wealth-1: '\E832';
+  wealth-filled: '\E833';
+  wealth: '\E834';
+  widget-filled: '\E835';
+  widget: '\E836';
+  wifi-1-filled: '\E837';
+  wifi-1: '\E838';
+  wifi-no-filled: '\E839';
+  wifi-no: '\E83A';
+  wifi-off-1-filled: '\E83B';
+  wifi-off-1: '\E83C';
+  wifi-off: '\E83D';
+  wifi: '\E83E';
+  window-1-filled: '\E83F';
+  window-1: '\E840';
+  window-filled: '\E841';
+  window: '\E842';
+  windy-rain: '\E843';
+  windy: '\E844';
+  wink-filled: '\E845';
+  wink: '\E846';
+  work-filled: '\E847';
+  work-history-filled: '\E848';
+  work-history: '\E849';
+  work-off-filled: '\E84A';
+  work-off: '\E84B';
+  work: '\E84C';
+  wry-smile-filled: '\E84D';
+  wry-smile: '\E84E';
+  zoom-in-filled: '\E84F';
+  zoom-in: '\E850';
+  zoom-out-filled: '\E851';
+  zoom-out: '\E852';
+};
diff --git a/packages/tdesign-uniapp/components/common/style/index.less b/packages/tdesign-uniapp/components/common/style/index.less
new file mode 100644
index 000000000..5e0a6eee9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/index.less
@@ -0,0 +1,3 @@
+@import './base.less';
+
+@import './utilities/_index.less';
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_border.less b/packages/tdesign-uniapp/components/common/style/mixins/_border.less
new file mode 100644
index 000000000..d765a92df
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_border.less
@@ -0,0 +1,34 @@
+@import '../_variables.less';
+
+.border(@position: bottom, @border-color: @component-border) {
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: if(@position = top, 0, unset);
+    bottom: if(@position = bottom, 0, unset);
+    left: if(@position = left, 0, unset);
+    right: if(@position = right, 0, unset);
+    background-color: @border-color;
+  }
+}
+
+.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) {
+  &::after {
+    height: 1px;
+    left: 0;
+    right: 0;
+    transform: scaleY(0.5);
+  }
+}
+
+.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) {
+  &::after {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    transform: scaleX(0.5);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_clearfix.less b/packages/tdesign-uniapp/components/common/style/mixins/_clearfix.less
new file mode 100644
index 000000000..c9f0cb19c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_clearfix.less
@@ -0,0 +1,7 @@
+.clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_cursor.less b/packages/tdesign-uniapp/components/common/style/mixins/_cursor.less
new file mode 100644
index 000000000..c1e5882df
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_cursor.less
@@ -0,0 +1,6 @@
+.cursor-pointer() {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_ellipsis.less b/packages/tdesign-uniapp/components/common/style/mixins/_ellipsis.less
new file mode 100644
index 000000000..6501e6e54
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_ellipsis.less
@@ -0,0 +1,15 @@
+.ellipsis(@w:auto) {
+  width: @w;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.ellipsisLn(@line) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @line;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_hairline.less b/packages/tdesign-uniapp/components/common/style/mixins/_hairline.less
new file mode 100644
index 000000000..41ca8db50
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_hairline.less
@@ -0,0 +1,55 @@
+@import '../_variables.less';
+
+.hairline-base() {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+}
+
+.hairline(@color: @border-level-1-color) {
+  .hairline-base();
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 1px solid @color;
+  transform: scale(0.5);
+}
+
+.hairline-top(@color: @border-level-1-color) {
+  .hairline-base();
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid @color;
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+}
+
+.hairline-bottom(@color: @border-level-1-color, @width: 1px) {
+  .hairline-base();
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: @width solid @color;
+  transform: scaleY(0.5);
+}
+
+.hairline-left(@color: @border-level-1-color) {
+  .hairline-base();
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid @color;
+  transform: scaleX(0.5);
+}
+
+.hairline-right(@color: @border-level-1-color) {
+  .hairline-base();
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border-right: 1px solid @color;
+  transform: scaleX(0.5);
+}
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_index.less b/packages/tdesign-uniapp/components/common/style/mixins/_index.less
new file mode 100644
index 000000000..b1d4c4973
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_index.less
@@ -0,0 +1,6 @@
+@import './_clearfix.less';
+@import './_hairline.less';
+@import './_ellipsis.less';
+@import './_cursor.less';
+@import './_border.less';
+@import './_other.less';
diff --git a/packages/tdesign-uniapp/components/common/style/mixins/_other.less b/packages/tdesign-uniapp/components/common/style/mixins/_other.less
new file mode 100644
index 000000000..05a5b7b9b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/mixins/_other.less
@@ -0,0 +1,14 @@
+// 屏幕中不显示, 但可被读屏
+.sr-only() {
+  &--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/index.css b/packages/tdesign-uniapp/components/common/style/theme/index.css
new file mode 100644
index 000000000..4ccf1f70a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/index.css
@@ -0,0 +1,354 @@
+@media (prefers-color-scheme: light) {
+  /* #ifdef H5 */
+  :root,
+  /* #endif */
+  page,
+  .page {
+    --td-brand-color-1: #f2f3ff;
+    --td-brand-color-2: #d9e1ff;
+    --td-brand-color-3: #b5c7ff;
+    --td-brand-color-4: #8eabff;
+    --td-brand-color-5: #618dff;
+    --td-brand-color-6: #366ef4;
+    --td-brand-color-7: #0052d9;
+    --td-brand-color-8: #003cab;
+    --td-brand-color-9: #002a7c;
+    --td-brand-color-10: #001a57;
+    --td-primary-color-1: var(--td-brand-color-1);
+    --td-primary-color-2: var(--td-brand-color-2);
+    --td-primary-color-3: var(--td-brand-color-3);
+    --td-primary-color-4: var(--td-brand-color-4);
+    --td-primary-color-5: var(--td-brand-color-5);
+    --td-primary-color-6: var(--td-brand-color-6);
+    --td-primary-color-7: var(--td-brand-color-7);
+    --td-primary-color-8: var(--td-brand-color-8);
+    --td-primary-color-9: var(--td-brand-color-9);
+    --td-primary-color-10: var(--td-brand-color-10);
+    --td-warning-color-1: #fff1e9;
+    --td-warning-color-2: #ffd9c2;
+    --td-warning-color-3: #ffb98c;
+    --td-warning-color-4: #fa9550;
+    --td-warning-color-5: #e37318;
+    --td-warning-color-6: #be5a00;
+    --td-warning-color-7: #954500;
+    --td-warning-color-8: #713300;
+    --td-warning-color-9: #532300;
+    --td-warning-color-10: #3b1700;
+    --td-error-color-1: #fff0ed;
+    --td-error-color-2: #ffd8d2;
+    --td-error-color-3: #ffb9b0;
+    --td-error-color-4: #ff9285;
+    --td-error-color-5: #f6685d;
+    --td-error-color-6: #d54941;
+    --td-error-color-7: #ad352f;
+    --td-error-color-8: #881f1c;
+    --td-error-color-9: #68070a;
+    --td-error-color-10: #490002;
+    --td-success-color-1: #e3f9e9;
+    --td-success-color-2: #c6f3d7;
+    --td-success-color-3: #92dab2;
+    --td-success-color-4: #56c08d;
+    --td-success-color-5: #2ba471;
+    --td-success-color-6: #008858;
+    --td-success-color-7: #006c45;
+    --td-success-color-8: #005334;
+    --td-success-color-9: #003b23;
+    --td-success-color-10: #002515;
+    --td-gray-color-1: #f3f3f3;
+    --td-gray-color-2: #eeeeee;
+    --td-gray-color-3: #e7e7e7;
+    --td-gray-color-4: #dcdcdc;
+    --td-gray-color-5: #c5c5c5;
+    --td-gray-color-6: #a6a6a6;
+    --td-gray-color-7: #8b8b8b;
+    --td-gray-color-8: #777777;
+    --td-gray-color-9: #5e5e5e;
+    --td-gray-color-10: #4b4b4b;
+    --td-gray-color-11: #383838;
+    --td-gray-color-12: #2c2c2c;
+    --td-gray-color-13: #242424;
+    --td-gray-color-14: #181818;
+    --td-font-white-1: #ffffff;
+    --td-font-white-2: rgba(255, 255, 255, 0.55);
+    --td-font-white-3: rgba(255, 255, 255, 0.35);
+    --td-font-white-4: rgba(255, 255, 255, 0.22);
+    --td-font-gray-1: rgba(0, 0, 0, 0.9);
+    --td-font-gray-2: rgba(0, 0, 0, 0.6);
+    --td-font-gray-3: rgba(0, 0, 0, 0.4);
+    --td-font-gray-4: rgba(0, 0, 0, 0.26);
+    --td-brand-color: var(--td-primary-color-7);
+    --td-warning-color: var(--td-warning-color-5);
+    --td-error-color: var(--td-error-color-6);
+    --td-success-color: var(--td-success-color-5);
+    --td-brand-color-focus: var(--td-primary-color-1);
+    --td-brand-color-active: var(--td-primary-color-8);
+    --td-brand-color-disabled: var(--td-primary-color-3);
+    --td-brand-color-light: var(--td-primary-color-1);
+    --td-brand-color-light-active: var(--td-primary-color-2);
+    --td-warning-color-active: var(--td-warning-color-6);
+    --td-warning-color-disabled: var(--td-warning-color-3);
+    --td-warning-color-focus: var(--td-warning-color-2);
+    --td-warning-color-light: var(--td-warning-color-1);
+    --td-warning-color-light-active: var(--td-warning-color-2);
+    --td-error-color-focus: var(--td-error-color-2);
+    --td-error-color-active: var(--td-error-color-7);
+    --td-error-color-disabled: var(--td-error-color-3);
+    --td-error-color-light: var(--td-error-color-1);
+    --td-error-color-light-active: var(--td-error-color-2);
+    --td-success-color-focus: var(--td-success-color-2);
+    --td-success-color-active: var(--td-success-color-6);
+    --td-success-color-disabled: var(--td-success-color-3);
+    --td-success-color-light: var(--td-success-color-1);
+    --td-success-color-light-active: var(--td-success-color-2);
+    --td-mask-active: rgba(0, 0, 0, 0.6);
+    --td-mask-disabled: rgba(255, 255, 255, 0.6);
+    --td-mask-background: rgba(255, 255, 255, 0.96);
+    --td-bg-color-page: var(--td-gray-color-1);
+    --td-bg-color-container: var(--td-font-white-1);
+    --td-bg-color-container-active: var(--td-gray-color-3);
+    --td-bg-color-secondarycontainer: var(--td-gray-color-1);
+    --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
+    --td-bg-color-component: var(--td-gray-color-3);
+    --td-bg-color-component-active: var(--td-gray-color-6);
+    --td-bg-color-component-disabled: var(--td-gray-color-2);
+    --td-bg-color-secondarycomponent: var(--td-gray-color-4);
+    --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
+    --td-bg-color-specialcomponent: #fff;
+    --td-text-color-primary: var(--td-font-gray-1);
+    --td-text-color-secondary: var(--td-font-gray-2);
+    --td-text-color-placeholder: var(--td-font-gray-3);
+    --td-text-color-disabled: var(--td-font-gray-4);
+    --td-text-color-anti: var(--td-font-white-1);
+    --td-text-color-brand: var(--td-brand-color);
+    --td-text-color-link: var(--td-brand-color);
+    --td-border-level-1-color: var(--td-gray-color-3);
+    --td-component-stroke: var(--td-gray-color-3);
+    --td-border-level-2-color: var(--td-gray-color-4);
+    --td-component-border: var(--td-gray-color-4);
+    --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
+    --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
+    --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
+    --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+    --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
+    --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
+    --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
+    --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
+    --td-table-shadow-color: rgba(0, 0, 0, 0.08);
+    --td-scrollbar-color: rgba(0, 0, 0, 0.1);
+    --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3);
+    --td-scroll-track-color: #fff;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  /* #ifdef H5 */
+  :root,
+  /* #endif */
+  page,
+  .page {
+    --td-brand-color-1: #1b2f51;
+    --td-brand-color-2: #173463;
+    --td-brand-color-3: #143975;
+    --td-brand-color-4: #103d88;
+    --td-brand-color-5: #0d429a;
+    --td-brand-color-6: #054bbe;
+    --td-brand-color-7: #2667d4;
+    --td-brand-color-8: #4582e6;
+    --td-brand-color-9: #699ef5;
+    --td-brand-color-10: #96bbf8;
+    --td-primary-color-1: var(--td-brand-color-1);
+    --td-primary-color-2: var(--td-brand-color-2);
+    --td-primary-color-3: var(--td-brand-color-3);
+    --td-primary-color-4: var(--td-brand-color-4);
+    --td-primary-color-5: var(--td-brand-color-5);
+    --td-primary-color-6: var(--td-brand-color-6);
+    --td-primary-color-7: var(--td-brand-color-7);
+    --td-primary-color-8: var(--td-brand-color-8);
+    --td-primary-color-9: var(--td-brand-color-9);
+    --td-primary-color-10: var(--td-brand-color-10);
+    --td-warning-color-1: #4f2a1d;
+    --td-warning-color-2: #582f21;
+    --td-warning-color-3: #733c23;
+    --td-warning-color-4: #a75d2b;
+    --td-warning-color-5: #cf6e2d;
+    --td-warning-color-6: #dc7633;
+    --td-warning-color-7: #e8935c;
+    --td-warning-color-8: #ecbf91;
+    --td-warning-color-9: #eed7bf;
+    --td-warning-color-10: #f3e9dc;
+    --td-error-color-1: #472324;
+    --td-error-color-2: #5e2a2d;
+    --td-error-color-3: #703439;
+    --td-error-color-4: #83383e;
+    --td-error-color-5: #a03f46;
+    --td-error-color-6: #c64751;
+    --td-error-color-7: #de6670;
+    --td-error-color-8: #ec888e;
+    --td-error-color-9: #edb1b6;
+    --td-error-color-10: #eeced0;
+    --td-success-color-1: #193a2a;
+    --td-success-color-2: #1a4230;
+    --td-success-color-3: #17533d;
+    --td-success-color-4: #0d7a55;
+    --td-success-color-5: #059465;
+    --td-success-color-6: #43af8a;
+    --td-success-color-7: #46bf96;
+    --td-success-color-8: #80d2b6;
+    --td-success-color-9: #b4e1d3;
+    --td-success-color-10: #deede8;
+    --td-gray-color-1: #f3f3f3;
+    --td-gray-color-2: #eee;
+    --td-gray-color-3: #e8e8e8;
+    --td-gray-color-4: #ddd;
+    --td-gray-color-5: #c6c6c6;
+    --td-gray-color-6: #a6a6a6;
+    --td-gray-color-7: #8b8b8b;
+    --td-gray-color-8: #777;
+    --td-gray-color-9: #5e5e5e;
+    --td-gray-color-10: #4b4b4b;
+    --td-gray-color-11: #383838;
+    --td-gray-color-12: #2c2c2c;
+    --td-gray-color-13: #242424;
+    --td-gray-color-14: #181818;
+    --td-font-white-1: rgba(255, 255, 255, 0.9);
+    --td-font-white-2: rgba(255, 255, 255, 0.55);
+    --td-font-white-3: rgba(255, 255, 255, 0.35);
+    --td-font-white-4: rgba(255, 255, 255, 0.22);
+    --td-font-gray-1: rgba(0, 0, 0, 0.9);
+    --td-font-gray-2: rgba(0, 0, 0, 0.6);
+    --td-font-gray-3: rgba(0, 0, 0, 0.4);
+    --td-font-gray-4: rgba(0, 0, 0, 0.26);
+    --td-brand-color: var(--td-primary-color-8);
+    --td-warning-color: var(--td-warning-color-5);
+    --td-error-color: var(--td-error-color-6);
+    --td-success-color: var(--td-success-color-5);
+    --td-brand-color-focus: var(--td-primary-color-1);
+    --td-brand-color-active: var(--td-primary-color-9);
+    --td-brand-color-disabled: var(--td-primary-color-3);
+    --td-brand-color-light: var(--td-primary-color-1);
+    --td-brand-color-light-active: var(--td-primary-color-2);
+    --td-warning-color-focus: var(--td-warning-color-2);
+    --td-warning-color-active: var(--td-warning-color-4);
+    --td-warning-color-disabled: var(--td-warning-color-3);
+    --td-warning-color-light: var(--td-warning-color-1);
+    --td-warning-color-light-active: var(--td-warning-color-2);
+    --td-error-color-focus: var(--td-error-color-2);
+    --td-error-color-active: var(--td-error-color-5);
+    --td-error-color-disabled: var(--td-error-color-3);
+    --td-error-color-light: var(--td-error-color-1);
+    --td-error-color-light-active: var(--td-error-color-2);
+    --td-success-color-focus: var(--td-success-color-2);
+    --td-success-color-active: var(--td-success-color-4);
+    --td-success-color-disabled: var(--td-success-color-3);
+    --td-success-color-light: var(--td-success-color-1);
+    --td-success-color-light-active: var(--td-success-color-2);
+    --td-mask-active: rgba(0, 0, 0, 0.4);
+    --td-mask-disabled: rgba(0, 0, 0, 0.6);
+    --td-mask-background: rgba(36, 36, 36, 0.96);
+    --td-bg-color-page: var(--td-gray-color-14);
+    --td-bg-color-container: var(--td-gray-color-13);
+    --td-bg-color-secondarycontainer: var(--td-gray-color-12);
+    --td-bg-color-component: var(--td-gray-color-11);
+    --td-bg-color-container-active: var(--td-gray-color-12);
+    --td-bg-color-secondarycontainer-active: var(--td-gray-color-11);
+    --td-bg-color-component-active: var(--td-gray-color-10);
+    --td-bg-color-component-disabled: var(--td-gray-color-12);
+    --td-bg-color-specialcomponent: transparent;
+    --td-text-color-primary: var(--td-font-white-1);
+    --td-text-color-secondary: var(--td-font-white-2);
+    --td-text-color-placeholder: var(--td-font-white-3);
+    --td-text-color-disabled: var(--td-font-white-4);
+    --td-text-color-anti: var(--td-font-white-1);
+    --td-text-color-brand: var(--td-primary-color-8);
+    --td-text-color-link: var(--td-primary-color-8);
+    --td-border-level-1-color: var(--td-gray-color-11);
+    --td-component-stroke: var(--td-gray-color-11);
+    --td-border-level-2-color: var(--td-gray-color-9);
+    --td-component-border: var(--td-gray-color-9);
+    --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
+    --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16);
+    --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2);
+    --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
+    --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
+    --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
+    --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
+    --td-table-shadow-color: rgba(0, 0, 0, 0.55);
+    --td-scrollbar-color: rgba(255, 255, 255, 0.1);
+    --td-scroll-track-color: #333;
+  }
+}
+page,
+.page {
+  --td-radius-small: 3px;
+  --td-radius-default: 6px;
+  --td-radius-large: 9px;
+  --td-radius-extraLarge: 12px;
+  --td-radius-round: 999px;
+  --td-radius-circle: 50%;
+}
+page,
+.page {
+  --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
+  --td-font-size-link-small: 12px;
+  --td-font-size-link-medium: 14px;
+  --td-font-size-link-large: 16px;
+  --td-font-size-mark-extraSmall: 10px;
+  --td-font-size-mark-small: 12px;
+  --td-font-size-mark-medium: 14px;
+  --td-font-size-mark-large: 16px;
+  --td-font-size-body-extraSmall: 10px;
+  --td-font-size-body-small: 12px;
+  --td-font-size-body-medium: 14px;
+  --td-font-size-body-large: 16px;
+  --td-font-size-title-small: 14px;
+  --td-font-size-title-medium: 16px;
+  --td-font-size-title-large: 18px;
+  --td-font-size-title-extraLarge: 20px;
+  --td-font-size-headline-small: 24px;
+  --td-font-size-headline-medium: 28px;
+  --td-font-size-headline-large: 36px;
+  --td-font-size-display-medium: 48px;
+  --td-font-size-display-large: 64px;
+  --td-font-size: 10px;
+  --td-font-size-xs: var(--td-font-size-body-extraSmall);
+  --td-font-size-s: var(--td-font-size-body-small);
+  --td-font-size-base: var(--td-font-size-title-small);
+  --td-font-size-m: var(--td-font-size-title-medium);
+  --td-font-size-l: var(--td-font-size-title-large);
+  --td-font-size-xl: var(--td-font-size-title-extraLarge);
+  --td-font-size-xxl: var(--td-font-size-headline-large);
+}
+page,
+.page {
+  --td-spacer: 8px;
+  --td-spacer-1: 12px;
+  --td-spacer-2: 16px;
+  --td-spacer-3: 24px;
+  --td-spacer-4: 32px;
+  --td-spacer-5: 48px;
+  --td-spacer-6: 80px;
+}
+
+/* 部分特殊处理的组件级 token */
+@media (prefers-color-scheme: light) {
+  page,
+  .page {
+    --td-picker-transparent-color: rgba(255, 255, 255, 0);
+    --td-switch-dot-disabled-color: var(--td-font-white-1);
+    --td-switch-loading-color: var(--td-brand-color);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  page,
+  .page {
+    --td-button-primary-disabled-color: var(--td-font-white-4);
+    --td-skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
+    --td-slider-dot-bg-color: var(--td-gray-color-4);
+    --td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
+    --td-slider-dot-disabled-border-color: var(--td-gray-color-12);
+    --td-picker-transparent-color: transparent;
+    --td-switch-dot-disabled-color: var(--td-font-white-2);
+    --td-switch-loading-color: var(--td-font-white-1);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/index.less b/packages/tdesign-uniapp/components/common/style/theme/index.less
new file mode 100644
index 000000000..e77439c21
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/index.less
@@ -0,0 +1,11 @@
+@import './raw/_light.less';
+
+@import './raw/_dark.less';
+
+@import './raw/_radius.less';
+
+@import './raw/_font.less';
+
+@import './raw/_spacer.less';
+
+@import './raw/_components.less';
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_components.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_components.less
new file mode 100644
index 000000000..d45272915
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_components.less
@@ -0,0 +1,28 @@
+// 部分特殊处理的组件级 token
+@media (prefers-color-scheme: light) {
+  page,
+  .page {
+    --td-picker-transparent-color: rgba(255, 255, 255, 0);
+
+    --td-switch-dot-disabled-color: var(--td-font-white-1);
+    --td-switch-loading-color: var(--td-brand-color);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  page,
+  .page {
+    --td-button-primary-disabled-color: var(--td-font-white-4);
+
+    --td-skeleton-animation-gradient: rgba(255, 255, 255, 6%);
+
+    --td-slider-dot-bg-color: var(--td-gray-color-4);
+    --td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
+    --td-slider-dot-disabled-border-color: var(--td-gray-color-12);
+
+    --td-picker-transparent-color: transparent;
+
+    --td-switch-dot-disabled-color: var(--td-font-white-2);
+    --td-switch-loading-color: var(--td-font-white-1);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_dark.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_dark.less
new file mode 100644
index 000000000..aa7f8b5f0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_dark.less
@@ -0,0 +1,176 @@
+@media (prefers-color-scheme: dark) {
+  /* #ifdef H5 */
+  :root,
+  /* #endif */
+  page,
+  .page {
+    --td-brand-color-1: #1b2f51;
+    --td-brand-color-2: #173463;
+    --td-brand-color-3: #143975;
+    --td-brand-color-4: #103d88;
+    --td-brand-color-5: #0d429a;
+    --td-brand-color-6: #054bbe;
+    --td-brand-color-7: #2667d4;
+    --td-brand-color-8: #4582e6;
+    --td-brand-color-9: #699ef5;
+    --td-brand-color-10: #96bbf8;
+
+    --td-primary-color-1: var(--td-brand-color-1);
+    --td-primary-color-2: var(--td-brand-color-2);
+    --td-primary-color-3: var(--td-brand-color-3);
+    --td-primary-color-4: var(--td-brand-color-4);
+    --td-primary-color-5: var(--td-brand-color-5);
+    --td-primary-color-6: var(--td-brand-color-6);
+    --td-primary-color-7: var(--td-brand-color-7);
+    --td-primary-color-8: var(--td-brand-color-8);
+    --td-primary-color-9: var(--td-brand-color-9);
+    --td-primary-color-10: var(--td-brand-color-10);
+
+    --td-warning-color-1: #4f2a1d;
+    --td-warning-color-2: #582f21;
+    --td-warning-color-3: #733c23;
+    --td-warning-color-4: #a75d2b;
+    --td-warning-color-5: #cf6e2d;
+    --td-warning-color-6: #dc7633;
+    --td-warning-color-7: #e8935c;
+    --td-warning-color-8: #ecbf91;
+    --td-warning-color-9: #eed7bf;
+    --td-warning-color-10: #f3e9dc;
+
+    --td-error-color-1: #472324;
+    --td-error-color-2: #5e2a2d;
+    --td-error-color-3: #703439;
+    --td-error-color-4: #83383e;
+    --td-error-color-5: #a03f46;
+    --td-error-color-6: #c64751;
+    --td-error-color-7: #de6670;
+    --td-error-color-8: #ec888e;
+    --td-error-color-9: #edb1b6;
+    --td-error-color-10: #eeced0;
+
+    --td-success-color-1: #193a2a;
+    --td-success-color-2: #1a4230;
+    --td-success-color-3: #17533d;
+    --td-success-color-4: #0d7a55;
+    --td-success-color-5: #059465;
+    --td-success-color-6: #43af8a;
+    --td-success-color-7: #46bf96;
+    --td-success-color-8: #80d2b6;
+    --td-success-color-9: #b4e1d3;
+    --td-success-color-10: #deede8;
+
+    --td-gray-color-1: #f3f3f3;
+    --td-gray-color-2: #eee;
+    --td-gray-color-3: #e8e8e8;
+    --td-gray-color-4: #ddd;
+    --td-gray-color-5: #c6c6c6;
+    --td-gray-color-6: #a6a6a6;
+    --td-gray-color-7: #8b8b8b;
+    --td-gray-color-8: #777;
+    --td-gray-color-9: #5e5e5e;
+    --td-gray-color-10: #4b4b4b;
+    --td-gray-color-11: #383838;
+    --td-gray-color-12: #2c2c2c;
+    --td-gray-color-13: #242424;
+    --td-gray-color-14: #181818;
+
+    // 文字 & 图标 颜色
+    --td-font-white-1: rgba(255, 255, 255, 90%);
+    --td-font-white-2: rgba(255, 255, 255, 55%);
+    --td-font-white-3: rgba(255, 255, 255, 35%);
+    --td-font-white-4: rgba(255, 255, 255, 22%);
+    --td-font-gray-1: rgba(0, 0, 0, 90%);
+    --td-font-gray-2: rgba(0, 0, 0, 60%);
+    --td-font-gray-3: rgba(0, 0, 0, 40%);
+    --td-font-gray-4: rgba(0, 0, 0, 26%);
+
+    // 基础颜色
+    --td-brand-color: var(--td-primary-color-8); // 色彩-品牌-可操作
+    --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
+    --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
+    --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
+
+    // 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
+    --td-brand-color-focus: var(--td-primary-color-1); // focus态，包括鼠标和键盘
+    --td-brand-color-active: var(--td-primary-color-9); // 点击态
+    --td-brand-color-disabled: var(--td-primary-color-3); // 禁用态
+    --td-brand-color-light: var(--td-primary-color-1); // 浅色的选中态
+    --td-brand-color-light-active: var(--td-primary-color-2); // 浅色的选中态
+
+    // 警告色扩展
+    --td-warning-color-focus: var(--td-warning-color-2);
+    --td-warning-color-active: var(--td-warning-color-4);
+    --td-warning-color-disabled: var(--td-warning-color-3);
+    --td-warning-color-light: var(--td-warning-color-1);
+    --td-warning-color-light-active: var(--td-warning-color-2);
+
+    // 失败/错误色扩展
+    --td-error-color-focus: var(--td-error-color-2);
+    --td-error-color-active: var(--td-error-color-5);
+    --td-error-color-disabled: var(--td-error-color-3);
+    --td-error-color-light: var(--td-error-color-1);
+    --td-error-color-light-active: var(--td-error-color-2);
+
+    // 成功色扩展
+    --td-success-color-focus: var(--td-success-color-2);
+    --td-success-color-active: var(--td-success-color-4);
+    --td-success-color-disabled: var(--td-success-color-3);
+    --td-success-color-light: var(--td-success-color-1);
+    --td-success-color-light-active: var(--td-success-color-2);
+
+    // 遮罩
+    --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出
+    --td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
+    --td-mask-background: rgba(36, 36, 36, 96%); // 二维码遮罩
+
+    // 背景色
+    --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
+    --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
+    --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
+    --td-bg-color-component: var(--td-gray-color-11); // 色彩  - 组件
+    --td-bg-color-container-active: var(--td-gray-color-12); // 色彩 - 容器 - active
+    --td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active
+    --td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
+    --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
+
+    // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+    --td-bg-color-specialcomponent: transparent;
+
+    // 文本颜色
+    --td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
+    --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
+    --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
+    --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
+    --td-text-color-anti: var(--td-font-white-1); // 色彩-文字-反色
+    --td-text-color-brand: var(--td-primary-color-8); // 色彩-文字-品牌
+    --td-text-color-link: var(--td-primary-color-8); // 色彩-文字-链接
+
+    // 分割线
+    --td-border-level-1-color: var(--td-gray-color-11);
+    --td-component-stroke: var(--td-gray-color-11);
+    // 边框
+    --td-border-level-2-color: var(--td-gray-color-9);
+    --td-component-border: var(--td-gray-color-9);
+
+    // 基础/下层 投影 hover 使用的组件包括：表格 /
+    --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
+    // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+    --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
+    // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+    --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
+    // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+
+    --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
+    --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
+    --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
+    --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
+
+    // table 特定阴影
+    --td-table-shadow-color: rgba(0, 0, 0, 55%);
+
+    // 滚动条颜色
+    --td-scrollbar-color: rgba(255, 255, 255, 10%);
+    // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
+    --td-scroll-track-color: #333;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_font.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_font.less
new file mode 100644
index 000000000..a48c44c7e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_font.less
@@ -0,0 +1,37 @@
+page,
+.page {
+  // 字体family token
+  --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
+  --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
+
+  --td-font-size-link-small: 24rpx;
+  --td-font-size-link-medium: 28rpx;
+  --td-font-size-link-large: 32rpx;
+  --td-font-size-mark-extraSmall: 20rpx;
+  --td-font-size-mark-small: 24rpx;
+  --td-font-size-mark-medium: 28rpx;
+  --td-font-size-mark-large: 32rpx;
+  --td-font-size-body-extraSmall: 20rpx;
+  --td-font-size-body-small: 24rpx;
+  --td-font-size-body-medium: 28rpx;
+  --td-font-size-body-large: 32rpx;
+  --td-font-size-title-small: 28rpx;
+  --td-font-size-title-medium: 32rpx;
+  --td-font-size-title-large: 36rpx;
+  --td-font-size-title-extraLarge: 40rpx;
+  --td-font-size-headline-small: 48rpx;
+  --td-font-size-headline-medium: 56rpx;
+  --td-font-size-headline-large: 72rpx;
+  --td-font-size-display-medium: 96rpx;
+  --td-font-size-display-large: 128rpx;
+
+  // 字体大小 token
+  --td-font-size: 20rpx;
+  --td-font-size-xs: var(--td-font-size-body-extraSmall);
+  --td-font-size-s: var(--td-font-size-body-small);
+  --td-font-size-base: var(--td-font-size-title-small);
+  --td-font-size-m: var(--td-font-size-title-medium);
+  --td-font-size-l: var(--td-font-size-title-large);
+  --td-font-size-xl: var(--td-font-size-title-extraLarge);
+  --td-font-size-xxl: var(--td-font-size-headline-large);
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_light.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_light.less
new file mode 100644
index 000000000..537f92185
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_light.less
@@ -0,0 +1,182 @@
+@media (prefers-color-scheme: light) {
+  /* #ifdef H5 */
+  :root,
+  /* #endif */
+  page,
+  .page {
+    --td-brand-color-1: #f2f3ff;
+    --td-brand-color-2: #d9e1ff;
+    --td-brand-color-3: #b5c7ff;
+    --td-brand-color-4: #8eabff;
+    --td-brand-color-5: #618dff;
+    --td-brand-color-6: #366ef4;
+    --td-brand-color-7: #0052d9;
+    --td-brand-color-8: #003cab;
+    --td-brand-color-9: #002a7c;
+    --td-brand-color-10: #001a57;
+
+    --td-primary-color-1: var(--td-brand-color-1);
+    --td-primary-color-2: var(--td-brand-color-2);
+    --td-primary-color-3: var(--td-brand-color-3);
+    --td-primary-color-4: var(--td-brand-color-4);
+    --td-primary-color-5: var(--td-brand-color-5);
+    --td-primary-color-6: var(--td-brand-color-6);
+    --td-primary-color-7: var(--td-brand-color-7);
+    --td-primary-color-8: var(--td-brand-color-8);
+    --td-primary-color-9: var(--td-brand-color-9);
+    --td-primary-color-10: var(--td-brand-color-10);
+
+    --td-warning-color-1: #fff1e9;
+    --td-warning-color-2: #ffd9c2;
+    --td-warning-color-3: #ffb98c;
+    --td-warning-color-4: #fa9550;
+    --td-warning-color-5: #e37318;
+    --td-warning-color-6: #be5a00;
+    --td-warning-color-7: #954500;
+    --td-warning-color-8: #713300;
+    --td-warning-color-9: #532300;
+    --td-warning-color-10: #3b1700;
+
+    --td-error-color-1: #fff0ed;
+    --td-error-color-2: #ffd8d2;
+    --td-error-color-3: #ffb9b0;
+    --td-error-color-4: #ff9285;
+    --td-error-color-5: #f6685d;
+    --td-error-color-6: #d54941;
+    --td-error-color-7: #ad352f;
+    --td-error-color-8: #881f1c;
+    --td-error-color-9: #68070a;
+    --td-error-color-10: #490002;
+
+    --td-success-color-1: #e3f9e9;
+    --td-success-color-2: #c6f3d7;
+    --td-success-color-3: #92dab2;
+    --td-success-color-4: #56c08d;
+    --td-success-color-5: #2ba471;
+    --td-success-color-6: #008858;
+    --td-success-color-7: #006c45;
+    --td-success-color-8: #005334;
+    --td-success-color-9: #003b23;
+    --td-success-color-10: #002515;
+
+    --td-gray-color-1: #f3f3f3;
+    --td-gray-color-2: #eeeeee;
+    --td-gray-color-3: #e7e7e7;
+    --td-gray-color-4: #dcdcdc;
+    --td-gray-color-5: #c5c5c5;
+    --td-gray-color-6: #a6a6a6;
+    --td-gray-color-7: #8b8b8b;
+    --td-gray-color-8: #777777;
+    --td-gray-color-9: #5e5e5e;
+    --td-gray-color-10: #4b4b4b;
+    --td-gray-color-11: #383838;
+    --td-gray-color-12: #2c2c2c;
+    --td-gray-color-13: #242424;
+    --td-gray-color-14: #181818;
+
+    // 文字 & 图标 颜色
+    --td-font-white-1: rgba(255, 255, 255, 1);
+    --td-font-white-2: rgba(255, 255, 255, 0.55);
+    --td-font-white-3: rgba(255, 255, 255, 0.35);
+    --td-font-white-4: rgba(255, 255, 255, 0.22);
+    --td-font-gray-1: rgba(0, 0, 0, 0.9);
+    --td-font-gray-2: rgba(0, 0, 0, 0.6);
+    --td-font-gray-3: rgba(0, 0, 0, 0.4);
+    --td-font-gray-4: rgba(0, 0, 0, 0.26);
+
+    // 基础颜色
+    --td-brand-color: var(--td-primary-color-7);
+    --td-warning-color: var(--td-warning-color-5);
+    --td-error-color: var(--td-error-color-6);
+    --td-success-color: var(--td-success-color-5);
+
+    // 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
+    --td-brand-color-focus: var(--td-primary-color-1);
+    --td-brand-color-active: var(--td-primary-color-8);
+    --td-brand-color-disabled: var(--td-primary-color-3);
+    --td-brand-color-light: var(--td-primary-color-1);
+    --td-brand-color-light-active: var(--td-primary-color-2);
+
+    // 警告色扩展
+    --td-warning-color-active: var(--td-warning-color-6);
+    --td-warning-color-disabled: var(--td-warning-color-3);
+    --td-warning-color-focus: var(--td-warning-color-2);
+    --td-warning-color-light: var(--td-warning-color-1);
+    --td-warning-color-light-active: var(--td-warning-color-2);
+
+    // 失败/错误色扩展
+    --td-error-color-focus: var(--td-error-color-2);
+    --td-error-color-active: var(--td-error-color-7);
+    --td-error-color-disabled: var(--td-error-color-3);
+    --td-error-color-light: var(--td-error-color-1);
+    --td-error-color-light-active: var(--td-error-color-2);
+
+    // 成功色扩展
+    --td-success-color-focus: var(--td-success-color-2);
+    --td-success-color-active: var(--td-success-color-6);
+    --td-success-color-disabled: var(--td-success-color-3);
+    --td-success-color-light: var(--td-success-color-1);
+    --td-success-color-light-active: var(--td-success-color-2);
+
+    // 遮罩
+    --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
+    --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
+    --td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
+
+    // 背景色
+    --td-bg-color-page: var(--td-gray-color-1);
+    --td-bg-color-container: var(--td-font-white-1);
+    --td-bg-color-container-active: var(--td-gray-color-3);
+    --td-bg-color-secondarycontainer: var(--td-gray-color-1);
+    --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
+    --td-bg-color-component: var(--td-gray-color-3);
+    --td-bg-color-component-active: var(--td-gray-color-6);
+    --td-bg-color-component-disabled: var(--td-gray-color-2);
+    --td-bg-color-secondarycomponent: var(--td-gray-color-4);
+    --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
+
+    // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+    --td-bg-color-specialcomponent: #fff;
+
+    // 文本颜色
+    --td-text-color-primary: var(--td-font-gray-1);
+    --td-text-color-secondary: var(--td-font-gray-2);
+    --td-text-color-placeholder: var(--td-font-gray-3);
+    --td-text-color-disabled: var(--td-font-gray-4);
+    --td-text-color-anti: var(--td-font-white-1);
+    --td-text-color-brand: var(--td-brand-color);
+    --td-text-color-link: var(--td-brand-color);
+
+    // 分割线
+    --td-border-level-1-color: var(--td-gray-color-3);
+    --td-component-stroke: var(--td-gray-color-3);
+    // 边框
+    --td-border-level-2-color: var(--td-gray-color-4);
+    --td-component-border: var(--td-gray-color-4);
+
+    // 基础/下层 投影 hover 使用的组件包括：表格 /
+    --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
+    // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+    --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
+    // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+    --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
+      0 8px 10px -5px rgba(0, 0, 0, 8%);
+    --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+
+    // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+    --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
+    --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
+    --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
+    --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
+
+    // table 特定阴影
+    --td-table-shadow-color: rgba(0, 0, 0, 8%);
+
+    // 滚动条颜色
+    --td-scrollbar-color: rgba(0, 0, 0, 10%);
+    // 滚动条悬浮颜色（ hover ）
+    --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
+    // 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
+    --td-scroll-track-color: #fff;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_radius.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_radius.less
new file mode 100644
index 000000000..4d69c6ce9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_radius.less
@@ -0,0 +1,10 @@
+page,
+.page {
+  // 圆角
+  --td-radius-small: 6rpx;
+  --td-radius-default: 12rpx;
+  --td-radius-large: 18rpx;
+  --td-radius-extraLarge: 24rpx;
+  --td-radius-round: 999px;
+  --td-radius-circle: 50%;
+}
diff --git a/packages/tdesign-uniapp/components/common/style/theme/raw/_spacer.less b/packages/tdesign-uniapp/components/common/style/theme/raw/_spacer.less
new file mode 100644
index 000000000..dcb07d939
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/theme/raw/_spacer.less
@@ -0,0 +1,11 @@
+page,
+.page {
+  // Spacer
+  --td-spacer: 16rpx;
+  --td-spacer-1: 24rpx; // 间距-小-x
+  --td-spacer-2: 32rpx; // 间距-小
+  --td-spacer-3: 48rpx; // 间距-中
+  --td-spacer-4: 64rpx; // 间距-大
+  --td-spacer-5: 96rpx; // 间距-大-x
+  --td-spacer-6: 160rpx; // 间距-大-xx
+}
diff --git a/packages/tdesign-uniapp/components/common/style/utilities/_index.less b/packages/tdesign-uniapp/components/common/style/utilities/_index.less
new file mode 100644
index 000000000..588b31c64
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/style/utilities/_index.less
@@ -0,0 +1,16 @@
+.hotspot-expanded {
+  &.relative {
+    position: relative;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    transform: scale(1.5);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/common/utils.js b/packages/tdesign-uniapp/components/common/utils.js
new file mode 100644
index 000000000..977190fb3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/utils.js
@@ -0,0 +1,335 @@
+import { prefix } from './config';
+import { isString, isNumber, isDef, isBoolean, isObject } from './validator';
+import { getWindowInfo, getAppBaseInfo, getDeviceInfo } from './wechat';
+
+export { getWindowInfo };
+
+export const systemInfo = getWindowInfo();
+
+export const appBaseInfo = getAppBaseInfo();
+
+export const deviceInfo = getDeviceInfo();
+
+
+export const debounce = function (func, wait = 500) {
+  let timerId;
+  return function (...rest) {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+    timerId = setTimeout(() => {
+      func.apply(this, rest);
+    }, wait);
+  };
+};
+
+export const throttle = (func, wait = 100, options = null) => {
+  let previous = 0;
+  let timerid = null;
+
+  if (!options) {
+    options = {
+      leading: true,
+    };
+  }
+
+  return function (...args) {
+    const now = Date.now();
+
+    if (!previous && !options.leading) previous = now;
+
+    const remaining = wait - (now - previous);
+    const context = this;
+
+    if (remaining <= 0) {
+      if (timerid) {
+        clearTimeout(timerid);
+        timerid = null;
+      }
+      previous = now;
+      func.apply(context, args);
+    }
+  };
+};
+
+export const classNames = function (...args) {
+  const hasOwn = {}.hasOwnProperty;
+  const classes = [];
+
+  args.forEach((arg) => {
+    // for (let i = 0; i < args.length; i++) {
+    // eslint-disable-next-line
+    // const arg = args[i]
+    if (!arg) return;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      const inner = classNames(...arg);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      // eslint-disable-next-line
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  });
+
+  return classes.join(' ');
+};
+
+export const styles = function (styleObj) {
+  return Object.keys(styleObj)
+    .map(styleKey => `${styleKey}: ${styleObj[styleKey]}`)
+    .join('; ');
+};
+
+export const getAnimationFrame = function (context, cb) {
+  return uni
+    .createSelectorQuery()
+    .in(context)
+    .selectViewport()
+    .boundingClientRect()
+    .exec(() => {
+      cb();
+    });
+};
+
+export const getRect = function (context, selector, needAll = false, useH5Origin = false) {
+  let result;
+  // #ifdef H5
+  if (useH5Origin) {
+    result = document[needAll ? 'querySelectorAll' : 'querySelector'](selector)?.getBoundingClientRect();
+  }
+  // #endif
+  if (result) {
+    return result;
+  }
+
+  return new Promise((resolve, reject) => {
+    uni
+      .createSelectorQuery()
+      .in(context)
+      // eslint-disable-next-line no-unexpected-multiline
+      [needAll ? 'selectAll' : 'select'](selector)
+      .boundingClientRect((rect) => {
+        if (rect) {
+          resolve(rect);
+        } else {
+          reject(rect);
+        }
+      })
+      .exec();
+  });
+};
+
+
+export const getTreeDepth = (tree, key) => tree.reduce((maxDepth, node) => {
+  const keyName = coalesce(key, 'children');
+  if (node[keyName] && node[keyName].length > 0) {
+    return Math.max(maxDepth, getTreeDepth(node[keyName], key) + 1);
+  }
+  return Math.max(maxDepth, 1);
+}, 0);
+
+export const isIOS = function () {
+  return !!(deviceInfo?.system?.toLowerCase().search('ios') + 1);
+};
+
+export const addUnit = function (value) {
+  if (!isDef(value)) {
+    return undefined;
+  }
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+};
+
+/**
+ * 计算字符串字符的长度并可以截取字符串。
+ * @param char 传入字符串（maxcharacter条件下，一个汉字表示两个字符）
+ * @param max 规定最大字符串长度
+ * @returns 当没有传入maxCharacter/maxLength 时返回字符串字符长度，当传入maxCharacter/maxLength时返回截取之后的字符串和长度。
+ */
+export const getCharacterLength = (type, char, max) => {
+  const str = String(coalesce(char, ''));
+
+  if (str.length === 0) {
+    return {
+      length: 0,
+      characters: '',
+    };
+  }
+
+  if (type === 'maxcharacter') {
+    let len = 0;
+    for (let i = 0; i < str.length; i += 1) {
+      let currentStringLength = 0;
+      if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
+        currentStringLength = 2;
+      } else {
+        currentStringLength = 1;
+      }
+      if (len + currentStringLength > max) {
+        return {
+          length: len,
+          characters: str.slice(0, i),
+        };
+      }
+      len += currentStringLength;
+    }
+    return {
+      length: len,
+      characters: str,
+    };
+  }
+
+  if (type === 'maxlength') {
+    const length = str.length > max ? max : str.length;
+    return {
+      length,
+      characters: str.slice(0, length),
+    };
+  }
+
+  return {
+    length: str.length,
+    characters: str,
+  };
+};
+
+export const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size));
+
+
+export const getInstance = function (context, selector) {
+  if (!context) {
+    const pages = getCurrentPages();
+    const page = pages[pages.length - 1];
+    context = (page).$$basePage || page;
+  }
+
+  const pureSelector = /^[.#]/.test(selector) ? selector.slice(1) : selector;
+  const instance = context ? context.$refs[pureSelector] : null;
+
+  if (!instance) {
+    console.warn('未找到组件,请检查 selector 是否正确');
+    return null;
+  }
+  return instance;
+};
+
+export const unitConvert = (value) => {
+  if (typeof value === 'string') {
+    if (value.includes('rpx')) {
+      return (parseInt(value, 10) * (coalesce(systemInfo?.screenWidth, 750))) / 750;
+    }
+    return parseInt(value, 10);
+  }
+  return coalesce(value, 0);
+};
+
+export const setIcon = (iconName, icon, defaultIcon) => {
+  if (icon) {
+    if (typeof icon === 'string') {
+      return {
+        [`${iconName}Name`]: icon,
+        [`${iconName}Data`]: {},
+      };
+    }
+    if (typeof icon === 'object') {
+      return {
+        [`${iconName}Name`]: '',
+        [`${iconName}Data`]: icon,
+      };
+    }
+    return {
+      [`${iconName}Name`]: defaultIcon,
+      [`${iconName}Data`]: {},
+    };
+  }
+  return {
+    [`${iconName}Name`]: '',
+    [`${iconName}Data`]: {},
+  };
+};
+
+export const toCamel = str => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());
+export const toPascal = name => name
+  .split('-')
+  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+  .join('');
+
+export function hyphenate(str) {
+  const hyphenateRE = /\B([A-Z])/g;
+  return str.replace(hyphenateRE, '-$1').toLowerCase();
+}
+export const getCurrentPage = function () {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1];
+};
+
+export const uniqueFactory = (compName) => {
+  let number = 0;
+  return () => {
+    const uniqueId = `${prefix}_${compName}_${number}`;
+    number += 1;
+    return uniqueId;
+  };
+};
+
+export const calcIcon = (icon, defaultIcon) => {
+  if (icon && ((isBoolean(icon) && defaultIcon) || isString(icon))) {
+    return { name: isBoolean(icon) ? defaultIcon : icon };
+  }
+  if (isObject(icon)) {
+    return icon;
+  }
+  return null;
+};
+
+export const isOverSize = (size, sizeLimit) => {
+  if (!sizeLimit) return false;
+
+  const base = 1000;
+  const unitMap = {
+    B: 1,
+    KB: base,
+    MB: base * base,
+    GB: base * base * base,
+  };
+  const computedSize = typeof sizeLimit === 'number'
+    ? sizeLimit * base
+    : sizeLimit?.size * unitMap[coalesce(sizeLimit?.unit, 'KB')]; // 单位 KB
+
+  return size > computedSize;
+};
+
+export const rpx2px = rpx => Math.floor((systemInfo.windowWidth * rpx) / 750);
+
+export const nextTick = () => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve();
+  }, 33);
+});
+
+/**
+ * 多参数空值合并函数
+ * @param {...any} args - 任意数量的参数
+ * @returns {any} 第一个非null/undefined的参数值
+ */
+export function coalesce(...args) {
+  // 遍历所有参数
+  for (let i = 0; i < args.length; i++) {
+    // 返回第一个非null且非undefined的值
+    if (args[i] !== null && args[i] !== undefined) {
+      return args[i];
+    }
+  }
+  // 如果所有参数都是null/undefined，返回最后一个参数
+  return args[args.length - 1];
+}
diff --git a/packages/tdesign-uniapp/components/common/utils.wxs.js b/packages/tdesign-uniapp/components/common/utils.wxs.js
new file mode 100644
index 000000000..383d4feb6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/utils.wxs.js
@@ -0,0 +1,140 @@
+import { getRegExp } from './runtime/wxs-polyfill';
+/* utils */
+
+/**
+ * addUnit */
+// 为 css 添加单位
+function addUnit(value) {
+  const REGEXP = getRegExp('^-?\\d+(.\\d+)?$');
+  if (value == null) {
+    return undefined;
+  }
+  return REGEXP.test(`${value}`) ? `${value}px` : value;
+}
+
+function isString(string) {
+  return typeof string === 'string';
+}
+
+function isArray(array) {
+  return Array.isArray(array);
+  // return array && array.constructor === 'Array';
+}
+
+function isObject(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+const isNoEmptyObj = function (obj) {
+  return isObject(obj) && JSON.stringify(obj) !== '{}';
+};
+
+function includes(arr, value) {
+  if (!arr || !isArray(arr)) return false;
+
+  let i = 0;
+  const len = arr.length;
+
+  for (; i < len; i++) {
+    if (arr[i] === value) return true;
+  }
+  return false;
+}
+
+function cls(base, arr) {
+  const res = [base];
+  let i = 0;
+  for (let size = arr.length; i < size; i++) {
+    const item = arr[i];
+
+    if (item && Array.isArray(item)) {
+      const key = arr[i][0];
+      const value = arr[i][1];
+
+      if (value) {
+        res.push(`${base}--${key}`);
+      }
+    } else if (typeof item === 'string' || typeof item === 'number') {
+      if (item) {
+        res.push(`${base}--${item}`);
+      }
+    }
+  }
+  return res.join(' ');
+}
+
+function getBadgeAriaLabel(options) {
+  const maxCount = options.maxCount || 99;
+  if (options.dot) {
+    return '有新的消息';
+  }
+  if (options.count === '...') {
+    return '有很多消息';
+  }
+  if (isNaN(options.count)) {
+    return options.count;
+  }
+  const str1 = `有${maxCount}+条消息`;
+  const str2 = `有${options.count}条消息`;
+  return Number(options.count) > maxCount ? str1 : str2;
+}
+
+function endsWith(str, endStr) {
+  return str.slice(-endStr.length) === endStr ? str : str + endStr;
+}
+
+function keys(obj) {
+  return JSON.stringify(obj)
+    .replace(getRegExp('{|}|"', 'g'), '')
+    .split(',')
+    .map(item => item.split(':')[0]);
+}
+
+function kebabCase(str) {
+  return str
+    .replace(getRegExp('[A-Z]', 'g'), ele => `-${ele}`)
+    .toLowerCase();
+}
+
+// eslint-disable-next-line no-underscore-dangle
+function _style(styles) {
+  if (isArray(styles)) {
+    return styles
+      .filter(item => item != null && item !== '')
+      .map(item => ((isArray(item) || isObject(item)) ? _style(item) : endsWith(item, ';')))
+      .join(' ');
+  }
+
+  if (isObject(styles)) {
+    return keys(styles)
+      .filter(key => styles[key] != null && styles[key] !== '')
+      .map(key => [kebabCase(key), [styles[key]]].join(':'))
+      .join(';');
+  }
+
+  return styles;
+}
+
+function isValidIconName(str) {
+  // prettier-ignore
+  return getRegExp('^[A-Za-z0-9-_]+$').test(str);
+}
+
+export default {
+  addUnit,
+  isString,
+  isArray,
+  isObject,
+  isBoolean,
+  isNoEmptyObj,
+  includes,
+  cls,
+  getBadgeAriaLabel,
+  _style,
+  isValidIconName,
+};
diff --git a/packages/tdesign-uniapp/components/common/validator.js b/packages/tdesign-uniapp/components/common/validator.js
new file mode 100644
index 000000000..5b0137225
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/validator.js
@@ -0,0 +1,30 @@
+export function isFunction(val) {
+  return typeof val === 'function';
+}
+
+export const isString = val => typeof val === 'string';
+
+export const isNull = value => value === null;
+
+export const isUndefined = value => value === undefined;
+
+export function isDef(value) {
+  return !isUndefined(value) && !isNull(value);
+}
+
+export function isNumber(value) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+
+export function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+export function isObject(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+export function isPlainObject(val) {
+  return val !== null && typeof val === 'object' && Object.prototype.toString.call(val) === '[object Object]';
+}
diff --git a/packages/tdesign-uniapp/components/common/version.js b/packages/tdesign-uniapp/components/common/version.js
new file mode 100644
index 000000000..36791b4fb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/version.js
@@ -0,0 +1,66 @@
+import { getAppBaseInfo } from './wechat';
+
+let systemInfo;
+
+// 获取系统信息
+function getSystemInfo() {
+  if (systemInfo == null) {
+    systemInfo = getAppBaseInfo();
+  }
+  return systemInfo;
+}
+
+// 版本号比较, 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
+export function compareVersion(v1, v2) {
+  v1 = v1.split('.');
+  v2 = v2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i += 1) {
+    const num1 = parseInt(v1[i], 10);
+    const num2 = parseInt(v2[i], 10);
+
+    if (num1 > num2) {
+      return 1;
+    }
+    if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+function judgeByVersion(version) {
+  const currentSDKVersion = getSystemInfo().SDKVersion;
+  return compareVersion(currentSDKVersion, version) >= 0;
+}
+
+export function canIUseFormFieldButton() {
+  return judgeByVersion('2.10.3');
+}
+
+export function canUseVirtualHost() {
+  let result = false;
+
+  // #ifdef MP-WEIXIN
+  result = judgeByVersion('2.19.2');
+  // #endif
+
+  // #ifdef H5 || APP-PLUS || MP-ALIPAY
+  result = true;
+  // #endif
+
+  return result;
+}
+
+export function canUseProxyScrollView() {
+  return judgeByVersion('2.19.2');
+}
diff --git a/packages/tdesign-uniapp/components/common/wechat.js b/packages/tdesign-uniapp/components/common/wechat.js
new file mode 100644
index 000000000..18fff3abe
--- /dev/null
+++ b/packages/tdesign-uniapp/components/common/wechat.js
@@ -0,0 +1,20 @@
+export const getObserver = (context, selector) => new Promise((resolve) => {
+  uni
+    .createIntersectionObserver(context)
+    .relativeToViewport()
+    .observe(selector, (res) => {
+      resolve(res);
+    });
+});
+
+/**
+ * 背景：单页模式下, getWindowInfo、getAppBaseInfo、getDeviceInfo 等接口均返回 undefined。
+ * 复现路径：分享到朋友圈，再打开单页模式的该页面，uni.getWindowInfo() 等接口返回 undefined
+ * 代码片段：https://developers.weixin.qq.com/s/mzvZ8FmH7vVW
+ */
+
+export const getWindowInfo = () => (uni.getWindowInfo ? uni.getWindowInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
+
+export const getAppBaseInfo = () => (uni.getAppBaseInfo ? uni.getAppBaseInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
+
+export const getDeviceInfo = () => (uni.getDeviceInfo ? uni.getDeviceInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
diff --git a/packages/tdesign-uniapp/components/count-down/README.en-US.md b/packages/tdesign-uniapp/components/count-down/README.en-US.md
new file mode 100644
index 000000000..f7ff15873
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/README.en-US.md
@@ -0,0 +1,50 @@
+:: BASE_DOC ::
+
+## API
+
+### CountDown Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-start | Boolean | true | \- | N
+content | String | 'default' | \- | N
+format | String | HH:mm:ss | \- | N
+millisecond | Boolean | false | \- | N
+size | String | 'medium' | options: small/medium/large | N
+split-with-unit | Boolean | false | \- | N
+theme | String | 'default' | options: default/round/square | N
+time | Number | 0 | required | Y
+
+### CountDown Events
+
+name | params | description
+-- | -- | --
+change | `(time: TimeData)` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | \-
+
+### CountDown Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+
+### CountDown External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-count | \-
+t-class-split | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color | - 
+--td-countdown-default-color | @text-color-primary | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @text-color-anti | - 
+--td-countdown-square-border-radius | @radius-small | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/count-down/README.md b/packages/tdesign-uniapp/components/count-down/README.md
new file mode 100644
index 000000000..f47c4cd82
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/README.md
@@ -0,0 +1,76 @@
+---
+title: CountDown 倒计时
+description: 用于实时展示倒计时数值。
+spline: data
+isComponent: true
+---
+
+
+> CountDown 组件用于实时展示倒计时数值。
+如果需要与站点演示一致的数字字体效果，推荐您到 <a href="https://tdesign.tencent.com/design/fonts">数字字体章节</a>，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCountDown from 'tdesign-uniapp/count-down/count-down.vue';
+```
+
+### 基础倒计时
+
+{{ base }}
+
+### 调整尺寸
+
+{{ size }}
+
+## API
+
+### CountDown Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-start | Boolean | true | 是否自动开始倒计时 | N
+content | String | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N
+format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
+millisecond | Boolean | false | 是否开启毫秒级渲染 | N
+size | String | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
+split-with-unit | Boolean | false | 使用时间单位分割 | N
+theme | String | 'default' | 倒计时风格。可选项：default/round/square | N
+time | Number | 0 | 必需。倒计时时长，单位毫秒 | Y
+
+### CountDown Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | 倒计时结束时触发
+
+### CountDown Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+
+### CountDown External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-count | 计数样式类
+t-class-split | 分隔线样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-countdown-bg-color | @error-color | - |
+| --td-countdown-default-color | @text-color-primary | - |
+| --td-countdown-round-border-radius | @radius-circle | - |
+| --td-countdown-round-color | @text-color-anti | - |
+| --td-countdown-square-border-radius | @radius-small | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/count-down/_example/base/index.vue b/packages/tdesign-uniapp/components/count-down/_example/base/index.vue
new file mode 100644
index 000000000..3fa7ca5ca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/base/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <view>
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        时分秒
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down :time="time" />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带毫秒
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          format="HH:mm:ss:SSS"
+          :time="time"
+          millisecond
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带方形底
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          content="default"
+          :time="time"
+          theme="square"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带圆形底
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          content="default"
+          :time="time"
+          theme="round"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带单位
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          content="default"
+          :time="time"
+          split-with-unit
+          theme="round"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        无底色带单位
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          t-class-count="external-count"
+          t-class-split="external-split"
+          content="default"
+          :time="time"
+          split-with-unit
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tCountDown from 'tdesign-uniapp/count-down/count-down.vue';
+export default {
+  components: {
+    tCountDown,
+  },
+  data() {
+    return {
+      time: 5760000,
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-count-down-desc {
+    color: var(--td-text-color-secondary);
+    font-size: 28rpx;
+}
+
+.demo-count-down-content {
+    margin: 32rpx 0 48rpx;
+}
+
+.external-count {
+    color: #e34d59;
+    font-size: 36rpx;
+    line-height: 48rpx;
+    vertical-align: middle;
+}
+
+.external-split {
+    font-size: 20rpx;
+    margin: 0 10rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/count-down/_example/count-down.less b/packages/tdesign-uniapp/components/count-down/_example/count-down.less
new file mode 100644
index 000000000..ec7d6d587
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/count-down.less
@@ -0,0 +1,52 @@
+@gray: rgba(0, 0, 0, 0.4);
+
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.flex {
+    display: flex;
+    align-items: center;
+}
+
+.base-time {
+    margin-top: 52rpx;
+    justify-content: space-between;
+
+    &-text {
+        font-size: 20rpx;
+        color: @gray;
+        width: 60%;
+    }
+
+    &-cls {
+        color: #333;
+        font-weight: 700;
+    }
+}
+
+.spec-item {
+    justify-content: space-between;
+    margin-top: 32rpx;
+
+    &-right {
+        width: 118 * 2rpx;
+    }
+
+    &-left {
+        width: 176 * 2rpx;
+    }
+
+    &-after {
+        font-size: 20rpx;
+        color: @gray;
+        justify-content: center;
+        display: inline-flex;
+        align-items: center;
+        width: 30%;
+    }
+}
+
+.last-padding {
+    padding-bottom: 80rpx;
+}
diff --git a/packages/tdesign-uniapp/components/count-down/_example/count-down.vue b/packages/tdesign-uniapp/components/count-down/_example/count-down.vue
new file mode 100644
index 000000000..2ea7011f4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/count-down.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="CountDown"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="CountDown 倒计时"
+      desc="用于实时展示倒计时数值。"
+      notice="渲染框架支持情况：Skyline、WebView"
+    />
+    <t-demo
+      padding
+      title="01 组件类型"
+    >
+      <BaseDemo />
+    </t-demo>
+
+    <t-demo
+      padding
+      title="02 组件尺寸"
+      desc="倒计时 large/medium/small 尺寸"
+    >
+      <size />
+    </t-demo>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    size,
+  },
+  data() {
+    return {
+      time: 5760000,
+      time1: 2760000,
+      timeData: {},
+      counting: false,
+    };
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="less">
+@import './count-down.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/count-down/_example/size/index.vue b/packages/tdesign-uniapp/components/count-down/_example/size/index.vue
new file mode 100644
index 000000000..a3721bbcb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/size/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <view>
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        时分秒
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="small"
+          :time="time"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down :time="time" />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="large"
+          :time="time"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带毫秒
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="small"
+          format="HH:mm:ss:SSS"
+          :time="time"
+          millisecond
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          format="HH:mm:ss:SSS"
+          :time="time"
+          millisecond
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="large"
+          format="HH:mm:ss:SSS"
+          :time="time"
+          millisecond
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带方形底
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="small"
+          format="HH:mm:ss"
+          :time="time"
+          theme="square"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          format="HH:mm:ss"
+          :time="time"
+          theme="square"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="large"
+          format="HH:mm:ss"
+          :time="time"
+          theme="square"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带圆形底
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="small"
+          format="HH:mm:ss"
+          :time="time"
+          theme="round"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          format="HH:mm:ss"
+          :time="time"
+          theme="round"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="large"
+          format="HH:mm:ss"
+          :time="time"
+          theme="round"
+        />
+      </view>
+    </view>
+
+    <view class="demo-count-down">
+      <text class="demo-count-down-desc">
+        带单位
+      </text>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="small"
+          format="HH:mm:ss"
+          :time="time"
+          split-with-unit
+          theme="round"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          format="HH:mm:ss"
+          :time="time"
+          split-with-unit
+          theme="round"
+        />
+      </view>
+      <view class="demo-count-down-content">
+        <t-count-down
+          size="large"
+          format="HH:mm:ss"
+          :time="time"
+          split-with-unit
+          theme="round"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tCountDown from 'tdesign-uniapp/count-down/count-down.vue';
+export default {
+  components: {
+    tCountDown,
+  },
+  data() {
+    return {
+      time: 5760000,
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-count-down {
+    padding-bottom: 32rpx;
+}
+
+.demo-count-down-desc {
+    color: var(--td-text-color-secondary);
+    font-size: 28rpx;
+}
+
+.demo-count-down-content {
+    margin: 24rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.less b/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.vue b/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.vue
new file mode 100644
index 000000000..734344493
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/_example/skyline/count-down.vue
@@ -0,0 +1,59 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="CountDown"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        CountDown 倒计时
+      </view>
+      <view class="demo-desc">
+        用于实时展示倒计时数值。
+      </view>
+
+      <t-demo
+        padding
+        title="01 组件类型"
+      >
+        <baseDemo />
+      </t-demo>
+
+      <t-demo
+        padding
+        title="02 组件尺寸"
+        desc="倒计时 large/medium/small 尺寸"
+      >
+        <size />
+      </t-demo>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import size from '../size/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './count-down.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/count-down/computed.js b/packages/tdesign-uniapp/components/count-down/computed.js
new file mode 100644
index 000000000..f48dcd361
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/computed.js
@@ -0,0 +1,3 @@
+export const format = function (num) {
+  return num < 10 ? `0${num}` : num;
+};
diff --git a/packages/tdesign-uniapp/components/count-down/count-down.less b/packages/tdesign-uniapp/components/count-down/count-down.less
new file mode 100644
index 000000000..f3d52fea9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/count-down.less
@@ -0,0 +1,150 @@
+@import '../common/style/base.less';
+
+@countdown-small-unit-margin: 8rpx; // 'small'尺寸单位分割文本左右间距
+@countdown-medium-unit-margin: 10rpx; // 'medium'尺寸单位分割文本左右间距
+@countdown-large-unit-margin: 12rpx; // 'large'尺寸单位分割文本左右间距
+@countdown-unit-color: @text-color-primary; // 带单位分割线文本颜色
+@countdown-no-unit-color: @error-color; // 无单位分割线文本颜色
+@countdown-large-no-unit-margin: 12rpx; // 'large'尺寸无单位分割文本左右间距
+@countdown-medium-no-unit-margin: 6rpx; // 'medium'尺寸无单位分割文本左右间距
+@countdown-small-no-unit-margin: 4rpx; // 'small'尺寸无单位分割文本左右间距
+@countdown-small-bg-width: 40rpx; // 'small'尺寸方/圆底背景宽高
+@countdown-medium-bg-width: 48rpx; // 'medium'尺寸方/圆底背景宽高
+@countdown-large-bg-width: 56rpx; // 'large'尺寸方/圆底背景宽高
+@countdown-small-default-font-size: @font-size-base; // 'small'尺寸纯数字倒计时文本大小
+@countdown-small-square-font-size: @font-size-s; // 'small'尺寸带方形底倒计时文本大小
+@countdown-small-round-font-size: @font-size-s; // 'small'尺寸带圆形底倒计时文本大小
+@countdown-small-unit-font-size: @font-size; // 'small'尺寸单位分割文本大小
+@countdown-small-no-unit-font-size: @font-size-base; // 'small'尺寸无单位分割文本大小
+@countdown-medium-default-font-size: @font-size-m; // 'medium'尺寸纯数字倒计时文本大小
+@countdown-medium-square-font-size: @font-size-base; // 'medium'尺寸带方形底倒计时文本大小
+@countdown-medium-round-font-size: @font-size-base; // 'medium'尺寸带圆形底倒计时文本大小
+@countdown-medium-unit-font-size: @font-size-s; // 'medium'尺寸单位分割文本大小
+@countdown-medium-no-unit-font-size: @font-size-m; // 'medium'尺寸无单位分割文本大小
+@countdown-large-default-font-size: 36rpx; // 'large'尺寸纯数字倒计时文本大小
+@countdown-large-square-font-size: @font-size-m; // 'large'尺寸带方形底倒计时文本大小
+@countdown-large-round-font-size: @font-size-m; // 'large'尺寸带圆形底倒计时文本大小
+@countdown-large-unit-font-size: @font-size-base; // 'large'尺寸单位分割文本大小
+@countdown-large-no-unit-font-size: 36rpx; // 'large'尺寸无单位分割文本大小
+
+// 纯数字倒计时文本颜色
+@countdown-default-text-color: var(--td-countdown-default-color, @text-color-primary);
+// 方形/圆形底倒计时文本颜色
+@countdown-text-color: var(--td-countdown-round-color, @text-color-anti);
+// 方形/圆形底背景颜色
+@countdown-bg-color: var(--td-countdown-bg-color, @error-color);
+// 带方形底倒计时圆角大小
+@countdown-square-border-radius: var(--td-countdown-square-border-radius, @radius-small);
+// 带圆形底倒计时圆角大小
+@countdown-round-border-radius: var(--td-countdown-round-border-radius, @radius-circle);
+
+@countdown-number-font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB,
+  Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+  Segoe UI Symbol;
+
+@countdown: ~'@{prefix}-count-down';
+@item: ~'@{countdown}__item';
+@split: ~'@{countdown}__split';
+
+.count-down-size(@size) {
+  .@{countdown} {
+    @defaultFontSize: 'countdown-@{size}-default-font-size';
+    @roundFontSize: 'countdown-@{size}-round-font-size';
+    @squareFontSize: 'countdown-@{size}-square-font-size';
+    @width: 'countdown-@{size}-bg-width';
+    @height: 'countdown-@{size}-bg-width';
+    @dotMargin: 'countdown-@{size}-no-unit-margin';
+    @dotFontSize: 'countdown-@{size}-no-unit-font-size';
+    @textMargin: 'countdown-@{size}-unit-margin';
+    @textFontSize: 'countdown-@{size}-unit-font-size';
+
+    &--@{size} {
+      &.@{countdown}--default {
+        font-size: @@defaultFontSize;
+      }
+
+      &.@{countdown}--round {
+        > .@{item} {
+          font-size: @@roundFontSize;
+        }
+      }
+
+      &.@{countdown}--square {
+        > .@{item} {
+          font-size: @@squareFontSize;
+        }
+      }
+
+      &.@{countdown}--round,
+      &.@{countdown}--square {
+        > .@{item} {
+          width: @@width;
+          height: @@height;
+        }
+      }
+
+      &.@{countdown}--round,
+      &.@{countdown}--square {
+        > .@{split}--dot {
+          margin: 0 @@dotMargin;
+          font-size: @@dotFontSize;
+          font-weight: 700;
+        }
+
+        > .@{split}--text {
+          margin: 0 @@textMargin;
+          font-size: @@textFontSize;
+        }
+      }
+    }
+  }
+}
+
+.count-down-size(small);
+.count-down-size(medium);
+.count-down-size(large);
+
+.@{countdown} {
+  font-family: @countdown-number-font-family;
+  display: flex;
+
+  .@{item},
+  .@{split} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--square,
+  &--round {
+    > .@{split}--dot {
+      color: @countdown-no-unit-color;
+    }
+
+    > .@{split}--text {
+      color: @countdown-unit-color;
+    }
+  }
+
+  &--default {
+    color: @countdown-default-text-color;
+  }
+
+  &--square {
+    color: @countdown-text-color;
+
+    > .@{item} {
+      border-radius: @countdown-square-border-radius;
+      background: @countdown-bg-color;
+    }
+  }
+
+  &--round {
+    color: @countdown-text-color;
+
+    > .@{item} {
+      border-radius: @countdown-round-border-radius;
+      background: @countdown-bg-color;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/count-down/count-down.vue b/packages/tdesign-uniapp/components/count-down/count-down.vue
new file mode 100644
index 000000000..a04d979f6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/count-down.vue
@@ -0,0 +1,166 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + classPrefix + '--' + theme + ' ' + classPrefix + '--' + size + ' ' + tClass"
+    aria-role="option"
+  >
+    <slot
+      v-if="content !== 'default'"
+      name="content"
+    />
+    <slot v-if="content !== 'default'" />
+    <block v-else-if="theme == 'default' && !splitWithUnit">
+      {{ formattedTime }}
+    </block>
+    <block v-else>
+      <block
+        v-for="(item, index) in timeRange"
+        :key="index"
+      >
+        <text :class="classPrefix + '__item ' + tClassCount">
+          {{ formatUtil(timeData[timeRange[index]]) }}
+        </text>
+
+        <text
+          v-if="splitWithUnit || timeRange.length - 1 !== index"
+          :class="classPrefix + '__split ' + classPrefix + '__split--' + (splitWithUnit ? 'text' : 'dot') + ' ' + tClassSplit"
+        >
+          {{ splitWithUnit ? timeDataUnit[timeRange[index]] : ':' }}
+        </text>
+      </block>
+    </block>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { isSameSecond, parseFormat, parseTimeData, TimeDataUnit } from './utils';
+import _ from '../common/utils.wxs';
+import { format as formatUtil } from './computed.js';
+
+
+const name = `${prefix}-count-down`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-count`,
+    `${prefix}-class-split`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      timeDataUnit: TimeDataUnit,
+      timeData: parseTimeData(0),
+      formattedTime: '0',
+      _,
+      timeoutId: null,
+      isInitialTime: false,
+    };
+  },
+  watch: {
+    time: {
+      handler() {
+        this.reset();
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  beforeUnMount() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  },
+  methods: {
+    formatUtil,
+    start() {
+      if (this.counting) {
+        return;
+      }
+
+      this.counting = true;
+      this.endTime = Date.now() + this.remain;
+      this.doCount();
+    },
+
+    pause() {
+      this.counting = false;
+      this.timeoutId && clearTimeout(this.timeoutId);
+    },
+
+    reset() {
+      this.pause();
+      this.remain = this.time;
+      this.updateTime(this.remain);
+
+      if (this.autoStart && this.remain > 0) {
+        this.start();
+      }
+
+      this.isInitialTime = true;
+    },
+
+    getTime() {
+      return Math.max(this.endTime - Date.now(), 0);
+    },
+
+    updateTime(remain) {
+      const { format } = this;
+      this.remain = remain;
+      const timeData = parseTimeData(remain);
+      this.$emit('change', timeData);
+
+      const { timeText } = parseFormat(remain, format);
+
+      const timeRange = format.split(':');
+
+      this.timeRange = timeRange;
+      this.timeData = timeData;
+      this.formattedTime = timeText.replace(/:/g, ' : ');
+
+      if (remain === 0 && (this.counting || this.isInitialTime)) {
+        this.pause();
+        this.$emit('finish');
+        this.counting = false;
+      }
+    },
+
+    doCount() {
+      this.timeoutId = setTimeout(() => {
+        const time = this.getTime();
+
+        if (this.millisecond) {
+          this.updateTime(time);
+        } else if (!isSameSecond(time, this.remain) || time === 0) {
+          this.updateTime(time);
+        }
+
+        if (time !== 0) {
+          this.doCount();
+        }
+      }, 33); // 30 帧，因此 1000 / 30 = 33
+    },
+  },
+});
+</script>
+<style scoped>
+@import './count-down.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/count-down/props.ts b/packages/tdesign-uniapp/components/count-down/props.ts
new file mode 100644
index 000000000..f0a2f41a9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/props.ts
@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCountDownProps } from './type';
+export default {
+  /** 是否自动开始倒计时 */
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+  /** 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 */
+  content: {
+    type: String,
+    default: 'default' as TdCountDownProps['content'],
+  },
+  /** 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 */
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+  /** 是否开启毫秒级渲染 */
+  millisecond: Boolean,
+  /** 倒计时尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdCountDownProps['size'],
+    validator(val: TdCountDownProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 使用时间单位分割 */
+  splitWithUnit: Boolean,
+  /** 倒计时风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdCountDownProps['theme'],
+    validator(val: TdCountDownProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'round', 'square'].includes(val);
+    },
+  },
+  /** 倒计时时长，单位毫秒 */
+  time: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+  /** 时间变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 倒计时结束时触发 */
+  onFinish: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/count-down/type.ts b/packages/tdesign-uniapp/components/count-down/type.ts
new file mode 100644
index 000000000..4023138ad
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/type.ts
@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCountDownProps {
+  /**
+   * 是否自动开始倒计时
+   * @default true
+   */
+  autoStart?: boolean;
+  /**
+   * 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽
+   * @default 'default'
+   */
+  content?: string;
+  /**
+   * 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+   * @default HH:mm:ss
+   */
+  format?: string;
+  /**
+   * 是否开启毫秒级渲染
+   * @default false
+   */
+  millisecond?: boolean;
+  /**
+   * 倒计时尺寸
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * 使用时间单位分割
+   * @default false
+   */
+  splitWithUnit?: boolean;
+  /**
+   * 倒计时风格
+   * @default 'default'
+   */
+  theme?: 'default' | 'round' | 'square';
+  /**
+   * 倒计时时长，单位毫秒
+   * @default 0
+   */
+  time: number;
+  /**
+   * 时间变化时触发
+   */
+  onChange?: (time: TimeData) => void;
+  /**
+   * 倒计时结束时触发
+   */
+  onFinish?: () => void;
+}
+
+export interface TimeData {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+}
diff --git a/packages/tdesign-uniapp/components/count-down/utils.ts b/packages/tdesign-uniapp/components/count-down/utils.ts
new file mode 100644
index 000000000..1e50e938a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/count-down/utils.ts
@@ -0,0 +1,80 @@
+export interface TimeData {
+  DD: number;
+  HH: number;
+  mm: number;
+  ss: number;
+  SSS: number;
+}
+export const TimeDataUnit = {
+  DD: '天',
+  HH: '时',
+  mm: '分',
+  ss: '秒',
+  SSS: '毫秒',
+};
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+export const parseTimeData = function (time: number): TimeData {
+  const days = Math.floor(time / DAY);
+  const hours = Math.floor((time % DAY) / HOUR);
+  const minutes = Math.floor((time % HOUR) / MINUTE);
+  const seconds = Math.floor((time % MINUTE) / SECOND);
+  const milliseconds = Math.floor(time % SECOND);
+  return {
+    DD: days,
+    HH: hours,
+    mm: minutes,
+    ss: seconds,
+    SSS: milliseconds,
+  };
+};
+
+export const isSameSecond = function (time1: number, time2: number): boolean {
+  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
+};
+
+export type TTimeList = { digit: string; unit: string; match: string }[];
+
+/**
+ *
+ * @param time 倒计时时间，毫秒单位
+ * @param format 倒计时格式化字符串，例如：dd天hh小时mm分ss秒SSS毫秒，hh:mm:ss.SSS，hh:mm:ss
+ */
+export const parseFormat = function (time: number, format: string) {
+  const obj = {
+    'D+': Math.floor(time / 86400000), // 日
+    'H+': Math.floor((time % 86400000) / 3600000), // 小时
+    'm+': Math.floor((time % 3600000) / 60000), // 分
+    's+': Math.floor((time % 60000) / 1000), // 秒
+    'S+': Math.floor(time % 1000), // 毫秒
+  };
+  const timeList: TTimeList = [];
+  let timeText = format;
+
+  Object.keys(obj).forEach((prop) => {
+    if (new RegExp(`(${prop})`).test(timeText)) {
+      timeText = timeText.replace(RegExp.$1, (match, offset, source) => {
+        const v = `${(obj as any)[prop]}`;
+        let digit = v;
+        if (match.length > 1) {
+          digit = (match.replace(new RegExp(match[0], 'g'), '0') + v).substr(v.length);
+        }
+        const unit = source.substr(offset + match.length);
+        const last = timeList[timeList.length - 1];
+        if (last) {
+          const index = last.unit.indexOf(match);
+          if (index !== -1) {
+            last.unit = last.unit.substr(0, index);
+          }
+        }
+        timeList.push({ digit, unit, match });
+        return digit;
+      });
+    }
+  });
+  return { timeText, timeList };
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/README.en-US.md b/packages/tdesign-uniapp/components/date-time-picker/README.en-US.md
new file mode 100644
index 000000000..5dd0e0170
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/README.en-US.md
@@ -0,0 +1,61 @@
+:: BASE_DOC ::
+
+## API
+
+### DateTimePicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-close | Boolean | false | \- | N
+cancel-btn | String | 取消 | \- | N
+confirm-btn | String | - | \- | N
+custom-locale | String | zh | \- | N
+end | String / Number | - | \- | N
+filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
+formatter | Function | - | Typescript：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
+header | Boolean | true | \- | N
+mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second' \| 'null'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+popup-props | Object | {} | popup properties。Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+show-week | Boolean | false | \- | N
+start | String / Number | - | \- | N
+steps | Object | {} | Typescript：`{ [key in TimeModeValues]?: number }` | N
+title | String | - | title of picker | N
+use-popup | Boolean | true | \- | N
+value | String / Number | - | `v-model:value` is supported。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+default-value | String / Number | - | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+visible | Boolean | false | \- | N
+
+### DateTimePicker Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+change | `(context: { value: DateValue })` | \-
+close | `(context: { trigger: DateTimePickerTriggerSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts)。<br/>`type DateTimePickerTriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+confirm | `(context: { value: DateValue })` | \-
+pick | `(context: { value: DateValue })` | \-
+
+### DateTimePicker Slots
+
+name | Description
+-- | --
+footer | \-
+header | \-
+
+### DateTimePicker External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-cancel | \-
+t-class-confirm | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-data-time-picker-year-width | 128rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/date-time-picker/README.md b/packages/tdesign-uniapp/components/date-time-picker/README.md
new file mode 100644
index 000000000..063e1a031
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/README.md
@@ -0,0 +1,105 @@
+---
+title: DateTimePicker 时间选择器
+description: 用于选择一个时间点或者一个时间段。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+```
+
+### 组件类型
+
+#### 年月日选择器
+
+{{ year-month-date }}
+
+#### 年月选择器
+
+{{ year-month }}
+
+### 时间选择器
+
+包括：`时分秒`、`时分`两个示例
+
+{{ time }}
+
+#### 年月日时分秒选择器
+
+{{ date-all }}
+
+### 组件用法
+
+#### 调整步数
+
+{{ steps }}
+
+#### 不使用 Popup
+
+{{ without-popup }}
+
+## API
+
+### DateTimePicker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-close | Boolean | false | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
+cancel-btn | String | 取消 | 取消按钮文字 | N
+confirm-btn | String | - | 确定按钮文字 | N
+custom-locale | String | zh |  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
+end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
+formatter | Function | - | 格式化标签。TS 类型：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
+header | Boolean | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 | N
+mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second' \| 'null'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+show-week | Boolean | false | 是否在日期旁边显示周几（如周一，周二，周日等） | N
+start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | {} | 时间间隔步数，示例：`{ minute: 5 }`。TS 类型：`{ [key in TimeModeValues]?: number }` | N
+title | String | - | 标题 | N
+use-popup | Boolean | true | 是否使用弹出层包裹 | N
+value | String / Number | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+default-value | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
+
+### DateTimePicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 取消按钮点击时触发
+change | `(context: { value: DateValue })` | 确认按钮点击时触发
+close | `(context: { trigger: DateTimePickerTriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/date-time-picker/type.ts)。<br/>`type DateTimePickerTriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+confirm | `(context: { value: DateValue })` | 确认按钮点击时触发
+pick | `(context: { value: DateValue })` | 选中值发生变化时触发
+
+### DateTimePicker Slots
+
+名称 | 描述
+-- | --
+footer | 底部内容
+header | 自定义 `header` 显示内容
+
+### DateTimePicker External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-cancel | 取消样式类
+t-class-confirm | 确认样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-data-time-picker-year-width | 128rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/date-all/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/date-all/index.vue
new file mode 100644
index 000000000..ad1124bfd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/date-all/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <t-cell
+      title="选择日期时间"
+      hover
+      :note="datetimeText"
+      arrow
+      data-mode="datetime"
+      t-class="panel-item"
+      @click="showPicker($event, { mode: 'datetime' })"
+    />
+
+    <!-- 年月日时分 -->
+    <t-date-time-picker
+      v-model:visible="datetimeVisible"
+      title="选择日期和时间"
+      mode="second"
+      :value="datetime"
+      format="YYYY-MM-DD HH:mm:ss"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+export default {
+  components: {
+    tCell,
+    tDateTimePicker,
+  },
+  data() {
+    return {
+      mode: '',
+      datetimeVisible: false,
+      datetime: new Date('2021-12-23').getTime(),
+      datetimeText: '',
+    };
+  },
+  methods: {
+    showPicker(e, { mode }) {
+      this.mode = mode;
+      this[`${mode}Visible`] = true;
+    },
+
+    hidePicker() {
+      const { mode } = this;
+      this[`${mode}Visible`] = false;
+    },
+
+    onConfirm(e) {
+      const { value } = e;
+      const { mode } = this;
+      console.log('confirm', value);
+
+      this[mode] = value;
+      this[`${mode}Text`] = value;
+
+      this.hidePicker();
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+  },
+};
+</script>
+<style>
+.panel-item {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.less b/packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.vue
new file mode 100644
index 000000000..dc79da978
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/date-time-picker.vue
@@ -0,0 +1,74 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="DateTimePicker"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="DateTimePicker 时间选择器"
+        desc="用于选择一个时间点或者一个时间段。"
+        notice="渲染框架支持情况：WebView"
+      />
+
+      <t-demo
+        title="01 组件类型"
+        desc="年月日选择器"
+      />
+
+      <year-month-date />
+
+      <t-demo desc="年月选择器" />
+
+      <year-month />
+
+      <!-- <t-demo desc="月日选择器" /> -->
+
+      <timeDemo />
+
+      <t-demo desc="年月日时分秒选择器" />
+
+      <date-all />
+
+      <t-demo
+        title="01 组件用法"
+        desc="调整步数"
+      >
+        <steps />
+      </t-demo>
+
+      <t-demo desc="不使用 Popup">
+        <without-popup />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import yearMonthDate from './year-month-date/index.vue';
+import yearMonth from './year-month/index.vue';
+import timeDemo from './time/index.vue';
+import dateAll from './date-all/index.vue';
+import steps from './steps/index.vue';
+import withoutPopup from './without-popup/index.vue';
+export default {
+  components: {
+    yearMonthDate,
+    yearMonth,
+    timeDemo,
+    dateAll,
+    steps,
+    withoutPopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './date-time-picker.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.less b/packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.vue
new file mode 100644
index 000000000..36a745580
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/skyline/date-time-picker.vue
@@ -0,0 +1,74 @@
+<template>
+  <view class="skyline">
+    <t-navbar
+      title="DateTimePicker"
+      left-arrow
+    />
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          DateTimePicker 时间选择器
+        </view>
+        <view class="demo-desc">
+          用于选择一个时间点或者一个时间段。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="年月日选择器"
+        />
+        <year-month-date />
+        <t-demo desc="年月选择器" />
+        <year-month />
+        <!-- <t-demo desc="月日选择器" /> -->
+        <timeDemo />
+
+        <t-demo desc="年月日时分秒选择器" />
+        <date-all />
+
+        <t-demo
+          title="01 组件用法"
+          desc="调整步数"
+        >
+          <steps />
+        </t-demo>
+
+        <t-demo desc="不使用 Popup">
+          <without-popup />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import yearMonthDate from '../year-month-date/index.vue';
+import yearMonth from '../year-month/index.vue';
+import timeDemo from '../time/index.vue';
+import dateAll from '../date-all/index.vue';
+import steps from '../steps/index.vue';
+import withoutPopup from '../without-popup/index.vue';
+export default {
+  components: {
+    tNavbar,
+    yearMonthDate,
+    yearMonth,
+    timeDemo,
+    dateAll,
+    steps,
+    withoutPopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './date-time-picker.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/steps/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/steps/index.vue
new file mode 100644
index 000000000..695ab5d4a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/steps/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <t-cell
+      title="选择时间"
+      hover
+      :note="text || ''"
+      arrow
+      t-class="panel-item"
+      @click="showPicker"
+    />
+
+    <t-date-time-picker
+      v-model:visible="visible"
+      title="选择时间"
+      :value="value"
+      format="HH:mm:ss"
+      :mode="['null', 'second']"
+      :steps="{ minute: 5 }"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+export default {
+  components: {
+    tCell,
+    tDateTimePicker,
+  },
+  data() {
+    return {
+      text: '',
+      value: '10:00:00',
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    showPicker() {
+      this.visible = true;
+    },
+    hidePicker() {
+      this.visible = false;
+    },
+    onConfirm(e) {
+      const { value } = e;
+      console.log('confirm', value);
+      this.value = value;
+      this.text = value;
+      this.hidePicker();
+    },
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+  },
+};
+</script>
+<style>
+.panel-item {
+    margin: 32rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/time/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/time/index.vue
new file mode 100644
index 000000000..f8c7b1378
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/time/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      时分秒选择器
+    </view>
+    <t-cell
+      title="选择时间"
+      hover
+      :note="secondText || ''"
+      arrow
+      data-mode="second"
+      t-class="panel-item"
+      @click="showPicker($event, { mode: 'second' })"
+    />
+
+    <view class="demo-desc">
+      时分选择器
+    </view>
+    <t-cell
+      title="选择时间"
+      hover
+      :note="minuteText || ''"
+      arrow
+      data-mode="minute"
+      t-class="panel-item"
+      @click="showPicker($event, { mode: 'minute' })"
+    />
+
+    <!-- 时分 -->
+    <t-date-time-picker
+      v-model:visible="secondVisible"
+      title="选择时间"
+      :mode="['null', 'second']"
+      :value="second"
+      format="HH:mm:ss"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+
+    <!-- 时分 -->
+    <t-date-time-picker
+      v-model:visible="minuteVisible"
+      title="选择时间"
+      :mode="['null', 'minute']"
+      :start="start"
+      :value="minute"
+      format="HH:mm"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+export default {
+  components: {
+    tCell,
+    tDateTimePicker,
+  },
+  data() {
+    return {
+      mode: '',
+      second: '10:00:00',
+      minute: '23:59',
+      start: '2025-04-29 00:00:00',
+      secondText: '',
+      minuteText: '',
+      secondVisible: false,
+      minuteVisible: false,
+    };
+  },
+  created() {},
+  methods: {
+    showPicker(e, { mode }) {
+      this.mode = mode;
+      this[`${mode}Visible`] = true;
+    },
+    hidePicker() {
+      const { mode } = this;
+      this[`${mode}Visible`] = false;
+    },
+    onConfirm(e) {
+      const { value } = e;
+      const { mode } = this;
+      console.log('confirm', value);
+      this[mode] = value;
+      this[`${mode}Text`] = value;
+      this.hidePicker();
+    },
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+  },
+};
+</script>
+<style>
+.panel-item {
+    margin: 32rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/without-popup/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/without-popup/index.vue
new file mode 100644
index 000000000..2e70ef56b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/without-popup/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <view>
+    <t-date-time-picker
+      :use-popup="false"
+      title="选择日期"
+      :visible="dateVisible"
+      mode="date"
+      :default-value="date"
+      format="YYYY-MM-DD"
+      :start="start"
+      :end="end"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+  </view>
+</template>
+
+<script>
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+export default {
+  components: {
+    tDateTimePicker,
+  },
+  data() {
+    return {
+      mode: '',
+      dateVisible: false,
+      date: new Date('2021-12-23').getTime(),
+      // 支持时间戳传入
+
+      // 指定选择区间起始值
+      start: '2000-01-01 00:00:00',
+      end: '2030-09-09 12:12:12',
+    };
+  },
+  methods: {
+    hidePicker() {
+      const { mode } = this;
+      this[`${mode}Visible`] = false;
+    },
+
+    onConfirm(e) {
+      const { value } = e;
+      const { mode } = this;
+      console.log('confirm', value);
+      this[mode] = value;
+      this[`${mode}Text`] = value;
+      this.hidePicker();
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/year-month-date/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/year-month-date/index.vue
new file mode 100644
index 000000000..2b19f1f6a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/year-month-date/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <view>
+    <t-cell
+      title="选择日期"
+      hover
+      :note="dateText || ''"
+      arrow
+      data-mode="date"
+      class="test"
+      t-class="panel-item"
+      @click="showPicker($event, { mode: 'date' })"
+    />
+
+    <!-- 年月日 -->
+    <t-date-time-picker
+      v-model:visible="dateVisible"
+      auto-close
+      title="选择日期"
+      show-week
+      mode="date"
+      :default-value="date"
+      format="YYYY-MM-DD ddd"
+      :filter="filter"
+      :formatter="formatter"
+      :popup-props="popupProps"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+      @close="handleClose"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+const calendarMonth = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+export default {
+  components: {
+    tCell,
+    tDateTimePicker,
+  },
+  data() {
+    let usingCustomNavbar = true;
+    // #ifdef MP-ALIPAY
+    usingCustomNavbar = false;
+    // #endif
+    return {
+      mode: '',
+      dateVisible: false,
+      date: new Date('2021-12-23').getTime(),
+      // 支持时间戳传入
+      dateText: '',
+      filter(type, options) {
+        if (type === 'year') {
+          return options.sort((a, b) => b.value - a.value);
+        }
+        return options;
+      },
+      popupProps: {
+        usingCustomNavbar,
+      },
+      formatter(item, index) {
+        if (index === 1) {
+          const label = item.label.slice(0, -1);
+          return {
+            value: item.value,
+            label: calendarMonth[Number(label) - 1],
+          };
+        }
+        if (index === 2) {
+          const [dateValue, weekValue] = item.label.split(' ');
+          const dateSuffixes = {
+            1: 'st',
+            2: 'nd',
+            3: 'rd',
+          };
+          const weekMap = {
+            周一: 'Mon.',
+            周二: 'Tues.',
+            周三: 'Wed.',
+            周四: 'Thurs.',
+            周五: 'Fri.',
+            周六: 'Sat.',
+            周日: 'Sun.',
+          };
+          const label = dateValue.slice(0, -1);
+          return {
+            value: item.value,
+            label: `${label}${dateSuffixes[label] || 'th'} ${weekMap[weekValue]}`,
+          };
+        }
+        return {
+          value: item.value,
+          label: item.label.slice(0, -1),
+        };
+      },
+    };
+  },
+  methods: {
+    showPicker(e, { mode }) {
+      this.mode = mode;
+      this[`${mode}Visible`] = true;
+    },
+
+    handleClose(e) {
+      console.log('handleClose:', e);
+    },
+
+    onConfirm(e) {
+      const { value } = e;
+      const { mode } = this;
+      console.log('confirm', value);
+      this[mode] = value;
+      this[`${mode}Text`] = value;
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+
+    hidePicker() {
+      console.log('占位：函数 hidePicker 未声明');
+    },
+  },
+};
+</script>
+<style>
+:deep(.panel-item) {
+    margin-bottom: 32rpx;
+}
+
+:deep(.panel-item::after) {
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/_example/year-month/index.vue b/packages/tdesign-uniapp/components/date-time-picker/_example/year-month/index.vue
new file mode 100644
index 000000000..50b224bb0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/_example/year-month/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <view>
+    <t-cell
+      title="选择日期"
+      hover
+      :note="monthText"
+      arrow
+      data-mode="month"
+      t-class="panel-item"
+      @click="showPicker($event, { mode: 'month' })"
+    />
+
+    <!-- 年月 -->
+    <t-date-time-picker
+      v-model:visible="monthVisible"
+      title="选择日期"
+      mode="month"
+      :value="month"
+      format="YYYY-MM"
+      :start="start"
+      :end="end"
+      @change="onConfirm"
+      @pick="onColumnChange"
+      @cancel="hidePicker"
+    />
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tDateTimePicker from 'tdesign-uniapp/date-time-picker/date-time-picker.vue';
+export default {
+  components: {
+    tCell,
+    tDateTimePicker,
+  },
+  data() {
+    return {
+      mode: '',
+      monthVisible: false,
+      month: '2021-09',
+      monthText: '',
+      // 指定选择区间起始值
+      start: '2000-01-01 00:00:00',
+      end: '2030-09-09 12:12:12',
+    };
+  },
+  methods: {
+    showPicker(e, { mode }) {
+      this.mode = mode;
+      this[`${mode}Visible`] = true;
+    },
+
+    hidePicker() {
+      const { mode } = this;
+      this[`${mode}Visible`] = false;
+    },
+
+    onConfirm(e) {
+      const { value } = e;
+      const { mode } = this;
+      console.log('confirm', value);
+      this[mode] = value;
+      this[`${mode}Text`] = value;
+      this.hidePicker();
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.value);
+    },
+  },
+};
+</script>
+<style>
+.panel-item {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.less b/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.less
new file mode 100644
index 000000000..07ab98520
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.less
@@ -0,0 +1,12 @@
+@import '../common/style/base.less';
+
+@data-time-picker-year-width: var(--td-data-time-picker-year-width, 128rpx);
+
+.@{prefix}-date-time-picker {
+  &__item {
+    &--roomly {
+      width: @data-time-picker-year-width;
+      flex: 0 0 @data-time-picker-year-width;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.vue b/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.vue
new file mode 100644
index 000000000..20c4046ca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/date-time-picker.vue
@@ -0,0 +1,569 @@
+<template>
+  <view>
+    <t-picker
+      :custom-style="_._style([customStyle])"
+      :class="tClass + ' ' + classPrefix"
+      :visible="visible"
+      :value="columnsValue"
+      :header="header"
+      :title="title"
+      :auto-close="autoClose"
+      :confirm-btn="confirmBtn || locale.confirm"
+      :cancel-btn="cancelBtn || locale.cancel"
+      :use-popup="usePopup"
+      :popup-props="popupProps"
+      @pick="onColumnChange"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+      @visible-change="onVisibleChange"
+      @close="onClose"
+    >
+      <template
+        #header
+      >
+        <slot
+          name="header"
+        />
+      </template>
+
+      <t-picker-item
+        v-for="(item, index) in columns"
+        :key="index"
+        :class="_.cls(classPrefix + '__item', [['roomly', columns.length >= 5 && index == 0]])"
+        :options="item"
+        index="index"
+        :format="formatter"
+      />
+      <template
+        #footer
+      >
+        <slot
+          name="footer"
+        />
+      </template>
+    </t-picker>
+  </view>
+</template>
+<script>
+import tPicker from '../picker/picker';
+import tPickerItem from '../picker-item/picker-item';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import dayjsLocaleMap from './locale/dayjs';
+import _ from '../common/utils.wxs';
+import dayjs from '../npm/dayjs/esm/index.js';
+import localeData from '../npm/dayjs/esm/plugin/localeData';
+
+// const dayjs = require('dayjs');
+// const localeData = require('dayjs/plugin/localeData');
+/**
+ * dayjs LocaleData 插件
+ * https://dayjs.fenxianglu.cn/category/plugin.html#localedata
+ */
+dayjs.extend(localeData);
+dayjs.locale('zh-cn');
+
+// const defaultLocale = dayjsLocaleMap.default.key;
+const defaultLocale = dayjsLocaleMap[dayjs.locale()]?.key || dayjsLocaleMap.default?.key;
+
+
+const name = `${prefix}-date-time-picker`;
+
+const ModeItem = {
+  YEAR: 'year',
+  MONTH: 'month',
+  DATE: 'date',
+  HOUR: 'hour',
+  MINUTE: 'minute',
+  SECOND: 'second',
+};
+
+const DATE_MODES = ['year', 'month', 'date'];
+const TIME_MODES = ['hour', 'minute', 'second'];
+const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-confirm`,
+    `${prefix}-class-cancel`,
+    `${prefix}-class-title`,
+  ],
+  components: {
+    tPicker,
+    tPickerItem,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      columns: [],
+      columnsValue: [],
+      fullModes: [],
+      locale: dayjsLocaleMap[defaultLocale].i18n, // 国际化语言包
+      dayjsLocale: dayjsLocaleMap[defaultLocale].key, // dayjs 自适应的 key
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    start: 'updateColumns',
+    end: 'updateColumns',
+    dataValue: 'updateColumns',
+
+    customLocale: {
+      handler(v) {
+        if (!v || !dayjsLocaleMap[v].key) return;
+        this.locale = dayjsLocaleMap[v].i18n;
+        this.dayjsLocale = dayjsLocaleMap[v].key;
+      },
+      immediate: true,
+    },
+
+    mode: {
+      handler(v, prev) {
+        // 解决 pick 事件触发两次问题
+        const checkEqual = () => {
+          if (!prev) return false;
+          let result = false;
+          try {
+            result = JSON.stringify(v) === JSON.stringify(prev);
+          } catch (e) {
+            return result;
+          }
+          return result;
+        };
+        if (checkEqual()) return;
+
+        const fullModes = this.getFullModeArray(v);
+        this.fullModes = fullModes;
+        this.updateColumns();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.date = null;
+  },
+  mounted() {
+
+  },
+  methods: {
+    updateColumns() {
+      this.date = this.getParseDate();
+
+      const { columns, columnsValue } = this.getValueCols();
+      this.columns = columns,
+      this.columnsValue = columnsValue;
+    },
+
+    getDaysOfWeekInMonth(date, type) {
+      const { locale, steps, dayjsLocale } = this;
+      const startOfMonth = date.startOf('month');
+      const minEdge = this.getOptionEdge('min', type);
+      const maxEdge = this.getOptionEdge('max', type);
+      const step = coalesce(steps?.[type], 1);
+      const daysOfWeek = [];
+
+      for (let i = minEdge; i <= maxEdge; i += step) {
+        const currentDate = startOfMonth.date(i).locale(dayjsLocale);
+        const dayName = currentDate.format('ddd');
+        daysOfWeek.push({
+          value: `${i}`,
+          label: `${i}${locale.date || ''} ${dayName}`,
+        });
+      }
+
+      return daysOfWeek;
+    },
+
+    getParseDate() {
+      const { dataValue } = this;
+      const minDate = this.getMinDate();
+
+      const isTimeMode = this.isTimeMode();
+      let currentValue = dataValue;
+
+      // 时间需要补齐前缀
+      if (isTimeMode) {
+        const dateStr = dayjs(minDate).format('YYYY-MM-DD');
+        currentValue = dayjs(`${dateStr} ${currentValue}`);
+      }
+
+      const parseDate = dayjs(currentValue || minDate);
+      const isDateValid = parseDate.isValid();
+
+      return isDateValid ? parseDate : minDate;
+    },
+
+    normalize(val, defaultDay) {
+      return val && dayjs(val).isValid() ? dayjs(val) : defaultDay;
+    },
+
+    getMinDate() {
+      return this.normalize(this.start, dayjs().subtract(10, 'year'));
+    },
+
+    getMaxDate() {
+      return this.normalize(this.end, dayjs().add(10, 'year'));
+    },
+
+    getDateRect(type = 'default') {
+      const map = {
+        min: 'getMinDate',
+        max: 'getMaxDate',
+        default: 'getDate',
+      };
+      const date = this[map[type]]();
+      const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+
+      return keys.map(k => date[k]?.());
+    },
+
+    getDate() {
+      return this.clipDate(this?.date || this.getMinDate());
+    },
+
+    // 数据裁减 确保数据不越界
+    clipDate(date) {
+      const minDate = this.getMinDate();
+      const maxDate = this.getMaxDate();
+      return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
+    },
+
+    // 年变化时 需要修正 日数据  例如 2 月的 28 | 29
+    setYear(date, year) {
+      const beforeMonthDays = date.date();
+      const afterMonthDays = date.year(year).daysInMonth();
+
+      const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
+      return tempDate.year(year);
+    },
+
+    // 月变化时 需要修正 日数据边界
+    setMonth(date, month) {
+      const beforeMonthDays = date.date();
+      const afterMonthDays = date.month(month).daysInMonth();
+
+      const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
+      return tempDate.month(month);
+    },
+
+    getColumnOptions() {
+      const { fullModes, filter } = this;
+
+      const columnOptions = [];
+      fullModes?.forEach((mode) => {
+        const columnOption = this.getOptionByType(mode);
+        if (typeof filter === 'function') {
+          columnOptions.push(filter(mode, columnOption));
+        } else {
+          columnOptions.push(columnOption);
+        }
+      });
+      return columnOptions;
+    },
+
+    getOptionByType(type) {
+      const { locale, steps, showWeek } = this;
+      const options = [];
+
+      const minEdge = this.getOptionEdge('min', type);
+      const maxEdge = this.getOptionEdge('max', type);
+      const step = coalesce(steps?.[type], 1);
+      const dayjsMonthsShort = dayjs().locale(this.dayjsLocale)
+        .localeData()
+        .monthsShort();
+
+      if (type === 'date' && showWeek) {
+        return this.getDaysOfWeekInMonth(this.date, type);
+      }
+
+      for (let i = minEdge; i <= maxEdge; i += step) {
+        options.push({
+          value: `${i}`,
+          label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
+        });
+      }
+
+      return options;
+    },
+
+    getYearOptions(dateParams) {
+      const { locale } = this;
+      const { minDateYear, maxDateYear } = dateParams;
+
+      const years = [];
+      for (let i = minDateYear; i <= maxDateYear; i += 1) {
+        years.push({
+          value: `${i}`,
+          label: `${i + locale.year}`,
+        });
+      }
+      return years;
+    },
+
+    getOptionEdge(minOrMax, type) {
+      const selDateArray = this.getDateRect();
+      const compareArray = this.getDateRect(minOrMax);
+      const edge = {
+        month: [0, 11],
+        date: [1, this.getDate().daysInMonth()],
+        hour: [0, 23],
+        minute: [0, 59],
+        second: [0, 59],
+      };
+      const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+
+      for (let i = 0, size = selDateArray.length; i < size; i += 1) {
+        if (types[i] === type) return compareArray[i];
+        if (compareArray[i] !== selDateArray[i]) return edge[type][minOrMax === 'min' ? 0 : 1];
+      }
+      return edge[type][minOrMax === 'min' ? 0 : 1];
+    },
+
+    getMonthOptions() {
+      const months = [];
+
+      const minMonth = this.getOptionEdge('min', 'month');
+      const maxMonth = this.getOptionEdge('max', 'month');
+      const dayjsMonthsShort = dayjs.monthsShort();
+
+      for (let i = minMonth; i <= maxMonth; i += 1) {
+        months.push({
+          value: `${i}`,
+          label: dayjsMonthsShort[i],
+        });
+      }
+
+      return months;
+    },
+
+    getDayOptions() {
+      const { locale } = this;
+      const days = [];
+      const minDay = this.getOptionEdge('min', 'date');
+      const maxDay = this.getOptionEdge('max', 'date');
+
+      for (let i = minDay; i <= maxDay; i += 1) {
+        days.push({
+          value: `${i}`,
+          label: `${i + locale.day}`,
+        });
+      }
+
+      return days;
+    },
+
+    getHourOptions() {
+      const { locale } = this;
+      const hours = [];
+      const minHour = this.getOptionEdge('min', 'hour');
+      const maxHour = this.getOptionEdge('max', 'hour');
+
+      for (let i = minHour; i <= maxHour; i += 1) {
+        hours.push({
+          value: `${i}`,
+          label: `${i + locale.hour}`,
+        });
+      }
+
+      return hours;
+    },
+
+    getMinuteOptions() {
+      const { locale } = this;
+      const minutes = [];
+      const minMinute = this.getOptionEdge('min', 'minute');
+      const maxMinute = this.getOptionEdge('max', 'minute');
+
+      for (let i = minMinute; i <= maxMinute; i += 1) {
+        minutes.push({
+          value: `${i}`,
+          label: `${i + locale.minute}`,
+        });
+      }
+
+      return minutes;
+    },
+
+    getValueCols() {
+      return {
+        columns: this.getColumnOptions(),
+        columnsValue: this.getColumnsValue(),
+      };
+    },
+
+    getColumnsValue() {
+      const { fullModes } = this;
+      const date = this.getDate();
+
+      const columnsValue = [];
+
+      fullModes?.forEach((mode) => {
+        columnsValue.push(`${date[mode]()}`);
+      });
+
+      return columnsValue;
+    },
+
+    getNewDate(value, type) {
+      let newValue = this.getDate();
+
+      switch (type) {
+        case ModeItem.YEAR:
+          newValue = this.setYear(newValue, value);
+          break;
+        case ModeItem.MONTH:
+          newValue = this.setMonth(newValue, value);
+          break;
+        case ModeItem.DATE:
+          newValue = newValue.date(value);
+          break;
+        case ModeItem.HOUR:
+          newValue = newValue.hour(value);
+          break;
+        case ModeItem.MINUTE:
+          newValue = newValue.minute(value);
+          break;
+        case ModeItem.SECOND:
+          newValue = newValue.second(value);
+          break;
+        default:
+          break;
+      }
+
+      return this.clipDate(newValue);
+    },
+
+    onColumnChange(e) {
+      const { value, column } = e;
+      const { fullModes, format } = this;
+
+      const columnValue = value?.[column];
+      const columnType = fullModes?.[column];
+
+      const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
+
+      this.date = newValue;
+
+      const { columns, columnsValue } = this.getValueCols();
+
+      this.columns = columns;
+      this.columnsValue = columnsValue;
+
+      const date = this.getDate();
+      const pickValue = format ? date.format(format) : date.valueOf();
+
+      this.$emit('pick', { value: pickValue });
+    },
+
+    onConfirm() {
+      const { format } = this;
+      const date = this.getDate();
+
+      const value = format ? date.format(format) : date.valueOf();
+      this._trigger('change', { value });
+      this.$emit('confirm', { value });
+      this.resetColumns();
+    },
+
+    onCancel() {
+      this.resetColumns();
+      this.$emit('cancel');
+    },
+
+    onVisibleChange(e) {
+      if (!e.visible) {
+        this.resetColumns();
+      }
+    },
+
+    onClose(e) {
+      const { trigger } = e;
+
+      this.$emit('close', { trigger });
+      this.$emit('update:visible', false);
+    },
+
+    resetColumns() {
+      const parseDate = this.getParseDate();
+
+      this.date = parseDate;
+
+      const { columns, columnsValue } = this.getValueCols();
+
+      this.columns = columns;
+      this.columnsValue = columnsValue;
+    },
+
+    // 将简写的 mode 转化成枚举值
+    getFullModeArray(mode) {
+    // 简易模式
+      if (typeof mode === 'string' || mode instanceof String) {
+        return this.getFullModeByModeString(mode, FULL_MODES);
+      }
+
+      // 高级模式
+      if (Array.isArray(mode)) {
+        if (mode?.length === 1) {
+          return this.getFullModeByModeString(mode[0], FULL_MODES);
+        }
+
+        if (mode?.length === 2) {
+          const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
+          const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
+          return [...dateModes, ...timeModes];
+        }
+      }
+    },
+
+    getFullModeByModeString(modeString, matchModes) {
+      if (!modeString) {
+        return [];
+      }
+
+      const endIndex = matchModes?.findIndex(mode => modeString === mode);
+      return matchModes?.slice(0, endIndex + 1);
+    },
+
+    // 仅展示时或者时分 需要单独特殊处理
+    isTimeMode() {
+      const { fullModes } = this;
+      return fullModes[0] === ModeItem.HOUR;
+    },
+  },
+
+
+});
+</script>
+<style scoped>
+@import './date-time-picker.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/dayjs.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/dayjs.ts
new file mode 100644
index 000000000..7092915c5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/dayjs.ts
@@ -0,0 +1,81 @@
+// dayjs 语言包
+import * as enLocale from '../../npm/dayjs/esm/locale/en';
+import * as zhLocale from '../../npm/dayjs/esm/locale/zh-cn';
+import * as tcLocale from '../../npm/dayjs/esm/locale/zh-tw'; // 繁体
+import * as koLocale from '../../npm/dayjs/esm/locale/ko'; // 韩语
+import * as jaLocale from '../../npm/dayjs/esm/locale/ja'; // 日语
+import * as ruLocale from '../../npm/dayjs/esm/locale/ru'; // 俄语
+
+// 本地语言包
+import en from './en';
+import zh from './zh';
+import tc from './tc';
+import ko from './ko';
+import ja from './ja';
+import ru from './ru';
+
+export default {
+  default: {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  en: {
+    key: 'en',
+    label: 'English',
+    locale: enLocale,
+    i18n: en,
+  },
+  'zh-cn': {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  // 容错处理
+  zh: {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  'zh-tw': {
+    key: 'zh-tw',
+    label: '繁体中文',
+    locale: tcLocale,
+    i18n: tc,
+  },
+  // 容错处理
+  tc: {
+    key: 'zh-tw',
+    label: '繁体中文',
+    locale: tcLocale,
+    i18n: tc,
+  },
+  ko: {
+    key: 'ko',
+    label: '한국어',
+    locale: koLocale,
+    i18n: ko,
+  },
+  // 容错处理
+  kr: {
+    key: 'ko',
+    label: '한국어',
+    locale: koLocale,
+    i18n: ko,
+  },
+  ja: {
+    key: 'ja',
+    label: '日本語',
+    locale: jaLocale,
+    i18n: ja,
+  },
+  ru: {
+    key: 'ru',
+    label: 'русский',
+    locale: ruLocale,
+    i18n: ru,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/en.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/en.ts
new file mode 100644
index 000000000..59f5a03d1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/en.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '',
+  month: '',
+  date: '',
+  hour: '',
+  minute: '',
+  second: '',
+  am: 'AM',
+  pm: 'PM',
+  confirm: 'confirm',
+  cancel: 'cancel',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/ja.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/ja.ts
new file mode 100644
index 000000000..07569740e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/ja.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '年',
+  month: '月',
+  date: '日',
+  hour: '時',
+  minute: '分',
+  second: '秒',
+  am: '午前',
+  pm: '午後',
+  confirm: '確認',
+  cancel: 'キャンセル',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/ko.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/ko.ts
new file mode 100644
index 000000000..76a395310
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/ko.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '년',
+  month: '월',
+  date: '일',
+  hour: '시',
+  minute: '분',
+  second: '초',
+  am: '오전',
+  pm: '오후',
+  confirm: '확인',
+  cancel: '취소',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/ru.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/ru.ts
new file mode 100644
index 000000000..23c707c8e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/ru.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '',
+  month: '',
+  date: '',
+  hour: '',
+  minute: '',
+  second: '',
+  am: 'до полудня',
+  pm: 'после полудня',
+  confirm: 'подтвердить',
+  cancel: 'отменить',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/tc.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/tc.ts
new file mode 100644
index 000000000..58e7cbfe5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/tc.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '年',
+  month: '月',
+  date: '日',
+  hour: '時',
+  minute: '分',
+  second: '秒',
+  am: '上午',
+  pm: '下午',
+  confirm: '確定',
+  cancel: '取消',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/locale/zh.ts b/packages/tdesign-uniapp/components/date-time-picker/locale/zh.ts
new file mode 100644
index 000000000..66566742b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/locale/zh.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '年',
+  month: '月',
+  date: '日',
+  hour: '时',
+  minute: '分',
+  second: '秒',
+  am: '上午',
+  pm: '下午',
+  confirm: '确定',
+  cancel: '取消',
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/props.ts b/packages/tdesign-uniapp/components/date-time-picker/props.ts
new file mode 100644
index 000000000..c5eb351f7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/props.ts
@@ -0,0 +1,114 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDateTimePickerProps } from './type';
+export default {
+  /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+  autoClose: Boolean,
+  /** 取消按钮文字 */
+  cancelBtn: {
+    type: String,
+    default: '取消',
+  },
+  /** 确定按钮文字 */
+  confirmBtn: {
+    type: String,
+    default: '',
+  },
+  /**  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 */
+  customLocale: {
+    type: String,
+    default: 'zh',
+  },
+  /** 选择器的最大可选时间，默认为当前时间+10年 */
+  end: {
+    type: [String, Number],
+  },
+  /** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
+  filter: {
+    type: Function,
+  },
+  /** 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) */
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss',
+  },
+  /** 格式化标签 */
+  formatter: {
+    type: Function,
+  },
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
+  header: {
+    type: Boolean,
+    default: true as TdDateTimePickerProps['header'],
+  },
+  /** year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒 */
+  mode: {
+    type: [String, Array],
+    default: 'date' as TdDateTimePickerProps['mode'],
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否在日期旁边显示周几（如周一，周二，周日等） */
+  showWeek: Boolean,
+  /** 选择器的最小可选时间，默认为当前时间-10年 */
+  start: {
+    type: [String, Number],
+  },
+  /** 时间间隔步数，示例：`{ minute: 5 }` */
+  steps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '',
+  },
+  /** 是否使用弹出层包裹 */
+  usePopup: {
+    type: Boolean,
+    default: true,
+  },
+  /** 选中值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 是否显示 */
+  visible: Boolean,
+  /** 取消按钮点击时触发 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 确认按钮点击时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 确认按钮点击时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选中值发生变化时触发 */
+  onPick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/date-time-picker/type.ts b/packages/tdesign-uniapp/components/date-time-picker/type.ts
new file mode 100644
index 000000000..dda2a9808
--- /dev/null
+++ b/packages/tdesign-uniapp/components/date-time-picker/type.ts
@@ -0,0 +1,134 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+
+export interface TdDateTimePickerProps {
+  /**
+   * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+   * @default false
+   */
+  autoClose?: boolean;
+  /**
+   * 取消按钮文字
+   * @default 取消
+   */
+  cancelBtn?: string;
+  /**
+   * 确定按钮文字
+   * @default ''
+   */
+  confirmBtn?: string;
+  /**
+   *  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言
+   * @default zh
+   */
+  customLocale?: string;
+  /**
+   * 选择器的最大可选时间，默认为当前时间+10年
+   */
+  end?: string | number;
+  /**
+   * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
+   */
+  filter?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
+  /**
+   * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
+   * @default 'YYYY-MM-DD HH:mm:ss'
+   */
+  format?: string;
+  /**
+   * 格式化标签
+   */
+  formatter?: (option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
+   * @default true
+   */
+  header?: boolean;
+  /**
+   * year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒
+   * @default 'date'
+   */
+  mode?: DateTimePickerMode;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 是否在日期旁边显示周几（如周一，周二，周日等）
+   * @default false
+   */
+  showWeek?: boolean;
+  /**
+   * 选择器的最小可选时间，默认为当前时间-10年
+   */
+  start?: string | number;
+  /**
+   * 时间间隔步数，示例：`{ minute: 5 }`
+   * @default {}
+   */
+  steps?: { [key in TimeModeValues]?: number };
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 是否使用弹出层包裹
+   * @default true
+   */
+  usePopup?: boolean;
+  /**
+   * 选中值
+   */
+  value?: DateValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: DateValue;
+  /**
+   * 是否显示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 取消按钮点击时触发
+   */
+  onCancel?: () => void;
+  /**
+   * 确认按钮点击时触发
+   */
+  onChange?: (context: { value: DateValue }) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: DateTimePickerTriggerSource }) => void;
+  /**
+   * 确认按钮点击时触发
+   */
+  onConfirm?: (context: { value: DateValue }) => void;
+  /**
+   * 选中值发生变化时触发
+   */
+  onPick?: (context: { value: DateValue }) => void;
+}
+
+export type DateTimePickerColumn = DateTimePickerColumnItem[];
+
+export interface DateTimePickerColumnItem {
+  label: string;
+  value: string;
+}
+
+export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
+
+export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second' | 'null';
+
+export type DateValue = string | number;
+
+export type DateTimePickerTriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn';
diff --git a/packages/tdesign-uniapp/components/demo-header/demo-header.vue b/packages/tdesign-uniapp/components/demo-header/demo-header.vue
new file mode 100644
index 000000000..766601d6b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/demo-header/demo-header.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <TNoticeBar
+      :visible="noticeVisible"
+      :content="notice"
+    />
+    <view class="demo-title">
+      {{ title }}
+    </view>
+    <view class="demo-desc">
+      {{ desc }}
+      <slot name="desc" />
+    </view>
+  </div>
+</template>
+<script>
+import TNoticeBar from '../notice-bar/notice-bar.vue';
+
+export default {
+  name: 'TDemoHeader',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TNoticeBar,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    desc: {
+      type: String,
+      default: '',
+    },
+    notice: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+    noticeVisible() {
+      let result = false;
+      // #ifdef MP-WEIXIN
+      if (this.notice) {
+        result = false;
+      }
+      // #endif
+      return result;
+    },
+  },
+};
+</script>
+<style scoped src="./index.css">
+</style>
diff --git a/packages/tdesign-uniapp/components/demo-header/index.less b/packages/tdesign-uniapp/components/demo-header/index.less
new file mode 100644
index 000000000..878b2ae47
--- /dev/null
+++ b/packages/tdesign-uniapp/components/demo-header/index.less
@@ -0,0 +1,25 @@
+// @import 'tdesign-uniapp/common/style/index.less';
+
+// .demo {
+//   padding-bottom: 56rpx;
+
+//   &-navbar {
+//     --td-navbar-bg-color: var(--td-bg-color-container);
+//     --td-navbar-color: var(--td-text-color-primary);
+//   }
+
+//   &-title {
+//     font-size: 48rpx;
+//     font-weight: 700;
+//     line-height: 64rpx;
+//     margin: 48rpx 32rpx 0;
+//     color: var(--bg-color-demo-title);
+//   }
+
+//   &-desc {
+//     font-size: 28rpx;
+//     color: var(--bg-color-demo-desc);
+//     margin: 16rpx 32rpx 0;
+//     line-height: 44rpx;
+//   }
+// }
diff --git a/packages/tdesign-uniapp/components/demo/demo.vue b/packages/tdesign-uniapp/components/demo/demo.vue
new file mode 100644
index 000000000..444ad7e51
--- /dev/null
+++ b/packages/tdesign-uniapp/components/demo/demo.vue
@@ -0,0 +1,97 @@
+<template>
+  <view
+    class="demo-block "
+    :class="{'demo-block_notitle': !title}"
+  >
+    <view
+      v-if="title || desc"
+      class="demo-block__header"
+    >
+      <view
+        v-if="title"
+        class="demo-block__header-title"
+      >
+        {{ title }}
+      </view>
+      <view
+        v-if="desc"
+        class="demo-block__header-desc"
+        :class="{'demo-block_subtitle': !title}"
+      >
+        {{ desc }}
+      </view>
+    <!-- <slot name="title-right" /> -->
+    </view>
+    <view
+      v-for="(operItem, index) in operList"
+      :key="index"
+      class="demo-block__oper"
+    >
+      <view
+        v-if="operItem.title"
+        class="demo-block__oper-subtitle"
+      >
+        {{ operItem.title }}
+      </view>
+      <view
+        v-for="btnItem in operItem.btns"
+        :key="btnItem.text"
+      >
+        <TButton
+          t-class="demo-block__oper-btn"
+          size="large"
+          block
+          :data-type="btnItem.type"
+          bind:tap="clickHandle"
+        >
+          {{ btnItem.text }}
+        </TButton>
+      </view>
+    </view>
+    <view
+      class="demo-block__slot"
+      :class="{'with-padding': padding}"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import TButton from '../button/button.vue';
+
+
+export default {
+  name: 'TDemo',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    desc: {
+      type: String,
+      default: '',
+    },
+    operList: {
+      type: Array,
+      default: () => [],
+    },
+    padding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+};
+</script>
+<style scoped src="./index.css">
+</style>
diff --git a/packages/tdesign-uniapp/components/demo/index.less b/packages/tdesign-uniapp/components/demo/index.less
new file mode 100644
index 000000000..cd8b72f3b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/demo/index.less
@@ -0,0 +1,58 @@
+@import '../common/style/base.less';
+
+.demo-block {
+  margin: @spacer-4 0 0;
+
+  &__header {
+    color: var(--bg-color-demo-title);
+    margin: 0 @spacer-2;
+
+    &-title {
+      font-weight: 700;
+      font-size: 36rpx;
+      line-height: 52rpx;
+    }
+
+    &-desc {
+      margin-top: @spacer;
+      font-size: @font-size-base;
+      white-space: pre-line;
+      color: var(--bg-color-demo-desc);
+      line-height: 22px;
+    }
+  }
+
+  &__oper {
+    margin-top: @spacer;
+
+    &-subtitle {
+      font-size: @font-size-s;
+      margin-bottom: @spacer-2;
+      opacity: 0.4;
+    }
+
+    &-btn {
+      margin: 0 0 @spacer-2 0;
+      height: 48rpx * 2;
+    }
+  }
+
+  &__slot {
+    margin-top: @spacer-2;
+
+    &.with-padding {
+      margin-top: @spacer-2;
+      margin-left: @spacer-2;
+      margin-right: @spacer-2;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.demo-block_notitle {
+  margin-top: 0px;
+
+  .demo-block_subtitle {
+    margin-top: @spacer-3;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/dialog/README.en-US.md b/packages/tdesign-uniapp/components/dialog/README.en-US.md
new file mode 100644
index 000000000..e974298e7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/README.en-US.md
@@ -0,0 +1,71 @@
+:: BASE_DOC ::
+
+## API
+
+### Dialog Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+actions | Array | - | Typescript：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+button-layout | String | horizontal | options: horizontal/vertical | N
+cancel-btn | String / Object | - | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+close-btn | Boolean / Object | false | Typescript：`boolean \| ButtonProps \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+close-on-overlay-click | Boolean | false | \- | N
+confirm-btn | String / Object | - | \- | N
+content | String | - | \- | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+prevent-scroll-through | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+title | String | - | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | - | \- | N
+z-index | Number | 11500 | \- | N
+
+### Dialog Events
+
+name | params | description
+-- | -- | --
+action | `(context: { index: number })` | \-
+cancel | `(context: { e: MouseEvent })` | \-
+close | `(context: { trigger: DialogEventSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
+confirm | `(context: { e: MouseEvent })` | \-
+overlay-click | `(context: { e: MouseEvent })` | \-
+
+### Dialog Slots
+
+name | Description
+-- | --
+actions | \-
+cancel-btn | \-
+confirm-btn | \-
+content | \-
+middle | \-
+title | \-
+top | \-
+
+### Dialog External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-action | \-
+t-class-cancel | \-
+t-class-confirm | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dialog-body-max-height | 912rpx | - 
+--td-dialog-border-radius | @radius-extraLarge | - 
+--td-dialog-close-color | @text-color-placeholder | - 
+--td-dialog-content-color | @text-color-secondary | - 
+--td-dialog-content-font-size | 32rpx | - 
+--td-dialog-content-line-height | 48rpx | - 
+--td-dialog-title-color | @text-color-primary | - 
+--td-dialog-title-font-size | 36rpx | - 
+--td-dialog-title-line-height | 52rpx | - 
+--td-dialog-width | 622rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/dialog/README.md b/packages/tdesign-uniapp/components/dialog/README.md
new file mode 100644
index 000000000..2c8076f10
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/README.md
@@ -0,0 +1,122 @@
+---
+title: Dialog 对话框
+description: 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDialog from 'tdesign-uniapp/dialog/dialog.vue';
+```
+
+### 组件类型
+
+按钮的样式，默认使用 `variant = text`，如果任意按钮改变了 `variant`，那么全部按钮都改变成这个。
+
+#### 反馈类对话框
+
+{{ base }}
+
+> 使用这种方式，对话框的 `visible` 是受控的，需要手动设置额 `visible` 为 `false` 才会关闭对话框。
+
+#### 确认类对话框
+
+{{ confirm }}
+
+#### 输入类对话框
+
+{{ with-input }}
+
+#### 带图片对话框
+
+{{ with-image }}
+
+### 组件状态
+
+{{ status }}
+
+### 组件用法
+#### 命令调用
+
+{{ command }}
+
+#### 开放能力按钮
+
+当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力
+
+{{ button }}
+
+## API
+
+### Dialog Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+actions | Array | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
+cancel-btn | String / Object | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+close-btn | Boolean / Object | false | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件。TS 类型：`boolean \| ButtonProps \| null`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+close-on-overlay-click | Boolean | false | 点击蒙层时是否触发关闭事件 | N
+confirm-btn | String / Object | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
+content | String | - | 内容 | N
+overlay-props | Object | {} | 透传至 Overlay 组件。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts) | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String | - | 标题 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | - | 控制对话框是否显示 | N
+z-index | Number | 11500 | 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500 | N
+
+### Dialog Events
+
+名称 | 参数 | 描述
+-- | -- | --
+action | `(context: { index: number })` | 点击多按钮中的其中一个时触发
+cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
+close | `(context: { trigger: DialogEventSource })` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
+confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发
+overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发
+
+### Dialog Slots
+
+名称 | 描述
+-- | --
+actions | 自定义 `actions` 显示内容
+cancel-btn | 自定义 `cancel-btn` 显示内容
+confirm-btn | 自定义 `confirm-btn` 显示内容
+content | 自定义 `content` 显示内容
+middle | 中间自定义内容
+title | 自定义 `title` 显示内容
+top | 顶部自定义内容
+
+### Dialog External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-action | 操作样式类
+t-class-cancel | 取消样式类
+t-class-confirm | 确认样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-dialog-body-max-height | 912rpx | - |
+| --td-dialog-border-radius | @radius-extraLarge | - |
+| --td-dialog-close-color | @text-color-placeholder | - |
+| --td-dialog-content-color | @text-color-secondary | - |
+| --td-dialog-content-font-size | 32rpx | - |
+| --td-dialog-content-line-height | 48rpx | - |
+| --td-dialog-title-color | @text-color-primary | - |
+| --td-dialog-title-font-size | 36rpx | - |
+| --td-dialog-title-line-height | 52rpx | - |
+| --td-dialog-width | 622rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/dialog/_example/base/index.vue b/packages/tdesign-uniapp/components/dialog/_example/base/index.vue
new file mode 100644
index 000000000..8c7450267
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/base/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showTextAndTitle"
+      block
+      @click="showDialog($event, { key: 'showTextAndTitle' })"
+    >
+      反馈类-带标题
+    </t-button>
+    <t-dialog
+      :visible="showTextAndTitle"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="confirmBtn"
+      @confirm="closeDialog"
+    />
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showContentOnly"
+      block
+      @click="showDialog($event, { key: 'showContentOnly' })"
+    >
+      反馈类-无标题
+    </t-button>
+    <t-dialog
+      :visible="showContentOnly"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="confirmBtn"
+      @confirm="closeDialog"
+    />
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showTitleOnly"
+      block
+      @click="showDialog($event, { key: 'showTitleOnly' })"
+    >
+      反馈类-纯标题
+    </t-button>
+    <t-dialog
+      :visible="showTitleOnly"
+      title="对话框标题"
+      :confirm-btn="confirmBtn"
+      @confirm="closeDialog"
+    />
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showMultiTextAndTitle"
+      block
+      @click="showDialog($event, { key: 'showMultiTextAndTitle' })"
+    >
+      反馈类-内容超长
+    </t-button>
+    <t-dialog
+      :visible="showMultiTextAndTitle"
+      title="对话框标题"
+      :confirm-btn="confirmBtn"
+      @confirm="closeDialog"
+    >
+      <template
+        #content
+      >
+        <!-- 适配skyline，增加type="list" -->
+        <scroll-view
+          type="list"
+          scroll-y
+          class="long-content"
+        >
+          <view class="content-container">
+            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案 这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案 这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案 这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案 这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案 这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+          </view>
+        </scroll-view>
+      </template>
+    </t-dialog>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+    tDialog,
+  },
+  data() {
+    return {
+      confirmBtn: {
+        content: '知道了',
+        variant: 'base',
+      },
+
+      dialogKey: '',
+      showText: false,
+      showMultiText: false,
+      showTextAndTitle: false,
+      showTitleOnly: false,
+      showMultiTextAndTitle: false,
+      showContentOnly: false,
+    };
+  },
+  created() {},
+  methods: {
+    showDialog(e, { key }) {
+      this[key] = true;
+      this.dialogKey = key;
+    },
+    closeDialog() {
+      const { dialogKey } = this;
+      this[dialogKey] = false;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    margin-bottom: 32rpx;
+}
+
+.long-content {
+    height: 576rpx;
+    margin-top: 16rpx;
+    font-size: 32rpx;
+    color: #888;
+}
+
+.long-content .content-container {
+    white-space: pre-line;
+}
+
+.long-content ::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/button/index.vue b/packages/tdesign-uniapp/components/dialog/_example/button/index.vue
new file mode 100644
index 000000000..b3f24b813
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/button/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      theme="primary"
+      variant="outline"
+      data-type="hasCancelBtn"
+      block
+      @click="showDialog($event, { type: 'hasCancelBtn' })"
+    >
+      开放能力按钮
+    </t-button>
+    <t-dialog
+      id="t-dialog"
+      ref="t-dialog"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+import Dialog from 'tdesign-uniapp/dialog/index';
+export default {
+  components: {
+    tButton,
+    tDialog,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    showDialog() {
+      const dialogConfig = {
+        context: this,
+        title: '弹窗标题',
+        content: '告知当前状态、信息和解决方法等内容。',
+        cancelBtn: '取消',
+        confirmBtn: {
+          openType: 'share',
+          content: '分享给朋友',
+          bindgetphonenumber({ detail }) {
+            console.log(detail);
+            if (detail.errMsg.includes('fail')) {
+              console.log('获取失败');
+              return false; // 不关闭弹窗
+            }
+            return true; // 关闭弹窗
+          },
+        },
+      };
+      Dialog.confirm(dialogConfig)
+        .then(() => {
+          console.log('点击确定');
+        })
+        .catch(() => {
+          console.log('点击取消');
+        });
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/command/index.vue b/packages/tdesign-uniapp/components/dialog/_example/command/index.vue
new file mode 100644
index 000000000..3cc49d281
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/command/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      variant="outline"
+      theme="primary"
+      block
+      @click="showDialog"
+    >
+      命令行操作
+    </t-button>
+    <t-dialog
+      id="t-dialog"
+      ref="t-dialog"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+import Dialog from 'tdesign-uniapp/dialog/index';
+export default {
+  components: {
+    tButton,
+    tDialog,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    showDialog() {
+      const dialogConfig = {
+        context: this,
+        title: '弹窗标题',
+        closeOnOverlayClick: true,
+        content: '告知当前状态、信息和解决方法等内容。',
+        confirmBtn: '确定',
+        cancelBtn: '取消',
+      };
+      Dialog.confirm(dialogConfig)
+        .then(data => console.log('点击了确定', data))
+        .catch(data => console.log('点击了取消', data));
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/confirm/index.vue b/packages/tdesign-uniapp/components/dialog/_example/confirm/index.vue
new file mode 100644
index 000000000..e67d41d2c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/confirm/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showConfirm"
+      block
+      @click="showDialog($event, { key: 'showConfirm' })"
+    >
+      确认类-带标题
+    </t-button>
+    <t-dialog
+      :visible="showConfirm"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="confirmBtn"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showWarnConfirm"
+      block
+      @click="showDialog($event, { key: 'showWarnConfirm' })"
+    >
+      确认类-无标题
+    </t-button>
+    <t-dialog
+      :visible="showWarnConfirm"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="{ content: '警示操作', variant: 'base', theme: 'danger' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showLightConfirm"
+      block
+      @click="showDialog($event, { key: 'showLightConfirm' })"
+    >
+      确认类-纯标题
+    </t-button>
+    <t-dialog
+      :visible="showLightConfirm"
+      title="对话框标题"
+      :confirm-btn="{ content: '确定', variant: 'base', theme: 'light' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+export default {
+  components: {
+    tButton,
+    tDialog,
+  },
+  data() {
+    return {
+      confirmBtn: {
+        content: '确定',
+        variant: 'base',
+      },
+      dialogKey: '',
+      showConfirm: false,
+      showWarnConfirm: false,
+      showLightConfirm: false,
+    };
+  },
+  created() {},
+  methods: {
+    showDialog(e, { key }) {
+      this[key] = true;
+      this.dialogKey = key;
+    },
+    closeDialog() {
+      const { dialogKey } = this;
+      this[dialogKey] = false;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/dialog.less b/packages/tdesign-uniapp/components/dialog/_example/dialog.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/dialog.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/dialog/_example/dialog.vue b/packages/tdesign-uniapp/components/dialog/_example/dialog.vue
new file mode 100644
index 000000000..c71375fa5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/dialog.vue
@@ -0,0 +1,97 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Dialog"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Dialog 对话框"
+        desc="用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="反馈类对话框"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo
+        desc="确认类对话框"
+        padding
+      >
+        <confirm />
+      </t-demo>
+
+      <t-demo
+        desc="输入类对话框"
+        padding
+      >
+        <with-input />
+      </t-demo>
+
+      <t-demo
+        desc="带图片的对话框"
+        padding
+      >
+        <with-image />
+      </t-demo>
+
+      <t-demo
+        title="02 组件类型"
+        padding
+      >
+        <status />
+      </t-demo>
+
+      <t-demo
+        title="03 组件用法"
+        desc="命令调用"
+        padding
+      >
+        <commandDemo />
+      </t-demo>
+
+      <t-demo
+        desc="自定义按钮"
+        padding
+      >
+        <buttonDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import confirm from './confirm/index.vue';
+import withInput from './with-input/index.vue';
+import withImage from './with-image/index.vue';
+import commandDemo from './command/index.vue';
+import status from './status/index.vue';
+import buttonDemo from './button/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    confirm,
+    withInput,
+    withImage,
+    commandDemo,
+    status,
+    buttonDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './dialog.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.less b/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.vue b/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.vue
new file mode 100644
index 000000000..e728fc816
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/skyline/dialog.vue
@@ -0,0 +1,106 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block demo-navbar"
+      title="Dialog"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Dialog 对话框
+        </view>
+        <view class="demo-desc">
+          用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="反馈类对话框"
+          padding
+        >
+          <baseDemo />
+        </t-demo>
+
+        <t-demo
+          desc="确认类对话框"
+          padding
+        >
+          <confirm />
+        </t-demo>
+
+        <t-demo
+          desc="输入类对话框"
+          padding
+        >
+          <with-input />
+        </t-demo>
+
+        <t-demo
+          desc="带图片的对话框"
+          padding
+        >
+          <with-image />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          padding
+        >
+          <status />
+        </t-demo>
+
+        <t-demo
+          title="03 组件用法"
+          desc="命令调用"
+          padding
+        >
+          <commandDemo />
+        </t-demo>
+
+        <t-demo
+          desc="自定义按钮"
+          padding
+        >
+          <buttonDemo />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import confirm from '../confirm/index.vue';
+import withInput from '../with-input/index.vue';
+import withImage from '../with-image/index.vue';
+import commandDemo from '../command/index.vue';
+import status from '../status/index.vue';
+import buttonDemo from '../button/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    confirm,
+    withInput,
+    withImage,
+    commandDemo,
+    status,
+    buttonDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './dialog.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/status/index.vue b/packages/tdesign-uniapp/components/dialog/_example/status/index.vue
new file mode 100644
index 000000000..09a762217
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/status/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      文字按钮
+    </view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showConfirm"
+      block
+      @click="showDialog($event, { key: 'showConfirm' })"
+    >
+      文字按钮
+    </t-button>
+    <t-dialog
+      :visible="showConfirm"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      confirm-btn="确定"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+
+    <view class="demo-desc">
+      水平基础按钮
+    </view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showWarnConfirm"
+      block
+      @click="showDialog($event, { key: 'showWarnConfirm' })"
+    >
+      水平基础按钮
+    </t-button>
+    <t-dialog
+      :visible="showWarnConfirm"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+
+    <view class="demo-desc">
+      垂直基础按钮
+    </view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showTooLongBtnContent"
+      block
+      @click="showDialog($event, { key: 'showTooLongBtnContent' })"
+    >
+      垂直基础按钮
+    </t-button>
+    <t-dialog
+      :visible="showTooLongBtnContent"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="confirmBtn"
+      cancel-btn="取消"
+      button-layout="vertical"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+
+    <view class="demo-desc">
+      多按钮
+    </view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showMultiBtn"
+      block
+      @click="showDialog($event, { key: 'showMultiBtn' })"
+    >
+      多按钮
+    </t-button>
+    <t-dialog
+      :visible="showMultiBtn"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      button-layout="vertical"
+      :actions="multiBtnList"
+      @action="closeDialog"
+    />
+
+    <view class="demo-desc">
+      带关闭按钮的对话框
+    </view>
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showCloseBtn"
+      block
+      @click="showDialog($event, { key: 'showCloseBtn' })"
+    >
+      带关闭按钮的对话框
+    </t-button>
+    <t-dialog
+      :visible="showCloseBtn"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      close-btn
+      :confirm-btn="{ content: '警示操作', variant: 'base', theme: 'danger' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+    tDialog,
+  },
+  data() {
+    return {
+      confirmBtn: {
+        content: '确定',
+        variant: 'base',
+      },
+
+      dialogKey: '',
+      showConfirm: false,
+      showWarnConfirm: false,
+      showTooLongBtnContent: false,
+      showMultiBtn: false,
+      showCloseBtn: false,
+
+      multiBtnList: [
+        {
+          content: '次要按钮',
+          theme: 'light',
+        },
+        {
+          content: '次要按钮',
+          theme: 'light',
+        },
+        {
+          content: '主要按钮',
+          theme: 'primary',
+        },
+      ],
+
+    };
+  },
+  created() {},
+  methods: {
+    showDialog(e, { key }) {
+      this[key] = true;
+      this.dialogKey = key;
+    },
+    closeDialog(e) {
+      console.log('close: ', e);
+      const { dialogKey } = this;
+      this[dialogKey] = false;
+    },
+  },
+};
+</script>
+<style>
+.demo-desc {
+    margin: 0 0 32rpx;
+}
+
+.wrapper {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/with-image/index.vue b/packages/tdesign-uniapp/components/dialog/_example/with-image/index.vue
new file mode 100644
index 000000000..eff00c7d9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/with-image/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <view>
+    <t-button
+      t-class="wrapper"
+      size="large"
+      theme="primary"
+      variant="outline"
+      data-key="imageOnTop"
+      block
+      @click="showDialog($event, { key: 'imageOnTop' })"
+    >
+      图片置顶-带标题描述
+    </t-button>
+    <t-dialog
+      :visible="imageOnTop"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #top
+      >
+        <t-image
+          t-class="dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      size="large"
+      theme="primary"
+      variant="outline"
+      data-key="imageOnTopWithContent"
+      block
+      @click="showDialog($event, { key: 'imageOnTopWithContent' })"
+    >
+      图片置顶-无标题
+    </t-button>
+    <t-dialog
+      :visible="imageOnTopWithContent"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #top
+      >
+        <t-image
+          t-class="dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      size="large"
+      theme="primary"
+      variant="outline"
+      data-key="imageOnTopWithTitle"
+      block
+      @click="showDialog($event, { key: 'imageOnTopWithTitle' })"
+    >
+      图片置顶-纯标题
+    </t-button>
+    <t-dialog
+      :visible="imageOnTopWithTitle"
+      title="对话框标题"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #top
+      >
+        <t-image
+          t-class="dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="imageOnMiddleWithImage"
+      block
+      @click="showDialog($event, { key: 'imageOnMiddleWithImage' })"
+    >
+      图片置顶-纯图片
+    </t-button>
+    <t-dialog
+      :visible="imageOnMiddleWithImage"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #top
+      >
+        <t-image
+          t-class="dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="imageOnMiddle"
+      block
+      @click="showDialog($event, { key: 'imageOnMiddle' })"
+    >
+      图片居中-带标题描述
+    </t-button>
+    <t-dialog
+      :visible="imageOnMiddle"
+      title="对话框标题"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #middle
+      >
+        <t-image
+          t-class="image-host dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="imageOnMiddleWithTitle"
+      block
+      @click="showDialog($event, { key: 'imageOnMiddleWithTitle' })"
+    >
+      图片居中-纯标题
+    </t-button>
+    <t-dialog
+      :visible="imageOnMiddleWithTitle"
+      title="对话框标题"
+      :confirm-btn="{ content: '确定', variant: 'base' }"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #middle
+      >
+        <t-image
+          t-class="image-host dialog-image"
+          src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+        />
+      </template>
+    </t-dialog>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+    tImage,
+    tDialog,
+  },
+  data() {
+    return {
+      dialogKey: '',
+      imageOnTop: false,
+      imageOnTopWithContent: false,
+      imageOnTopWithTitle: false,
+      imageOnMiddle: false,
+      imageOnMiddleWithTitle: false,
+      imageOnMiddleWithImage: false,
+    };
+  },
+  created() {},
+  methods: {
+    showDialog(e, { key }) {
+      this[key] = true;
+      this.dialogKey = key;
+    },
+    closeDialog() {
+      const { dialogKey } = this;
+      this[dialogKey] = false;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    margin-bottom: 32rpx;
+}
+
+.dialog-image {
+    width: 100%;
+    height: 160px;
+}
+
+.image-host {
+    display: block;
+    margin-top: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/_example/with-input/index.vue b/packages/tdesign-uniapp/components/dialog/_example/with-input/index.vue
new file mode 100644
index 000000000..483609459
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/_example/with-input/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <view>
+    <t-button
+      t-class="wrapper"
+      size="large"
+      theme="primary"
+      variant="outline"
+      data-key="showWithInput"
+      block
+      @click="showDialog($event, { key: 'showWithInput' })"
+    >
+      输入类-无描述
+    </t-button>
+    <t-dialog
+      :visible="showWithInput"
+      title="带输入框对话框"
+      confirm-btn="确定"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #content
+      >
+        <t-input
+          borderless
+          t-class="dialog-input"
+          clearable
+          placeholder="输入12文案"
+          placeholder-class="placeholder"
+          :custom-style="inputStyle"
+          :placeholder-style="placeholderStyle"
+        />
+      </template>
+    </t-dialog>
+
+    <t-button
+      t-class="wrapper"
+      theme="primary"
+      size="large"
+      variant="outline"
+      data-key="showTextAndTitleWithInput"
+      block
+      @click="showDialog($event, { key: 'showTextAndTitleWithInput' })"
+    >
+      输入类-带描述
+    </t-button>
+    <t-dialog
+      :visible="showTextAndTitleWithInput"
+      title="带输入框对话框"
+      content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+      confirm-btn="确定"
+      cancel-btn="取消"
+      @confirm="closeDialog"
+      @cancel="closeDialog"
+    >
+      <template
+        #content
+      >
+        <t-input
+          borderless
+          t-class="dialog-input"
+          :custom-style="inputStyle"
+          clearable
+          placeholder="输入12文案"
+          placeholder-class="placeholder"
+          :placeholder-style="placeholderStyle"
+        />
+      </template>
+    </t-dialog>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tDialog from 'tdesign-uniapp/dialog/dialog.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+    tInput,
+    tDialog,
+  },
+  data() {
+    return {
+      dialogKey: '',
+      showWithInput: false,
+      showTextAndTitleWithInput: false,
+
+      inputStyle: 'background-color: var(--td-bg-color-page);padding-top: 12px;padding-bottom: 12px;',
+      placeholderStyle: 'color: var(--td-text-color-placeholder);height: 24px;line-height: 24px;display: flex;align-items: center;',
+    };
+  },
+  created() {},
+  methods: {
+    showDialog(e, { key }) {
+      this[key] = true;
+      this.dialogKey = key;
+    },
+    closeDialog() {
+      const { dialogKey } = this;
+      this[dialogKey] = false;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    margin-bottom: 32rpx;
+}
+
+/* :deep(.placeholder) {
+     color: var(--td-text-color-placeholder);
+     line-height: 96rpx;
+     height: 96rpx;
+     display: flex;
+     align-items: center;
+} */
+
+:deep(.dialog-input) {
+    text-align: left;
+    margin-top: 32rpx;
+    border-radius: 8rpx;
+    background-color: var(--td-bg-color-page);
+    box-sizing: border-box;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/computed.js b/packages/tdesign-uniapp/components/dialog/computed.js
new file mode 100644
index 000000000..777c71489
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/computed.js
@@ -0,0 +1,15 @@
+import { coalesce } from '../common/utils';
+
+export const getTypeof = function (obj) {
+  return typeof obj;
+};
+
+export const getActionClass = function (prefix, buttonLayout, actionItem, tClassAction) {
+  const cls = [`${prefix}__button`, `${prefix}__button--action`];
+
+  if (buttonLayout) {
+    cls.push(`${prefix}__button--${buttonLayout}`);
+  }
+
+  return `${cls.join(' ')} ${coalesce(actionItem.tClass, tClassAction)}`;
+};
diff --git a/packages/tdesign-uniapp/components/dialog/dialog.less b/packages/tdesign-uniapp/components/dialog/dialog.less
new file mode 100644
index 000000000..0499bbb51
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/dialog.less
@@ -0,0 +1,144 @@
+@import '../common/style/base.less';
+
+@dialog: ~'@{prefix}-dialog';
+@dialogBtn: ~'@{dialog}__button';
+
+// size
+@dialog-width: var(--td-dialog-width, 622rpx);
+@dialog-border-radius: var(--td-dialog-border-radius, @radius-extraLarge);
+@dialog-body-max-height: var(--td-dialog-body-max-height, 912rpx);
+
+// color
+@dialog-title-font-size: var(--td-dialog-title-font-size, 36rpx);
+@dialog-title-color: var(--td-dialog-title-color, @text-color-primary);
+@dialog-title-line-height: var(--td-dialog-title-line-height, 52rpx);
+
+@dialog-content-font-size: var(--td-dialog-content-font-size, 32rpx);
+@dialog-content-color: var(--td-dialog-content-color, @text-color-secondary);
+@dialog-content-line-height: var(--td-dialog-content-line-height, 48rpx);
+
+@dialog-close-color: var(--td-dialog-close-color, @text-color-placeholder);
+
+.@{dialog} {
+  overflow: hidden;
+  width: @dialog-width;
+  border-radius: @dialog-border-radius;
+  background-color: @bg-color-container;
+
+  &__wrapper {
+    --td-popup-border-radius: @dialog-border-radius;
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: @spacer;
+    right: @spacer;
+    color: @dialog-close-color;
+    z-index: 1; /* skyline适配新增 */
+  }
+
+  &__content {
+    padding-top: @spacer-3;
+    padding-right: @spacer-3;
+    padding-bottom: 0;
+    padding-left: @spacer-3;
+    max-height: @dialog-body-max-height;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: @font-size-m;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__header {
+    text-align: center;
+    font-weight: bold;
+    font-size: @dialog-title-font-size;
+    line-height: @dialog-title-line-height;
+    color: @dialog-title-color;
+  }
+
+  &__header + &__body {
+    margin-top: @spacer;
+  }
+
+  &__body {
+    overflow-y: scroll;
+    text-align: center;
+    -webkit-overflow-scrolling: touch;
+    font-size: @dialog-content-font-size;
+    color: @dialog-content-color;
+    line-height: @dialog-content-line-height;
+
+    &-text {
+      word-wrap: break-word;
+    }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: right;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    padding: @spacer-3;
+
+    &--column {
+      flex-flow: column-reverse;
+
+      :deep(.@{dialog}__button) {
+        width: 100%;
+      }
+    }
+
+    &--full {
+      padding: @spacer-4 0 0;
+    }
+  }
+
+  :deep(&__button) {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--horizontal:not(:first-child) {
+      margin-left: @spacer-1;
+    }
+
+    &--vertical:not(:first-child)  {
+      margin-bottom: @spacer-1;
+    }
+
+    &--text {
+      flex: 1;
+      --td-button-border-radius: 0;
+      --td-button-medium-height: 112rpx;
+      border-radius: 0;
+
+      &:before {
+        content: ' ';
+        position: absolute;
+        box-sizing: border-box;
+        top: 0;
+        left: 0;
+        border-top: 1px solid @border-level-1-color;
+        border-left: 1px solid @border-level-1-color;
+        transform: scale(0.5);
+        transform-origin: 0 0;
+        width: 200%;
+        height: 200%;
+        border-radius: 0;
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/dialog/dialog.vue b/packages/tdesign-uniapp/components/dialog/dialog.vue
new file mode 100644
index 000000000..5cf02524e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/dialog.vue
@@ -0,0 +1,425 @@
+<template>
+  <t-popup
+    name="dialog"
+    :custom-style="_._style([customStyle])"
+    :t-class="classPrefix + '__wrapper'"
+    :visible="dataVisible"
+    :show-overlay="dataShowOverlay"
+    :close-on-overlay-click="dataCloseOnOverlayClick"
+    :prevent-scroll-through="dataPreventScrollThrough"
+    :overlay-props="dataOverlayProps"
+    :z-index="dataZIndex"
+    placement="center"
+    :using-custom-navbar="dataUsingCustomNavbar"
+    @visible-change="overlayClick"
+  >
+    <template #content>
+      <view
+        :class="classPrefix + ' ' + tClass"
+      >
+        <slot name="top" />
+        <view
+          v-if="dataCloseBtn"
+          :class="classPrefix + '__close-btn'"
+          @click="onClose"
+        >
+          <template
+            v-if="_.isObject(dataCloseBtn)"
+          >
+            <t-icon
+              :custom-style="dataCloseBtn.style || ''"
+              :prefix="dataCloseBtn.prefix"
+              :name="dataCloseBtn.name || 'close'"
+              :size="dataCloseBtn.size || 22"
+              :color="dataCloseBtn.color"
+              :aria-hidden="true"
+              :aria-label="dataCloseBtn.ariaLabel"
+              :aria-role="dataCloseBtn.ariaRole"
+            />
+          </template>
+          <t-icon
+            v-else
+            name="close"
+            size="44rpx"
+          />
+        </view>
+        <view :class="classPrefix + '__content ' + tClassContent">
+          <view
+            v-if="dataTitle"
+            :class="classPrefix + '__header'"
+          >
+            {{ dataTitle }}
+          </view>
+          <slot name="title" />
+          <view
+            v-if="dataContent"
+            :class="classPrefix + '__body'"
+          >
+            <text :class="classPrefix + '__body-text'">
+              {{ dataContent }}
+            </text>
+          </view>
+          <slot name="content" />
+        </view>
+        <slot name="middle" />
+        <view
+          :class="
+            _.cls(classPrefix + '__footer', [
+              ['column', dataButtonLayout === 'vertical'],
+              ['full', buttonVariant == 'text' && (!dataActions || dataActions.length == 0)]
+            ])
+          "
+        >
+          <template v-if="dataActions">
+            <template
+              v-for="(actionItem, index) in dataActions"
+              :key="index"
+            >
+              <t-button
+                :t-id="actionItem.tId"
+                :custom-style="actionItem.style"
+                :block="coalesce(actionItem.block, true)"
+                :t-class="useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
+                :class="!useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
+                :disabled="actionItem.disabled"
+                :data-type="'action'"
+                :data-extra="coalesce(actionItem.index, index)"
+                :custom-dataset="actionItem.customDataset"
+                :content="actionItem.content"
+                :icon="actionItem.icon"
+                :loading="actionItem.loading"
+                :loading-props="actionItem.loadingProps"
+                :theme="actionItem.theme"
+                :ghost="actionItem.ghost"
+                :shape="actionItem.shape"
+                :size="actionItem.size"
+                :variant="actionItem.variant"
+                :open-type="actionItem.openType"
+                :hover-class="actionItem.hoverClass"
+                :hover-stop-propagation="actionItem.hoverStopPropagation"
+                :hover-start-time="actionItem.hoverStartTime"
+                :hover-stay-time="actionItem.hoverStayTime"
+                :lang="actionItem.lang"
+                :session-from="actionItem.sessionFrom"
+                :send-message-title="actionItem.sendMessageTitle"
+                :send-message-path="actionItem.sendMessagePath"
+                :send-message-img="actionItem.sendMessageImg"
+                :app-parameter="actionItem.appParameter"
+                :show-message-card="actionItem.showMessageCard"
+                :aria-label="actionItem.ariaLabel"
+                @click="onTplButtonTap($event, { type: 'action', extra: index })"
+                @getuserinfo="onTplButtonTap($event, { type: 'action', extra: index })"
+                @contact="onTplButtonTap($event, { type: 'action', extra: index })"
+                @getphonenumber="onTplButtonTap($event, { type: 'action', extra: index })"
+                @error="onTplButtonTap($event, { type: 'action', extra: index })"
+                @opensetting="onTplButtonTap($event, { type: 'action', extra: index })"
+                @launchapp="onTplButtonTap($event, { type: 'action', extra: index })"
+                @agreeprivacyauthorization="onTplButtonTap($event, { type: 'action', extra: index })"
+              >
+                <slot v-if="actionItem.useDefaultSlot || false" />
+              </t-button>
+            </template>
+          </template>
+          <slot name="actions" />
+          <template v-if="_cancel">
+            <t-button
+              :t-id="_cancel.tId"
+              :custom-style="_cancel.style"
+              :block="_cancel.block"
+              :t-class="_cancel.tClass"
+              :class="_cancel.class"
+              :disabled="_cancel.disabled"
+              :data-type="'cancel'"
+              :data-extra="_cancel.index"
+              :custom-dataset="_cancel.customDataset"
+              :content="_cancel.content"
+              :icon="_cancel.icon"
+              :loading="_cancel.loading"
+              :loading-props="_cancel.loadingProps"
+              :theme="_cancel.theme"
+              :ghost="_cancel.ghost"
+              :shape="_cancel.shape"
+              :size="_cancel.size"
+              :variant="_cancel.variant"
+              :open-type="_cancel.openType"
+              :hover-class="_cancel.hoverClass"
+              :hover-stop-propagation="_cancel.hoverStopPropagation"
+              :hover-start-time="_cancel.hoverStartTime"
+              :hover-stay-time="_cancel.hoverStayTime"
+              :lang="_cancel.lang"
+              :session-from="_cancel.sessionFrom"
+              :send-message-title="_cancel.sendMessageTitle"
+              :send-message-path="_cancel.sendMessagePath"
+              :send-message-img="_cancel.sendMessageImg"
+              :app-parameter="_cancel.appParameter"
+              :show-message-card="_cancel.showMessageCard"
+              :aria-label="_cancel.ariaLabel"
+              @click="onCancel($event, { type: 'action', extra: index })"
+              @getuserinfo="onCancel($event, { type: 'action', extra: index })"
+              @contact="onCancel($event, { type: 'action', extra: index })"
+              @getphonenumber="onCancel($event, { type: 'action', extra: index })"
+              @error="onCancel($event, { type: 'action', extra: index })"
+              @opensetting="onCancel($event, { type: 'action', extra: index })"
+              @launchapp="onCancel($event, { type: 'action', extra: index })"
+              @agreeprivacyauthorization="onCancel($event, { type: 'action', extra: index })"
+            >
+              <slot v-if="_cancel.useDefaultSlot || false" />
+            </t-button>
+          </template>
+          <slot name="cancel-btn" />
+          <template v-if="_confirm">
+            <t-button
+              :t-id="_confirm.tId"
+              :custom-style="_confirm.style"
+              :block="_confirm.block"
+              :t-class="_confirm.tClass"
+              :class="_confirm.class"
+              :disabled="_confirm.disabled"
+              :data-type="'confirm'"
+              :data-extra="_confirm.index"
+              :custom-dataset="_confirm.customDataset"
+              :content="_confirm.content"
+              :icon="_confirm.icon"
+              :loading="_confirm.loading"
+              :loading-props="_confirm.loadingProps"
+              :theme="_confirm.theme || 'primary'"
+              :ghost="_confirm.ghost"
+              :shape="_confirm.shape"
+              :size="_confirm.size"
+              :variant="_confirm.variant"
+              :open-type="_confirm.openType"
+              :hover-class="_confirm.hoverClass"
+              :hover-stop-propagation="_confirm.hoverStopPropagation"
+              :hover-start-time="_confirm.hoverStartTime"
+              :hover-stay-time="_confirm.hoverStayTime"
+              :lang="_confirm.lang"
+              :session-from="_confirm.sessionFrom"
+              :send-message-title="_confirm.sendMessageTitle"
+              :send-message-path="_confirm.sendMessagePath"
+              :send-message-img="_confirm.sendMessageImg"
+              :app-parameter="_confirm.appParameter"
+              :show-message-card="_confirm.showMessageCard"
+              :aria-label="_confirm.ariaLabel"
+              @click="onConfirm($event, { type: 'action', extra: index })"
+              @getuserinfo="onConfirm($event, { type: 'action', extra: index })"
+              @contact="onConfirm($event, { type: 'action', extra: index })"
+              @getphonenumber="onConfirm($event, { type: 'action', extra: index })"
+              @error="onTplButtonConfirmonTap($event, { type: 'action', extra: index })"
+              @opensetting="onConfirm($event, { type: 'action', extra: index })"
+              @launchapp="onConfirm($event, { type: 'action', extra: index })"
+              @agreeprivacyauthorization="onConfirm($event, { type: 'action', extra: index })"
+            >
+              <slot v-if="_confirm.useDefaultSlot || false" />
+            </t-button>
+          </template>
+          <slot name="confirm-btn" />
+        </view>
+      </view>
+    </template>
+  </t-popup>
+</template>
+<script>
+import tPopup from '../popup/popup';
+import tIcon from '../icon/icon';
+import tButton from '../button/button';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { toCamel, coalesce } from '../common/utils';
+import { isObject } from '../common/validator';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+import { getActionClass } from './computed.js';
+import { getFunctionalMixin } from '../common/functional/mixin';
+import { canUseVirtualHost } from '../common/version';
+
+const name = `${prefix}-dialog`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-confirm`,
+    `${prefix}-class-cancel`,
+    `${prefix}-class-action`,
+  ],
+  mixins: [getFunctionalMixin(props), useCustomNavbar],
+  components: {
+    tPopup,
+    tIcon,
+    tButton,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      buttonVariant: 'text',
+      _,
+
+      _confirm: null,
+      _cancel: null,
+      useVirtualHost: canUseVirtualHost(),
+    };
+  },
+  watch: {
+    dataConfirmBtn: {
+      handler() {
+        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+      },
+      immediate: true,
+    },
+    dataCancelBtn: {
+      handler() {
+        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    coalesce,
+    getActionClass,
+    onWatchBtn(confirm, cancel) {
+      const { prefix, classPrefix, dataButtonLayout } = this;
+      const rect = { buttonVariant: 'text' };
+      const useBaseVariant = [confirm, cancel].some(item => isObject(item) && item.variant && item.variant !== 'text');
+      const buttonMap = { confirm, cancel };
+      const cls = [`${classPrefix}__button`];
+      const externalCls = [];
+
+      if (useBaseVariant) {
+        rect.buttonVariant = 'base';
+        cls.push(`${classPrefix}__button--${dataButtonLayout}`);
+      } else {
+        cls.push(`${classPrefix}__button--text`);
+        externalCls.push(`${classPrefix}-button`);
+      }
+
+      const useVirtualHost = canUseVirtualHost();
+
+      Object.keys(buttonMap).forEach((key) => {
+        const btn = buttonMap[key];
+        const rootClass = [...cls, `${classPrefix}__button--${key}`];
+        const tClass = [...externalCls, this[toCamel(`${prefix}-class-${key}`)], ...rootClass].join(' ');
+
+        const base = {
+          block: true,
+          rootClass,
+
+          tClass: useVirtualHost ? tClass : '',
+          class: !useVirtualHost ? tClass : '',
+
+          variant: rect.buttonVariant,
+          openType: '',
+        };
+
+        if (key === 'cancel' && rect.buttonVariant === 'base') {
+          base.theme = 'light';
+        }
+
+        if (typeof btn === 'string') {
+          rect[`_${key}`] = { ...base, content: btn };
+        } else if (btn && typeof btn === 'object') {
+          rect[`_${key}`] = { ...base, ...btn };
+        } else {
+          rect[`_${key}`] = null;
+        }
+      });
+
+      Object.keys(rect).forEach((key) => {
+        this[key] = rect[key];
+      });
+    },
+    onTplButtonTap(e, { type, extra }) {
+      const evtType = e.type;
+      const button = this[`_${type}`];
+      const cbName = `bind${evtType}`;
+
+      if (type === 'action') {
+        this.onActionTap(extra);
+        return;
+      }
+
+      if (typeof button?.[cbName] === 'function') {
+        const closeFlag = button[cbName](e);
+        if (closeFlag) {
+          this.close();
+        }
+      }
+
+      const hasOpenType = !!button?.openType;
+      if (!hasOpenType && ['confirm', 'cancel'].includes(type)) {
+        this[toCamel(`on-${type}`)]?.(type);
+      }
+
+      if (evtType !== 'click') {
+        const success = e.detail?.errMsg?.indexOf('ok') > -1;
+        this.$emit(success ? 'open-type-event' : 'open-type-error-event', e.detail);
+      }
+    },
+
+    onConfirm(e) {
+      this.$emit('confirm', { e });
+
+      if (this._onConfirm) {
+        this._onConfirm({ trigger: 'confirm' });
+        this.close();
+      }
+    },
+
+    onCancel(e) {
+      const trigger = { trigger: 'cancel' };
+
+      this.$emit('cancel', { e });
+      this.$emit('close', trigger);
+
+      if (this._onCancel) {
+        this._onCancel(trigger);
+        this.close();
+      }
+    },
+
+    onClose() {
+      const trigger = { trigger: 'close-btn' };
+
+      this.$emit('close', trigger);
+      this._onCancel?.(trigger);
+      this.close();
+    },
+
+    close() {
+      this.dataVisible = false;
+    },
+
+    overlayClick(e) {
+      this.$emit('overlay-click', { e });
+
+      if (this.dataCloseOnOverlayClick) {
+        const trigger = { trigger: 'overlay' };
+
+        this.$emit('close', trigger);
+        this._onCancel?.(trigger);
+        this.close();
+      }
+    },
+
+    onActionTap(index) {
+      this.$emit('action', { index });
+      if (this._onAction) {
+        this._onAction({ index });
+        this.close();
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './dialog.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/dialog/index.ts b/packages/tdesign-uniapp/components/dialog/index.ts
new file mode 100644
index 000000000..0f9bdf8f3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/index.ts
@@ -0,0 +1,127 @@
+import props from './props';
+import { getInstance } from '../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+interface DialogAlertOptionsType {
+  context?: Context;
+  selector?: string;
+  title?: string;
+  content?: string;
+  zIndex?: number;
+  asyncClose?: boolean;
+  confirmButtonText?: string;
+  textAlign?: string;
+  cancelBtn?: string | object;
+  confirmBtn?: string | object;
+  showOverlay?: boolean;
+  closeOnOverlayClick?: boolean;
+  preventScrollThrough?: boolean;
+}
+
+interface DialogConfirmOptionsType extends DialogAlertOptionsType {
+  cancelButtonText?: string;
+}
+
+interface Action {
+  content: string;
+  theme?: 'default' | 'primary' | 'danger' | 'light';
+}
+
+interface DialogActionOptionsType {
+  context?: Context;
+  selector?: string;
+  title?: string;
+  content: string;
+  zIndex?: number;
+  asyncClose?: boolean;
+  actions?: Action[]; // 自定义多选项，优先级高于默认的确定、取消按钮，触发后返回按钮的index
+  buttonLayout?: 'vertical' | 'horizontal'; // 多按钮排列方式，可选值：horizontal/vertical。
+}
+
+const defaultOptions = {
+  actions: [],
+  buttonLayout: props.buttonLayout.default,
+  cancelBtn: props.cancelBtn.default,
+  closeOnOverlayClick: props.closeOnOverlayClick.default,
+  confirmBtn: props.confirmBtn.value,
+  content: '',
+  preventScrollThrough: props.preventScrollThrough.default,
+  showOverlay: props.showOverlay.default,
+  title: '',
+  visible: props.visible.default,
+};
+
+export default {
+  alert(options: DialogAlertOptionsType) {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+
+    return new Promise((resolve) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        cancelBtn: '',
+        ...mergedOptions,
+        visible: true,
+      });
+      instance._onConfirm = resolve;
+    });
+  },
+  confirm(options: DialogConfirmOptionsType) {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+
+    return new Promise((resolve, reject) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        ...mergedOptions,
+        visible: true,
+      });
+      instance._onConfirm = resolve;
+      instance._onCancel = reject;
+    });
+  },
+  close(options?: DialogConfirmOptionsType) {
+    const { context, selector = '#t-dialog' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (instance) {
+      instance.close();
+      return Promise.resolve();
+    }
+    return Promise.reject();
+  },
+  action(options: DialogActionOptionsType): Promise<{ index: number }> {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+    const { buttonLayout = 'vertical', actions = instance.properties.actions } = options;
+    const maxLengthSuggestion = buttonLayout === 'vertical' ? 7 : 3;
+    if (!actions || (typeof actions === 'object' && (actions.length === 0 || actions.length > maxLengthSuggestion))) {
+      console.warn(`action 数量建议控制在1至${maxLengthSuggestion}个`);
+    }
+
+    return new Promise((resolve) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        ...mergedOptions,
+        buttonLayout,
+        visible: true,
+      });
+      instance._onAction = resolve;
+    });
+  },
+};
diff --git a/packages/tdesign-uniapp/components/dialog/props.ts b/packages/tdesign-uniapp/components/dialog/props.ts
new file mode 100644
index 000000000..d822c4d19
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/props.ts
@@ -0,0 +1,94 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDialogProps } from './type';
+export default {
+  /** 操作栏 */
+  actions: {
+    type: Array,
+  },
+  /** 多按钮排列方式 */
+  buttonLayout: {
+    type: String,
+    default: 'horizontal' as TdDialogProps['buttonLayout'],
+    validator(val: TdDialogProps['buttonLayout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件 */
+  cancelBtn: {
+    type: [String, Object],
+  },
+  /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 */
+  closeBtn: {
+    type: [Boolean, Object],
+    default: false as TdDialogProps['closeBtn'],
+  },
+  /** 点击蒙层时是否触发关闭事件 */
+  closeOnOverlayClick: Boolean,
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 */
+  confirmBtn: {
+    type: [String, Object],
+  },
+  /** 内容 */
+  content: {
+    type: String,
+  },
+  /** 透传至 Overlay 组件 */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 控制对话框是否显示 */
+  visible: Boolean,
+  /** 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 点击多按钮中的其中一个时触发 */
+  onAction: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/dialog/type.ts b/packages/tdesign-uniapp/components/dialog/type.ts
new file mode 100644
index 000000000..f07a26e35
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dialog/type.ts
@@ -0,0 +1,97 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdDialogProps {
+  /**
+   * 操作栏
+   */
+  actions?: Array<ButtonProps>;
+  /**
+   * 多按钮排列方式
+   * @default horizontal
+   */
+  buttonLayout?: 'horizontal' | 'vertical';
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件
+   */
+  cancelBtn?: string | ButtonProps | null;
+  /**
+   * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件
+   * @default false
+   */
+  closeBtn?: boolean | ButtonProps | null;
+  /**
+   * 点击蒙层时是否触发关闭事件
+   * @default false
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件
+   */
+  confirmBtn?: string | ButtonProps | null;
+  /**
+   * 内容
+   */
+  content?: string;
+  /**
+   * 透传至 Overlay 组件
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 控制对话框是否显示
+   */
+  visible?: boolean;
+  /**
+   * 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 点击多按钮中的其中一个时触发
+   */
+  onAction?: (context: { index: number }) => void;
+  /**
+   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
+   */
+  onCancel?: (context: { e: MouseEvent }) => void;
+  /**
+   * 关闭事件，点击 取消按钮 或 点击蒙层 时触发
+   */
+  onClose?: (context: { trigger: DialogEventSource }) => void;
+  /**
+   * 如果“确认”按钮存在，则点击“确认”按钮时触发
+   */
+  onConfirm?: (context: { e: MouseEvent }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent }) => void;
+}
+
+export type DialogEventSource = 'cancel' | 'overlay' | 'close-btn';
diff --git a/packages/tdesign-uniapp/components/divider/README.en-US.md b/packages/tdesign-uniapp/components/divider/README.en-US.md
new file mode 100644
index 000000000..8af760016
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/README.en-US.md
@@ -0,0 +1,41 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: left/right/center | N
+content | String | - | \- | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N
+
+### Divider Slots
+
+name | Description
+-- | --
+content | \-
+
+### Divider External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-divider-border-width | 2rpx | - 
+--td-divider-color | @bg-color-component | - 
+--td-divider-content-color | @text-color-placeholder | - 
+--td-divider-content-font-size | @font-size-s | - 
+--td-divider-content-line-height | 40rpx | - 
+--td-divider-content-line-style | solid | - 
+--td-divider-content-margin | @spacer-1 | - 
+--td-divider-horizontal-margin | 20rpx | - 
+--td-divider-vertical-margin | @spacer | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/divider/README.md b/packages/tdesign-uniapp/components/divider/README.md
new file mode 100644
index 000000000..06e426fd9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/README.md
@@ -0,0 +1,65 @@
+---
+title: Divider 分割线
+description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDivider from 'tdesign-uniapp/divider/divider.vue';
+```
+
+### 基础分割符
+
+分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
+
+{{ base }}
+
+### 虚线样式
+
+{{ theme }}
+
+## API
+
+### Divider Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
+content | String | - | 子元素 | N
+dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
+layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+### Divider Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容
+
+### Divider External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-divider-border-width | 2rpx | - |
+| --td-divider-color | @bg-color-component | - |
+| --td-divider-content-color | @text-color-placeholder | - |
+| --td-divider-content-font-size | @font-size-s | - |
+| --td-divider-content-line-height | 40rpx | - |
+| --td-divider-content-line-style | solid | - |
+| --td-divider-content-margin | @spacer-1 | - |
+| --td-divider-horizontal-margin | 20rpx | - |
+| --td-divider-vertical-margin | @spacer | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/divider/_example/base/index.vue b/packages/tdesign-uniapp/components/divider/_example/base/index.vue
new file mode 100644
index 000000000..f095f16b6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/base/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <t-divider />
+
+    <view class="divider-demo__title">
+      带文字水平分割线
+    </view>
+
+    <t-divider
+      content="文字信息"
+      align="left"
+    />
+    <t-divider content="文字信息" />
+    <t-divider
+      content="文字信息"
+      align="right"
+    />
+
+    <view class="divider-demo__title">
+      垂直分割线
+    </view>
+
+    <view class="divider-wrapper">
+      <text class="demo-6__text-color">
+        文字信息
+      </text>
+      <t-divider layout="vertical" />
+      <text class="demo-6__text-color">
+        文字信息
+      </text>
+      <t-divider layout="vertical" />
+      <text class="demo-6__text-color">
+        文字信息
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+import tDivider from 'tdesign-uniapp/divider/divider.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  components: {
+    tDivider,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.divider-demo__title {
+    font-size: 28rpx;
+    color: var(--bg-color-demo-desc);
+    padding: 16rpx 32rpx;
+    line-height: 40rpx;
+}
+
+.divider-wrapper {
+    display: flex;
+    align-items: center;
+    font-size: 28rpx;
+    color: var(--td-text-color-primary);
+    padding-left: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/divider/_example/divider.less b/packages/tdesign-uniapp/components/divider/_example/divider.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/divider.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/divider/_example/divider.vue b/packages/tdesign-uniapp/components/divider/_example/divider.vue
new file mode 100644
index 000000000..ab82e6f24
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/divider.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Divider"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Divider 分割线"
+        desc="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="水平分割线"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="虚线样式"
+      >
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import theme from './theme/index.vue';
+
+export default {
+  components: {
+    BaseDemo,
+    theme,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './divider.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/divider/_example/skyline/divider.less b/packages/tdesign-uniapp/components/divider/_example/skyline/divider.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/skyline/divider.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/divider/_example/skyline/divider.vue b/packages/tdesign-uniapp/components/divider/_example/skyline/divider.vue
new file mode 100644
index 000000000..46677e6ca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/skyline/divider.vue
@@ -0,0 +1,58 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar block"
+      title="Divider"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Divider 分割线
+        </view>
+        <view class="demo-desc">
+          用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="水平分割线"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="虚线样式"
+        >
+          <theme />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import theme from '../theme/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    theme,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './divider.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/divider/_example/theme/index.vue b/packages/tdesign-uniapp/components/divider/_example/theme/index.vue
new file mode 100644
index 000000000..0f8032fcb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/_example/theme/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <t-divider
+      :t-class="skylineRender ? 'skyline-dashed' : ''"
+      dashed
+    />
+    <t-divider
+      :t-class="skylineRender ? 'skyline-dashed' : ''"
+      dashed
+      content="文字信息"
+      align="left"
+    />
+    <t-divider
+      :t-class="skylineRender ? 'skyline-dashed' : ''"
+      dashed
+      content="文字信息"
+    />
+    <t-divider
+      :t-class="skylineRender ? 'skyline-dashed' : ''"
+      dashed
+      content="文字信息"
+      align="right"
+    />
+  </view>
+</template>
+
+<script>
+import tDivider from 'tdesign-uniapp/divider/divider.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  components: {
+    tDivider,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.divider-demo__title {
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 0 32rpx 16rpx;
+    line-height: 40rpx;
+}
+
+.demo-5 {
+    margin: 0 32rpx;
+}
+
+/* 兼容skyline写法，后续skyline支持border-top后可删除 */
+.skyline-dashed {
+    border-style: unset !important;
+    border-top-style: dashed !important;
+    border-color: unset !important;
+    border-top-color: #e7e7e7 !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/divider/divider.less b/packages/tdesign-uniapp/components/divider/divider.less
new file mode 100644
index 000000000..11cc4f3dc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/divider.less
@@ -0,0 +1,79 @@
+@import '../common/style/base.less';
+
+@divider-color: var(--td-divider-color, @bg-color-component);
+@divider-border-width: var(--td-divider-border-width, 2rpx);
+@divider-horizontal-margin: var(--td-divider-horizontal-margin, 20rpx);
+@divider-vertical-margin: var(--td-divider-vertical-margin, @spacer);
+@divider-content-color: var(--td-divider-content-color, @text-color-placeholder);
+@divider-content-font-size: var(--td-divider-content-font-size, @font-size-s);
+@divider-content-line-height: var(--td-divider-content-line-height, 40rpx);
+@divider-content-line-style: var(--td-divider-content-line-style, solid);
+@divider-content-margin: var(--td-divider-content-margin, @spacer-1);
+
+.@{prefix}-divider {
+  display: flex;
+  color: @divider-color;
+  border-color: @divider-color;
+  border-style: @divider-content-line-style;
+  border-width: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    border: inherit;
+    border-color: inherit;
+    border-style: inherit;
+  }
+
+  &--horizontal {
+    align-items: center;
+    margin: @divider-horizontal-margin 0;
+
+    &::before,
+    &::after {
+      border-top-width: @divider-border-width;
+      transform: scaleY(0.5);
+      transform-origin: center;
+    }
+
+    .@{prefix}-divider__content:not(:empty) {
+      margin: 0 @divider-content-margin;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+    height: 28rpx;
+    margin: 0 @divider-vertical-margin;
+
+    &::before,
+    &::after {
+      border-left-width: @divider-border-width;
+      transform: scaleX(0.5);
+      transform-origin: center;
+    }
+
+    &-center {
+      align-items: center;
+      height: 100%;
+    }
+  }
+
+  &--dashed {
+    border-style: dashed;
+  }
+
+  &__content {
+    font-size: @divider-content-font-size;
+    line-height: @divider-content-line-height;
+    color: @divider-content-color;
+  }
+
+  &--left::before,
+  &--right::after {
+    max-width: 60rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/divider/divider.vue b/packages/tdesign-uniapp/components/divider/divider.vue
new file mode 100644
index 000000000..45b6048e5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/divider.vue
@@ -0,0 +1,79 @@
+<template>
+  <view :class="layout === 'vertical' ? classPrefix + '--vertical-center' : ''">
+    <view
+      :class="[
+        classPrefix,
+        tClass,
+        classPrefix + '--' + layout + ' ' + classPrefix + '--' + align + ' ' + (dashed ? classPrefix + '--dashed' : '')
+      ]"
+      :style="_._style([dividerStyle, customStyle])"
+    >
+      <view
+        :class="[
+          tClassContent,
+          classPrefix + '__content'
+        ]"
+      >
+        <view v-if="content">
+          {{ content }}
+        </view>
+        <slot
+          v-else
+          name="content"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-divider`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      dividerStyle: '',
+    };
+  },
+  watch: {
+    lineColor: {
+      handler() {
+        this.setStyle();
+      },
+      immediateU: true,
+    },
+  },
+  methods: {
+    setStyle() {
+      const {
+        lineColor,
+      } = this;
+      const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
+      this.dividerStyle = dividerStyle;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './divider.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/divider/props.ts b/packages/tdesign-uniapp/components/divider/props.ts
new file mode 100644
index 000000000..0474070fa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/props.ts
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDividerProps } from './type';
+export default {
+  /** 文本位置（仅在水平分割线有效） */
+  align: {
+    type: String,
+    default: 'center' as TdDividerProps['align'],
+    validator(val: TdDividerProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'center'].includes(val);
+    },
+  },
+  /** 子元素 */
+  content: {
+    type: String,
+  },
+  /** 是否虚线（仅在水平分割线有效） */
+  dashed: Boolean,
+  /** 分隔线类型有两种：水平和垂直 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdDividerProps['layout'],
+    validator(val: TdDividerProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/divider/type.ts b/packages/tdesign-uniapp/components/divider/type.ts
new file mode 100644
index 000000000..22acac74a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/divider/type.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdDividerProps {
+  /**
+   * 文本位置（仅在水平分割线有效）
+   * @default center
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * 子元素
+   */
+  content?: string;
+  /**
+   * 是否虚线（仅在水平分割线有效）
+   * @default false
+   */
+  dashed?: boolean;
+  /**
+   * 分隔线类型有两种：水平和垂直
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+}
diff --git a/packages/tdesign-uniapp/components/draggable/draggable.less b/packages/tdesign-uniapp/components/draggable/draggable.less
new file mode 100644
index 000000000..85255a0b6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/draggable/draggable.less
@@ -0,0 +1,5 @@
+@import '../common/style/index.less';
+
+.@{prefix}-draggable {
+  position: fixed;
+}
diff --git a/packages/tdesign-uniapp/components/draggable/draggable.vue b/packages/tdesign-uniapp/components/draggable/draggable.vue
new file mode 100644
index 000000000..a83177213
--- /dev/null
+++ b/packages/tdesign-uniapp/components/draggable/draggable.vue
@@ -0,0 +1,92 @@
+<template>
+  <view
+    :class="[classPrefix, tClass]"
+    :style="_._style([customStyle])"
+    @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, getWindowInfo } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-draggable`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'move',
+    'start',
+    'end',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      systemInfo: getWindowInfo(),
+    };
+  },
+  mounted() {
+    this.computedRect();
+  },
+  methods: {
+    onTouchStart(e) {
+      const { systemInfo } = this;
+      if (this.direction === 'none') return;
+      this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right;
+      this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom;
+      this.$emit('start', { startX: this.startX, startY: this.startY, rect: this.rect, e });
+    },
+
+    onTouchMove(e) {
+      const { systemInfo } = this;
+
+      if (this.direction === 'none') return;
+      let x = this.startX - e.touches[0].clientX; // x轴移动偏移量
+      let y = this.startY - e.touches[0].clientY; // y轴移动偏移量
+
+
+      if (this.direction === 'vertical') {
+        x = systemInfo.windowWidth - this.rect.right;
+      }
+      if (this.direction === 'horizontal') {
+        y = systemInfo.windowHeight - this.rect.bottom;
+      }
+
+      this.$emit('move', { x, y, rect: this.rect, e });
+    },
+
+    async onTouchEnd(e) {
+      if (this.direction === 'none') return;
+      await this.computedRect();
+      this.$emit('end', { rect: this.rect, e });
+    },
+
+    async computedRect() {
+      this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
+      try {
+        this.rect = await getRect(this, `.${this.classPrefix}`);
+      } catch (e) {
+        // ignore reject
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './draggable.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/draggable/props.js b/packages/tdesign-uniapp/components/draggable/props.js
new file mode 100644
index 000000000..9542dae5a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/draggable/props.js
@@ -0,0 +1,19 @@
+const props = {
+  direction: {
+    type: String,
+    value: 'all',
+  },
+  tClass: {
+    type: String,
+    default: '',
+  },
+  tClassButton: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [String, Object],
+    default: '',
+  },
+};
+export default props;
diff --git a/packages/tdesign-uniapp/components/drawer/README.en-US.md b/packages/tdesign-uniapp/components/drawer/README.en-US.md
new file mode 100644
index 000000000..9719a5f53
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/README.en-US.md
@@ -0,0 +1,55 @@
+:: BASE_DOC ::
+
+## API
+
+### Drawer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+close-on-overlay-click | Boolean | true | \- | N
+destroy-on-close | Boolean | false | \- | N
+items | Array | - | Typescript：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts) | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts) | N
+placement | String | right | options: left/right | N
+show-overlay | Boolean | true | \- | N
+title | String | - | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | 11500 | \- | N
+
+### Drawer Events
+
+name | params | description
+-- | -- | --
+close | `(context: { trigger: DrawerTriggerSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
+item-click | `(context: { index: number; item: DrawerItem })` | \-
+overlay-click | \- | \-
+update-visible | `(context: { visible: boolean })` | \-
+
+### Drawer Slots
+
+name | Description
+-- | --
+\- | \-
+footer | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | - 
+--td-drawer-border-color | @border-level-1-color | - 
+--td-drawer-footer-padding-bottom | 40rpx | - 
+--td-drawer-hover-color | @bg-color-secondarycontainer | - 
+--td-drawer-item-height | 48rpx | - 
+--td-drawer-item-icon-color | @drawer-title-color | - 
+--td-drawer-item-icon-size | 48rpx | - 
+--td-drawer-item-padding | 32rpx | - 
+--td-drawer-sidebar-height | 70vh | - 
+--td-drawer-title-color | @text-color-primary | - 
+--td-drawer-title-font-size | 36rpx | - 
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | - 
+--td-drawer-width | 560rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/drawer/README.md b/packages/tdesign-uniapp/components/drawer/README.md
new file mode 100644
index 000000000..44034eb7b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/README.md
@@ -0,0 +1,81 @@
+---
+title: Drawer 抽屉
+description: 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDrawer from 'tdesign-uniapp/drawer/drawer.vue';
+```
+
+
+### 基础抽屉
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
+>Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
+
+
+
+## API
+
+### Drawer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
+destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts) | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts) | N
+placement | String | right | 抽屉方向。可选项：left/right | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String | - | 抽屉的标题 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 组件是否可见。支持语法糖 `v-model:visible` | N
+z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
+
+### Drawer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | `(context: { trigger: DrawerTriggerSource })` | 关闭时触发。。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
+item-click | `(context: { index: number; item: DrawerItem })` | 点击抽屉里的列表项
+overlay-click | \- | 如果蒙层存在，点击蒙层时触发
+update-visible | `(context: { visible: boolean })` | 更新可见性
+
+### Drawer Slots
+
+名称 | 描述
+-- | --
+\- | 自定义抽屉的底部
+footer | 抽屉的底部
+title | 自定义 `title` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-drawer-bg-color | @bg-color-container | - |
+| --td-drawer-border-color | @border-level-1-color | - |
+| --td-drawer-footer-padding-bottom | 40rpx | - |
+| --td-drawer-hover-color | @bg-color-secondarycontainer | - |
+| --td-drawer-item-height | 48rpx | - |
+| --td-drawer-item-icon-color | @drawer-title-color | - |
+| --td-drawer-item-icon-size | 48rpx | - |
+| --td-drawer-item-padding | 32rpx | - |
+| --td-drawer-sidebar-height | 70vh | - |
+| --td-drawer-title-color | @text-color-primary | - |
+| --td-drawer-title-font-size | 36rpx | - |
+| --td-drawer-title-padding | 48rpx 32rpx 16rpx | - |
+| --td-drawer-width | 560rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/drawer/_example/base/index.vue b/packages/tdesign-uniapp/components/drawer/_example/base/index.vue
new file mode 100644
index 000000000..203facca9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/base/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <view>
+    <t-button
+      variant="outline"
+      block
+      size="large"
+      theme="primary"
+      @click="openDrawerBase"
+    >
+      基础抽屉
+    </t-button>
+
+    <t-drawer
+      v-model:visible="visible"
+      :placement="placement"
+      :items="sidebar"
+      :using-custom-navbar="!isMPAlipay"
+      :custom-navbar-height="gCustomNavbarHeight"
+      @overlay-click="overlayClick"
+      @item-click="itemClick"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDrawer from 'tdesign-uniapp/drawer/drawer.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  components: {
+    tButton,
+    tDrawer,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+      placement: 'left',
+      sidebar: [],
+
+      baseSidebar: [
+        {
+          title: '菜单一',
+        },
+        {
+          title: '菜单二',
+        },
+        {
+          title: '菜单三',
+        },
+        {
+          title: '菜单四',
+        },
+        {
+          title: '菜单五',
+        },
+        {
+          title: '菜单六',
+        },
+        {
+          title: '菜单七',
+        },
+        {
+          title: '菜单八',
+        },
+      ],
+
+      visible: false,
+    };
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {
+    openDrawerBase() {
+      this.visible = true;
+      this.sidebar = this.baseSidebar;
+    },
+    itemClick(e) {
+      console.log(e);
+    },
+    overlayClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/_example/drawer.less b/packages/tdesign-uniapp/components/drawer/_example/drawer.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/drawer.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/drawer/_example/drawer.vue b/packages/tdesign-uniapp/components/drawer/_example/drawer.vue
new file mode 100644
index 000000000..5bf62b5ed
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/drawer.vue
@@ -0,0 +1,67 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Drawer"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Drawer 抽屉"
+        desc="用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础抽屉"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        desc="带图标抽屉"
+        padding
+      >
+        <icon-drawer />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="带标题样式"
+        padding
+      >
+        <titleDemo />
+      </t-demo>
+      <t-demo
+        desc="带底部插槽样式"
+        padding
+      >
+        <footerDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import titleDemo from './title/index.vue';
+import iconDrawer from './icon-drawer/index.vue';
+import footerDemo from './footer/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    titleDemo,
+    iconDrawer,
+    footerDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './drawer.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/_example/footer/index.vue b/packages/tdesign-uniapp/components/drawer/_example/footer/index.vue
new file mode 100644
index 000000000..5e029b4bf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/footer/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <view>
+    <t-button
+      variant="outline"
+      block
+      size="large"
+      theme="primary"
+      @click="openDrawerBase"
+    >
+      带底部插槽
+    </t-button>
+
+    <t-drawer
+      v-model:visible="visible"
+      :placement="placement"
+      title="标题"
+      :items="sidebar"
+      :using-custom-navbar="!isMPAlipay"
+      :custom-navbar-height="gCustomNavbarHeight"
+      @overlay-click="overlayClick"
+      @item-click="itemClick"
+    >
+      <template
+        #footer
+      >
+        <view class="button-host">
+          <t-button
+            size="large"
+            block
+            variant="outline"
+          >
+            操作
+          </t-button>
+        </view>
+      </template>
+    </t-drawer>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDrawer from 'tdesign-uniapp/drawer/drawer.vue';
+export default {
+  components: {
+    tButton,
+    tDrawer,
+  },
+  data() {
+    return {
+      visible: false,
+      placement: 'left',
+      sidebar: [],
+      baseSidebar: [
+        {
+          title: '菜单一',
+        },
+        {
+          title: '菜单二',
+        },
+        {
+          title: '菜单三',
+        },
+        {
+          title: '菜单四',
+        },
+        {
+          title: '菜单五',
+        },
+        {
+          title: '菜单六',
+        },
+        {
+          title: '菜单七',
+        },
+        {
+          title: '菜单八',
+        },
+        {
+          title: '菜单四',
+        },
+        {
+          title: '菜单五',
+        },
+        {
+          title: '菜单六',
+        },
+        {
+          title: '菜单七',
+        },
+        {
+          title: '菜单八',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    openDrawerBase() {
+      this.visible = true;
+      this.sidebar = this.baseSidebar;
+    },
+    itemClick(e) {
+      console.log(e);
+    },
+    overlayClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+.button-host {
+    margin: 20rpx 32rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/_example/icon-drawer/index.vue b/packages/tdesign-uniapp/components/drawer/_example/icon-drawer/index.vue
new file mode 100644
index 000000000..0a3d01620
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/icon-drawer/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <view>
+    <t-button
+      variant="outline"
+      block
+      size="large"
+      theme="primary"
+      @click="openDrawerIcon"
+    >
+      带图标抽屉
+    </t-button>
+
+    <t-drawer
+      v-model:visible="visible"
+      :placement="placement"
+      :items="sidebar"
+      :using-custom-navbar="!isMPAlipay"
+      :custom-navbar-height="gCustomNavbarHeight"
+      @overlay-click="overlayClick"
+      @item-click="itemClick"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDrawer from 'tdesign-uniapp/drawer/drawer.vue';
+export default {
+  components: {
+    tButton,
+    tDrawer,
+  },
+  data() {
+    return {
+      placement: 'left',
+      sidebar: [],
+
+      iconSidebar: [
+        {
+          title: '菜单一',
+          icon: 'app',
+        },
+        {
+          title: '菜单二',
+          icon: 'app',
+        },
+        {
+          title: '菜单三',
+          icon: 'app',
+        },
+        {
+          title: '菜单四',
+          icon: 'app',
+        },
+        {
+          title: '菜单五',
+          icon: 'app',
+        },
+        {
+          title: '菜单六',
+          icon: 'app',
+        },
+        {
+          title: '菜单七',
+          icon: 'app',
+        },
+        {
+          title: '菜单八',
+          icon: 'app',
+        },
+      ],
+
+      visible: false,
+    };
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {
+    openDrawerIcon() {
+      this.visible = true;
+      this.sidebar = this.iconSidebar;
+    },
+    itemClick(e) {
+      console.log(e);
+    },
+    overlayClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.less b/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.less
new file mode 100644
index 000000000..88f6ee6b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.less
@@ -0,0 +1,2 @@
+page {
+}
diff --git a/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.vue b/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.vue
new file mode 100644
index 000000000..781347c80
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/skyline/drawer.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Drawer"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Drawer 抽屉
+        </view>
+        <view class="demo-desc">
+          用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础抽屉"
+          padding
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo
+          desc="带图标抽屉"
+          padding
+        >
+          <icon-drawer />
+        </t-demo>
+        <t-demo
+          title="02 组件样式"
+          desc="带标题样式"
+          padding
+        >
+          <titleDemo />
+        </t-demo>
+        <t-demo
+          desc="带底部插槽样式"
+          padding
+        >
+          <footerDemo />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import titleDemo from '../title/index.vue';
+import iconDrawer from '../icon-drawer/index.vue';
+import footerDemo from '../footer/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    titleDemo,
+    iconDrawer,
+    footerDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './drawer.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/_example/title/index.vue b/packages/tdesign-uniapp/components/drawer/_example/title/index.vue
new file mode 100644
index 000000000..cdecdcc44
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/_example/title/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view>
+    <t-button
+      variant="outline"
+      block
+      size="large"
+      theme="primary"
+      @click="openDrawerBase"
+    >
+      带标题抽屉
+    </t-button>
+
+    <t-drawer
+      v-model:visible="visible"
+      :placement="placement"
+      title="标题"
+      :items="sidebar"
+      :using-custom-navbar="!isMPAlipay"
+      :custom-navbar-height="gCustomNavbarHeight"
+      @overlay-click="overlayClick"
+      @item-click="itemClick"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tDrawer from 'tdesign-uniapp/drawer/drawer.vue';
+export default {
+  components: {
+    tButton,
+    tDrawer,
+  },
+  data() {
+    return {
+      placement: 'left',
+      sidebar: [],
+
+      baseSidebar: [
+        {
+          title: '菜单一',
+        },
+        {
+          title: '菜单二',
+        },
+        {
+          title: '菜单三',
+        },
+        {
+          title: '菜单四',
+        },
+        {
+          title: '菜单五',
+        },
+        {
+          title: '菜单六',
+        },
+        {
+          title: '菜单七',
+        },
+        {
+          title: '菜单八',
+        },
+      ],
+
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    openDrawerBase() {
+      this.visible = true;
+      this.sidebar = this.baseSidebar;
+    },
+    itemClick(e) {
+      console.log(e);
+    },
+    overlayClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/drawer.less b/packages/tdesign-uniapp/components/drawer/drawer.less
new file mode 100644
index 000000000..bdaa98d43
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/drawer.less
@@ -0,0 +1,72 @@
+@import '../common/style/base.less';
+
+@drawer-width: var(--td-drawer-width, 560rpx);
+@drawer-title-font-size: var(--td-drawer-title-font-size, 36rpx);
+@drawer-title-padding: var(--td-drawer-title-padding, 48rpx 32rpx 16rpx);
+@drawer-bg-color: var(--td-drawer-bg-color, @bg-color-container);
+@drawer-border-color: var(--td-drawer-border-color, @border-level-1-color);
+@drawer-title-color: var(--td-drawer-title-color, @text-color-primary);
+@drawer-item-icon-color: var(--td-drawer-item-icon-color, @drawer-title-color);
+@drawer-item-padding: var(--td-drawer-item-padding, 32rpx);
+@drawer-item-height: var(--td-drawer-item-height, 48rpx);
+@drawer-item-icon-size: var(--td-drawer-item-icon-size, 48rpx);
+@drawer-sidebar-height: var(--td-drawer-sidebar-height, 70vh);
+@drawer-footer-padding-bottom: var(--td-drawer-footer-padding-bottom, 40rpx);
+@drawer-hover-color: var(--td-drawer-hover-color, @bg-color-secondarycontainer);
+
+.@{prefix}-drawer {
+  background: @drawer-bg-color;
+  width: @drawer-width;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &--hover {
+    background-color: @drawer-hover-color;
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: @drawer-title-font-size;
+    padding: 48rpx 32rpx 16rpx;
+    color: @drawer-title-color;
+  }
+
+  &__sidebar {
+    height: @drawer-sidebar-height;
+    width: 100%;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      .border(bottom, @drawer-border-color);
+      padding-top: @drawer-item-padding;
+      padding-right: 0;
+      padding-bottom: @drawer-item-padding;
+      padding-left: @drawer-item-padding;
+      line-height: @drawer-item-height;
+
+      &::after {
+        left: @drawer-item-padding;
+      }
+
+      &-title {
+        flex: 1;
+        color: @drawer-title-color;
+      }
+
+      &-icon {
+        padding-right: 16rpx;
+        color: @drawer-item-icon-color;
+        font-size: @drawer-item-icon-size;
+      }
+    }
+  }
+
+  &__footer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: @drawer-footer-padding-bottom;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/drawer/drawer.vue b/packages/tdesign-uniapp/components/drawer/drawer.vue
new file mode 100644
index 000000000..e9725e6b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/drawer.vue
@@ -0,0 +1,138 @@
+<template>
+  <view>
+    <t-popup
+      v-if="!destroyOnClose || dataVisible"
+      :custom-style="_._style([customStyle])"
+      :visible="dataVisible"
+      :z-index="zIndex"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :placement="placement == 'right' ? 'right' : 'left'"
+      :show-overlay="showOverlay"
+      :close-on-overlay-click="closeOnOverlayClick"
+      @visible-change="visibleChange"
+    >
+      <view :class="classPrefix">
+        <slot name="title" />
+        <view
+          v-if="title"
+          :class="classPrefix + '__title'"
+        >
+          {{ title }}
+        </view>
+        <scroll-view
+          :class="classPrefix + '__sidebar'"
+          scroll-y
+          type="list"
+        >
+          <view
+            v-for="(item, index) in items"
+            :key="index"
+            :class="classPrefix + '__sidebar-item'"
+            :hover-class="classPrefix + '--hover'"
+            :hover-start-time="0"
+            :hover-stay-time="100"
+            wx:item="item"
+            :data-item="item"
+            :data-index="index"
+            :aria-role="ariaRole || 'button'"
+            :aria-label="item.title"
+            @click="itemClick"
+          >
+            <view
+              v-if="item.icon"
+              :aria-hidden="true"
+              :class="classPrefix + '__sidebar-item-icon'"
+            >
+              <t-icon :name="item.icon" />
+            </view>
+
+            <view :class="classPrefix + '__sidebar-item-title'">
+              {{ item.title }}
+            </view>
+          </view>
+        </scroll-view>
+        <view :class="classPrefix + '__footer'">
+          <slot />
+          <slot name="footer" />
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import tPopup from '../popup/popup';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-drawer`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [
+    useCustomNavbar,
+  ],
+  components: {
+    tPopup,
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+    'close',
+    'overlay-click',
+    'item-click',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      _,
+      dataVisible: coalesce(this.visible, this.defaultVisible),
+    };
+  },
+  watch: {
+    visible(e) {
+      this.dataVisible = e;
+    },
+  },
+  methods: {
+    // closeOnOverlayClick 为 true 时才能触发 popup 的 visible-change 事件
+    visibleChange(detail) {
+      const { visible } = detail;
+      const { showOverlay } = this;
+
+      this.dataVisible = visible;
+
+      if (!visible) {
+        this.$emit('close', { trigger: 'overlay' });
+      }
+
+      if (showOverlay) {
+        this.$emit('overlay-click', { visible });
+      }
+      this.$emit('update:visible', visible);
+    },
+
+    itemClick(detail) {
+      const { index, item } = detail.currentTarget.dataset;
+
+      this.$emit('item-click', { index, item });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './drawer.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/drawer/props.ts b/packages/tdesign-uniapp/components/drawer/props.ts
new file mode 100644
index 000000000..ee0b6931e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/props.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDrawerProps } from './type';
+export default {
+  /** 点击蒙层时是否触发抽屉关闭事件 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉关闭时是否销毁节点 */
+  destroyOnClose: Boolean,
+  /** 抽屉里的列表项 */
+  items: {
+    type: Array,
+  },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 抽屉方向 */
+  placement: {
+    type: String,
+    default: 'right' as TdDrawerProps['placement'],
+    validator(val: TdDrawerProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉的标题 */
+  title: {
+    type: String,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 组件是否可见。支持语法糖 `v-model:visible` */
+  visible: Boolean,
+  /** 抽屉层级，样式默认为 11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 关闭时触发。 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击抽屉里的列表项 */
+  onItemClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 更新可见性 */
+  onUpdateVisible: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/drawer/type.ts b/packages/tdesign-uniapp/components/drawer/type.ts
new file mode 100644
index 000000000..837d783ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/drawer/type.ts
@@ -0,0 +1,81 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdDrawerProps {
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 抽屉里的列表项
+   */
+  items?: DrawerItem[];
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 抽屉的标题
+   */
+  title?: string;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 组件是否可见。支持语法糖 `v-model:visible`
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 关闭时触发。
+   */
+  onClose?: (context: { trigger: DrawerTriggerSource }) => void;
+  /**
+   * 点击抽屉里的列表项
+   */
+  onItemClick?: (context: { index: number; item: DrawerItem }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: () => void;
+  /**
+   * 更新可见性
+   */
+  onUpdateVisible?: (context: { visible: boolean }) => void;
+}
+
+export interface DrawerItem {
+  title: string;
+  icon: string;
+}
+
+export type DrawerTriggerSource = 'overlay';
diff --git a/packages/tdesign-uniapp/components/dropdown-item/computed.js b/packages/tdesign-uniapp/components/dropdown-item/computed.js
new file mode 100644
index 000000000..e8886ef20
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-item/computed.js
@@ -0,0 +1,6 @@
+export function getStyles(top, zIndex) {
+  const topStyle = top ? `top:${top}px;` : '';
+  const zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  return topStyle + zIndexStyle;
+}
+
diff --git a/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.less b/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.less
new file mode 100644
index 000000000..871226580
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.less
@@ -0,0 +1,131 @@
+@import '../common/style/base.less';
+
+@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-color, @bg-color-container);
+@dropdown-body-max-height: var(--td-dropdown-body-max-height, 560rpx);
+
+@tree-bg-color: var(--td-tree-bg-color, @bg-color-container);
+@tree-root-bg-color: var(--td-tree-root-bg-color, @bg-color-secondarycontainer);
+@tree-item-active-color: var(--td-tree-item-active-color, @brand-color);
+@tree-item-height: var(--td-tree-item-height, 96rpx);
+@tree-item-font-size: var(--td-tree-item-font-size, 32rpx);
+
+@item: ~'@{prefix}-dropdown-item';
+
+/** dropdown-item */
+.@{item} {
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  bottom: 0;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    z-index: 11600;
+    overflow: hidden;
+  }
+
+  &__popup-host {
+    // 为了解决虚拟节点偶尔出现的问题
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &__body {
+    flex: 1;
+    background: @dropdown-menu-bg-color;
+    overflow: auto;
+    max-height: @dropdown-body-max-height;
+
+    &--tree {
+      display: flex;
+      overflow: hidden;
+    }
+
+    &--multi {
+      padding-top: @spacer;
+      padding-bottom: @spacer;
+      overflow-y: auto;
+    }
+  }
+
+  &__scroll {
+    max-height: @dropdown-body-max-height;
+    width: 100%;
+  }
+
+  &__footer {
+    display: flex;
+    background: @dropdown-menu-bg-color;
+    position: relative;
+    padding: 32rpx;
+    .border(top, @component-border);
+
+    :deep(&-btn) {
+      flex: 1;
+    }
+
+    :deep(&-btn + &-btn) {
+      margin-left: 32rpx;
+    }
+  }
+
+  &__body,
+  &__footer {
+    &:empty {
+      display: none;
+    }
+  }
+
+  // :deep(&__radio),
+  // :deep(&__checkbox) {
+  //   width: 100%;
+  //   overflow: scroll;
+  //   box-sizing: border-box;
+
+  //   &-group {
+  //     display: grid;
+  //     grid-gap: 24rpx;
+  //   }
+  // }
+
+  // :deep(&__radio) {
+  //   &-group {
+  //     display: grid;
+  //     grid-gap: 0rpx;
+  //   }
+  // }
+
+  // :deep(&__checkbox) {
+  //   &-group {
+  //     padding: 32rpx;
+  //   }
+  // }
+
+  /** 树形结构 */
+  &__tree {
+    &-item {
+      height: @tree-item-height;
+      line-height: @tree-item-height;
+      font-size: @tree-item-font-size;
+      padding-left: 32rpx;
+
+      &--active {
+        color: @tree-item-active-color;
+      }
+    }
+  }
+
+  &__mask {
+    position: fixed;
+    width: 100vh;
+    top: 0;
+    left: 0;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.vue b/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.vue
new file mode 100644
index 000000000..85dad44c1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-item/dropdown-item.vue
@@ -0,0 +1,391 @@
+<template>
+  <view
+    v-if="wrapperVisible"
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([getStyles(top, zIndex), customStyle])"
+  >
+    <view
+      v-if="show"
+      :class="classPrefix + '__mask'"
+      :style="_._style(['height:' + maskHeight + 'px', customStyle])"
+      @click="handleMaskClick"
+      @touchmove.stop.prevent="closeDropdown"
+    />
+    <t-popup
+      :visible="show"
+      :z-index="zIndex + 1"
+      :duration="duration"
+      :show-overlay="showOverlay"
+      custom-style="position: absolute"
+      :overlay-props="{ style: 'position: absolute' }"
+      :t-class="classPrefix + '__popup-host'"
+      :t-class-content="classPrefix + '__content ' + tClassContent"
+      @leaved="onLeaved"
+      @visible-change="handleMaskClick"
+    >
+      <view :class="classPrefix + '__body'">
+        <scroll-view
+          v-if="!multiple && options && options.length > 0"
+          :class="classPrefix + '__scroll'"
+          scroll-y
+          :scroll-into-view="'id_' + dataValue"
+        >
+          <t-radio-group
+            :t-class="classPrefix + '__radio ' + classPrefix + '__radio-group ' + tClassColumn"
+            :custom-style="radioGroupCustomStyle"
+            :value="dataValue"
+            @change="handleRadioChange"
+          >
+            <view
+              v-for="(item, index) in options"
+              :id="'id_' + item[valueAlias]"
+              :key="index"
+            >
+              <t-radio
+                :placement="placement"
+                tabindex="0"
+                :checked="dataValue === item[valueAlias]"
+                icon="line"
+                :t-class="classPrefix + '__radio-item radio ' + tClassColumnItem"
+                :t-class-label="tClassColumnItemLabel"
+                :value="item[valueAlias]"
+                :label="item[labelAlias]"
+                :disabled="item.disabled"
+                @change="e => onRadioChange(e, item[valueAlias])"
+              />
+            </view>
+          </t-radio-group>
+        </scroll-view>
+        <scroll-view
+          v-if="multiple && options && options.length > 0"
+          :class="classPrefix + '__scroll'"
+          scroll-y
+          :scroll-into-view="'id_' + firstCheckedValue"
+        >
+          <t-checkbox-group
+            ref="checkboxGroupRef"
+            :t-class="classPrefix + '__checkbox ' + classPrefix + '__checkbox-group ' + tClassColumn"
+            :custom-style="checkboxGroupCustomStyle"
+            :value="dataValue ? dataValue : []"
+            @change="handleRadioChange"
+          >
+            <view
+              v-for="(item, index) in options"
+              :id="'id_' + item[valueAlias]"
+              :key="index"
+            >
+              <t-checkbox
+                tabindex="0"
+                :t-class="classPrefix + '__checkbox-item ' + tClassColumnItem"
+                theme="tag"
+                :value="item[valueAlias]"
+                :label="item[labelAlias]"
+                :disabled="item.disabled"
+                :checked="dataValue.indexOf(item[valueAlias]) > -1"
+                @change="e => onCheckboxChange(e, item[valueAlias])"
+              />
+            </view>
+          </t-checkbox-group>
+        </scroll-view>
+        <slot />
+      </view>
+      <view :class="classPrefix + '__footer ' + tClassFooter">
+        <slot name="footer" />
+        <block v-if="multiple">
+          <t-button
+            block
+            :t-class="footerBtnTClass"
+            :class="footerBtnClass"
+            theme="light"
+            content="重置"
+            :disabled="dataValue.length == 0"
+            @click="handleReset"
+          />
+          <t-button
+            block
+            :t-class="confirmBtnTClass"
+            :class="confirmBtnClass"
+            theme="primary"
+            content="确定"
+            :disabled="dataValue.length == 0"
+            @click="handleConfirm"
+          />
+        </block>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import tButton from '../button/button';
+import tRadio from '../radio/radio';
+import tRadioGroup from '../radio-group/radio-group';
+import tCheckbox from '../checkbox/checkbox';
+import tCheckboxGroup from '../checkbox-group/checkbox-group';
+import tPopup from '../popup/popup';
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce, getRect, getWindowInfo } from '../common/utils';
+import props from './props';
+import menuProps from '../dropdown-menu/props';
+import _ from '../common/utils.wxs';
+import { getStyles } from './computed';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-dropdown-item`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'value',
+    event: 'change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-column`,
+    `${prefix}-class-column-item`,
+    `${prefix}-class-column-item-label`,
+    `${prefix}-class-footer`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.DropdownItem)],
+  components: {
+    tButton,
+    tRadio,
+    tRadioGroup,
+    tCheckbox,
+    tCheckboxGroup,
+    tPopup,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['close', 'closed', 'change', 'reset', 'confirm', 'opened', 'open'],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      show: false,
+      top: 0,
+      maskHeight: 0,
+      initValue: null,
+      hasChanged: false,
+      duration: menuProps.duration.default,
+      zIndex: menuProps.zIndex.default,
+      overlay: menuProps.showOverlay.default,
+      labelAlias: 'label',
+      valueAlias: 'value',
+      computedLabel: '',
+      firstCheckedValue: '',
+
+      dataValue: coalesce(this.value, this.defaultValue),
+
+      wrapperVisible: false,
+      _,
+
+      windowTop: 0,
+    };
+  },
+  computed: {
+    footerBtnTClass() {
+      return canUseVirtualHost() ? this.footerBtnRealClass : '';
+    },
+    footerBtnClass() {
+      return !canUseVirtualHost() ? this.footerBtnRealClass : '';
+    },
+    footerBtnRealClass() {
+      const { classPrefix } = this;
+      return `${classPrefix}__footer-btn ${classPrefix}__reset-btn`;
+    },
+
+    confirmBtnTClass() {
+      return canUseVirtualHost() ? this.confirmBtnRealClass : '';
+    },
+    confirmBtnClass() {
+      return !canUseVirtualHost() ? this.confirmBtnRealClass : '';
+    },
+    confirmBtnRealClass() {
+      const { classPrefix } = this;
+      return `${classPrefix}__footer-btn ${classPrefix}__confirm-btn`;
+    },
+
+    radioGroupCustomStyle() {
+      return _._style([
+        {
+          width: '100%',
+          overflow: 'scroll',
+          boxSizing: 'border-box',
+
+          display: 'grid',
+          gridGap: '0px',
+
+          gridTemplateColumns: `repeat(${this.optionsColumns}, 1fr)`,
+        },
+      ]);
+    },
+    checkboxGroupCustomStyle() {
+      return _._style([
+        {
+          width: '100%',
+          overflow: 'scroll',
+          boxSizing: 'border-box',
+
+          display: 'grid',
+          gridGap: '12px',
+
+          gridTemplateColumns: `repeat(${this.optionsColumns}, 1fr)`,
+          padding: '16px',
+        },
+      ]);
+    },
+  },
+  watch: {
+    keys: {
+      handler(obj) {
+        this.labelAlias = obj?.label || 'label';
+        this.valueAlias = obj?.value || 'value';
+      },
+      immediate: true,
+    },
+    value: {
+      handler(value) {
+        this.dataValue = value;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler(v) {
+        const { options, labelAlias, valueAlias } = this;
+
+        if (this.multiple) {
+          if (v && !Array.isArray(v)) throw TypeError('应传入数组类型的 value');
+        }
+
+        const target = options.find(item => item[valueAlias] === v);
+
+        if (target) {
+          this.computedLabel = target[labelAlias];
+        }
+      },
+      immediate: true,
+    },
+    label: 'getParentAllItems',
+    computedLabel: 'getParentAllItems',
+    disabled: 'getParentAllItems',
+    show: {
+      handler(visible) {
+        if (visible) {
+          this.getParentBottom(() => {
+            this.wrapperVisible = true;
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    const {  windowTop } = getWindowInfo();
+    this.windowTop = windowTop || 0;
+  },
+  methods: {
+    getStyles,
+    innerAfterLinked(target) {
+      const { zIndex, duration, showOverlay } = target;
+
+      this.zIndex = zIndex;
+      this.duration = duration;
+      this.showOverlay = showOverlay;
+    },
+    getParentAllItems() {
+      this[RELATION_MAP.DropdownItem]?.getAllItems();
+    },
+    closeDropdown() {
+      this[RELATION_MAP.DropdownItem].activeIdx = -1;
+      this.show = false;
+      this.$emit('close');
+    },
+
+    getParentBottom(cb) {
+      getRect(this[RELATION_MAP.DropdownItem], `#${prefix}-bar`).then((rect) => {
+        this.top = rect.bottom + (this.windowTop || 0);
+        this.maskHeight = rect.top;
+
+        setTimeout(() => {
+          cb();
+        }, 20);
+      });
+    },
+
+    handleTreeClick(e) {
+      const { level, value: itemValue } = e.currentTarget.dataset;
+      const { dataValue } = this;
+
+      dataValue[level] = itemValue;
+      this._trigger('change', { value: dataValue });
+    },
+
+    onRadioChange(e, curValue) {
+      this.handleRadioChange({ value: curValue });
+    },
+    onCheckboxChange(e) {
+      const { checkAll, dataIndeterminate } = this.$refs.checkboxGroupRef;
+      const { context: { value, label }, checked } = e;
+      this.$refs.checkboxGroupRef.updateValue({
+        value,
+        checkAll,
+        indeterminate: dataIndeterminate,
+        checked,
+        item: { label, value, checked },
+        validChildren: false,
+      });
+    },
+
+    handleRadioChange(e) {
+      const { value } = e;
+
+      this._trigger('change', { value });
+
+      if (!this.multiple) {
+        this.closeDropdown();
+      } else {
+        const firstChecked = this.options.find(item => value.includes(item.value));
+        if (firstChecked) {
+          this.firstCheckedValue = firstChecked.value;
+        }
+      }
+    },
+
+    handleMaskClick() {
+      if (this[RELATION_MAP.DropdownItem]?.closeOnClickOverlay) {
+        this.closeDropdown();
+      }
+    },
+
+    handleReset() {
+      this._trigger('change', { value: [] });
+      this._trigger('reset');
+    },
+
+    handleConfirm() {
+      this._trigger('confirm', { value: this.dataValue });
+      this.closeDropdown();
+      // 在关闭 popup 后才自动滚动到首个选项
+      // this.firstCheckedValue = this.firstCheckedValue;
+    },
+
+    onLeaved() {
+      this.wrapperVisible = false;
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './dropdown-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-item/props.ts b/packages/tdesign-uniapp/components/dropdown-item/props.ts
new file mode 100644
index 000000000..7ba6c449d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-item/props.ts
@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDropdownItemProps } from './type';
+export default {
+  /** 是否禁用操作项 */
+  disabled: Boolean,
+  /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** 标题 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 是否多选 */
+  multiple: Boolean,
+  /** 选项数据 */
+  options: {
+    type: Array,
+    default: (): TdDropdownItemProps['options'] => [],
+  },
+  /** 选项分栏（1-3） */
+  optionsColumns: {
+    type: [String, Number],
+    default: 1 as TdDropdownItemProps['optionsColumns'],
+  },
+  /** 复选框和内容相对位置，仅单选菜单栏有效 */
+  placement: {
+    type: String,
+    default: 'left' as TdDropdownItemProps['placement'],
+    validator(val: TdDropdownItemProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 选中值 */
+  value: {
+    type: [String, Number, Array],
+    default: undefined as TdDropdownItemProps['value'],
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Array],
+    default: undefined as TdDropdownItemProps['defaultValue'],
+  },
+  /** 值改变时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击确认时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击重置时触发 */
+  onReset: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/dropdown-item/type.ts b/packages/tdesign-uniapp/components/dropdown-item/type.ts
new file mode 100644
index 000000000..c4ba0ce35
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-item/type.ts
@@ -0,0 +1,76 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { KeysType } from '../common/common';
+
+export interface TdDropdownItemProps {
+  /**
+   * 是否禁用操作项
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 标题
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 是否多选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 选项数据
+   * @default []
+   */
+  options?: Array<DropdownOption>;
+  /**
+   * 选项分栏（1-3）
+   * @default 1
+   */
+  optionsColumns?: string | number;
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 选中值
+   */
+  value?: DropdownValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: DropdownValue;
+  /**
+   * 值改变时触发
+   */
+  onChange?: (context: { value: DropdownValue }) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: () => void;
+  /**
+   * 点击确认时触发
+   */
+  onConfirm?: (context: { value: DropdownValue }) => void;
+  /**
+   * 点击重置时触发
+   */
+  onReset?: () => void;
+}
+
+export interface DropdownOption {
+  label: string;
+  disabled: boolean;
+  value: DropdownValue;
+}
+
+export type DropdownValue = string | number | Array<DropdownValue>;
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/README.en-US.md b/packages/tdesign-uniapp/components/dropdown-menu/README.en-US.md
new file mode 100644
index 000000000..0a9125ff1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/README.en-US.md
@@ -0,0 +1,101 @@
+:: BASE_DOC ::
+
+## API
+
+### DropdownMenu Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+arrow-icon | String / Object | 'caret-down-small' | \- | N
+close-on-click-overlay | Boolean | true | \- | N
+duration | String / Number | 200 | \- | N
+show-overlay | Boolean | true | \- | N
+z-index | Number | 11600 | \- | N
+
+### DropdownMenu Events
+
+name | params | description
+-- | -- | --
+close | \- | \-
+open | \- | \-
+
+### DropdownMenu Slots
+
+name | Description
+-- | --
+\- | \-
+
+### DropdownMenu External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-item | \-
+t-class-label | \-
+
+
+### DropdownItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disabled | Boolean | false | \- | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+label | String | - | \- | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+options-columns | String / Number | 1 | \- | N
+options-layout | String | columns | `deprecated` | N
+placement | String | left | options: left/right | N
+value | String / Number / Array | undefined | `v-model:value` is supported。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+
+### DropdownItem Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: DropdownValue })` | \-
+close | \- | \-
+confirm | `(context: { value: DropdownValue })` | \-
+reset | \- | \-
+
+### DropdownItem Slots
+
+name | Description
+-- | --
+\- | \-
+footer | \-
+
+### DropdownItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-column | \-
+t-class-column-item | \-
+t-class-column-item-label | \-
+t-class-content | \-
+t-class-footer | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dropdown-menu-active-color | @brand-color | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-dropdown-menu-border-width | 1px | - 
+--td-dropdown-menu-color | @text-color-primary | - 
+--td-dropdown-menu-disabled-color | @text-color-disabled | - 
+--td-dropdown-menu-font-size | 28rpx | - 
+--td-dropdown-menu-height | 96rpx | - 
+--td-dropdown-menu-icon-size | 40rpx | - 
+--td-dropdown-body-max-height | 560rpx | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 96rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/README.md b/packages/tdesign-uniapp/components/dropdown-menu/README.md
new file mode 100644
index 000000000..03ac7ecf2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/README.md
@@ -0,0 +1,131 @@
+---
+title: DropdownMenu 下拉菜单
+description: 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+### 引入组件
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import DropdownMenu from 'tdesign-uniapp/dropdown-menu/dropdown-menu.vue';
+import DropdownItem from 'tdesign-uniapp/dropdown-item/dropdown-item.vue';
+```
+
+### 单选下拉菜单
+
+{{ single }}
+
+### 多列下拉菜单
+
+{{ multi }}
+
+### 树形下拉菜单
+
+{{ tree }}
+
+## API
+
+### DropdownMenu Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
+close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
+duration | String / Number | 200 | 动画时长 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+z-index | Number | 11600 | 菜单栏 z-index 层级 | N
+
+### DropdownMenu Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 菜单关闭时触发
+open | \- | 菜单展开时触发
+
+### DropdownMenu Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### DropdownMenu External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-item | 选项样式类
+t-class-label | 标签样式类
+
+
+### DropdownItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disabled | Boolean | false | 是否禁用操作项 | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+label | String | - | 标题 | N
+multiple | Boolean | false | 是否多选 | N
+options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+options-columns | String / Number | 1 | 选项分栏（1-3） | N
+options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
+value | String / Number / Array | undefined | 选中值。支持语法糖 `v-model:value`。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/dropdown-item/type.ts) | N
+
+### DropdownItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: DropdownValue })` | 值改变时触发
+close | \- | 关闭时触发
+confirm | `(context: { value: DropdownValue })` | 点击确认时触发
+reset | \- | 点击重置时触发
+
+### DropdownItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+footer | 底部
+
+### DropdownItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-column | 菜单列样式类
+t-class-column-item | 菜单列选项样式类
+t-class-column-item-label | 菜单列选项标签样式类
+t-class-content | 内容样式类
+t-class-footer | 底部样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-dropdown-menu-active-color | @brand-color | - |
+| --td-dropdown-menu-bg-color | @bg-color-container | - |
+| --td-dropdown-menu-border-width | 1px | - |
+| --td-dropdown-menu-color | @text-color-primary | - |
+| --td-dropdown-menu-disabled-color | @text-color-disabled | - |
+| --td-dropdown-menu-font-size | 28rpx | - |
+| --td-dropdown-menu-height | 96rpx | - |
+| --td-dropdown-menu-icon-size | 40rpx | - |
+| --td-dropdown-body-max-height | 560rpx | - |
+| --td-dropdown-menu-bg-color | @bg-color-container | - |
+| --td-tree-bg-color | @bg-color-container | - |
+| --td-tree-item-active-color | @brand-color | - |
+| --td-tree-item-font-size | 32rpx | - |
+| --td-tree-item-height | 96rpx | - |
+| --td-tree-root-bg-color | @bg-color-secondarycontainer | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.less b/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.less
new file mode 100644
index 000000000..434938bcd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.less
@@ -0,0 +1,9 @@
+.wrapper {
+    width: 100%;
+    height: 300px;
+}
+
+.buttons .t-button {
+    display: flex;
+    margin: 30rpx;
+}
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.vue b/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.vue
new file mode 100644
index 000000000..5e5e21ebb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/_example/dropdown-menu.vue
@@ -0,0 +1,78 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="DropdownMenu"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="DropdownMenu 下拉菜单"
+        desc="菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="单选下拉菜单"
+      >
+        <single />
+      </t-demo>
+
+      <t-demo desc="分栏下拉菜单">
+        <multi />
+      </t-demo>
+
+      <!-- <t-demo desc="树形下拉菜单">
+    <tree />
+  </t-demo> -->
+
+      <t-demo
+        title="02 组件状态"
+        desc="禁用状态"
+      >
+        <TDropdownMenu relation-key="relationKey">
+          <TDropdownItem
+            disabled
+            label="禁用菜单"
+            :relation-key="relationKey"
+          />
+          <TDropdownItem
+            disabled
+            label="禁用菜单"
+            :relation-key="relationKey"
+          />
+        </TDropdownMenu>
+      </t-demo>
+
+      <view style="height: 600rpx" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import single from './single/index.vue';
+import multi from './multi/index.vue';
+import TDropdownMenu from 'tdesign-uniapp/dropdown-menu/dropdown-menu.vue';
+import TDropdownItem from 'tdesign-uniapp/dropdown-item/dropdown-item.vue';
+
+
+export default {
+  components: {
+    single,
+    multi,
+    TDropdownMenu,
+    TDropdownItem,
+  },
+  data() {
+    return {
+      relationKey: `${Math.random()}`,
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './dropdown-menu.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/_example/multi/index.vue b/packages/tdesign-uniapp/components/dropdown-menu/_example/multi/index.vue
new file mode 100644
index 000000000..cd69b93e1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/_example/multi/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <view>
+    <TDropdownMenu relation-key="relationKey">
+      <TDropdownItem
+        label="单列多选"
+        :options="multipleSelect.options"
+        :value="multipleSelect.value"
+        multiple
+        :relation-key="relationKey"
+        @change="handleMultipleSelect"
+      />
+      <TDropdownItem
+        label="双列多选"
+        options-columns="2"
+        :options="doubleColumnsOptions"
+        :default-value="['option_1', 'option_2']"
+        multiple
+        :relation-key="relationKey"
+      />
+      <TDropdownItem
+        label="三列多选"
+        options-columns="3"
+        :options="tripleColumnsOptions"
+        :default-value="['option_1', 'option_2', 'option_3']"
+        multiple
+        :relation-key="relationKey"
+      />
+    </TDropdownMenu>
+  </view>
+</template>
+
+<script>
+import TDropdownMenu from 'tdesign-uniapp/dropdown-menu/dropdown-menu.vue';
+import TDropdownItem from 'tdesign-uniapp/dropdown-item/dropdown-item.vue';
+
+
+const chineseNumber = '一二三四五六七八九十'.split('');
+const singleSelectOptions = new Array(8).fill(null)
+  .map((_, i) => ({
+    label: `选项${chineseNumber[i]}`,
+    value: `option_${i + 1}`,
+    disabled: false,
+  }));
+singleSelectOptions.push({
+  label: '禁用选项',
+  value: 'disabled',
+  disabled: true,
+});
+const doubleColumnsOptions = [
+  ...singleSelectOptions,
+  {
+    label: '禁用选项',
+    value: 'disabled',
+    disabled: true,
+  },
+];
+const tripleColumnsOptions = [
+  ...doubleColumnsOptions,
+  {
+    label: '禁用选项',
+    value: 'disabled',
+    disabled: true,
+  },
+];
+tripleColumnsOptions.splice(8, 0, {
+  label: `选项${chineseNumber[8]}`,
+  value: `option_${9}`,
+  disabled: false,
+});
+export default {
+  components: {
+    TDropdownMenu,
+    TDropdownItem,
+  },
+  data() {
+    return {
+      multipleSelect: {
+        value: ['option_1'],
+        options: singleSelectOptions,
+      },
+      doubleColumnsOptions,
+      tripleColumnsOptions,
+      relationKey: `${Math.random()}`,
+    };
+  },
+  created() {},
+  methods: {
+    handleMultipleSelect(e) {
+      this.multipleSelect.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/_example/single/index.vue b/packages/tdesign-uniapp/components/dropdown-menu/_example/single/index.vue
new file mode 100644
index 000000000..d9f3325c8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/_example/single/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <view>
+    <TDropdownMenu relation-key="relationKey">
+      <TDropdownItem
+        :options="product.options"
+        placement="right"
+        :value="product.value"
+        :relation-key="relationKey"
+        @change="onChange"
+      />
+      <TDropdownItem
+        :options="sorter.options"
+        placement="right"
+        :default-value="sorter.value"
+        :relation-key="relationKey"
+      />
+    </TDropdownMenu>
+  </view>
+</template>
+
+<script>
+import TDropdownMenu from 'tdesign-uniapp/dropdown-menu/dropdown-menu.vue';
+import TDropdownItem from 'tdesign-uniapp/dropdown-item/dropdown-item.vue';
+
+
+export default {
+  components: {
+    TDropdownMenu,
+    TDropdownItem,
+  },
+  data() {
+    return {
+      product: {
+        value: 'all',
+        options: [
+          {
+            value: 'all',
+            label: '全部产品',
+          },
+          {
+            value: 'new',
+            label: '最新产品',
+          },
+          {
+            value: 'hot',
+            label: '最火产品',
+          },
+          {
+            value: 'disabled',
+            label: '禁用选项',
+            disabled: true,
+          },
+        ],
+      },
+      sorter: {
+        value: 'default',
+        options: [
+          {
+            value: 'default',
+            label: '默认排序',
+          },
+          {
+            value: 'price',
+            label: '价格从高到低',
+          },
+        ],
+      },
+      relationKey: `${Math.random()}`,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.product.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/_example/tree/index.vue b/packages/tdesign-uniapp/components/dropdown-menu/_example/tree/index.vue
new file mode 100644
index 000000000..9ac169ca5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/_example/tree/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <t-dropdown-menu>
+      <t-dropdown-item
+        label="树形双列"
+        options-layout="tree"
+        :options="doubleColumnsTree.options"
+        :value="doubleColumnsTree.value"
+        @change="handleTreeSelect"
+      />
+      <t-dropdown-item
+        label="选项最多八字树形三列"
+        options-layout="tree"
+        :options="tripleColumnsTree.options"
+        :default-value="tripleColumnsTree.value"
+        multiple
+      />
+    </t-dropdown-menu>
+  </view>
+</template>
+
+<script>
+const chineseNumber = '一二三四五六七八九十'.split('');
+const generateTree = function (deep = 0, count = 10, prefix) {
+  const ans = [];
+  for (let i = 0; i < count; i += 1) {
+    const value = prefix ? `${prefix}-${i}` : `${i}`;
+    const rect = {
+      label: `选项${chineseNumber[i]}`,
+      value,
+    };
+    if (deep > 0) {
+      rect.options = generateTree(deep - 1, 10, value);
+    }
+    ans.push(rect);
+  }
+  return ans;
+};
+export default {
+  components: {
+  },
+  data() {
+    return {
+      doubleColumnsTree: {
+        options: generateTree(1),
+        value: ['0', '0-0'],
+      },
+      tripleColumnsTree: {
+        options: generateTree(2),
+        value: ['0', '0-0', ['0-0-0', '0-0-1']],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleTreeSelect(e) {
+      this.doubleColumnsTree.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.less b/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.less
new file mode 100644
index 000000000..4b7b37975
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.less
@@ -0,0 +1,65 @@
+@import '../common/style/base.less';
+
+@dropdown-menu-height: var(--td-dropdown-menu-height, 96rpx);
+@dropdown-menu-bg-color: var(--td-dropdown-menu-bg-color, @bg-color-container);
+@dropdown-menu-color: var(--td-dropdown-menu-color, @text-color-primary);
+@dropdown-menu-active-color: var(--td-dropdown-menu-active-color, @brand-color);
+@dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-color, @text-color-disabled);
+@dropdown-menu-font-size: var(--td-dropdown-menu-font-size, 28rpx);
+@dropdown-menu-icon-size: var(--td-dropdown-menu-icon-size, 40rpx);
+@dropdown-menu-border-width: var(--td-dropdown-menu-border-width, 1px);
+
+@dropdownMenu: ~'@{prefix}-dropdown-menu';
+
+.@{dropdownMenu} {
+  position: relative;
+  display: flex;
+  height: @dropdown-menu-height;
+  background: @dropdown-menu-bg-color;
+  .border(bottom);
+
+  &:after {
+    height: @dropdown-menu-border-width;
+  }
+
+  &__item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0 @spacer;
+    position: relative;
+    overflow: hidden;
+    color: @dropdown-menu-color;
+
+    &--active {
+      color: @dropdown-menu-active-color;
+    }
+
+    &--disabled {
+      color: @dropdown-menu-disabled-color;
+    }
+  }
+
+  :deep(&__icon) {
+    font-size: @dropdown-menu-icon-size;
+    padding: 4rpx;
+    box-sizing: border-box;
+    transition: transform 240ms ease;
+
+    &--active {
+      transform: rotate(180deg);
+    }
+
+    &:not(:empty) {
+      margin-left: 8rpx;
+    }
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: @dropdown-menu-font-size;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue b/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue
new file mode 100644
index 000000000..666493cb3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue
@@ -0,0 +1,174 @@
+<template>
+  <view
+    id="t-bar"
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+    @touchmove.stop.prevent="parseEventDynamicCode($event, activeIdx === -1 ? '' : 'noop')"
+  >
+    <view
+      v-for="(item, index) in menus"
+      :key="index"
+      :data-index="index"
+      :class="
+        _.cls(classPrefix + '__item', [
+          ['active', activeIdx == index],
+          ['disabled', item.disabled],
+          [index, true]
+        ]) +
+          ' ' +
+          tClassItem
+      "
+      :aria-disabled="item.disabled"
+      aria-role="button"
+      :aria-expanded="activeIdx === index"
+      aria-haspopup="menu"
+      @click="handleToggle(index)"
+    >
+      <view :class="classPrefix + '__title ' + tClassLabel">
+        {{ item.label }}
+      </view>
+
+      <block
+        v-if="_arrowIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_arrowIcon.style || ''"
+          :t-class="getIconTClass(index)"
+          :class="getIconClass(index)"
+          :prefix="_arrowIcon.prefix"
+          :name="_arrowIcon.name"
+          :size="_arrowIcon.size"
+          :color="_arrowIcon.color"
+          :aria-hidden="true"
+          :aria-label="_arrowIcon.ariaLabel"
+          :aria-role="_arrowIcon.ariaRole"
+          @click="_arrowIcon.click || ''"
+        />
+      </block>
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-dropdown-menu`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-item`,
+    `${prefix}-class-label`,
+    `${prefix}-class-icon`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.DropdownItem)],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['close', 'open'],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      menus: null,
+      activeIdx: -1,
+      bottom: 0,
+      _arrowIcon: {
+        name: props.arrowIcon.default,
+      },
+      _,
+    };
+  },
+  watch: {
+    arrowIcon: {
+      handler(v) {
+        this._arrowIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    activeIdx(v) {
+      this.$emit(v === -1 ? 'close' : 'open');
+    },
+  },
+  mounted() {
+    this.getAllItems();
+  },
+  methods: {
+    getIconTClass(index) {
+      return canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    },
+    getIconClass(index) {
+      return !canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    },
+    getIconRealClass(index) {
+      const { classPrefix, activeIdx, tClassIcon } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${activeIdx == index ? 'active ' : ' '}${tClassIcon}`;
+    },
+    parseEventDynamicCode,
+    toggle(index) {
+      const { activeIdx, duration } = this;
+      const prevItem = this.children[activeIdx];
+      const currItem = this.children[index];
+
+      if (currItem?.disabled) return;
+
+      if (activeIdx !== -1) {
+        prevItem.$emit('close');
+        prevItem.show = false;
+
+        setTimeout(() => {
+          prevItem.$emit('closed');
+        }, duration);
+      }
+
+      if (index == null || activeIdx === index) {
+        this.activeIdx = -1;
+      } else {
+        currItem.$emit('open');
+        this.activeIdx = index;
+
+        currItem.show = true;
+
+        setTimeout(() => {
+          currItem.$emit('opened');
+        }, duration);
+      }
+    },
+    getAllItems() {
+      const menus = this.children?.map(data => ({
+        label: data.label || data.computedLabel,
+        disabled: data.disabled,
+      }));
+
+      this.menus = menus;
+    },
+    handleToggle(index) {
+      this.toggle(index);
+    },
+
+    noop() {},
+  },
+});
+</script>
+<style scoped>
+@import './dropdown-menu.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/props.ts b/packages/tdesign-uniapp/components/dropdown-menu/props.ts
new file mode 100644
index 000000000..d23729b07
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/props.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDropdownMenuProps } from './type';
+export default {
+  /** 自定义箭头图标 */
+  arrowIcon: {
+    type: [String, Object],
+    default: 'caret-down-small' as TdDropdownMenuProps['arrowIcon'],
+  },
+  /** 是否在点击遮罩层后关闭菜单 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 动画时长 */
+  duration: {
+    type: [String, Number],
+    default: 200 as TdDropdownMenuProps['duration'],
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 菜单栏 z-index 层级 */
+  zIndex: {
+    type: Number,
+    default: 11600,
+  },
+  /** 菜单关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 菜单展开时触发 */
+  onOpen: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/dropdown-menu/type.ts b/packages/tdesign-uniapp/components/dropdown-menu/type.ts
new file mode 100644
index 000000000..12be3fe41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/dropdown-menu/type.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdDropdownMenuProps {
+  /**
+   * 自定义箭头图标
+   * @default 'caret-down-small'
+   */
+  arrowIcon?: string | object;
+  /**
+   * 是否在点击遮罩层后关闭菜单
+   * @default true
+   */
+  closeOnClickOverlay?: boolean;
+  /**
+   * 动画时长
+   * @default 200
+   */
+  duration?: string | number;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 菜单栏 z-index 层级
+   * @default 11600
+   */
+  zIndex?: number;
+  /**
+   * 菜单关闭时触发
+   */
+  onClose?: () => void;
+  /**
+   * 菜单展开时触发
+   */
+  onOpen?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/empty/README.en-US.md b/packages/tdesign-uniapp/components/empty/README.en-US.md
new file mode 100644
index 000000000..afeb40967
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/README.en-US.md
@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### Empty Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+description | String | - | empty component description | N
+icon | String / Object | - | \- | N
+image | String | - | image url, or Image component props, or custom any node you need | N
+
+### Empty Slots
+
+name | Description
+-- | --
+action | action block
+description | empty component description
+image | image url, or Image component props, or custom any node you need
+
+### Empty External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-description | \-
+t-class-image | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | - 
+--td-empty-description-color | @text-color-placeholder | - 
+--td-empty-description-font-size | @font-size-base | - 
+--td-empty-description-line-height | 44rpx | - 
+--td-empty-description-margin-top | @spacer-2 | - 
+--td-empty-icon-color | @text-color-placeholder | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/empty/README.md b/packages/tdesign-uniapp/components/empty/README.md
new file mode 100644
index 000000000..91203065b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/README.md
@@ -0,0 +1,70 @@
+---
+title: Empty 空状态
+description: 用于空状态时的占位提示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TEmpty from 'tdesign-uniapp/empty/empty.vue';
+```
+
+### 类型
+
+图标空状态
+
+{{ base }}
+
+自定义图片空状态
+
+{{ imageEmpty }}
+
+带操作空状态
+
+{{ buttonEmpty }}
+
+
+
+## API
+
+### Empty Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+description | String | - | 描述文字 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片地址 | N
+
+### Empty Slots
+
+名称 | 描述
+-- | --
+action | 操作按钮
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+
+### Empty External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-empty-action-margin-top | @spacer-4 | - |
+| --td-empty-description-color | @text-color-placeholder | - |
+| --td-empty-description-font-size | @font-size-base | - |
+| --td-empty-description-line-height | 44rpx | - |
+| --td-empty-description-margin-top | @spacer-2 | - |
+| --td-empty-icon-color | @text-color-placeholder | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/empty/_example/base/index.vue b/packages/tdesign-uniapp/components/empty/_example/base/index.vue
new file mode 100644
index 000000000..f6f45aa05
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/base/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <t-empty
+      icon="info-circle-filled"
+      description="描述文字"
+    />
+  </view>
+</template>
+
+<script>
+import tEmpty from 'tdesign-uniapp/empty/empty.vue';
+export default {
+  components: {
+    tEmpty,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/_example/buttonEmpty/index.vue b/packages/tdesign-uniapp/components/empty/_example/buttonEmpty/index.vue
new file mode 100644
index 000000000..668cc7272
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/buttonEmpty/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <view>
+    <t-empty
+      icon="info-circle-filled"
+      description="描述文字"
+    >
+      <template
+        #action
+      >
+        <t-button
+          theme="primary"
+          size="large"
+        >
+          操作按钮
+        </t-button>
+      </template>
+    </t-empty>
+  </view>
+</template>
+
+<script>
+import tEmpty from 'tdesign-uniapp/empty/empty.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  components: {
+    tEmpty,
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/_example/empty.less b/packages/tdesign-uniapp/components/empty/_example/empty.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/empty.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/empty/_example/empty.vue b/packages/tdesign-uniapp/components/empty/_example/empty.vue
new file mode 100644
index 000000000..e6b14ad14
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/empty.vue
@@ -0,0 +1,52 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Empty"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Empty 空状态"
+        desc="用于空状态时的占位提示。"
+      />
+      <t-demo
+        title="01 类型"
+        desc="图标空状态"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="自定义图片空状态">
+        <imageEmpty />
+      </t-demo>
+      <t-demo desc="带操作空状态">
+        <buttonEmpty />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import imageEmpty from './imageEmpty/index.vue';
+import buttonEmpty from './buttonEmpty/index.vue';
+
+
+export default {
+  components: {
+    BaseDemo,
+    imageEmpty,
+    buttonEmpty,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './empty.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/_example/imageEmpty/index.vue b/packages/tdesign-uniapp/components/empty/_example/imageEmpty/index.vue
new file mode 100644
index 000000000..d42c562bf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/imageEmpty/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view>
+    <t-empty
+      t-class="empty-cls"
+      t-class-image="t-empty__image"
+      :image="image"
+      description="描述文字"
+    />
+  </view>
+</template>
+
+<script>
+import tEmpty from 'tdesign-uniapp/empty/empty.vue';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tEmpty,
+  },
+  data() {
+    return {
+      image: 'https://tdesign.gtimg.com/mobile/demos/empty1.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+:deep(.t-empty__image) {
+    width: 240rpx !important;
+    height: 240rpx !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/_example/skyline/empty.less b/packages/tdesign-uniapp/components/empty/_example/skyline/empty.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/skyline/empty.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/empty/_example/skyline/empty.vue b/packages/tdesign-uniapp/components/empty/_example/skyline/empty.vue
new file mode 100644
index 000000000..92404deb3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/_example/skyline/empty.vue
@@ -0,0 +1,66 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Empty"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Empty 空状态
+        </view>
+        <view class="demo-desc">
+          用于空状态时的占位提示。
+        </view>
+        <t-demo
+          title="01 类型"
+          desc="图标空状态"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo desc="自定义图片空状态">
+          <imageEmpty />
+        </t-demo>
+        <t-demo desc="带操作空状态">
+          <buttonEmpty />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import imageEmpty from '../imageEmpty/index.vue';
+import buttonEmpty from '../buttonEmpty/index.vue';
+/*
+ * @Author: shiyanzhang
+ * @Date: 2021-08-24 15:56:07
+ * @Description:
+ * @FilePath: /tdesign-miniprogram/example/pages/empty/empty.ts
+ */
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    imageEmpty,
+    buttonEmpty,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './empty.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/empty.less b/packages/tdesign-uniapp/components/empty/empty.less
new file mode 100644
index 000000000..713f2b99b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/empty.less
@@ -0,0 +1,37 @@
+@import '../common/style/base.less';
+
+@empty-icon-font-size: 192rpx;
+
+@empty-description-color: var(--td-empty-description-color, @text-color-placeholder);
+@empty-icon-color: var(--td-empty-icon-color, @text-color-placeholder);
+@empty-description-font-size: var(--td-empty-description-font-size, @font-size-base);
+@empty-description-line-height: var(--td-empty-description-line-height, 44rpx);
+@empty-description-margin-top: var(--td-empty-description-margin-top, @spacer-2);
+@empty-action-margin-top: var(--td-empty-action-margin-top, @spacer-4);
+
+.@{prefix}-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :deep(&__icon) {
+    font-size: @empty-icon-font-size;
+    color: @empty-icon-color;
+  }
+
+  &__thumb + &__description:not(:empty) {
+    margin-top: @empty-description-margin-top; // 描述内容顶部间距
+  }
+
+  &__description {
+    text-align: center;
+    color: @empty-description-color; // 描述内容颜色
+    font-size: @empty-description-font-size; // 描述内容字体大小
+    line-height: @empty-description-line-height; // 描述内容行高
+    white-space: pre-wrap;
+  }
+
+  &__description + &__actions:not(:empty) {
+    margin-top: @empty-action-margin-top; // 操作内容顶部间距
+  }
+}
diff --git a/packages/tdesign-uniapp/components/empty/empty.vue b/packages/tdesign-uniapp/components/empty/empty.vue
new file mode 100644
index 000000000..11ac3bc88
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/empty.vue
@@ -0,0 +1,140 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      tClass,
+      classPrefix
+    ]"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__thumb'"
+    >
+      <t-image
+        v-if="image"
+        :t-class="tClassImage"
+        :src="image"
+        mode="aspectFit"
+      />
+      <block
+        v-else-if="iconName || _.isNoEmptyObj(iconData)"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="iconData.style || ''"
+          :t-class="iconTClass"
+          :class="iconClass"
+          :prefix="iconData.prefix"
+          :name="iconName || iconData.name"
+          :size="iconData.size"
+          :color="iconData.color"
+          :aria-hidden="!!iconData.ariaHidden"
+          :aria-label="iconData.ariaLabel"
+          :aria-role="iconData.ariaRole"
+        />
+      </block>
+      <slot
+        v-else
+        name="image"
+      />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__description ',
+        tClassDescription
+      ]"
+    >
+      <block v-if="description">
+        {{ description }}
+      </block>
+      <slot name="description" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__actions ',
+        tClassActions
+      ]"
+    >
+      <slot name="action" />
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { setIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-empty`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-description`,
+    `${prefix}-class-image`,
+    `${prefix}-class-actions`,
+  ],
+  components: {
+    tIcon,
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+
+      iconName: '',
+      iconData: {},
+
+      _,
+    };
+  },
+  computed: {
+    iconTClass() {
+      return canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconClass() {
+      return !canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconRealClass() {
+      const { classPrefix, iconData } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${iconData.activeIdx == iconData.index ? 'active ' : ' '}`;
+    },
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+@import './empty.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/empty/props.ts b/packages/tdesign-uniapp/components/empty/props.ts
new file mode 100644
index 000000000..3baf4046a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/props.ts
@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 描述文字 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/empty/type.ts b/packages/tdesign-uniapp/components/empty/type.ts
new file mode 100644
index 000000000..d63f87317
--- /dev/null
+++ b/packages/tdesign-uniapp/components/empty/type.ts
@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdEmptyProps {
+  /**
+   * 描述文字
+   */
+  description?: string;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片地址
+   */
+  image?: string;
+}
diff --git a/packages/tdesign-uniapp/components/fab/README.en-US.md b/packages/tdesign-uniapp/components/fab/README.en-US.md
new file mode 100644
index 000000000..35101313e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/README.en-US.md
@@ -0,0 +1,37 @@
+:: BASE_DOC ::
+
+## API
+
+### Fab Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/fab/type.ts) | N
+draggable | String / Boolean | false | Typescript：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/fab/type.ts) | N
+icon | String | - | \- | N
+style | String | right: 16px; bottom: 32px; | \- | N
+text | String | - | \- | N
+using-custom-navbar | Boolean | false | \- | N
+y-bounds | Array | - | Typescript：`Array<string \| number>` | N
+
+### Fab Events
+
+name | params | description
+-- | -- | --
+click | `(context: {e: Event})` | \-
+drag-end | `(context: { e: TouchEvent })` | \-
+drag-start | `(context: { e: TouchEvent })` | \-
+
+### Fab Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-fab-shadow | @shadow-2 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/fab/README.md b/packages/tdesign-uniapp/components/fab/README.md
new file mode 100644
index 000000000..47aa4ec3a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/README.md
@@ -0,0 +1,81 @@
+---
+title: Fab 悬浮按钮
+description: 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TFab from 'tdesign-uniapp/fab/fab.vue';
+```
+
+### 基础使用
+
+{{ base }}
+
+### 进阶使用
+
+{{ advance }}
+
+### 可移动悬浮按钮
+
+{{ draggable }}
+
+### 带自动收缩功能
+
+{{ collapsible }}
+
+## FAQ
+
+### 为什么通过 style/customStyle 设置 top/left 调整初试定位后，会使页面内容无法点击以及拖拽异常？
+
+由于 `position: fixed;` 会使得元素脱离文档流，它将悬浮于页面上方。同时，元素没有设置宽高，当同时使用 `top`、`right`、`bottom` 和 `left` 属性时，浏览器会根据给定的 `top`、`right`、`bottom` 和 `left` 创建一个矩形框来容纳元素及其内容，所以会出现元素覆盖页面内容及拖拽异常等问题。
+
+Fab 组件默认定位 `right: 16px; bottom: 32px;`，且拖拽功能也是通过调整 `right` 与 `bottom` 属性值实现，因此在使用 `Fab` 组件时，仅支持通过 `style/customStyle` 属性设置 `right/bottom` 来调整初试位置， 避免使用 `top/left`。
+
+### 开启 Skyline 渲染引擎后，组件所在页面崩溃？
+
+因为 Skyline 还不支持多层阴影，要等微信官方处理。当下可参考 [#2865](https://github.com/Tencent/tdesign-miniprogram/issues/2865) 进行规避处理
+
+
+## API
+
+### Fab Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+button-props | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/fab/type.ts) | N
+draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/fab/type.ts) | N
+icon | String | - | 图标 | N
+style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） | N
+text | String | - | 文本内容 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+y-bounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]。TS 类型：`Array<string \| number>` | N
+
+### Fab Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: {e: Event})` | 悬浮按钮点击事件
+drag-end | `(context: { e: TouchEvent })` | 结束拖拽时触发
+drag-start | `(context: { e: TouchEvent })` | 开始拖拽时触发
+
+### Fab Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，按钮内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-fab-shadow | @shadow-2 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/fab/_example/advance/index.vue b/packages/tdesign-uniapp/components/fab/_example/advance/index.vue
new file mode 100644
index 000000000..d40597c8a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/advance/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view>
+    <t-fab
+      icon="add"
+      :button-props="fabButton"
+      text="分享给朋友"
+      @click="handleClick"
+    />
+  </view>
+</template>
+
+<script>
+import tFab from 'tdesign-uniapp/fab/fab.vue';
+export default {
+  components: {
+    tFab,
+  },
+  data() {
+    return {
+      fabButton: {
+        icon: 'share',
+        openType: 'share',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+/* @import './index.css'; */
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/_example/base/index.vue b/packages/tdesign-uniapp/components/fab/_example/base/index.vue
new file mode 100644
index 000000000..b473e8cd5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/base/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <view>
+    <t-fab
+      icon="add"
+      aria-label="增加"
+      @click="handleClick"
+    />
+  </view>
+</template>
+
+<script>
+import tFab from 'tdesign-uniapp/fab/fab.vue';
+export default {
+  components: {
+    tFab,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleClick(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
diff --git a/packages/tdesign-uniapp/components/fab/_example/collapsible/index.vue b/packages/tdesign-uniapp/components/fab/_example/collapsible/index.vue
new file mode 100644
index 000000000..e0b671faf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/collapsible/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <view>
+    <t-fab
+      :custom-style="scrolling ? 'right: 0;bottom:64px;' : 'right:16px; bottom:24px'"
+      @click="handleClick"
+      @dragstart="handleDragStart"
+      @dragend="handleDragEnd"
+    >
+      <view
+        v-if="!scrolling"
+        class="wrap"
+      >
+        <view class="item">
+          <t-icon
+            name="add-circle"
+            size="20"
+          />
+          <view class="text">
+            添加
+          </view>
+        </view>
+        <view class="item">
+          <t-icon
+            name="star"
+            size="20"
+          />
+          <view class="text">
+            收藏
+          </view>
+        </view>
+        <view class="item">
+          <t-icon
+            name="jump"
+            size="20"
+          />
+          <view class="text">
+            分享
+          </view>
+        </view>
+      </view>
+      <view
+        v-else
+        class="symbol"
+      >
+        <t-icon
+          name="chevron-left"
+          size="20"
+        />
+      </view>
+    </t-fab>
+  </view>
+</template>
+
+<script>
+import tFab from 'tdesign-uniapp/fab/fab.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import pageScrollMixin from 'tdesign-uniapp/mixins/page-scroll';
+
+
+export default {
+  components: {
+    tFab,
+    tIcon,
+  },
+  mixins: [pageScrollMixin()],
+  data() {
+    return {
+      scrolling: false,
+      timer: null,
+    };
+  },
+  methods: {
+    handleClick(e) {
+      console.log('handleClick: ', e);
+    },
+    handleDragStart(e) {
+      console.log('handleDragStart: ', e);
+    },
+    handleDragEnd(e) {
+      console.log('handleDragEnd: ', e);
+    },
+    onScroll() {
+      clearTimeout(this.timer);
+      this.scrolling = true,
+      this.timer = setTimeout(() => {
+        this.scrolling = false;
+      }, 100);
+    },
+  },
+};
+</script>
+<style>
+.wrap {
+    border: 1px solid #dcdcdc;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding: 8px 0;
+    border-radius: 22px;
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
+    background: rgba(255, 255, 255, 1);
+    width: 44px;
+    height: 156px;
+    box-sizing: border-box;
+}
+
+.item {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.9);
+    cursor: pointer;
+}
+
+.item:not(:last-child) {
+    margin-bottom: 4px;
+}
+
+.text {
+    height: 20px;
+    line-height: 20px;
+}
+
+.symbol {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px 0 0 16px;
+    background: #fff;
+
+    border: 1px solid #dcdcdc;
+    border-right: 0;
+    box-shadow: 0px 5px 5px -3px #0000001a, 0px 8px 10px 1px #0000000f, 0px 3px 14px 2px #0000000d;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/_example/draggable/index.vue b/packages/tdesign-uniapp/components/fab/_example/draggable/index.vue
new file mode 100644
index 000000000..3b0e4311a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/draggable/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <view>
+    <t-fab
+      icon="gesture-press"
+      text="拖我"
+      aria-label="增加"
+      :using-custom-navbar="!isMPAlipay"
+      draggable
+      :y-bounds="[0, 32]"
+      @click="handleClick"
+      @drag-start="handleDragStart"
+      @drag-end="handleDragEnd"
+    />
+  </view>
+</template>
+
+<script>
+import tFab from 'tdesign-uniapp/fab/fab.vue';
+export default {
+  components: {
+    tFab,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleClick(e) {
+      console.log('handleClick: ', e);
+    },
+    handleDragStart(e) {
+      console.log('handleDragStart: ', e);
+    },
+    handleDragEnd(e) {
+      console.log('handleDragEnd: ', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/_example/fab.less b/packages/tdesign-uniapp/components/fab/_example/fab.less
new file mode 100644
index 000000000..0252c69e6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/fab.less
@@ -0,0 +1,14 @@
+page {
+    background-color: var(--td-bg-color-container);
+    padding-bottom: 16rpx;
+}
+
+.wrapper {
+    padding: 0 32rpx;
+}
+
+.skeleton-group {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/fab/_example/fab.vue b/packages/tdesign-uniapp/components/fab/_example/fab.vue
new file mode 100644
index 000000000..ac3a51f47
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/fab.vue
@@ -0,0 +1,153 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Fab"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="Fab 悬浮按钮"
+      desc="当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。"
+      notice="渲染框架支持情况：Skyline、WebView"
+    />
+    <t-demo
+      title="01 组件类型"
+      desc="纯图标悬浮按钮"
+    >
+      <view class="wrapper">
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-type="base"
+          @click="handleChange($event, { type: 'base' })"
+        >
+          纯图标悬浮按钮
+        </t-button>
+      </view>
+    </t-demo>
+    <t-demo desc="图标加文字悬浮按钮">
+      <view class="wrapper">
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-type="advance"
+          @click="handleChange($event, { type: 'advance' })"
+        >
+          图标加文字悬浮按钮
+        </t-button>
+      </view>
+    </t-demo>
+    <t-demo
+      title="02 组件样式"
+      desc="可移动悬浮按钮"
+    >
+      <view class="wrapper">
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-type="draggable"
+          @click="handleChange($event, { type: 'draggable' })"
+        >
+          可移动悬浮按钮
+        </t-button>
+      </view>
+    </t-demo>
+    <t-demo desc="带自动收缩功能">
+      <view class="wrapper">
+        <t-button
+          theme="primary"
+          size="large"
+          block
+          variant="outline"
+          data-type="collapsible"
+          @click="handleChange($event, { type: 'collapsible' })"
+        >
+          带自动收缩功能
+        </t-button>
+      </view>
+    </t-demo>
+    <t-demo padding>
+      <view class="skeleton-group">
+        <t-skeleton
+          :row-col="rowCol"
+          loading
+        />
+        <t-skeleton
+          :row-col="rowCol"
+          loading
+        />
+      </view>
+      <view class="skeleton-group">
+        <t-skeleton
+          :row-col="rowCol"
+          loading
+        />
+        <t-skeleton
+          :row-col="rowCol"
+          loading
+        />
+      </view>
+    </t-demo>
+
+    <BaseDemo v-if="type == 'base'" />
+    <advance v-else-if="type == 'advance'" />
+    <draggable v-else-if="type == 'draggable'" />
+    <collapsible v-else-if="type == 'collapsible'" />
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import BaseDemo from './base/index.vue';
+import advance from './advance/index.vue';
+import draggable from './draggable/index.vue';
+import collapsible from './collapsible/index.vue';
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+export default {
+  components: {
+    tButton,
+    tSkeleton,
+    BaseDemo,
+    advance,
+    draggable,
+    collapsible,
+  },
+  data() {
+    return {
+      type: 'base',
+      rowCol: [
+        {
+          size: '327rpx',
+          borderRadius: '24rpx',
+        },
+        1,
+        {
+          width: '61%',
+        },
+      ],
+    };
+  },
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+  methods: {
+    handleChange(e: any, _dataset) {
+      this.type = _dataset.type;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './fab.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/_example/skyline/fab.less b/packages/tdesign-uniapp/components/fab/_example/skyline/fab.less
new file mode 100644
index 000000000..62b8166b2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/skyline/fab.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.wrapper {
+    padding: 0 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/fab/_example/skyline/fab.vue b/packages/tdesign-uniapp/components/fab/_example/skyline/fab.vue
new file mode 100644
index 000000000..1886a1b76
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/_example/skyline/fab.vue
@@ -0,0 +1,106 @@
+<template>
+  <view>
+    <view class="skyline">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        title="Fab"
+        left-arrow
+      />
+      <!-- #endif -->
+      <scroll-view
+        scroll-y
+        type="list"
+        class="scroll-view"
+      >
+        <view class="demo">
+          <view class="demo-title">
+            Fab 悬浮按钮
+          </view>
+          <view class="demo-desc">
+            当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布
+          </view>
+          <t-demo
+            title="01 组件类型"
+            desc="纯图标悬浮按钮"
+          >
+            <view class="wrapper">
+              <t-button
+                theme="primary"
+                size="large"
+                block
+                variant="outline"
+                data-type="base"
+                @click="handleChange($event, { type: 'base' })"
+              >
+                纯图标悬浮按钮
+              </t-button>
+            </view>
+          </t-demo>
+          <t-demo desc="图标加文字悬浮按钮">
+            <view class="wrapper">
+              <t-button
+                theme="primary"
+                size="large"
+                block
+                variant="outline"
+                data-type="advance"
+                @click="handleChange($event, { type: 'advance' })"
+              >
+                图标加文字悬浮按钮
+              </t-button>
+            </view>
+          </t-demo>
+          <t-demo desc="可移动悬浮按钮">
+            <view class="wrapper">
+              <t-button
+                theme="primary"
+                size="large"
+                block
+                variant="outline"
+                data-type="movable"
+                @click="handleChange($event, { type: 'movable' })"
+              >
+                可移动悬浮按钮
+              </t-button>
+            </view>
+          </t-demo>
+        </view>
+      </scroll-view>
+    </view>
+
+    <baseDemo v-if="type == 'base'" />
+    <advance v-else-if="type == 'advance'" />
+    <draggable v-else />
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import baseDemo from '../base/index.vue';
+import advance from '../advance/index.vue';
+import draggable from '../draggable/index.vue';
+export default {
+  components: {
+    tNavbar,
+    tButton,
+    baseDemo,
+    advance,
+    draggable,
+  },
+  data() {
+    return {
+      type: 'base',
+    };
+  },
+  methods: {
+    handleChange(e, { type }) {
+      this.type = type;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './fab.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/fab.less b/packages/tdesign-uniapp/components/fab/fab.less
new file mode 100644
index 000000000..a32be69b5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/fab.less
@@ -0,0 +1,15 @@
+@import '../common/style/base.less';
+
+@fab-shadow: var(--td-fab-shadow, @shadow-2);
+
+.@{prefix}-fab {
+  position: fixed;
+
+  &__button {
+    box-shadow: @fab-shadow;
+  }
+
+  &__draggable {
+    position: fixed;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/fab/fab.vue b/packages/tdesign-uniapp/components/fab/fab.vue
new file mode 100644
index 000000000..1a0c6628e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/fab.vue
@@ -0,0 +1,239 @@
+<template>
+  <t-draggable
+    v-if="draggable"
+    id="draggable"
+    ref="draggable"
+    :custom-style="_._style(['right: 16px; bottom: 32px;', customStyle, moveStyle])"
+    :direction="draggable === true ? 'all' : draggable"
+    :t-class="tClass"
+    @start="onStart"
+    @move="onMove"
+    @end="onEnd"
+  >
+    <slot v-if="!buttonData.content && !buttonData.icon" />
+    <block
+      v-else
+      name="button"
+    >
+      <t-button
+        :t-id="buttonData.tId"
+        :custom-style="buttonData.style || ''"
+        :block="buttonData.block"
+        :class="getActionClass(classPrefix, buttonData.buttonLayout) || ''"
+        :t-class="buttonData.tClass"
+        :disabled="buttonData.disabled"
+        :data-type="'action'"
+        :data-extra="buttonData.index"
+        :custom-dataset="buttonData.customDataset"
+        :content="buttonData.content"
+        :icon="buttonData.icon"
+        :loading="buttonData.loading"
+        :loading-props="buttonData.loadingProps"
+        :theme="buttonData.theme"
+        :ghost="buttonData.ghost"
+        :shape="buttonData.shape"
+        :size="buttonData.size"
+        :variant="buttonData.variant"
+        :open-type="buttonData.openType"
+        :hover-class="buttonData.hoverClass"
+        :hover-stop-propagation="buttonData.hoverStopPropagation"
+        :hover-start-time="buttonData.hoverStartTime"
+        :hover-stay-time="buttonData.hoverStayTime"
+        :lang="buttonData.lang"
+        :session-from="buttonData.sessionFrom"
+        :send-message-title="buttonData.sendMessageTitle"
+        :send-message-path="buttonData.sendMessagePath"
+        :send-message-img="buttonData.sendMessageImg"
+        :app-parameter="buttonData.appParameter"
+        :show-message-card="buttonData.showMessageCard"
+        :aria-label="buttonData.ariaLabel"
+        @click="onTplButtonTap"
+        @getuserinfo="onTplButtonTap"
+        @contact="onTplButtonTap"
+        @getphonenumber="onTplButtonTap"
+        @error="onTplButtonTap"
+        @opensetting="onTplButtonTap"
+        @launchapp="onTplButtonTap"
+        @agreeprivacyauthorization="onTplButtonTap"
+      >
+        <slot v-if="true || false" />
+      </t-button>
+    </block>
+  </t-draggable>
+
+  <view
+    v-else
+    :class="[classPrefix, tClass]"
+    :style="_._style(['right: 16px; bottom: 32px;', customStyle])"
+  >
+    <slot v-if="!buttonData?.content && !buttonData?.icon" />
+    <t-button
+      v-else
+      :t-id="buttonData.tId"
+      :custom-style="buttonData.style || ''"
+      :block="buttonData.block"
+      :class="getActionClass(classPrefix, buttonData.buttonLayout) || ''"
+      :t-class="buttonData.tClass"
+      :disabled="buttonData.disabled"
+      :data-type="'action'"
+      :data-extra="buttonData.index"
+      :custom-dataset="buttonData.customDataset"
+      :content="buttonData.content"
+      :icon="buttonData.icon"
+      :loading="buttonData.loading"
+      :loading-props="buttonData.loadingProps"
+      :theme="buttonData.theme"
+      :ghost="buttonData.ghost"
+      :shape="buttonData.shape"
+      :size="buttonData.size"
+      :variant="buttonData.variant"
+      :open-type="buttonData.openType"
+      :hover-class="buttonData.hoverClass"
+      :hover-stop-propagation="buttonData.hoverStopPropagation"
+      :hover-start-time="buttonData.hoverStartTime"
+      :hover-stay-time="buttonData.hoverStayTime"
+      :lang="buttonData.lang"
+      :session-from="buttonData.sessionFrom"
+      :send-message-title="buttonData.sendMessageTitle"
+      :send-message-path="buttonData.sendMessagePath"
+      :send-message-img="buttonData.sendMessageImg"
+      :app-parameter="buttonData.appParameter"
+      :show-message-card="buttonData.showMessageCard"
+      :aria-label="buttonData.ariaLabel"
+      @click="onTplButtonTap"
+      @getuserinfo="onTplButtonTap"
+      @contact="onTplButtonTap"
+      @getphonenumber="onTplButtonTap"
+      @error="onTplButtonTap"
+      @opensetting="onTplButtonTap"
+      @launchapp="onTplButtonTap"
+      @agreeprivacyauthorization="onTplButtonTap"
+    >
+      <slot />
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tButton from '../button/button';
+import TDraggable from '../draggable/draggable.vue';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import { unitConvert, getWindowInfo } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+const name = `${prefix}-fab`;
+
+const baseButtonProps = {
+  size: 'large',
+  shape: 'circle',
+  theme: 'primary',
+  tClass: `${prefix}-fab__button`,
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`, `${prefix}-class-button`],
+  mixins: [useCustomNavbar],
+  components: {
+    tButton,
+    TDraggable,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'move',
+    'start',
+    'end',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      moveStyle: null,
+      _,
+      systemInfo: getWindowInfo(),
+    };
+  },
+  computed: {
+    buttonData() {
+      return {
+        ...baseButtonProps,
+        shape: this.text ? 'round' : 'circle',
+        ...this.buttonProps,
+        icon: this.icon,
+        content: this.text,
+        ariaLabel: this.ariaLabel,
+      };
+    },
+  },
+  watch: {
+    icon: 'computedSize',
+    ariaLabel: 'computedSize',
+    yBounds: 'computedSize',
+    buttonProps: 'computedSize',
+    text: {
+      handler(val) {
+        this.content = val;
+        this.computedSize();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onTplButtonTap(e) {
+      this.$emit('click', { e  });
+    },
+    onStart(t) {
+      this.$emit('drag-start', t);
+    },
+    onMove(e) {
+      const {
+        yBounds,
+        distanceTop,
+        systemInfo,
+      } = this;
+
+      const { x, y, rect } = e;
+      const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度
+      const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yBounds[0])) - rect.height; // 父容器高度 - 拖动元素高度
+      const right = Math.max(0, Math.min(x, maxX));
+      const bottom = Math.max(0, unitConvert(yBounds[1]), Math.min(y, maxY));
+
+
+      this.moveStyle = `right: ${right}px; bottom: ${bottom}px;`;
+    },
+    onEnd(t) {
+      this.$emit('drag-end', t);
+    },
+    computedSize() {
+      if (!this.draggable) return;
+
+      setTimeout(() => {
+        const insChild = this.$refs.draggableTemplate?.$refs?.draggable;
+
+
+        // button 更新时，重新获取其尺寸
+        if (this?.yBounds?.[1]) {
+          this.moveStyle = `bottom: ${unitConvert(this.yBounds[1])}px`;
+          insChild?.computedRect();
+        } else {
+          insChild?.computedRect();
+        }
+      });
+    },
+    getActionClass(a, b) {
+      return `${a}-${b}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './fab.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/fab/props.ts b/packages/tdesign-uniapp/components/fab/props.ts
new file mode 100644
index 000000000..ffc95a74c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/props.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFabProps } from './type';
+export default {
+  /** 透传至 Button 组件 */
+  buttonProps: {
+    type: Object,
+  },
+  /** 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 */
+  draggable: {
+    type: [String, Boolean],
+    default: false as TdFabProps['draggable'],
+  },
+  /** 图标 */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /** 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） */
+  style: {
+    type: String,
+    default: 'right: 16px; bottom: 32px;',
+  },
+  /** 文本内容 */
+  text: {
+    type: String,
+    default: '',
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80] */
+  yBounds: {
+    type: Array,
+  },
+  /** 悬浮按钮点击事件 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 结束拖拽时触发 */
+  onDragEnd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 开始拖拽时触发 */
+  onDragStart: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/fab/type.ts b/packages/tdesign-uniapp/components/fab/type.ts
new file mode 100644
index 000000000..856fe7637
--- /dev/null
+++ b/packages/tdesign-uniapp/components/fab/type.ts
@@ -0,0 +1,57 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+
+export interface TdFabProps {
+  /**
+   * 透传至 Button 组件
+   */
+  buttonProps?: ButtonProps;
+  /**
+   * 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动
+   * @default false
+   */
+  draggable?: boolean | FabDirectionEnum;
+  /**
+   * 图标
+   * @default ''
+   */
+  icon?: string;
+  /**
+   * 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`）
+   * @default right: 16px; bottom: 32px;
+   */
+  style?: string;
+  /**
+   * 文本内容
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]
+   */
+  yBounds?: Array<string | number>;
+  /**
+   * 悬浮按钮点击事件
+   */
+  onClick?: (context: { e: Event }) => void;
+  /**
+   * 结束拖拽时触发
+   */
+  onDragEnd?: (context: { e: TouchEvent }) => void;
+  /**
+   * 开始拖拽时触发
+   */
+  onDragStart?: (context: { e: TouchEvent }) => void;
+}
+
+export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';
diff --git a/packages/tdesign-uniapp/components/footer/README.en-US.md b/packages/tdesign-uniapp/components/footer/README.en-US.md
new file mode 100644
index 000000000..51b63fe6e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/README.en-US.md
@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+
+### Footer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+copyright | String | '' | `deprecated` | N
+links | Array | [] | Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+logo | Object | - | Typescript：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+text | String | '' | \- | N
+text-link-list | Array | [] | `deprecated`。Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+theme | String | 'text' | `deprecated`。options: text/logo | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-footer-link-color | @brand-color | - 
+--td-footer-link-dividing-line-color | @text-color-placeholder | - 
+--td-footer-link-dividing-line-padding | @spacer-1 | - 
+--td-footer-link-font-size | @font-size-s | - 
+--td-footer-link-line-height | 40rpx | - 
+--td-footer-logo-icon-height | 48rpx | - 
+--td-footer-logo-icon-margin-right | @spacer | - 
+--td-footer-logo-icon-width | 48rpx | - 
+--td-footer-logo-title-font-size | @font-size-m | - 
+--td-footer-logo-title-line-height | 48rpx | - 
+--td-footer-logo-title-url-width | 256rpx | - 
+--td-footer-text-color | @text-color-placeholder | - 
+--td-footer-text-font-size | @font-size-s | - 
+--td-footer-text-line-height | 40rpx | - 
+--td-footer-text-margin-top | 8rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/footer/README.md b/packages/tdesign-uniapp/components/footer/README.md
new file mode 100644
index 000000000..9b4806457
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/README.md
@@ -0,0 +1,64 @@
+---
+title: Footer 页脚
+description: 用于基础列表展示，可附带文字、品牌 logo、操作，常用商详、个人中心、设置等页面。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TFooter from 'tdesign-uniapp/footer/footer.vue';
+```
+
+### 类型
+
+基础页脚
+
+{{ base }}
+
+基础加链接页脚
+
+{{ link }}
+
+品牌页脚
+
+{{ logo }}
+
+## API
+
+### Footer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+copyright | String | '' | 已废弃。版权信息，type 为`text`生效 | N
+links | Array | [] | 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接。TS 类型：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+text | String | '' | 版权信息 | N
+text-link-list | Array | [] | 已废弃。链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/footer/type.ts) | N
+theme | String | 'text' | 已废弃。页脚展示类型。可选项：text/logo | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-footer-link-color | @brand-color | - |
+| --td-footer-link-dividing-line-color | @text-color-placeholder | - |
+| --td-footer-link-dividing-line-padding | @spacer-1 | - |
+| --td-footer-link-font-size | @font-size-s | - |
+| --td-footer-link-line-height | 40rpx | - |
+| --td-footer-logo-icon-height | 48rpx | - |
+| --td-footer-logo-icon-margin-right | @spacer | - |
+| --td-footer-logo-icon-width | 48rpx | - |
+| --td-footer-logo-title-font-size | @font-size-m | - |
+| --td-footer-logo-title-line-height | 48rpx | - |
+| --td-footer-logo-title-url-width | 256rpx | - |
+| --td-footer-text-color | @text-color-placeholder | - |
+| --td-footer-text-font-size | @font-size-s | - |
+| --td-footer-text-line-height | 40rpx | - |
+| --td-footer-text-margin-top | 8rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/footer/_example/base/index.vue b/packages/tdesign-uniapp/components/footer/_example/base/index.vue
new file mode 100644
index 000000000..48dcb82bb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/base/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <!-- 基础页脚 只有版权信息 -->
+    <t-footer :text="text" />
+  </view>
+</template>
+
+<script>
+import tFooter from 'tdesign-uniapp/footer/footer.vue';
+export default {
+  components: {
+    tFooter,
+  },
+  data() {
+    return {
+      text: 'Copyright © 2021-2031 TD.All Rights Reserved.',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/_example/footer.less b/packages/tdesign-uniapp/components/footer/_example/footer.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/footer.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/footer/_example/footer.vue b/packages/tdesign-uniapp/components/footer/_example/footer.vue
new file mode 100644
index 000000000..341e3475c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/footer.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Footer"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="Footer 页脚"
+      desc="用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。"
+      notice="渲染框架支持情况：Skyline、WebView"
+    />
+    <t-demo
+      title="01 类型"
+      desc="基础页脚"
+    >
+      <BaseDemo />
+    </t-demo>
+    <t-demo desc="基础加链接页脚">
+      <LinkDemo />
+    </t-demo>
+    <t-demo desc="品牌页脚">
+      <LogoDemo />
+    </t-demo>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import LinkDemo from './link/index.vue';
+import LogoDemo from './logo/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    LinkDemo,
+    LogoDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './footer.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/_example/link/index.vue b/packages/tdesign-uniapp/components/footer/_example/link/index.vue
new file mode 100644
index 000000000..715cfd5b9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/link/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <!-- theme 为 text，含有底部链接 -->
+    <view class="footer-example">
+      <t-footer
+        :text="text"
+        :links="links[0]"
+      />
+    </view>
+
+    <view class="footer-example">
+      <t-footer
+        :text="text"
+        :links="links[1]"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tFooter from 'tdesign-uniapp/footer/footer.vue';
+export default {
+  components: {
+    tFooter,
+  },
+  data() {
+    return {
+      text: 'Copyright © 2021-2031 TD.All Rights Reserved.',
+      links: [[{
+        name: '底部链接',
+        url: '/pages/home/home',
+        openType: 'navigate',
+      }], [{
+        name: '底部链接',
+        url: '/pages/home/home',
+        openType: 'navigate',
+      }, {
+        name: '底部链接',
+        url: '',
+        openType: 'navigateBack',
+      }]],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.footer-example {
+  padding: 8rpx 0;
+}
+
+.footer-example:not(:last-child) {
+  margin-bottom: 32rpx;
+}
+
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/_example/logo/index.vue b/packages/tdesign-uniapp/components/footer/_example/logo/index.vue
new file mode 100644
index 000000000..f9c88100a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/logo/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view>
+    <!-- theme 为 logo -->
+    <view class="footer-example">
+      <t-footer :logo="logo" />
+    </view>
+
+    <view class="footer-example">
+      <t-footer
+        :logo="{url:
+          theme === 'dark'
+            ? 'https://tdesign.gtimg.com/mobile/demos/footer-logo-dark.png'
+            : 'https://tdesign.gtimg.com/mobile/demos/logo1.png'
+        } "
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import tFooter from 'tdesign-uniapp/footer/footer.vue';
+import { ref } from 'vue';
+import { useTheme } from 'tdesign-uniapp/mixins/theme-change';
+
+const logo = ref({
+  icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
+  title: '品牌名称',
+});
+const { theme } = useTheme();
+
+</script>
+<style>
+.footer-example {
+    padding: 8rpx 0;
+}
+
+.footer-example:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/_example/skyline/footer.less b/packages/tdesign-uniapp/components/footer/_example/skyline/footer.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/skyline/footer.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/footer/_example/skyline/footer.vue b/packages/tdesign-uniapp/components/footer/_example/skyline/footer.vue
new file mode 100644
index 000000000..78ece799a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/_example/skyline/footer.vue
@@ -0,0 +1,58 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block demo-navbar"
+      title="Footer"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        Footer 页脚
+      </view>
+      <view class="demo-desc">
+        用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。
+      </view>
+      <t-demo
+        title="01 类型"
+        desc="基础页脚"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="基础加链接页脚">
+        <LinkDemo />
+      </t-demo>
+      <t-demo desc="品牌页脚">
+        <LogoDemo />
+      </t-demo>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import BaseDemo from '../base/index.vue';
+import LinkDemo from '../link/index.vue';
+import LogoDemo from '../logo/index.vue';
+export default {
+  components: {
+    tNavbar,
+    BaseDemo,
+    LinkDemo,
+    LogoDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './footer.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/footer.less b/packages/tdesign-uniapp/components/footer/footer.less
new file mode 100644
index 000000000..a9c6a47a6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/footer.less
@@ -0,0 +1,79 @@
+@import '../common/style/base.less';
+
+@footer-text-color: var(--td-footer-text-color, @text-color-placeholder);
+@footer-text-font-size: var(--td-footer-text-font-size, @font-size-s);
+@footer-text-line-height: var(--td-footer-text-line-height, 40rpx);
+@footer-text-margin-top: var(--td-footer-text-margin-top, 8rpx);
+@footer-link-color: var(--td-footer-link-color, @brand-color);
+@footer-link-font-size: var(--td-footer-link-font-size, @font-size-s);
+@footer-link-line-height: var(--td-footer-link-line-height, 40rpx);
+
+@footer-link-dividing-line-padding: var(--td-footer-link-dividing-line-padding, @spacer-1);
+@footer-link-dividing-line-color: var(--td-footer-link-dividing-line-color, @text-color-placeholder);
+@footer-logo-icon-width: var(--td-footer-logo-icon-width, 48rpx);
+@footer-logo-icon-height: var(--td-footer-logo-icon-height, 48rpx);
+@footer-logo-icon-margin-right: var(--td-footer-logo-icon-margin-right, @spacer);
+@footer-logo-title-font-size: var(--td-footer-logo-title-font-size, @font-size-m);
+@footer-logo-title-url-width: var(--td-footer-logo-title-url-width, 256rpx);
+@footer-logo-title-line-height: var(--td-footer-logo-title-line-height, 48rpx);
+
+.@{prefix}-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  &__text {
+    font-size: @footer-text-font-size; // 版权信息文本大小
+    line-height: @footer-text-line-height; // 版权信息文本行高
+    color: @footer-text-color; // 版权信息文本颜色
+  }
+
+  &__link-list + &__text:not(:empty) {
+    margin-top: @footer-text-margin-top; // 版权信息顶部间距
+  }
+
+  &__link-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__link-item {
+    color: @footer-link-color; // 链接文本颜色
+    font-size: @footer-link-font-size; // 链接文本大小
+    line-height: @footer-link-line-height; // 链接文本行高
+    text-decoration: underline;
+  }
+
+  &__link-line {
+    font-size: 24rpx;
+    color: @footer-link-dividing-line-color; // 链接分界线颜色
+    display: inline-block;
+    padding: 0 @footer-link-dividing-line-padding; // 链接分界线左右间距
+  }
+
+  &__logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  // :deep(&__icon) {
+  //   width: @footer-logo-icon-width; // 图标宽度
+  //   height: @footer-logo-icon-height; // 图标高度
+  //   margin-right: @footer-logo-icon-margin-right; // 图标右部间距
+  // }
+
+  &__title {
+    color: @text-color-primary;
+    font-weight: bold;
+    font-size: @footer-logo-title-font-size; // 图标配置，标题文本大小
+    line-height: @footer-logo-title-line-height; // 图标配置，标题文本行高
+    font-style: italic;
+  }
+
+  // :deep(&__title-url) {
+  //   width: @footer-logo-title-url-width; // 图标配置，链接跳转地址宽度
+  // }
+}
diff --git a/packages/tdesign-uniapp/components/footer/footer.vue b/packages/tdesign-uniapp/components/footer/footer.vue
new file mode 100644
index 000000000..850efd2e2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/footer.vue
@@ -0,0 +1,117 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      classPrefix,
+      tClass
+    ]"
+  >
+    <block v-if="logo && Object.keys(logo).length">
+      <view :class="classPrefix + '__logo'">
+        <t-image
+          v-if="logo.icon"
+          :t-class="classPrefix + '__icon'"
+          :custom-style="iconCustomStyle"
+          :src="logo.icon"
+        />
+        <view
+          v-if="logo.title"
+          :class="classPrefix + '__title'"
+        >
+          {{ logo.title }}
+        </view>
+        <t-image
+          v-else-if="logo.url"
+          :t-class="classPrefix + '__title-url'"
+          :custom-style="titleUrlCustomStyle"
+          :src="logo.url"
+          mode="widthFix"
+        />
+      </view>
+    </block>
+    <block v-else>
+      <view
+        v-if="links.length > 0"
+        :class="classPrefix + '__link-list'"
+      >
+        <block
+          v-for="(item, index) in links"
+          :key="index"
+        >
+          <navigator
+            :url="item.url"
+            :open-type="item.openType"
+            hover-class="none"
+            :class="classPrefix + '__link-item'"
+          >
+            {{ item.name }}
+          </navigator>
+
+          <view
+            v-if="index !== links.length - 1"
+            :aria-hidden="true"
+            :class="classPrefix + '__link-line'"
+          >
+            |
+          </view>
+        </block>
+      </view>
+      <view :class="classPrefix + '__text'">
+        {{ text }}
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-footer`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      return _._style({
+        width: 'var(--td-footer-logo-icon-width, 24px)',
+        height: 'var(--td-footer-logo-icon-height, 24px)',
+        marginRight: 'var(--td-footer-logo-icon-margin-right, var(--td-spacer, 8px))',
+      });
+    },
+    titleUrlCustomStyle() {
+      return _._style({
+        width: 'var(--td-footer-logo-title-url-width, 128px)',
+      });
+    },
+  },
+  methods: {
+  },
+});
+</script>
+<style scoped>
+@import './footer.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/footer/props.ts b/packages/tdesign-uniapp/components/footer/props.ts
new file mode 100644
index 000000000..90084d566
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/props.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFooterProps } from './type';
+export default {
+  /** 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式 */
+  links: {
+    type: Array,
+    default: (): TdFooterProps['links'] => [],
+  },
+  /** 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接 */
+  logo: {
+    type: Object,
+  },
+  /** 版权信息 */
+  text: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/footer/type.ts b/packages/tdesign-uniapp/components/footer/type.ts
new file mode 100644
index 000000000..d9881baff
--- /dev/null
+++ b/packages/tdesign-uniapp/components/footer/type.ts
@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdFooterProps {
+  /**
+   * 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式
+   * @default []
+   */
+  links?: Array<LinkObj>;
+  /**
+   * 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接
+   */
+  logo?: FooterLogo;
+  /**
+   * 版权信息
+   * @default ''
+   */
+  text?: string;
+}
+
+export interface LinkObj {
+  name: string;
+  url?: string;
+  openType?: 'navigate' | 'redirect' | 'relaunch' | 'switchTab' | 'navigateBack';
+}
+
+export interface FooterLogo {
+  icon: string;
+  title?: string;
+  url?: string;
+}
diff --git a/packages/tdesign-uniapp/components/form-item/README.en-US.md b/packages/tdesign-uniapp/components/form-item/README.en-US.md
new file mode 100644
index 000000000..47d91d17c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/README.en-US.md
@@ -0,0 +1,30 @@
+:: BASE_DOC ::
+
+## API
+
+### FormItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+arrow | Boolean | false | \- | N
+for | String | - | \- | N
+help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+label-align | String | - | options: left/right/top | N
+label-width | String / Number | - | \- | N
+name | String | - | \- | N
+required-mark | Boolean | undefined | \- | N
+rules | Array | - | Typescript：`Array<FormRule>` | N
+show-error-message | Boolean | undefined | \- | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-form-item-horizontal-padding | 32rpx | - 
+--td-form-item-justify-content | space-between | - 
+--td-form-item-label-width | 160rpx | - 
+--td-form-item-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/form-item/README.md b/packages/tdesign-uniapp/components/form-item/README.md
new file mode 100644
index 000000000..2af592d0c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/README.md
@@ -0,0 +1,30 @@
+:: BASE_DOC ::
+
+## API
+
+### FormItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+arrow | Boolean | false | 是否显示右侧箭头 | N
+for | String | - | 【开发中】 | N
+help | String / Slot | - | 【开发中】 | N
+label | String / Slot | '' | 字段标签名称。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
+label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
+name | String | - | 表单字段名称 | N
+required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
+rules | Array | - | 【开发中】 | N
+show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-form-item-horizontal-padding | 32rpx | - 
+--td-form-item-justify-content | space-between | - 
+--td-form-item-label-width | 160rpx | - 
+--td-form-item-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/form-item/form-item.less b/packages/tdesign-uniapp/components/form-item/form-item.less
new file mode 100644
index 000000000..769327491
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/form-item.less
@@ -0,0 +1,158 @@
+@import '../common/style/base.less';
+
+/* Less 支持测试 - 监听功能验证 */
+@form-item-prefix: ~'@{prefix}-form-item';
+@form-item-horizontal-padding: var(--td-form-item-horizontal-padding, 32rpx);
+@form-item-vertical-padding: var(--td-form-item-vertical-padding, 32rpx);
+@form-item-label-width: var(--td-form-item-label-width, 160rpx);
+@form-item-justify-content: var(--td-form-item-justify-content, space-between);
+.@{form-item-prefix} {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: @form-item-justify-content;
+  width: 100%;
+  padding: @form-item-vertical-padding @form-item-horizontal-padding;
+  background-color: #ffffff;
+  --td-input-vertical-padding: 0rpx;
+  --td-textarea-vertical-padding: 0rpx;
+  --td-textarea-horizontal-padding: 0rpx;
+  box-sizing: border-box;
+  &--top {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--bordered {
+    border-bottom: 1rpx solid @border-color;
+  }
+
+  &--error {
+    .@{form-item-prefix}__error {
+      color: @error-color;
+    }
+  }
+
+  &--success {
+    .@{form-item-prefix}__success {
+      color: @success-color;
+    }
+  }
+
+  &__label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: @form-item-label-width;
+    margin-right: 16rpx;
+    font-size: @font-size-m;
+
+    color: @text-color-primary;
+    line-height: 1.5;
+
+    &--required {
+      color: @error-color;
+      margin-right: 4rpx;
+    }
+
+    &--colon {
+      margin-left: 4rpx;
+    }
+
+    &--left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    &--right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &--top {
+      position: relative;
+      // margin-bottom: 8rpx;
+      margin-right: 0;
+      width: 100%;
+    }
+  }
+
+  &__controls {
+    flex: 1;
+    width: 100%;
+    margin-top: 8rpx;
+
+    &-content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &--left {
+        justify-content: flex-start;
+      }
+
+      &--right {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &__help {
+    // margin: 4rpx 0 8rpx;
+    font-size: @font-size-m;
+
+    color: @font-gray-1;
+    line-height: 1.4;
+  }
+
+  &__desc-link {
+    margin-top: 8rpx;
+    color: @primary-color-7;
+    font-size: @font-size-s;
+    line-height: 1.4;
+  }
+
+  &__error {
+    margin-top: 4rpx;
+    font-size: @font-size-s;
+    line-height: 1.4;
+
+    &--error {
+      color: @error-color;
+    }
+
+    &--warning {
+      color: @warning-color;
+    }
+  }
+
+  &__success {
+    margin-top: 4rpx;
+    font-size: @font-size-s;
+    color: @success-color;
+    line-height: 1.4;
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    margin-left: 8rpx;
+    color: @text-color-placeholder;
+  }
+
+  &__extra {
+    margin-left: 16rpx;
+  }
+}
+
+.desc-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  height: 50rpx;
+  --td-button-font-weight: 400;
+  // --td-button-extra-small-height: 38rpx;
+}
diff --git a/packages/tdesign-uniapp/components/form-item/form-item.vue b/packages/tdesign-uniapp/components/form-item/form-item.vue
new file mode 100644
index 000000000..c6c9644e6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/form-item.vue
@@ -0,0 +1,371 @@
+<template>
+  <view
+    :class="
+      classPrefix +
+        ' ' + classPrefix + '--' + dataLabelAlign +
+        ' ' + classPrefix + '--bordered' +
+        ' ' + classPrefix + '--' + (verifyStatus === 2 ? 'error' : verifyStatus === 1 ? 'success' : '') +
+        ' ' + tClass
+    "
+    :style="_._style([customStyle])"
+  >
+    <view
+      v-if="label"
+      :class="classPrefix + '__label ' + classPrefix + '__label--' + dataLabelAlign + ' ' + tClassLabel"
+      :style="'width: ' + dataLabelWidth"
+    >
+      <text
+        v-if="dataRequiredMark && requiredMarkPosition === 'left'"
+        :class="classPrefix + '__label--required'"
+      >
+        *
+      </text>
+      <text>{{ label }}</text>
+      <text
+        v-if="dataRequiredMark && requiredMarkPosition === 'right'"
+        :class="classPrefix + '__label--required'"
+      >
+        *
+      </text>
+      <text
+        v-if="colon"
+        :class="classPrefix + '__label--colon'"
+      >
+        :
+      </text>
+    </view>
+    <view
+      :class="classPrefix + '__controls ' + tClassControls"
+      :style="contentStyle"
+    >
+      <view :class="classPrefix + '__controls-content ' + classPrefix + '__controls-content--' + dataContentAlign">
+        <slot />
+        <view
+          v-if="false"
+          :class="classPrefix + '__arrow'"
+        >
+          <t-icon
+            name="chevron-right"
+            size="16"
+          />
+        </view>
+      </view>
+      <view
+        v-if="errorList.length > 0 && dataShowErrorMessage"
+        :class="classPrefix + '__error ' + classPrefix + '__error--' + (errorList[0].type || 'error')"
+        :style="errorPosition"
+      >
+        {{ errorList[0].message }}
+      </view>
+      <view
+        v-if="successList.length > 0"
+        :class="classPrefix + '__success'"
+      >
+        {{ successList[0].message }}
+      </view>
+    </view>
+    <view :class="classPrefix + '__extra ' + tClassExtra">
+      <slot name="extra" />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { validate, ValidateStatus } from './form-model';
+import TIcon from '../icon/icon.vue';
+import TButton from '../button/button.vue';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+import _ from '../common/utils.wxs';
+import { isNumber } from '../common/validator';
+
+const name = `${prefix}-form-item`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-controls`,
+    `${prefix}-class-help`,
+    `${prefix}-class-extra`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.FormItem)],
+  components: {
+    TIcon,
+    TButton,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      errorList: [],
+      successList: [],
+      verifyStatus: ValidateStatus.TO_BE_VALIDATED,
+      needResetField: false,
+      resetValidating: false,
+      // rules: [],
+      form: {},
+      colon: false,
+      // showErrorMessage: true,
+
+      _,
+      dataRules: this.rules,
+      dataLabelAlign: this.labelAlign,
+      dataLabelWidth: this.labelWidth,
+      dataRequiredMark: this.requiredMark,
+      dataShowErrorMessage: this.showErrorMessage,
+      dataContentAlign: this.contentAlign,
+    };
+  },
+  computed: {
+    contentStyle() {
+      const { labelWidth, labelAlign } = this;
+      let contentStyle = {};
+      if (labelWidth && labelAlign !== 'top') {
+        if (isNumber(labelWidth)) {
+          contentStyle = { marginLeft: `${labelWidth}px` };
+        } else {
+          contentStyle = { marginLeft: labelWidth };
+        }
+      }
+
+      return _._style(contentStyle);
+    },
+  },
+  watch: {
+
+  },
+  created() {
+    // this.initFormItem();
+  },
+  onBeforeUnmount() {
+    if (this.form) {
+      this.form.unregisterChild(this.name);
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      const target = this[RELATION_MAP.FormItem];
+      target.registerChild(this);
+      this.form = target;
+      this.initFormItem();
+
+      const { requiredMark, labelAlign, labelWidth, showErrorMessage, contentAlign } = this;
+      const isRequired = target.rules[this.name]?.some(rule => rule.required);
+
+      this.dataRules = target.rules[this.name];
+      this.colon = target.colon;
+      this.dataLabelAlign = labelAlign || target.labelAlign || 'right';
+      this.dataLabelWidth = labelWidth || target.labelWidth;
+      this.dataContentAlign = contentAlign || target.contentAlign,
+      this.dataRequiredMark = (() => {
+        if (!isRequired) {
+          return false;
+        }
+        if (typeof requiredMark === 'boolean') {
+          return requiredMark;
+        }
+        return target.requiredMark || false;
+      })();
+      this.dataShowErrorMessage = typeof showErrorMessage === 'boolean' ? showErrorMessage : target.showErrorMessage;
+      this.requiredMarkPosition = target.requiredMarkPosition;
+
+      setTimeout(() => {
+        this.errorPosition = this.dataLabelAlign !== 'top' && 'text-align: right;';
+      }, 33);
+    },
+    innerAfterUnlinked() {
+      if (this.form) {
+        this.form.unregisterChild(this.name);
+      }
+    },
+    // 处理描述信息链接点击事件
+    handlePreviewImage(e) {
+      const { url } = e.currentTarget.dataset;
+      const urls = url.map(item => item.url) || [];
+      if (url) {
+        uni.previewImage({
+          urls,
+          current: urls[0],
+        });
+      }
+    },
+    // 初始化表单项
+    initFormItem() {
+      this.setInitialValue();
+    },
+
+    // 设置初始值
+    setInitialValue() {
+      const { name } = this;
+      if (name && this.form) {
+        const { formData } = this.form;
+        this.initialValue = formData[name];
+      }
+    },
+
+    // 获取表单数据
+    getFormData() {
+      if (this.form) {
+        return this.form.formData;
+      }
+      return {};
+    },
+
+    // 获取当前值
+    getValue() {
+      const { name } = this;
+      if (name && this.form) {
+        const { formData } = this.form;
+        return formData[name];
+      }
+      return undefined;
+    },
+
+    // 获取验证规则
+    getRules() {
+      const { rules } = this;
+
+      // 优先使用组件自身的规则
+      if (rules && rules.length > 0) {
+        return rules;
+      }
+
+      // 使用表单的规则
+      return this.dataRules || [];
+    },
+
+    // 验证表单项
+    async validate(data, trigger, showErrorMessage) {
+      const rules = this.getRules();
+      if (rules.length === 0) {
+        return { [this.name]: true };
+      }
+
+      // 根据触发方式过滤规则
+      const filteredRules = trigger === 'all' ? rules : rules.filter(rule => (rule.trigger || 'change') === trigger);
+
+      if (filteredRules.length === 0) {
+        return { [this.name]: true };
+      }
+
+      const value = data[this.name];
+      const results = await validate(value, filteredRules);
+
+      // 分析验证结果
+      const analysis = this.analysisValidateResult(results);
+
+      // 更新状态
+      this.updateValidateStatus(analysis, showErrorMessage);
+
+      // 返回验证结果
+      const result = {};
+      result[this.name] = analysis.errorList.length > 0 ? analysis.errorList : true;
+      return result;
+    },
+
+    // 纯净验证（不显示错误信息）
+    async validateOnly(trigger) {
+      return this.validate(trigger, false);
+    },
+
+    // 分析验证结果
+    analysisValidateResult(results) {
+      const errorList = results.filter(item => item.result !== true);
+      const successList = results.filter(item => item.result === true && item.message && item.type === 'success');
+
+      return {
+        errorList,
+        successList,
+        resultList: results,
+      };
+    },
+
+    // 更新验证状态
+    updateValidateStatus(analysis) {
+      const { errorList, successList } = analysis;
+
+      this.errorList = errorList;
+      this.successList = successList;
+      this.verifyStatus = errorList.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
+    },
+
+    // 清空验证结果
+    clearValidate() {
+      this.errorList = [];
+      this.successList = [];
+      this.verifyStatus = ValidateStatus.TO_BE_VALIDATED;
+    },
+
+    // 重置字段
+    resetField() {
+      const { name } = this;
+      if (name && this.form) {
+        const { resetType } = this.form;
+
+        if (resetType === 'initial') {
+          this.form.updateFormData(name, this.initialValue);
+        } else {
+          this.form.updateFormData(name, this.getEmptyValue());
+        }
+      }
+
+      this.clearValidate();
+    },
+
+    // 设置验证信息
+    setValidateMessage(validateMessage) {
+      this.errorList = validateMessage.filter(item => item.type === 'error');
+      this.successList = validateMessage.filter(item => item.type === 'warning');
+      this.verifyStatus = validateMessage.length > 0 ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
+    },
+
+    // 获取空值
+    getEmptyValue() {
+      const value = this.getValue();
+
+      if (Array.isArray(value)) {
+        return [];
+      }
+      if (typeof value === 'object' && value !== null) {
+        return {};
+      }
+      if (typeof value === 'number') {
+        return 0;
+      }
+      return '';
+    },
+
+    // 处理值变化
+    onValueChange(value) {
+      const { name } = this;
+      if (name && this.form) {
+        this.form.updateFormData(name, value);
+
+        // 触发change验证
+        this.validate('change');
+      }
+    },
+
+    // 处理失焦事件
+    onBlur() {
+      // 触发blur验证
+      this.validate('blur');
+    },
+  },
+});
+</script>
+<style scoped>
+@import './form-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/form-item/form-model.ts b/packages/tdesign-uniapp/components/form-item/form-model.ts
new file mode 100644
index 000000000..af5bffa5f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/form-model.ts
@@ -0,0 +1,198 @@
+// 验证结果接口
+interface ValidateResult {
+  result: boolean;
+  message?: string;
+  type?: string;
+}
+
+// 工具函数：安全获取rule属性的实际值
+function getRuleValue(field: any, key?: string): any {
+  if (field && typeof field === 'object' && 'type' in field) {
+    // 针对type字段，过滤掉'error'和'warning'
+    if (key === 'type') {
+      const { value } = field;
+      if (value === 'error' || value === 'warning') {
+        return undefined;
+      }
+      return value;
+    }
+    return field.value;
+  }
+  // type字段只允许string
+  if (key === 'type') {
+    if (field === 'error' || field === 'warning') {
+      return undefined;
+    }
+  }
+  return field;
+}
+
+// 验证状态枚举
+export const ValidateStatus = {
+  TO_BE_VALIDATED: 0,
+  SUCCESS: 1,
+  FAIL: 2,
+};
+
+// 执行单个验证规则
+async function executeRule(value: any, rule: any): Promise<ValidateResult> {
+  const result: ValidateResult = {
+    result: true,
+  };
+
+  // 必填验证
+  const required = getRuleValue(rule.required);
+  if (required && (value === undefined || value === null || value === '' || value.length === 0)) {
+    result.result = false;
+    result.message = getRuleValue(rule.message) || '此字段为必填项';
+    result.type = 'error';
+    return result;
+  }
+
+  // 如果值为空且不是必填，则跳过其他验证
+  if (value === undefined || value === null || value === '' || value.length === 0) {
+    return result;
+  }
+
+  // 列表最小值验证
+  const min = getRuleValue(rule.min);
+  if (min !== undefined) {
+    const val = Array.isArray(value) ? value.length : Number(value);
+    if (val < Number(min)) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || `不能小于 ${min}`;
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 列表最大值验证
+  const max = getRuleValue(rule.max);
+  if (max !== undefined) {
+    const val = Array.isArray(value) ? value.length : Number(value);
+    if (val > Number(max)) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || `不能大于 ${max}`;
+      result.type = 'error';
+      return result;
+    }
+  }
+  // 字符串最大长度验证
+  const maxLength = getRuleValue(rule.maxLength);
+  if (maxLength !== undefined) {
+    const len = String(value).length;
+    if (len > Number(maxLength)) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || `长度不能超过 ${maxLength}`;
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 字符串最小长度验证
+  const minLength = getRuleValue(rule.minLength);
+  if (minLength !== undefined) {
+    const len = String(value).length;
+    if (len < Number(minLength)) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || `长度不能少于 ${minLength}`;
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 固定长度验证
+  const len = getRuleValue(rule.len);
+  if (len !== undefined) {
+    const strValue = String(value);
+    if (strValue.length !== Number(len)) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || `长度必须为 ${len}`;
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 正则验证
+  const pattern = getRuleValue(rule.pattern);
+  if (pattern) {
+    let regex;
+    if (pattern instanceof RegExp) {
+      regex = pattern;
+    } else if (typeof pattern === 'string') {
+      regex = new RegExp(pattern);
+    } else if (pattern && typeof pattern === 'object' && 'test' in pattern) {
+      regex = pattern;
+    } else {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || '格式不正确';
+      result.type = 'error';
+      return result;
+    }
+    if (!regex.test(String(value))) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || '格式不正确';
+      result.type = 'error';
+      return result;
+    }
+  }
+
+  // 类型验证
+  const type = getRuleValue(rule.type, 'type');
+  if (typeof type === 'string') {
+    let isValid = true;
+    if (type === 'email') {
+      isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value));
+      if (!isValid) {
+        result.result = false;
+        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
+        result.type = 'error';
+        return result;
+      }
+    } else if (type === 'url') {
+      try {
+        const url = new URL(String(value));
+        isValid = !!url;
+      } catch (err) {
+        isValid = false;
+      }
+      if (!isValid) {
+        result.result = false;
+        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
+        result.type = 'error';
+        return result;
+      }
+    } else if (type === 'number') {
+      isValid = !Number.isNaN(Number(value));
+      if (!isValid) {
+        result.result = false;
+        result.message = getRuleValue(rule.message) || `${type} 格式不正确`;
+        result.type = 'error';
+        return result;
+      }
+    }
+  }
+  // 自定义验证
+  const validator = getRuleValue(rule.validator);
+  if (validator) {
+    const validateResult = await validator(value);
+    if (!validateResult) {
+      result.result = false;
+      result.message = getRuleValue(rule.message) || '验证失败';
+      result.type = 'error';
+      return result;
+    }
+  }
+  return result;
+}
+
+// 验证函数
+export async function validate(value: any, rules: any[]): Promise<ValidateResult[]> {
+  const results: ValidateResult[] = [];
+
+  const promises = rules.map((rule) => executeRule(value, rule));
+  const ruleResults = await Promise.all(promises);
+  results.push(...ruleResults);
+
+  return results;
+}
diff --git a/packages/tdesign-uniapp/components/form-item/props.ts b/packages/tdesign-uniapp/components/form-item/props.ts
new file mode 100644
index 000000000..83849bef9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/props.ts
@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFormItemProps } from './type';
+export default {
+  /** 是否显示右侧箭头 */
+  arrow: Boolean,
+  /** label 原生属性 */
+  for: {
+    type: String,
+    default: '',
+  },
+  /** 表单项说明内容 */
+  help: {
+    type: String,
+  },
+  /** 字段标签名称 */
+  label: {
+    type: String,
+    default: '' as TdFormItemProps['label'],
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */
+  labelAlign: {
+    type: String,
+    validator(val: TdFormItemProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置标签宽度，优先级高于 Form.labelWidth */
+  labelWidth: {
+    type: [String, Number],
+  },
+  /** 表单字段名称 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示必填符号（*），优先级高于 Form.requiredMark */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Array,
+  },
+  /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
+  showErrorMessage: {
+    type: Boolean,
+    default: undefined,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/form-item/type.ts b/packages/tdesign-uniapp/components/form-item/type.ts
new file mode 100644
index 000000000..897752931
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form-item/type.ts
@@ -0,0 +1,7 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export type { TdFormItemProps} from '../form/type';
diff --git a/packages/tdesign-uniapp/components/form/README.en-US.md b/packages/tdesign-uniapp/components/form/README.en-US.md
new file mode 100644
index 000000000..9bf7c8b35
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/README.en-US.md
@@ -0,0 +1,135 @@
+---
+title: Form
+description: Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.
+spline: base
+isComponent: true
+toc: false
+---
+
+### 01 Component Type
+
+Base form
+
+{{ horizontal }}
+
+{{ vertical }}
+
+## API
+
+### Form Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+colon | Boolean | false | \- | N
+data | Object | {} | Typescript：`FormData` | N
+disabled | Boolean | undefined | \- | N
+error-message | Object | - | Typescript：`FormErrorMessage` | N
+label-align | String | right | options: left/right/top | N
+label-width | String / Number | '81px' | \- | N
+readonly | Boolean | undefined | \- | N
+required-mark | Boolean | undefined | \- | N
+required-mark-position | String | - | Display position of required symbols。options: left/right | N
+reset-type | String | empty | options: empty/initial | N
+rules | Object | - | Typescript：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+scroll-to-first-error | String | - | options: ''/smooth/auto | N
+show-error-message | Boolean | true | \- | N
+submit-with-warning-message | Boolean | false | \- | N
+
+### Form Events
+
+name | params | description
+-- | -- | --
+reset | `(context: { e?: FormResetEvent })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
+
+### FormInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+clear-validate | `(fields?: Array<keyof FormData>)` | \- | required
+reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
+set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+submit | `(params?: { showErrorMessage?: boolean })` | \- | required
+validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
+
+
+### FormItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+arrow | Boolean | false | \- | N
+for | String | - | \- | N
+help | String | - | \- | N
+label | String | '' | \- | N
+label-align | String | - | options: left/right/top | N
+label-width | String / Number | - | \- | N
+name | String | - | \- | N
+required-mark | Boolean | undefined | \- | N
+rules | Array | - | Typescript：`Array<FormRule>` | N
+show-error-message | Boolean | undefined | \- | N
+
+### FormItem Slots
+
+name | Description
+-- | --
+help | \-
+label | \-
+
+### FormRule
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+boolean | Boolean | - | \- | N
+date | Boolean / Object | - | Typescript：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+email | Boolean / Object | - | Typescript：`boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+enum | Array | - | Typescript：`Array<string>` | N
+idcard | Boolean | - | \- | N
+len | Number / Boolean | - | \- | N
+max | Number / Boolean | - | \- | N
+message | String | - | \- | N
+min | Number / Boolean | - | \- | N
+number | Boolean | - | \- | N
+pattern | String / Object | - | Typescript：`RegExp \| string` | N
+required | Boolean | - | \- | N
+telnumber | Boolean | - | \- | N
+trigger | String | change | Typescript：`ValidateTriggerType` | N
+type | String | error | options: error/warning | N
+url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+whitespace | Boolean | - | \- | N
+
+### FormErrorMessage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+boolean | String | - | \- | N
+date | String | - | \- | N
+enum | String | - | \- | N
+idcard | String | - | \- | N
+len | String | - | \- | N
+max | String | - | \- | N
+min | String | - | \- | N
+number | String | - | \- | N
+pattern | String | - | \- | N
+required | String | - | \- | N
+telnumber | String | - | \- | N
+url | String | - | \- | N
+validator | String | - | \- | N
+whitespace | String | - | \- | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-form-bg-color | @bg-color-container | - 
+--td-form-border-radius | 0 | - 
+--td-form-padding | 0 | - 
+--td-form-readonly-bg-color | @bg-color-secondarycontainer | - 
+--td-form-item-horizontal-padding | 32rpx | - 
+--td-form-item-justify-content | space-between | - 
+--td-form-item-label-width | 160rpx | - 
+--td-form-item-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/form/README.md b/packages/tdesign-uniapp/components/form/README.md
new file mode 100644
index 000000000..0f2f77876
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/README.md
@@ -0,0 +1,144 @@
+---
+title: Form 表单
+description: 用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。
+spline: base
+isComponent: true
+toc: false
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TForm from 'tdesign-uniapp/form/form.vue';
+import TFormItem from 'tdesign-uniapp/form-item/form-item.vue';
+```
+
+### 01 组件类型
+
+基础表单
+
+{{ horizontal }}
+
+{{ vertical }}
+
+## API
+
+### Form Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
+data | Object | {} | 表单数据。TS 类型：`FormData` | N
+disabled | Boolean | undefined | 是否禁用整个表单 | N
+error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
+label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
+label-width | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N
+readonly | Boolean | undefined | 是否整个表单只读 | N
+required-mark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N
+required-mark-position | String | - | 表单必填符号（*）显示位置。可选项：left/right | N
+reset-type | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N
+rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+scroll-to-first-error | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N
+show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N
+submit-with-warning-message | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N
+
+### Form Events
+
+名称 | 参数 | 描述
+-- | -- | --
+reset | `(context: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+submit | `(context: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/>
+validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
+
+### FormInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+clear-validate | `(fields?: Array<keyof FormData>)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
+reset | `(params?: FormResetParams<FormData>)` | \- | 必需。重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
+set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
+submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
+validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
+
+
+### FormItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+arrow | Boolean | false | 是否显示右侧箭头 | N
+for | String | - | label 原生属性 | N
+help | String | - | 表单项说明内容 | N
+label | String | '' | 字段标签名称 | N
+label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
+label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
+name | String | - | 表单字段名称 | N
+required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
+rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule>` | N
+show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
+
+### FormItem Slots
+
+名称 | 描述
+-- | --
+help | 自定义 `help` 显示内容
+label | 自定义 `label` 显示内容
+
+### FormRule
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+boolean | Boolean | - | 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }` | N
+date | Boolean / Object | - | 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+email | Boolean / Object | - | 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`。TS 类型：`boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+enum | Array | - | 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`。TS 类型：`Array<string>` | N
+idcard | Boolean | - | 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}\|\\d{15,15}\|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }` | N
+len | Number / Boolean | - | 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }` | N
+max | Number / Boolean | - | 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
+message | String | - | 校验未通过时呈现的错误信息，值为空则不显示 | N
+min | Number / Boolean | - | 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
+number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1e5  都算数字），示例：`{ number: true, message: '请输入数字' }` | N
+pattern | String / Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp \| string` | N
+required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
+telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
+trigger | String | change | 校验触发方式。TS 类型：`ValidateTriggerType` | N
+type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N
+url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/type.ts) | N
+whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N
+
+### FormErrorMessage
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+boolean | String | - | 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'` | N
+date | String | - | 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+enum | String | - | 枚举值校验规则不通过时的表单项显示文案，全局配置默认是：`${name}只能是${validate}等` | N
+idcard | String | - | 身份证号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+len | String | - | 值长度校验不通过时的表单项显示文案，全局配置默认是：`'${name}字符长度必须是 ${validate}'` | N
+max | String | - | 值的长度太长或值本身太大时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符'` | N
+min | String | - | 值的长度太短或值本身太小时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符'` | N
+number | String | - | 数字类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}必须是数字'` | N
+pattern | String | - | 正则表达式校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+required | String | - | 没有填写必填项时的表单项显示文案，全局配置默认是：`'${name}必填'` | N
+telnumber | String | - | 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+url | String | - | 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
+validator | String | - | 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求' | N
+whitespace | String | - | 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空` | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-form-bg-color | @bg-color-container | - 
+--td-form-border-radius | 0 | - 
+--td-form-padding | 0 | - 
+--td-form-readonly-bg-color | @bg-color-secondarycontainer | - 
+--td-form-item-horizontal-padding | 32rpx | - 
+--td-form-item-justify-content | space-between | - 
+--td-form-item-label-width | 160rpx | - 
+--td-form-item-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/form/_example/form.less b/packages/tdesign-uniapp/components/form/_example/form.less
new file mode 100644
index 000000000..ec8e668db
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/_example/form.less
@@ -0,0 +1,28 @@
+.tdesign-mobile-demo {
+  padding: 0 0 180rpx 0;
+  background-color: #f5f5f5;
+}
+
+.option {
+  margin-bottom: 24rpx;
+}
+
+.select-button-group {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 16rpx 8rpx;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  border-bottom: 1rpx solid #e7e7e7;
+  margin-bottom: 16rpx;
+}
+
+// .select-button-group :deep(.t-button) {
+//   height: 64rpx !important;
+//   flex: 1 !important;
+// }
+
+// .select-button-group :deep(.t-button:not(:last-child)) {
+//   margin-right: 16rpx;
+// }
diff --git a/packages/tdesign-uniapp/components/form/_example/form.vue b/packages/tdesign-uniapp/components/form/_example/form.vue
new file mode 100644
index 000000000..6664c4548
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/_example/form.vue
@@ -0,0 +1,91 @@
+<template>
+  <view class="tdesign-mobile-demo">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Form"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="Form 表单"
+      desc="用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。"
+      notice="渲染框架支持情况：Skyline、WebView"
+    />
+    <t-demo
+      title="01 组件类型"
+      desc="基础表单"
+    >
+      <view class="option">
+        <view class="select-button-group">
+          <TButton
+            :theme="isActive1 ? 'light' : 'default'"
+            shape="round"
+            data-name="isActive1"
+            :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+            custom-style="flex: 1;margin-right: 16px;height: 32px;"
+            @click="() => onClick()"
+          >
+            水平排布
+          </TButton>
+          <TButton
+            :theme="isActive2 ? 'light' : 'default'"
+            shape="round"
+            data-name="isActive2"
+            :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+            custom-style="flex: 1;height: 32px;"
+            @click="() => onClick()"
+          >
+            竖向排布
+          </TButton>
+        </view>
+      </view>
+    </t-demo>
+
+    <view v-if="isActive1">
+      <Horizontal :disabled="switchValue" />
+    </view>
+
+    <view v-if="isActive2">
+      <Vertical :disabled="switchValue" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import Horizontal from './horizontal/index.vue';
+import Vertical from './vertical/index.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+export default {
+  components: {
+    Horizontal,
+    Vertical,
+    TButton,
+  },
+  data() {
+    return {
+      isActive1: true,
+      switchValue: false,
+    };
+  },
+  computed: {
+    isActive2() {
+      return !this.isActive1;
+    },
+    useVirtualHost() {
+      return canUseVirtualHost();
+    },
+  },
+  methods: {
+    onClick() {
+      this.isActive1 = !this.isActive1;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './form.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/form/_example/horizontal/index.vue b/packages/tdesign-uniapp/components/form/_example/horizontal/index.vue
new file mode 100644
index 000000000..9e22fd61b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/_example/horizontal/index.vue
@@ -0,0 +1,623 @@
+<template>
+  <view>
+    <t-form
+      id="form"
+      ref="form"
+      class="form"
+      :data="formData"
+      :rules="rules"
+      reset-type="initial"
+      show-error-message
+      label-align="left"
+      required-mark
+      @reset="onReset($event, { tagId: 'form' })"
+      @submit="onSubmit($event, { tagId: 'form' })"
+    >
+      <t-form-item
+        label="用户名"
+        name="name"
+        help="输入用户名"
+      >
+        <t-input
+          :value="formData.name"
+          borderless
+          align="right"
+          placeholder="请输入用户名"
+          data-field="name"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'name' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="密码"
+        name="password"
+      >
+        <t-input
+          :value="formData.password"
+          borderless
+          type="password"
+          align="right"
+          :clearable="false"
+          placeholder="请输入密码"
+          data-field="password"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'password' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="性别"
+        name="gender"
+      >
+        <t-radio-group
+          :value="formData.gender"
+          t-class="box"
+          style="flex: 1;"
+          borderless
+          @change="onRadioChange"
+        >
+          <t-radio
+            :block="false"
+            name="radio"
+            value="man"
+            label="男"
+          />
+          <t-radio
+            :block="false"
+            name="radio"
+            value="women"
+            label="女"
+          />
+          <t-radio
+            :block="false"
+            name="radio"
+            value="secret"
+            label="保密"
+          />
+        </t-radio-group>
+      </t-form-item>
+
+      <t-form-item
+        label="生日"
+        name="birth"
+        content-align="right"
+      >
+        <t-input
+          :value="formData.birth"
+          borderless
+          align="right"
+          placeholder="请输入生日"
+          data-field="birth"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'birth' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        arrow
+        label="籍贯"
+        name="place"
+        content-align="right"
+      >
+        <t-input
+          ref="input"
+          :value="formData.place"
+          borderless
+          align="right"
+          placeholder="请选择籍贯"
+          :readonly="!isH5"
+          style="flex: 1;"
+          @click="showCascader"
+        />
+
+        <t-cascader
+          :visible="visibleCascader"
+          :value="address"
+          title="选择地址"
+          :options="options"
+          @change="onChangeCascader"
+          @visible-change="onCascaderVisibleChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="年限"
+        name="age"
+        content-align="right"
+      >
+        <t-stepper
+          :value="formData.age"
+          theme="filled"
+          @change="onChangeStepper"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="自我评价"
+        name="description"
+        content-align="right"
+      >
+        <t-rate
+          :value="formData.description"
+          variant="filled"
+          allow-half
+          :gap="rateGap"
+          @change="onRateChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="个人简介"
+        name="resume"
+      >
+        <t-textarea
+          :value="formData.resume"
+          t-class="textarea"
+          indicator
+          :maxlength="50"
+          placeholder="请输入个人简介"
+          style="flex: 1;"
+          @change="onTextareaChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="上传照片"
+        name="photo"
+      >
+        <t-upload
+          t-class="upload"
+          :files="formData.photo"
+          multiple
+          :max="6"
+          :action="action"
+          :grid-config="gridConfig"
+          @fail="onFail"
+          @progress="onProgress"
+          @change="onChangeUpload"
+          @preview="onPreview"
+          @success="onSuccess"
+          @remove="onRemove"
+        />
+      </t-form-item>
+
+      <view class="button-group">
+        <t-button
+          theme="primary"
+          form-type="submit"
+          size="large"
+          :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+          custom-style="flex: 1;margin-right: 16px;height: 40px;"
+          @click="submit"
+        >
+          提交
+        </t-button>
+        <t-button
+          theme="default"
+          variant="base"
+          form-type="reset"
+          size="large"
+          :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+          custom-style="flex: 1;height: 40px;"
+          @click="reset"
+        >
+          重置
+        </t-button>
+      </view>
+    </t-form>
+  </view>
+</template>
+
+<script>
+import tForm from 'tdesign-uniapp/form/form.vue';
+import tFormItem from 'tdesign-uniapp/form-item/form-item.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+// import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tForm,
+    tFormItem,
+    tInput,
+    tRadioGroup,
+    tRadio,
+    // tPopup,
+    tCascader,
+    tStepper,
+    tRate,
+    tTextarea,
+    tUpload,
+    tButton,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        password: '',
+        gender: '',
+        birth: '',
+        place: '',
+        age: 3,
+        description: 2,
+        resume: '',
+        photo: [
+          {
+            url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            name: 'uploaded1.png',
+            type: 'image',
+          },
+          {
+            url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            name: 'uploaded2.png',
+            type: 'image',
+          },
+        ],
+      },
+      visibleCascader: false,
+      address: '120119',
+      rateGap: 8,
+      action: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo',
+      gridConfig: {
+        column: 3,
+      },
+      options: [
+        {
+          label: '北京市',
+          value: '110000',
+          children: [
+            {
+              value: '110100',
+              label: '北京市',
+              children: [
+                {
+                  value: '110101',
+                  label: '东城区',
+                },
+                {
+                  value: '110102',
+                  label: '西城区',
+                },
+                {
+                  value: '110105',
+                  label: '朝阳区',
+                },
+                {
+                  value: '110106',
+                  label: '丰台区',
+                },
+                {
+                  value: '110107',
+                  label: '石景山区',
+                },
+                {
+                  value: '110108',
+                  label: '海淀区',
+                },
+                {
+                  value: '110109',
+                  label: '门头沟区',
+                },
+                {
+                  value: '110111',
+                  label: '房山区',
+                },
+                {
+                  value: '110112',
+                  label: '通州区',
+                },
+                {
+                  value: '110113',
+                  label: '顺义区',
+                },
+                {
+                  value: '110114',
+                  label: '昌平区',
+                },
+                {
+                  value: '110115',
+                  label: '大兴区',
+                },
+                {
+                  value: '110116',
+                  label: '怀柔区',
+                },
+                {
+                  value: '110117',
+                  label: '平谷区',
+                },
+                {
+                  value: '110118',
+                  label: '密云区',
+                },
+                {
+                  value: '110119',
+                  label: '延庆区',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: '天津市',
+          value: '120000',
+          children: [
+            {
+              value: '120100',
+              label: '天津市',
+              children: [
+                {
+                  value: '120101',
+                  label: '和平区',
+                },
+                {
+                  value: '120102',
+                  label: '河东区',
+                },
+                {
+                  value: '120103',
+                  label: '河西区',
+                },
+                {
+                  value: '120104',
+                  label: '南开区',
+                },
+                {
+                  value: '120105',
+                  label: '河北区',
+                },
+                {
+                  value: '120106',
+                  label: '红桥区',
+                },
+                {
+                  value: '120110',
+                  label: '东丽区',
+                },
+                {
+                  value: '120111',
+                  label: '西青区',
+                },
+                {
+                  value: '120112',
+                  label: '津南区',
+                },
+                {
+                  value: '120113',
+                  label: '北辰区',
+                },
+                {
+                  value: '120114',
+                  label: '武清区',
+                },
+                {
+                  value: '120115',
+                  label: '宝坻区',
+                },
+                {
+                  value: '120116',
+                  label: '滨海新区',
+                },
+                {
+                  value: '120117',
+                  label: '宁河区',
+                },
+                {
+                  value: '120118',
+                  label: '静海区',
+                },
+                {
+                  value: '120119',
+                  label: '蓟州区',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '用户名不能为空',
+          },
+          {
+            maxLength: 3,
+            message: '用户名不能超过3个字符',
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: '密码不能为空',
+          },
+        ],
+        gender: [
+          {
+            required: true,
+            message: '性别不能为空',
+          },
+        ],
+        birth: [
+          {
+            required: true,
+            message: '生日不能为空',
+          },
+        ],
+        age: [
+          {
+            required: true,
+            message: '年限不能为空',
+          },
+        ],
+        place: [
+          {
+            required: true,
+            message: '籍贯不能为空',
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: '分数不能为空',
+          },
+        ],
+        resume: [
+          {
+            required: true,
+            message: '简介不能为空',
+          },
+        ],
+        photo: [
+          {
+            required: true,
+            message: '上传照片不能为空',
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    useVirtualHost() {
+      return canUseVirtualHost();
+    },
+  },
+  created() {},
+  methods: {
+    onReset(e) {
+      this.formData = e.formData;
+    },
+    onSubmit(e) {
+      console.log('===onSubmit', e);
+    },
+    submit() {
+      const { form } = this.$refs;
+      form.submit();
+    },
+    reset() {
+      const { form } = this.$refs;
+      form.reset();
+    },
+    onInputChange(e, { field }) {
+      this.formData[`${field}`] = e.value;
+    },
+    onRadioChange(e) {
+      this.formData.gender = e.value;
+    },
+    onRateChange(e) {
+      this.formData.description = e.value;
+    },
+    onTextareaChange(e) {
+      this.formData.resume = e.value;
+    },
+    groupChangeFn(e) {
+      console.log('groupChange:', e.value);
+    },
+    onCascaderVisibleChange(e) {
+      this.formData.visibleCascader = e.value;
+    },
+    onChangeCascader(e) {
+      const { selectedOptions } = e;
+      const placeText = selectedOptions?.map(item => item.label).join('/');
+      this.formData.place = placeText;
+      this.visibleCascader = false;
+    },
+    showCascader() {
+      this.visibleCascader = true;
+      uni.hideKeyboard();
+    },
+    onChangeStepper(e) {
+      this.formData.age = e.value;
+    },
+    onFail(e) {
+      console.log('---onFail', e);
+    },
+    onProgress(e) {
+      console.log('---onProgress:', e);
+    },
+    onChangeUpload(e) {
+      console.log('====onChange', e);
+    },
+    onPreview(e) {
+      console.log('====onPreview', e);
+    },
+    onSuccess(e) {
+      const { files } = e;
+      this.formData.photo = [...files];
+    },
+    onRemove(e) {
+      const { index } = e;
+      const { photo } = this.formData;
+      photo.splice(index, 1);
+      this.formData.photo = photo;
+    },
+  },
+};
+</script>
+<style scoped>
+:deep(.box) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.form {
+}
+
+:deep(.upload) {
+    width: 100%;
+}
+
+/* .upload {
+    width: 100%;
+} */
+
+:deep(.textarea) {
+    height: 200rpx;
+    width: 100%;
+    --textarea-vertical-padding: 0;
+    --td-textarea-horizontal-padding: 0;
+    padding:0 !important;
+}
+:deep(.textarea .t-textarea) {
+    padding: 0 !important;
+}
+
+.button-group {
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    border-bottom: 1rpx solid #e7e7e7;
+}
+
+/* .button-group :deep(.t-button) {
+    height: 80rpx;
+    flex: 1;
+}
+
+.button-group :deep(.t-button:not(:last-child)) {
+    margin-right: 32rpx;
+} */
+
+</style>
diff --git a/packages/tdesign-uniapp/components/form/_example/vertical/index.vue b/packages/tdesign-uniapp/components/form/_example/vertical/index.vue
new file mode 100644
index 000000000..b66e7ee94
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/_example/vertical/index.vue
@@ -0,0 +1,606 @@
+<template>
+  <view>
+    <t-form
+      id="form"
+      ref="form"
+      :data="formData"
+      :rules="rules"
+      reset-type="empty"
+      show-error-message
+      label-align="top"
+      required-mark
+      @reset="onReset($event, { tagId: 'form' })"
+      @submit="onSubmit($event, { tagId: 'form' })"
+    >
+      <t-form-item
+        label="用户名"
+        name="name"
+        help="输入用户名"
+      >
+        <t-input
+          :value="formData.name"
+          borderless
+          placeholder="请输入用户名"
+          data-field="name"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'name' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="密码"
+        name="password"
+      >
+        <t-input
+          :value="formData.password"
+          borderless
+          type="password"
+          :clearable="false"
+          placeholder="请输入密码"
+          data-field="password"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'password' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="性别"
+        name="gender"
+      >
+        <t-radio-group
+          :value="formData.gender"
+          t-class="box"
+          borderless
+          style="flex: 1;"
+          @change="onRadioChange"
+        >
+          <t-radio
+            :block="false"
+            name="radio"
+            value="man"
+            label="男"
+          />
+          <t-radio
+            :block="false"
+            name="radio"
+            value="women"
+            label="女"
+          />
+          <t-radio
+            :block="false"
+            name="radio"
+            value="secret"
+            label="保密"
+          />
+        </t-radio-group>
+      </t-form-item>
+
+      <t-form-item
+        label="生日"
+        name="birth"
+      >
+        <t-input
+          :value="formData.birth"
+          borderless
+          placeholder="请输入生日"
+          data-field="birth"
+          style="flex: 1;"
+          @change="onInputChange($event, { field: 'birth' })"
+        />
+      </t-form-item>
+
+      <t-form-item
+        arrow
+        label="籍贯"
+        name="place"
+      >
+        <t-input
+          :value="formData.place"
+          borderless
+          placeholder="请选择籍贯"
+          :readonly="true"
+          style="flex: 1;"
+          @click="showCascader"
+        />
+        <t-cascader
+          :visible="visibleCascader"
+          :value="address"
+          title="选择地址"
+          :options="options"
+          @change="onChangeCascader"
+          @visible-change="onCascaderVisibleChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="年限"
+        name="age"
+      >
+        <t-stepper
+          :value="formData.age"
+          theme="filled"
+          @change="onChangeStepper"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="自我评价"
+        name="description"
+      >
+        <t-rate
+          :value="formData.description"
+          variant="filled"
+          allow-half
+          :gap="rateGap"
+          @change="onRateChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="个人简介"
+        name="resume"
+      >
+        <t-textarea
+          :value="formData.resume"
+          t-class="textarea"
+          indicator
+          :maxlength="50"
+          placeholder="请输入个人简介"
+          style="flex: 1;"
+          @change="onTextareaChange"
+        />
+      </t-form-item>
+
+      <t-form-item
+        label="上传照片"
+        name="photo"
+      >
+        <t-upload
+          :files="formData.photo"
+          multiple
+          :max="8"
+          :action="action"
+          t-class="upload"
+          :grid-config="gridConfig"
+          style="flex: 1;"
+          @fail="onFail"
+          @progress="onProgress"
+          @change="onChangeUpload"
+          @preview="onPreview"
+          @success="onSuccess"
+          @remove="onRemove"
+        />
+      </t-form-item>
+
+      <view class="button-group">
+        <t-button
+          theme="primary"
+          type="submit"
+          size="large"
+          :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+          custom-style="flex: 1;margin-right: 16px;height: 40px;"
+          @click="submit"
+        >
+          提交
+        </t-button>
+        <t-button
+          theme="default"
+          variant="base"
+          type="reset"
+          size="large"
+          :style="!useVirtualHost ? 'flex: 1;display: flex;' : ''"
+          custom-style="flex: 1;height: 40px;"
+          @click="reset"
+        >
+          重置
+        </t-button>
+      </view>
+    </t-form>
+  </view>
+</template>
+
+<script>
+import tForm from 'tdesign-uniapp/form/form.vue';
+import tFormItem from 'tdesign-uniapp/form-item/form-item.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+// import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import tCascader from 'tdesign-uniapp/cascader/cascader.vue';
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tForm,
+    tFormItem,
+    tInput,
+    tRadioGroup,
+    tRadio,
+    // tPopup,
+    tCascader,
+    tStepper,
+    tRate,
+    tTextarea,
+    tUpload,
+    tButton,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        password: '',
+        gender: '',
+        birth: '',
+        place: '',
+        age: 3,
+        description: 2,
+        resume: '',
+        photo: [
+          {
+            url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+            name: 'uploaded1.png',
+            type: 'image',
+          },
+          {
+            url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
+            name: 'uploaded2.png',
+            type: 'image',
+          },
+        ],
+      },
+      visibleCascader: false,
+      address: '120119',
+      rateGap: 8,
+      action: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo',
+      gridConfig: {
+        column: 4,
+      },
+      options: [
+        {
+          label: '北京市',
+          value: '110000',
+          children: [
+            {
+              value: '110100',
+              label: '北京市',
+              children: [
+                {
+                  value: '110101',
+                  label: '东城区',
+                },
+                {
+                  value: '110102',
+                  label: '西城区',
+                },
+                {
+                  value: '110105',
+                  label: '朝阳区',
+                },
+                {
+                  value: '110106',
+                  label: '丰台区',
+                },
+                {
+                  value: '110107',
+                  label: '石景山区',
+                },
+                {
+                  value: '110108',
+                  label: '海淀区',
+                },
+                {
+                  value: '110109',
+                  label: '门头沟区',
+                },
+                {
+                  value: '110111',
+                  label: '房山区',
+                },
+                {
+                  value: '110112',
+                  label: '通州区',
+                },
+                {
+                  value: '110113',
+                  label: '顺义区',
+                },
+                {
+                  value: '110114',
+                  label: '昌平区',
+                },
+                {
+                  value: '110115',
+                  label: '大兴区',
+                },
+                {
+                  value: '110116',
+                  label: '怀柔区',
+                },
+                {
+                  value: '110117',
+                  label: '平谷区',
+                },
+                {
+                  value: '110118',
+                  label: '密云区',
+                },
+                {
+                  value: '110119',
+                  label: '延庆区',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: '天津市',
+          value: '120000',
+          children: [
+            {
+              value: '120100',
+              label: '天津市',
+              children: [
+                {
+                  value: '120101',
+                  label: '和平区',
+                },
+                {
+                  value: '120102',
+                  label: '河东区',
+                },
+                {
+                  value: '120103',
+                  label: '河西区',
+                },
+                {
+                  value: '120104',
+                  label: '南开区',
+                },
+                {
+                  value: '120105',
+                  label: '河北区',
+                },
+                {
+                  value: '120106',
+                  label: '红桥区',
+                },
+                {
+                  value: '120110',
+                  label: '东丽区',
+                },
+                {
+                  value: '120111',
+                  label: '西青区',
+                },
+                {
+                  value: '120112',
+                  label: '津南区',
+                },
+                {
+                  value: '120113',
+                  label: '北辰区',
+                },
+                {
+                  value: '120114',
+                  label: '武清区',
+                },
+                {
+                  value: '120115',
+                  label: '宝坻区',
+                },
+                {
+                  value: '120116',
+                  label: '滨海新区',
+                },
+                {
+                  value: '120117',
+                  label: '宁河区',
+                },
+                {
+                  value: '120118',
+                  label: '静海区',
+                },
+                {
+                  value: '120119',
+                  label: '蓟州区',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '用户名不能为空',
+          },
+          {
+            maxLength: 3,
+            message: '用户名不能超过3个字符',
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: '密码不能为空',
+          },
+        ],
+        gender: [
+          {
+            required: true,
+            message: '性别不能为空',
+          },
+        ],
+        birth: [
+          {
+            required: true,
+            message: '生日不能为空',
+          },
+        ],
+        age: [
+          {
+            required: true,
+            message: '年限不能为空',
+          },
+        ],
+        place: [
+          {
+            required: true,
+            message: '籍贯不能为空',
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: '分数不能为空',
+          },
+        ],
+        resume: [
+          {
+            required: true,
+            message: '简介不能为空',
+          },
+        ],
+        photo: [
+          {
+            required: true,
+            message: '上传照片不能为空',
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    useVirtualHost() {
+      return canUseVirtualHost();
+    },
+  },
+  created() {},
+  methods: {
+    onReset(e) {
+      this.formData = e.formData;
+    },
+    onSubmit(e) {
+      console.log('===onSubmit', e);
+    },
+    submit() {
+      const { form } = this.$refs;
+      form.submit();
+    },
+    reset() {
+      const { form } = this.$refs;
+      form.reset();
+    },
+    onInputChange(e, { field }) {
+      this.formData[`${field}`] = e.value;
+    },
+    onRadioChange(e) {
+      this.formData.gender = e.value;
+    },
+    onRateChange(e) {
+      this.formData.description = e.value;
+    },
+    onTextareaChange(e) {
+      this.formData.resume = e.value;
+    },
+    groupChangeFn(e) {
+      console.log('groupChange:', e.value);
+    },
+    onCascaderVisibleChange(e) {
+      this.formData.visibleCascader = e.value;
+    },
+    onChangeCascader(e) {
+      const { selectedOptions } = e;
+      const placeText = selectedOptions?.map(item => item.label).join('/');
+      this.formData.place = placeText;
+      this.visibleCascader = false;
+    },
+    showCascader() {
+      this.visibleCascader = true;
+      uni.hideKeyboard();
+    },
+    onChangeStepper(e) {
+      this.formData.age = e.value;
+    },
+    onFail(e) {
+      console.log('---onFail', e);
+    },
+    onProgress(e) {
+      console.log('---onProgress:', e);
+    },
+    onChangeUpload(e) {
+      console.log('====onChange', e);
+    },
+    onPreview(e) {
+      console.log('====onPreview', e);
+    },
+    onSuccess(e) {
+      const { files } = e;
+      this.formData.photo = [...files];
+    },
+    onRemove(e) {
+      const { index } = e;
+      const { photo } = this.formData;
+      photo.splice(index, 1);
+      this.formData.photo = photo;
+    },
+  },
+};
+</script>
+<style scoped>
+:deep(.box) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+:deep(.textarea) {
+    height: 200rpx;
+    width: 100%;
+    --textarea-vertical-padding: 0;
+    --td-textarea-horizontal-padding: 0;
+    padding:0 !important;
+}
+:deep(.textarea .t-textarea) {
+    padding: 0 !important;
+}
+
+.button-group {
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    border-bottom: 1rpx solid #e7e7e7;
+}
+
+:deep(.upload) {
+    width: 100%;
+}
+
+/* .button-group :deep(.t-button) {
+    height: 80rpx;
+    flex: 1;
+}
+
+.button-group :deep(.t-button:not(:last-child)) {
+    margin-right: 32rpx;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/form/form-item-props.ts b/packages/tdesign-uniapp/components/form/form-item-props.ts
new file mode 100644
index 000000000..d3fe96f04
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/form-item-props.ts
@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFormItemProps } from '../form/type';
+export default {
+  /** 是否显示右侧箭头 */
+  arrow: Boolean,
+  /** label 原生属性 */
+  for: {
+    type: String,
+    default: '',
+  },
+  /** 表单项说明内容 */
+  help: {
+    type: String,
+  },
+  /** 字段标签名称 */
+  label: {
+    type: String,
+    default: '' as TdFormItemProps['label'],
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */
+  labelAlign: {
+    type: String,
+    validator(val: TdFormItemProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置标签宽度，优先级高于 Form.labelWidth */
+  labelWidth: {
+    type: [String, Number],
+  },
+  /** 表单字段名称 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示必填符号（*），优先级高于 Form.requiredMark */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Array,
+  },
+  /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
+  showErrorMessage: {
+    type: Boolean,
+    default: undefined,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/form/form.less b/packages/tdesign-uniapp/components/form/form.less
new file mode 100644
index 000000000..c0db5b456
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/form.less
@@ -0,0 +1,261 @@
+@import '../common/style/base.less';
+
+@form-prefix: ~'@{prefix}-form';
+
+// Form 变量定义
+@form-bg-color: var(--td-form-bg-color, @bg-color-container);
+@form-padding: var(--td-form-padding, 0);
+@form-border-radius: var(--td-form-border-radius, 0);
+@form-readonly-bg-color: var(--td-form-readonly-bg-color, @bg-color-secondarycontainer);
+
+.@{form-prefix} {
+  position: relative;
+  width: 100%;
+  background-color: @form-bg-color;
+  padding: @form-padding;
+  border-radius: @form-border-radius;
+  box-sizing: border-box;
+  min-height: 100%;
+
+  // 标签对齐方式
+  &--label-left {
+    .@{form-prefix}__item {
+      .@{form-prefix}__label {
+        text-align: left;
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  &--label-right {
+    .@{form-prefix}__item {
+      .@{form-prefix}__label {
+        text-align: right;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &--label-top {
+    .@{form-prefix}__item {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .@{form-prefix}__label {
+        width: 100%;
+        margin-bottom: @spacer;
+        text-align: left;
+        justify-content: flex-start;
+      }
+
+      .@{form-prefix}__controls {
+        width: 100%;
+        margin-top: 0;
+      }
+    }
+  }
+
+  // 禁用状态
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+
+    .@{form-prefix}__item {
+      .@{form-prefix}__label,
+      .@{form-prefix}__controls,
+      .@{form-prefix}__help,
+      .@{form-prefix}__extra {
+        color: @text-color-disabled;
+      }
+    }
+  }
+
+  // 只读状态
+  &--readonly {
+    background-color: @form-readonly-bg-color;
+
+    .@{form-prefix}__item {
+      .@{form-prefix}__label,
+      .@{form-prefix}__controls,
+      .@{form-prefix}__help,
+      .@{form-prefix}__extra {
+        color: @text-color-secondary;
+      }
+    }
+  }
+
+  // 表单项容器
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    margin-bottom: @spacer-2;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // 标签样式
+  &__label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 160rpx;
+    max-width: 300rpx;
+    margin-right: @spacer-2;
+    font-size: @font-size-m;
+    color: @text-color-primary;
+    line-height: 1.5;
+    word-break: break-all;
+    box-sizing: border-box;
+
+    // 必填标记
+    &--required {
+      &::before {
+        content: '*';
+        color: @error-color;
+        margin-right: 4rpx;
+        font-size: @font-size-m;
+        line-height: 1;
+      }
+    }
+
+    // 冒号样式
+    &--colon {
+      &::after {
+        content: ':';
+        margin-left: 4rpx;
+        color: @text-color-primary;
+      }
+    }
+
+    // 必填标记位置调整
+    &--required-mark-left {
+      &::before {
+        content: '*';
+        color: @error-color;
+        margin-right: 4rpx;
+        font-size: @font-size-m;
+        line-height: 1;
+      }
+    }
+
+    &--required-mark-right {
+      &::after {
+        content: '*';
+        color: @error-color;
+        margin-left: 4rpx;
+        font-size: @font-size-m;
+        line-height: 1;
+      }
+    }
+  }
+
+  // 控件区域
+  &__controls {
+    flex: 1;
+    width: 100%;
+    min-width: 0; // 防止flex子项溢出
+    display: flex;
+    flex-direction: column;
+  }
+
+  // 帮助文本
+  &__help {
+    margin-top: @spacer;
+    font-size: @font-size-s;
+    color: @text-color-secondary;
+    line-height: 1.4;
+  }
+
+  // 额外内容
+  &__extra {
+    margin-left: @spacer-2;
+    font-size: @font-size-s;
+    color: @text-color-secondary;
+    line-height: 1.4;
+  }
+
+  // 错误状态
+  &--error {
+    .@{form-prefix}__label {
+      color: @error-color;
+    }
+
+    .@{form-prefix}__help {
+      color: @error-color;
+    }
+  }
+
+  // 成功状态
+  &--success {
+    .@{form-prefix}__label {
+      color: @success-color;
+    }
+
+    .@{form-prefix}__help {
+      color: @success-color;
+    }
+  }
+
+  // 警告状态
+  &--warning {
+    .@{form-prefix}__label {
+      color: @warning-color;
+    }
+
+    .@{form-prefix}__help {
+      color: @warning-color;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 750rpx) {
+    &__label {
+      min-width: 120rpx;
+      max-width: 200rpx;
+      font-size: @font-size-base;
+    }
+
+    &__item {
+      margin-bottom: @spacer;
+    }
+  }
+
+  // 紧凑模式
+  &--compact {
+    .@{form-prefix}__item {
+      margin-bottom: @spacer;
+    }
+
+    .@{form-prefix}__label {
+      min-width: 120rpx;
+      font-size: @font-size-base;
+    }
+
+    .@{form-prefix}__help {
+      margin-top: calc(@spacer / 2);
+      font-size: @font-size-xs;
+    }
+  }
+
+  // 宽松模式
+  &--loose {
+    .@{form-prefix}__item {
+      margin-bottom: @spacer-3;
+    }
+
+    .@{form-prefix}__label {
+      min-width: 200rpx;
+      font-size: @font-size-l;
+    }
+
+    .@{form-prefix}__help {
+      margin-top: @spacer-2;
+      font-size: @font-size-m;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/form/form.vue b/packages/tdesign-uniapp/components/form/form.vue
new file mode 100644
index 000000000..371e57d57
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/form.vue
@@ -0,0 +1,272 @@
+<template>
+  <view>
+    <form
+      :class="
+        classPrefix +
+          ' ' + classPrefix + '--' + labelAlign +
+          ' ' + classPrefix + '--' + (disabled ? 'disabled' : '') +
+          ' ' + classPrefix + '--' + (readonly ? 'readonly' : '') +
+          ' ' + tClass
+      "
+      :style="customStyle"
+    >
+      <slot />
+    </form>
+  </view>
+</template>
+<script>
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-form`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.FormItem)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      children: [],
+      formData: {},
+      initialData: {},
+      fields: [],
+    };
+  },
+  created() {
+    this.initFormData();
+  },
+
+  methods: {
+    // 初始化表单数据
+    initFormData() {
+      const { data } = this;
+      // 确保 data 不为 undefined 或 null
+      const safeData = data || {};
+      const formData = { ...safeData };
+      const initialData = { ...safeData };
+      const fields = Object.keys(safeData);
+
+      this.formData = formData;
+      this.initialData = initialData;
+      this.fields = fields;
+    },
+
+    // 注册子组件
+    registerChild(child) {
+      const { children } = this;
+      if (!children.find(item => item.name === child.name)) {
+        children.push(child);
+        this.children = children;
+      }
+    },
+
+    // 注销子组件
+    unregisterChild(childName) {
+      const { children } = this;
+      const index = children.findIndex(item => item.name === childName);
+      if (index > -1) {
+        children.splice(index, 1);
+        this.children = children;
+      }
+    },
+
+    // 更新表单数据
+    updateFormData(name, value) {
+      const { formData } = this;
+      formData[name] = value;
+      this.formData = formData;
+    },
+
+    // 验证表单
+    async validate() {
+      const { children } = this;
+      const { data } = this;
+      const validatePromises = children.map(child => child.validate(data, 'all', this.showErrorMessage));
+
+      try {
+        const results = await Promise.all(validatePromises);
+        const validateResult = this.formatValidateResult(results);
+
+        this.$emit('validate', {
+          validateResult,
+        });
+
+        return validateResult;
+      } catch (error) {
+        return false;
+      }
+    },
+
+    // 纯净验证（不显示错误信息）
+    async validateOnly(params) {
+      const { fields, trigger = 'all' } = params;
+      const { children } = this;
+
+      const validatePromises = children
+        .filter((child) => {
+          if (fields && fields.length > 0) {
+            return fields.includes(child.name);
+          }
+          return true;
+        })
+        .map(child => child.validateOnly(trigger));
+
+      try {
+        const results = await Promise.all(validatePromises);
+        return this.formatValidateResult(results);
+      } catch (error) {
+        return false;
+      }
+    },
+
+    // 格式化验证结果
+    formatValidateResult(validateResultList) {
+      const result = {};
+      let hasError = false;
+
+      validateResultList.forEach((item) => {
+        if (item && typeof item === 'object') {
+          Object.keys(item).forEach((key) => {
+            if (item[key] !== true) {
+              result[key] = item[key];
+              hasError = true;
+            }
+          });
+        }
+      });
+
+      return hasError ? result : true;
+    },
+
+    // 获取第一个错误信息
+    getFirstError(validateResult) {
+      if (validateResult === true) return '';
+      const firstKey = Object.keys(validateResult)[0];
+      if (!firstKey) return '';
+
+      const errorList = validateResult[firstKey];
+      if (Array.isArray(errorList) && errorList.length > 0) {
+        return errorList[0].message || '';
+      }
+
+      return '';
+    },
+
+    // 提交表单
+    async submit() {
+      try {
+        const validateResult = await this.validate();
+        const firstError = this.getFirstError(validateResult);
+        this.$emit('submit', {
+          validateResult,
+          firstError,
+        });
+
+        return validateResult;
+      } catch (error) {
+        return false;
+      }
+    },
+    // 获取表单提交信息
+    async getValidate() {
+      try {
+        const validateResult = await this.validate();
+        const firstError = this.getFirstError(validateResult);
+        // this.$emit('getFormData', {
+        //   validateResult,
+        //   firstError,
+        // });
+
+        return { validateResult, firstError };
+      } catch (error) {
+        return false;
+      }
+    },
+    // 重置表单
+    reset() {
+      const { children, initialData, formData, fields } = this;
+
+      children.forEach((child) => {
+        if (fields && fields.includes(child.name)) {
+          if (this.resetType === 'empty') {
+            this.updateFormData(child.name, this.getEmptyValue(child.name));
+          } else if (this.resetType === 'initial') {
+            this.updateFormData(child.name, initialData[child.name]);
+          }
+          child.resetField();
+        }
+      });
+
+      this.$emit('reset', {
+        formData,
+      });
+    },
+
+    // 清空验证结果
+    clearValidate(fields) {
+      const { children } = this;
+
+      children.forEach((child) => {
+        if (!fields || fields.includes(child.name)) {
+          child.clearValidate();
+        }
+      });
+    },
+
+    // 设置验证信息
+    setValidateMessage(validateMessage) {
+      const { children } = this;
+
+      children.forEach((child) => {
+        if (validateMessage[child.name]) {
+          child.setValidateMessage(validateMessage[child.name]);
+        }
+      });
+    },
+
+    // 获取空值
+    getEmptyValue(name) {
+      const { formData } = this;
+      const currentValue = formData[name];
+
+      if (Array.isArray(currentValue)) {
+        return [];
+      }
+      if (typeof currentValue === 'object' && currentValue !== null) {
+        return {};
+      }
+      if (typeof currentValue === 'number') {
+        return 0;
+      }
+      return '';
+    },
+
+    // 表单提交事件处理
+    onSubmit() {
+      this.submit();
+    },
+
+    // 表单重置事件处理
+    onReset() {
+      this.reset();
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './form.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/form/props.ts b/packages/tdesign-uniapp/components/form/props.ts
new file mode 100644
index 000000000..cfe2d6f7d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/props.ts
@@ -0,0 +1,100 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdFormProps } from './type';
+export default {
+  /** 是否在表单标签字段右侧显示冒号 */
+  colon: Boolean,
+  /** 表单数据 */
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否禁用整个表单 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` */
+  errorMessage: {
+    type: Object,
+  },
+  /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐 */
+  labelAlign: {
+    type: String,
+    default: 'right' as TdFormProps['labelAlign'],
+    validator(val: TdFormProps['labelAlign']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'top'].includes(val);
+    },
+  },
+  /** 可以整体设置label标签宽度，默认为81px */
+  labelWidth: {
+    type: [String, Number],
+    default: '81px' as TdFormProps['labelWidth'],
+  },
+  /** 是否整个表单只读 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否显示必填符号（*），默认显示 */
+  requiredMark: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 表单必填符号（*）显示位置 */
+  requiredMarkPosition: {
+    type: String,
+    validator(val: TdFormProps['requiredMarkPosition']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值 */
+  resetType: {
+    type: String,
+    default: 'empty' as TdFormProps['resetType'],
+    validator(val: TdFormProps['resetType']): boolean {
+      if (!val) return true;
+      return ['empty', 'initial'].includes(val);
+    },
+  },
+  /** 表单字段校验规则 */
+  rules: {
+    type: Object,
+  },
+  /** 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动 */
+  scrollToFirstError: {
+    type: String,
+    validator(val: TdFormProps['scrollToFirstError']): boolean {
+      if (!val) return true;
+      return ['', 'smooth', 'auto'].includes(val);
+    },
+  },
+  /** 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 */
+  showErrorMessage: {
+    type: Boolean,
+    default: true,
+  },
+  /** 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 */
+  submitWithWarningMessage: Boolean,
+  /** 表单重置时触发 */
+  onReset: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()` */
+  onSubmit: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表 */
+  onValidate: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/form/type.ts b/packages/tdesign-uniapp/components/form/type.ts
new file mode 100644
index 000000000..967e4d820
--- /dev/null
+++ b/packages/tdesign-uniapp/components/form/type.ts
@@ -0,0 +1,376 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { IsEmailOptions } from '../common/common';
+import type { IsURLOptions } from '../common/common';
+import type { FormResetEvent, FormSubmitEvent } from '../common/common';
+
+export interface TdFormProps<FormData extends Data = Data> {
+  /**
+   * 是否在表单标签字段右侧显示冒号
+   * @default false
+   */
+  colon?: boolean;
+  /**
+   * 表单数据
+   * @default {}
+   */
+  data?: FormData;
+  /**
+   * 是否禁用整个表单
+   */
+  disabled?: boolean;
+  /**
+   * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
+   */
+  errorMessage?: FormErrorMessage;
+  /**
+   * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐
+   * @default right
+   */
+  labelAlign?: 'left' | 'right' | 'top';
+  /**
+   * 可以整体设置label标签宽度，默认为81px
+   * @default '81px'
+   */
+  labelWidth?: string | number;
+  /**
+   * 是否整个表单只读
+   */
+  readonly?: boolean;
+  /**
+   * 是否显示必填符号（*），默认显示
+   */
+  requiredMark?: boolean;
+  /**
+   * 表单必填符号（*）显示位置
+   */
+  requiredMarkPosition?: 'left' | 'right';
+  /**
+   * 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值
+   * @default empty
+   */
+  resetType?: 'empty' | 'initial';
+  /**
+   * 表单字段校验规则
+   */
+  rules?: FormRules<FormData>;
+  /**
+   * 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动
+   */
+  scrollToFirstError?: '' | 'smooth' | 'auto';
+  /**
+   * 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性
+   * @default true
+   */
+  showErrorMessage?: boolean;
+  /**
+   * 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件
+   * @default false
+   */
+  submitWithWarningMessage?: boolean;
+  /**
+   * 表单重置时触发
+   */
+  onReset?: (context: { e?: FormResetEvent }) => void;
+  /**
+   * 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加  enter 事件，并在事件中设置 `e.preventDefault()`
+   */
+  onSubmit?: (context: SubmitContext<FormData>) => void;
+  /**
+   * 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表
+   */
+  onValidate?: (result: ValidateResultContext<FormData>) => void;
+}
+
+/** 组件实例方法 */
+export interface FormInstanceFunctions<FormData extends Data = Data> {
+  /**
+   * 清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
+   */
+  clearValidate: (fields?: Array<keyof FormData>) => void;
+  /**
+   * 重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`
+   */
+  reset: (params?: FormResetParams<FormData>) => void;
+  /**
+   * 设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型
+   */
+  setValidateMessage: (message: FormValidateMessage<FormData>) => void;
+  /**
+   * 提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
+   */
+  submit: (params?: { showErrorMessage?: boolean }) => void;
+  /**
+   * 校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表
+   */
+  validate: (params?: FormValidateParams) => Promise<FormValidateResult<FormData>>;
+}
+
+export interface TdFormItemProps {
+  /**
+   * 是否显示右侧箭头
+   * @default false
+   */
+  arrow?: boolean;
+  /**
+   * label 原生属性
+   * @default ''
+   */
+  for?: string;
+  /**
+   * 表单项说明内容
+   */
+  help?: string;
+  /**
+   * 字段标签名称
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign
+   */
+  labelAlign?: 'left' | 'right' | 'top';
+  /**
+   * 可以整体设置标签宽度，优先级高于 Form.labelWidth
+   */
+  labelWidth?: string | number;
+  /**
+   * 表单字段名称
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 是否显示必填符号（*），优先级高于 Form.requiredMark
+   */
+  requiredMark?: boolean;
+  /**
+   * 表单字段校验规则
+   */
+  rules?: Array<FormRule>;
+  /**
+   * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
+   */
+  showErrorMessage?: boolean;
+}
+
+export interface FormRule {
+  /**
+   * 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }`
+   */
+  boolean?: boolean;
+  /**
+   * 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`
+   */
+  date?: boolean | IsDateOptions;
+  /**
+   * 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`
+   */
+  email?: boolean | IsEmailOptions;
+  /**
+   * 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`
+   */
+  enum?: Array<string>;
+  /**
+   * 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}|\\d{15,15}|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }`
+   */
+  idcard?: boolean;
+  /**
+   * 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }`
+   */
+  len?: number | boolean;
+  /**
+   * 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`<br />如果数据类型数字（Number），则自动变为数字大小的比对
+   */
+  max?: number | boolean;
+  /**
+   * 校验未通过时呈现的错误信息，值为空则不显示
+   * @default ''
+   */
+  message?: string;
+  /**
+   * 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对
+   */
+  min?: number | boolean;
+  /**
+   * 内置校验方法，校验值是否为数字（1.2 、 1e5  都算数字），示例：`{ number: true, message: '请输入数字' }`
+   */
+  number?: boolean;
+  /**
+   * 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`
+   */
+  pattern?: RegExp | string;
+  /**
+   * 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记
+   */
+  required?: boolean;
+  /**
+   * 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }`
+   */
+  telnumber?: boolean;
+  /**
+   * 校验触发方式
+   * @default change
+   */
+  trigger?: ValidateTriggerType;
+  /**
+   * 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种
+   * @default error
+   */
+  type?: 'error' | 'warning';
+  /**
+   * 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`
+   */
+  url?: boolean | IsURLOptions;
+  /**
+   * 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
+   */
+  validator?: CustomValidator;
+  /**
+   * 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }`
+   */
+  whitespace?: boolean;
+}
+
+export interface FormErrorMessage {
+  /**
+   * 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'`
+   * @default ''
+   */
+  boolean?: string;
+  /**
+   * 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
+   * @default ''
+   */
+  date?: string;
+  /**
+   * 枚举值校验规则不通过时的表单项显示文案，全局配置默认是：`${name}只能是${validate}等`
+   * @default ''
+   */
+  enum?: string;
+  /**
+   * 身份证号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
+   * @default ''
+   */
+  idcard?: string;
+  /**
+   * 值长度校验不通过时的表单项显示文案，全局配置默认是：`'${name}字符长度必须是 ${validate}'`
+   * @default ''
+   */
+  len?: string;
+  /**
+   * 值的长度太长或值本身太大时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符'`
+   * @default ''
+   */
+  max?: string;
+  /**
+   * 值的长度太短或值本身太小时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符'`
+   * @default ''
+   */
+  min?: string;
+  /**
+   * 数字类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}必须是数字'`
+   * @default ''
+   */
+  number?: string;
+  /**
+   * 正则表达式校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
+   * @default ''
+   */
+  pattern?: string;
+  /**
+   * 没有填写必填项时的表单项显示文案，全局配置默认是：`'${name}必填'`
+   * @default ''
+   */
+  required?: string;
+  /**
+   * 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
+   * @default ''
+   */
+  telnumber?: string;
+  /**
+   * 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
+   * @default ''
+   */
+  url?: string;
+  /**
+   * 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求'
+   * @default ''
+   */
+  validator?: string;
+  /**
+   * 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空`
+   * @default ''
+   */
+  whitespace?: string;
+}
+
+export type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> };
+
+export interface SubmitContext<T extends Data = Data> {
+  e?: FormSubmitEvent;
+  validateResult: FormValidateResult<T>;
+  firstError?: string;
+  fields?: any;
+}
+
+export type FormValidateResult<T> = boolean | ValidateResultObj<T>;
+
+export type ValidateResultObj<T> = { [key in keyof T]: boolean | ValidateResultList };
+
+export type ValidateResultList = Array<AllValidateResult>;
+
+export type AllValidateResult = CustomValidateObj | ValidateResultType;
+
+export interface ValidateResultType extends FormRule {
+  result: boolean;
+}
+
+export type ValidateResult<T> = { [key in keyof T]: boolean | ErrorList };
+
+export type ErrorList = Array<FormRule>;
+
+export type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>;
+
+export interface FormResetParams<FormData> {
+  type?: 'initial' | 'empty';
+  fields?: Array<keyof FormData>;
+}
+
+export type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] };
+
+export interface FormItemValidateMessage {
+  type: 'warning' | 'error';
+  message: string;
+}
+
+export interface FormValidateParams {
+  fields?: Array<string>;
+  showErrorMessage?: boolean;
+  trigger?: ValidateTriggerType;
+}
+
+export type ValidateTriggerType = 'blur' | 'change' | 'submit' | 'all';
+
+export type Data = { [key: string]: any };
+
+export interface IsDateOptions {
+  format: string;
+  strictMode: boolean;
+  delimiters: string[];
+}
+
+export type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
+
+export type CustomValidateResolveType = boolean | CustomValidateObj;
+
+export interface CustomValidateObj {
+  result: boolean;
+  message: string;
+  type?: 'error' | 'warning' | 'success';
+}
+
+export type ValueType = any;
diff --git a/packages/tdesign-uniapp/components/global.d.ts b/packages/tdesign-uniapp/components/global.d.ts
new file mode 100644
index 000000000..af77ab986
--- /dev/null
+++ b/packages/tdesign-uniapp/components/global.d.ts
@@ -0,0 +1,84 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    TActionSheet: typeof import('tdesign-uniapp/action-sheet/action-sheet.vue').default;
+    TAvatar: typeof import('tdesign-uniapp/avatar/avatar.vue').default;
+    TAvatarGroup: typeof import('tdesign-uniapp/avatar-group/avatar-group.vue').default;
+    TBackTop: typeof import('tdesign-uniapp/back-top/back-top.vue').default;
+    TBadge: typeof import('tdesign-uniapp/badge/badge.vue').default;
+    TButton: typeof import('tdesign-uniapp/button/button.vue').default;
+    TCalendar: typeof import('tdesign-uniapp/calendar/calendar.vue').default;
+    TCascader: typeof import('tdesign-uniapp/cascader/cascader.vue').default;
+    TCell: typeof import('tdesign-uniapp/cell/cell.vue').default;
+    TCellGroup: typeof import('tdesign-uniapp/cell-group/cell-group.vue').default;
+    TCheckTag: typeof import('tdesign-uniapp/check-tag/check-tag.vue').default;
+    TCheckbox: typeof import('tdesign-uniapp/checkbox/checkbox.vue').default;
+    TCheckboxGroup: typeof import('tdesign-uniapp/checkbox-group/checkbox-group.vue').default;
+    TCol: typeof import('tdesign-uniapp/col/col.vue').default;
+    TCollapse: typeof import('tdesign-uniapp/collapse/collapse.vue').default;
+    TCollapsePanel: typeof import('tdesign-uniapp/collapse-panel/collapse-panel.vue').default;
+    TColorPicker: typeof import('tdesign-uniapp/color-picker/color-picker.vue').default;
+    TCountDown: typeof import('tdesign-uniapp/count-down/count-down.vue').default;
+    TDateTimePicker: typeof import('tdesign-uniapp/date-time-picker/date-time-picker.vue').default;
+    TDialog: typeof import('tdesign-uniapp/dialog/dialog.vue').default;
+    TDivider: typeof import('tdesign-uniapp/divider/divider.vue').default;
+    TDrawer: typeof import('tdesign-uniapp/drawer/drawer.vue').default;
+    TDropdownItem: typeof import('tdesign-uniapp/dropdown-item/dropdown-item.vue').default;
+    TDropdownMenu: typeof import('tdesign-uniapp/dropdown-menu/dropdown-menu.vue').default;
+    TEmpty: typeof import('tdesign-uniapp/empty/empty.vue').default;
+    TFab: typeof import('tdesign-uniapp/fab/fab.vue').default;
+    TFooter: typeof import('tdesign-uniapp/footer/footer.vue').default;
+    TForm: typeof import('tdesign-uniapp/form/form.vue').default;
+    TFormItem: typeof import('tdesign-uniapp/form-item/form-item.vue').default;
+    TGrid: typeof import('tdesign-uniapp/grid/grid.vue').default;
+    TGridItem: typeof import('tdesign-uniapp/grid-item/grid-item.vue').default;
+    TGuide: typeof import('tdesign-uniapp/guide/guide.vue').default;
+    TIcon: typeof import('tdesign-uniapp/icon/icon.vue').default;
+    TImage: typeof import('tdesign-uniapp/image/image.vue').default;
+    TImageViewer: typeof import('tdesign-uniapp/image-viewer/image-viewer.vue').default;
+    TIndexes: typeof import('tdesign-uniapp/indexes/indexes.vue').default;
+    TIndexesAnchor: typeof import('tdesign-uniapp/indexes-anchor/indexes-anchor.vue').default;
+    TInput: typeof import('tdesign-uniapp/input/input.vue').default;
+    TLink: typeof import('tdesign-uniapp/link/link.vue').default;
+    TLoading: typeof import('tdesign-uniapp/loading/loading.vue').default;
+    TMessage: typeof import('tdesign-uniapp/message/message.vue').default;
+    TNavbar: typeof import('tdesign-uniapp/navbar/navbar.vue').default;
+    TNoticeBar: typeof import('tdesign-uniapp/notice-bar/notice-bar.vue').default;
+    TOverlay: typeof import('tdesign-uniapp/overlay/overlay.vue').default;
+    TPicker: typeof import('tdesign-uniapp/picker/picker.vue').default;
+    TPickerItem: typeof import('tdesign-uniapp/picker-item/picker-item.vue').default;
+    TPopup: typeof import('tdesign-uniapp/popup/popup.vue').default;
+    TProgress: typeof import('tdesign-uniapp/progress/progress.vue').default;
+    TPullDownRefresh: typeof import('tdesign-uniapp/pull-down-refresh/pull-down-refresh.vue').default;
+    TQrcode: typeof import('tdesign-uniapp/qrcode/qrcode.vue').default;
+    TRadio: typeof import('tdesign-uniapp/radio/radio.vue').default;
+    TRadioGroup: typeof import('tdesign-uniapp/radio-group/radio-group.vue').default;
+    TRate: typeof import('tdesign-uniapp/rate/rate.vue').default;
+    TResult: typeof import('tdesign-uniapp/result/result.vue').default;
+    TRow: typeof import('tdesign-uniapp/row/row.vue').default;
+    TSearch: typeof import('tdesign-uniapp/search/search.vue').default;
+    TSideBar: typeof import('tdesign-uniapp/side-bar/side-bar.vue').default;
+    TSideBarItem: typeof import('tdesign-uniapp/side-bar-item/side-bar-item.vue').default;
+    TSkeleton: typeof import('tdesign-uniapp/skeleton/skeleton.vue').default;
+    TSlider: typeof import('tdesign-uniapp/slider/slider.vue').default;
+    TStepItem: typeof import('tdesign-uniapp/step-item/step-item.vue').default;
+    TStepper: typeof import('tdesign-uniapp/stepper/stepper.vue').default;
+    TSteps: typeof import('tdesign-uniapp/steps/steps.vue').default;
+    TSticky: typeof import('tdesign-uniapp/sticky/sticky.vue').default;
+    TSwipeCell: typeof import('tdesign-uniapp/swipe-cell/swipe-cell.vue').default;
+    TSwiper: typeof import('tdesign-uniapp/swiper/swiper.vue').default;
+    TSwiperNav: typeof import('tdesign-uniapp/swiper-nav/swiper-nav.vue').default;
+    TSwitch: typeof import('tdesign-uniapp/switch/switch.vue').default;
+    TTabBar: typeof import('tdesign-uniapp/tab-bar/tab-bar.vue').default;
+    TTabBarItem: typeof import('tdesign-uniapp/tab-bar-item/tab-bar-item.vue').default;
+    TTabPanel: typeof import('tdesign-uniapp/tab-panel/tab-panel.vue').default;
+    TTabs: typeof import('tdesign-uniapp/tabs/tabs.vue').default;
+    TTag: typeof import('tdesign-uniapp/tag/tag.vue').default;
+    TTextarea: typeof import('tdesign-uniapp/textarea/textarea.vue').default;
+    TToast: typeof import('tdesign-uniapp/toast/toast.vue').default;
+    TTreeSelect: typeof import('tdesign-uniapp/tree-select/tree-select.vue').default;
+    TUpload: typeof import('tdesign-uniapp/upload/upload.vue').default;
+    TWatermark: typeof import('tdesign-uniapp/watermark/watermark.vue').default;
+  }
+}
+
+export {};
diff --git a/packages/tdesign-uniapp/components/grid-item/README.en-US.md b/packages/tdesign-uniapp/components/grid-item/README.en-US.md
new file mode 100644
index 000000000..bbaaec355
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/README.en-US.md
@@ -0,0 +1,43 @@
+:: BASE_DOC ::
+
+## API
+
+### GridItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+badgeProps | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+description | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+icon | String / Object | - | \- | N
+image | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+jumpType | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | options: vertical/horizontal | N
+text | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+url | String | - | \- | N
+onClick | Function |  | Typescript：`() => void`<br/> | N
+
+### GridItem Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### GridItem Slots
+
+name | Description
+-- | --
+- | \-
+description | \-
+image | \-
+text | \-
+
+### GridItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-description | \-
+t-class-image | \-
+t-class-text | \-
diff --git a/packages/tdesign-uniapp/components/grid-item/README.md b/packages/tdesign-uniapp/components/grid-item/README.md
new file mode 100644
index 000000000..629fdc7a2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/README.md
@@ -0,0 +1,43 @@
+:: BASE_DOC ::
+
+## API
+
+### GridItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+badgeProps | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+description | String / TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String / TNode | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+jumpType | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String / TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+url | String | - | 点击后的跳转链接 | N
+onClick | Function |  | TS 类型：`() => void`<br/>点击子项后触发 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
+### GridItem Slots
+
+名称 | 描述
+-- | --
+- | 默认插槽，自定义内容区域内容
+description | 自定义 `description` 模块内容
+image | 自定义 `image` 模块内容
+text | 自定义 `text` 模块内容
+
+### GridItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
diff --git a/packages/tdesign-uniapp/components/grid-item/grid-item.less b/packages/tdesign-uniapp/components/grid-item/grid-item.less
new file mode 100644
index 000000000..0646be581
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/grid-item.less
@@ -0,0 +1,157 @@
+@import '../common/style/base.less';
+
+@item: ~'@{prefix}-grid-item';
+
+@grid-item-icon-font-size: 48rpx;
+
+@grid-item-padding: var(--td-grid-item-padding, 32rpx);
+@grid-item-bg-color: var(--td-grid-item-bg-color, @bg-color-container);
+@grid-item-image-width: var(--td-grid-item-image-width, 96rpx);
+@grid-item-image-small-width: var(--td-grid-item-image-small-width, 64rpx);
+@grid-item-image-middle-width: var(--td-grid-item-image-middle-width, 80rpx);
+@grid-item-text-color: var(--td-grid-item-text-color, @text-color-primary);
+@grid-item-text-font-size: var(--td-grid-item-text-font-size, 28rpx);
+@grid-item-text-small-font-size: var(--td-grid-item-text-small-font-size, 24rpx);
+@grid-item-text-middle-font-size: var(--td-grid-item-text-middle-font-size, 24rpx);
+@grid-item-text-line-height: var(--td-grid-item-text-line-height, 44rpx);
+@grid-item-text-padding-top: var(--td-grid-item-text-padding-top, 16rpx);
+@grid-item-description-font-size: var(--td-grid-item-description-font-size, 24rpx);
+@grid-item-description-line-height: var(--td-grid-item-description-line-height, 40rpx);
+@grid-item-description-color: var(--td-grid-item-description-color, @text-color-placeholder);
+@grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 0);
+@grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer);
+@grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 0);
+@grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 0);
+
+.@{item} {
+  box-sizing: border-box;
+  height: 100%;
+  // float: left;
+  display: inline-block;
+  vertical-align: top;
+  background-color: @grid-item-bg-color;
+
+  &--hover {
+    background-color: @grid-item-hover-bg-color;
+  }
+
+  &--auto-size {
+    width: 84 * 2rpx;
+  }
+
+  &__wrapper {
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    padding: @grid-item-padding 0 24rpx;
+
+    &--horizontal {
+      flex-direction: row;
+      padding-left: @grid-item-padding;
+    }
+
+    &--left {
+      justify-self: flex-start;
+      align-items: flex-start;
+      width: 100%;
+      box-sizing: border-box;
+
+      .@{prefix}-grid-item__words {
+        text-align: left;
+      }
+    }
+  }
+
+  &__words {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    flex-direction: column;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    &--horizontal {
+      margin-left: 24rpx;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__image {
+    &:not(:empty) {
+      width: @grid-item-image-width;
+      height: @grid-item-image-width;
+
+      &.@{item}__image--small {
+        width: @grid-item-image-small-width;
+        height: @grid-item-image-small-width;
+      }
+
+      &.@{item}__image--middle {
+        width: @grid-item-image-middle-width;
+        height: @grid-item-image-middle-width;
+      }
+
+      .@{prefix}-grid__image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    :deep(&--icon) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: @bg-color-secondarycontainer;
+      border-radius: @radius-default;
+    }
+  }
+
+  &__text {
+    width: inherit;
+    color: @grid-item-text-color;
+    font-size: @grid-item-text-font-size;
+    line-height: @grid-item-text-line-height;
+    padding-top: @grid-item-text-padding-top;
+
+    &--small {
+      font-size: @grid-item-text-small-font-size;
+    }
+
+    &--middle {
+      font-size: @grid-item-text-middle-font-size;
+    }
+
+    &--horizontal {
+      padding-top: 0;
+      text-align: left;
+    }
+  }
+
+  &__description {
+    padding-top: @grid-item-description-padding-top;
+    width: inherit;
+    color: @grid-item-description-color;
+    font-size: @grid-item-description-font-size;
+    line-height: @grid-item-description-line-height;
+
+    &--horizontal {
+      margin-top: @grid-item-horizontal-text-description-top;
+      padding-left: @grid-item-horizontal-text-padding-left;
+      text-align-last: left;
+    }
+  }
+
+  :deep(&__icon) {
+    font-size: @grid-item-icon-font-size;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/grid-item/grid-item.vue b/packages/tdesign-uniapp/components/grid-item/grid-item.vue
new file mode 100644
index 000000000..0e07304fd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/grid-item.vue
@@ -0,0 +1,287 @@
+<template>
+  <view
+    :class="[
+      _.cls(classPrefix, [['auto-size', column == 0]]),
+      tClass
+    ]"
+    :style="_._style([gridItemStyle, customStyle])"
+    :hover-class="hover ? classPrefix + '--hover' : ''"
+    :hover-stay-time="200"
+    :aria-role="ariaRole || 'button'"
+    :aria-label="ariaLabel"
+    :aria-describedby="describedbyID"
+    @click="onClick"
+  >
+    <view
+      :class="_.cls(classPrefix + '__wrapper', [layout])"
+      :style="gridItemWrapperStyle"
+    >
+      <view
+        :class="[
+          _.cls(classPrefix + '__content', [align, layout]),
+          tClassContent
+        ]"
+        :style="gridItemContentStyle"
+      >
+        <slot />
+        <t-badge
+          v-if="badgeProps"
+          :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="[
+              _.cls(classPrefix + '__image', [getImageSize(column), ['icon', icon]]),
+              tClassImage
+            ]"
+          >
+            <block v-if="image && image != 'slot'">
+              <t-image
+                :t-class="_.cls(classPrefix + '__image', [getImageSize(column)]) + ' ' + tClassImage"
+                :custom-style="_._style([imageProps.style, imageProps.customStyle])"
+                :height="imageProps.height || ''"
+                :width="imageProps.width || ''"
+                :error="imageProps.error"
+                :lazy="imageProps.lazy"
+                :loading="imageProps.loading"
+                :shape="imageProps.shape || 'round'"
+                :src="imageProps.src || image"
+                :mode="imageProps.mode || 'widthFix'"
+                :webp="imageProps.webp"
+                :show-menu-by-longpress="imageProps.showMenuByLongpress"
+                :data-custom="imageProps.dataset"
+                @error="binderror($event, { custom: dataset || null })"
+                @load="bindload($event, { custom: dataset || null })"
+              />
+            </block>
+            <slot name="image" />
+            <block
+              v-if="iconName || _.isNoEmptyObj(iconData)"
+              name="icon"
+            >
+              <t-icon
+                :custom-style="iconData.style || ''"
+                :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ')"
+                :prefix="iconData.prefix"
+                :name="iconName || iconData.name"
+                :size="iconData.size"
+                :color="iconData.color"
+                :aria-hidden="!!iconData.ariaHidden"
+                :aria-label="iconData.ariaLabel"
+                :aria-role="iconData.ariaRole"
+              />
+            </block>
+          </view>
+        </t-badge>
+        <view
+          :id="describedbyID"
+          :class="_.cls(classPrefix + '__words', [layout])"
+          :aria-label="ariaLabel
+            || (
+              (badgeProps && (badgeProps.dot || badgeProps.count))
+                ? text + ',' + description + ',' + _.getBadgeAriaLabel({ ...(badgeProps || {}) })
+                : '')"
+        >
+          <view
+            v-if="text"
+            :class="[
+              _.cls(classPrefix + '__text', [getImageSize(column), layout]) + ' ',
+              tClassText
+            ]"
+          >
+            {{ text }}
+          </view>
+          <slot name="text" />
+          <view
+            v-if="description"
+            :class="[
+              _.cls(classPrefix + '__description', [getImageSize(column), layout]) + ' ',
+              tClassDescription
+            ]"
+          >
+            {{ description }}
+          </view>
+          <slot name="description" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tImage from '../image/image';
+import tIcon from '../icon/icon';
+import tBadge from '../badge/badge';
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniqueFactory, setIcon } from '../common/utils';
+import { isObject } from '../common/validator';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-grid-item`;
+const getUniqueID = uniqueFactory('grid_item');
+
+
+const LinkTypes = {
+  'redirect-to': 'redirectTo',
+  'switch-tab': 'switchTab',
+  relaunch: 'reLaunch',
+  'navigate-to': 'navigateTo',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-image`,
+    `${prefix}-class-text`,
+    `${prefix}-class-description`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.GridItem)],
+  components: {
+    tImage,
+    tIcon,
+    tBadge,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      gridItemStyle: '',
+      gridItemWrapperStyle: '',
+      gridItemContentStyle: '',
+      align: 'center',
+      column: 0,
+      describedbyID: '',
+      _,
+
+      iconName: '',
+      iconData: {},
+
+      hover: false,
+    };
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.describedbyID = getUniqueID();
+  },
+  methods: {
+    innerAfterLinked() {
+      this.updateStyle();
+      this.column = this[RELATION_MAP.GridItem].column;
+    },
+    binderror() {},
+    bindload() {},
+    getImageSize(column) {
+      if (column >= 5) return 'small';
+      if (column == 4) return 'middle';
+      return 'large';
+    },
+    updateStyle() {
+      const { hover, align } = this[RELATION_MAP.GridItem];
+      const gridItemStyles = [];
+      const gridItemWrapperStyles = [];
+      const gridItemContentStyles = [];
+      const widthStyle = this.getWidthStyle();
+      const paddingStyle = this.getPaddingStyle();
+      const borderStyle = this.getBorderStyle();
+      widthStyle && gridItemStyles.push(widthStyle);
+      paddingStyle && gridItemWrapperStyles.push(paddingStyle);
+      borderStyle && gridItemContentStyles.push(borderStyle);
+
+      this.gridItemStyle = `${gridItemStyles.join(';')}`;
+      this.gridItemWrapperStyle = gridItemWrapperStyles.join(';');
+      this.gridItemContentStyle = gridItemContentStyles.join(';');
+      this.hover = hover;
+      this.align = align;
+    },
+
+    // 判断应该加在gridItem上的宽度
+    getWidthStyle() {
+      const { column } = this[RELATION_MAP.GridItem];
+      return column > 0 ? `width:${(1 / column) * 100}%` : '';
+    },
+
+    // 获取应该加在gridWrap上的padding
+    getPaddingStyle() {
+      const { gutter } = this[RELATION_MAP.GridItem];
+      if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
+      return '';
+    },
+
+    // 判断border在grid-item-content上的css属性
+    getBorderStyle() {
+      const { gutter } = this[RELATION_MAP.GridItem];
+      let { border } = this[RELATION_MAP.GridItem];
+
+      if (!border) {
+        // 如果border的值没传或者是border的值为false
+        return '';
+      }
+
+      if (!isObject(border)) {
+        border = {};
+      }
+      const { color = '#266FE8', width = 2, style = 'solid' } = border ;
+
+      if (gutter) {
+        return `border:${width}rpx ${style} ${color}`;
+      }
+
+      return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
+    },
+
+    onClick(e) {
+      const { item } = e.currentTarget.dataset;
+      this.$emit('click', item);
+      this.jumpLink();
+    },
+
+    jumpLink() {
+      const { url, jumpType } = this;
+      if (url && jumpType) {
+        if (LinkTypes[jumpType]) {
+          wx[LinkTypes[jumpType]]({ url });
+        }
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './grid-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/grid-item/props.ts b/packages/tdesign-uniapp/components/grid-item/props.ts
new file mode 100644
index 000000000..a25dc26b6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/props.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGridItemProps } from './type';
+export default {
+  /** 透传至 Badge 属性 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 */
+  image: {
+    type: String,
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 链接跳转类型 */
+  jumpType: {
+    type: String,
+    default: 'navigate-to' as TdGridItemProps['jumpType'],
+    validator(val: TdGridItemProps['jumpType']): boolean {
+      if (!val) return true;
+      return ['redirect-to', 'switch-tab', 'relaunch', 'navigate-to'].includes(val);
+    },
+  },
+  /** 内容布局方式 */
+  layout: {
+    type: String,
+    default: 'vertical' as TdGridItemProps['layout'],
+    validator(val: TdGridItemProps['layout']): boolean {
+      if (!val) return true;
+      return ['vertical', 'horizontal'].includes(val);
+    },
+  },
+  /** 文本，可以通过 Props 传入文本，也可以自定义标题节点 */
+  text: {
+    type: String,
+  },
+  /** 点击后的跳转链接 */
+  url: {
+    type: String,
+    default: '',
+  },
+  /** 点击子项后触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/grid-item/type.ts b/packages/tdesign-uniapp/components/grid-item/type.ts
new file mode 100644
index 000000000..3f450879e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid-item/type.ts
@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+import type { TdImageProps as ImageProps } from '../image/type';
+
+export interface TdGridItemProps {
+  /**
+   * 透传至 Badge 属性
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
+   */
+  description?: string;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽
+   */
+  image?: string;
+  /**
+   * 透传至 Image 组件
+   * @default {}
+   */
+  imageProps?: ImageProps;
+  /**
+   * 链接跳转类型
+   * @default navigate-to
+   */
+  jumpType?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
+  /**
+   * 内容布局方式
+   * @default vertical
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * 文本，可以通过 Props 传入文本，也可以自定义标题节点
+   */
+  text?: string;
+  /**
+   * 点击后的跳转链接
+   * @default ''
+   */
+  url?: string;
+  /**
+   * 点击子项后触发
+   */
+  onClick?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/grid/README.en-US.md b/packages/tdesign-uniapp/components/grid/README.en-US.md
new file mode 100644
index 000000000..be818274a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/README.en-US.md
@@ -0,0 +1,94 @@
+:: BASE_DOC ::
+
+## API
+
+### Grid Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: left/center | N
+border | Boolean / Object | false | Typescript：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
+column | Number | 4 | \- | N
+gutter | Number | - | \- | N
+hover | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+
+### Grid Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Grid External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### GridItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+description | String | - | \- | N
+icon | String / Object | - | \- | N
+image | String | - | \- | N
+image-props | Object | {} | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+jump-type | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | options: vertical/horizontal | N
+text | String | - | \- | N
+url | String | - | \- | N
+
+### GridItem Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### GridItem Slots
+
+name | Description
+-- | --
+\- | \-
+description | \-
+image | \-
+text | \-
+
+### GridItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-description | \-
+t-class-image | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | - 
+--td-grid-card-radius | @radius-large | - 
+--td-grid-item-bg-color | @bg-color-container | - 
+--td-grid-item-description-color | @text-color-placeholder | - 
+--td-grid-item-description-font-size | 24rpx | - 
+--td-grid-item-description-line-height | 40rpx | - 
+--td-grid-item-description-padding-top | 0 | - 
+--td-grid-item-horizontal-text-description-top | 0 | - 
+--td-grid-item-horizontal-text-padding-left | 0 | - 
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-middle-width | 80rpx | - 
+--td-grid-item-image-small-width | 64rpx | - 
+--td-grid-item-image-width | 96rpx | - 
+--td-grid-item-padding | 32rpx | - 
+--td-grid-item-text-color | @text-color-primary | - 
+--td-grid-item-text-font-size | 28rpx | - 
+--td-grid-item-text-line-height | 44rpx | - 
+--td-grid-item-text-middle-font-size | 24rpx | - 
+--td-grid-item-text-padding-top | 16rpx | - 
+--td-grid-item-text-small-font-size | 24rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/grid/README.md b/packages/tdesign-uniapp/components/grid/README.md
new file mode 100644
index 000000000..97de165c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/README.md
@@ -0,0 +1,145 @@
+---
+title: Grid 宫格
+description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TGrid from 'tdesign-uniapp/grid/grid.vue';
+import TGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+```
+
+### 组件类型
+基础宫格
+
+{{ base }}
+
+带说明的宫格
+
+{{ description }}
+
+带边框的宫格
+
+{{ border }}
+
+带徽章的宫格
+
+{{ badge }}
+
+可滑动的宫格
+
+{{ scroll }}
+
+### 组件样式
+
+可传图标的宫格
+
+{{ icon-grid }}
+
+多行宫格
+
+{{ multiple }}
+
+卡片宫格
+
+{{ card }}
+
+
+## API
+
+### Grid Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 内容对齐方式。可选项：left/center | N
+border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
+column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
+gutter | Number | - | 间隔大小 | N
+hover | Boolean | false | 是否开启点击反馈 | N
+theme | String | default | 宫格的风格。可选项：default/card | N
+
+### Grid Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Grid External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### GridItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | {} | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+description | String | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 | N
+image-props | Object | {} | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/grid-item/type.ts) | N
+jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N
+url | String | - | 点击后的跳转链接 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
+### GridItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+description | 自定义 `description` 模块内容
+image | 自定义 `image` 模块内容
+text | 自定义 `text` 模块内容
+
+### GridItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-grid-bg-color | @bg-color-container | - |
+| --td-grid-card-radius | @radius-large | - |
+| --td-grid-item-bg-color | @bg-color-container | - |
+| --td-grid-item-description-color | @text-color-placeholder | - |
+| --td-grid-item-description-font-size | 24rpx | - |
+| --td-grid-item-description-line-height | 40rpx | - |
+| --td-grid-item-description-padding-top | 0 | - |
+| --td-grid-item-horizontal-text-description-top | 0 | - |
+| --td-grid-item-horizontal-text-padding-left | 0 | - |
+| --td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - |
+| --td-grid-item-image-middle-width | 80rpx | - |
+| --td-grid-item-image-small-width | 64rpx | - |
+| --td-grid-item-image-width | 96rpx | - |
+| --td-grid-item-padding | 32rpx | - |
+| --td-grid-item-text-color | @text-color-primary | - |
+| --td-grid-item-text-font-size | 28rpx | - |
+| --td-grid-item-text-line-height | 44rpx | - |
+| --td-grid-item-text-middle-font-size | 24rpx | - |
+| --td-grid-item-text-padding-top | 16rpx | - |
+| --td-grid-item-text-small-font-size | 24rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/grid/_example/badge/index.vue b/packages/tdesign-uniapp/components/grid/_example/badge/index.vue
new file mode 100644
index 000000000..a8a917733
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/badge/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <view>
+    <t-grid class="t-grid badge">
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+        :badge-props="{ dot: true }"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+        :badge-props=" { count: 8 } "
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+        :badge-props="{ count: 13 } "
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+        :badge-props="{ count: 'NEW' } "
+      />
+    </t-grid>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.external-class-content {
+    padding: 32rpx 0 !important;
+}
+
+.text {
+    font-size: 24rpx !important;
+    line-height: 40rpx !important;
+    padding-top: 20rpx !important;
+}
+:deep(.image) {
+    width: 64rpx !important;
+    height: 64rpx !important;
+}
+.image-icon {
+    width: 64rpx;
+    height: 64rpx;
+}
+
+.badge-circle {
+    display: flex;
+    justify-content: center;
+    background-color: #e34d59;
+    border-radius: 15rpx;
+    width: 36rpx;
+    height: 32rpx;
+    align-items: center;
+    position: absolute;
+    top: -15rpx;
+    left: 46rpx;
+}
+
+.circle {
+    width: 4rpx;
+    height: 4rpx;
+    border-radius: 2rpx;
+    background-color: white;
+    margin-left: 4rpx;
+}
+
+.badge-circle-container {
+    margin-left: -4rpx;
+    display: flex;
+}
+
+.badge :deep(.image) {
+    position: inherit;
+}
+
+.badge :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/base/index.vue b/packages/tdesign-uniapp/components/grid/_example/base/index.vue
new file mode 100644
index 000000000..b024704f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/base/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <view>
+    <t-grid
+      t-class="block"
+      :column="5"
+    >
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="最多四字"
+        :image="img1"
+      />
+    </t-grid>
+
+    <t-grid t-class="block">
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="最多五个字"
+        :image="img1"
+      />
+    </t-grid>
+
+    <t-grid
+      t-class="block"
+      :column="3"
+    >
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="最多六个文字"
+        :image="img3"
+      />
+    </t-grid>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+:deep(.block) {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+:deep(.block .image) {
+    position: inherit;
+}
+
+:deep(.block .image::before) {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/border/index.vue b/packages/tdesign-uniapp/components/grid/_example/border/index.vue
new file mode 100644
index 000000000..2890f0f3b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/border/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <view>
+    <view class="block">
+      <t-grid
+        :border="border"
+        :column="3"
+      >
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img2"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img3"
+        />
+      </t-grid>
+    </view>
+
+    <view class="block">
+      <t-grid
+        :border="border"
+        :column="2"
+        align="left"
+      >
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题最多六字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img2"
+        />
+      </t-grid>
+    </view>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+      border: {
+        color: 'var(--td-border-level-1-color, #E7E7E7)',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+.block :deep(.image) {
+    position: inherit;
+}
+
+.block :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/card/index.vue b/packages/tdesign-uniapp/components/grid/_example/card/index.vue
new file mode 100644
index 000000000..6f73c2f99
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/card/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <view>
+    <view class="block">
+      <t-grid
+        :column="4"
+        theme="card"
+      >
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img2"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img3"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="最多五个字"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img3"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          :image="img2"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="最多五个字"
+          :image="img2"
+        />
+      </t-grid>
+    </view>
+
+    <view class="block">
+      <t-grid
+        :column="2"
+        theme="card"
+        align="left"
+      >
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题最多六字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img2"
+        />
+      </t-grid>
+    </view>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+      border: '',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+.block :deep(.image) {
+    position: inherit;
+}
+
+.block :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/description/index.vue b/packages/tdesign-uniapp/components/grid/_example/description/index.vue
new file mode 100644
index 000000000..5131ad851
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/description/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <view>
+    <view class="block">
+      <t-grid :column="3">
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          :image="img2"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          :image="img3"
+        />
+      </t-grid>
+    </view>
+
+    <view class="block">
+      <t-grid
+        :column="2"
+        align="left"
+      >
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img1"
+        />
+        <t-grid-item
+          t-class-image="image"
+          text="标题文字"
+          description="描述文字"
+          layout="horizontal"
+          :image="img2"
+        />
+      </t-grid>
+    </view>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+.block :deep(.image) {
+    position: inherit;
+}
+
+.block :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/grid.less b/packages/tdesign-uniapp/components/grid/_example/grid.less
new file mode 100644
index 000000000..b2e8475ae
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/grid.less
@@ -0,0 +1,10 @@
+page {
+    .demo {
+        min-height: 100vh;
+        overflow: hidden;
+    }
+
+    .demo-section__wrapper {
+        margin: 32rpx 0;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/grid/_example/grid.vue b/packages/tdesign-uniapp/components/grid/_example/grid.vue
new file mode 100644
index 000000000..ecbeac6c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/grid.vue
@@ -0,0 +1,82 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Grid"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Grid 宫格"
+        desc="用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础宫格"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="带说明的宫格">
+        <description />
+      </t-demo>
+      <t-demo desc="带边框的宫格">
+        <border />
+      </t-demo>
+      <t-demo desc="带徽标的宫格">
+        <badge />
+      </t-demo>
+      <t-demo desc="可滑动的宫格">
+        <scroll />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="可传图标的宫格"
+      >
+        <icon-grid />
+      </t-demo>
+      <t-demo desc="通栏宫格">
+        <multiple />
+      </t-demo>
+      <t-demo desc="卡片宫格">
+        <card />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import border from './border/index.vue';
+import description from './description/index.vue';
+import badge from './badge/index.vue';
+import scroll from './scroll/index.vue';
+import multiple from './multiple/index.vue';
+import card from './card/index.vue';
+import iconGrid from './icon-grid/index.vue';
+
+export default {
+  components: {
+    BaseDemo,
+    border,
+    description,
+    badge,
+    scroll,
+    multiple,
+    card,
+    iconGrid,
+  },
+  data() {
+    return {};
+  },
+  onShareAppMessage() {
+    console.log('onShareAppMessage');
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './grid.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/icon-grid/index.vue b/packages/tdesign-uniapp/components/grid/_example/icon-grid/index.vue
new file mode 100644
index 000000000..53175bc94
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/icon-grid/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <view class="block">
+    <t-grid>
+      <t-grid-item
+        text="分享"
+        image="slot"
+      >
+        <template
+          #image
+        >
+          <view
+            class="grid-item__image"
+          >
+            <t-button
+              variant="text"
+              icon="share"
+              open-type="share"
+            />
+          </view>
+        </template>
+      </t-grid-item>
+      <t-grid-item
+        text="收藏"
+        icon="star"
+        @click="onClick"
+      />
+      <t-grid-item
+        text="保存"
+        icon="download"
+        @click="onClick"
+      />
+      <t-grid-item
+        text="编辑"
+        icon="edit-1"
+        @click="onClick"
+      />
+    </t-grid>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onClick() {
+      console.log('click grid-item');
+    },
+  },
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+:deep(.grid-item__image) {
+    --td-button-medium-icon-font-size: 48rpx;
+
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background-color: var(--td-bg-color-secondarycontainer);
+    border-radius: 12rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/multiple/index.vue b/packages/tdesign-uniapp/components/grid/_example/multiple/index.vue
new file mode 100644
index 000000000..c05f48fa3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/multiple/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <view class="block">
+    <t-grid
+      :column="4"
+    >
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img2"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="最多五个字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img3"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="标题文字"
+        :image="img1"
+      />
+      <t-grid-item
+        t-class-image="image"
+        text="最多五个字"
+        :image="img2"
+      />
+    </t-grid>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+      img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+      img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+.block :deep(.image) {
+    position: inherit;
+}
+
+.block :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/_example/scroll/index.vue b/packages/tdesign-uniapp/components/grid/_example/scroll/index.vue
new file mode 100644
index 000000000..e9c8773d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/_example/scroll/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <view
+    class="block"
+  >
+    <t-grid
+      :column="0"
+    >
+      <t-grid-item
+        v-for="(item, index) in gridItemList"
+        :key="index"
+        t-class-image="image"
+        :text="item.text"
+        :image="item.img"
+      />
+    </t-grid>
+  </view>
+</template>
+
+<script>
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      gridItemList: [
+        {
+          text: '标题文字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+        },
+        {
+          text: '标题文字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+        },
+        {
+          text: '标题文字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+        },
+        {
+          text: '最多五个字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
+        },
+        {
+          text: '最多五个字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
+        },
+        {
+          text: '最多五个字',
+          img: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    display: block;
+    margin-bottom: 32rpx;
+}
+
+.block :deep(.image) {
+    position: inherit;
+}
+
+.block :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/grid.less b/packages/tdesign-uniapp/components/grid/grid.less
new file mode 100644
index 000000000..4cefbeccf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/grid.less
@@ -0,0 +1,20 @@
+@import '../common/style/base.less';
+
+@grid-bg-color: var(--td-grid-bg-color, @bg-color-container);
+@grid-card-radius: var(--td-grid-card-radius, @radius-large);
+
+.@{prefix}-grid {
+  position: relative;
+  overflow: hidden;
+  background-color: @grid-bg-color;
+
+  &__content {
+    width: auto;
+  }
+
+  &--card {
+    margin: 0 32rpx;
+    border-radius: @grid-card-radius;
+    overflow: hidden;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/grid/grid.vue b/packages/tdesign-uniapp/components/grid/grid.vue
new file mode 100644
index 000000000..d90a1cd22
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/grid.vue
@@ -0,0 +1,94 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [theme]) + ' ' + tClass"
+  >
+    <view
+      v-if="column > 0"
+      :class="classPrefix + '__content'"
+      :style="contentStyle"
+    >
+      <slot />
+    </view>
+    <scroll-view
+      v-else
+      scroll-x
+      scroll-with-animation
+      :class="classPrefix + '__content'"
+      :style="'white-space: nowrap;' + contentStyle"
+    >
+      <slot />
+    </scroll-view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { isObject } from '../common/validator';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-grid`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: ['t-class'],
+  mixins: [ParentMixin(RELATION_MAP.GridItem)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      contentStyle: '',
+      _,
+    };
+  },
+  watch: {
+    column: 'watchCallback',
+    hover: 'watchCallback',
+    align: 'watchCallback',
+    gutter: 'watchCallback',
+    border: 'watchCallback',
+  },
+  mounted() {
+    this.updateContentStyle();
+  },
+  methods: {
+    watchCallback() {
+      this.updateContentStyle();
+      this.doForChild(t => t.updateStyle?.());
+    },
+    doForChild(action) {
+      this.children?.forEach(action);
+    },
+    updateContentStyle() {
+      const contentStyles = [];
+      const marginStyle = this.getContentMargin();
+      marginStyle && contentStyles.push(marginStyle);
+      this.contentStyle = contentStyles.join(';');
+    },
+
+    // 判断需不需要在content上加负margin以实现gutter间距
+    getContentMargin() {
+      const { gutter } = this;
+      let { border } = this;
+
+      if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
+      if (!isObject(border)) border = {} ;
+      const { width = 2 } = border ;
+      return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './grid.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/grid/props.ts b/packages/tdesign-uniapp/components/grid/props.ts
new file mode 100644
index 000000000..88c055a42
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/props.ts
@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGridProps } from './type';
+export default {
+  /** 内容对齐方式 */
+  align: {
+    type: String,
+    default: 'center' as TdGridProps['align'],
+    validator(val: TdGridProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'center'].includes(val);
+    },
+  },
+  /** 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式 */
+  border: {
+    type: [Boolean, Object],
+    default: false as TdGridProps['border'],
+  },
+  /** 每一行的列数量；为 0 时等于固定大小 */
+  column: {
+    type: Number,
+    default: 4,
+  },
+  /** 间隔大小 */
+  gutter: {
+    type: Number,
+  },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
+  /** 宫格的风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdGridProps['theme'],
+    validator(val: TdGridProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'card'].includes(val);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/grid/type.ts b/packages/tdesign-uniapp/components/grid/type.ts
new file mode 100644
index 000000000..e26ee44d0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/grid/type.ts
@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdGridProps {
+  /**
+   * 内容对齐方式
+   * @default center
+   */
+  align?: 'left' | 'center';
+  /**
+   * 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式
+   * @default false
+   */
+  border?:
+    | boolean
+    | {
+        color?: string;
+        width?: string;
+        style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset';
+      };
+  /**
+   * 每一行的列数量；为 0 时等于固定大小
+   * @default 4
+   */
+  column?: number;
+  /**
+   * 间隔大小
+   */
+  gutter?: number;
+  /**
+   * 是否开启点击反馈
+   * @default false
+   */
+  hover?: boolean;
+  /**
+   * 宫格的风格
+   * @default default
+   */
+  theme?: 'default' | 'card';
+}
diff --git a/packages/tdesign-uniapp/components/guide/README.en-US.md b/packages/tdesign-uniapp/components/guide/README.en-US.md
new file mode 100644
index 000000000..dac368a0b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/README.en-US.md
@@ -0,0 +1,109 @@
+:: BASE_DOC ::
+
+## API
+
+### Guide Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+back-button-props | Object | - | Typescript：`ButtonProps` | N
+counter | String / Function | - | Typescript：`string \| ((params: { total: number; current: number }) => string)` | N
+current | Number | - | `v-model:current` is supported | N
+default-current | Number | - | uncontrolled property | N
+finish-button-props | Object | - | Typescript：`ButtonProps` | N
+hide-back | Boolean | false | \- | N
+hide-counter | Boolean | false | \- | N
+hide-skip | Boolean | false | \- | N
+highlight-padding | Number | 16 | \- | N
+mode | String | popover | options: popover/dialog | N
+next-button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | N
+show-overlay | Boolean | true | \- | N
+skip-button-props | Object | - | Typescript：`ButtonProps` | N
+steps | Array | - | Typescript：`Array<GuideStep>` | N
+using-custom-navbar | Boolean | false | \- | N
+z-index | Number | 999999 | \- | N
+
+### Guide Events
+
+name | params | description
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | \-
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | \-
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+
+### Guide External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-back | \-
+t-class-body | \-
+t-class-finish | \-
+t-class-footer | \-
+t-class-next | \-
+t-class-popover | \-
+t-class-reference | \-
+t-class-skip | \-
+t-class-title | \-
+t-class-tooltip | \-
+
+### GuideStep
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+back-button-props | Object | - | Typescript：`ButtonProps` | N
+body | String | - | \- | N
+element | Function | - | required。Typescript：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | Y
+finish-button-props | Object | - | Typescript：`ButtonProps` | N
+highlight-padding | Number | - | \- | N
+mode | String | - | options: popover/dialog | N
+next-button-props | Object | - | Typescript：`ButtonProps` | N
+offset | Array | - | this api is in discussing. do not use it。Typescript：`Array<string \| number>` | N
+placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | N
+show-overlay | Boolean | true | \- | N
+skip-button-props | Object | - | Typescript：`ButtonProps` | N
+title | String | - | title of current step | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-guide-body-color | @text-color-secondary | - 
+--td-guide-body-font-weight | 400 | - 
+--td-guide-dialog-body-font-size | @font-size-m | - 
+--td-guide-dialog-body-line-height | 48rpx | - 
+--td-guide-dialog-body-margin-top | 16rpx | - 
+--td-guide-dialog-body-text-align | center | - 
+--td-guide-dialog-border-radius | @radius-extraLarge | - 
+--td-guide-dialog-footer-button-padding | 0 @spacer-3 | - 
+--td-guide-dialog-padding | @spacer-3 0 | - 
+--td-guide-dialog-title-font-size | 36rpx | - 
+--td-guide-dialog-title-line-height | 52rpx | - 
+--td-guide-dialog-title-text-align | center | - 
+--td-guide-dialog-width | 622rpx | - 
+--td-guide-footer-button-space | @spacer-1 | - 
+--td-guide-footer-margin-top | @spacer-3 | - 
+--td-guide-footer-text-align | right | - 
+--td-guide-popover-bg-color | @bg-color-container | - 
+--td-guide-popover-body-font-size | @font-size-base | - 
+--td-guide-popover-body-line-height | 44rpx | - 
+--td-guide-popover-body-margin-top | 8rpx | - 
+--td-guide-popover-body-text-align | left | - 
+--td-guide-popover-border | 2rpx solid @component-border | - 
+--td-guide-popover-border-radius | @radius-large | - 
+--td-guide-popover-max-width | 540rpx | - 
+--td-guide-popover-min-width | 480rpx | - 
+--td-guide-popover-padding | @spacer-2 | - 
+--td-guide-popover-shadow | @shadow-3 | - 
+--td-guide-popover-title-font-size | @font-size-m | - 
+--td-guide-popover-title-line-height | 48rpx | - 
+--td-guide-popover-title-text-align | left | - 
+--td-guide-reference-border | 4rpx solid @brand-color | - 
+--td-guide-reference-border-radius | @radius-default | - 
+--td-guide-reference-mask-color | @font-gray-2 | - 
+--td-guide-title-color | @text-color-primary | - 
+--td-guide-title-font-weight | 600 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/guide/README.md b/packages/tdesign-uniapp/components/guide/README.md
new file mode 100644
index 000000000..22e663ee5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/README.md
@@ -0,0 +1,146 @@
+---
+title: Guide 按钮
+description: 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TGuide from 'tdesign-uniapp/guide/guide.vue';
+```
+
+### 01 组件类型
+
+#### 基础按钮
+
+{{ base }}
+
+#### 不带遮罩的引导
+
+{{ no-mask }}
+
+#### 弹窗形式的引导
+
+{{ dialog }}
+
+#### 气泡与弹窗混合的引导
+
+{{ multiple }}
+
+#### 自定义气泡
+
+{{ content }}
+
+## API
+
+### Guide Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+back-button-props | Object | - | 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
+counter | String / Function | - | 用于自定义渲染计数部分。TS 类型：`string \| ((params: { total: number; current: number }) => string)` | N
+current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。支持语法糖 `v-model:current` | N
+default-current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
+finish-button-props | Object | - | 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+hide-back | Boolean | false | 是否隐藏返回按钮 | N
+hide-counter | Boolean | false | 是否隐藏计数 | N
+hide-skip | Boolean | false | 是否隐藏跳过按钮 | N
+highlight-padding | Number | 16 | 高亮框的内边距，单位rpx | N
+mode | String | popover | 引导框的类型。可选项：popover/dialog | N
+next-button-props | Object | - | 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | N
+show-overlay | Boolean | true | 是否出现遮罩层 | N
+skip-button-props | Object | - | 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps` | N
+steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。TS 类型：`Array<GuideStep>` | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+z-index | Number | 999999 | 提示框的层级 | N
+
+### Guide Events
+
+名称 | 参数 | 描述
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | 点击返回按钮时触发
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | 当前步骤发生变化时触发
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | 点击完成按钮时触发
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | 点击下一步时触发
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | 点击跳过按钮时触发
+
+### Guide External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-back | 返回按钮样式类
+t-class-body | 高亮框提示内容主体样式类
+t-class-finish | 结束按钮样式类
+t-class-footer | 高亮框底部操作区域样式类
+t-class-next | 下一步按钮样式类
+t-class-popover | 引导框样式类
+t-class-reference | 高亮框样式类
+t-class-skip | 跳过按钮样式类
+t-class-title | 高亮框提示内容标题样式类
+t-class-tooltip | 高亮框提示内容区域样式类
+
+### GuideStep
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+back-button-props | Object | - | 用于自定义当前引导框的返回按钮的内容。TS 类型：`ButtonProps` | N
+body | String | - | 当前步骤提示框的内容，支持插槽：slot="body-{{index}}" (1、当要显示body-{{index}}插槽时，请将body设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
+element | Function | - | 必需。高亮的节点。示例： `() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())`。TS 类型：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | Y
+finish-button-props | Object | - | 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+highlight-padding | Number | - | 高亮框的内边距，单位rpx | N
+mode | String | - | 引导框的类型。可选项：popover/dialog | N
+next-button-props | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
+offset | Array | - | 相对于 placement 的偏移量[left, top]，默认单位rpx，示例：[-10, 20] 或 ['10px', '8px'] 或 ['20rpx', '16rpx'] (仅当 `mode` 为 `popover` 时生效)。TS 类型：`Array<string \| number>` | N
+placement | String | 'top' | 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)。TS 类型：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/guide/type.ts) | N
+show-overlay | Boolean | true | 是否出现遮罩层 | N
+skip-button-props | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
+title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-guide-body-color | @text-color-secondary | - |
+| --td-guide-body-font-weight | 400 | - |
+| --td-guide-dialog-body-font-size | @font-size-m | - |
+| --td-guide-dialog-body-line-height | 48rpx | - |
+| --td-guide-dialog-body-margin-top | 16rpx | - |
+| --td-guide-dialog-body-text-align | center | - |
+| --td-guide-dialog-border-radius | @radius-extraLarge | - |
+| --td-guide-dialog-footer-button-padding | 0 @spacer-3 | - |
+| --td-guide-dialog-padding | @spacer-3 0 | - |
+| --td-guide-dialog-title-font-size | 36rpx | - |
+| --td-guide-dialog-title-line-height | 52rpx | - |
+| --td-guide-dialog-title-text-align | center | - |
+| --td-guide-dialog-width | 622rpx | - |
+| --td-guide-footer-button-space | @spacer-1 | - |
+| --td-guide-footer-margin-top | @spacer-3 | - |
+| --td-guide-footer-text-align | right | - |
+| --td-guide-popover-bg-color | @bg-color-container | - |
+| --td-guide-popover-body-font-size | @font-size-base | - |
+| --td-guide-popover-body-line-height | 44rpx | - |
+| --td-guide-popover-body-margin-top | 8rpx | - |
+| --td-guide-popover-body-text-align | left | - |
+| --td-guide-popover-border | 2rpx solid @component-border | - |
+| --td-guide-popover-border-radius | @radius-large | - |
+| --td-guide-popover-max-width | 540rpx | - |
+| --td-guide-popover-min-width | 480rpx | - |
+| --td-guide-popover-padding | @spacer-2 | - |
+| --td-guide-popover-shadow | @shadow-3 | - |
+| --td-guide-popover-title-font-size | @font-size-m | - |
+| --td-guide-popover-title-line-height | 48rpx | - |
+| --td-guide-popover-title-text-align | left | - |
+| --td-guide-reference-border | 4rpx solid @brand-color | - |
+| --td-guide-reference-border-radius | @radius-default | - |
+| --td-guide-reference-mask-color | @font-gray-2 | - |
+| --td-guide-title-color | @text-color-primary | - |
+| --td-guide-title-font-weight | 600 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/guide/_example/base/index.vue b/packages/tdesign-uniapp/components/guide/_example/base/index.vue
new file mode 100644
index 000000000..7ac28aefc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/base/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <view>
+    <view>
+      <view class="main-title">
+        <view class="title-major">
+          用户引导标题
+        </view>
+        <view class="title-sub">
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+      </view>
+      <view class="field label-field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="action">
+        <t-button
+          block
+          theme="light"
+          size="large"
+        >
+          重置
+        </t-button>
+        <t-button
+          block
+          theme="primary"
+          size="large"
+        >
+          确定
+        </t-button>
+      </view>
+    </view>
+
+    <t-guide
+      :current="current"
+      :steps="steps"
+      @skip="close"
+      @finish="close"
+    >
+      <template
+        #body-2
+      >
+        <view
+          class="slot-body"
+        >
+          slot展示 用户引导的说明文案
+        </view>
+      </template>
+    </t-guide>
+  </view>
+</template>
+
+<script>
+import tGuide from 'tdesign-uniapp/guide/guide.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { getRect } from 'tdesign-uniapp/common/utils';
+
+export default {
+  components: {
+    tGuide,
+    tInput,
+    tButton,
+  },
+  data() {
+    return {
+      current: -1,
+      steps: [],
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    setTimeout(() => {
+      this.attached();
+    }, 100);
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.current = 0;
+
+      this.steps = [
+        {
+          element: () => getRect(this, '.main-title', false, true),
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'center',
+        },
+        {
+          element: () => getRect(this, '.label-field', false, true),
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'bottom',
+          highlightPadding: 0,
+        },
+        {
+          element: () => getRect(this, '.action', false, true),
+          title: '用户引导标题',
+
+          // body: '用户引导的说明文案',
+          placement: 'bottom-right',
+        },
+      ];
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+<style>
+.main-title {
+    margin: 32rpx;
+    display: inline-block;
+}
+
+.title-major {
+    font-size: 48rpx;
+    font-weight: 600;
+    line-height: 72rpx;
+}
+
+.title-sub {
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    margin-top: 8rpx;
+}
+
+.action {
+    margin: 64rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 64rpx;
+}
+
+.slot-body {
+    margin-top: 8rpx;
+    text-align: left;
+    color: var(--td-text-color-secondary);
+    font-size: 28rpx;
+    font-weight: 400;
+    line-height: 44rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/_example/content/index.vue b/packages/tdesign-uniapp/components/guide/_example/content/index.vue
new file mode 100644
index 000000000..df1b47f91
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/content/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <view>
+    <view>
+      <view class="main-title">
+        <view class="title-major">
+          用户引导标题
+        </view>
+        <view class="title-sub">
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+      </view>
+      <view class="field label-field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="action">
+        <t-button
+          block
+          theme="light"
+          size="large"
+        >
+          重置
+        </t-button>
+        <t-button
+          block
+          theme="primary"
+          size="large"
+        >
+          确定
+        </t-button>
+      </view>
+    </view>
+
+    <t-guide
+      :current="current"
+      :steps="steps"
+      @skip="close"
+      @finish="close"
+    >
+      <template
+        #content-0
+      >
+        <view
+          class="content"
+        >
+          <TIcon
+            name="arrow-up"
+            size="64rpx"
+            color="#fff"
+            t-class="icon"
+          />
+          <p class="text">
+            1、自定义的图形或说明文案，用来解释或指导该功能使用。
+          </p>
+          <view class="footer">
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="light"
+              content="跳过"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="skip"
+            />
+            <t-button
+              v-else
+              theme="light"
+              content="返回"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="back"
+            />
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="primary"
+              content="下一步"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="next"
+            />
+            <t-button
+              v-else
+              theme="primary"
+              content="完成"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="finish"
+            />
+          </view>
+        </view>
+      </template>
+      <template
+        #content-1
+      >
+        <view
+          class="content"
+        >
+          <TIcon
+            name="arrow-up"
+            size="64rpx"
+            color="#fff"
+            t-class="icon"
+          />
+          <p class="text">
+            2、自定义的图形或说明文案，用来解释或指导该功能使用。
+          </p>
+          <view class="footer">
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="light"
+              content="跳过"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="skip"
+            />
+            <t-button
+              v-else
+              theme="light"
+              content="返回"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="back"
+            />
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="primary"
+              content="下一步"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="next"
+            />
+            <t-button
+              v-else
+              theme="primary"
+              content="完成"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="finish"
+            />
+          </view>
+        </view>
+      </template>
+
+      <template
+        #content-2
+      >
+        <view
+          class="content"
+        >
+          <TIcon
+            name="arrow-up"
+            size="64rpx"
+            color="#fff"
+            t-class="icon"
+          />
+          <p class="text">
+            3、自定义的图形或说明文案，用来解释或指导该功能使用。
+          </p>
+          <view class="footer">
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="light"
+              content="跳过"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="skip"
+            />
+            <t-button
+              v-else
+              theme="light"
+              content="返回"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="back"
+            />
+            <t-button
+              v-if="current < steps.length - 1"
+              theme="primary"
+              content="下一步"
+              size="extra-small"
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              @click="next"
+            />
+            <t-button
+              v-else
+              :t-class="useVirtualHost ? btn : ''"
+              :class="!useVirtualHost ? btn : ''"
+              theme="primary"
+              content="完成"
+              size="extra-small"
+              @click="finish"
+            />
+          </view>
+        </view>
+      </template>
+    </t-guide>
+  </view>
+</template>
+
+<script>
+import tGuide from 'tdesign-uniapp/guide/guide.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import TIcon from 'tdesign-uniapp/icon/icon.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { getRect } from 'tdesign-uniapp/common/utils';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tGuide,
+    tInput,
+    tButton,
+    TIcon,
+  },
+  data() {
+    return {
+      current: -1,
+      steps: [],
+
+      ml12: 'margin-left: 12px;',
+      useVirtualHost: canUseVirtualHost(),
+      btn: 'guide-demo-button',
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    setTimeout(() => {
+      this.attached();
+    }, 33);
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.current = 0;
+
+      this.steps = [
+        {
+          element: () => getRect(this, '.main-title', false, true),
+
+          placement: 'center',
+        },
+        {
+          element: () => getRect(this, '.label-field', false, true),
+          placement: 'bottom',
+          highlightPadding: 0,
+        },
+        {
+          element: () => getRect(this, '.action', false, true),
+          placement: 'bottom-right',
+        },
+      ];
+    },
+
+    close() {
+      this.$emit('close');
+    },
+
+    skip() {
+      this.current = -1;
+      this.close();
+    },
+
+    back() {
+      this.current = 0;
+    },
+
+    next() {
+      this.current = this.current + 1;
+    },
+
+    finish() {
+      this.current = -1;
+      this.close();
+    },
+  },
+};
+</script>
+<style>
+.main-title {
+    margin: 32rpx;
+    display: inline-block;
+}
+
+.title-major {
+    font-size: 48rpx;
+    font-weight: 600;
+    line-height: 72rpx;
+}
+
+.title-sub {
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    margin-top: 8rpx;
+}
+
+.action {
+    margin: 64rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 64rpx;
+}
+
+.content {
+    width: 480rpx;
+}
+
+.content :deep(.icon) {
+    font-weight: 700;
+    width: 64rpx;
+}
+
+.content .text {
+    margin-top: 32rpx;
+    color: #fff;
+    font-size: 32rpx;
+    font-weight: 600;
+    text-align: left;
+    line-height: 48rpx;
+}
+
+.content .footer {
+    text-align: right;
+    margin-top: 32rpx;
+}
+
+.content .footer :deep(.guide-demo-button + .guide-demo-button){
+    margin-left: 24rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/_example/dialog/index.vue b/packages/tdesign-uniapp/components/guide/_example/dialog/index.vue
new file mode 100644
index 000000000..ceac4076b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/dialog/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <view>
+    <view>
+      <view class="main-title">
+        <view class="title-major">
+          用户引导标题
+        </view>
+        <view class="title-sub">
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+      </view>
+      <view class="field label-field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="action">
+        <t-button
+          block
+          theme="light"
+          size="large"
+        >
+          重置
+        </t-button>
+        <t-button
+          block
+          theme="primary"
+          size="large"
+        >
+          确定
+        </t-button>
+      </view>
+    </view>
+
+    <t-guide
+      :current="current"
+      :steps="steps"
+      mode="dialog"
+      @skip="close"
+      @finish="close"
+    >
+      <template
+        #body-0
+      >
+        <view
+          class="slot-body"
+        >
+          <p>用户引导的说明文案 0</p>
+          <t-image
+            t-class="guide-demo-image"
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            mode="scaleToFill"
+            width="100%"
+          />
+        </view>
+      </template>
+      <template
+        #body-1
+      >
+        <view
+          class="slot-body"
+        >
+          <p>用户引导的说明文案 1</p>
+          <t-image
+            t-class="guide-demo-image"
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            mode="scaleToFill"
+            width="100%"
+          />
+        </view>
+      </template>
+
+      <template
+        #body-2
+      >
+        <view
+          class="slot-body"
+        >
+          <p>用户引导的说明文案 2</p>
+          <t-image
+            t-class="guide-demo-image"
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            mode="scaleToFill"
+            width="100%"
+          />
+        </view>
+      </template>
+    </t-guide>
+  </view>
+</template>
+
+<script>
+import tGuide from 'tdesign-uniapp/guide/guide.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+export default {
+  components: {
+    tGuide,
+    tInput,
+    tButton,
+    tImage,
+  },
+  data() {
+    return {
+      current: -1,
+      steps: [],
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    setTimeout(() => {
+      this.attached();
+    }, 33);
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.current = 0;
+
+      this.steps = [
+        {
+          title: '用户引导标题',
+          placement: 'center',
+        },
+        {
+          title: '用户引导标题',
+          placement: 'bottom',
+          highlightPadding: 0,
+        },
+        {
+          title: '用户引导标题',
+          placement: 'bottom-right',
+        },
+      ];
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+<style>
+.main-title {
+    margin: 32rpx;
+    display: inline-block;
+}
+
+.title-major {
+    font-size: 48rpx;
+    font-weight: 600;
+    line-height: 72rpx;
+}
+
+.title-sub {
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    margin-top: 8rpx;
+}
+
+.action {
+    margin: 64r px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 64rpx;
+}
+
+.slot-body {
+    margin-top: 8rpx;
+    text-align: center;
+    color: var(--td-text-color-secondary);
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+}
+
+.slot-body :deep(.guide-demo-image) {
+    margin-top: 48rpx;
+    width: 100%;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/_example/guide.less b/packages/tdesign-uniapp/components/guide/_example/guide.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/guide.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/guide/_example/guide.vue b/packages/tdesign-uniapp/components/guide/_example/guide.vue
new file mode 100644
index 000000000..374b402ca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/guide.vue
@@ -0,0 +1,265 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        class="demo-navbar"
+        title="Guide"
+        left-arrow
+      />
+    <!-- #endif -->
+    </view>
+
+    <view class="demo">
+      <t-demo-header
+        title="Guide 引导"
+        desc="逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础引导"
+        padding
+      >
+        <view style="text-align: center">
+          <t-button
+            theme="primary"
+            content="用户引导"
+            @click="handleBaseClick"
+          />
+        </view>
+        <t-popup
+          :visible="visibleBasePopup"
+          placement="bottom"
+          :show-overlay="false"
+        >
+          <view :style="'height: calc(100vh - ' + navbarHeight + 'px)'">
+            <BaseDemo
+              v-if="visibleBase"
+              @close="handleBaseClose"
+            />
+          </view>
+        </t-popup>
+      </t-demo>
+      <t-demo
+        desc="不带遮罩的引导"
+        padding
+      >
+        <view style="text-align: center">
+          <t-button
+            theme="primary"
+            content="用户引导"
+            @click="handleNoMaskClick"
+          />
+        </view>
+        <t-popup
+          :visible="visibleNoMaskPopup"
+          placement="bottom"
+          :show-overlay="false"
+        >
+          <view :style="'height: calc(100vh - ' + navbarHeight + 'px)'">
+            <no-mask
+              v-if="visibleNoMask"
+              @close="handleNoMaskClose"
+            />
+          </view>
+        </t-popup>
+      </t-demo>
+      <t-demo
+        desc="弹窗形式的引导"
+        padding
+      >
+        <view style="text-align: center">
+          <t-button
+            theme="primary"
+            content="用户引导"
+            @click="handleDialogClick"
+          />
+        </view>
+        <t-popup
+          :visible="visibleDialogPopup"
+          placement="bottom"
+          :show-overlay="false"
+        >
+          <view :style="'height: calc(100vh - ' + navbarHeight + 'px)'">
+            <dialogDemo
+              v-if="visibleDialog"
+              @close="handleDialogClose"
+            />
+          </view>
+        </t-popup>
+      </t-demo>
+      <t-demo
+        desc="气泡与弹窗混合的引导"
+        padding
+      >
+        <view style="text-align: center">
+          <t-button
+            theme="primary"
+            content="用户引导"
+            @click="handleDialog1Click"
+          />
+        </view>
+        <t-popup
+          :visible="visibleDialog1Popup"
+          placement="bottom"
+          :show-overlay="false"
+        >
+          <view :style="'height: calc(100vh - ' + navbarHeight + 'px)'">
+            <multiple
+              v-if="visibleDialog1"
+              @close="handleDialog1Close"
+            />
+          </view>
+        </t-popup>
+      </t-demo>
+      <t-demo
+        desc="自定义气泡"
+        padding
+      >
+        <view style="text-align: center">
+          <t-button
+            theme="primary"
+            content="用户引导"
+            @click="handleContentClick"
+          />
+        </view>
+        <t-popup
+          :visible="visibleContentPopup"
+          placement="bottom"
+          :show-overlay="false"
+        >
+          <view :style="'height: calc(100vh - ' + navbarHeight + 'px)'">
+            <contentDemo
+              v-if="visibleContent"
+              @close="handleContentClose"
+            />
+          </view>
+        </t-popup>
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import BaseDemo from './base/index.vue';
+import noMask from './no-mask/index.vue';
+import dialogDemo from './dialog/index.vue';
+import multiple from './multiple/index.vue';
+import contentDemo from './content/index.vue';
+
+export default {
+  components: {
+    tButton,
+    tPopup,
+    BaseDemo,
+    noMask,
+    dialogDemo,
+    multiple,
+    contentDemo,
+  },
+  data() {
+    return {
+      navbarHeight: 60,
+      visibleBasePopup: false,
+      visibleBase: false,
+      visibleNoMaskPopup: false,
+      visibleNoMask: false,
+      visibleDialogPopup: false,
+      visibleDialog: false,
+      visibleDialog1Popup: false,
+      visibleDialog1: false,
+      visibleContentPopup: false,
+      visibleContent: false,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.createSelectorQuery()
+        .in(this)
+        .select('.custom-navbar')
+        .boundingClientRect((rect) => {
+          this.navbarHeight = rect.height;
+        })
+        .exec();
+    }, 33);
+  },
+  methods: {
+    handleBaseClick() {
+      this.visibleBasePopup = true;
+      setTimeout(() => {
+        this.visibleBase = true;
+      }, 300);
+    },
+
+    handleBaseClose() {
+      this.visibleBasePopup = false;
+      setTimeout(() => {
+        this.visibleBase = false;
+      }, 300);
+    },
+
+    handleNoMaskClick() {
+      this.visibleNoMaskPopup = true;
+      setTimeout(() => {
+        this.visibleNoMask = true;
+      }, 300);
+    },
+
+    handleNoMaskClose() {
+      this.visibleNoMaskPopup = false;
+      setTimeout(() => {
+        this.visibleNoMask = false;
+      }, 300);
+    },
+
+    handleDialogClick() {
+      this.visibleDialogPopup = true;
+      setTimeout(() => {
+        this.visibleDialog = true;
+      }, 300);
+    },
+
+    handleDialogClose() {
+      this.visibleDialogPopup = false;
+      setTimeout(() => {
+        this.visibleDialog = false;
+      }, 300);
+    },
+
+    handleDialog1Click() {
+      this.visibleDialog1Popup = true;
+      setTimeout(() => {
+        this.visibleDialog1 = true;
+      }, 300);
+    },
+
+    handleDialog1Close() {
+      this.visibleDialog1Popup = false;
+      setTimeout(() => {
+        this.visibleDialog1 = false;
+      }, 300);
+    },
+
+    handleContentClick() {
+      this.visibleContentPopup = true;
+      setTimeout(() => {
+        this.visibleContent = true;
+      }, 300);
+    },
+
+    handleContentClose() {
+      this.visibleContentPopup = false;
+      setTimeout(() => {
+        this.visibleContent = false;
+      }, 300);
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './guide.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/_example/multiple/index.vue b/packages/tdesign-uniapp/components/guide/_example/multiple/index.vue
new file mode 100644
index 000000000..e6285e3f9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/multiple/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <view>
+    <view>
+      <view class="main-title">
+        <view class="title-major">
+          用户引导标题
+        </view>
+        <view class="title-sub">
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+      </view>
+      <view class="field label-field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="action">
+        <t-button
+          block
+          theme="light"
+          size="large"
+        >
+          重置
+        </t-button>
+        <t-button
+          block
+          theme="primary"
+          size="large"
+        >
+          确定
+        </t-button>
+      </view>
+    </view>
+
+    <t-guide
+      :current="current"
+      :steps="steps"
+      @skip="close"
+      @finish="close"
+    >
+      <template
+        #body-1
+      >
+        <view
+          class="slot-body"
+        >
+          <p>用户引导的说明文案 1</p>
+          <t-image
+            class="guide-demo-image"
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            mode="scaleToFill"
+            width="100%"
+          />
+        </view>
+      </template>
+    </t-guide>
+  </view>
+</template>
+
+<script>
+import tGuide from 'tdesign-uniapp/guide/guide.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+import { getRect } from 'tdesign-uniapp/common/utils';
+
+export default {
+  components: {
+    tGuide,
+    tInput,
+    tButton,
+    tImage,
+  },
+  data() {
+    return {
+      current: -1,
+      steps: [],
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    setTimeout(() => {
+      this.attached();
+    }, 33);
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.current = 0;
+
+      this.steps = [
+        {
+          element: () => getRect(this, '.main-title', false, true),
+
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'center',
+        },
+        {
+          element: () => getRect(this, '.label-field', false, true),
+
+          title: '用户引导标题',
+          placement: 'bottom',
+          mode: 'dialog',
+        },
+        {
+          element: () => getRect(this, '.action', false, true),
+
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'bottom-right',
+        },
+      ];
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+<style>
+.main-title {
+    margin: 32rpx;
+    display: inline-block;
+}
+
+.title-major {
+    font-size: 48rpx;
+    font-weight: 600;
+    line-height: 72rpx;
+}
+
+.title-sub {
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    margin-top: 8rpx;
+}
+
+.action {
+    margin: 63rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 63rpx;
+}
+
+.slot-body {
+    margin-top: 8rpx;
+    text-align: center;
+    color: var(--td-text-color-secondary);
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+}
+
+.slot-body .guide-demo-image {
+    margin-top: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/_example/no-mask/index.vue b/packages/tdesign-uniapp/components/guide/_example/no-mask/index.vue
new file mode 100644
index 000000000..1ec8917e4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/_example/no-mask/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <view>
+    <view>
+      <view class="main-title">
+        <view class="title-major">
+          用户引导标题
+        </view>
+        <view class="title-sub">
+          按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+        </view>
+      </view>
+      <view class="field label-field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="field">
+        <t-input
+          label="标签文字"
+          layout="vertical"
+          placeholder="请输入文字"
+        />
+      </view>
+      <view class="action">
+        <t-button
+          block
+          theme="light"
+          size="large"
+        >
+          重置
+        </t-button>
+        <t-button
+          block
+          theme="primary"
+          size="large"
+        >
+          确定
+        </t-button>
+      </view>
+    </view>
+
+    <t-guide
+      :current="current"
+      :steps="steps"
+      :show-overlay="false"
+      @skip="close"
+      @finish="close"
+    />
+  </view>
+</template>
+
+<script>
+import tGuide from 'tdesign-uniapp/guide/guide.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import { getRect } from 'tdesign-uniapp/common/utils';
+
+export default {
+  components: {
+    tGuide,
+    tInput,
+    tButton,
+  },
+  data() {
+    return {
+      current: -1,
+      steps: [],
+    };
+  },
+  mounted() {
+    // 处理小程序 attached 生命周期
+    setTimeout(() => {
+      this.attached();
+    }, 33);
+  },
+  created() {},
+  methods: {
+    attached() {
+      this.current = 0;
+
+      this.steps = [
+        {
+          element: () => getRect(this, '.main-title', false, true),
+
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'center',
+        },
+        {
+          element: () => getRect(this, '.label-field', false, true),
+
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'bottom',
+          highlightPadding: 0,
+        },
+        {
+          element: () => getRect(this, '.action', false, true),
+          title: '用户引导标题',
+          body: '用户引导的说明文案',
+          placement: 'top-right',
+        },
+      ];
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+<style>
+.main-title {
+    margin: 32rpx;
+    display: inline-block;
+}
+
+.title-major {
+    font-size: 48rpx;
+    font-weight: 600;
+    line-height: 72rpx;
+}
+
+.title-sub {
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    margin-top: 8rpx;
+}
+
+.action {
+    margin: 64rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 64rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/content.vue b/packages/tdesign-uniapp/components/guide/content.vue
new file mode 100644
index 000000000..4cea8d970
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/content.vue
@@ -0,0 +1,319 @@
+<template>
+  <slot
+    v-if="!title && !body"
+    :name="'content-' + current"
+  />
+  <block v-else>
+    <view :class="tClassTooltip">
+      <view
+        v-if="title"
+        :class="tClassTitle + ' ' + classPrefix + '__title--' + modeType"
+      >
+        {{ title }}
+      </view>
+      <slot
+        v-else
+        :name="'title-' + current"
+      />
+      <view
+        v-if="body"
+        :class="tClassBody + ' ' + classPrefix + '__body--' + modeType"
+      >
+        {{ body }}
+      </view>
+      <slot
+        v-else
+        :name="'body-' + current"
+      />
+    </view>
+    <view
+      v-if="current !== -1"
+      :class="tClassFooter + ' ' + classPrefix + '__footer ' + classPrefix + '__footer--' + modeType"
+    >
+      <block
+        v-if="current < steps.length - 1 && !hideSkip"
+        name="button"
+      >
+        <TButton
+          :t-id="skipButton.tId"
+          :custom-style="skipButton.style"
+          :block="skipButton.block"
+          :t-class="useVirtualHost ? skipButton.tClass : ''"
+          :class="!useVirtualHost ? skipButton.tClass : ''"
+          :disabled="skipButton.disabled"
+          :data-type="skipButton.dataType"
+          :data-extra="skipButton.dataExtra"
+          :custom-dataset="skipButton.customDataset"
+          :content="skipButton.content"
+          :icon="skipButton.icon"
+          :loading="skipButton.loading"
+          :loading-props="skipButton.loadingProps"
+          :theme="skipButton.theme"
+          :ghost="skipButton.ghost"
+          :shape="skipButton.shape"
+          :size="skipButton.size"
+          :variant="skipButton.variant"
+          :open-type="skipButton.openType"
+          :hover-class="skipButton.hoverClass"
+          :hover-stop-propagation="skipButton.hoverStopPropagation"
+          :hover-start-time="skipButton.hoverStartTime"
+          :hover-stay-time="skipButton.hoverStayTime"
+          :lang="skipButton.lang"
+          :session-from="skipButton.sessionFrom"
+          :send-message-title="skipButton.sendMessageTitle"
+          :send-message-path="skipButton.sendMessagePath"
+          :send-message-img="skipButton.sendMessageImg"
+          :app-parameter="skipButton.appParameter"
+          :show-message-card="skipButton.showMessageCard"
+          :aria-label="skipButton.ariaLabel"
+          @click="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @getuserinfo="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @contact="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @getphonenumber="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @error="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @opensetting="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @launchapp="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: skipButton.type })"
+        />
+      </block>
+      <block
+        v-else-if="current === steps.length - 1 && !hideBack"
+        name="button"
+      >
+        <TButton
+          :t-id="backButton.tId"
+          :custom-style="backButton.style"
+          :block="backButton.block"
+          :t-class="useVirtualHost ? backButton.tClass : ''"
+          :class="!useVirtualHost ? backButton.tClass : ''"
+          :disabled="backButton.disabled"
+          :data-type="backButton.dataType"
+          :data-extra="backButton.dataExtra"
+          :custom-dataset="backButton.customDataset"
+          :content="backButton.content"
+          :icon="backButton.icon"
+          :loading="backButton.loading"
+          :loading-props="backButton.loadingProps"
+          :theme="backButton.theme"
+          :ghost="backButton.ghost"
+          :shape="backButton.shape"
+          :size="backButton.size"
+          :variant="backButton.variant"
+          :open-type="backButton.openType"
+          :hover-class="backButton.hoverClass"
+          :hover-stop-propagation="backButton.hoverStopPropagation"
+          :hover-start-time="backButton.hoverStartTime"
+          :hover-stay-time="backButton.hoverStayTime"
+          :lang="backButton.lang"
+          :session-from="backButton.sessionFrom"
+          :send-message-title="backButton.sendMessageTitle"
+          :send-message-path="backButton.sendMessagePath"
+          :send-message-img="backButton.sendMessageImg"
+          :app-parameter="backButton.appParameter"
+          :show-message-card="backButton.showMessageCard"
+          :aria-label="backButton.ariaLabel"
+          @click="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @getuserinfo="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @contact="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @getphonenumber="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @error="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @opensetting="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @launchapp="(e) => onTplButtonTap(e, { type: backButton.type })"
+          @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: backButton.type })"
+        />
+      </block>
+      <block
+        v-if="current < steps.length - 1"
+        name="button"
+      >
+        <TButton
+          :t-id="nextButton.tId"
+          :custom-style="nextButton.style"
+          :block="nextButton.block"
+          :t-class="useVirtualHost ? nextButton.tClass : ''"
+          :class="!useVirtualHost ? nextButton.tClass : ''"
+          :disabled="nextButton.disabled"
+          :data-type="nextButton.dataType"
+          :data-extra="nextButton.dataExtra"
+          :custom-dataset="nextButton.customDataset"
+          :content="nextButton.content"
+          :icon="nextButton.icon"
+          :loading="nextButton.loading"
+          :loading-props="nextButton.loadingProps"
+          :theme="nextButton.theme"
+          :ghost="nextButton.ghost"
+          :shape="nextButton.shape"
+          :size="nextButton.size"
+          :variant="nextButton.variant"
+          :open-type="nextButton.openType"
+          :hover-class="nextButton.hoverClass"
+          :hover-stop-propagation="nextButton.hoverStopPropagation"
+          :hover-start-time="nextButton.hoverStartTime"
+          :hover-stay-time="nextButton.hoverStayTime"
+          :lang="nextButton.lang"
+          :session-from="nextButton.sessionFrom"
+          :send-message-title="nextButton.sendMessageTitle"
+          :send-message-path="nextButton.sendMessagePath"
+          :send-message-img="nextButton.sendMessageImg"
+          :app-parameter="nextButton.appParameter"
+          :show-message-card="nextButton.showMessageCard"
+          :aria-label="nextButton.ariaLabel"
+          @click="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @getuserinfo="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @contact="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @getphonenumber="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @error="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @opensetting="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @launchapp="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: nextButton.type })"
+        />
+      </block>
+      <block
+        v-else
+        name="button"
+      >
+        <TButton
+          :t-id="finishButton.tId"
+          :custom-style="finishButton.style"
+          :block="finishButton.block"
+          :t-class="useVirtualHost ? finishButton.tClass : ''"
+          :class="!useVirtualHost ? finishButton.tClass : ''"
+          :disabled="finishButton.disabled"
+          :data-type="finishButton.dataType"
+          :data-extra="finishButton.dataExtra"
+          :custom-dataset="finishButton.customDataset"
+          :content="finishButton.content"
+          :icon="finishButton.icon"
+          :loading="finishButton.loading"
+          :loading-props="finishButton.loadingProps"
+          :theme="finishButton.theme"
+          :ghost="finishButton.ghost"
+          :shape="finishButton.shape"
+          :size="finishButton.size"
+          :variant="finishButton.variant"
+          :open-type="finishButton.openType"
+          :hover-class="finishButton.hoverClass"
+          :hover-stop-propagation="finishButton.hoverStopPropagation"
+          :hover-start-time="finishButton.hoverStartTime"
+          :hover-stay-time="finishButton.hoverStayTime"
+          :lang="finishButton.lang"
+          :session-from="finishButton.sessionFrom"
+          :send-message-title="finishButton.sendMessageTitle"
+          :send-message-path="finishButton.sendMessagePath"
+          :send-message-img="finishButton.sendMessageImg"
+          :app-parameter="finishButton.appParameter"
+          :show-message-card="finishButton.showMessageCard"
+          :aria-label="finishButton.ariaLabel"
+          @click="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @getuserinfo="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @contact="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @getphonenumber="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @error="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @opensetting="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @launchapp="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: finishButton.type })"
+        />
+      </block>
+    </view>
+  </block>
+</template>
+<script>
+import TButton from '../button/button.vue';
+import { canUseVirtualHost } from '../common/version';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    body: {
+      type: String,
+      default: '',
+    },
+    current: {
+      type: [String, Number],
+      default: '',
+    },
+    classPrefix: {
+      type: String,
+      default: '',
+    },
+    prefix: {
+      type: String,
+      default: '',
+    },
+    tClassTooltip: {
+      type: String,
+      default: '',
+    },
+    tClassBody: {
+      type: String,
+      default: '',
+    },
+    tClassTitle: {
+      type: String,
+      default: '',
+    },
+    tClassFooter: {
+      type: String,
+      default: '',
+    },
+    skipButton: {
+      type: [Object, null],
+      default: null,
+    },
+    backButton: {
+      type: [Object, null],
+      default: null,
+    },
+    nextButton: {
+      type: [Object, null],
+      default: null,
+    },
+    finishButton: {
+      type: [Object, null],
+      default: null,
+    },
+    modeType: {
+      type: String,
+      default: '',
+    },
+    hideSkip: {
+      type: Boolean,
+      default: false,
+    },
+    hideBack: {
+      type: Boolean,
+      default: false,
+    },
+    steps: {
+      type: Array,
+      default: () => ([]),
+    },
+  },
+  emits: [
+    'onTplButtonTap',
+  ],
+  data() {
+    return {
+      useVirtualHost: canUseVirtualHost(),
+    };
+  },
+  methods: {
+    onTplButtonTap(...args) {
+      this.$emit('onTplButtonTap', ...args);
+    },
+  },
+};
+</script>
+<style scoped>
+@import './guide.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/guide.less b/packages/tdesign-uniapp/components/guide/guide.less
new file mode 100644
index 000000000..1fb4398b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/guide.less
@@ -0,0 +1,134 @@
+@import '../common/style/base.less';
+
+@guide-reference-mask-color: var(--td-guide-reference-mask-color, @font-gray-2);
+@guide-reference-border-radius: var(--td-guide-reference-border-radius, @radius-default);
+@guide-reference-border: var(--td-guide-reference-border, 4rpx solid @brand-color);
+
+@guide-popover-bg-color: var(--td-guide-popover-bg-color, @bg-color-container);
+@guide-popover-border: var(--td-guide-popover-border, 2rpx solid @component-border);
+@guide-popover-border-radius: var(--td-guide-popover-border-radius, @radius-large);
+@guide-dialog-border-radius: var(--td-guide-dialog-border-radius, @radius-extraLarge);
+@guide-popover-shadow: var(--td-guide-popover-shadow, @shadow-3);
+@guide-popover-padding: var(--td-guide-popover-padding, @spacer-2);
+@guide-dialog-padding: var(--td-guide-dialog-padding, @spacer-3 0);
+@guide-popover-min-width: var(--td-guide-popover-min-width, 480rpx);
+@guide-popover-max-width: var(--td-guide-popover-max-width, 540rpx);
+@guide-dialog-width: var(--td-guide-dialog-width, 622rpx);
+
+@guide-popover-title-text-align: var(--td-guide-popover-title-text-align, left);
+@guide-dialog-title-text-align: var(--td-guide-dialog-title-text-align, center);
+@guide-title-color: var(--td-guide-title-color, @text-color-primary);
+@guide-popover-title-font-size: var(--td-guide-popover-title-font-size, @font-size-m);
+@guide-dialog-title-font-size: var(--td-guide-dialog-title-font-size, 36rpx);
+@guide-title-font-weight: var(--td-guide-title-font-weight, 600);
+@guide-popover-title-line-height: var(--td-guide-popover-title-line-height, 48rpx);
+@guide-dialog-title-line-height: var(--td-guide-dialog-title-line-height, 52rpx);
+
+@guide-popover-body-margin-top: var(--td-guide-popover-body-margin-top, 8rpx);
+@guide-dialog-body-margin-top: var(--td-guide-dialog-body-margin-top, 16rpx);
+@guide-popover-body-text-align: var(--td-guide-popover-body-text-align, left);
+@guide-dialog-body-text-align: var(--td-guide-dialog-body-text-align, center);
+@guide-body-color: var(--td-guide-body-color, @text-color-secondary);
+@guide-popover-body-font-size: var(--td-guide-popover-body-font-size, @font-size-base);
+@guide-dialog-body-font-size: var(--td-guide-dialog-body-font-size, @font-size-m);
+@guide-body-font-weight: var(--td-guide-body-font-weight, 400);
+@guide-popover-body-line-height: var(--td-guide-popover-body-line-height, 44rpx);
+@guide-dialog-body-line-height: var(--td-guide-dialog-body-line-height, 48rpx);
+
+@guide-footer-text-align: var(--td-guide-footer-text-align, right);
+@guide-footer-margin-top: var(--td-guide-footer-margin-top, @spacer-3);
+@guide-footer-button-space: var(--td-guide-footer-button-space, @spacer-1);
+@guide-dialog-footer-button-padding: var(--td-guide-dialog-footer-button-padding, 0 @spacer-3);
+
+.@{prefix}-guide {
+  &__reference {
+    position: absolute;
+    box-shadow: 0 0 0 0 @guide-reference-mask-color, @guide-reference-mask-color 0 0 0 5000px;
+    border-radius: @guide-reference-border-radius;
+    transition: all @anim-duration-base @anim-time-fn-ease-out;
+
+    &--nonoverlay {
+      box-shadow: none;
+      border: @guide-reference-border;
+    }
+  }
+
+  &__container {
+    display: inline-block;
+
+    &--popover {
+      background-color: @guide-popover-bg-color;
+      border: @guide-popover-border;
+      border-radius: @guide-popover-border-radius;
+      box-shadow: @guide-popover-shadow;
+      padding: @guide-popover-padding;
+      min-width: @guide-popover-min-width;
+      max-width: @guide-popover-max-width;
+    }
+
+    &--dialog {
+      background-color: @guide-popover-bg-color;
+      border-radius: @guide-dialog-border-radius;
+      padding: @guide-dialog-padding;
+      width: @guide-dialog-width;
+    }
+  }
+
+  &__title--popover {
+    text-align: @guide-popover-title-text-align;
+    color: @guide-title-color;
+    font-size: @guide-popover-title-font-size;
+    font-weight: @guide-title-font-weight;
+    line-height: @guide-popover-title-line-height;
+  }
+
+  &__title--dialog {
+    text-align: @guide-dialog-title-text-align;
+    color: @guide-title-color;
+    font-size: @guide-dialog-title-font-size;
+    font-weight: @guide-title-font-weight;
+    line-height: @guide-dialog-title-line-height;
+  }
+
+  &__body--popover {
+    margin-top: @guide-popover-body-margin-top;
+    text-align: @guide-popover-body-text-align;
+    color: @guide-body-color;
+    font-size: @guide-popover-body-font-size;
+    font-weight: @guide-body-font-weight;
+    line-height: @guide-popover-body-line-height;
+  }
+
+  &__body--dialog {
+    margin-top: @guide-dialog-body-margin-top;
+    text-align: @guide-dialog-body-text-align;
+    color: @guide-body-color;
+    font-size: @guide-dialog-body-font-size;
+    font-weight: @guide-body-font-weight;
+    line-height: @guide-dialog-body-line-height;
+  }
+
+  &__footer {
+    text-align: @guide-footer-text-align;
+    margin-top: @guide-footer-margin-top;
+
+    :deep(.@{prefix}-guide__button + .@{prefix}-guide__button) {
+      margin-left: @guide-footer-button-space;
+    }
+
+    &--dialog {
+      display: flex;
+      padding: @guide-dialog-footer-button-padding;
+
+      :deep(.@{prefix}-guide__button:last-child) {
+        flex-grow: 1;
+        
+        // 适配 QQ 小程序等
+        display: inline-flex;
+        .t-button {
+          flex-grow: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/guide/guide.vue b/packages/tdesign-uniapp/components/guide/guide.vue
new file mode 100644
index 000000000..056a7060e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/guide.vue
@@ -0,0 +1,536 @@
+<template>
+  <view>
+    <t-overlay
+      v-if="modeType === 'popover'"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      background-color="transparent"
+      :z-index="zIndex"
+    >
+      <view :class="tClass + ' ' + classPrefix">
+        <view
+          :class="tClassReference + ' ' + classPrefix + '__reference ' + (nonOverlay ? classPrefix + '__reference--nonoverlay' : '')"
+          :style="referenceStyle"
+        />
+        <view
+          :class="tClassPopover + ' ' + classPrefix + '__container ' + (title || body ? classPrefix + '__container--' + modeType : '')"
+          :style="popoverStyle"
+        >
+          <ContentComp
+            :title="title"
+            :body="body"
+            :current="_current"
+            :class-prefix="classPrefix"
+            :prefix="prefix"
+            :skip-button="skipButton"
+            :back-button="backButton"
+            :next-button="nextButton"
+            :finish-button="finishButton"
+            :mode-type="modeType"
+            :hide-skip="hideSkip"
+            :hide-back="hideBack"
+            :steps="steps"
+            :t-class-tooltip="tClassTooltip"
+            :t-class-body="tClassBody"
+            :t-class-title="tClassTitle"
+            :t-class-footer="tClassFooter"
+            @onTplButtonTap="onTplButtonTap"
+          >
+            <template #content-0>
+              <slot name="content-0" />
+            </template>
+            <template #content-1>
+              <slot name="content-1" />
+            </template>
+            <template #content-2>
+              <slot name="content-2" />
+            </template>
+            <template #content-3>
+              <slot name="content-3" />
+            </template>
+            <template #content-4>
+              <slot name="content-4" />
+            </template>
+            <template #content-5>
+              <slot name="content-5" />
+            </template>
+            <template #content-6>
+              <slot name="content-6" />
+            </template>
+
+            <template #title-0>
+              <slot name="title-0" />
+            </template>
+            <template #title-1>
+              <slot name="title-1" />
+            </template>
+            <template #title-2>
+              <slot name="title-2" />
+            </template>
+            <template #title-3>
+              <slot name="title-3" />
+            </template>
+            <template #title-4>
+              <slot name="title-4" />
+            </template>
+            <template #title-5>
+              <slot name="title-5" />
+            </template>
+            <template #title-6>
+              <slot name="title-6" />
+            </template>
+
+            <template #body-0>
+              <slot name="body-0" />
+            </template>
+            <template #body-1>
+              <slot name="body-1" />
+            </template>
+            <template #body-2>
+              <slot name="body-2" />
+            </template>
+            <template #body-3>
+              <slot name="body-3" />
+            </template>
+            <template #body-4>
+              <slot name="body-4" />
+            </template>
+            <template #body-5>
+              <slot name="body-5" />
+            </template>
+            <template #body-6>
+              <slot name="body-6" />
+            </template>
+          </ContentComp>
+        </view>
+      </view>
+    </t-overlay>
+    <t-popup
+      v-else-if="modeType === 'dialog'"
+      :visible="visible"
+      :show-overlay="!nonOverlay"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :z-index="zIndex"
+      placement="center"
+    >
+      <view :class="tClass + ' ' + classPrefix">
+        <view :class="tClassPopover + ' ' + classPrefix + '__container ' + (title || body ? classPrefix + '__container--' + modeType : '')">
+          <ContentComp
+            :title="title"
+            :body="body"
+            :current="_current"
+            :class-prefix="classPrefix"
+            :prefix="prefix"
+            :skip-button="skipButton"
+            :back-button="backButton"
+            :next-button="nextButton"
+            :finish-button="finishButton"
+            :mode-type="modeType"
+            :hide-skip="hideSkip"
+            :hide-back="hideBack"
+            :steps="steps"
+            :t-class-tooltip="tClassTooltip"
+            :t-class-body="tClassBody"
+            :t-class-title="tClassTitle"
+            :t-class-footer="tClassFooter"
+            @onTplButtonTap="onTplButtonTap"
+          >
+            <template #content-0>
+              <slot name="content-0" />
+            </template>
+            <template #content-1>
+              <slot name="content-1" />
+            </template>
+            <template #content-2>
+              <slot name="content-2" />
+            </template>
+            <template #content-3>
+              <slot name="content-3" />
+            </template>
+            <template #content-4>
+              <slot name="content-4" />
+            </template>
+            <template #content-5>
+              <slot name="content-5" />
+            </template>
+            <template #content-6>
+              <slot name="content-6" />
+            </template>
+
+            <template #title-0>
+              <slot name="title-0" />
+            </template>
+            <template #title-1>
+              <slot name="title-1" />
+            </template>
+            <template #title-2>
+              <slot name="title-2" />
+            </template>
+            <template #title-3>
+              <slot name="title-3" />
+            </template>
+            <template #title-4>
+              <slot name="title-4" />
+            </template>
+            <template #title-5>
+              <slot name="title-5" />
+            </template>
+            <template #title-6>
+              <slot name="title-6" />
+            </template>
+
+            <template #body-0>
+              <slot name="body-0" />
+            </template>
+            <template #body-1>
+              <slot name="body-1" />
+            </template>
+            <template #body-2>
+              <slot name="body-2" />
+            </template>
+            <template #body-3>
+              <slot name="body-3" />
+            </template>
+            <template #body-4>
+              <slot name="body-4" />
+            </template>
+            <template #body-5>
+              <slot name="body-5" />
+            </template>
+            <template #body-6>
+              <slot name="body-6" />
+            </template>
+          </ContentComp>
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+
+<script>
+import tOverlay from '../overlay/overlay';
+import tButton from '../button/button';
+import tPopup from '../popup/popup';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { isFunction, isNumber } from '../common/validator';
+import { debounce, getRect, rpx2px, styles, unitConvert, nextTick, systemInfo, coalesce } from '../common/utils';
+import ContentComp from './content.vue';
+
+import useCustomNavbar from '../mixins/using-custom-navbar';
+
+const name = `${prefix}-guide`;
+
+let that;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'current',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-reference`,
+    `${prefix}-class-popover`,
+
+    `${prefix}-class-tooltip`,
+    `${prefix}-class-title`,
+    `${prefix}-class-body`,
+    `${prefix}-class-footer`,
+
+    `${prefix}-class-skip`,
+    `${prefix}-class-next`,
+    `${prefix}-class-back`,
+    `${prefix}-class-finish`,
+  ],
+  mixins: [
+    useCustomNavbar,
+  ],
+  components: {
+    tOverlay,
+    tButton,
+    tPopup,
+    ContentComp,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      visible: false,
+      _current: -1,
+      _steps: [],
+      referenceStyle: '',
+      popoverStyle: '',
+      title: '',
+      body: '',
+      nonOverlay: false,
+      modeType: '',
+
+      skipButton: {},
+      backButton: {},
+      nextButton: {},
+      finishButton: {},
+    };
+  },
+  watch: {
+    steps: {
+      handler() {
+        this._init();
+      },
+      deep: true,
+    },
+    current: {
+      handler(v) {
+        this._current = v;
+      },
+    },
+    _current: '_init',
+    showOverlay: '_init',
+  },
+  created() {
+    that = this;
+    // this._init =
+    this._getPlacement = this.getPlacement();
+  },
+  mounted() {
+    this._init();
+  },
+  methods: {
+    _init: debounce(() => that.init(), 20),
+    async init() {
+      console.log('doing init');
+      const { steps } = this;
+      const { _current } = this;
+      const step = steps[_current];
+      if (!step) {
+        this.visible = false;
+        return;
+      }
+
+      const modeType = (coalesce(step.mode, this.mode)) === 'dialog' ? 'dialog' : 'popover';
+      const showOverlay = coalesce(step.showOverlay, this.showOverlay);
+      this.nonOverlay = !showOverlay;
+      this.modeType = modeType;
+
+
+      // if (current === _current) return;
+      if (modeType === 'popover') {
+        const rect = await step.element();
+        console.log('rect', rect);
+        if (!rect) return;
+        const highlightPadding = rpx2px(coalesce(step.highlightPadding, this.highlightPadding));
+        const referenceTop = rect.top - highlightPadding;
+        const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding;
+        const referenceLeft = rect.left - highlightPadding;
+        const referenceWidth = rect.width + 2 * highlightPadding;
+        const referenceHeight = rect.height + 2 * highlightPadding;
+
+        const style = {
+          top: `${referenceTop}px`,
+          right: `${referenceRight}px`,
+          left: `${referenceLeft}px`,
+          width: `${referenceWidth}px`,
+          height: `${referenceHeight}px`,
+        };
+        this._steps = this.steps;
+        // this._current = this.current;
+        this.visible = true;
+        this.referenceStyle = styles(style);
+        this.title = coalesce(step.title, '');
+        this.body = coalesce(step.body, '');
+        this.makeButtonProps(step, 'popover');
+
+        const popoverStyle = await this.placementOffset(step, style);
+        this.popoverStyle = popoverStyle;
+      } else {
+        this._steps = this.steps;
+        // this._current = this.current;
+        this.visible = true;
+        this.title = coalesce(step.title, '');
+        this.body = coalesce(step.body, '');
+        this.makeButtonProps(step, 'dialog');
+      }
+    },
+    async placementOffset({ placement, offset }, place) {
+      await nextTick();
+      const rect = await getRect(this, `.${name}__container`);
+      const style = this._getPlacement[placement]?.(rect, place, offset);
+      return styles({ position: 'absolute', ...style });
+    },
+    makeButtonProps(step, mode) {
+      const {
+        tClassSkip,
+        tClassNext,
+        tClassBack,
+        tClassFinish,
+      } = this;
+      let skipButton = coalesce(step.skipButtonProps, this.skipButtonProps);
+      const size = mode === 'popover' ? 'extra-small' : 'medium';
+      skipButton = {
+        theme: 'light',
+        content: '跳过',
+        size,
+        ...skipButton,
+        tClass: `${tClassSkip} ${name}__button ${skipButton?.class || ''}`,
+        type: 'skip',
+      };
+      let nextButton = coalesce(step.nextButtonProps, this.nextButtonProps);
+      nextButton = {
+        theme: 'primary',
+        content: '下一步',
+        size,
+        ...nextButton,
+        tClass: `${tClassNext} ${name}__button ${nextButton?.class || ''}`,
+        type: 'next',
+      };
+      nextButton = { ...nextButton, content: this.buttonContent(nextButton) };
+      let backButton = coalesce(step.backButtonProps, this.backButtonProps);
+      backButton = {
+        theme: 'light',
+        content: '返回',
+        size,
+        ...backButton,
+        tClass: `${tClassBack} ${name}__button ${backButton?.class || ''}`,
+        type: 'back',
+      };
+      let finishButton = coalesce(step.finishButtonProps, this.finishButtonProps);
+      finishButton = {
+        theme: 'primary',
+        content: '完成',
+        size,
+        ...finishButton,
+        tClass: `${tClassFinish} ${name}__button ${finishButton?.class || ''}`,
+        type: 'finish',
+      };
+      finishButton = { ...finishButton, content: this.buttonContent(finishButton) };
+
+      this.skipButton = skipButton;
+      this.nextButton = nextButton;
+      this.backButton = backButton;
+      this.finishButton = finishButton;
+    },
+    renderCounter() {
+      const { steps, _current, counter } = this;
+      const stepsTotal = steps.length;
+      const innerCurrent = _current + 1;
+      const popupSlotCounter = isFunction(counter) ? counter({ total: stepsTotal, current: innerCurrent }) : counter;
+      return counter ? popupSlotCounter : `(${innerCurrent}/${stepsTotal})`;
+    },
+    buttonContent(button) {
+      const { hideCounter } = this;
+      return `${button.content.replace(/ \(.*?\)/, '')} ${hideCounter ? '' : this.renderCounter()}`;
+    },
+    onTplButtonTap(e, { type }) {
+      console.log('onTplButtonTap.type', type);
+      const params = { e, current: this._current, total: this.steps.length };
+      switch (type) {
+        case 'next':
+          this.$emit('next-step-click', { next: this._current + 1, ...params });
+          // this.setData({ current: this..current + 1 });
+          this._current = this._current + 1;
+          break;
+        case 'skip':
+          this.$emit('skip', params);
+          // this.setData({ current: -1 });
+          this._current = -1;
+          break;
+        case 'back':
+          this.$emit('back', params);
+          // this.setData({ current: 0 });
+          this._current = 0;
+          break;
+        case 'finish':
+          this.$emit('finish', params);
+          // this.setData({ current: -1 });
+          this._current = -1;
+          break;
+        default:
+          break;
+      }
+      console.log('_current', this._current);
+      this.$emit('change', { current: this._current });
+    },
+    getPlacement() {
+      const space = rpx2px(32);
+      const offsetLeft = offset => unitConvert(isNumber(offset?.[0]) ? `${offset?.[0]}rpx` : offset?.[0] || 0);
+      const offsetTop = offset => unitConvert(isNumber(offset?.[1]) ? `${offset?.[1]}rpx` : offset?.[1] || 0);
+      const left = place => parseFloat(place.left);
+      const right = place => parseFloat(place.right);
+      const top = place => parseFloat(place.top);
+      const height = place => parseFloat(place.height);
+      const width = place => parseFloat(place.width);
+      return {
+        center: (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        bottom: (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        'bottom-left': (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
+        }),
+        'bottom-right': (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
+        }),
+        left: (rect, place, offset) => ({
+          top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        'left-top': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        'left-bottom': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        right: (rect, place, offset) => ({
+          top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        'right-top': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        'right-bottom': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        top: (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        'top-left': (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
+        }),
+        'top-right': (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
+        }),
+      };
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './guide.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/guide/props.ts b/packages/tdesign-uniapp/components/guide/props.ts
new file mode 100644
index 000000000..6006d48b5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/props.ts
@@ -0,0 +1,98 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGuideProps } from './type';
+export default {
+  /** 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }` */
+  backButtonProps: {
+    type: Object,
+  },
+  /** 用于自定义渲染计数部分 */
+  counter: {
+    type: [String, Function],
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */
+  current: {
+    type: Number,
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性 */
+  defaultCurrent: {
+    type: Number,
+  },
+  /** 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }` */
+  finishButtonProps: {
+    type: Object,
+  },
+  /** 是否隐藏返回按钮 */
+  hideBack: Boolean,
+  /** 是否隐藏计数 */
+  hideCounter: Boolean,
+  /** 是否隐藏跳过按钮 */
+  hideSkip: Boolean,
+  /** 高亮框的内边距，单位rpx */
+  highlightPadding: {
+    type: Number,
+    default: 16,
+  },
+  /** 引导框的类型 */
+  mode: {
+    type: String,
+    default: 'popover' as TdGuideProps['mode'],
+    validator(val: TdGuideProps['mode']): boolean {
+      if (!val) return true;
+      return ['popover', 'dialog'].includes(val);
+    },
+  },
+  /** 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' } */
+  nextButtonProps: {
+    type: Object,
+  },
+  /** 是否出现遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' } */
+  skipButtonProps: {
+    type: Object,
+  },
+  /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等 */
+  steps: {
+    type: Array,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 提示框的层级 */
+  zIndex: {
+    type: Number,
+    default: 999999,
+  },
+  /** 点击返回按钮时触发 */
+  onBack: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当前步骤发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击完成按钮时触发 */
+  onFinish: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击下一步时触发 */
+  onNextStepClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击跳过按钮时触发 */
+  onSkip: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/guide/type.ts b/packages/tdesign-uniapp/components/guide/type.ts
new file mode 100644
index 000000000..0486afaa6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/guide/type.ts
@@ -0,0 +1,174 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+
+export interface TdGuideProps {
+  /**
+   * 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 用于自定义渲染计数部分
+   */
+  counter?: string | ((params: { total: number; current: number }) => string);
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
+   */
+  current?: number;
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性
+   */
+  defaultCurrent?: number;
+  /**
+   * 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 是否隐藏返回按钮
+   * @default false
+   */
+  hideBack?: boolean;
+  /**
+   * 是否隐藏计数
+   * @default false
+   */
+  hideCounter?: boolean;
+  /**
+   * 是否隐藏跳过按钮
+   * @default false
+   */
+  hideSkip?: boolean;
+  /**
+   * 高亮框的内边距，单位rpx
+   * @default 16
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   * @default popover
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等
+   */
+  steps?: Array<GuideStep>;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 提示框的层级
+   * @default 999999
+   */
+  zIndex?: number;
+  /**
+   * 点击返回按钮时触发
+   */
+  onBack?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 当前步骤发生变化时触发
+   */
+  onChange?: (current: number, context?: { e: MouseEvent; total: number }) => void;
+  /**
+   * 点击完成按钮时触发
+   */
+  onFinish?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 点击下一步时触发
+   */
+  onNextStepClick?: (context: { e: MouseEvent; next: number; current: number; total: number }) => void;
+  /**
+   * 点击跳过按钮时触发
+   */
+  onSkip?: (context: { e: MouseEvent; current: number; total: number }) => void;
+}
+
+export interface GuideStep {
+  /**
+   * 用于自定义当前引导框的返回按钮的内容
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 当前步骤提示框的内容，支持插槽：slot="body-{{index}}" (1、当要显示body-{{index}}插槽时，请将body设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空)
+   * @default ''
+   */
+  body?: string;
+  /**
+   * 高亮的节点。示例： `() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())`
+   */
+  element: StepElement;
+  /**
+   * 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 高亮框的内边距，单位rpx
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 用于自定义当前引导框的下一步按钮的内容
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 相对于 placement 的偏移量[left, top]，默认单位rpx，示例：[-10, 20] 或 ['10px', '8px'] 或 ['20rpx', '16rpx'] (仅当 `mode` 为 `popover` 时生效)
+   */
+  offset?: Array<string | number>;
+  /**
+   * 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)
+   * @default 'top'
+   */
+  placement?: StepPopoverPlacement;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 用于自定义当前步骤引导框的跳过按钮的内容
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空)
+   * @default ''
+   */
+  title?: string;
+}
+
+export type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
+
+export type StepPopoverPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom'
+  | 'center';
diff --git a/packages/tdesign-uniapp/components/icon/README.en-US.md b/packages/tdesign-uniapp/components/icon/README.en-US.md
new file mode 100644
index 000000000..d8494163b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/README.en-US.md
@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### Icon Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String | - | \- | N
+name | String | - | required | Y
+prefix | String | - | \- | N
+size | String / Number | '' | \- | N
+
+### Icon Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### Icon External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+ant: norma | ant: norma | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/icon/README.md b/packages/tdesign-uniapp/components/icon/README.md
new file mode 100644
index 000000000..7d251bd5e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/README.md
@@ -0,0 +1,109 @@
+---
+title: Icon 图标
+description: 图标。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TIcon from 'tdesign-uniapp/icon/icon.vue';
+```
+
+## 常见问题
+
+<details>
+  <summary>
+    控制台告警：Failed to load font
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    告警属于开发者工具的 bug，可以忽略，具体可以看 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">官网文档</a>
+  </p>
+</details>
+
+
+### 基础组件图标
+
+{{ base }}
+
+### 自定义组件图标
+
+{{ custom }}
+
+自定义图标用法，下面以 `iconfont` 为例
+
+#### 准备图标文件
+
+文件后缀应为`.wxss`，如下方代码块所示：
+
+```css
+@font-face {
+  font-family: 'icon';  // 使用自定义的字体名称
+  ···
+}
+
+.icon {
+  font-family: 'icon' !important;  // 字体名称
+  ···
+}
+
+.icon-a-0:before {  // icon 图标。注意 FontClass 前缀与 font-family 保持一致
+  content: '\e64d';
+}
+```
+- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
+- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
+
+> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64`  (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
+
+#### 引入自定义图标
+
+- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
+- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
+
+#### 自定义图标的使用
+
+ `<t-icon>` 组件中的 `prefix` 属性值与前面设置的 `Font Family` 保持一致，即 `prefix="icon"`，`name` 属性值为自定义图标名称，如图标的 `className` 为 `icon-a-1h`，则 `name="a-1h"`。
+
+### 图片链接
+
+{{ iconImage }}
+
+<td-icons-view framework-content/>
+
+## API
+
+### Icon Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String | - | 图标颜色 | N
+name | String | - | 必需。图标名称或图片链接 | Y
+prefix | String | - | 自定义图标前缀 | N
+size | String / Number | '' | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` | N
+
+### Icon Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击图标时触发
+
+### Icon External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| ant: norma | ant: norma | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/icon/_example/base/index.vue b/packages/tdesign-uniapp/components/icon/_example/base/index.vue
new file mode 100644
index 000000000..1335ac368
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/base/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view class="demo__list">
+    <view
+      v-for="(item, index) in icons"
+      :key="index"
+      class="demo__card"
+    >
+      <t-icon
+        :name="item"
+        size="48rpx"
+        :data-name="item"
+        @click="onIconTap($event, { name: item })"
+      />
+
+      <view class="demo__card-name">
+        {{ item }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import icons from '../data';
+
+export default {
+  components: {
+    tIcon,
+  },
+  data() {
+    return {
+      icons,
+    };
+  },
+  created() {},
+  methods: {
+    onIconTap(event, { name, type }) {
+      if (type === 'prefix') {
+        return;
+      }
+
+      uni.showToast({
+        title: name,
+        icon: 'none',
+        duration: 1000,
+      });
+    },
+  },
+};
+</script>
+<style>
+.demo__list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16rpx 32rpx;
+}
+
+.demo__card {
+    flex: 0 0 25%;
+    text-align: center;
+    margin-bottom: 30rpx;
+    color: var(--td-text-color-primary);
+}
+
+.demo__card-name {
+    font-size: 24rpx;
+    color: #999;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/_example/custom/index.vue b/packages/tdesign-uniapp/components/icon/_example/custom/index.vue
new file mode 100644
index 000000000..2ddfa5109
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/custom/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <view class="demo__list">
+    <view
+      v-for="(item, index) in prefixIcons"
+      :key="index"
+      class="demo__card"
+    >
+      <t-icon
+        :name="item"
+        size="48rpx"
+        prefix="icon"
+        :data-name="item"
+        data-type="prefix"
+        @click="onIconTap($event, { name: item, type: 'prefix' })"
+      />
+
+      <view class="demo__card-name">
+        {{ item }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tIcon,
+  },
+  data() {
+    return {
+      prefixIcons: ['a-0', 'a-1h', 'a-2h', 'a-3h'],
+    };
+  },
+  created() {},
+  methods: {
+    onIconTap(event, { name, type }) {
+      if (type === 'prefix') {
+        return;
+      }
+      uni.showToast({
+        title: name,
+        icon: 'none',
+        duration: 1000,
+      });
+    },
+  },
+};
+</script>
+<style>
+.demo__list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16rpx 32rpx;
+}
+
+.demo__card {
+    flex: 0 0 25%;
+    text-align: center;
+}
+
+.demo__card-name {
+    font-size: 24rpx;
+    color: #999;
+}
+
+/* 自定义图标 */
+@font-face {
+    font-family: 'icon'; /* Project id 3144196 */
+    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+        format('woff2');
+}
+
+.icon {
+    font-family: 'icon' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-0:before {
+    content: '\e64d';
+}
+
+.icon-a-1h:before {
+    content: '\e64e';
+}
+
+.icon-a-2h:before {
+    content: '\e64f';
+}
+
+.icon-a-3h:before {
+    content: '\e650';
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/_example/data.js b/packages/tdesign-uniapp/components/icon/_example/data.js
new file mode 100644
index 000000000..8a6e42d61
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/data.js
@@ -0,0 +1,2 @@
+const icons = ['accessibility-filled', 'accessibility', 'activity-filled', 'activity', 'add-and-subtract', 'add-circle-filled', 'add-circle', 'add-rectangle-filled', 'add-rectangle', 'add', 'address-book-filled', 'address-book', 'adjustment-filled', 'adjustment', 'airplay-wave-filled', 'airplay-wave', 'alarm-add-filled', 'alarm-add', 'alarm-filled', 'alarm-off-filled', 'alarm-off', 'alarm', 'align-top', 'align-vertical', 'alpha', 'analytics-filled', 'analytics', 'anchor', 'angry-filled', 'angry', 'animation-1-filled', 'animation-1', 'animation-filled', 'animation', 'anticlockwise-filled', 'anticlockwise', 'api', 'app-filled', 'app', 'apple-filled', 'apple', 'application-filled', 'application', 'architecture-hui-style-filled', 'architecture-hui-style', 'archway-1-filled', 'archway-1', 'archway-filled', 'archway', 'arrow-down-circle-filled', 'arrow-down-circle', 'arrow-down-rectangle-filled', 'arrow-down-rectangle', 'arrow-down', 'arrow-left-circle-filled', 'arrow-left-circle', 'arrow-left-down-circle-filled', 'arrow-left-down-circle', 'arrow-left-down', 'arrow-left-right-1', 'arrow-left-right-2', 'arrow-left-right-3', 'arrow-left-right-circle-filled', 'arrow-left-right-circle', 'arrow-left-up-circle-filled', 'arrow-left-up-circle', 'arrow-left-up', 'arrow-left', 'arrow-right-circle-filled', 'arrow-right-circle', 'arrow-right-down-circle-filled', 'arrow-right-down-circle', 'arrow-right-down', 'arrow-right-up-circle-filled', 'arrow-right-up-circle', 'arrow-right-up', 'arrow-right', 'arrow-triangle-down-filled', 'arrow-triangle-down', 'arrow-triangle-up-filled', 'arrow-triangle-up', 'arrow-up-circle-filled', 'arrow-up-circle', 'arrow-up-down-1', 'arrow-up-down-2', 'arrow-up-down-3', 'arrow-up-down-circle-filled', 'arrow-up-down-circle', 'arrow-up', 'artboard', 'article-filled', 'article', 'assignment-checked-filled', 'assignment-checked', 'assignment-code-filled', 'assignment-code', 'assignment-error-filled', 'assignment-error', 'assignment-filled', 'assignment-user-filled', 'assignment-user', 'assignment', 'attach', 'attic-1-filled', 'attic-1', 'attic-filled', 'attic', 'audio-filled', 'audio', 'awkward-filled', 'awkward', 'backtop-rectangle-filled', 'backtop-rectangle', 'backtop', 'backup-filled', 'backup', 'backward-filled', 'backward', 'bad-laugh-filled', 'bad-laugh', 'bamboo-shoot-filled', 'bamboo-shoot', 'banana-filled', 'banana', 'barbecue-filled', 'barbecue', 'barcode-1', 'barcode', 'base-station', 'battery-add-filled', 'battery-add', 'battery-charging-filled', 'battery-charging', 'battery-filled', 'battery-low-filled', 'battery-low', 'battery', 'bean-filled', 'bean', 'beer-filled', 'beer', 'beta', 'bifurcate-filled', 'bifurcate', 'bill-filled', 'bill', 'bluetooth', 'bone-filled', 'bone', 'book-filled', 'book-open-filled', 'book-open', 'book-unknown-filled', 'book-unknown', 'book', 'bookmark-add-filled', 'bookmark-add', 'bookmark-checked-filled', 'bookmark-checked', 'bookmark-double-filled', 'bookmark-double', 'bookmark-filled', 'bookmark-minus-filled', 'bookmark-minus', 'bookmark', 'braces', 'brackets', 'bread-filled', 'bread', 'bridge-1-filled', 'bridge-1', 'bridge-2-filled', 'bridge-2', 'bridge-3', 'bridge-4', 'bridge-5-filled', 'bridge-5', 'bridge-6-filled', 'bridge-6', 'bridge', 'brightness-1-filled', 'brightness-1', 'brightness-filled', 'brightness', 'broccoli-filled', 'broccoli', 'browse-filled', 'browse-gallery-filled', 'browse-gallery', 'browse-off-filled', 'browse-off', 'browse', 'brush-filled', 'brush', 'bug-filled', 'bug-report-filled', 'bug-report', 'bug', 'building-1-filled', 'building-1', 'building-2-filled', 'building-2', 'building-3-filled', 'building-3', 'building-4-filled', 'building-4', 'building-5-filled', 'building-5', 'building-filled', 'building', 'bulletpoint', 'button-filled', 'button', 'cabbage-filled', 'cabbage', 'cake-filled', 'cake', 'calculation-1-filled', 'calculation-1', 'calculation', 'calculator-1', 'calculator-filled', 'calculator', 'calendar-1-filled', 'calendar-1', 'calendar-2-filled', 'calendar-2', 'calendar-edit-filled', 'calendar-edit', 'calendar-event-filled', 'calendar-event', 'calendar-filled', 'calendar', 'call-1-filled', 'call-1', 'call-cancel-filled', 'call-cancel', 'call-filled', 'call-forwarded-filled', 'call-forwarded', 'call-incoming-filled', 'call-incoming', 'call-off-filled', 'call-off', 'call', 'calm-1-filled', 'calm-1', 'calm-filled', 'calm', 'camera-1-filled', 'camera-1', 'camera-2-filled', 'camera-2', 'camera-filled', 'camera-off-filled', 'camera-off', 'camera', 'candy-filled', 'candy', 'card-filled', 'card', 'cardmembership-filled', 'cardmembership', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'cart-add-filled', 'cart-add', 'cart-filled', 'cart', 'cast-filled', 'cast', 'castle-1-filled', 'castle-1', 'castle-2-filled', 'castle-2', 'castle-3-filled', 'castle-3', 'castle-4-filled', 'castle-4', 'castle-5-filled', 'castle-5', 'castle-6-filled', 'castle-6', 'castle-7-filled', 'castle-7', 'castle-filled', 'castle', 'cat-filled', 'cat', 'catalog-filled', 'catalog', 'cd-filled', 'cd', 'celsius', 'center-focus-strong-filled', 'center-focus-strong', 'centimeter', 'certificate-1-filled', 'certificate-1', 'certificate-filled', 'certificate', 'chart-3d-filled', 'chart-3d', 'chart-add-filled', 'chart-add', 'chart-analytics', 'chart-area-filled', 'chart-area-multi-filled', 'chart-area-multi', 'chart-area', 'chart-bar-filled', 'chart-bar', 'chart-bubble-filled', 'chart-bubble', 'chart-column-filled', 'chart-column', 'chart-combo-filled', 'chart-combo', 'chart-filled', 'chart-line-data-1', 'chart-line-data', 'chart-line-multi', 'chart-line', 'chart-maximum', 'chart-median', 'chart-minimum', 'chart-pie-filled', 'chart-pie', 'chart-radar-filled', 'chart-radar', 'chart-radial', 'chart-ring-1-filled', 'chart-ring-1', 'chart-ring-filled', 'chart-ring', 'chart-scatter', 'chart-stacked-filled', 'chart-stacked', 'chart', 'chat-add-filled', 'chat-add', 'chat-bubble-1-filled', 'chat-bubble-1', 'chat-bubble-add-filled', 'chat-bubble-add', 'chat-bubble-error-filled', 'chat-bubble-error', 'chat-bubble-filled', 'chat-bubble-help-filled', 'chat-bubble-help', 'chat-bubble-history-filled', 'chat-bubble-history', 'chat-bubble-locked-filled', 'chat-bubble-locked', 'chat-bubble-smile-filled', 'chat-bubble-smile', 'chat-bubble', 'chat-checked-filled', 'chat-checked', 'chat-clear-filled', 'chat-clear', 'chat-double-filled', 'chat-double', 'chat-error-filled', 'chat-error', 'chat-filled', 'chat-heart-filled', 'chat-heart', 'chat-message-filled', 'chat-message', 'chat-off-filled', 'chat-off', 'chat-poll-filled', 'chat-poll', 'chat-setting-filled', 'chat-setting', 'chat', 'check-circle-filled', 'check-circle', 'check-double', 'check-rectangle-filled', 'check-rectangle', 'check', 'cheese-filled', 'cheese', 'cherry-filled', 'cherry', 'chevron-down-circle-filled', 'chevron-down-circle', 'chevron-down-double-s', 'chevron-down-double', 'chevron-down-rectangle-filled', 'chevron-down-rectangle', 'chevron-down-s', 'chevron-down', 'chevron-left-circle-filled', 'chevron-left-circle', 'chevron-left-double-s', 'chevron-left-double', 'chevron-left-rectangle-filled', 'chevron-left-rectangle', 'chevron-left-s', 'chevron-left', 'chevron-right-circle-filled', 'chevron-right-circle', 'chevron-right-double-s', 'chevron-right-double', 'chevron-right-rectangle-filled', 'chevron-right-rectangle', 'chevron-right-s', 'chevron-right', 'chevron-up-circle-filled', 'chevron-up-circle', 'chevron-up-double-s', 'chevron-up-double', 'chevron-up-rectangle-filled', 'chevron-up-rectangle', 'chevron-up-s', 'chevron-up', 'chicken', 'chili-filled', 'chili', 'chimney-1-filled', 'chimney-1', 'chimney-2-filled', 'chimney-2', 'chimney-filled', 'chimney', 'chinese-cabbage-filled', 'chinese-cabbage', 'church-filled', 'church', 'circle-filled', 'circle', 'city-1-filled', 'city-1', 'city-10-filled', 'city-10', 'city-11-filled', 'city-11', 'city-12-filled', 'city-12', 'city-13-filled', 'city-13', 'city-14-filled', 'city-14', 'city-15-filled', 'city-15', 'city-2-filled', 'city-2', 'city-3-filled', 'city-3', 'city-4-filled', 'city-4', 'city-5-filled', 'city-5', 'city-6-filled', 'city-6', 'city-7-filled', 'city-7', 'city-8-filled', 'city-8', 'city-9-filled', 'city-9', 'city-ancient-1-filled', 'city-ancient-1', 'city-ancient-2-filled', 'city-ancient-2', 'city-ancient-filled', 'city-ancient', 'city-filled', 'city', 'clear-filled', 'clear-formatting-1-filled', 'clear-formatting-1', 'clear-formatting-filled', 'clear-formatting', 'clear', 'close-circle-filled', 'close-circle', 'close-octagon-filled', 'close-octagon', 'close-rectangle-filled', 'close-rectangle', 'close', 'cloud-download', 'cloud-filled', 'cloud-upload', 'cloud', 'cloudy-day-filled', 'cloudy-day', 'cloudy-night-filled', 'cloudy-night-rain-filled', 'cloudy-night-rain', 'cloudy-night', 'cloudy-rain-filled', 'cloudy-rain', 'cloudy-sunny-filled', 'cloudy-sunny', 'code-1', 'code-off', 'code', 'cola-filled', 'cola', 'collage-filled', 'collage', 'collection-filled', 'collection', 'color-invert-filled', 'color-invert', 'combination-filled', 'combination', 'command', 'compass-1-filled', 'compass-1', 'compass-filled', 'compass', 'component-breadcrumb-filled', 'component-breadcrumb', 'component-checkbox-filled', 'component-checkbox', 'component-divider-horizontal-filled', 'component-divider-horizontal', 'component-divider-vertical-filled', 'component-divider-vertical', 'component-dropdown-filled', 'component-dropdown', 'component-grid-filled', 'component-grid', 'component-input-filled', 'component-input', 'component-layout-filled', 'component-layout', 'component-radio', 'component-space-filled', 'component-space', 'component-steps-filled', 'component-steps', 'component-switch-filled', 'component-switch', 'constraint', 'contrast-1-filled', 'contrast-1', 'contrast-filled', 'contrast', 'control-platform-filled', 'control-platform', 'cooperate-filled', 'cooperate', 'coordinate-system-filled', 'coordinate-system', 'copy-filled', 'copy', 'copyright-filled', 'copyright', 'corn-filled', 'corn', 'coupon-filled', 'coupon', 'course-filled', 'course', 'cpu-filled', 'cpu', 'crack-filled', 'crack', 'creditcard-add-filled', 'creditcard-add', 'creditcard-filled', 'creditcard-off-filled', 'creditcard-off', 'creditcard', 'crooked-smile-filled', 'crooked-smile', 'cry-and-laugh-filled', 'cry-and-laugh', 'cry-loudly-filled', 'cry-loudly', 'css3-filled', 'css3', 'cucumber', 'currency-exchange', 'cursor-filled', 'cursor', 'curtain-filled', 'curtain', 'curve', 'cut-1', 'cut', 'dam-1-filled', 'dam-1', 'dam-2-filled', 'dam-2', 'dam-3-filled', 'dam-3', 'dam-4-filled', 'dam-4', 'dam-5-filled', 'dam-5', 'dam-6-filled', 'dam-6', 'dam-7-filled', 'dam-7', 'dam-filled', 'dam', 'dart-board-filled', 'dart-board', 'dashboard-1-filled', 'dashboard-1', 'dashboard-filled', 'dashboard', 'data-base-filled', 'data-base', 'data-checked-filled', 'data-checked', 'data-display', 'data-error-filled', 'data-error', 'data-filled', 'data-search-filled', 'data-search', 'data', 'delete-1-filled', 'delete-1', 'delete-filled', 'delete-time-filled', 'delete-time', 'delete', 'delta-filled', 'delta', 'depressed-filled', 'depressed', 'desktop-1-filled', 'desktop-1', 'desktop-filled', 'desktop', 'despise-filled', 'despise', 'device-filled', 'device', 'discount-filled', 'discount', 'dissatisfaction-filled', 'dissatisfaction', 'divide', 'dividers-1', 'dividers', 'doge-filled', 'doge', 'double-storey-filled', 'double-storey', 'download-1', 'download-2-filled', 'download-2', 'download', 'downscale', 'drag-drop', 'drag-move', 'drink-filled', 'drink', 'drumstick-filled', 'drumstick', 'dv-filled', 'dv', 'dvd-filled', 'dvd', 'earphone-filled', 'earphone', 'earth-filled', 'earth', 'edit-1-filled', 'edit-1', 'edit-2-filled', 'edit-2', 'edit-filled', 'edit-off-filled', 'edit-off', 'edit', 'education-filled', 'education', 'eggplant-filled', 'eggplant', 'ellipsis', 'emo-emotional-filled', 'emo-emotional', 'enter', 'equal', 'error-circle-filled', 'error-circle', 'error-triangle-filled', 'error-triangle', 'error', 'excited-1-filled', 'excited-1', 'excited-filled', 'excited', 'expand-down-filled', 'expand-down', 'expand-horizontal', 'expand-up-filled', 'expand-up', 'expand-vertical', 'explore-filled', 'explore-off-filled', 'explore-off', 'explore', 'exposure-filled', 'exposure', 'extension-filled', 'extension-off-filled', 'extension-off', 'extension', 'face-retouching-filled', 'face-retouching', 'fact-check-filled', 'fact-check', 'fahrenheit-scale', 'feel-at-ease-filled', 'feel-at-ease', 'ferocious-filled', 'ferocious', 'ferris-wheel-filled', 'ferris-wheel', 'file-1-filled', 'file-1', 'file-add-1-filled', 'file-add-1', 'file-add-filled', 'file-add', 'file-attachment-filled', 'file-attachment', 'file-blocked-filled', 'file-blocked', 'file-code-1-filled', 'file-code-1', 'file-code-filled', 'file-code', 'file-copy-filled', 'file-copy', 'file-download-filled', 'file-download', 'file-excel-filled', 'file-excel', 'file-export-filled', 'file-export', 'file-filled', 'file-icon-filled', 'file-icon', 'file-image-filled', 'file-image', 'file-import-filled', 'file-import', 'file-locked-filled', 'file-locked', 'file-minus-filled', 'file-minus', 'file-music-filled', 'file-music', 'file-onenote-filled', 'file-onenote', 'file-outlook-filled', 'file-outlook', 'file-paste-filled', 'file-paste', 'file-pdf-filled', 'file-pdf', 'file-powerpoint-filled', 'file-powerpoint', 'file-restore-filled', 'file-restore', 'file-safety-filled', 'file-safety', 'file-search-filled', 'file-search', 'file-setting-filled', 'file-setting', 'file-teams-filled', 'file-teams', 'file-transmit-double-filled', 'file-transmit-double', 'file-transmit-filled', 'file-transmit', 'file-unknown-filled', 'file-unknown', 'file-unlocked-filled', 'file-unlocked', 'file-word-filled', 'file-word', 'file-zip-filled', 'file-zip', 'file', 'fill-color-1-filled', 'fill-color-1', 'fill-color-filled', 'fill-color', 'film-1-filled', 'film-1', 'film-filled', 'film', 'filter-1-filled', 'filter-1', 'filter-2-filled', 'filter-2', 'filter-3-filled', 'filter-3', 'filter-clear-filled', 'filter-clear', 'filter-filled', 'filter-off-filled', 'filter-off', 'filter-sort-filled', 'filter-sort', 'filter', 'fingerprint-1', 'fingerprint-2', 'fingerprint-3', 'fingerprint', 'fish-filled', 'fish', 'flag-1-filled', 'flag-1', 'flag-2-filled', 'flag-2', 'flag-3-filled', 'flag-3', 'flag-4-filled', 'flag-4', 'flag-filled', 'flag', 'flashlight-filled', 'flashlight', 'flight-landing-filled', 'flight-landing', 'flight-takeoff-filled', 'flight-takeoff', 'flip-smiling-face-filled', 'flip-smiling-face', 'flip-to-back-filled', 'flip-to-back', 'flip-to-front-filled', 'flip-to-front', 'focus-filled', 'focus', 'fog-filled', 'fog-night-filled', 'fog-night', 'fog-sunny-filled', 'fog-sunny', 'fog', 'folder-1-filled', 'folder-1', 'folder-add-1-filled', 'folder-add-1', 'folder-add-filled', 'folder-add', 'folder-blocked-filled', 'folder-blocked', 'folder-details-filled', 'folder-details', 'folder-export-filled', 'folder-export', 'folder-filled', 'folder-import-filled', 'folder-import', 'folder-locked-filled', 'folder-locked', 'folder-minus-filled', 'folder-minus', 'folder-move-filled', 'folder-move', 'folder-off-filled', 'folder-off', 'folder-open-1-filled', 'folder-open-1', 'folder-open-filled', 'folder-open', 'folder-search-filled', 'folder-search', 'folder-setting-filled', 'folder-setting', 'folder-shared-filled', 'folder-shared', 'folder-unlocked-filled', 'folder-unlocked', 'folder-zip-filled', 'folder-zip', 'folder', 'forest-filled', 'forest', 'fork-filled', 'fork', 'form-filled', 'form', 'format-horizontal-align-bottom', 'format-horizontal-align-center', 'format-horizontal-align-top', 'format-vertical-align-center', 'format-vertical-align-left', 'format-vertical-align-right', 'forward-filled', 'forward', 'frame-1-filled', 'frame-1', 'frame-filled', 'frame', 'fries-filled', 'fries', 'fullscreen-1', 'fullscreen-2', 'fullscreen-exit-1', 'fullscreen-exit', 'fullscreen', 'function-curve', 'functions-1', 'functions', 'gamepad-1-filled', 'gamepad-1', 'gamepad-filled', 'gamepad', 'gamma', 'garlic-filled', 'garlic', 'gender-female', 'gender-male', 'gesture-applause-filled', 'gesture-applause', 'gesture-click-filled', 'gesture-click', 'gesture-down-filled', 'gesture-down', 'gesture-expansion-filled', 'gesture-expansion', 'gesture-left-filled', 'gesture-left-slip-filled', 'gesture-left-slip', 'gesture-left', 'gesture-open-filled', 'gesture-open', 'gesture-pray-filled', 'gesture-pray', 'gesture-press-filled', 'gesture-press', 'gesture-ranslation-filled', 'gesture-ranslation', 'gesture-right-filled', 'gesture-right-slip-filled', 'gesture-right-slip', 'gesture-right', 'gesture-slide-left-and-right-filled', 'gesture-slide-left-and-right', 'gesture-slide-up-filled', 'gesture-slide-up', 'gesture-typing-filled', 'gesture-typing', 'gesture-up-and-down-filled', 'gesture-up-and-down', 'gesture-up-filled', 'gesture-up', 'gesture-wipe-down-filled', 'gesture-wipe-down', 'gift-filled', 'gift', 'giggle-filled', 'giggle', 'git-branch-filled', 'git-branch', 'git-commit-filled', 'git-commit', 'git-merge-filled', 'git-merge', 'git-pull-request-filled', 'git-pull-request', 'git-repository-commits-filled', 'git-repository-commits', 'git-repository-filled', 'git-repository-private-filled', 'git-repository-private', 'git-repository', 'gps-filled', 'gps', 'grape-filled', 'grape', 'greater-than-or-equal', 'greater-than', 'green-onion', 'grid-add-filled', 'grid-add', 'grid-view-filled', 'grid-view', 'guitar-filled', 'guitar', 'hamburger-filled', 'hamburger', 'happy-filled', 'happy', 'hard-disk-storage-filled', 'hard-disk-storage', 'hard-drive-filled', 'hard-drive', 'hashtag', 'hd-filled', 'hd', 'heart-filled', 'heart', 'help-circle-filled', 'help-circle', 'help-rectangle-filled', 'help-rectangle', 'help', 'highlight-1-filled', 'highlight-1', 'highlight', 'history-setting', 'history', 'home-filled', 'home', 'horizontal-filled', 'horizontal', 'hospital-1-filled', 'hospital-1', 'hospital-filled', 'hospital', 'hotspot-wave-filled', 'hotspot-wave', 'hourglass-filled', 'hourglass', 'houses-1-filled', 'houses-1', 'houses-2-filled', 'houses-2', 'houses-filled', 'houses', 'html5-filled', 'html5', 'https-filled', 'https', 'ice-cream-filled', 'ice-cream', 'icon-filled', 'icon', 'image-1-filled', 'image-1', 'image-add-filled', 'image-add', 'image-edit-filled', 'image-edit', 'image-error-filled', 'image-error', 'image-filled', 'image-off-filled', 'image-off', 'image-search-filled', 'image-search', 'image', 'indent-left', 'indent-right', 'indicator-filled', 'indicator', 'info-circle-filled', 'info-circle', 'ink-filled', 'ink', 'install-desktop-filled', 'install-desktop', 'install-filled', 'install-mobile-filled', 'install-mobile', 'install', 'institution-checked-filled', 'institution-checked', 'institution-filled', 'institution', 'internet-filled', 'internet', 'ipod-filled', 'ipod', 'joyful-filled', 'joyful', 'jump-double', 'jump-off', 'jump', 'key-filled', 'key', 'keyboard-filled', 'keyboard', 'laptop-filled', 'laptop', 'layers-filled', 'layers', 'layout-filled', 'layout', 'leaderboard-filled', 'leaderboard', 'lemon-filled', 'lemon-slice-filled', 'lemon-slice', 'lemon', 'less-than-or-equal', 'less-than', 'letters-a', 'letters-b', 'letters-c', 'letters-d', 'letters-e', 'letters-f', 'letters-g', 'letters-h', 'letters-i', 'letters-j', 'letters-k', 'letters-l', 'letters-m', 'letters-n', 'letters-o', 'letters-p', 'letters-q', 'letters-r', 'letters-s', 'letters-t', 'letters-u', 'letters-v', 'letters-w', 'letters-x', 'letters-y', 'letters-z', 'lightbulb-circle-filled', 'lightbulb-circle', 'lightbulb-filled', 'lightbulb', 'lighthouse-1-filled', 'lighthouse-1', 'lighthouse-2-filled', 'lighthouse-2', 'lighthouse-filled', 'lighthouse', 'lighting-circle-filled', 'lighting-circle', 'line-height', 'link-1', 'link-unlink', 'link', 'liquor-filled', 'liquor', 'list-numbered', 'list', 'load', 'loading', 'location-1-filled', 'location-1', 'location-enlargement-filled', 'location-enlargement', 'location-error-filled', 'location-error', 'location-filled', 'location-parking-place-filled', 'location-parking-place', 'location-reduction-filled', 'location-reduction', 'location-setting-filled', 'location-setting', 'location', 'lock-off-filled', 'lock-off', 'lock-on-filled', 'lock-on', 'lock-time-filled', 'lock-time', 'login', 'logo-adobe-illustrate-filled', 'logo-adobe-illustrate', 'logo-adobe-lightroom-filled', 'logo-adobe-lightroom', 'logo-adobe-photoshop-filled', 'logo-adobe-photoshop', 'logo-alipay-filled', 'logo-alipay', 'logo-android-filled', 'logo-android', 'logo-apple-filled', 'logo-apple', 'logo-behance-filled', 'logo-behance', 'logo-chrome-filled', 'logo-chrome', 'logo-cinema4d-filled', 'logo-cinema4d', 'logo-cnb-filled', 'logo-cnb', 'logo-codepen', 'logo-codesandbox', 'logo-dribbble-filled', 'logo-dribbble', 'logo-facebook-filled', 'logo-facebook', 'logo-figma-filled', 'logo-figma', 'logo-framer-filled', 'logo-framer', 'logo-github-filled', 'logo-github', 'logo-gitlab-filled', 'logo-gitlab', 'logo-ie-filled', 'logo-ie', 'logo-instagram-filled', 'logo-instagram', 'logo-miniprogram-filled', 'logo-miniprogram', 'logo-qq-filled', 'logo-qq', 'logo-twitter-filled', 'logo-twitter', 'logo-wechat-stroke-filled', 'logo-wechat-stroke', 'logo-wechatpay-filled', 'logo-wechatpay', 'logo-wecom', 'logo-windows-filled', 'logo-windows', 'logo-youtube-filled', 'logo-youtube', 'logout', 'look-around-filled', 'look-around', 'loudspeaker-filled', 'loudspeaker', 'mail-filled', 'mail', 'map-3d-filled', 'map-3d', 'map-add-filled', 'map-add', 'map-aiming-filled', 'map-aiming', 'map-blocked-filled', 'map-blocked', 'map-bubble-filled', 'map-bubble', 'map-cancel-filled', 'map-cancel', 'map-chat-filled', 'map-chat', 'map-checked-filled', 'map-checked', 'map-collection-filled', 'map-collection', 'map-connection-filled', 'map-connection', 'map-distance-filled', 'map-distance', 'map-double-filled', 'map-double', 'map-edit-filled', 'map-edit', 'map-filled', 'map-grid-filled', 'map-grid', 'map-information-1-filled', 'map-information-1', 'map-information-2-filled', 'map-information-2', 'map-information-filled', 'map-information', 'map-location-filled', 'map-location', 'map-locked-filled', 'map-locked', 'map-marked-filled', 'map-marked', 'map-navigation-filled', 'map-navigation', 'map-outline-filled', 'map-outline', 'map-route-planning-filled', 'map-route-planning', 'map-ruler-filled', 'map-ruler', 'map-safety-filled', 'map-safety', 'map-search-1-filled', 'map-search-1', 'map-search-filled', 'map-search', 'map-setting-filled', 'map-setting', 'map-unlocked-filled', 'map-unlocked', 'map', 'mark-as-unread-filled', 'mark-as-unread', 'markup-filled', 'markup', 'mathematics-filled', 'mathematics', 'measurement-1-filled', 'measurement-1', 'measurement-2-filled', 'measurement-2', 'measurement-filled', 'measurement', 'meat-pepper-filled', 'meat-pepper', 'media-library-filled', 'media-library', 'member-filled', 'member', 'menu-application', 'menu-filled', 'menu-fold', 'menu-unfold', 'menu', 'merge-cells-filled', 'merge-cells', 'microphone-1-filled', 'microphone-1', 'microphone-2-filled', 'microphone-2', 'microphone-filled', 'microphone', 'milk-filled', 'milk', 'minus-circle-filled', 'minus-circle', 'minus-rectangle-filled', 'minus-rectangle', 'minus', 'mirror-filled', 'mirror', 'mobile-blocked-filled', 'mobile-blocked', 'mobile-filled', 'mobile-list-filled', 'mobile-list', 'mobile-navigation-filled', 'mobile-navigation', 'mobile-shortcut-filled', 'mobile-shortcut', 'mobile-vibrate-filled', 'mobile-vibrate', 'mobile', 'mode-dark-filled', 'mode-dark', 'mode-light-filled', 'mode-light', 'module-filled', 'module', 'money-filled', 'money', 'monument-filled', 'monument', 'moon-fall-filled', 'moon-fall', 'moon-filled', 'moon-rising-filled', 'moon-rising', 'moon', 'more', 'mosque-1-filled', 'mosque-1', 'mosque-filled', 'mosque', 'mouse-filled', 'mouse', 'move-1', 'move', 'movie-clapper-filled', 'movie-clapper', 'multiply', 'museum-1-filled', 'museum-1', 'museum-2-filled', 'museum-2', 'museum-filled', 'museum', 'mushroom-1-filled', 'mushroom-1', 'mushroom-filled', 'mushroom', 'music-1-filled', 'music-1', 'music-2-filled', 'music-2', 'music-filled', 'music-rectangle-add-filled', 'music-rectangle-add', 'music', 'navigation-arrow-filled', 'navigation-arrow', 'next-filled', 'next', 'no-expression-filled', 'no-expression', 'noodle-filled', 'noodle', 'notification-add-filled', 'notification-add', 'notification-circle-filled', 'notification-circle', 'notification-error-filled', 'notification-error', 'notification-filled', 'notification', 'numbers-0-1', 'numbers-0', 'numbers-1-1', 'numbers-1', 'numbers-2-1', 'numbers-2', 'numbers-3-1', 'numbers-3', 'numbers-4-1', 'numbers-4', 'numbers-5-1', 'numbers-5', 'numbers-6-1', 'numbers-6', 'numbers-7-1', 'numbers-7', 'numbers-8-1', 'numbers-8', 'numbers-9-1', 'numbers-9', 'nut-filled', 'nut', 'object-storage', 'open-mouth-filled', 'open-mouth', 'opera-filled', 'opera', 'order-adjustment-column', 'order-ascending', 'order-descending', 'outbox-filled', 'outbox', 'page-first', 'page-head-filled', 'page-head', 'page-last', 'palace-1-filled', 'palace-1', 'palace-2-filled', 'palace-2', 'palace-3-filled', 'palace-3', 'palace-4-filled', 'palace-4', 'palace-filled', 'palace', 'palette-1-filled', 'palette-1', 'palette-filled', 'palette', 'panorama-horizontal-filled', 'panorama-horizontal', 'panorama-vertical-filled', 'panorama-vertical', 'pantone-filled', 'pantone', 'parabola', 'parentheses', 'paste-filled', 'paste', 'patio-filled', 'patio', 'pause-circle-filled', 'pause-circle-stroke-filled', 'pause-circle-stroke', 'pause-circle', 'pause', 'pea-filled', 'pea', 'peach-filled', 'peach', 'pear-filled', 'pear', 'pearl-of-the-orient-filled', 'pearl-of-the-orient', 'pen-ball-filled', 'pen-ball', 'pen-brush-filled', 'pen-brush', 'pen-filled', 'pen-mark-filled', 'pen-mark', 'pen-quill-filled', 'pen-quill', 'pen', 'pending-filled', 'pending', 'percent', 'personal-information-filled', 'personal-information', 'phone-locked-filled', 'phone-locked', 'phone-search-filled', 'phone-search', 'pi', 'piano-filled', 'piano', 'pin-filled', 'pin', 'play-circle-filled', 'play-circle-stroke-add-filled', 'play-circle-stroke-add', 'play-circle-stroke-filled', 'play-circle-stroke', 'play-circle', 'play-demo-filled', 'play-demo', 'play-rectangle-filled', 'play-rectangle', 'play', 'plus', 'popsicle-filled', 'popsicle', 'portrait-filled', 'portrait', 'pout-filled', 'pout', 'poweroff', 'precise-monitor', 'previous-filled', 'previous', 'print-filled', 'print', 'pumpkin-filled', 'pumpkin', 'pyramid-filled', 'pyramid-maya-filled', 'pyramid-maya', 'pyramid', 'qrcode', 'quadratic', 'questionnaire-double-filled', 'questionnaire-double', 'questionnaire-filled', 'questionnaire', 'queue-filled', 'queue', 'quote-filled', 'quote', 'radar', 'radio-1-filled', 'radio-1', 'radio-2-filled', 'radio-2', 'radish-filled', 'radish', 'rain-heavy', 'rain-light-filled', 'rain-light', 'rain-medium', 'rainbow', 'rectangle-filled', 'rectangle', 'refresh', 'relation', 'relativity-filled', 'relativity', 'remote-wave-filled', 'remote-wave', 'remove', 'replay-filled', 'replay', 'rice-ball-filled', 'rice-ball', 'rice-filled', 'rice', 'roast-filled', 'roast', 'rocket-filled', 'rocket', 'rollback', 'rollfront', 'root-list-filled', 'root-list', 'rotate-locked-filled', 'rotate-locked', 'rotate', 'rotation', 'round-filled', 'round', 'router-wave-filled', 'router-wave', 'rss', 'ruler-filled', 'ruler', 'sailing-hotel-filled', 'sailing-hotel', 'sandwich-filled', 'sandwich', 'saturation-filled', 'saturation', 'sausage-filled', 'sausage', 'save-filled', 'save', 'saving-pot-filled', 'saving-pot', 'scan', 'screen-4k-filled', 'screen-4k', 'screencast-filled', 'screencast', 'screenshot', 'scroll-bar-filled', 'scroll-bar', 'sd-card-1-filled', 'sd-card-1', 'sd-card-filled', 'sd-card', 'seal-filled', 'seal', 'search-error-filled', 'search-error', 'search-filled', 'search', 'secured-filled', 'secured', 'send-cancel-filled', 'send-cancel', 'send-filled', 'send', 'sensors-1', 'sensors-2', 'sensors-off', 'sensors', 'sequence-filled', 'sequence', 'serenity-filled', 'serenity', 'server-filled', 'server', 'service-filled', 'service', 'setting-1-filled', 'setting-1', 'setting-filled', 'setting', 'share-1-filled', 'share-1', 'share-filled', 'share', 'sharpness-filled', 'sharpness', 'shield-error-filled', 'shield-error', 'shimen-filled', 'shimen', 'shop-1-filled', 'shop-1', 'shop-2-filled', 'shop-2', 'shop-3-filled', 'shop-3', 'shop-4-filled', 'shop-4', 'shop-5-filled', 'shop-5', 'shop-filled', 'shop', 'shrimp-filled', 'shrimp', 'shrink-horizontal', 'shrink-vertical', 'shutter-filled', 'shutter', 'shutup-filled', 'shutup', 'sim-card-1-filled', 'sim-card-1', 'sim-card-2-filled', 'sim-card-2', 'sim-card-filled', 'sim-card', 'sinister-smile-filled', 'sinister-smile', 'sip-filled', 'sip', 'sitemap-filled', 'sitemap', 'slash', 'sleep-filled', 'sleep', 'slice-filled', 'slice', 'slideshow-filled', 'slideshow', 'smile-filled', 'smile', 'sneer-filled', 'sneer', 'snowflake', 'sonic', 'sound-down-filled', 'sound-down', 'sound-filled', 'sound-high-filled', 'sound-high', 'sound-low-filled', 'sound-low', 'sound-mute-1-filled', 'sound-mute-1', 'sound-mute-filled', 'sound-mute', 'sound-up-filled', 'sound-up', 'sound', 'space', 'speechless-1-filled', 'speechless-1', 'speechless-filled', 'speechless', 'star-filled', 'star', 'statue-of-jesus-filled', 'statue-of-jesus', 'sticky-note-filled', 'sticky-note', 'stop-circle-filled', 'stop-circle-stroke-filled', 'stop-circle-stroke', 'stop-circle', 'stop', 'store-filled', 'store', 'street-road-1-filled', 'street-road-1', 'street-road-filled', 'street-road', 'subtitle-filled', 'subtitle', 'subway-line-filled', 'subway-line', 'sum', 'sun-fall-filled', 'sun-fall', 'sun-rising-filled', 'sun-rising', 'sunny-filled', 'sunny', 'support-filled', 'support', 'surprised-1-filled', 'surprised-1', 'surprised-filled', 'surprised', 'swap-left', 'swap-right', 'swap', 'swear-1-filled', 'swear-1', 'swear-2-filled', 'swear-2', 'system-2', 'system-3-filled', 'system-3', 'system-application-filled', 'system-application', 'system-blocked-filled', 'system-blocked', 'system-code-filled', 'system-code', 'system-components-filled', 'system-components', 'system-coordinate-filled', 'system-coordinate', 'system-device-filled', 'system-device', 'system-interface-filled', 'system-interface', 'system-location-filled', 'system-location', 'system-locked-filled', 'system-locked', 'system-log-filled', 'system-log', 'system-marked-filled', 'system-marked', 'system-messages-filled', 'system-messages', 'system-regulation-filled', 'system-regulation', 'system-search-filled', 'system-search', 'system-setting-filled', 'system-setting', 'system-storage-filled', 'system-storage', 'system-sum', 'system-unlocked-filled', 'system-unlocked', 'tab-filled', 'tab', 'table-1-filled', 'table-1', 'table-2-filled', 'table-2', 'table-add-filled', 'table-add', 'table-filled', 'table-split-filled', 'table-split', 'table', 'tag-filled', 'tag', 'tangerinr-filled', 'tangerinr', 'tape-filled', 'tape', 'task-1-filled', 'task-1', 'task-add-1', 'task-add-filled', 'task-add', 'task-checked-1', 'task-checked-filled', 'task-checked', 'task-double-filled', 'task-double', 'task-error-filled', 'task-error', 'task-filled', 'task-location-filled', 'task-location', 'task-marked-filled', 'task-marked', 'task-setting-filled', 'task-setting', 'task-time-filled', 'task-time', 'task-visible-filled', 'task-visible', 'task', 'tea-filled', 'tea', 'teahouse-filled', 'teahouse', 'template-filled', 'template', 'temple-filled', 'temple', 'terminal-rectangle-1-filled', 'terminal-rectangle-1', 'terminal-rectangle-filled', 'terminal-rectangle', 'terminal-window-filled', 'terminal-window', 'terminal', 'textbox-filled', 'textbox', 'textformat-bold', 'textformat-color', 'textformat-italic', 'textformat-strikethrough', 'textformat-underline', 'textformat-wrap', 'theaters-filled', 'theaters', 'thumb-down-1-filled', 'thumb-down-1', 'thumb-down-2-filled', 'thumb-down-2', 'thumb-down-filled', 'thumb-down', 'thumb-up-1-filled', 'thumb-up-1', 'thumb-up-2-filled', 'thumb-up-2', 'thumb-up-filled', 'thumb-up', 'thunder', 'thunderstorm-night-filled', 'thunderstorm-night', 'thunderstorm-sunny-filled', 'thunderstorm-sunny', 'thunderstorm', 'ticket-filled', 'ticket', 'time-filled', 'time', 'tips-double-filled', 'tips-double', 'tips-filled', 'tips', 'tomato-filled', 'tomato', 'tools-circle-filled', 'tools-circle', 'tools-filled', 'tools', 'tornado', 'tower-1-filled', 'tower-1', 'tower-2-filled', 'tower-2', 'tower-3-filled', 'tower-3', 'tower-clock-filled', 'tower-clock', 'tower-filled', 'tower', 'town-filled', 'town', 'traffic-events-filled', 'traffic-events', 'traffic-filled', 'traffic', 'transform-1-filled', 'transform-1', 'transform-2', 'transform-3', 'transform-filled', 'transform', 'translate-1', 'translate', 'tree-round-dot-filled', 'tree-round-dot-vertical-filled', 'tree-round-dot-vertical', 'tree-round-dot', 'tree-square-dot-filled', 'tree-square-dot-vertical-filled', 'tree-square-dot-vertical', 'tree-square-dot', 'trending-down', 'trending-up', 'tv-1-filled', 'tv-1', 'tv-2-filled', 'tv-2', 'tv-filled', 'tv', 'typography-filled', 'typography', 'uncomfortable-1-filled', 'uncomfortable-1', 'uncomfortable-2-filled', 'uncomfortable-2', 'uncomfortable-filled', 'uncomfortable', 'undertake-delivery-filled', 'undertake-delivery', 'undertake-environment-protection-filled', 'undertake-environment-protection', 'undertake-filled', 'undertake-hold-up-filled', 'undertake-hold-up', 'undertake-transaction-filled', 'undertake-transaction', 'undertake', 'unfold-less', 'unfold-more', 'unhappy-1-filled', 'unhappy-1', 'unhappy-filled', 'unhappy', 'uninstall-filled', 'uninstall', 'upload-1', 'upload', 'upscale', 'usb-filled', 'usb', 'user-1-filled', 'user-1', 'user-add-filled', 'user-add', 'user-arrow-down-filled', 'user-arrow-down', 'user-arrow-left-filled', 'user-arrow-left', 'user-arrow-right-filled', 'user-arrow-right', 'user-arrow-up-filled', 'user-arrow-up', 'user-avatar-filled', 'user-avatar', 'user-blocked-filled', 'user-blocked', 'user-business-filled', 'user-business', 'user-checked-1-filled', 'user-checked-1', 'user-checked-filled', 'user-checked', 'user-circle-filled', 'user-circle', 'user-clear-filled', 'user-clear', 'user-error-1-filled', 'user-error-1', 'user-filled', 'user-invisible-filled', 'user-invisible', 'user-list-filled', 'user-list', 'user-locked-filled', 'user-locked', 'user-marked-filled', 'user-marked', 'user-password-filled', 'user-password', 'user-safety-filled', 'user-safety', 'user-search-filled', 'user-search', 'user-setting-filled', 'user-setting', 'user-talk-1-filled', 'user-talk-1', 'user-talk-filled', 'user-talk-off-1-filled', 'user-talk-off-1', 'user-talk', 'user-time-filled', 'user-time', 'user-transmit-filled', 'user-transmit', 'user-unknown-filled', 'user-unknown', 'user-unlocked-filled', 'user-unlocked', 'user-vip-filled', 'user-vip', 'user-visible-filled', 'user-visible', 'user', 'usercase-filled', 'usercase-link-filled', 'usercase-link', 'usercase', 'usergroup-add-filled', 'usergroup-add', 'usergroup-clear-filled', 'usergroup-clear', 'usergroup-filled', 'usergroup', 'vehicle-filled', 'vehicle', 'verified-filled', 'verified', 'verify-filled', 'verify', 'vertical-filled', 'vertical', 'video-camera-1-filled', 'video-camera-1', 'video-camera-2-filled', 'video-camera-2', 'video-camera-3-filled', 'video-camera-3', 'video-camera-dollar-filled', 'video-camera-dollar', 'video-camera-filled', 'video-camera-minus-filled', 'video-camera-minus', 'video-camera-music-filled', 'video-camera-music', 'video-camera-off-filled', 'video-camera-off', 'video-camera', 'video-filled', 'video-library-filled', 'video-library', 'video', 'view-agenda-filled', 'view-agenda', 'view-column', 'view-in-ar-filled', 'view-in-ar', 'view-list', 'view-module-filled', 'view-module', 'visual-recognition-filled', 'visual-recognition', 'wallet-filled', 'wallet', 'watch-filled', 'watch', 'watermelon-filled', 'watermelon', 'wave-bye-filled', 'wave-bye', 'wave-left-filled', 'wave-left', 'wave-right-filled', 'wave-right', 'wealth-1-filled', 'wealth-1', 'wealth-filled', 'wealth', 'widget-filled', 'widget', 'wifi-1-filled', 'wifi-1', 'wifi-off-1-filled', 'wifi-off-1', 'wifi-off', 'wifi', 'window-1-filled', 'window-1', 'window-filled', 'window', 'windy-rain', 'windy', 'wink-filled', 'wink', 'work-filled', 'work-history-filled', 'work-history', 'work-off-filled', 'work-off', 'work', 'wry-smile-filled', 'wry-smile', 'zoom-in-filled', 'zoom-in', 'zoom-out-filled', 'zoom-out'];
+export default icons;
diff --git a/packages/tdesign-uniapp/components/icon/_example/icon.less b/packages/tdesign-uniapp/components/icon/_example/icon.less
new file mode 100644
index 000000000..7bb3b14bc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/icon.less
@@ -0,0 +1,5 @@
+@import './iconfont.css';
+
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/icon/_example/icon.vue b/packages/tdesign-uniapp/components/icon/_example/icon.vue
new file mode 100644
index 000000000..475e73ff4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/icon.vue
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Icon"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Icon 图标"
+        desc="用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo title="01 基础组件图标">
+        <baseComp />
+      </t-demo>
+      <t-demo title="02 自定义组件图标">
+        <custom />
+      </t-demo>
+      <t-demo title="03 图片链接">
+        <iconImage />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import custom from './custom/index.vue';
+import iconImage from './iconImage/index.vue';
+export default {
+  components: {
+    baseComp,
+    custom,
+    iconImage,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './icon.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/_example/iconImage/index.vue b/packages/tdesign-uniapp/components/icon/_example/iconImage/index.vue
new file mode 100644
index 000000000..dabb66d64
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/iconImage/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view class="demo__list">
+    <view
+      v-for="(item, index) in imageIconList"
+      :key="index"
+      class="demo__card"
+    >
+      <t-icon
+        :name="item"
+        size="48rpx"
+        :data-name="item"
+        @click="onIconTap($event, { name: item })"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tIcon,
+  },
+  data() {
+    return {
+      imageIconList: ['https://tdesign.gtimg.com/mobile/demos/icon1.png', 'https://tdesign.gtimg.com/mobile/demos/icon2.png'],
+    };
+  },
+  created() {},
+  methods: {
+    onIconTap(event, { name, type }) {
+      if (type === 'prefix') {
+        return;
+      }
+
+      uni.showToast({
+        title: name,
+        icon: 'none',
+        duration: 1000,
+      });
+    },
+  },
+};
+</script>
+<style>
+.demo__list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16rpx 32rpx;
+}
+
+.demo__card {
+    flex: 0 0 25%;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/_example/iconfont.css b/packages/tdesign-uniapp/components/icon/_example/iconfont.css
new file mode 100644
index 000000000..1e2c54344
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/iconfont.css
@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'icon'; /* Project id 3144196 */
+    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+        format('woff2');
+}
+
+:deep(.icon) {
+    font-family: 'icon' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:deep(.icon-a-0:before) {
+    content: '\e64d';
+}
+
+:deep(.icon-a-1h:before) {
+    content: '\e64e';
+}
+
+:deep(.icon-a-2h:before) {
+    content: '\e64f';
+}
+
+:deep(.icon-a-3h:before) {
+    content: '\e650';
+}
diff --git a/packages/tdesign-uniapp/components/icon/_example/skyline/icon.less b/packages/tdesign-uniapp/components/icon/_example/skyline/icon.less
new file mode 100644
index 000000000..28926bb0a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/skyline/icon.less
@@ -0,0 +1,5 @@
+@import '../iconfont.css';
+
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/icon/_example/skyline/icon.vue b/packages/tdesign-uniapp/components/icon/_example/skyline/icon.vue
new file mode 100644
index 000000000..6a6668301
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/_example/skyline/icon.vue
@@ -0,0 +1,57 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Icon"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Icon 图标
+        </view>
+        <view class="demo-desc">
+          用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性
+        </view>
+        <t-demo title="01 基础组件图标">
+          <baseDemo />
+        </t-demo>
+        <t-demo title="02 自定义组件图标">
+          <custom />
+        </t-demo>
+        <t-demo title="03 图片链接">
+          <iconImage />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import custom from '../custom/index.vue';
+import iconImage from '../iconImage/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    custom,
+    iconImage,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './icon.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/icon.less b/packages/tdesign-uniapp/components/icon/icon.less
new file mode 100644
index 000000000..de3d4ac9f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/icon.less
@@ -0,0 +1,50 @@
+@import '../common/style/base.less';
+@import '../common/style/icons.less';
+
+@font-face {
+  font-family: @prefix;
+  src: url('https://tdesign.gtimg.com/icon/0.4.0/fonts/t.eot'),
+    url('https://tdesign.gtimg.com/icon/0.4.0/fonts/t.eot?#iefix') format('ded-opentype'),
+    url('https://tdesign.gtimg.com/icon/0.4.0/fonts/t.woff') format('woff'),
+    url('https://tdesign.gtimg.com/icon/0.4.0/fonts/t.ttf') format('truetype'),
+    url('https://tdesign.gtimg.com/icon/0.4.0/fonts/t.svg') format('svg'); /* iOS 4.1- */
+  font-weight: normal;
+  font-style: normal;
+}
+
+.@{prefix}-icon {
+  &--image {
+    // 2.x 建议移除该 wrapper
+    width: 100%;
+    height: 100%;
+  }
+
+  &__image {
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.@{prefix}-icon-base {
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  text-align: center;
+  display: block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.@{prefix}-icon {
+  /* stylelint-disable-next-line declaration-no-important */
+  font-family: @prefix !important; /* prevent issues with browser extensions that change fonts */
+
+  each(@icons, {
+    &-@{key}:before {
+      content: @value;
+    }
+  });
+}
diff --git a/packages/tdesign-uniapp/components/icon/icon.vue b/packages/tdesign-uniapp/components/icon/icon.vue
new file mode 100644
index 000000000..5d6570656
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/icon.vue
@@ -0,0 +1,121 @@
+<template>
+  <view
+    :class="[tClass, prefix || 't-icon']"
+    :style="_._style([iconStyle, customStyle])"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    :aria-role="ariaRole"
+    @click="onTap"
+  >
+    <view
+      v-if="isImage"
+      :class="classPrefix + '--image'"
+    >
+      <image
+        :src="name"
+        mode="aspectFit"
+        :class="classPrefix + '__image'"
+      />
+    </view>
+    <div
+      v-if="_.isValidIconName(name) && !isImage"
+      :class="(prefix ? prefix : classPrefix) + '-' + name + ' ' + classPrefix + '-base'"
+    />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { styles, addUnit, getRect } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-icon`;
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      componentPrefix: prefix,
+      classPrefix: name,
+      isImage: false,
+      iconStyle: undefined,
+      _,
+    };
+  },
+  watch: {
+    name: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    color: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    size: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    style: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onTap(t) {
+      this.$emit('click', t);
+    },
+    setIconStyle() {
+      const {
+        name,
+        color,
+        size,
+        classPrefix,
+      } = this;
+      const isImage = name.indexOf('/') !== -1;
+      const sizeValue = addUnit(size);
+      const colorStyle = color ? {
+        color,
+      } : {};
+      const fontStyle = size ? {
+        'font-size': sizeValue,
+      } : {};
+      const iconStyle = { ...colorStyle, ...fontStyle };
+      this.isImage = isImage;
+
+      if (isImage) {
+        let iconSize = sizeValue;
+        if (!iconSize) {
+          getRect(this, `.${classPrefix}`)
+            .then((res) => {
+              iconSize = addUnit(res?.height);
+            })
+            .catch(() => {});
+        }
+
+        iconStyle.width = iconSize;
+        iconStyle.height = iconSize;
+      }
+      this.iconStyle = `${styles(iconStyle)}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './icon.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/icon/props.ts b/packages/tdesign-uniapp/components/icon/props.ts
new file mode 100644
index 000000000..b4419579f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/props.ts
@@ -0,0 +1,35 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdIconProps } from './type';
+export default {
+  /** 图标颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 图标名称或图片链接 */
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /** 自定义图标前缀 */
+  prefix: {
+    type: String,
+    default: '',
+  },
+  /** 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` */
+  size: {
+    type: [String, Number],
+    default: '' as TdIconProps['size'],
+  },
+  /** 点击图标时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/icon/type.ts b/packages/tdesign-uniapp/components/icon/type.ts
new file mode 100644
index 000000000..82a18a437
--- /dev/null
+++ b/packages/tdesign-uniapp/components/icon/type.ts
@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdIconProps {
+  /**
+   * 图标颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 图标名称或图片链接
+   * @default ''
+   */
+  name: string;
+  /**
+   * 自定义图标前缀
+   * @default ''
+   */
+  prefix?: string;
+  /**
+   * 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px`
+   * @default ''
+   */
+  size?: string | number;
+  /**
+   * 点击图标时触发
+   */
+  onClick?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/image-viewer/README.en-US.md b/packages/tdesign-uniapp/components/image-viewer/README.en-US.md
new file mode 100644
index 000000000..2afcb0f60
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/README.en-US.md
@@ -0,0 +1,48 @@
+:: BASE_DOC ::
+
+## API
+
+### ImageViewer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+background-color | String | - | \- | N
+close-btn | String / Boolean / Object | false | \- | N
+delete-btn | String / Boolean / Object | false | \- | N
+images | Array | [] | Typescript：`Array<string>` | N
+initial-index | Number | 0 | Typescript：`Number` | N
+lazy | Boolean | true | \- | N
+show-index | Boolean | false | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | hide or show image viewer。`v-model:visible` is supported | N
+default-visible | Boolean | false | hide or show image viewer。uncontrolled property | N
+
+### ImageViewer Events
+
+name | params | description
+-- | -- | --
+change | `(context: { index: number })` | \-
+close | `(context: { trigger: 'overlay' \| 'button', visible: Boolean, index: Number })` | \-
+delete | `(context: { index: number })` | \-
+
+### ImageViewer Slots
+
+name | Description
+-- | --
+close-btn | \-
+delete-btn | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-viewer-close-margin-left | @spacer-1 | - 
+--td-image-viewer-delete-margin-right | @spacer-1 | - 
+--td-image-viewer-mask-bg-color | @mask-active | - 
+--td-image-viewer-nav-bg-color | #000 | - 
+--td-image-viewer-nav-color | @text-color-anti | - 
+--td-image-viewer-nav-height | 96rpx | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | - 
+--td-image-viewer-top | @position-fixed-top | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/image-viewer/README.md b/packages/tdesign-uniapp/components/image-viewer/README.md
new file mode 100644
index 000000000..d4c3958a2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/README.md
@@ -0,0 +1,77 @@
+---
+title: ImageViewer 图片预览
+description: 图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范。
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TImageViewer from 'tdesign-uniapp/image-viewer/image-viewer.vue';
+```
+
+### 类型
+
+#### 基础图片预览
+
+{{ base }}
+
+#### 带操作图片预览
+
+顶部区域可以配置关闭按钮、页码信息、删除按钮。
+
+{{ delete }}
+
+> 当使用自定义导航栏的时候，顶部的操作按钮会被遮挡，此时需要开启 `using-custom-navbar` 来解决
+
+## API
+
+### ImageViewer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+background-color | String | - | 遮罩的背景颜色 | N
+close-btn | String / Boolean / Object | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 | N
+delete-btn | String / Boolean / Object | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 | N
+images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
+initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
+lazy | Boolean | true | 是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N
+show-index | Boolean | false | 是否显示页码 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model:visible` | N
+default-visible | Boolean | false | 隐藏/显示预览。非受控属性 | N
+
+### ImageViewer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { index: number })` | 翻页时回调
+close | `(context: { trigger: 'overlay' \| 'button', visible: Boolean, index: Number })` | 点击操作按钮button或者overlay时触发
+delete | `(context: { index: number })` | 点击删除操作按钮时触发
+
+### ImageViewer Slots
+
+名称 | 描述
+-- | --
+close-btn | 关闭操作
+delete-btn | 删除操作
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-image-viewer-close-margin-left | @spacer-1 | - |
+| --td-image-viewer-delete-margin-right | @spacer-1 | - |
+| --td-image-viewer-mask-bg-color | @mask-active | - |
+| --td-image-viewer-nav-bg-color | #000 | - |
+| --td-image-viewer-nav-color | @text-color-anti | - |
+| --td-image-viewer-nav-height | 96rpx | - |
+| --td-image-viewer-nav-index-font-size | @font-size-base | - |
+| --td-image-viewer-top | @position-fixed-top | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/image-viewer/_example/base/index.vue b/packages/tdesign-uniapp/components/image-viewer/_example/base/index.vue
new file mode 100644
index 000000000..f87941bfc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/_example/base/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <view>
+    <t-button
+      theme="primary"
+      size="large"
+      variant="outline"
+      block
+      @click="onClick"
+    >
+      基础图片预览
+    </t-button>
+    <t-toast
+      id="t-toast"
+      ref="t-toast"
+    />
+    <t-image-viewer
+      :using-custom-navbar="!isMPAlipay"
+      :custom-navbar-height="gCustomNavbarHeight"
+      :delete-btn="deleteBtn"
+      :close-btn="closeBtn"
+      :show-index="showIndex"
+      :visible="visible"
+      :images="images"
+      @change="onChange"
+      @delete="onDelete"
+      @close="onClose"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import tImageViewer from 'tdesign-uniapp/image-viewer/image-viewer.vue';
+import Toast from 'tdesign-uniapp/toast/index';
+export default {
+  components: {
+    tButton,
+    tToast,
+    tImageViewer,
+  },
+  data() {
+    return {
+      visible: false,
+      showIndex: false,
+      closeBtn: false,
+      deleteBtn: false,
+      images: [],
+    };
+  },
+  created() {},
+  methods: {
+    onClick() {
+      this.images = ['https://tdesign.gtimg.com/mobile/demos/swiper1.png', 'https://tdesign.gtimg.com/mobile/demos/swiper2.png'];
+      this.showIndex = true;
+      this.visible = true;
+    },
+    onChange(e) {
+      const { index } = e;
+      console.log('change', index);
+    },
+    onDelete(e) {
+      const { index } = e;
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `删除第${index + 1}个`,
+      });
+    },
+    onClose(e) {
+      const { trigger } = e;
+      console.log(trigger);
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/image-viewer/_example/delete/index.vue b/packages/tdesign-uniapp/components/image-viewer/_example/delete/index.vue
new file mode 100644
index 000000000..6b9cd115f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/_example/delete/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <view>
+    <t-button
+      theme="primary"
+      size="large"
+      variant="outline"
+      block
+      @click="onClick"
+    >
+      带操作图片预览
+    </t-button>
+
+    <t-action-sheet
+      id="t-action-sheet"
+      ref="t-action-sheet"
+    />
+
+    <t-image-viewer
+      :using-custom-navbar="!isMPAlipay"
+      :delete-btn="deleteBtn"
+      :close-btn="closeBtn"
+      :show-index="showIndex"
+      :visible="visible"
+      :images="images"
+      :custom-navbar-height="gCustomNavbarHeight"
+      @change="onChange"
+      @delete="onDelete"
+      @close="onClose"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tActionSheet from 'tdesign-uniapp/action-sheet/action-sheet.vue';
+import tImageViewer from 'tdesign-uniapp/image-viewer/image-viewer.vue';
+import ActionSheet from 'tdesign-uniapp/action-sheet/index';
+export default {
+  components: {
+    tButton,
+    tActionSheet,
+    tImageViewer,
+  },
+  data() {
+    return {
+      visible: false,
+      showIndex: false,
+      closeBtn: false,
+      deleteBtn: false,
+      images: [],
+    };
+  },
+  created() {},
+  methods: {
+    onClick() {
+      this.images = ['https://tdesign.gtimg.com/mobile/demos/swiper1.png', 'https://tdesign.gtimg.com/mobile/demos/swiper2.png'];
+      this.showIndex = true;
+      this.visible = true;
+      this.closeBtn = true;
+      this.deleteBtn = true;
+    },
+    onChange(e) {
+      const { index } = e;
+      console.log(index);
+    },
+    onDelete(e) {
+      const { index } = e;
+      console.log(index);
+      ActionSheet.show({
+        context: this,
+        selector: '#t-action-sheet',
+        description: '要删除这张照片吗？',
+        items: [
+          {
+            label: '删除',
+            color: '#d54941',
+          },
+        ],
+      });
+    },
+    onClose(e) {
+      const { trigger } = e;
+      console.log(trigger);
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.less b/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.less
new file mode 100644
index 000000000..2b200c211
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.less
@@ -0,0 +1,3 @@
+page {
+  background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.vue b/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.vue
new file mode 100644
index 000000000..72137f0bd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/_example/image-viewer.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="ImageViewer"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="ImageViewer 图片预览"
+        desc="用于图片内容的缩略展示与查看。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        description="基础图片预览"
+        padding
+      >
+        <BaseComp />
+      </t-demo>
+
+      <t-demo
+        title="带操作图片预览"
+        padding
+      >
+        <DeleteDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import BaseComp from './base/index.vue';
+import DeleteDemo from './delete/index.vue';
+export default {
+  components: {
+    BaseComp,
+    DeleteDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './image-viewer.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/image-viewer/_example/skyline/image-viewer.vue b/packages/tdesign-uniapp/components/image-viewer/_example/skyline/image-viewer.vue
new file mode 100644
index 000000000..220670ba3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/_example/skyline/image-viewer.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>1</div>
+</template>
diff --git a/packages/tdesign-uniapp/components/image-viewer/computed.js b/packages/tdesign-uniapp/components/image-viewer/computed.js
new file mode 100644
index 000000000..06e4b255d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/computed.js
@@ -0,0 +1,4 @@
+export function shouldLoadImage(index, currentIndex, loadedIndexes) {
+  return Math.abs(index - currentIndex) <= 1 || (loadedIndexes && loadedIndexes.indexOf(index) !== -1);
+}
+
diff --git a/packages/tdesign-uniapp/components/image-viewer/image-viewer.less b/packages/tdesign-uniapp/components/image-viewer/image-viewer.less
new file mode 100644
index 000000000..12fe4579c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/image-viewer.less
@@ -0,0 +1,101 @@
+@import '../common/style/base.less';
+
+@image-viewer: ~'@{prefix}-image-viewer';
+
+@image-viewer-icon-font-size: 48rpx;
+
+@image-viewer-nav-height: var(--td-image-viewer-nav-height, 96rpx);
+@image-viewer-nav-bg-color: var(--td-image-viewer-nav-bg-color, #000);
+@image-viewer-nav-color: var(--td-image-viewer-nav-color, @text-color-anti);
+@image-viewer-mask-bg-color: var(--td-image-viewer-mask-bg-color, @mask-active);
+@image-viewer-nav-index-font-size: var(--td-image-viewer-nav-index-font-size, @font-size-base);
+@image-viewer-close-margin-left: var(--td-image-viewer-close-margin-left, @spacer-1);
+@image-viewer-delete-margin-right: var(--td-image-viewer-delete-margin-right, @spacer-1);
+@image-viewer-top: var(--td-image-viewer-top, @position-fixed-top);
+
+.@{image-viewer} {
+  position: fixed;
+  top: @image-viewer-top;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1001;
+  transform: translateZ(0);
+  overflow: hidden;
+
+  &__mask {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: @image-viewer-mask-bg-color;
+  }
+
+  &__content {
+    width: 100vw;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1005;
+  }
+
+  .swiper {
+    outline: 0;
+  }
+
+  &__image {
+    width: 100%;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :deep(.t-image--external) {
+    width: inherit;
+    height: inherit;
+    display: block;
+  }
+
+  &__nav {
+    width: 100%;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @image-viewer-nav-height; // 操作条高度
+    background-color: @image-viewer-nav-bg-color; // 操作条背景色
+    left: 0;
+    color: @image-viewer-nav-color; // 操作条文本颜色
+    z-index: 1005;
+
+    &-close {
+      margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &-delete {
+      margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距
+      &:empty {
+        display: none;
+      }
+    }
+
+    &-close,
+    &-delete {
+      font-size: @image-viewer-icon-font-size;
+    }
+
+    &-index {
+      flex: 1;
+      font-size: @image-viewer-nav-index-font-size; // 索引文本大小
+      text-align: center;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/image-viewer/image-viewer.vue b/packages/tdesign-uniapp/components/image-viewer/image-viewer.vue
new file mode 100644
index 000000000..17902295a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/image-viewer.vue
@@ -0,0 +1,312 @@
+<template>
+  <view
+    v-if="dataVisible"
+    :id="classPrefix"
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle, '--td-image-viewer-top: ' + distanceTop + 'px'])"
+    :aria-modal="true"
+    aria-role="dialog"
+    aria-label="图片查看器"
+    @touchmove.stop.prevent="true"
+  >
+    <view
+      :class="classPrefix + '__mask'"
+      data-source="overlay"
+      :style="'background-color: ' + backgroundColor"
+      aria-role="button"
+      aria-label="关闭"
+      @click="(e) => onClose(e, 'overlay')"
+    />
+    <block v-if="images && images.length">
+      <view :class="classPrefix + '__content'">
+        <swiper
+          class="swiper"
+          :style="swiperStyle[currentSwiperIndex]?.style"
+          :autoplay="false"
+          :current="currentSwiperIndex"
+          tabindex="0"
+          @change="onSwiperChange"
+          @click="(e) => onClose(e, '')"
+        >
+          <swiper-item
+            v-for="(item, index) in images"
+            :key="index"
+            :class="classPrefix + '__preview-image'"
+          >
+            <t-image
+              v-if="!lazy || shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes)"
+              t-class="t-image--external"
+              :custom-style="imagesStyle[index]?.style || ''"
+              mode="aspectFit"
+              :src="item"
+              :data-index="index"
+              :class="classPrefix + '__image'"
+              @load="onImageLoadSuccess($event, { index })"
+            />
+          </swiper-item>
+        </swiper>
+      </view>
+      <view
+        :class="classPrefix + '__nav'"
+      >
+        <view
+          :class="classPrefix + '__nav-close'"
+          aria-role="button"
+          aria-label="关闭"
+          @click.stop.prevent="(e) => onClose(e, '')"
+        >
+          <slot name="close-btn" />
+          <block
+            v-if="_closeBtn"
+            name="icon"
+          >
+            <t-icon
+              :custom-style="_closeBtn.style || ''"
+              :t-class="_closeBtn.tClass"
+              :prefix="_closeBtn.prefix"
+              :name="_closeBtn.name"
+              :size="_closeBtn.size"
+              :color="_closeBtn.color"
+              :aria-hidden="!!_closeBtn.ariaHidden"
+              :aria-label="_closeBtn.ariaLabel"
+              :aria-role="_closeBtn.ariaRole"
+              @click="_closeBtn.click || ''"
+            />
+          </block>
+        </view>
+        <view
+          v-if="showIndex"
+          :class="classPrefix + '__nav-index'"
+        >
+          {{ currentSwiperIndex + 1 }}/{{ images.length }}
+        </view>
+        <view
+          :class="classPrefix + '__nav-delete'"
+          aria-role="button"
+          aria-label="删除"
+          @click="onDelete"
+        >
+          <slot name="delete-btn" />
+          <t-icon
+            v-if="_deleteBtn"
+            :custom-style="_deleteBtn.style || ''"
+            :t-class="_deleteBtn.tClass"
+            :prefix="_deleteBtn.prefix"
+            :name="_deleteBtn.name"
+            :size="_deleteBtn.size"
+            :color="_deleteBtn.color"
+            :aria-hidden="!!_deleteBtn.ariaHidden"
+            :aria-label="_deleteBtn.ariaLabel"
+            :aria-role="_deleteBtn.ariaRole"
+            @click="_deleteBtn.click || ''"
+          />
+        </view>
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import tImage from '../image/image';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { styles, calcIcon, systemInfo } from '../common/utils';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { shouldLoadImage } from './computed.js';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+
+
+const name = `${prefix}-image-viewer`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'visible',
+      event: 'close',
+    },
+  ],
+  externalClasses: [`${prefix}-class`],
+  mixins: [useCustomNavbar],
+  components: {
+    tImage,
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      currentSwiperIndex: 0,
+      loadedImageIndexes: [],
+      windowHeight: 0,
+      windowWidth: 0,
+      swiperStyle: {},
+      imagesStyle: {},
+      maskTop: 0,
+      _,
+
+      _deleteBtn: null,
+      _closeBtn: null,
+      dataVisible: this.visible,
+    };
+  },
+  watch: {
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+        this.init();
+      },
+    },
+    initialIndex: 'init',
+    images: 'init',
+
+    closeBtn: {
+      handler(v) {
+        this._closeBtn = calcIcon(v, 'close');
+      },
+      immediate: true,
+    },
+
+    deleteBtn: {
+      handler(v) {
+        this._deleteBtn =  calcIcon(v, 'delete');
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.saveScreenSize();
+    // this.calcMaskTop();
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    shouldLoadImage,
+    init() {
+      const { visible: dataVisible, images, initialIndex } = this;
+      if (dataVisible && images?.length) {
+        this.loadedImageIndexes = [];
+        this.currentSwiperIndex =  initialIndex >= images.length ? images.length - 1 : initialIndex;
+      }
+    },
+    calcMaskTop() {
+      if (this.usingCustomNavbar) {
+        const rect = wx?.getMenuButtonBoundingClientRect() || null;
+        const { statusBarHeight } = systemInfo;
+
+        if (rect && statusBarHeight) {
+          this.maskTop =  rect.top - statusBarHeight + rect.bottom;
+        }
+      }
+    },
+    saveScreenSize() {
+      const { windowHeight, windowWidth } = systemInfo;
+      this.windowHeight = windowHeight;
+      this.windowWidth = windowWidth;
+    },
+
+    calcImageDisplayStyle(imageWidth, imageHeight) {
+      const { windowWidth, windowHeight } = this;
+      const ratio = imageWidth / imageHeight;
+      // 图片宽高都小于屏幕宽高
+      if (imageWidth < windowWidth && imageHeight < windowHeight) {
+        return {
+          styleObj: {
+            width: `${imageWidth}px`,
+            height: `${imageHeight}px`,
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          },
+        };
+      }
+      // 图片宽高至少存在一个大于屏幕宽高，此时判断图片宽高比，按长边显示
+      if (ratio >= 1) {
+        return {
+          styleObj: {
+            width: '100vw',
+            height: `${(windowWidth / ratio)}px`,
+          },
+        };
+      }
+
+      // 图片的高大于宽（纵向图），设定高度为100vh，宽度自适应，且确保宽度不超过屏幕宽度
+      const scaledHeight = ratio * windowHeight * 2;
+      if (scaledHeight < windowWidth) {
+        return {
+          styleObj: {
+            width: `${scaledHeight}rpx`,
+            height: '100vh',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          },
+        };
+      }
+      // 当通过高度计算的图片宽度超过屏幕宽度时, 以屏幕宽度为基准, 重新计算高度
+      return {
+        styleObj: {
+          width: '100vw',
+          height: `${(windowWidth / imageWidth) * imageHeight}px`,
+        },
+      };
+    },
+
+    onImageLoadSuccess({ e }, { index }) {
+      const {
+        detail: { width, height },
+      } = e;
+
+      const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
+      const originImagesStyle = this.imagesStyle;
+      const originSwiperStyle = this.swiperStyle;
+
+      if (!this.loadedImageIndexes.includes(index)) {
+        this.loadedImageIndexes = [...this.loadedImageIndexes, index];
+      }
+
+
+      this.swiperStyle = {
+        ...originSwiperStyle,
+        [index]: {
+          style: `height: ${styleObj.height}`,
+        },
+      };
+      this.imagesStyle = {
+        ...originImagesStyle,
+        [index]: {
+          mode,
+          style: styles({ ...styleObj }),
+        },
+      };
+    },
+
+    onSwiperChange(e) {
+      const {
+        detail: { current },
+      } = e;
+      this.currentSwiperIndex = current;
+
+      this._trigger('change', { index: current });
+    },
+
+    onClose(e, source) {
+      this._trigger('close', { visible: false, trigger: source || 'button', index: this.currentSwiperIndex });
+    },
+
+    onDelete() {
+      this._trigger('delete', { index: this.currentSwiperIndex });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './image-viewer.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/image-viewer/props.ts b/packages/tdesign-uniapp/components/image-viewer/props.ts
new file mode 100644
index 000000000..7ee49e5b6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/props.ts
@@ -0,0 +1,65 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdImageViewerProps } from './type';
+export default {
+  /** 遮罩的背景颜色 */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 */
+  closeBtn: {
+    type: [String, Boolean, Object],
+    default: false as TdImageViewerProps['closeBtn'],
+  },
+  /** 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 */
+  deleteBtn: {
+    type: [String, Boolean, Object],
+    default: false as TdImageViewerProps['deleteBtn'],
+  },
+  /** 图片数组 */
+  images: {
+    type: Array,
+    default: (): TdImageViewerProps['images'] => [],
+  },
+  /** 初始化页码 */
+  initialIndex: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否开启图片懒加载。开启后会预加载当前图片、相邻图片 */
+  lazy: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示页码 */
+  showIndex: Boolean,
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 隐藏/显示预览 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 隐藏/显示预览，非受控属性 */
+  defaultVisible: Boolean,
+  /** 翻页时回调 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击操作按钮button或者overlay时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击删除操作按钮时触发 */
+  onDelete: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/image-viewer/type.ts b/packages/tdesign-uniapp/components/image-viewer/type.ts
new file mode 100644
index 000000000..1935f5477
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image-viewer/type.ts
@@ -0,0 +1,70 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdImageViewerProps {
+  /**
+   * 遮罩的背景颜色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标
+   * @default false
+   */
+  closeBtn?: string | boolean | object;
+  /**
+   * 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标
+   * @default false
+   */
+  deleteBtn?: string | boolean | object;
+  /**
+   * 图片数组
+   * @default []
+   */
+  images?: Array<string>;
+  /**
+   * 初始化页码
+   * @default 0
+   */
+  initialIndex?: Number;
+  /**
+   * 是否开启图片懒加载。开启后会预加载当前图片、相邻图片
+   * @default true
+   */
+  lazy?: boolean;
+  /**
+   * 是否显示页码
+   * @default false
+   */
+  showIndex?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 隐藏/显示预览
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 隐藏/显示预览，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 翻页时回调
+   */
+  onChange?: (context: { index: number }) => void;
+  /**
+   * 点击操作按钮button或者overlay时触发
+   */
+  onClose?: (context: { trigger: 'overlay' | 'button'; visible: Boolean; index: Number }) => void;
+  /**
+   * 点击删除操作按钮时触发
+   */
+  onDelete?: (context: { index: number }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/image/README.en-US.md b/packages/tdesign-uniapp/components/image/README.en-US.md
new file mode 100644
index 000000000..053d08a41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/README.en-US.md
@@ -0,0 +1,51 @@
+:: BASE_DOC ::
+
+## API
+
+### Image Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+error | String | 'default' | \- | N
+height | String / Number | - | \- | N
+lazy | Boolean | false | \- | N
+loading | String | 'default' | \- | N
+mode | String | scaleToFill | options: scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+shape | String | square | options: circle/round/square | N
+show-menu-by-longpress | Boolean | false | \- | N
+src | String | - | \- | N
+t-id | String | - | image tag id | N
+webp | Boolean | false | \- | N
+width | String / Number | - | \- | N
+
+### Image Events
+
+name | params | description
+-- | -- | --
+error | `(context: { e: ImageEvent })` | trigger on image load failed。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+load | `(context: { e: ImageEvent })` | trigger on image loaded。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+
+### Image Slots
+
+name | Description
+-- | --
+error | \-
+loading | \-
+
+### Image External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-load | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-color | @text-color-placeholder | - 
+--td-image-loading-bg-color | @bg-color-secondarycontainer | - 
+--td-image-loading-color | @text-color-placeholder | - 
+--td-image-round-radius | @radius-default | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/image/README.md b/packages/tdesign-uniapp/components/image/README.md
new file mode 100644
index 000000000..c1ef215d6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/README.md
@@ -0,0 +1,86 @@
+---
+title: Image 图片
+description: 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TImage from 'tdesign-uniapp/image/image.vue';
+```
+
+### 裁切样式
+
+{{ base }}
+
+### 加载状态
+
+{{ status }}
+
+## 常见问题
+
+<details>
+  <summary>
+    本地图片无法正确引用?
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
+  </p>
+</details>
+
+## API
+
+### Image Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+error | String | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
+height | String / Number | - | 高度，默认单位为`px` | N
+lazy | Boolean | false | 是否开启图片懒加载 | N
+loading | String | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” | N
+mode | String | scaleToFill | 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+shape | String | square | 图片圆角类型。可选项：circle/round/square | N
+show-menu-by-longpress | Boolean | false | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单 | N
+src | String | - | 图片链接 | N
+t-id | String | - | 图片标签id | N
+webp | Boolean | false | 默认不解析 webP 格式，只支持网络资源 | N
+width | String / Number | - | 宽度，默认单位为`px` | N
+
+### Image Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | `(context: { e: ImageEvent })` | 图片加载失败时触发。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+load | `(context: { e: ImageEvent })` | 图片加载完成时触发。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts)
+
+### Image Slots
+
+名称 | 描述
+-- | --
+error | 自定义 `error` 显示内容
+loading | 自定义 `loading` 显示内容
+
+### Image External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-load | 加载样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-image-color | @text-color-placeholder | - |
+| --td-image-loading-bg-color | @bg-color-secondarycontainer | - |
+| --td-image-loading-color | @text-color-placeholder | - |
+| --td-image-round-radius | @radius-default | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/image/_example/base/index.vue b/packages/tdesign-uniapp/components/image/_example/base/index.vue
new file mode 100644
index 000000000..db8afd531
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/base/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <view>
+    <view class="tr">
+      <view class="col">
+        <view class="text">
+          裁切
+        </view>
+        <t-image
+          :src="imageSrc"
+          mode="aspectFill"
+          width="72"
+          height="72"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          适应高
+        </view>
+        <t-image
+          :src="imageSrc"
+          mode="heightFix"
+          width="72"
+          height="72"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          拉伸
+        </view>
+        <t-image
+          :src="imageSrc"
+          width="72"
+          height="72"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+    </view>
+
+    <view class="tr">
+      <view class="col">
+        <view class="text">
+          方形
+        </view>
+        <t-image
+          :src="imageSrc"
+          mode="aspectFill"
+          width="72"
+          height="72"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          圆角方形
+        </view>
+        <t-image
+          :src="imageSrc"
+          width="72"
+          height="72"
+          shape="round"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          圆形
+        </view>
+        <t-image
+          :src="imageSrc"
+          width="72"
+          height="72"
+          shape="circle"
+          aria-label="一个放置在墙角的黄色行李箱"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tImage from 'tdesign-uniapp/image/image.vue';
+export default {
+  components: {
+    tImage,
+  },
+  data() {
+    return {
+      imageSrc: 'https://tdesign.gtimg.com/mobile/demos/image1.jpeg',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.tr {
+    display: flex;
+}
+
+.col {
+    margin: 0 32rpx;
+    flex: 1;
+}
+
+.tr + .tr {
+    margin-top: 48rpx;
+}
+
+.text {
+    font-size: 28rpx;
+    color: var(--td-text-color-secondary);
+    line-height: 44rpx;
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/image/_example/image.less b/packages/tdesign-uniapp/components/image/_example/image.less
new file mode 100644
index 000000000..589e03c70
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/image.less
@@ -0,0 +1,57 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.title {
+    margin: 0rpx 32rpx;
+    padding-top: 48rpx;
+    font-size: 44rpx;
+    font-weight: bold;
+    line-height: 64rpx;
+}
+
+.desc {
+    margin-top: 10rpx;
+    margin-bottom: 10rpx;
+    margin-left: 32rpx;
+    margin-right: 32rpx;
+    color: #999;
+    font-size: 26rpx;
+    line-height: 36rpx;
+}
+
+.row {
+    display: flex;
+    align-items: flex-end;
+}
+
+.gutter-row {
+    height: 32rpx;
+}
+
+.gutter-column-24 {
+    width: 24rpx * 2;
+    display: inline-block;
+}
+
+.gutter-column-32 {
+    width: 32rpx * 2;
+    display: inline-block;
+}
+
+.image-example {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .text {
+        margin-top: 8rpx * 2;
+        font-size: 24rpx;
+        color: var(--td-text-color-placeholder);
+    }
+}
+
+.bottom-row {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
diff --git a/packages/tdesign-uniapp/components/image/_example/image.vue b/packages/tdesign-uniapp/components/image/_example/image.vue
new file mode 100644
index 000000000..8dcb23884
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/image.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Image"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Image 图片"
+        desc="用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。"
+      />
+      <t-demo title="01 组件类型">
+        <baseComp />
+      </t-demo>
+
+      <t-demo title="02 组件状态">
+        <status />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseComp from './base/index.vue';
+import status from './status/index.vue';
+export default {
+  components: {
+    baseComp,
+    status,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './image.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/image/_example/skyline/image.less b/packages/tdesign-uniapp/components/image/_example/skyline/image.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/skyline/image.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/image/_example/skyline/image.vue b/packages/tdesign-uniapp/components/image/_example/skyline/image.vue
new file mode 100644
index 000000000..8eeb8eae9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/skyline/image.vue
@@ -0,0 +1,53 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+
+    class="demo-navbar"
+    title="Image"
+    left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Image 图片
+        </view>
+        <view class="demo-desc">
+          用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
+        </view>
+        <t-demo title="01 组件类型">
+          <baseDemo />
+        </t-demo>
+
+        <t-demo title="02 组件状态">
+          <status />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import status from '../status/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    status,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './image.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/image/_example/status/index.vue b/packages/tdesign-uniapp/components/image/_example/status/index.vue
new file mode 100644
index 000000000..80c486b1f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/_example/status/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <view>
+    <view class="tr">
+      <view class="col">
+        <view class="text">
+          加载默认提示
+        </view>
+        <t-image
+          ref="loading-img"
+          shape="round"
+          width="72"
+          height="72"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          加载自定义提示
+        </view>
+        <t-image
+          ref="loading-img-custom"
+          shape="round"
+          loading="slot"
+          width="72"
+          height="72"
+        >
+          <template #loading>
+            <t-loading
+              theme="spinner"
+              size="40rpx"
+              loading
+            />
+          </template>
+        </t-image>
+      </view>
+    </view>
+
+    <view class="tr">
+      <view class="col">
+        <view class="text">
+          失败默认提示
+        </view>
+        <t-image
+          id="loading-img"
+          shape="round"
+          src="a"
+          width="72"
+          height="72"
+        />
+      </view>
+      <view class="col">
+        <view class="text">
+          失败自定义提示
+        </view>
+        <t-image
+          src="a"
+          shape="round"
+          error="slot"
+          width="72"
+          height="72"
+        >
+          <template #error>
+            <text
+              class="error-text"
+            >
+              加载失败
+            </text>
+          </template>
+        </t-image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tImage from 'tdesign-uniapp/image/image.vue';
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+export default {
+  components: {
+    tImage,
+    tLoading,
+  },
+  data() {
+    return {
+      isLoading: false,
+      isFailed: false,
+    };
+  },
+  pageLifetimes: {
+    show() {
+      this.handlePageShow();
+    },
+  },
+  created() {},
+  methods: {
+    handlePageShow() {
+      const $ele1 = this.$refs['#loading-img'];
+      const $ele2 = this.$refs['#loading-img-custom'];
+      this.setLoadingStatus($ele1);
+      this.setLoadingStatus($ele2);
+    },
+
+    setLoadingStatus(ele) {
+      ele.onLoadError = null;
+      ele.onLoaded = null;
+
+      ele.isLoading = true;
+      ele.isFailed = false;
+    },
+  },
+};
+</script>
+<style>
+.tr {
+    display: flex;
+}
+
+.col {
+    margin: 0 32rpx;
+}
+
+.tr + .tr {
+    margin-top: 48rpx;
+}
+
+.text {
+    font-size: 28rpx;
+    color: var(--td-text-color-secondary);
+    line-height: 44rpx;
+    margin-bottom: 32rpx;
+}
+
+.error-text {
+    font-size: 20rpx;
+    font-weight: 400;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/image/image.less b/packages/tdesign-uniapp/components/image/image.less
new file mode 100644
index 000000000..d81c019cc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/image.less
@@ -0,0 +1,61 @@
+@import '../common/style/base.less';
+
+@image-color: var(--td-image-color, @text-color-placeholder);
+@image-loading-bg-color: var(--td-image-loading-bg-color, @bg-color-secondarycontainer);
+@image-loading-color: var(--td-image-loading-color, @text-color-placeholder);
+@image-round-radius: var(--td-image-round-radius, @radius-default);
+
+.@{prefix}-image {
+  position: relative;
+  display: inline-block;
+
+  &__mask,
+  &__img {
+    color: @image-color;
+    vertical-align: top;
+    width: inherit;
+    height: inherit;
+  }
+
+  &__mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @image-loading-bg-color;
+    color: @image-loading-color;
+  }
+
+  &--loading-text {
+    width: 0;
+    height: 0;
+  }
+
+  &__common {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--lazy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  &--shape {
+    &-circle {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    &-round {
+      border-radius: @image-round-radius;
+      overflow: hidden;
+    }
+
+    &-square {
+      border-radius: 0;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/image/image.vue b/packages/tdesign-uniapp/components/image/image.vue
new file mode 100644
index 000000000..e0ce13b67
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/image.vue
@@ -0,0 +1,200 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[tClass, classPrefix]"
+  >
+    <view
+      v-if="isLoading"
+      :style="_._style([innerStyle])"
+      :class="classPrefix + '__mask ' + classPrefix + '--loading ' + classPrefix + '--shape-' + shape"
+      :aria-hidden="ariaHidden"
+    >
+      <t-loading
+        v-if="loading === 'default'"
+        theme="dots"
+        size="44rpx"
+        loading
+        inherit-color
+        :t-class="tClassLoad"
+        :t-class-text="classPrefix + '--loading-text'"
+      />
+      <view
+        v-else-if="loading !== '' && loading !== 'slot'"
+        :class="classPrefix + '__common ' + tClassLoad"
+      >
+        {{ loading }}
+      </view>
+      <slot
+        v-else
+        name="loading"
+      />
+    </view>
+    <view
+      v-else-if="isFailed"
+      :style="_._style([innerStyle])"
+      :class="[
+        classPrefix + '__mask ' + classPrefix + '--failed ' + classPrefix + '--shape-' + shape,
+        tClassError
+      ]"
+      :aria-hidden="ariaHidden"
+    >
+      <view
+        v-if="error === 'default'"
+        style="font-size: 44rpx"
+        :class="tClassLoad"
+      >
+        <t-icon
+          name="close"
+          aria-role="img"
+          aria-label="加载失败"
+        />
+      </view>
+      <view
+        v-else-if="error && error !== 'slot'"
+        :class="[classPrefix + '__common ', tClassLoad]"
+      >
+        {{ error }}
+      </view>
+      <slot
+        v-else
+        name="error"
+      />
+    </view>
+    <image
+      v-if="!isFailed"
+      :id="tId || 'image'"
+      :style="_._style([innerStyle])"
+      :class="[
+        classPrefix + '__img ' + classPrefix + '--shape-' + shape + ' ',
+        (isLoading ? classPrefix + '--lazy' : '') + ' ',
+        tClassImage
+      ]"
+      :src="src"
+      :mode="mode"
+      :webp="webp"
+      :lazy-load="lazy"
+      :show-menu-by-longpress="showMenuByLongpress"
+      :aria-hidden="ariaHidden || isLoading || isFailed"
+      :aria-label="ariaLabel"
+      @load="onLoaded"
+      @error="onLoadError"
+    />
+  </view>
+</template>
+<script>
+import tLoading from '../loading/loading';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import ImageProps from './props';
+import { prefix } from '../common/config';
+import { addUnit, getRect, appBaseInfo } from '../common/utils';
+import { compareVersion } from '../common/version';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-image`;
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-load`,
+    `${prefix}-class-image`,
+    `${prefix}-class-error`,
+  ],
+  components: {
+    tLoading,
+    tIcon,
+  },
+  props: {
+    ...ImageProps,
+  },
+  data() {
+    return {
+      prefix,
+      isLoading: true,
+      isFailed: false,
+      innerStyle: '',
+      classPrefix: name,
+      _,
+      preSrc: '',
+    };
+  },
+  watch: {
+    src() {
+      if (this.preSrc !== this.src) {
+        this.update();
+      }
+    },
+    width: 'calcSize',
+    height: 'calcSize',
+  },
+  mounted() {
+    this.calcSize(this.width, this.height);
+  },
+  methods: {
+    onLoaded(e) {
+      const version = appBaseInfo.SDKVersion;
+      const {
+        mode,
+        tId,
+      } = this;
+
+      const lower = compareVersion(version, '2.10.3') < 0;
+      // #ifdef MP-WEIXIN || MP-QQ
+      if ('heightFix' === mode && lower) {
+        getRect(this, `#${tId || 'image'}`).then((e) => {
+          const {
+            height,
+            width,
+          } = e;
+
+          this.innerStyle = `height: ${addUnit(height)}; width: ${width}px;`;
+        })
+          .catch(() => {
+
+          });
+      }
+      // #endif
+      this.isLoading = false;
+      this.isFailed = false;
+      this.$emit('load', { e });
+    },
+    onLoadError(e) {
+      this.isLoading = false;
+      this.isFailed = true;
+
+      this.$emit('error', { e });
+    },
+    calcSize(width = this.width, height = this.height) {
+      let innerStyle = '';
+      if (width) {
+        innerStyle += `width: ${addUnit(width)};`;
+      }
+      if (height) {
+        innerStyle += `height: ${addUnit(height)};`;
+      }
+      this.innerStyle = innerStyle;
+    },
+    update() {
+      const {
+        src,
+      } = this;
+      this.preSrc = src;
+      if (src) {
+        this.isLoading = true;
+        this.isFailed = false;
+      } else {
+        this.onLoadError({
+          errMsg: '图片链接为空',
+        });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './image.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/image/props.ts b/packages/tdesign-uniapp/components/image/props.ts
new file mode 100644
index 000000000..26831738a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/props.ts
@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdImageProps } from './type';
+export default {
+  /** 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” */
+  error: {
+    type: String,
+    default: 'default' as TdImageProps['error'],
+  },
+  /** 高度，默认单位为`px` */
+  height: {
+    type: [String, Number],
+  },
+  /** 是否开启图片懒加载 */
+  lazy: Boolean,
+  /** 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” */
+  loading: {
+    type: String,
+    default: 'default' as TdImageProps['loading'],
+  },
+  /** 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html) */
+  mode: {
+    type: String,
+    default: 'scaleToFill' as TdImageProps['mode'],
+    validator(val: TdImageProps['mode']): boolean {
+      if (!val) return true;
+      return ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'].includes(val);
+    },
+  },
+  /** 图片圆角类型 */
+  shape: {
+    type: String,
+    default: 'square' as TdImageProps['shape'],
+    validator(val: TdImageProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round', 'square'].includes(val);
+    },
+  },
+  /** 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单 */
+  showMenuByLongpress: Boolean,
+  /** 图片链接 */
+  src: {
+    type: String,
+    default: '',
+  },
+  /** 图片标签id */
+  tId: {
+    type: String,
+    default: '',
+  },
+  /** 默认不解析 webP 格式，只支持网络资源 */
+  webp: Boolean,
+  /** 宽度，默认单位为`px` */
+  width: {
+    type: [String, Number],
+  },
+  /** 图片加载失败时触发 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 图片加载完成时触发 */
+  onLoad: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/image/type.ts b/packages/tdesign-uniapp/components/image/type.ts
new file mode 100644
index 000000000..0b1444ecd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/image/type.ts
@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { ImageEvent } from '../common/common';
+
+export interface TdImageProps {
+  /**
+   * 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”
+   * @default 'default'
+   */
+  error?: string;
+  /**
+   * 高度，默认单位为`px`
+   */
+  height?: string | number;
+  /**
+   * 是否开启图片懒加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中”
+   * @default 'default'
+   */
+  loading?: string;
+  /**
+   * 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
+   * @default scaleToFill
+   */
+  mode?:
+    | 'scaleToFill'
+    | 'aspectFit'
+    | 'aspectFill'
+    | 'widthFix'
+    | 'heightFix'
+    | 'top'
+    | 'bottom'
+    | 'center'
+    | 'left'
+    | 'right'
+    | 'top left'
+    | 'top right'
+    | 'bottom left'
+    | 'bottom right';
+  /**
+   * 图片圆角类型
+   * @default square
+   */
+  shape?: 'circle' | 'round' | 'square';
+  /**
+   * 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单
+   * @default false
+   */
+  showMenuByLongpress?: boolean;
+  /**
+   * 图片链接
+   * @default ''
+   */
+  src?: string;
+  /**
+   * 图片标签id
+   * @default ''
+   */
+  tId?: string;
+  /**
+   * 默认不解析 webP 格式，只支持网络资源
+   * @default false
+   */
+  webp?: boolean;
+  /**
+   * 宽度，默认单位为`px`
+   */
+  width?: string | number;
+  /**
+   * 图片加载失败时触发
+   */
+  onError?: (context: { e: ImageEvent }) => void;
+  /**
+   * 图片加载完成时触发
+   */
+  onLoad?: (context: { e: ImageEvent }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/README.en-US.md b/packages/tdesign-uniapp/components/indexes-anchor/README.en-US.md
new file mode 100644
index 000000000..4abdff508
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/README.en-US.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+### IndexesAnchor Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+external-classes | Array | - | `['t-class']` | N
+index | String / Number | - | \- | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-border-color | @component-border | - 
+--td-indexes-anchor-color | @text-color-primary | - 
+--td-indexes-anchor-font-size | 28rpx | - 
+--td-indexes-anchor-line-height | 44rpx | - 
+--td-indexes-anchor-padding | 8rpx 32rpx | - 
+--td-indexes-anchor-top | 0 | - 
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/README.md b/packages/tdesign-uniapp/components/indexes-anchor/README.md
new file mode 100644
index 000000000..dd3602224
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/README.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### IndexesAnchor Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+index | String / Number | - | 索引字符 | N
+
+### IndexesAnchor 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-border-color | @component-border | - 
+--td-indexes-anchor-color | @text-color-primary | - 
+--td-indexes-anchor-font-size | 28rpx | - 
+--td-indexes-anchor-line-height | 44rpx | - 
+--td-indexes-anchor-padding | 8rpx 32rpx | - 
+--td-indexes-anchor-top | 0 | - 
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.less b/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.less
new file mode 100644
index 000000000..69f04ee85
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.less
@@ -0,0 +1,55 @@
+@import '../common/style/base.less';
+
+@indexes-anchor-color: var(--td-indexes-anchor-color, @text-color-primary);
+@indexes-anchor-active-color: var(--td-indexes-anchor-active-color, @brand-color);
+@indexes-anchor-bg-color: var(--td-indexes-anchor-bg-color, @bg-color-secondarycontainer);
+@indexes-anchor-active-bg-color: var(--td-indexes-anchor-active-bg-color, @bg-color-container);
+@indexes-anchor-font-size: var(--td-indexes-anchor-font-size, 28rpx);
+@indexes-anchor-line-height: var(--td-indexes-anchor-line-height, 44rpx);
+@indexes-anchor-active-font-weight: var(--td-indexes-anchor-active-font-weight, 600);
+@indexes-anchor-offset-top: var(--td-indexes-anchor-top, 0); // 锚点吸顶时与顶部的距离
+@indexes-anchor-padding: var(--td-indexes-anchor-padding, 8rpx 32rpx);
+@indexes-anchor-border-color: var(--td-indexes-anchor-border-color, @component-border);
+
+.@{prefix}-indexes-anchor {
+  color: @indexes-anchor-color;
+  font-size: @indexes-anchor-font-size;
+  line-height: @indexes-anchor-line-height;
+
+  &__header {
+    display: none;
+    padding: @indexes-anchor-padding;
+    background-color: @indexes-anchor-bg-color;
+
+    &--active {
+      background-color: @indexes-anchor-active-bg-color;
+
+      .border(bottom, @indexes-anchor-border-color);
+    }
+  }
+
+  &__slot {
+    overflow: hidden;
+  }
+
+  &__slot:empty + &__header {
+    display: block;
+  }
+
+  &__wrapper {
+    will-change: transform;
+
+    &--sticky {
+      position: fixed;
+      top: @indexes-anchor-offset-top;
+      left: 0;
+      width: 100%;
+      z-index: 1;
+    }
+
+    &--active {
+      color: @indexes-anchor-active-color;
+      font-weight: @indexes-anchor-active-font-weight;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.vue b/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.vue
new file mode 100644
index 000000000..cbf636093
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/indexes-anchor.vue
@@ -0,0 +1,73 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle])"
+  >
+    <view
+      :class="
+        _.cls(classPrefix + '__wrapper', [
+          ['sticky', sticky],
+          ['active', active]
+        ])
+      "
+      :style="anchorStyle"
+    >
+      <view :class="classPrefix + '__slot'">
+        <slot />
+      </view>
+      <view :class="_.cls(classPrefix + '__header', [['active', active]])">
+        {{ index }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-indexes-anchor`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.IndexesAnchor, {
+      indexKey: 'tIndex',
+    }),
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      anchorStyle: '',
+      sticky: false,
+      active: false,
+      _,
+    };
+  },
+  watch: {
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+@import './indexes-anchor.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/props.ts b/packages/tdesign-uniapp/components/indexes-anchor/props.ts
new file mode 100644
index 000000000..3545db333
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/props.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 索引字符 */
+  index: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/indexes-anchor/type.ts b/packages/tdesign-uniapp/components/indexes-anchor/type.ts
new file mode 100644
index 000000000..f529e4732
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes-anchor/type.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdIndexesAnchorProps {
+  /**
+   * 索引字符
+   */
+  index?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/indexes/README.en-US.md b/packages/tdesign-uniapp/components/indexes/README.en-US.md
new file mode 100644
index 000000000..533e3e5c6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/README.en-US.md
@@ -0,0 +1,78 @@
+:: BASE_DOC ::
+
+## API
+
+### Indexes Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+current | String / Number | - | `v-model:current` is supported | N
+default-current | String / Number | - | uncontrolled property | N
+index-list | Array | - | Typescript：`Array<string \| number>` | N
+list | Array | [] | `deprecated`。Typescript：`ListItem[] ` `interface ListItem { title: string;  index: string;  children: { title: string; [key: string]: any} [] }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/indexes/type.ts) | N
+sticky | Boolean | true | Typescript：`Boolean` | N
+sticky-offset | Number | 0 | \- | N
+
+### Indexes Events
+
+name | params | description
+-- | -- | --
+change | `(context: { index: string \| number })` | \-
+select | `(context: { index: string \| number })` | \-
+
+### Indexes Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### IndexesAnchor Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+index | String / Number | - | \- | N
+
+### IndexesAnchor Slots
+
+name | Description
+-- | --
+\- | \-
+
+### IndexesAnchor External Classes
+
+className | Description
+-- | --
+t-class | class name of root node
+t-class-sidebar | \-
+t-class-sidebar-item | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | - 
+--td-indexes-sidebar-active-color | @text-color-anti | - 
+--td-indexes-sidebar-color | @text-color-primary | - 
+--td-indexes-sidebar-font-size | 24rpx | - 
+--td-indexes-sidebar-item-size | 40rpx | - 
+--td-indexes-sidebar-line-height | 40rpx | - 
+--td-indexes-sidebar-right | 16rpx | - 
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | - 
+--td-indexes-sidebar-tips-color | @brand-color | - 
+--td-indexes-sidebar-tips-font-size | 40rpx | - 
+--td-indexes-sidebar-tips-right | calc(100% + 32rpx) | - 
+--td-indexes-sidebar-tips-size | 96rpx | - 
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-border-color | @component-border | - 
+--td-indexes-anchor-color | @text-color-primary | - 
+--td-indexes-anchor-font-size | 28rpx | - 
+--td-indexes-anchor-line-height | 44rpx | - 
+--td-indexes-anchor-padding | 8rpx 32rpx | - 
+--td-indexes-anchor-top | 0 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/indexes/README.md b/packages/tdesign-uniapp/components/indexes/README.md
new file mode 100644
index 000000000..18eae3de3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/README.md
@@ -0,0 +1,107 @@
+---
+title: Indexes 索引
+description: 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。
+spline: navigation
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TIndexes from 'tdesign-uniapp/indexes/indexes.vue';
+import TIndexesAnchor from 'tdesign-uniapp/indexes-anchor/indexes-anchor.vue';
+```
+
+### 基础索引
+
+
+{{ base }}
+
+### 自定义索引
+
+{{ custom }}
+
+## FAQ
+
+### 在滚动元素中， Indexes 索引组件失效（[#3746](https://github.com/Tencent/tdesign-miniprogram/issues/3746)）？
+
+`Indexes` 组件自 `0.32.0` 版本开始移除了对 `scroll-view` 的依赖，组件内部使用 [wx.pageScrollTo](https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html) 滚动到指定位置，因此只支持页面级滚动，不支持在滚动元素中嵌套使用，包括 overflow: scroll、 scroll-view 等。
+
+### API
+
+### Indexes Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+current | String / Number | - | 索引列表的激活项，默认首项。支持语法糖 `v-model:current` | N
+default-current | String / Number | - | 索引列表的激活项，默认首项。非受控属性 | N
+index-list | Array | - | 索引字符列表。不传默认 `A-Z`。TS 类型：`Array<string \| number>` | N
+list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。TS 类型：`ListItem[] ` `interface ListItem { title: string;  index: string;  children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/indexes/type.ts) | N
+sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
+sticky-offset | Number | 0 | 锚点吸顶时与顶部的距离	 | N
+
+### Indexes Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { index: string \| number })` | 索引发生变更时触发事件
+select | `(context: { index: string \| number })` | 点击侧边栏时触发事件
+
+### Indexes Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+
+### IndexesAnchor Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+index | String / Number | - | 索引字符 | N
+
+### IndexesAnchor Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### IndexesAnchor External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-sidebar | 侧边栏样式类
+t-class-sidebar-item | 侧边栏选项样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-indexes-sidebar-active-bg-color | @brand-color | - |
+| --td-indexes-sidebar-active-color | @text-color-anti | - |
+| --td-indexes-sidebar-color | @text-color-primary | - |
+| --td-indexes-sidebar-font-size | 24rpx | - |
+| --td-indexes-sidebar-item-size | 40rpx | - |
+| --td-indexes-sidebar-line-height | 40rpx | - |
+| --td-indexes-sidebar-right | 16rpx | - |
+| --td-indexes-sidebar-tips-bg-color | @brand-color-light | - |
+| --td-indexes-sidebar-tips-color | @brand-color | - |
+| --td-indexes-sidebar-tips-font-size | 40rpx | - |
+| --td-indexes-sidebar-tips-right | calc(100% + 32rpx) | - |
+| --td-indexes-sidebar-tips-size | 96rpx | - |
+| --td-indexes-anchor-active-bg-color | @bg-color-container | - |
+| --td-indexes-anchor-active-color | @brand-color | - |
+| --td-indexes-anchor-active-font-weight | 600 | - |
+| --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - |
+| --td-indexes-anchor-border-color | @component-border | - |
+| --td-indexes-anchor-color | @text-color-primary | - |
+| --td-indexes-anchor-font-size | 28rpx | - |
+| --td-indexes-anchor-line-height | 44rpx | - |
+| --td-indexes-anchor-padding | 8rpx 32rpx | - |
+| --td-indexes-anchor-top | 0 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/indexes/_example/base/index.vue b/packages/tdesign-uniapp/components/indexes/_example/base/index.vue
new file mode 100644
index 000000000..aef9393fd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/_example/base/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <view class="wrap">
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+    <t-indexes
+      :default-current="defaultCurrent"
+      :index-list="indexList"
+      :sticky-offset="stickyOffset"
+      @select="onSelect"
+      @change="onChange"
+    >
+      <block
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <t-indexes-anchor :index="item.index" />
+
+        <t-cell-group>
+          <t-cell
+            v-for="(city, index1) in item.children"
+            :key="index1"
+            :title="city"
+            aria-role="button"
+          />
+        </t-cell-group>
+      </block>
+    </t-indexes>
+  </view>
+</template>
+
+<script>
+import tIndexes from 'tdesign-uniapp/indexes/indexes.vue';
+import tIndexesAnchor from 'tdesign-uniapp/indexes-anchor/indexes-anchor.vue';
+import tCellGroup from 'tdesign-uniapp/cell-group/cell-group.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+export default {
+  components: {
+    tIndexes,
+    tIndexesAnchor,
+    tCellGroup,
+    tCell,
+  },
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+  data() {
+    return {
+      defaultCurrent: 'B',
+      indexList: [],
+
+      list: [
+        {
+          index: 'A',
+          children: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
+        },
+        {
+          index: 'B',
+          children: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州'],
+        },
+        {
+          index: 'C',
+          children: [
+            '重庆',
+            '成都',
+            '长沙',
+            '长春',
+            '沧州',
+            '常德',
+            '昌都',
+            '长治',
+            '常州',
+            '巢湖',
+            '潮州',
+            '承德',
+            '郴州',
+            '赤峰',
+            '池州',
+            '崇左',
+            '楚雄',
+            '滁州',
+            '朝阳',
+          ],
+        },
+        {
+          index: 'D',
+          children: ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营'],
+        },
+        {
+          index: 'E',
+          children: ['鄂尔多斯', '恩施', '鄂州'],
+        },
+        {
+          index: 'F',
+          children: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
+        },
+        {
+          index: 'G',
+          children: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
+        },
+        {
+          index: 'J',
+          children: ['揭阳', '吉林', '晋江', '吉安', '胶州', '嘉兴', '济南', '鸡西', '荆州', '江门', '基隆'],
+        },
+        {
+          index: 'K',
+          children: ['昆明', '开封', '康定', '喀什'],
+        },
+      ],
+
+      stickyOffset: 0,
+      city: '',
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+    this.indexList = this.list.map(item => item.index);
+  },
+  methods: {
+    onChange(e) {
+      const { index } = e;
+      console.log('change:', index);
+    },
+
+    onSelect(e) {
+      const { index } = e;
+      console.log('select:', index);
+    },
+
+    getCustomNavbarHeight() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const { height = 0 } = res[0] || {};
+        this.stickyOffset = height;
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/* #ifdef H5 */
+.wrap {
+  height: 100%;
+  overflow: auto;
+}
+/* #endif */
+
+</style>
diff --git a/packages/tdesign-uniapp/components/indexes/_example/custom/index.vue b/packages/tdesign-uniapp/components/indexes/_example/custom/index.vue
new file mode 100644
index 000000000..31a193704
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/_example/custom/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <view class="wrap">
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+    <view class="indexes">
+      <t-indexes
+        :index-list="indexList"
+        :sticky-offset="stickyOffset + 8"
+        t-class="wrapper"
+        @change="onChange"
+        @select="onSelect"
+      >
+        <template
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <t-indexes-anchor
+            :index="item.index"
+            t-class="anchor-wrapper"
+          >
+            <view :class="'capsule' + (curIndex == item.index ? ' capsule--active' : '')">
+              {{ item.index }}
+            </view>
+          </t-indexes-anchor>
+
+          <t-cell-group>
+            <t-cell
+              v-for="(city, index1) in item.children"
+              :key="index1"
+              :title="city"
+              :bordered="item.children.length - 1 != index"
+            />
+          </t-cell-group>
+        </template>
+      </t-indexes>
+    </view>
+  </view>
+</template>
+
+<script>
+import tIndexes from 'tdesign-uniapp/indexes/indexes.vue';
+import tIndexesAnchor from 'tdesign-uniapp/indexes-anchor/indexes-anchor.vue';
+import tCellGroup from 'tdesign-uniapp/cell-group/cell-group.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+const children = new Array(5).fill('列表内容');
+
+const list = [
+  {
+    index: 1,
+    children,
+  },
+  {
+    index: 3,
+    children,
+  },
+  {
+    index: 5,
+    children,
+  },
+  {
+    index: 7,
+    children,
+  },
+  {
+    index: 8,
+    children,
+  },
+  {
+    index: 10,
+    children,
+  },
+  {
+    index: '#',
+    children,
+  },
+];
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+  components: {
+    tIndexes,
+    tIndexesAnchor,
+    tCellGroup,
+    tCell,
+  },
+  data() {
+    return {
+      list,
+      indexList: list.map(item => item.index),
+      curIndex: '',
+      stickyOffset: 0,
+      city: '',
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    onChange(e) {
+      const { index } = e;
+      console.log('change:', index);
+      this.curIndex = index;
+    },
+
+    onSelect(e) {
+      const { index } = e;
+      console.log('select:', index);
+      this.curIndex = index;
+    },
+
+    getCustomNavbarHeight() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const { height = 0 } = res[0] || {};
+        this.stickyOffset = height;
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/* #ifdef H5 */
+.wrap {
+  height: 100%;
+  overflow: auto;
+}
+/* #endif */
+
+
+.capsule {
+    margin: 0 8px;
+    height: 30px;
+    border-radius: 15px;
+    background-color: var(--td-bg-color-secondarycontainer, #f3f3f3);
+    padding-left: 32rpx;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.capsule--active {
+    border: 1px solid var(--td-border-level-1-color, #e7e7e7);
+}
+
+:deep(.wrapper) {
+    padding-top: 8px;
+    /* height: 100%; */
+}
+
+.indexes,
+.capsule--active,
+:deep(.anchor-wrapper) {
+    background: var(--td-bg-color-container, #ffffff);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/indexes/_example/indexes.less b/packages/tdesign-uniapp/components/indexes/_example/indexes.less
new file mode 100644
index 000000000..fb61853d0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/_example/indexes.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+:deep(.t-button) {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/indexes/_example/indexes.vue b/packages/tdesign-uniapp/components/indexes/_example/indexes.vue
new file mode 100644
index 000000000..08af3908e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/_example/indexes.vue
@@ -0,0 +1,77 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Indexes"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="indexes">
+      <t-demo-header
+        title="Indexes 索引"
+        desc="用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础索引类型"
+        padding
+      >
+        <t-button
+          variant="outline"
+          theme="primary"
+          size="large"
+          block
+          @click="toBase"
+        >
+          基础用法
+        </t-button>
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="其他索引样式"
+        padding
+      >
+        <t-button
+          variant="outline"
+          theme="primary"
+          size="large"
+          block
+          @click="toCustom"
+        >
+          胶囊索引
+        </t-button>
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toBase() {
+      uni.navigateTo({
+        url: '/pages-more/indexes/base/index',
+      });
+    },
+
+    toCustom() {
+      uni.navigateTo({
+        url: '/pages-more/indexes/custom/index',
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './indexes.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/indexes/computed.js b/packages/tdesign-uniapp/components/indexes/computed.js
new file mode 100644
index 000000000..9ab8238f5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/computed.js
@@ -0,0 +1,4 @@
+export function getFirstCharacter(str) {
+  return str.toString().substring(0, 1);
+}
+
diff --git a/packages/tdesign-uniapp/components/indexes/indexes-anchor-props.ts b/packages/tdesign-uniapp/components/indexes/indexes-anchor-props.ts
new file mode 100644
index 000000000..3545db333
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/indexes-anchor-props.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 索引字符 */
+  index: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/indexes/indexes.less b/packages/tdesign-uniapp/components/indexes/indexes.less
new file mode 100644
index 000000000..a7ff54e6f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/indexes.less
@@ -0,0 +1,72 @@
+@import '../common/style/base.less';
+
+@indexes-sidebar-color: var(--td-indexes-sidebar-color, @text-color-primary);
+@indexes-sidebar-item-size: var(--td-indexes-sidebar-item-size, 40rpx);
+@indexes-sidebar-font-size: var(--td-indexes-sidebar-font-size, 24rpx);
+@indexes-sidebar-line-height: var(--td-indexes-sidebar-line-height, 40rpx);
+@indexes-sidebar-active-color: var(--td-indexes-sidebar-active-color, @text-color-anti);
+@indexes-sidebar-active-bg-color: var(--td-indexes-sidebar-active-bg-color, @brand-color);
+@indexes-sidebar-right: var(--td-indexes-sidebar-right, 16rpx);
+
+@indexes-sidebar-tips-size: var(--td-indexes-sidebar-tips-size, 96rpx);
+@indexes-sidebar-tips-font-size: var(--td-indexes-sidebar-tips-font-size, 40rpx);
+@indexes-sidebar-tips-color: var(--td-indexes-sidebar-tips-color, @brand-color);
+@indexes-sidebar-tips-bg-color: var(--td-indexes-sidebar-tips-bg-color, @brand-color-light);
+@indexes-sidebar-tips-right: var(--td-indexes-sidebar-tips-right, calc(100% + 32rpx));
+
+.@{prefix}-indexes {
+  position: relative;
+  height: 100vh;
+
+  &__sidebar {
+    position: fixed;
+    right: @indexes-sidebar-right;
+    width: @indexes-sidebar-item-size;
+    color: @indexes-sidebar-color;
+    font-size: @indexes-sidebar-font-size;
+    line-height: @indexes-sidebar-line-height;
+    display: flex;
+    flex-flow: column nowrap;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+
+    &-item {
+      border-radius: 50%;
+      position: relative;
+      text-align: center;
+
+      &--active {
+        background-color: @indexes-sidebar-active-bg-color;
+        color: @indexes-sidebar-active-color;
+      }
+    }
+
+    &-item + &-item {
+      margin-top: 4rpx;
+    }
+
+    &-tips {
+      min-width: @indexes-sidebar-tips-size;
+      max-width: 198rpx;
+      padding: 0 32rpx;
+      box-sizing: border-box;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: @indexes-sidebar-tips-size;
+      line-height: @indexes-sidebar-tips-size;
+      text-align: center;
+      font-size: @indexes-sidebar-tips-font-size;
+      font-weight: 700;
+      color: @indexes-sidebar-tips-color;
+      background-color: @indexes-sidebar-tips-bg-color;
+      border-radius: @indexes-sidebar-tips-size;
+      position: absolute;
+      top: 50%;
+      bottom: 0;
+      transform: translateY(-50%);
+      right: @indexes-sidebar-tips-right;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/indexes/indexes.vue b/packages/tdesign-uniapp/components/indexes/indexes.vue
new file mode 100644
index 000000000..c653d735c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/indexes.vue
@@ -0,0 +1,377 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+    disable-scroll
+  >
+    <view
+      :id="'id-' + classPrefix + '__bar'"
+      :class="classPrefix + '__sidebar ' + tClassSidebar"
+      @touchmove.stop.prevent="onTouchMove"
+      @touchcancel.stop.prevent="onTouchCancel"
+      @touchend.stop.prevent="onTouchEnd"
+    >
+      <view
+        v-for="(item, index) in _indexList"
+        :key="index"
+        :class="_.cls(classPrefix + '__sidebar-item', [['active', dataCurrent === item]]) + ' ' + tClassSidebarItem"
+        :data-index="index"
+        @click.stop="onClick(item, index)"
+      >
+        <view
+          aria-role="button"
+          :aria-label="dataCurrent === item ? '已选中' + item : ''"
+        >
+          {{ getFirstCharacter(item) }}
+        </view>
+
+        <view
+          v-if="showTips && dataCurrent === item"
+          :class="classPrefix + '__sidebar-tips'"
+        >
+          {{ dataCurrent }}
+        </view>
+      </view>
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tCell from '../cell/cell';
+import tCellGroup from '../cell-group/cell-group';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, throttle, systemInfo } from '../common/utils';
+import pageScrollMixin from '../mixins/page-scroll';
+import _ from '../common/utils.wxs';
+import { getFirstCharacter } from './computed.js';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-indexes`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'current',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-sidebar`,
+    `${prefix}-class-sidebar-item`,
+  ],
+  mixins: [
+    pageScrollMixin(),
+    ParentMixin(RELATION_MAP.IndexesAnchor),
+  ],
+  components: {
+    tIcon,
+    tCell,
+    tCellGroup,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'change',
+    'select',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _height: 0,
+      _indexList: [],
+      scrollTop: 0,
+      activeAnchor: this.current,
+      showTips: false,
+
+      _,
+
+      timer: null,
+      groupTop: [],
+      sidebar: null,
+      currentTouchAnchor: null,
+
+      dataCurrent: this.current,
+    };
+  },
+  watch: {
+    indexList: {
+      handler(v, pre) {
+        const cb = () => {
+          this.setIndexList(v);
+          this.setHeight(this._height);
+        };
+        if (!pre?.length) {
+          // 防止抖音小程序报错
+          setTimeout(() => {
+            cb();
+          }, 33);
+        } else {
+          cb();
+        }
+      },
+      immediate: true,
+    },
+    height(v) {
+      this.setHeight(v);
+    },
+    stickyOffset() {
+      this.setAnchorByCurrent(this.dataCurrent, 'update', true);
+    },
+
+    current: {
+      handler(val) {
+        this.dataCurrent = val;
+      },
+      immediate: true,
+    },
+    dataCurrent: {
+      handler(e) {
+        if (e && this.activeAnchor && e !== this.activeAnchor) {
+          this.setAnchorByCurrent(e, 'update');
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.timer = null;
+    this.groupTop = [];
+    this.sidebar = null;
+
+    if (this._height === 0) {
+      this.setHeight();
+    }
+
+    if (this.indexList === null) {
+      this.setIndexList();
+    }
+  },
+  methods: {
+    getFirstCharacter,
+    setHeight(height) {
+      if (!height) {
+        const { windowHeight } = systemInfo;
+        height = windowHeight;
+      }
+      this._height = height;
+
+      setTimeout(() => {
+        this.getAllRect();
+      });
+    },
+
+    setIndexList(list) {
+      if (!list) {
+        const start = 'A'.charCodeAt(0);
+        const alphabet = [];
+
+        for (let i = start, end = start + 26; i < end; i += 1) {
+          alphabet.push(String.fromCharCode(i));
+        }
+
+        this._indexList = alphabet;
+      } else {
+        this._indexList = list;
+      }
+    },
+
+    getAllRect() {
+      this.getAnchorsRect().then(() => {
+        this.groupTop.forEach((item, index) => {
+          const next = this.groupTop[index + 1];
+          item.totalHeight = (next?.top || Infinity) - item.top;
+        });
+
+        const current = this.dataCurrent || this._indexList[0];
+        this.setAnchorByCurrent(current, 'init');
+      })
+        .catch((err) => {
+          console.log('err', err);
+        });
+      this.getSidebarRect();
+    },
+
+    getAnchorsRect() {
+      return Promise.all((this.children || [])
+        .map(child => getRect(child, `.${name}-anchor`)
+          .then((rect) => {
+            this.groupTop.push({
+              height: rect.height,
+              top: rect.top,
+              anchor: child.index,
+            });
+          })
+          .catch((err) => {
+            console.log('err', err);
+          })));
+    },
+
+    getSidebarRect() {
+      getRect(this, `#id-${name}__bar`).then((rect) => {
+        const { top, height } = rect;
+        const { length } = this._indexList;
+
+        this.sidebar = {
+          top,
+          height,
+          itemHeight: (height - (length - 1) * 2) / length, // margin = 2px
+        };
+      })
+        .catch((err) => {
+          console.log('err', err);
+        });
+    },
+
+    toggleTips(flag) {
+      if (!flag) {
+        clearInterval(this.timer);
+        this.timer = setTimeout(() => {
+          this.showTips = false;
+        }, 300);
+      } else {
+        this.showTips = true;
+      }
+    },
+
+    setAnchorByCurrent(current, source, force) {
+      const { stickyOffset } = this;
+
+      if (this.activeAnchor !== null && this.activeAnchor === current && !force) return;
+
+      const target = this.groupTop.find(item => item.anchor === current);
+
+      // 寻求与 小程序 一致逻辑
+      // this.activeAnchor = current;
+      if (target) {
+        const scrollTop = target.top - stickyOffset;
+
+        // if (scrollTop === 0 && source === 'init') {
+        // 与当前小程序逻辑不同
+        this.setAnchorOnScroll(scrollTop);
+        // } else {
+        uni.pageScrollTo({
+          scrollTop,
+          duration: 0,
+        });
+        // }
+
+        if (['click', 'touch'].includes(source)) {
+          this.toggleTips(true);
+          this.$emit('select', { index: current });
+        }
+      }
+    },
+
+    onClick(current) {
+      this.setAnchorByCurrent(current, 'click');
+    },
+
+    onTouchMove(e) {
+      this.onAnchorTouch(e);
+    },
+
+    onTouchCancel() {
+      this.toggleTips(false);
+    },
+
+    onTouchEnd(e) {
+      this.toggleTips(false);
+      this.onAnchorTouch(e);
+    },
+
+    onAnchorTouch: throttle(function (e) {
+      const getAnchorIndex = (clientY) => {
+        const offsetY = clientY - this.sidebar.top;
+        const max = this._indexList.length - 1;
+
+        if (offsetY <= 0) {
+          return 0;
+        }
+
+        if (offsetY > this.sidebar.height) {
+          return max;
+        }
+
+        return Math.min(max, Math.floor(offsetY / this.sidebar.itemHeight));
+      };
+      const index = getAnchorIndex(e.changedTouches[0].clientY);
+
+      this.setAnchorByCurrent(this._indexList[index], 'touch');
+    }, 1000 / 30), // 30 frame
+
+    setAnchorOnScroll(scrollTop) {
+      if (!this.groupTop) {
+        return;
+      }
+
+      const { sticky, stickyOffset } = this;
+
+      scrollTop += stickyOffset;
+
+      const curIndex = this.groupTop.findIndex(group => scrollTop >= group.top - group.height && scrollTop <= group.top + group.totalHeight - group.height);
+
+      if (curIndex === -1) return;
+
+      const curGroup = this.groupTop[curIndex];
+
+      this.activeAnchor = curGroup.anchor;
+      setTimeout(() => {
+        this._trigger('change', { index: curGroup.anchor, current: curGroup.anchor });
+      });
+
+      if (sticky) {
+        const offset = curGroup.top - scrollTop;
+        const betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyOffset;
+
+        this.children.forEach((child, index) => {
+          if (index === curIndex) {
+            const sticky = scrollTop > stickyOffset;
+            const anchorStyle = `transform: translate3d(0, ${betwixt ? offset : 0}px, 0); top: ${stickyOffset}px`;
+            if (anchorStyle !== child.anchorStyle || sticky !== child.sticky) {
+              child.sticky = sticky;
+              child.active = true;
+              child.dataStyle = `height: ${curGroup.height}px`;
+              child.anchorStyle = anchorStyle;
+            }
+          } else if (index + 1 === curIndex) {
+            // 两个 anchor 同时出现时的上一个
+            const anchorStyle = `transform: translate3d(0, ${
+              betwixt ? offset - curGroup.height : 0
+            }px, 0); top: ${stickyOffset}px`;
+            if (anchorStyle !== child.anchorStyle) {
+              child.sticky = true;
+              child.active = true;
+              child.dataStyle = `height: ${curGroup.height}px`;
+              child.anchorStyle = anchorStyle;
+            }
+          } else {
+            child.active = false;
+            child.sticky = false;
+            child.dataStyle = '';
+            child.anchorStyle = '';
+          }
+        });
+      }
+    },
+
+    onScroll({ scrollTop }) {
+      this.setAnchorOnScroll(scrollTop);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './indexes.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/indexes/props.ts b/packages/tdesign-uniapp/components/indexes/props.ts
new file mode 100644
index 000000000..eb42187a4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/props.ts
@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 索引列表的激活项，默认首项 */
+  current: {
+    type: [String, Number],
+  },
+  /** 索引列表的激活项，默认首项，非受控属性 */
+  defaultCurrent: {
+    type: [String, Number],
+  },
+  /** 索引字符列表。不传默认 `A-Z` */
+  indexList: {
+    type: Array,
+  },
+  /** 索引是否吸顶，默认为true */
+  sticky: {
+    type: Boolean,
+    default: true,
+  },
+  /** 锚点吸顶时与顶部的距离	 */
+  stickyOffset: {
+    type: Number,
+    default: 0,
+  },
+  /** 索引发生变更时触发事件 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击侧边栏时触发事件 */
+  onSelect: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/indexes/type.ts b/packages/tdesign-uniapp/components/indexes/type.ts
new file mode 100644
index 000000000..3fa73d65b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/indexes/type.ts
@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdIndexesProps {
+  /**
+   * 索引列表的激活项，默认首项
+   */
+  current?: string | number;
+  /**
+   * 索引列表的激活项，默认首项，非受控属性
+   */
+  defaultCurrent?: string | number;
+  /**
+   * 索引字符列表。不传默认 `A-Z`
+   */
+  indexList?: Array<string | number>;
+  /**
+   * 索引是否吸顶，默认为true
+   * @default true
+   */
+  sticky?: Boolean;
+  /**
+   * 锚点吸顶时与顶部的距离
+   * @default 0
+   */
+  stickyOffset?: number;
+  /**
+   * 索引发生变更时触发事件
+   */
+  onChange?: (context: { index: string | number }) => void;
+  /**
+   * 点击侧边栏时触发事件
+   */
+  onSelect?: (context: { index: string | number }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/input/README.en-US.md b/packages/tdesign-uniapp/components/input/README.en-US.md
new file mode 100644
index 000000000..415f99bf6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/README.en-US.md
@@ -0,0 +1,120 @@
+:: BASE_DOC ::
+
+## API
+
+### Input Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+adjust-position | Boolean | true | \- | N
+align | String | left | text align type。options: left/center/right | N
+allow-input-over-max | Boolean | false | allow to continue input on value length is over `maxlength` or `maxcharacter` | N
+always-embed | Boolean | false | \- | N
+auto-focus | Boolean | false | \- | N
+borderless | Boolean | false | input without border | N
+clear-trigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
+clearable | Boolean / Object | false | show clear icon, clicked to clear input value | N
+confirm-hold | Boolean | false | \- | N
+confirm-type | String | done | options: send/search/next/go/done | N
+cursor | Number | -1 | \- | N
+cursor-color | String | #0052d9 | \- | N
+cursor-spacing | Number | 0 | \- | N
+disabled | Boolean | undefined | make input to be disabled | N
+error-message | String | - | `deprecated` | N
+focus | Boolean | false | \- | N
+format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+hold-keyboard | Boolean | false | \- | N
+label | String | - | text on the left of input | N
+layout | String | horizontal | options: vertical/horizontal | N
+maxcharacter | Number | - | \- | N
+maxlength | Number | -1 | \- | N
+password | Boolean | false | `deprecated` | N
+placeholder | String | undefined | \- | N
+placeholder-class | String | input-placeholder | \- | N
+placeholder-style | String | - | \- | N
+prefix-icon | String / Object | - | \- | N
+readonly | Boolean | undefined | \- | N
+safe-password-cert-path | String | - | \- | N
+safe-password-custom-hash | String | - | \- | N
+safe-password-length | Number | - | \- | N
+safe-password-nonce | String | - | \- | N
+safe-password-salt | String | - | \- | N
+safe-password-time-stamp | Number | - | \- | N
+selection-end | Number | -1 | \- | N
+selection-start | Number | -1 | \- | N
+size | String | medium | `deprecated`。options: small/medium。Typescript：`'medium' \| 'small'` | N
+status | String | default | options: default/success/warning/error | N
+suffix | String | - | suffix content before suffixIcon | N
+suffix-icon | String / Object | - | \- | N
+tips | String | - | tips on the bottom of input, different `status` can make tips to be different color | N
+type | String | text | options: text/number/idcard/digit/safe-password/password/nickname | N
+value | String / Number | - | input value。Typescript：`InputValue` `type InputValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+default-value | String / Number | - | input value。uncontrolled property。Typescript：`InputValue` `type InputValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+
+### Input Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { value: InputValue })` | \-
+change | `(context: { value: InputValue, cursor: number, keyCode: number })` | \-
+clear | \- | \-
+click | `(context: { trigger: InputTrigger })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon'`<br/>
+enter | `(context: { value: InputValue })` | \-
+focus | `(context: { value: InputValue })` | \-
+keyboardheightchange | `(context: { height: number, duration: number })` | \-
+nicknamereview | `(context: { pass: boolean, timeout: boolean })` | \-
+validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | trigger on text length being over max length or max character
+
+### Input Slots
+
+name | Description
+-- | --
+extra | \-
+label | text on the left of input
+prefix-icon | \-
+suffix | suffix content before suffixIcon
+suffix-icon | \-
+tips | \-
+
+### Input External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-clearable | \-
+t-class-input | \-
+t-class-label | \-
+t-class-prefix-icon | \-
+t-class-suffix | \-
+t-class-suffix-icon | \-
+t-class-tips | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-input-align-items | center | - 
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 32rpx | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @text-color-primary | - 
+--td-input-default-tips-color | @text-color-placeholder | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-max-width | 5em | - 
+--td-input-label-min-width | 2em | - 
+--td-input-label-text-color | @text-color-primary | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-placeholder-text-font-size | @font-size-m | - 
+--td-input-prefix-icon-color | @text-color-primary | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @text-color-placeholder | - 
+--td-input-suffix-text-color | @text-color-primary | - 
+--td-input-vertical-padding | 32rpx | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/input/README.md b/packages/tdesign-uniapp/components/input/README.md
new file mode 100644
index 000000000..3a11ea9f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/README.md
@@ -0,0 +1,189 @@
+---
+title: Input 输入框
+description: 用于单行文本信息输入。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TInput from 'tdesign-uniapp/input/input.vue';
+```
+
+### 01 组件类型
+
+基础输入框
+
+{{ base }}
+
+带字数限制输入框
+
+{{ maxlength }}
+
+带操作输入框
+
+{{ suffix }}
+
+带图标输入框
+
+{{ prefix }}
+
+特定类型输入框
+
+{{ special }}
+
+### 02 组件状态
+
+输入框状态
+
+{{ status }}
+
+信息超长状态
+
+{{ label }}
+
+### 03 组件样式
+
+内容位置
+
+{{ align }}
+
+竖排样式
+
+{{ layout }}
+
+非通栏样式
+
+{{ banner }}
+
+标签外置样式
+
+{{ bordered }}
+
+自定义样式文本框
+
+{{ custom }}
+
+## API
+
+### Input Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
+allow-input-over-max | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入 | N
+always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
+auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
+clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
+clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon` | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
+confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
+cursor | Number | -1 | 指定 focus 时的光标位置 | N
+cursor-color | String | #0052d9 | 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制 | N
+cursor-spacing | Number | 0 | 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N
+disabled | Boolean | undefined | 是否禁用输入框 | N
+error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
+focus | Boolean | false | 获取焦点 | N
+format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+label | String | - | 左侧文本 | N
+layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+password | Boolean | false | 已废弃。是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N
+placeholder | String | undefined | 占位符 | N
+placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
+placeholder-style | String | - | 指定 placeholder 的样式 | N
+prefix-icon | String / Object | - | 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+readonly | Boolean | undefined | 只读状态 | N
+safe-password-cert-path | String | - | 安全键盘加密公钥的路径，只支持包内路径 | N
+safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N
+safe-password-length | Number | - | 安全键盘输入密码长度 | N
+safe-password-nonce | String | - | 安全键盘加密盐值 | N
+safe-password-salt | String | - | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 | N
+safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+size | String | medium | 已废弃。输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
+status | String | default | 输入框状态。可选项：default/success/warning/error | N
+suffix | String | - | 后置图标前的后置内容 | N
+suffix-icon | String / Object | - | 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+tips | String | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N
+type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N
+value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+default-value | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts) | N
+
+### Input Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { value: InputValue })` | 失去焦点时触发
+change | `(context: { value: InputValue, cursor: number, keyCode: number })` | 输入框值发生变化时触发；cursor 为光标位置；
+clear | \- | 清空按钮点击时触发
+click | `(context: { trigger: InputTrigger })` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon'`<br/>
+enter | `(context: { value: InputValue })` | 回车键按下时触发
+focus | `(context: { value: InputValue })` | 获得焦点时触发
+keyboardheightchange | `(context: { height: number, duration: number })` | 键盘高度发生变化的时候触发此事件
+nicknamereview | `(context: { pass: boolean, timeout: boolean })` | 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效
+validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | 字数超出限制时触发
+
+### Input Slots
+
+名称 | 描述
+-- | --
+extra | 右侧额外内容
+label | 自定义 `label` 显示内容
+prefix-icon | 组件前置图标
+suffix | 自定义 `suffix` 显示内容
+suffix-icon | 后置文本图标
+tips | 输入框下方提示内容
+
+### Input External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-clearable | 清空按钮样式类
+t-class-input | 输入框样式类
+t-class-label | 标签样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-suffix | 后置样式类
+t-class-suffix-icon | 后置图标样式类
+t-class-tips | 提示样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-input-align-items | center | - |
+| --td-input-bg-color | @bg-color-container | - |
+| --td-input-border-color | @component-stroke | - |
+| --td-input-border-left-space | 32rpx | - |
+| --td-input-border-right-space | 0 | - |
+| --td-input-default-text-color | @text-color-primary | - |
+| --td-input-default-tips-color | @text-color-placeholder | - |
+| --td-input-disabled-text-color | @text-color-disabled | - |
+| --td-input-error-text-color | @error-color | - |
+| --td-input-error-tips-color | @error-color | - |
+| --td-input-label-max-width | 5em | - |
+| --td-input-label-min-width | 2em | - |
+| --td-input-label-text-color | @text-color-primary | - |
+| --td-input-placeholder-text-color | @text-color-placeholder | - |
+| --td-input-placeholder-text-font-size | @font-size-m | - |
+| --td-input-prefix-icon-color | @text-color-primary | - |
+| --td-input-success-text-color | @success-color | - |
+| --td-input-success-tips-color | @success-color | - |
+| --td-input-suffix-icon-color | @text-color-placeholder | - |
+| --td-input-suffix-text-color | @text-color-primary | - |
+| --td-input-vertical-padding | 32rpx | - |
+| --td-input-warning-text-color | @warning-color | - |
+| --td-input-warning-tips-color | @warning-color | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/input/_example/align/index.vue b/packages/tdesign-uniapp/components/input/_example/align/index.vue
new file mode 100644
index 000000000..53eb03931
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/align/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-input
+      label="左对齐"
+      placeholder="请输入文字"
+    />
+    <t-input
+      label="居中"
+      placeholder="请输入文字"
+      align="center"
+    />
+    <t-input
+      label="右对齐"
+      placeholder="请输入文字"
+      align="right"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/banner/index.vue b/packages/tdesign-uniapp/components/input/_example/banner/index.vue
new file mode 100644
index 000000000..1b5115a07
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/banner/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view class="input-example--banner">
+    <t-input
+      :custom-style="style"
+      label="标签文字"
+      placeholder="请输入文字"
+      borderless
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {
+      style: 'border-radius: 18rpx;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.input-example--banner {
+    margin: 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/base/index.vue b/packages/tdesign-uniapp/components/input/_example/base/index.vue
new file mode 100644
index 000000000..4c113a237
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/base/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+    />
+
+    <t-input placeholder="请输入文字">
+      <template
+        #label
+      >
+        <view
+          class="custom-label"
+        >
+          标签文字
+        </view>
+      </template>
+    </t-input>
+
+    <t-input placeholder="请输入文字" />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.custom-label {
+    display: inline-flex;
+}
+
+.custom-label::after {
+    content: '*';
+    color: red;
+    font-size: 32rpx;
+    margin-left: 4rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/bordered/index.vue b/packages/tdesign-uniapp/components/input/_example/bordered/index.vue
new file mode 100644
index 000000000..ed4af0555
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/bordered/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <view class="input-example--bordered">
+    <view class="input-example__label">
+      标签文字
+    </view>
+
+    <t-input
+      placeholder="请输入文字"
+      :borderless="true"
+      :custom-style="style"
+      :suffix-icon="{ name: 'info-circle-filled', ariaLabel: '提示' }"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {
+      style: 'border: 2rpx solid var(--td-component-border);border-radius: 12rpx;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.input-example--bordered {
+    --td-input-vertical-padding: 24rpx;
+    background-color: var(--bg-color-demo);
+    padding: 32rpx 32rpx 16rpx;
+}
+
+.input-example__label {
+    color: var(--td-text-color-primary);
+    font-size: 24rpx;
+    line-height: 40rpx;
+    margin: 0 8rpx 16rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/custom/index.vue b/packages/tdesign-uniapp/components/input/_example/custom/index.vue
new file mode 100644
index 000000000..3acc44ea8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/custom/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <view class="input-example--custom custom-theme">
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.input-example--custom {
+    padding-bottom: 48rpx;
+}
+
+.custom-theme {
+    --td-input-bg-color: rgba(44, 44, 44, 1);
+    --td-input-border-color: rgba(75, 75, 75, 1);
+    --td-input-default-text-color: rgba(255, 255, 255, 1);
+    --td-input-placeholder-text-color: rgba(255, 255, 255, 0.35);
+    --td-input-label-text-color: rgba(255, 255, 255, 1);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/input.less b/packages/tdesign-uniapp/components/input/_example/input.less
new file mode 100644
index 000000000..9150feff6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/input.less
@@ -0,0 +1,8 @@
+.input-example {
+    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+}
+
+:deep(.t-input) {
+    margin-bottom: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/input/_example/input.vue b/packages/tdesign-uniapp/components/input/_example/input.vue
new file mode 100644
index 000000000..bca616737
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/input.vue
@@ -0,0 +1,111 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Input"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="input-example">
+      <t-demo-header
+        title="Input 输入框"
+        desc="用于单行文本信息输入。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础输入框"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="带字数限制输入框">
+        <maxlength />
+      </t-demo>
+      <t-demo desc="带操作输入框">
+        <suffix />
+      </t-demo>
+      <t-demo desc="带图标输入框">
+        <prefix />
+      </t-demo>
+      <t-demo desc="特定类型输入框">
+        <special />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="输入框状态"
+      >
+        <status />
+      </t-demo>
+      <t-demo desc="信息超长状态">
+        <labelDemo />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="内容位置"
+      >
+        <align />
+      </t-demo>
+      <t-demo desc="竖排样式">
+        <layout />
+      </t-demo>
+      <t-demo desc="非通栏样式">
+        <banner />
+      </t-demo>
+      <t-demo desc="标签外置样式">
+        <bordered />
+      </t-demo>
+      <t-demo desc="自定义样式输入框">
+        <custom />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import maxlength from './maxlength/index.vue';
+import suffix from './suffix/index.vue';
+import prefix from './prefix/index.vue';
+import layout from './layout/index.vue';
+import bordered from './bordered/index.vue';
+import align from './align/index.vue';
+import special from './special/index.vue';
+import status from './status/index.vue';
+import custom from './custom/index.vue';
+import labelDemo from './label/index.vue';
+import banner from './banner/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    suffix,
+    prefix,
+    layout,
+    bordered,
+    align,
+    maxlength,
+    special,
+    status,
+    custom,
+    labelDemo,
+    banner,
+  },
+  data() {
+    return {
+      firstValue: '',
+      textPassword: '123456',
+      phoneError: false,
+      phoneNumber: '17600600600',
+      price: '10.2',
+      priceError: false,
+    };
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="less">
+@import './input.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/label/index.vue b/packages/tdesign-uniapp/components/input/_example/label/index.vue
new file mode 100644
index 000000000..7b525d805
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/label/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <t-input
+      label="标签超长时最多十个字"
+      placeholder="请输入文字"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/layout/index.vue b/packages/tdesign-uniapp/components/input/_example/layout/index.vue
new file mode 100644
index 000000000..f79861719
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/layout/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <view>
+    <t-input
+      label="标签文字"
+      layout="vertical"
+      placeholder="请输入文字"
+      :suffix-icon="{ name: 'info-circle-filled', ariaLabel: '提示' }"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/maxlength/index.vue b/packages/tdesign-uniapp/components/input/_example/maxlength/index.vue
new file mode 100644
index 000000000..9673c338f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/maxlength/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <t-input
+      class="custom-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      tips="最大输入10个字符"
+      :maxlength="10"
+    />
+    <t-input
+      class="custom-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      tips="最大输入10个字符，汉字算两个"
+      :maxcharacter="10"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.custom-class {
+    --td-input-align-items: start;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/prefix/index.vue b/packages/tdesign-uniapp/components/input/_example/prefix/index.vue
new file mode 100644
index 000000000..a0f8d62a2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/prefix/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <view>
+    <t-input
+      prefix-icon="app"
+      label="标签文字"
+      placeholder="请输入文字"
+    />
+
+    <t-input
+      prefix-icon="app"
+      placeholder="请输入文字"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/skyline/input.less b/packages/tdesign-uniapp/components/input/_example/skyline/input.less
new file mode 100644
index 000000000..edc35dcbf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/skyline/input.less
@@ -0,0 +1,8 @@
+.input-example {
+    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+}
+
+.t-input {
+    margin-bottom: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/input/_example/skyline/input.vue b/packages/tdesign-uniapp/components/input/_example/skyline/input.vue
new file mode 100644
index 000000000..0fa09e0b8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/skyline/input.vue
@@ -0,0 +1,121 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="Input"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="input-example">
+        <view class="demo-title">
+          Input 输入框
+        </view>
+        <view class="demo-desc">
+          用于单行文本信息输入。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础输入框"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo desc="带字数限制输入框">
+          <maxlength />
+        </t-demo>
+        <t-demo desc="带操作输入框">
+          <suffix />
+        </t-demo>
+        <t-demo desc="带图标输入框">
+          <prefix />
+        </t-demo>
+        <t-demo desc="特定类型输入框">
+          <special />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          desc="输入框状态"
+        >
+          <status />
+        </t-demo>
+        <t-demo desc="信息超长状态">
+          <labelDemo />
+        </t-demo>
+
+        <t-demo
+          title="03 组件样式"
+          desc="内容位置"
+        >
+          <align />
+        </t-demo>
+        <t-demo desc="竖排样式">
+          <layout />
+        </t-demo>
+        <t-demo desc="非通栏样式">
+          <banner />
+        </t-demo>
+        <t-demo desc="标签外置样式">
+          <bordered />
+        </t-demo>
+        <t-demo desc="自定义样式输入框">
+          <custom />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import suffix from '../suffix/index.vue';
+import prefix from '../prefix/index.vue';
+import layout from '../layout/index.vue';
+import bordered from '../bordered/index.vue';
+import align from '../align/index.vue';
+import maxlength from '../maxlength/index.vue';
+import special from '../special/index.vue';
+import status from '../status/index.vue';
+import custom from '../custom/index.vue';
+import labelDemo from '../label/index.vue';
+import banner from '../banner/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    suffix,
+    prefix,
+    layout,
+    bordered,
+    align,
+    maxlength,
+    special,
+    status,
+    custom,
+    labelDemo,
+    banner,
+  },
+  data() {
+    return {
+      firstValue: '',
+      textPassword: '123456',
+      phoneError: false,
+      phoneNumber: '17600600600',
+      price: '10.2',
+      priceError: false,
+    };
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="less">
+@import './input.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/special/index.vue b/packages/tdesign-uniapp/components/input/_example/special/index.vue
new file mode 100644
index 000000000..4ebf6abd7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/special/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <view>
+    <t-input
+      label="输入密码"
+      type="password"
+      :value="textPassword"
+      :suffix-icon="{ name: 'browse-off', ariaLabel: '密码' }"
+    />
+
+    <t-input
+      placeholder="输入验证码"
+      label="验证码"
+    >
+      <template
+        #suffix
+      >
+        <view
+          class="suffix"
+        >
+          <view class="suffix--line" />
+          <image
+            class="image"
+            src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
+            mode="heightFix"
+            aria-role="img"
+            aria-label="验证码"
+          />
+        </view>
+      </template>
+    </t-input>
+
+    <t-input
+      label="手机号"
+      placeholder="输入手机号码"
+      :value="phoneNumber"
+      type="number"
+      :tips="phoneError ? '手机号输入不正确' : ''"
+      @change="onPhoneInput"
+    >
+      <template
+        #suffix
+      >
+        <view
+          style="display: flex; align-items: center"
+        >
+          <view class="suffix--line" />
+          <view
+            class="verify"
+            aria-role="button"
+          >
+            发送验证码
+          </view>
+        </view>
+      </template>
+    </t-input>
+
+    <t-input
+      label="价格"
+      placeholder="0.00"
+      suffix="元"
+      align="right"
+      type="number"
+      :format="priceFormat"
+      :tips="priceError ? '请输入正确的价格' : ''"
+      t-class-tips="tips"
+      @change="onPriceInput"
+    />
+
+    <t-input
+      label="数量"
+      placeholder="填写个数"
+      suffix="个"
+      align="right"
+      type="number"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {
+      textPassword: '123456',
+      phoneError: false,
+      phoneNumber: '17600600600',
+      priceError: false,
+      priceFormat: (v) => {
+        const isNumber = /^\d+(\.\d+)?$/.test(v);
+        if (isNumber) {
+          return parseFloat(v).toFixed(2);
+        }
+        return v;
+      },
+    };
+  },
+  created() {},
+  methods: {
+    onPhoneInput(e) {
+      const { phoneError } = this;
+      const isPhoneNumber = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(e.value);
+      if (phoneError === isPhoneNumber) {
+        this.phoneError = !isPhoneNumber;
+      }
+    },
+    onPriceInput(e) {
+      const { priceError } = this;
+      const isNumber = /^\d+(\.\d+)?$/.test(e.value);
+      if (priceError === isNumber) {
+        this.priceError = !isNumber;
+      }
+    },
+  },
+};
+</script>
+<style>
+.suffix {
+    display: flex;
+    align-items: center;
+}
+
+.suffix--line {
+    width: 1px;
+    height: 24px;
+    background-color: var(--td-component-stroke, #f3f3f3);
+    margin-right: 16px;
+}
+
+.image {
+    width: 72px;
+    height: 36px;
+    display: block;
+    margin-top: -6px;
+    margin-bottom: -6px;
+}
+
+.tips {
+    text-align: right !important;
+}
+
+.verify {
+    color: var(--td-brand-color, #0052d9);
+    font-size: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/status/index.vue b/packages/tdesign-uniapp/components/input/_example/status/index.vue
new file mode 100644
index 000000000..dcc69d0ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/status/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <t-input
+      class="custom-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      value="已输入内容"
+      status="error"
+      tips="错误提示"
+      :clearable="{ name: 'close', color: '#D54941', ariaLabel: '通讯录' }"
+    />
+
+    <t-input
+      label="标签文字"
+      value="不可编辑文字"
+      disabled
+      @click="onClick"
+    />
+
+    <t-input
+      label="标签文字"
+      value="只读模式"
+      readonly
+      @click="onClick"
+    />
+  </view>
+</template>
+
+<script>
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onClick() {
+      console.log('click input');
+    },
+  },
+};
+</script>
+<style>
+.custom-class {
+    --td-input-align-items: start;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/_example/suffix/index.vue b/packages/tdesign-uniapp/components/input/_example/suffix/index.vue
new file mode 100644
index 000000000..a69822a0c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/_example/suffix/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <view>
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+      :suffix-icon="{ name: 'info-circle-filled', ariaLabel: '提示' }"
+      @click="click"
+    />
+
+    <t-input
+      class="extra"
+      label="标签文字"
+      placeholder="请输入文字"
+      tips="最多十个字"
+    >
+      <template #extra>
+        <t-button
+
+          theme="primary"
+          :maxcharacter="10"
+          size="extra-small"
+        >
+          操作按钮
+        </t-button>
+      </template>
+    </t-input>
+
+    <t-input
+      label="标签文字"
+      placeholder="请输入文字"
+      :suffix-icon="{ name: 'user-avatar', ariaLabel: '通讯录' }"
+    />
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tInput from 'tdesign-uniapp/input/input.vue';
+export default {
+  components: {
+    tButton,
+    tInput,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    click(e) {
+      const { trigger } = e;
+      console.log('click: ', trigger);
+    },
+  },
+};
+</script>
+<style>
+.extra {
+    --td-input-align-items: start;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/input/computed.js b/packages/tdesign-uniapp/components/input/computed.js
new file mode 100644
index 000000000..d824882e9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/computed.js
@@ -0,0 +1,13 @@
+export function getInputClass(classPrefix, suffix, align, disabled) {
+  const className = [`${classPrefix}__control`];
+
+  if (align) {
+    className.push(`${classPrefix}--${align}`);
+  }
+
+  if (disabled) {
+    className.push(`${classPrefix}__control--disabled`);
+  }
+  return className.join(' ');
+}
+
diff --git a/packages/tdesign-uniapp/components/input/input.less b/packages/tdesign-uniapp/components/input/input.less
new file mode 100644
index 000000000..e5a2a443d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/input.less
@@ -0,0 +1,206 @@
+@import '../common/style/base.less';
+
+@input-vertical-padding: var(--td-input-vertical-padding, 32rpx); //输入框垂直方向内间距
+
+@input-default-text-color: var(--td-input-default-text-color, @text-color-primary); // 'default' 状态输入框文本颜色
+@input-success-text-color: var(--td-input-success-text-color, @success-color); // 'success' 状态输入框文本颜色
+@input-warning-text-color: var(--td-input-warning-text-color, @warning-color); // 'warning' 状态输入框文本颜色
+@input-error-text-color: var(--td-input-error-text-color, @error-color); // 'error' 状态输入框文本颜色
+
+@input-default-tips-color: var(--td-input-default-tips-color, @text-color-placeholder); // 'default' 状态辅助文本颜色
+@input-success-tips-color: var(--td-input-success-tips-color, @success-color); // 'success' 状态辅助文本颜色
+@input-warning-tips-color: var(--td-input-warning-tips-color, @warning-color); // 'warning' 状态辅助文本颜色
+@input-error-tips-color: var(--td-input-error-tips-color, @error-color); // 'error' 状态辅助文本颜色
+
+@input-bg-color: var(--td-input-bg-color, @bg-color-container); // 输入框背景颜色
+@input-border-color: var(--td-input-border-color, @component-stroke); // 输入框分割线颜色
+@input-border-left-space: var(--td-input-border-left-space, 32rpx);
+@input-border-right-space: var(--td-input-border-right-space, 0);
+@input-placeholder-text-color: var(--td-input-placeholder-text-color, @text-color-placeholder); // 输入框占位符文本颜色
+@input-placeholder-text-font-size: var(--td-input-placeholder-text-font-size, @font-size-m); // 输入框占位符文本字体大小
+@input-prefix-icon-color: var(--td-input-prefix-icon-color, @text-color-primary); // // 输入框前缀图标颜色
+@input-suffix-icon-color: var(--td-input-suffix-icon-color, @text-color-placeholder); // 输入框后缀图标颜色
+@input-label-text-color: var(--td-input-label-text-color, @text-color-primary); // 左侧文本颜色
+@input-label-min-width: var(--td-input-label-min-width, 2em);
+@input-label-max-width: var(--td-input-label-max-width, 5em);
+@input-suffix-text-color: var(--td-input-suffix-text-color, @text-color-primary); // 后置图标前的后置内容文本颜色
+@input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色
+
+@input-align-items: var(--td-input-align-items, center); // 内容对齐方式
+
+.@{prefix}-input {
+  background-color: @input-bg-color;
+  display: flex;
+  align-items: @input-align-items;
+  flex: 1;
+  padding: @input-vertical-padding;
+  overflow: hidden;
+
+  &--border {
+    .border(bottom, @input-border-color);
+
+    &:after {
+      left: @input-border-left-space;
+      right: @input-border-right-space;
+    }
+  }
+
+  &--layout-vertical {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  &__wrap--prefix {
+    display: flex;
+  }
+
+  &__icon--prefix {
+    font-size: 48rpx;
+    color: @input-prefix-icon-color;
+  }
+
+  &__label:not(:empty) {
+    min-width: @input-label-min-width;
+    max-width: @input-label-max-width;
+    font-size: @font-size-m;
+    line-height: 48rpx;
+    color: @input-label-text-color;
+    margin-right: @spacer-2;
+    word-wrap: break-word;
+
+    .@{prefix}-input--layout-vertical & {
+      font-size: @font-size-base;
+      padding-bottom: 8rpx;
+    }
+  }
+
+  &__icon--prefix:not(:empty) + &__label:not(:empty) {
+    padding-left: 8rpx;
+  }
+
+  &__label:not(:empty) + &__wrap {
+    margin-left: @spacer-2;
+  }
+
+  &__icon--prefix:not(:empty) + &__label:empty {
+    margin-right: @spacer-2;
+  }
+
+  &__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-shrink: 1;
+    flex: 1;
+
+    .@{prefix}-input__content {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      line-height: 48rpx;
+      font-size: @font-size-m;
+    }
+
+    &--clearable-icon,
+    &--suffix-icon,
+    &--suffix {
+      flex: 0 0 auto;
+      padding-left: @spacer-1;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &--clearable-icon,
+    &--suffix-icon {
+      font-size: 48rpx;
+      color: @input-suffix-icon-color;
+    }
+
+    &--suffix {
+      font-size: @font-size-m;
+      color: @input-suffix-text-color;
+    }
+  }
+
+  &__icon--prefix,
+  &__tips,
+  &__wrap--clearable-icon,
+  &__wrap--suffix-icon,
+  &__wrap--suffix {
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__control {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0; // for flex-shrink in field__button
+    min-height: 48rpx;
+    margin: 0;
+    padding: 0;
+    color: @input-default-text-color;
+    line-height: inherit;
+    background-color: transparent;
+    border: 0;
+    resize: none;
+    font-size: inherit;
+
+    &--disabled {
+      color: @input-disabled-text-color;
+      cursor: not-allowed;
+      opacity: 1;
+      -webkit-text-fill-color: currentColor; // fix disabled color in iOS
+    }
+
+    &--read-only {
+      cursor: default;
+    }
+  }
+
+  &--left {
+    text-align: left;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &__placeholder {
+    color: @input-placeholder-text-color;
+    font-size: @input-placeholder-text-font-size;
+
+    &--disabled {
+      color: @input-disabled-text-color;
+    }
+  }
+
+  &__tips {
+    font-size: @font-size-s;
+    line-height: 40rpx;
+    padding-top: 8rpx;
+  }
+}
+
+.input-status(@status) {
+  @tipsColor: 'input-@{status}-tips-color';
+
+  .@{prefix}-input--@{status} + .@{prefix}-input__tips {
+    color: @@tipsColor;
+  }
+}
+
+// status
+.input-status(default);
+.input-status(success);
+.input-status(warning);
+.input-status(error);
diff --git a/packages/tdesign-uniapp/components/input/input.vue b/packages/tdesign-uniapp/components/input/input.vue
new file mode 100644
index 000000000..6916bdf41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/input.vue
@@ -0,0 +1,388 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [['border', !borderless], ['readonly', readonly], ['disabled', disabled]])
+      + ' ' + classPrefix + '--layout-' + layout + ' ' + tClass"
+    aria-describedby
+  >
+    <view :class="classPrefix + '__wrap--prefix'">
+      <view :class="classPrefix + '__icon--prefix'">
+        <slot name="prefix-icon" />
+        <block
+          v-if="_prefixIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_prefixIcon.style || ''"
+            :t-class="tClassPrefixIcon"
+            :prefix="_prefixIcon.prefix"
+            :name="_prefixIcon.name"
+            :size="_prefixIcon.size"
+            :color="_prefixIcon.color"
+            :aria-hidden="true"
+            :aria-label="_prefixIcon.ariaLabel"
+            :aria-role="_prefixIcon.ariaRole"
+            @click="_prefixIcon.click || ''"
+          />
+        </block>
+      </view>
+      <view
+        :class="classPrefix + '__label ' + tClassLabel"
+        aria-hidden
+      >
+        <slot name="label" />
+        <block v-if="label">
+          {{ label }}
+        </block>
+      </view>
+    </view>
+    <view :class="classPrefix + '__wrap'">
+      <view
+        :class="classPrefix + '__content ' + classPrefix + '--' + status"
+        @click="onClick"
+      >
+        <input
+          :class="getInputClass(classPrefix, suffix, align, disabled) + ' ' + tClassInput"
+          :maxlength="allowInputOverMax ? -1 : maxlength"
+          :disabled="disabled || readonly"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          :placeholder-class="_.cls(classPrefix + '__placeholder', [['disabled', disabled]]) + ' ' + placeholderClass"
+          :value="dataValue"
+          :password="type === 'password'"
+          :type="type === 'password' ? 'text' : type"
+          :focus="focus"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :cursor-color="cursorColor"
+          :cursor-spacing="cursorSpacing"
+          :adjust-position="adjustPosition"
+          :auto-focus="autoFocus"
+          :always-embed="alwaysEmbed"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :hold-keyboard="holdKeyboard"
+          :safe-password-cert-path="safePasswordCertPath"
+          :safe-password-length="safePasswordLength"
+          :safe-password-time-stamp="safePasswordTimeStamp"
+          :safe-password-nonce="safePasswordNonce"
+          :safe-password-salt="safePasswordSalt"
+          :safe-password-custom-hash="safePasswordCustomHash"
+          aria-role="textbox"
+          :aria-label="label"
+          :aria-roledescription="label"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+          @keyboardheightchange="onKeyboardHeightChange"
+          @nicknamereview="onNickNameReview"
+        >
+        <view
+          v-if="_clearIcon && dataValue?.length && showClearIcon"
+          :class="classPrefix + '__wrap--clearable-icon'"
+          @click="clearInput"
+        >
+          <t-icon
+            :custom-style="_clearIcon.style || ''"
+            :t-class="tClassClearable"
+            :prefix="_clearIcon.prefix"
+            :name="_clearIcon.name"
+            :size="_clearIcon.size"
+            :color="_clearIcon.color"
+            :aria-hidden="false"
+            :aria-label="_clearIcon.ariaLabel || '清除'"
+            :aria-role="_clearIcon.ariaRole || 'button'"
+            @click="_clearIcon.click || ''"
+          />
+        </view>
+        <view
+          :class="classPrefix + '__wrap--suffix ' + tClassSuffix"
+          @click="onSuffixClick"
+        >
+          <text v-if="suffix">
+            {{ suffix }}
+          </text>
+          <slot name="suffix" />
+        </view>
+        <view
+          :class="classPrefix + '__wrap--suffix-icon'"
+          @click="onSuffixIconClick"
+        >
+          <slot name="suffix-icon" />
+          <block
+            v-if="_suffixIcon"
+            name="icon"
+          >
+            <t-icon
+              :custom-style="_suffixIcon.style || ''"
+              :t-class="tClassSuffixIcon"
+              :prefix="_suffixIcon.prefix"
+              :name="_suffixIcon.name"
+              :size="_suffixIcon.size"
+              :color="_suffixIcon.color"
+              :aria-hidden="true"
+              :aria-label="_suffixIcon.ariaLabel"
+              :aria-role="_suffixIcon.ariaRole || 'button'"
+              @click="_suffixIcon.click || ''"
+            />
+          </block>
+        </view>
+      </view>
+      <view
+        v-if="tips && tips.length > 0"
+        :class="classPrefix + '__tips ' + classPrefix + '--' + align + ' ' + tClassTips"
+      >
+        {{ tips }}
+      </view>
+      <slot name="tips" />
+    </view>
+    <slot name="extra" />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, calcIcon, coalesce, nextTick } from '../common/utils';
+import { isDef } from '../common/validator';
+import { getInputClass } from './computed.js';
+import _ from '../common/utils.wxs';
+// import { getInnerMaxLen } from './utils';
+
+
+const name = `${prefix}-input`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-prefix-icon`,
+    `${prefix}-class-label`,
+    `${prefix}-class-input`,
+    `${prefix}-class-clearable`,
+    `${prefix}-class-suffix`,
+    `${prefix}-class-suffix-icon`,
+    `${prefix}-class-tips`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'blur',
+    'change',
+    'clear',
+    'click',
+    'enter',
+    'focus',
+    'keyboardheightchange',
+    'nicknamereview',
+    'validate',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      classBasePrefix: prefix,
+      showClearIcon: true,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+
+      // rawValue: '',
+      // innerMaxLen: -1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    prefixIcon: {
+      handler(v) {
+        this._prefixIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    suffixIcon: {
+      handler(v) {
+        this._suffixIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    clearable: {
+      handler(v) {
+        this._clearIcon = calcIcon(v, 'close-circle-filled');
+      },
+      immediate: true,
+    },
+
+    clearTrigger: 'updateClearIconVisible',
+    disabled: 'updateClearIconVisible',
+    readonly: 'updateClearIconVisible',
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+    },
+
+    // count: 'updateInnerMaxLen',
+    // dataValue: 'updateInnerMaxLen',
+    // allowInputOverMax: 'updateInnerMaxLen',
+    // maxcharacter: 'updateInnerMaxLen',
+    // maxlength: 'updateInnerMaxLen',
+  },
+  mounted() {
+    const { value, defaultValue } = this;
+    this.updateValue(coalesce(value, defaultValue, ''));
+
+    this.updateClearIconVisible();
+  },
+  methods: {
+    getInputClass,
+    updateValue(value) {
+      // this.rawValue = value;
+      this.dataValue = value;
+
+      const { allowInputOverMax, maxcharacter, maxlength } = this;
+      if (!allowInputOverMax && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+        const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+        nextTick().then(() => {
+          this.dataValue = characters;
+        });
+        this.count = length;
+      } else if (!allowInputOverMax && maxlength && maxlength > 0 && !Number.isNaN(maxlength)) {
+        const { length, characters } = getCharacterLength('maxlength', value, maxlength);
+        nextTick().then(() => {
+          this.dataValue = characters;
+        });
+        this.count = length;
+      } else {
+        nextTick().then(() => {
+          this.dataValue = value;
+        });
+        this.dataValue = value;
+        this.count = isDef(value) ? String(value).length : 0;
+      }
+
+      // this.updateInnerMaxLen();
+    },
+    // updateInnerMaxLen() {
+    // this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+
+    updateClearIconVisible(value = false) {
+      const { clearTrigger, disabled, readonly } = this;
+      if (disabled || readonly) {
+        this.showClearIcon = false;
+        return;
+      }
+      this.showClearIcon = value || clearTrigger === 'always';
+    },
+
+    onInput(e) {
+      const { value, cursor, keyCode } = e.detail;
+      this.updateValue(value);
+      this.$emit('change', { value: this.dataValue, cursor, keyCode });
+    },
+
+    onChange(e) {
+      if (this.type !== 'nickname') return;
+      const { value } = e.detail;
+      this.updateValue(value);
+      this.$emit('change', { value: this.dataValue });
+    },
+
+    onFocus(e) {
+      this.updateClearIconVisible(true);
+      this.$emit('focus', e.detail);
+    },
+
+    onBlur(e) {
+      this.updateClearIconVisible();
+
+      // 失焦时处理 format
+      if (typeof this.format === 'function') {
+        const v = this.format(e.detail.value);
+        this.updateValue(v);
+        this.$emit('blur', { value: this.dataValue, cursor: this.count });
+        return;
+      }
+      this.$emit('blur', e.detail);
+    },
+
+    onConfirm(e) {
+      this.$emit('enter', e.detail);
+    },
+
+    onSuffixClick() {
+      this.$emit('click', { trigger: 'suffix' });
+    },
+
+    onSuffixIconClick() {
+      this.$emit('click', { trigger: 'suffix-icon' });
+    },
+
+    clearInput(e) {
+      this.$emit('clear', e.detail);
+      this.dataValue = '';
+    },
+
+    onKeyboardHeightChange(e) {
+      this.$emit('keyboardheightchange', e.detail);
+    },
+
+    onNickNameReview(e) {
+      this.$emit('nicknamereview', e.detail);
+    },
+
+    onClick() {
+      this.$emit('click', { trigger: 'input' });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './input.css';
+/* #ifdef H5 */
+.t-input--disabled {
+  :deep(input) {
+    pointer-events: none;
+  }
+}
+.t-input--readonly {
+  :deep(input) {
+    pointer-events: none;
+  }
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/input/props.ts b/packages/tdesign-uniapp/components/input/props.ts
new file mode 100644
index 000000000..51ef0aed6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/props.ts
@@ -0,0 +1,247 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdInputProps } from './type';
+export default {
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 文本内容位置，居左/居中/居右 */
+  align: {
+    type: String,
+    default: 'left' as TdInputProps['align'],
+    validator(val: TdInputProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'center', 'right'].includes(val);
+    },
+  },
+  /** 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入 */
+  allowInputOverMax: Boolean,
+  /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
+  alwaysEmbed: Boolean,
+  /** (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 */
+  autoFocus: Boolean,
+  /** 是否开启无边框模式 */
+  borderless: Boolean,
+  /** 清空图标触发方式，仅在输入框有值时有效 */
+  clearTrigger: {
+    type: String,
+    default: 'always' as TdInputProps['clearTrigger'],
+    validator(val: TdInputProps['clearTrigger']): boolean {
+      if (!val) return true;
+      return ['always', 'focus'].includes(val);
+    },
+  },
+  /** 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon` */
+  clearable: {
+    type: [Boolean, Object],
+    default: false as TdInputProps['clearable'],
+  },
+  /** 点击键盘右下角按钮时是否保持键盘不收起 */
+  confirmHold: Boolean,
+  /** 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */
+  confirmType: {
+    type: String,
+    default: 'done' as TdInputProps['confirmType'],
+    validator(val: TdInputProps['confirmType']): boolean {
+      if (!val) return true;
+      return ['send', 'search', 'next', 'go', 'done'].includes(val);
+    },
+  },
+  /** 指定 focus 时的光标位置 */
+  cursor: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制 */
+  cursorColor: {
+    type: String,
+    default: '#0052d9',
+  },
+  /** 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否禁用输入框 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 获取焦点 */
+  focus: Boolean,
+  /** 指定输入框展示值的格式 */
+  format: {
+    type: Function,
+  },
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: Boolean,
+  /** 左侧文本 */
+  label: {
+    type: String,
+  },
+  /** 标题输入框布局方式 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdInputProps['layout'],
+    validator(val: TdInputProps['layout']): boolean {
+      if (!val) return true;
+      return ['vertical', 'horizontal'].includes(val);
+    },
+  },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxlength: {
+    type: Number,
+    default: -1,
+  },
+  /** 占位符 */
+  placeholder: {
+    type: String,
+    default: undefined,
+  },
+  /** 指定 placeholder 的样式类 */
+  placeholderClass: {
+    type: String,
+    default: 'input-placeholder',
+  },
+  /** 指定 placeholder 的样式 */
+  placeholderStyle: {
+    type: String,
+    default: '',
+  },
+  /** 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  prefixIcon: {
+    type: [String, Object],
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 安全键盘加密公钥的路径，只支持包内路径 */
+  safePasswordCertPath: {
+    type: String,
+    default: '',
+  },
+  /** 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` */
+  safePasswordCustomHash: {
+    type: String,
+    default: '',
+  },
+  /** 安全键盘输入密码长度 */
+  safePasswordLength: {
+    type: Number,
+  },
+  /** 安全键盘加密盐值 */
+  safePasswordNonce: {
+    type: String,
+    default: '',
+  },
+  /** 安全键盘计算 hash 盐值，若指定custom-hash 则无效 */
+  safePasswordSalt: {
+    type: String,
+    default: '',
+  },
+  /** 安全键盘加密时间戳 */
+  safePasswordTimeStamp: {
+    type: Number,
+  },
+  /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
+  selectionEnd: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */
+  selectionStart: {
+    type: Number,
+    default: -1,
+  },
+  /** 输入框状态 */
+  status: {
+    type: String,
+    default: 'default' as TdInputProps['status'],
+    validator(val: TdInputProps['status']): boolean {
+      if (!val) return true;
+      return ['default', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 后置图标前的后置内容 */
+  suffix: {
+    type: String,
+  },
+  /** 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  suffixIcon: {
+    type: [String, Object],
+  },
+  /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
+  tips: {
+    type: String,
+  },
+  /** 输入框类型 */
+  type: {
+    type: String,
+    default: 'text' as TdInputProps['type'],
+    validator(val: TdInputProps['type']): boolean {
+      if (!val) return true;
+      return ['text', 'number', 'idcard', 'digit', 'safe-password', 'password', 'nickname'].includes(val);
+    },
+  },
+  /** 输入框的值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 失去焦点时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入框值发生变化时触发；cursor 为光标位置； */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 清空按钮点击时触发 */
+  onClear: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 回车键按下时触发 */
+  onEnter: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 获得焦点时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 键盘高度发生变化的时候触发此事件 */
+  onKeyboardheightchange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效 */
+  onNicknamereview: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 字数超出限制时触发 */
+  onValidate: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/input/type.ts b/packages/tdesign-uniapp/components/input/type.ts
new file mode 100644
index 000000000..20bc0e014
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/type.ts
@@ -0,0 +1,237 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdInputProps {
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: boolean;
+  /**
+   * 文本内容位置，居左/居中/居右
+   * @default left
+   */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入
+   * @default false
+   */
+  allowInputOverMax?: boolean;
+  /**
+   * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   * @default false
+   */
+  alwaysEmbed?: boolean;
+  /**
+   * (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * 是否开启无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
+  /**
+   * 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon`
+   * @default false
+   */
+  clearable?: boolean | object;
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   * @default false
+   */
+  confirmHold?: boolean;
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+   * @default done
+   */
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
+  /**
+   * 指定 focus 时的光标位置
+   * @default -1
+   */
+  cursor?: number;
+  /**
+   * 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制
+   * @default #0052d9
+   */
+  cursorColor?: string;
+  /**
+   * 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
+   * @default 0
+   */
+  cursorSpacing?: number;
+  /**
+   * 是否禁用输入框
+   */
+  disabled?: boolean;
+  /**
+   * 获取焦点
+   * @default false
+   */
+  focus?: boolean;
+  /**
+   * 指定输入框展示值的格式
+   */
+  format?: InputFormatType;
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: boolean;
+  /**
+   * 左侧文本
+   */
+  label?: string;
+  /**
+   * 标题输入框布局方式
+   * @default horizontal
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: number;
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   * @default -1
+   */
+  maxlength?: number;
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+  /**
+   * 指定 placeholder 的样式类
+   * @default input-placeholder
+   */
+  placeholderClass?: string;
+  /**
+   * 指定 placeholder 的样式
+   * @default ''
+   */
+  placeholderStyle?: string;
+  /**
+   * 组件前置图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  prefixIcon?: string | object;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 安全键盘加密公钥的路径，只支持包内路径
+   * @default ''
+   */
+  safePasswordCertPath?: string;
+  /**
+   * 安全键盘计算 hash 的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))`
+   * @default ''
+   */
+  safePasswordCustomHash?: string;
+  /**
+   * 安全键盘输入密码长度
+   */
+  safePasswordLength?: number;
+  /**
+   * 安全键盘加密盐值
+   * @default ''
+   */
+  safePasswordNonce?: string;
+  /**
+   * 安全键盘计算 hash 盐值，若指定custom-hash 则无效
+   * @default ''
+   */
+  safePasswordSalt?: string;
+  /**
+   * 安全键盘加密时间戳
+   */
+  safePasswordTimeStamp?: number;
+  /**
+   * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
+   * @default -1
+   */
+  selectionEnd?: number;
+  /**
+   * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
+   * @default -1
+   */
+  selectionStart?: number;
+  /**
+   * 输入框状态
+   * @default default
+   */
+  status?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 后置图标前的后置内容
+   */
+  suffix?: string;
+  /**
+   * 后置文本内容。值为字符串则表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  suffixIcon?: string | object;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: string;
+  /**
+   * 输入框类型
+   * @default text
+   */
+  type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'password' | 'nickname';
+  /**
+   * 输入框的值
+   */
+  value?: InputValue;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (context: { value: InputValue }) => void;
+  /**
+   * 输入框值发生变化时触发；cursor 为光标位置；
+   */
+  onChange?: (context: { value: InputValue; cursor: number; keyCode: number }) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: () => void;
+  /**
+   * 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。
+   */
+  onClick?: (context: { trigger: InputTrigger }) => void;
+  /**
+   * 回车键按下时触发
+   */
+  onEnter?: (context: { value: InputValue }) => void;
+  /**
+   * 获得焦点时触发
+   */
+  onFocus?: (context: { value: InputValue }) => void;
+  /**
+   * 键盘高度发生变化的时候触发此事件
+   */
+  onKeyboardheightchange?: (context: { height: number; duration: number }) => void;
+  /**
+   * 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效
+   */
+  onNicknamereview?: (context: { pass: boolean; timeout: boolean }) => void;
+  /**
+   * 字数超出限制时触发
+   */
+  onValidate?: (context: { error?: 'exceed-maximum' | 'below-minimum' }) => void;
+}
+
+export type InputFormatType = (value: InputValue) => string;
+
+export type InputValue = string | number;
+
+export type InputTrigger = 'suffix' | 'suffix-icon';
diff --git a/packages/tdesign-uniapp/components/input/utils.js b/packages/tdesign-uniapp/components/input/utils.js
new file mode 100644
index 000000000..6122db416
--- /dev/null
+++ b/packages/tdesign-uniapp/components/input/utils.js
@@ -0,0 +1,38 @@
+import { getCharacterLength, coalesce } from '../common/utils';
+
+
+export function getInnerMaxLen({
+  allowInputOverMax,
+  maxcharacter,
+  maxlength,
+  dataValue,
+  rawValue,
+  count,
+}) {
+  if (allowInputOverMax) {
+    return -1;
+  }
+  if (!maxcharacter || maxcharacter < 0) {
+    return maxlength;
+  }
+  if (!dataValue) {
+    return maxcharacter;
+  }
+
+
+  const { length: realCount } = getCharacterLength('maxcharacter', rawValue, Infinity);
+
+  if (realCount >= maxcharacter) {
+    return dataValue.length;
+  }
+
+  const { length: computedCount } = getCharacterLength(
+    'maxcharacter',
+    rawValue,
+    allowInputOverMax ? Infinity : maxcharacter,
+  );
+
+  const extra = (coalesce(count, computedCount)) - dataValue.length;
+
+  return maxcharacter - extra;
+}
diff --git a/packages/tdesign-uniapp/components/link/README.en-US.md b/packages/tdesign-uniapp/components/link/README.en-US.md
new file mode 100644
index 000000000..26254969b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/README.en-US.md
@@ -0,0 +1,67 @@
+:: BASE_DOC ::
+
+## API
+
+### Link Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | String | - | \- | N
+disabled | Boolean | false | make link to be disabled | N
+hover | Boolean | - | \- | N
+navigator-props | Object | {} | \- | N
+prefix-icon | String / Object | - | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+status | String | normal | `deprecated`。options: normal/active/disabled | N
+suffix-icon | String / Object | - | \- | N
+theme | String | default | options: default/primary/danger/warning/success | N
+underline | Boolean | - | \- | N
+
+### Link Events
+
+name | params | description
+-- | -- | --
+complete | \- | \-
+fail | \- | \-
+success | \- | \-
+
+### Link Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+prefix-icon | \-
+suffix-icon | \-
+
+### Link External Classes
+
+className | Description
+-- | --
+t-class | class name of root node
+t-class-content | \-
+t-class-hover | \-
+t-class-prefix-icon | \-
+t-class-suffix-icon | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | - 
+--td-link-danger-color | @error-color | - 
+--td-link-danger-disabled-color | @error-color-disabled | - 
+--td-link-default-active-color | @brand-color-active | - 
+--td-link-default-color | @text-color-primary | - 
+--td-link-default-disabled-color | @text-color-disabled | - 
+--td-link-primary-active-color | @brand-color-active | - 
+--td-link-primary-color | @brand-color | - 
+--td-link-primary-disabled-color | @brand-color-disabled | - 
+--td-link-success-active-color | @success-color-active | - 
+--td-link-success-color | @success-color | - 
+--td-link-success-disabled-color | @success-color-disabled | - 
+--td-link-warning-active-color | @warning-color-active | - 
+--td-link-warning-color | @warning-color | - 
+--td-link-warning-disabled-color | @warning-color-disabled | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/link/README.md b/packages/tdesign-uniapp/components/link/README.md
new file mode 100644
index 000000000..ff413336a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/README.md
@@ -0,0 +1,115 @@
+---
+title: Link 链接
+description: 文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TLink from 'tdesign-uniapp/link/link.vue';
+```
+
+### 组件类型
+
+基础文字链接
+
+{{ content }}
+
+下划线文字链接
+
+{{ underline }}
+
+前置图标文字链接
+
+{{ prefix }}
+
+后置图标文字链接
+
+{{ suffix }}
+
+### 组件状态
+
+不同主题
+
+{{ theme }}
+
+禁用状态
+
+{{ disabled }}
+
+### 组件样式
+
+链接尺寸
+
+{{ size }}
+
+## API
+
+### Link Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | String | - | 链接内容 | N
+disabled | Boolean | false | 是否为禁用态 | N
+hover | Boolean | - | 是否开启点击反馈 | N
+navigator-props | Object | {} | 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 | N
+prefix-icon | String / Object | - | 前置图标 | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+status | String | normal | 已废弃。组件状态。可选项：normal/active/disabled | N
+suffix-icon | String / Object | - | 后置图标 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - | 是否显示链接下划线 | N
+
+### Link Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | 页面链接执行完成后触发（失败或成功均会触发）
+fail | \- | 页面链接跳转失败后触发
+success | \- | 页面链接跳转成功后触发
+
+### Link Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+prefix-icon | 自定义 `prefix-icon` 显示内容
+suffix-icon | 自定义 `suffix-icon` 显示内容
+
+### Link External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-hover | 悬停样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-suffix-icon | 后置图标样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-link-danger-active-color | @error-color-active | - |
+| --td-link-danger-color | @error-color | - |
+| --td-link-danger-disabled-color | @error-color-disabled | - |
+| --td-link-default-active-color | @brand-color-active | - |
+| --td-link-default-color | @text-color-primary | - |
+| --td-link-default-disabled-color | @text-color-disabled | - |
+| --td-link-primary-active-color | @brand-color-active | - |
+| --td-link-primary-color | @brand-color | - |
+| --td-link-primary-disabled-color | @brand-color-disabled | - |
+| --td-link-success-active-color | @success-color-active | - |
+| --td-link-success-color | @success-color | - |
+| --td-link-success-disabled-color | @success-color-disabled | - |
+| --td-link-warning-active-color | @warning-color-active | - |
+| --td-link-warning-color | @warning-color | - |
+| --td-link-warning-disabled-color | @warning-color-disabled | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/link/_example/content/index.vue b/packages/tdesign-uniapp/components/link/_example/content/index.vue
new file mode 100644
index 000000000..9044a9ba2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/content/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <view class="link-example">
+    <t-link
+      size="small"
+      theme="primary"
+      content="跳转链接"
+      hover
+    />
+    <t-link
+      size="small"
+      content="跳转链接"
+      hover
+    />
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/disabled/index.vue b/packages/tdesign-uniapp/components/link/_example/disabled/index.vue
new file mode 100644
index 000000000..6a01dd836
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/disabled/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <view class="link-example">
+      <t-link
+        :navigator-props="navigatorProps"
+        size="small"
+        theme="primary"
+        content="跳转链接"
+        suffix-icon="jump"
+        disabled
+        hover
+      />
+      <t-link
+        size="small"
+        content="跳转链接"
+        suffix-icon="jump"
+        disabled
+      />
+      <t-link
+        size="small"
+        theme="danger"
+        content="跳转链接"
+        suffix-icon="jump"
+        disabled
+      />
+    </view>
+    <view class="link-example">
+      <t-link
+        size="small"
+        theme="warning"
+        content="跳转链接"
+        suffix-icon="jump"
+        disabled
+      />
+      <t-link
+        size="small"
+        theme="success"
+        content="跳转链接"
+        suffix-icon="jump"
+        disabled
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {
+      navigatorProps: {
+        url: '/pages/home/home',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+
+.link-example:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/link.less b/packages/tdesign-uniapp/components/link/_example/link.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/link/_example/link.vue b/packages/tdesign-uniapp/components/link/_example/link.vue
new file mode 100644
index 000000000..eae3a36d8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/link.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Link"
+      left-arrow
+      :capsule="false"
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Link 链接"
+          desc="文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="基础文字链接"
+        >
+          <contentDemo />
+        </t-demo>
+        <t-demo desc="下划线文字链接">
+          <underline />
+        </t-demo>
+        <t-demo desc="前置图标文字链接">
+          <prefix />
+        </t-demo>
+        <t-demo desc="后置图标文字链接">
+          <suffix />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="不同主题"
+        >
+          <theme />
+        </t-demo>
+        <t-demo desc="禁用状态">
+          <disabled />
+        </t-demo>
+        <t-demo
+          title="03 组件样式"
+          desc="链接尺寸"
+        >
+          <size />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import contentDemo from './content/index.vue';
+import underline from './underline/index.vue';
+import prefix from './prefix/index.vue';
+import suffix from './suffix/index.vue';
+import theme from './theme/index.vue';
+import disabled from './disabled/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    contentDemo,
+    underline,
+    prefix,
+    suffix,
+    theme,
+    disabled,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './link.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/prefix/index.vue b/packages/tdesign-uniapp/components/link/_example/prefix/index.vue
new file mode 100644
index 000000000..559e6267b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/prefix/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view class="link-example">
+    <t-link
+      size="small"
+      theme="primary"
+      content="跳转链接"
+      prefix-icon="link"
+      hover
+    />
+    <t-link
+      size="small"
+      content="跳转链接"
+      prefix-icon="link"
+      hover
+    />
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/size/index.vue b/packages/tdesign-uniapp/components/link/_example/size/index.vue
new file mode 100644
index 000000000..965540978
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/size/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="link-example">
+    <t-link
+      size="small"
+      theme="primary"
+      content="S号链接"
+      suffix-icon="jump"
+      hover
+    />
+    <t-link
+      theme="primary"
+      content="M号链接"
+      suffix-icon="jump"
+      hover
+    />
+    <t-link
+      size="large"
+      theme="primary"
+      content="L号链接"
+      suffix-icon="jump"
+      hover
+    />
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/skyline/link.less b/packages/tdesign-uniapp/components/link/_example/skyline/link.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/link/_example/skyline/link.vue b/packages/tdesign-uniapp/components/link/_example/skyline/link.vue
new file mode 100644
index 000000000..1e62460ec
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/skyline/link.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <linkDemo />
+  </view>
+</template>
+
+<script lang="ts">
+
+import linkDemo from '../link.vue';
+export default {
+  components: {
+    linkDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './link.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/suffix/index.vue b/packages/tdesign-uniapp/components/link/_example/suffix/index.vue
new file mode 100644
index 000000000..16826e6ae
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/suffix/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view class="link-example">
+    <t-link
+      size="small"
+      theme="primary"
+      content="跳转链接"
+      suffix-icon="jump"
+      hover
+    />
+    <t-link
+      size="small"
+      content="跳转链接"
+      suffix-icon="jump"
+      hover
+    />
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/theme/index.vue b/packages/tdesign-uniapp/components/link/_example/theme/index.vue
new file mode 100644
index 000000000..29db0126d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/theme/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <view class="link-example">
+      <t-link
+        size="small"
+        theme="primary"
+        content="跳转链接"
+        suffix-icon="jump"
+        hover
+      />
+      <t-link
+        size="small"
+        content="跳转链接"
+        suffix-icon="jump"
+        hover
+      />
+      <t-link
+        size="small"
+        theme="danger"
+        content="跳转链接"
+        suffix-icon="jump"
+        hover
+      />
+    </view>
+    <view class="link-example">
+      <t-link
+        size="small"
+        theme="warning"
+        content="跳转链接"
+        suffix-icon="jump"
+        hover
+      />
+      <t-link
+        size="small"
+        theme="success"
+        content="跳转链接"
+        suffix-icon="jump"
+        hover
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+
+.link-example:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/_example/underline/index.vue b/packages/tdesign-uniapp/components/link/_example/underline/index.vue
new file mode 100644
index 000000000..225e10b49
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/_example/underline/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view class="link-example">
+    <t-link
+      size="small"
+      theme="primary"
+      content="跳转链接"
+      underline
+      hover
+    />
+    <t-link
+      size="small"
+      content="跳转链接"
+      underline
+      hover
+    />
+  </view>
+</template>
+
+<script>
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tLink,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.link-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 96rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/link/link.less b/packages/tdesign-uniapp/components/link/link.less
new file mode 100644
index 000000000..f0e1fade3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/link.less
@@ -0,0 +1,123 @@
+@import '../common/style/base.less';
+
+// 状态色 - 默认色
+
+@link-default-color: var(--td-link-default-color, @text-color-primary); // default 主题默认态颜色
+@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色
+@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色
+
+// 状态色 - 主色
+@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色
+@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色
+@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色
+
+// 状态色 - 成功
+@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色
+@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色
+@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色
+
+// 状态色 - 警告
+@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色
+@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色
+@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色
+
+// 状态色 - 危险
+@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色
+@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色
+@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色
+
+// 字号
+@link-content-small-font-size: 24rpx;
+@link-content-small-line-height: 40rpx;
+@link-icon-small-font-size: 28rpx;
+
+@link-content-medium-font-size: 28rpx;
+@link-content-medium-line-height: 44rpx;
+@link-icon-medium-font-size: 32rpx;
+
+@link-content-large-font-size: 32rpx;
+@link-content-large-line-height: 48rpx;
+@link-icon-large-font-size: 36rpx;
+
+@themes: primary, success, warning, default, danger;
+
+@link: ~'@{prefix}-link';
+
+.link-size(@size) {
+  @contentFontSize: 'link-content-@{size}-font-size';
+  @contentLineHeight: 'link-content-@{size}-line-height';
+  @iconSize: 'link-icon-@{size}-font-size';
+
+  .@{link}--@{size} {
+    .@{link}__content {
+      font-size: @@contentFontSize;
+      line-height: @@contentLineHeight;
+    }
+    .@{link}__prefix-icon,
+    .@{link}__suffix-icon {
+      font-size: @@iconSize;
+    }
+  }
+}
+
+.link-theme(@theme) {
+  @color: 'link-@{theme}-color';
+  @activeColor: 'link-@{theme}-active-color';
+  @disabledColor: 'link-@{theme}-disabled-color';
+
+  .@{link}--@{theme} {
+    color: @@color;
+
+    &.@{link}--underline::after {
+      border-color: @@color;
+    }
+
+    &.@{link}--disabled {
+      color: @@disabledColor;
+    }
+
+    &.@{link}--hover {
+      color: @@activeColor;
+
+      &.@{link}--underline::after {
+        border-color: @@activeColor;
+      }
+    }
+  }
+}
+
+.link-size(small);
+.link-size(medium);
+.link-size(large);
+
+.link-theme(primary);
+.link-theme(success);
+.link-theme(warning);
+.link-theme(default);
+.link-theme(danger);
+
+.@{link} {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+
+  &--underline::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0;
+    bottom: 0;
+    opacity: 1;
+    border-bottom: 2rpx solid rgb(205, 11, 231);
+  }
+
+  &__prefix-icon:not(:empty) + &__content:not(:empty) {
+    padding-left: 8rpx;
+  }
+
+  &__content:not(:empty) + &__suffix-icon:not(:empty) {
+    padding-left: 8rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/link/link.vue b/packages/tdesign-uniapp/components/link/link.vue
new file mode 100644
index 000000000..3cfd5b8e2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/link.vue
@@ -0,0 +1,175 @@
+<template>
+  <view>
+    <navigator
+      :class="className + ' ' + tClass"
+      :style="_._style([customStyle])"
+      :target="navigatorProps.target"
+      :url="!disabled ? (navigatorProps.url || '') : ''"
+      :open-type="navigatorProps.openType || 'navigate'"
+      :delta="navigatorProps.delta"
+      :app-id="navigatorProps.appId"
+      :path="navigatorProps.path"
+      :extra-data="navigatorProps.extraData"
+      :version="navigatorProps.version"
+      :short-link="navigatorProps.shortLink"
+      :hover-class="(hover && !disabled && classPrefix + '--hover') + ' ' + tClassHover + ' ' + navigatorProps.hoverClass"
+      :hover-stop-propagation="!!navigatorProps.hoverStopPropagation"
+      :hover-start-time="navigatorProps.hoverStartTime"
+      :hover-stay-time="navigatorProps.hoverStayTime"
+      :aria-disabled="disabled"
+      @success="onSuccess"
+      @fail="onFail"
+      @complete="onComplete"
+    >
+      <view :class="classPrefix + '__prefix-icon ' + tClassPrefixIcon">
+        <slot name="prefix-icon" />
+        <block
+          v-if="_prefixIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_prefixIcon.style || ''"
+            :t-class="_prefixIcon.tClass"
+            :prefix="_prefixIcon.prefix"
+            :name="_prefixIcon.name"
+            :size="_prefixIcon.size"
+            :color="_prefixIcon.color"
+            :aria-hidden="true"
+            :aria-label="_prefixIcon.ariaLabel"
+            :aria-role="_prefixIcon.arialRole"
+            @click="_suffixIcon.click || ''"
+          />
+        </block>
+      </view>
+      <view :class="classPrefix + '__content ' + tClassContent">
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+        <slot />
+      </view>
+      <view :class="classPrefix + '__suffix-icon ' + tClassSuffixIcon">
+        <slot name="suffix-icon" />
+        <block
+          v-if="_suffixIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_suffixIcon.style || ''"
+            :t-class="_suffixIcon.tClass"
+            :prefix="_suffixIcon.prefix || ''"
+            :name="_suffixIcon.name"
+            :size="_suffixIcon.size"
+            :color="_suffixIcon.color"
+            :aria-hidden="true"
+            :aria-label="_suffixIcon.ariaLabel"
+            :aria-role="_suffixIcon.arialRole"
+            @click="_suffixIcon.click || ''"
+          />
+        </block>
+      </view>
+    </navigator>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon, coalesce } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-link`;
+
+export default uniComponent({
+  name,
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-hover`,
+    `${prefix}-class-prefix-icon`,
+    `${prefix}-class-content`,
+    `${prefix}-class-suffix-icon`,
+  ],
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      _prefixIcon: null,
+      _suffixIcon: null,
+      className: '',
+    };
+  },
+  watch: {
+    prefixIcon: {
+      handler(value) {
+        this._prefixIcon = calcIcon(value);
+      },
+      immediate: true,
+    },
+    suffixIcon: {
+      handler(value) {
+        this._suffixIcon = calcIcon(value);
+      },
+      immediate: true,
+    },
+    theme: 'setClass',
+    disabled: 'setClass',
+    size: 'setClass',
+    underline: 'setClass',
+    navigatorProps: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+  },
+  methods: {
+    setClass() {
+      const { theme, size, underline, navigatorProps, disabled } = this;
+      const classList = [name, `${name}--${theme}`, `${name}--${size}`];
+      const { url, appId, shortLink, target, openType } = coalesce(navigatorProps, {});
+      const condition = !(url || (target === 'miniProgram' && (appId || shortLink)));
+
+      if (underline) {
+        classList.push(`${name}--underline`);
+      }
+      if (
+        (Object.keys(navigatorProps).length && condition && !['navigateBack', 'exit'].includes(openType))
+        || disabled
+      ) {
+        classList.push(`${name}--disabled`);
+      }
+
+      this.className = classList.join(' ');
+    },
+    onSuccess(e) {
+      this.$emit('success', e);
+    },
+    onFail(e) {
+      this.$emit('fail', e);
+    },
+    onComplete(e) {
+      this.$emit('complete', e);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './link.css';
+
+/* #ifdef H5 */
+:deep(.navigator-wrap) {
+  display: flex;
+  align-items: center;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/link/props.ts b/packages/tdesign-uniapp/components/link/props.ts
new file mode 100644
index 000000000..70bb2e3f0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/props.ts
@@ -0,0 +1,65 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLinkProps } from './type';
+export default {
+  /** 链接内容 */
+  content: {
+    type: String,
+  },
+  /** 是否为禁用态 */
+  disabled: Boolean,
+  /** 是否开启点击反馈 */
+  hover: Boolean,
+  /** 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 */
+  navigatorProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 前置图标 */
+  prefixIcon: {
+    type: [String, Object],
+  },
+  /** 尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdLinkProps['size'],
+    validator(val: TdLinkProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 后置图标 */
+  suffixIcon: {
+    type: [String, Object],
+  },
+  /** 组件风格，依次为默认色、品牌色、危险色、警告色、成功色 */
+  theme: {
+    type: String,
+    default: 'default' as TdLinkProps['theme'],
+    validator(val: TdLinkProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'primary', 'danger', 'warning', 'success'].includes(val);
+    },
+  },
+  /** 是否显示链接下划线 */
+  underline: Boolean,
+  /** 页面链接执行完成后触发（失败或成功均会触发） */
+  onComplete: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 页面链接跳转失败后触发 */
+  onFail: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 页面链接跳转成功后触发 */
+  onSuccess: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/link/type.ts b/packages/tdesign-uniapp/components/link/type.ts
new file mode 100644
index 000000000..5971185f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/link/type.ts
@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { SizeEnum } from '../common/common';
+
+export interface TdLinkProps {
+  /**
+   * 链接内容
+   */
+  content?: string;
+  /**
+   * 是否为禁用态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否开启点击反馈
+   */
+  hover?: boolean;
+  /**
+   * 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格
+   * @default {}
+   */
+  navigatorProps?: object;
+  /**
+   * 前置图标
+   */
+  prefixIcon?: string | object;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 后置图标
+   */
+  suffixIcon?: string | object;
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+  /**
+   * 是否显示链接下划线
+   */
+  underline?: boolean;
+  /**
+   * 页面链接执行完成后触发（失败或成功均会触发）
+   */
+  onComplete?: () => void;
+  /**
+   * 页面链接跳转失败后触发
+   */
+  onFail?: () => void;
+  /**
+   * 页面链接跳转成功后触发
+   */
+  onSuccess?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/loading/README.en-US.md b/packages/tdesign-uniapp/components/loading/README.en-US.md
new file mode 100644
index 000000000..e9db46300
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/README.en-US.md
@@ -0,0 +1,50 @@
+:: BASE_DOC ::
+
+## API
+
+### Loading Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+delay | Number | 0 | \- | N
+duration | Number | 800 | \- | N
+fullscreen | Boolean | false | \- | N
+indicator | Boolean | true | \- | N
+inherit-color | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N
+loading | Boolean | true | \- | N
+pause | Boolean | false | \- | N
+progress | Number | - | \- | N
+reverse | Boolean | - | \- | N
+size | String | '20px' | \- | N
+text | String | - | \- | N
+theme | String | circular | options: circular/spinner/dots/custom | N
+
+### Loading Slots
+
+name | Description
+-- | --
+\- | \-
+indicator | \-
+text | \-
+
+### Loading External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-indicator | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-loading-color | @brand-color | - 
+--td-loading-full-bg-color | rgba(255, 255, 255, 0.6) | - 
+--td-loading-text-color | @text-color-primary | - 
+--td-loading-text-font-size | 24rpx | - 
+--td-loading-text-line-height | 40rpx | - 
+--td-loading-z-index | 3500 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/loading/README.md b/packages/tdesign-uniapp/components/loading/README.md
new file mode 100644
index 000000000..b207fbff5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/README.md
@@ -0,0 +1,97 @@
+---
+title: Loading 加载
+description: 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+
+```js
+import TLoading from 'tdesign-uniapp/loading/loading.vue';
+```
+
+### 纯icon
+
+{{ base }}
+
+### icon加文字横向
+
+{{ horizontal }}
+
+### icon加文字竖向
+
+{{ vertical }}
+
+### 纯文字
+
+{{ text }}
+
+### 加载失败
+
+{{ error }}
+
+### 状态
+
+{{ status }}
+
+### 加载速度
+
+{{ duration }}
+
+### 规格
+
+{{ size }}
+
+## API
+
+### Loading Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
+fullscreen | Boolean | false | 是否显示为全屏加载 | N
+indicator | Boolean | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 | N
+inherit-color | Boolean | false | 是否继承父元素颜色 | N
+layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
+loading | Boolean | true | 是否处于加载状态 | N
+pause | Boolean | false | 是否暂停动画 | N
+progress | Number | - | 加载进度 | N
+reverse | Boolean | - | 加载动画是否反向 | N
+size | String | '20px' | 尺寸，示例：20px | N
+text | String | - | 加载提示文案 | N
+theme | String | circular | 加载组件类型。可选项：circular/spinner/dots/custom | N
+
+### Loading Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `text` 插槽
+indicator | 自定义 `indicator` 显示内容
+text | 自定义 `text` 显示内容
+
+### Loading External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-indicator | 指示符样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-loading-color | @brand-color | - |
+| --td-loading-full-bg-color | rgba(255, 255, 255, 0.6) | - |
+| --td-loading-text-color | @text-color-primary | - |
+| --td-loading-text-font-size | 24rpx | - |
+| --td-loading-text-line-height | 40rpx | - |
+| --td-loading-z-index | 3500 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/loading/_example/base/index.vue b/packages/tdesign-uniapp/components/loading/_example/base/index.vue
new file mode 100644
index 000000000..33b23131d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/base/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <view class="loading-container-flex">
+    <t-loading
+      v-if="!skylineRender"
+      theme="circular"
+      size="40rpx"
+      t-class="wrapper"
+    />
+    <t-loading
+      theme="spinner"
+      size="40rpx"
+      t-class="wrapper"
+    />
+    <t-loading
+      theme="dots"
+      size="80rpx"
+      t-class="wrapper"
+    />
+    <t-loading
+      theme="custom"
+      t-class="wrapper"
+    >
+      <template
+        #indicator
+      >
+        <t-image
+          custom-style="width: 100%; height: 100%"
+          src="https://tdesign.gtimg.com/mobile/demos/logo2.png"
+        />
+      </template>
+    </t-loading>
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tLoading,
+    tImage,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.loading-container-flex {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.wrapper) {
+    margin-right: 40px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/duration/index.vue b/packages/tdesign-uniapp/components/loading/_example/duration/index.vue
new file mode 100644
index 000000000..c7d92729a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/duration/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <view>
+    <t-loading
+      :theme="skylineRender ? 'spinner' : 'circular'"
+      size="52rpx"
+      text="加载中..."
+      t-class-text="text-l"
+      :duration="2000 - duration"
+    />
+    <view class="slider-container">
+      <TSlider
+        t-class="slider-class"
+        style="flex-grow: 1;"
+        :value="duration"
+        :min="100"
+        :max="1500"
+        label
+        @change="durationChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import TSlider from 'tdesign-uniapp/slider/slider.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tLoading,
+    TSlider,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+      duration: 800,
+    };
+  },
+  created() {},
+  methods: {
+    durationChange(e) {
+      this.duration = e.value;
+    },
+  },
+};
+</script>
+<style>
+.slider-container {
+    display: flex;
+    align-items: center;
+    width: 718rpx;
+}
+
+:deep(.slider-class) {
+    flex-grow: 1;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/horizontal/index.vue b/packages/tdesign-uniapp/components/loading/_example/horizontal/index.vue
new file mode 100644
index 000000000..fc9e814a0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/horizontal/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="loading-container-flex">
+    <t-loading
+      v-if="!skylineRender"
+      theme="circular"
+      size="40rpx"
+      text="加载中..."
+      t-class="wrapper"
+    />
+    <t-loading
+      theme="spinner"
+      size="40rpx"
+      text="加载中..."
+      inherit-color
+      t-class="wrapper"
+    />
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tLoading,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.loading-container-flex {
+    display: flex;
+    align-items: center;
+    color: #000;
+}
+
+.wrapper {
+    display: flex;
+    margin-right: 64px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/loading.less b/packages/tdesign-uniapp/components/loading/_example/loading.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/loading.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/loading/_example/loading.vue b/packages/tdesign-uniapp/components/loading/_example/loading.vue
new file mode 100644
index 000000000..61a3b8419
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/loading.vue
@@ -0,0 +1,100 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Loading"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Loading 加载"
+          desc="文用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="纯图标"
+          padding
+        >
+          <BaseComp />
+        </t-demo>
+        <t-demo
+          desc="图标加文字横向"
+          padding
+        >
+          <HorizontalDemo />
+        </t-demo>
+        <t-demo
+          desc="图标加文字竖向"
+          padding
+        >
+          <VerticalDemo />
+        </t-demo>
+        <t-demo
+          desc="纯文字"
+          padding
+        >
+          <TextComp />
+        </t-demo>
+
+        <t-demo
+          title="02 组件尺寸"
+          desc="大尺寸"
+          padding
+        >
+          <SizeDemo />
+        </t-demo>
+
+        <t-demo
+          title="03 加载速度"
+          desc="加载速度调整"
+          padding
+        >
+          <DurationDemo />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+//
+import BaseComp from './base/index.vue';
+import HorizontalDemo from './horizontal/index.vue';
+import VerticalDemo from './vertical/index.vue';
+import TextComp from './text/index.vue';
+import DurationDemo from './duration/index.vue';
+import SizeDemo from './size/index.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    BaseComp,
+    HorizontalDemo,
+    VerticalDemo,
+    TextComp,
+    DurationDemo,
+    SizeDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goToProgress() {
+      uni.redirectTo({
+        url: '/pages/loading/loadingProgress/index',
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './loading.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/size/index.vue b/packages/tdesign-uniapp/components/loading/_example/size/index.vue
new file mode 100644
index 000000000..7fa18b4ac
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/size/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <view class="loading-size-demo">
+    <t-loading
+      :theme="skylineRender ? 'spinner' : 'circular'"
+      size="64rpx"
+      text="加载中..."
+      t-class="large"
+    />
+
+    <view class="demo-desc">
+      中尺寸
+    </view>
+
+    <t-loading
+      :theme="skylineRender ? 'spinner' : 'circular'"
+      size="56rpx"
+      text="加载中..."
+      t-class="middle"
+    />
+
+    <view class="demo-desc">
+      小尺寸
+    </view>
+
+    <t-loading
+      :theme="skylineRender ? 'spinner' : 'circular'"
+      size="48rpx"
+      text="加载中..."
+    />
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+export default {
+  components: {
+    tLoading,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.large {
+    --td-loading-text-font-size: 32rpx;
+}
+
+.middle {
+    --td-loading-text-font-size: 28rpx;
+}
+
+.loading-size-demo .demo-desc {
+    margin: 48rpx 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/skyline/loading.less b/packages/tdesign-uniapp/components/loading/_example/skyline/loading.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/skyline/loading.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/loading/_example/skyline/loading.vue b/packages/tdesign-uniapp/components/loading/_example/skyline/loading.vue
new file mode 100644
index 000000000..5cf9fcd7d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/skyline/loading.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <demo-loading />
+  </view>
+</template>
+
+<script lang="ts">
+
+import demoLoading from '../loading';
+export default {
+  components: {
+    demoLoading,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './loading.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/text/index.vue b/packages/tdesign-uniapp/components/loading/_example/text/index.vue
new file mode 100644
index 000000000..8577d7556
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/text/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <t-loading
+      :indicator="false"
+      text="加载中..."
+    />
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+export default {
+  components: {
+    tLoading,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/_example/vertical/index.vue b/packages/tdesign-uniapp/components/loading/_example/vertical/index.vue
new file mode 100644
index 000000000..9811f3ab3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/_example/vertical/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <div class="box">
+      <t-loading
+        :theme="skylineRender ? 'spinner' : 'circular'"
+        size="40rpx"
+        text="加载中"
+        layout="vertical"
+        t-class="wrapper"
+      />
+      <t-loading
+        theme="spinner"
+        size="40rpx"
+        text="加载中"
+        layout="vertical"
+        t-class="wrapper"
+      />
+    </div>
+  </view>
+</template>
+
+<script>
+import tLoading from 'tdesign-uniapp/loading/loading.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tLoading,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.box {
+    display: flex;
+}
+
+.wrapper {
+    margin-right: 64px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/loading.less b/packages/tdesign-uniapp/components/loading/loading.less
new file mode 100644
index 000000000..820a9bbdb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/loading.less
@@ -0,0 +1,215 @@
+@import '../common/style/base.less';
+
+@loading: ~'@{prefix}-loading';
+
+@loading-color: var(--td-loading-color, @brand-color);
+@loading-text-color: var(--td-loading-text-color, @text-color-primary);
+@loading-text-font-size: var(--td-loading-text-font-size, 24rpx);
+@loading-text-line-height: var(--td-loading-text-line-height, 40rpx);
+@loading-z-index: var(--td-loading-z-index, 3500);
+@loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));
+
+.@{loading} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+
+  &--fullscreen {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: @loading-z-index;
+    background-color: @loading-full-bg-color;
+  }
+
+  &__spinner {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    animation: rotate 0.8s linear infinite;
+    color: @loading-color;
+
+    &.reverse {
+      animation-name: rotateReverse;
+    }
+
+    &--spinner {
+      animation-timing-function: steps(12);
+      color: @text-color-primary;
+
+      .@{loading}__dot {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        &::before {
+          display: block;
+          width: 5rpx;
+          height: 25%;
+          margin: 0 auto;
+          background-color: @loading-color;
+          border-radius: 40%;
+          content: ' ';
+        }
+      }
+    }
+
+    &--circular {
+      .@{loading}__circular {
+        border-radius: 100%;
+        width: 100%;
+        height: 100%;
+        background: conic-gradient(
+          from 180deg at 50% 50%,
+          rgba(255, 255, 255, 0) 0deg,
+          rgba(255, 255, 255, 0) 60deg,
+          currentColor 330deg,
+          rgba(255, 255, 255, 0) 360deg
+        );
+        mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+
+        /* stylelint-disable-next-line */
+        -webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+      }
+    }
+
+    &--dots {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      animation: none;
+
+      .@{loading}__dot {
+        width: 20%;
+        height: 20%;
+        border-radius: 50%;
+        background-color: @loading-color;
+        animation-duration: 1.8s;
+        animation-name: dotting;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-fill-mode: both;
+      }
+    }
+  }
+
+  &__text {
+    color: @loading-text-color;
+    font-size: @loading-text-font-size;
+    line-height: @loading-text-line-height;
+
+    &--vertical:not(:first-child):not(:empty) {
+      margin-top: 12rpx;
+    }
+
+    &--horizontal:not(:first-child):not(:empty) {
+      margin-left: 16rpx;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+    vertical-align: top;
+  }
+}
+
+@keyframes t-bar {
+  0% {
+    width: 0;
+  }
+
+  50% {
+    width: 70%;
+  }
+
+  100% {
+    width: 80%;
+  }
+}
+
+@keyframes t-bar-loaded {
+  0% {
+    height: 6rpx;
+    opacity: 1;
+    width: 90%;
+  }
+
+  50% {
+    height: 6rpx;
+    opacity: 1;
+    width: 100%;
+  }
+
+  100% {
+    height: 0;
+    opacity: 0;
+    width: 100%;
+  }
+}
+
+.generate(@n, @i: 1) when (@i =< @n) {
+  .@{loading}__dot-@{i} {
+    transform: rotate(@i * 30deg);
+    opacity: (1 / 12) * (@i - 1);
+  }
+  .generate(@n, (@i + 1));
+}
+.generate(12);
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotateReverse {
+  from {
+    transform: rotate(360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes dotting {
+  0% {
+    opacity: 0.15;
+  }
+
+  1% {
+    opacity: 0.8;
+  }
+
+  33% {
+    opacity: 0.8;
+  }
+
+  34% {
+    opacity: 0.15;
+  }
+
+  100% {
+    opacity: 0.15;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/loading/loading.vue b/packages/tdesign-uniapp/components/loading/loading.vue
new file mode 100644
index 000000000..0bb624b98
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/loading.vue
@@ -0,0 +1,157 @@
+<template>
+  <view
+    :style="_._style([
+      customStyle,
+      show ? '' : 'display: none',
+      inheritColor ? 'color: inherit' : ''
+    ])"
+    :class="[
+      tClass,
+      classPrefix +
+        ' ' + (classPrefix + '--' + layout) +
+        ' ' + (fullscreen ? classPrefix + '--fullscreen' : '')
+    ]"
+  >
+    <view
+      v-if="indicator"
+      :class="[
+        tClassIndicator,
+        classPrefix + '__spinner ' +
+          classPrefix + '__spinner--' + theme + ' ' + (reverse ? 'reverse' : '')
+      ]"
+      :style="
+        'width: ' +_.addUnit(size) +
+          '; height: ' + _.addUnit(size) +
+          '; ' + (inheritColor ? 'color: inherit;' : '') +
+          ' ' + (indicator ? '' : 'display: none;') +
+          ' ' + (duration ? 'animation-duration: ' + duration / 1000 + 's;' : '') +
+          ' animation-play-state: ' + (pause ? 'paused' : 'running') +
+          ';'
+      "
+      :aria-role="ariaRole || 'img'"
+      :aria-label="ariaLabel || text || '加载中'"
+    >
+      <template
+        v-if="theme === 'spinner'"
+      >
+        <view
+          v-for="(item, index) in 12"
+          :key="index"
+          :class="classPrefix + '__dot ' + classPrefix + '__dot-' + index"
+        />
+      </template>
+
+      <view
+        v-if="theme === 'circular'"
+        :class="classPrefix + '__circular'"
+      />
+      <block v-if="theme === 'dots'">
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + 0 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + (duration * 1) / 3000 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + (duration * 2) / 3000 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+      </block>
+      <slot name="indicator" />
+    </view>
+    <view
+      :class="[_.cls(classPrefix + '__text', [layout]), tClassText]"
+      :aria-hidden="indicator"
+      :aria-label="ariaLabel || text"
+    >
+      <block v-if="text">
+        {{ text }}
+      </block>
+      <slot name="text" />
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-loading`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-text`,
+    `${prefix}-class-indicator`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      show: true,
+      _,
+    };
+  },
+  watch: {
+    loading: {
+      handler(value) {
+        const {
+          delay,
+        } = this;
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        if (value && delay) {
+          this.timer = setTimeout(() => {
+            this.show = value;
+            this.timer = null;
+          }, delay);
+        } else {
+          this.show = value;
+        }
+      },
+      immediate: true,
+    },
+  },
+  beforeUnMount() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    refreshPage() {
+      this.$emit('reload');
+    },
+  },
+});
+
+</script>
+<style src="./loading.css"  scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/loading/props.ts b/packages/tdesign-uniapp/components/loading/props.ts
new file mode 100644
index 000000000..af2bd4749
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/props.ts
@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps } from './type';
+export default {
+  /** 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
+  delay: {
+    type: Number,
+    default: 0,
+  },
+  /** 加载动画执行完成一次的时间，单位：毫秒 */
+  duration: {
+    type: Number,
+    default: 800,
+  },
+  /** 是否显示为全屏加载 */
+  fullscreen: Boolean,
+  /** 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 */
+  indicator: {
+    type: Boolean,
+    default: true as TdLoadingProps['indicator'],
+  },
+  /** 是否继承父元素颜色 */
+  inheritColor: Boolean,
+  /** 对齐方式 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdLoadingProps['layout'],
+    validator(val: TdLoadingProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 是否处于加载状态 */
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否暂停动画 */
+  pause: Boolean,
+  /** 加载进度 */
+  progress: {
+    type: Number,
+  },
+  /** 加载动画是否反向 */
+  reverse: Boolean,
+  /** 尺寸，示例：20px */
+  size: {
+    type: String,
+    default: '20px',
+  },
+  /** 加载提示文案 */
+  text: {
+    type: String,
+  },
+  /** 加载组件类型 */
+  theme: {
+    type: String,
+    default: 'circular' as TdLoadingProps['theme'],
+    validator(val: TdLoadingProps['theme']): boolean {
+      if (!val) return true;
+      return ['circular', 'spinner', 'dots', 'custom'].includes(val);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/loading/type.ts b/packages/tdesign-uniapp/components/loading/type.ts
new file mode 100644
index 000000000..b89fceeee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/loading/type.ts
@@ -0,0 +1,70 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdLoadingProps {
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 加载动画执行完成一次的时间，单位：毫秒
+   * @default 800
+   */
+  duration?: number;
+  /**
+   * 是否显示为全屏加载
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+   * @default true
+   */
+  indicator?: boolean;
+  /**
+   * 是否继承父元素颜色
+   * @default false
+   */
+  inheritColor?: boolean;
+  /**
+   * 对齐方式
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 是否处于加载状态
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 是否暂停动画
+   * @default false
+   */
+  pause?: boolean;
+  /**
+   * 加载进度
+   */
+  progress?: number;
+  /**
+   * 加载动画是否反向
+   */
+  reverse?: boolean;
+  /**
+   * 尺寸，示例：20px
+   * @default '20px'
+   */
+  size?: string;
+  /**
+   * 加载提示文案
+   */
+  text?: string;
+  /**
+   * 加载组件类型
+   * @default circular
+   */
+  theme?: 'circular' | 'spinner' | 'dots' | 'custom';
+}
diff --git a/packages/tdesign-uniapp/components/message-item/computed.js b/packages/tdesign-uniapp/components/message-item/computed.js
new file mode 100644
index 000000000..ecbaa2a8c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message-item/computed.js
@@ -0,0 +1,23 @@
+export const isEmptyObj = function (obj) {
+  return JSON.stringify(obj) === '{}';
+};
+
+const changeNumToStr = function (arr) {
+  return arr.map(item => (typeof item === 'number' ? `${item}rpx` : item));
+};
+
+export const getMessageStyles = function (zIndex, offset, wrapTop) {
+  const arr = changeNumToStr(offset || [0, 0]);
+  const left = arr[1] || 0;
+  const right = arr[1] || 0;
+
+  const zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  let styleOffset = '';
+
+  styleOffset += `top:${wrapTop}px;`;
+  styleOffset += `left:${left};`;
+  styleOffset += `right:${right};`;
+
+  return zIndexStyle + styleOffset;
+};
+
diff --git a/packages/tdesign-uniapp/components/message-item/index.ts b/packages/tdesign-uniapp/components/message-item/index.ts
new file mode 100644
index 000000000..caccb80cd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message-item/index.ts
@@ -0,0 +1,46 @@
+import { MessageType, type MessageProps } from '../message/message.interface';
+import { getInstance } from '../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+interface MessageActionOptionsType extends Optional<MessageProps> {
+  context?: Context;
+  selector?: string;
+}
+
+const showMessage = function (options: MessageActionOptionsType, theme: MessageType = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+
+  if (instance) {
+    instance.resetData(() => {
+      instance.setData({ theme, ...otherOptions }, instance.show.bind(instance));
+    });
+
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options: MessageActionOptionsType) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};
diff --git a/packages/tdesign-uniapp/components/message-item/message-item.less b/packages/tdesign-uniapp/components/message-item/message-item.less
new file mode 100644
index 000000000..0adeceac9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message-item/message-item.less
@@ -0,0 +1,98 @@
+@import '../common/style/base.less';
+
+@message-height: 96rpx;
+@message-horizontal-padding: 32rpx;
+@message-z-index: 15000;
+
+@message-align: flex-start;
+@message-icon-size: 44rpx;
+@message-content-height: 44rpx;
+@message-content-font-size: @font-size-base;
+
+@message-bg-color: var(--td-message-bg-color, @bg-color-container); // 消息通知背景颜色
+@message-box-shadow: var(--td-message-box-shadow, @shadow-1); // 消息通知阴影
+@message-border-radius: var(--td-message-border-radius, @radius-default); // 消息通知圆角大小
+@message-content-font-color: var(--td-message-content-font-color, @text-color-primary); // 内容文本颜色
+@message-info-color: var(--td-message-info-color, @brand-color); // 'info'主题色
+@message-success-color: var(--td-message-success-color, @success-color); // 'success'主题色
+@message-warning-color: var(--td-message-warning-color, @warning-color); // 'warning'主题色
+@message-error-color: var(--td-message-error-color, @error-color); // 'error'主题色
+@message-close-icon-color: var(--td-message-close-icon-color, @text-color-placeholder); // 关闭按钮图标颜色
+
+@message: ~'@{prefix}-message';
+
+.@{message} {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
+  display: flex;
+  justify-content: @message-align;
+  height: @message-height;
+  align-items: center;
+  z-index: @message-z-index;
+  padding: 0 @message-horizontal-padding;
+  box-sizing: border-box;
+  border-radius: @message-border-radius;
+  line-height: 1;
+  background-color: @message-bg-color;
+  box-shadow: @message-box-shadow;
+
+  &__text {
+    display: inline-block;
+    color: @message-content-font-color;
+    font-size: @message-content-font-size;
+    line-height: @message-content-height;
+  }
+
+  &__text-wrap {
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__text-nowrap {
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+
+  &--info {
+    color: @message-info-color;
+  }
+
+  &--success {
+    color: @message-success-color;
+  }
+
+  &--warning {
+    color: @message-warning-color;
+  }
+
+  &--error {
+    color: @message-error-color;
+  }
+
+  &__icon--left,
+  &__icon--right {
+    font-size: @message-icon-size;
+  }
+
+  &__icon--left:not(:empty) {
+    margin-right: @spacer;
+  }
+
+  &__icon--right {
+    color: @message-close-icon-color;
+  }
+
+  &__icon--right:not(:empty),
+  &__link {
+    flex: 0 0 auto;
+    margin-left: @spacer;
+  }
+  &__fade {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/message-item/message-item.vue b/packages/tdesign-uniapp/components/message-item/message-item.vue
new file mode 100644
index 000000000..8a8a34a39
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message-item/message-item.vue
@@ -0,0 +1,349 @@
+<template>
+  <view>
+    <view
+      v-if="visible"
+      :id="id || classPrefix"
+      :ref="id || classPrefix"
+      :class="classPrefix + ' ' + tClass + ' ' + classPrefix + '--' + theme + ' ' + fadeClass"
+      :style="_._style([getMessageStyles(zIndex, offset, wrapTop), customStyle])"
+      :animation="showAnimation"
+      aria-role="alert"
+    >
+      <view :class="classPrefix + '__icon--left'">
+        <slot name="icon" />
+        <block
+          v-if="_icon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_icon.style || ''"
+            :t-class="tClassIcon"
+            :prefix="_icon.prefix"
+            :name="_icon.name"
+            :size="_icon.size"
+            :color="_icon.color"
+            :aria-hidden="true"
+            :aria-label="_icon.ariaLabel"
+            :aria-role="_icon.ariaRole"
+          />
+        </block>
+      </view>
+      <view
+        :id="classPrefix + '__text-wrap'"
+        :ref="classPrefix + '__text-wrap'"
+        :class="classPrefix + '__text-wrap ' + (marquee ? classPrefix + '__text-nowrap' : '')"
+        :style="'text-align: ' + align"
+      >
+        <view
+          :id="classPrefix + '__text'"
+          :ref="classPrefix + '__text'"
+          :class="classPrefix + '__text ' + tClassContent"
+          :animation="animation"
+        >
+          <block v-if="content">
+            {{ content }}
+          </block>
+          <slot name="content" />
+          <slot />
+        </view>
+      </view>
+      <t-link
+        v-if="_link && _link.content"
+        :t-class="classPrefix + '__link ' + tClassLink"
+        :custom-style="_._style([_link.style, _link.customStyle])"
+        :disabled="_link.disabled || false"
+        :hover="_link.hover || true"
+        :theme="_link.theme || 'primary'"
+        :size="_link.size || 'medium'"
+        :prefix-icon="_link.prefixIcon || false"
+        :suffix-icon="_link.suffixIcon || false"
+        :underline="_link.underline || false"
+        :content="_link.content || ''"
+        :navigator-props="_link.navigatorProps || null"
+        @complete="handleLinkClick"
+      />
+      <slot name="link" />
+      <view
+        :class="classPrefix + '__icon--right'"
+        @click="handleClose"
+      >
+        <slot name="close-btn" />
+        <block
+          v-if="_closeBtn"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_closeBtn.style || ''"
+            :t-class="tClassCloseBtn"
+            :prefix="_closeBtn.prefix"
+            :name="_closeBtn.name"
+            :size="_closeBtn.size"
+            :color="_closeBtn.color"
+            :aria-hidden="false"
+            :aria-label="_closeBtn.ariaLabel || '关闭'"
+            :aria-role="_closeBtn.ariaRole || 'button'"
+          />
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tLink from '../link/link';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { getRect, unitConvert, calcIcon } from '../common/utils';
+import { isObject } from '../common/validator';
+import _ from '../common/utils.wxs';
+import { getMessageStyles } from './computed.js';
+import { messageDefaultData } from '../message/config';
+
+
+const SHOW_DURATION = 400;
+const name = `${prefix}-message`;
+const THEME_ICON = {
+  info: 'info-circle-filled',
+  success: 'check-circle-filled',
+  warning: 'info-circle-filled',
+  error: 'error-circle-filled',
+};
+const rawData = {
+  prefix,
+  classPrefix: name,
+  loop: -1,
+  animation: [],
+  showAnimation: [],
+  wrapTop: -999,
+  fadeClass: '',
+
+  closeTimeoutContext: 0,
+  nextAnimationContext: 0,
+  resetAnimation: uni.createAnimation({
+    duration: 0,
+    timingFunction: 'linear',
+  }),
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-link`,
+    `${prefix}-class-close-btn`,
+  ],
+  components: {
+    tIcon,
+    tLink,
+  },
+  props: {
+  },
+  data() {
+    return {
+      ...rawData,
+      ...messageDefaultData,
+      animation: [],
+
+
+      _,
+    };
+  },
+  computed: {
+    innerMarquee() {
+      const { marquee } = this;
+      if (JSON.stringify(marquee) === '{}' || JSON.stringify(marquee) === 'true') {
+        return {
+          speed: 50,
+          loop: -1,
+          delay: 0,
+        };
+      }
+      return this.marquee;
+    },
+  },
+  watch: {
+    theme: {
+      handler(theme) {
+        this._icon = calcIcon(this.icon, THEME_ICON[theme]);
+      },
+      immediate: true,
+    },
+    icon: {
+      handler(icon) {
+        this._icon = calcIcon(icon, THEME_ICON[this.theme]);
+      },
+      immediate: true,
+    },
+
+
+    link: {
+      handler(v) {
+        const _link = isObject(v) ? { ...v } : { content: v };
+        this._link = _link;
+      },
+      immediate: true,
+    },
+
+    closeBtn: {
+      handler(v) {
+        this._closeBtn = calcIcon(v, 'close');
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.memoInitialData();
+  },
+  beforeUnMount() {
+    this.clearMessageAnimation();
+  },
+  methods: {
+    getMessageStyles,
+    /** 记录组件设置的项目 */
+    memoInitialData() {
+      this.initialData = {
+        ...rawData,
+        ...messageDefaultData,
+        animation: [],
+      };
+    },
+
+    resetData(cb) {
+      const { initialData = {} } = this;
+      Object.keys(initialData).forEach((key) => {
+        this[key] = initialData[key];
+      });
+      setTimeout(cb);
+    },
+
+    /** 检查是否需要开启一个新的动画循环 */
+    checkAnimation() {
+      const { innerMarquee } = this;
+      if (!innerMarquee || innerMarquee.loop === 0) {
+        return;
+      }
+
+      const speeding = innerMarquee.speed;
+
+      if (this.loop > 0) {
+        this.loop -= 1;
+      } else if (this.loop === 0) {
+      // 动画回到初始位置
+        this.animation = this.resetAnimation
+          .translateX(0)
+          .step()
+          .export();
+        return;
+      }
+
+      if (this.nextAnimationContext) {
+        this.clearMessageAnimation();
+      }
+
+      const warpID = `#${name}__text-wrap`;
+      const nodeID = `#${name}__text`;
+      Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
+        this.animation = this.resetAnimation.translateX(wrapRect.width).step()
+          .export();
+
+        setTimeout(() => {
+          const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
+          const nextAnimation = uni
+            .createAnimation({
+            // 默认50px/s
+              duration: durationTime,
+            })
+            .translateX(-nodeRect.width)
+            .step()
+            .export();
+
+          // 这里就只能用 setTimeout/20, nextTick 没用
+          // 不用这个的话会出现reset动画没跑完就开始跑这个等的奇怪问题
+          setTimeout(() => {
+            this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime);
+            this.animation = nextAnimation;
+          }, 20);
+        });
+      });
+    },
+
+    /** 清理动画循环 */
+    clearMessageAnimation() {
+      clearTimeout(this.nextAnimationContext);
+      this.nextAnimationContext = 0;
+    },
+
+    show(offsetHeight = 0) {
+      const { duration, innerMarquee, offset, id } = this;
+      this.visible = true;
+      this.loop = innerMarquee.loop || this.loop;
+      this.fadeClass = `${name}__fade`;
+      this.wrapTop = unitConvert(offset[0]) + offsetHeight;
+
+      this.reset();
+      setTimeout(() => {
+        this.checkAnimation();
+      });
+
+      if (duration && duration > 0) {
+        this.closeTimeoutContext = setTimeout(() => {
+          this.hide();
+          this.$emit('duration-end', { self: this });
+        }, duration);
+      }
+      const wrapID = id ? `#${id}` : `#${name}`;
+
+      setTimeout(() => {
+        getRect(this, wrapID)
+          .then((wrapRect) => {
+            this.height = wrapRect.height;
+            setTimeout(() => {
+              this.fadeClass = '';
+            });
+          })
+          .catch(() => {
+          });
+      });
+    },
+
+    hide() {
+      this.reset();
+      this.fadeClass = `${name}__fade`;
+
+      setTimeout(() => {
+        this.visible = false;
+        this.animation = [];
+      }, SHOW_DURATION);
+      if (typeof this.onHide === 'function') {
+        this.onHide();
+      }
+    },
+
+    // 重置定时器
+    reset() {
+      if (this.nextAnimationContext) {
+        this.clearMessageAnimation();
+      }
+      clearTimeout(this.closeTimeoutContext);
+      this.closeTimeoutContext = 0;
+    },
+
+    handleClose() {
+      this.hide();
+      this.$emit('close-btn-click');
+    },
+
+    handleLinkClick() {
+      this.$emit('link-click');
+    },
+  },
+});
+</script>
+<style scoped>
+@import './message-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/message/README.en-US.md b/packages/tdesign-uniapp/components/message/README.en-US.md
new file mode 100644
index 000000000..910da357b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/README.en-US.md
@@ -0,0 +1,69 @@
+:: BASE_DOC ::
+
+## API
+
+### Message Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+action | String | - | `deprecated`。operation | N
+align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+close-btn | String / Boolean / Object | false | \- | N
+content | String | - | \- | N
+duration | Number | 3000 | \- | N
+gap | String / Number / Boolean | 12 | \- | N
+icon | String / Boolean / Object | true | \- | N
+link | String / Object | - | \- | N
+marquee | Boolean / Object | false | Typescript：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+single | Boolean | true | \- | N
+theme | String | info | options: info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+visible | Boolean | false | `v-model:visible` is supported | N
+default-visible | Boolean | false | uncontrolled property | N
+z-index | Number | 15000 | \- | N
+
+### Message Events
+
+name | params | description
+-- | -- | --
+action-btn-click | `(context: { e: MouseEvent })` | \-
+close-btn-click | `(context: { e: MouseEvent })` | \-
+duration-end | \- | \-
+link-click | `(context: { e: MouseEvent })` | \-
+
+### Message Slots
+
+name | Description
+-- | --
+\- | \-
+action | `deprecated`。operation
+close-btn | \-
+content | \-
+icon | \-
+link | \-
+
+### Message External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-close-btn | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-link | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/message/README.md b/packages/tdesign-uniapp/components/message/README.md
new file mode 100644
index 000000000..29ba35424
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/README.md
@@ -0,0 +1,105 @@
+---
+title: Message 消息通知
+description: 用于轻量级反馈或提示，不会打断用户操作。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TMessage from 'tdesign-uniapp/message/message.vue';
+```
+
+### 引入 API
+
+若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
+
+```js
+import Message from 'tdesign-uniapp/message/index';
+```
+
+### 组件类型
+
+弹窗内容为纯文本、标题和副标题、带输入框，用 API `Message.info` 方法调用反馈类对话框。
+
+
+{{ base }}
+
+
+### 组件状态
+
+消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error）  
+
+{{ theme }}
+
+## API
+
+### Message Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+action | String | - | 已废弃。操作 | N
+align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+close-btn | String / Boolean / Object | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 | N
+content | String | - | 用于自定义消息弹出内容 | N
+duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
+gap | String / Number / Boolean | 12 | 两条 `message` 之间的间距 | N
+icon | String / Boolean / Object | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 | N
+link | String / Object | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
+single | Boolean | true | 是否保持仅显示一条信息 | N
+theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/message/type.ts) | N
+visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model:visible` | N
+default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
+z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
+
+### Message Events
+
+名称 | 参数 | 描述
+-- | -- | --
+action-btn-click | `(context: { e: MouseEvent })` | 已废弃。当操作按钮存在时，用户点击操作按钮时触发
+close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
+duration-end | \- | 计时结束后触发
+link-click | `(context: { e: MouseEvent })` | 当`link`链接存在时，点击链接文本时触发
+
+### Message Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+action | 已废弃。自定义 `action` 显示内容
+close-btn | 关闭按钮
+content | 自定义消息弹出内容
+icon | 消息提醒前面的图标
+link | 链接名称
+
+### Message External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-close-btn | 关闭按钮样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-link | 链接样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-message-bg-color | @bg-color-container | - |
+| --td-message-border-radius | @radius-default | - |
+| --td-message-box-shadow | @shadow-4 | - |
+| --td-message-close-icon-color | @font-gray-3 | - |
+| --td-message-content-font-color | @font-gray-1 | - |
+| --td-message-error-color | @error-color | - |
+| --td-message-info-color | @brand-color | - |
+| --td-message-success-color | @success-color | - |
+| --td-message-warning-color | @warning-color | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/message/_example/base/index.vue b/packages/tdesign-uniapp/components/message/_example/base/index.vue
new file mode 100644
index 000000000..fdf26b883
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/_example/base/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <view>
+    <t-message
+      id="t-message"
+      ref="t-message"
+    />
+
+    <t-message
+      :visible="visible"
+      :offset="[90, 32]"
+      content="这是一条通过组件调用的消息通知"
+      @duration-end="() => visible = false"
+    />
+
+    <view class="message-example--base">
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showTextMessage"
+      >
+        纯文字的通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showIconMessage"
+      >
+        带图标的通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showCloseMessage"
+      >
+        带关闭的通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showScrollMessage"
+      >
+        可滚动的通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showBtnMessage"
+      >
+        带按钮的通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showComponent"
+      >
+        组件调用
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tMessage from 'tdesign-uniapp/message/message.vue';
+import Message from 'tdesign-uniapp/message/index';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tButton,
+    tMessage,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    showTextMessage() {
+      Message.info({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        icon: false,
+        // single: false, // 打开注释体验多个消息叠加效果
+        content: '这是一条纯文字的消息通知 5s消失',
+      });
+    },
+    showIconMessage() {
+      Message.info({
+        context: this,
+        offset: ['180rpx', '32rpx'],
+        duration: 5000,
+        content: '这是一条带图标的消息通知 5s消失',
+      });
+    },
+    showCloseMessage() {
+      Message.info({
+        context: this,
+        offset: ['180rpx', 32],
+        content: '这是一条带关闭的消息通知',
+        duration: -1,
+        link: {
+          content: '按钮',
+          navigatorProps: {
+            url: '/page/xxx/xxx',
+          },
+        },
+        closeBtn: true,
+      });
+    },
+    showScrollMessage() {
+      Message.info({
+        context: this,
+        offset: [90, 32],
+        marquee: {
+          speed: 50,
+          loop: -1,
+          delay: 5000,
+        },
+        icon: false,
+        content: '这是一条滚动的通知信息',
+        duration: -1,
+      });
+    },
+    showBtnMessage() {
+      Message.info({
+        context: this,
+        offset: [90, 32],
+        icon: 'notification-filled',
+        content: '这是一条带操作的消息通知',
+        duration: -1,
+        link: {
+          content: '链接',
+          navigatorProps: {
+            url: '/pages/home/home',
+          },
+        },
+      });
+    },
+    showSingleMessage() {
+      Message.info({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        icon: false,
+        content: '这是一条纯文字的消息通知且仅显示一条',
+        single: true,
+      });
+    },
+    showComponent() {
+      this.visible = true;
+    },
+  },
+};
+</script>
+<style scoped>
+.message-example--base {
+    margin: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/message/_example/message.less b/packages/tdesign-uniapp/components/message/_example/message.less
new file mode 100644
index 000000000..9d583fe0f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/_example/message.less
@@ -0,0 +1,5 @@
+.message-example {
+    .t-button {
+        background-color: transparent;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/message/_example/message.vue b/packages/tdesign-uniapp/components/message/_example/message.vue
new file mode 100644
index 000000000..4e208d868
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/_example/message.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Message"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo message-example">
+      <t-demo-header
+        title="Message 消息通知"
+        desc="用于轻量级反馈或提示，不会打断用户操作。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="消息通知内容为文本、带操作按钮"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="消息组件风格"
+      >
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import theme from './theme/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    theme,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './message.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/message/_example/theme/index.vue b/packages/tdesign-uniapp/components/message/_example/theme/index.vue
new file mode 100644
index 000000000..fda2c8de7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/_example/theme/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <view>
+    <t-message
+      id="t-message"
+      ref="t-message"
+    />
+
+    <view class="message-example--theme">
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showInfoMessage"
+      >
+        普通通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showSuccessMessage"
+      >
+        成功通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showWarnMessage"
+      >
+        警示通知
+      </t-button>
+
+      <t-button
+        custom-style="margin-bottom: 16px;"
+        theme="primary"
+        variant="outline"
+        size="large"
+        block
+        @click="showErrorMessage"
+      >
+        错误通知
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tMessage from 'tdesign-uniapp/message/message.vue';
+import Message from 'tdesign-uniapp/message/index';
+export default {
+  components: {
+    tButton,
+    tMessage,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    showInfoMessage() {
+      Message.info({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        content: '这是一条普通通知信息',
+      });
+    },
+    showWarnMessage() {
+      Message.warning({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        content: '这是一条需要用户关注到的警示通知',
+      });
+    },
+    showSuccessMessage() {
+      Message.success({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        content: '这是一条成功的提示消息',
+      });
+    },
+    showErrorMessage() {
+      Message.error({
+        context: this,
+        offset: [90, 32],
+        duration: 5000,
+        content: '这是一条错误提示通知',
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.message-example--theme {
+    margin: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/message/config.ts b/packages/tdesign-uniapp/components/message/config.ts
new file mode 100644
index 000000000..ac2664678
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/config.ts
@@ -0,0 +1,10 @@
+import props from './props';
+
+
+export const messageDefaultData = Object.keys(props).reduce((acc, key) => {
+  const result = props[key].default;
+  return {
+    ...acc,
+    [key]: typeof result === 'function' ? result() : result,
+  };
+}, {});
diff --git a/packages/tdesign-uniapp/components/message/index.ts b/packages/tdesign-uniapp/components/message/index.ts
new file mode 100644
index 000000000..fba3d5912
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/index.ts
@@ -0,0 +1,45 @@
+import { MessageType, type MessageProps } from './message.interface';
+import { getInstance } from '../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+interface MessageActionOptionsType extends Optional<MessageProps> {
+  context?: Context;
+  selector?: string;
+}
+
+const showMessage = function (options: MessageActionOptionsType, theme: MessageType = MessageType.info) {
+  const { context, selector = '#t-message', ...otherOptions } = options;
+  const instance = getInstance(context, selector);
+  if (typeof otherOptions.single !== 'boolean') {
+    otherOptions.single = true;
+  }
+  if (instance) {
+    instance.setMessage(otherOptions, theme);
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export default {
+  info(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.info);
+  },
+  success(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.success);
+  },
+  warning(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.warning);
+  },
+  error(options: MessageActionOptionsType) {
+    return showMessage(options, MessageType.error);
+  },
+  hide(options: MessageActionOptionsType) {
+    const { context, selector = '#t-message' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) {
+      return;
+    }
+    instance.hide();
+  },
+};
diff --git a/packages/tdesign-uniapp/components/message/message.interface.ts b/packages/tdesign-uniapp/components/message/message.interface.ts
new file mode 100644
index 000000000..27b7c55aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/message.interface.ts
@@ -0,0 +1,28 @@
+export enum MessageType {
+  info = 'info',
+  success = 'success',
+  warning = 'warning',
+  error = 'error',
+}
+export interface MessageMarquee {
+  speed?: number;
+  loop?: number;
+  delay?: number;
+}
+export interface MessageProps {
+  visible?: boolean;
+  content: string;
+  align?: string;
+  theme?: MessageType;
+  icon?: boolean | string;
+  link?: string | object;
+  closeBtn?: boolean;
+  action?: string;
+  marquee?: MessageMarquee;
+  offset?: object;
+  duration?: number;
+  zIndex?: number;
+  id?: string;
+  gap?: string | number;
+  single?: boolean;
+}
diff --git a/packages/tdesign-uniapp/components/message/message.vue b/packages/tdesign-uniapp/components/message/message.vue
new file mode 100644
index 000000000..a11643224
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/message.vue
@@ -0,0 +1,275 @@
+<template>
+  <view>
+    <TMessageItem
+      v-for="(item) in messageList"
+      :key="item.id"
+      :ref="item.id"
+      @close-btn-click="handleClose($event, { tagId: item.id })"
+      @link-click="handleLinkClick($event, { tagId: item.id })"
+      @duration-end="handleDurationEnd($event, { tagId: item.id })"
+    >
+      <template #icon>
+        <slot
+          name="icon"
+        />
+      </template>
+      <template #content>
+        <slot
+          name="content"
+        />
+      </template>
+      <slot />
+      <template #link>
+        <slot
+          name="link"
+        />
+      </template>
+      <template #close-btn>
+        <slot
+          name="close-btn"
+        />
+      </template>
+    </TMessageItem>
+  </view>
+</template>
+
+<script>
+import TMessageItem from '../message-item/message-item.vue';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { MessageType } from './message.interface';
+import props from './props';
+import { unitConvert } from '../common/utils';
+
+
+const SHOW_DURATION = 400;
+const name = `${prefix}-message`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TMessageItem,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      messageList: [],
+      instances: [],
+      index: 0,
+    };
+  },
+  watch: {
+    visible: {
+      handler(value) {
+        if (value) {
+          const data = Object.keys(props).reduce((acc, key) => ({
+            ...acc,
+            [key]: this[key],
+          }), {});
+
+          this.setMessage(data, this.theme);
+        } else {
+          this.messageList = [];
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  pageLifetimes: {
+    show() {
+      this.hideAll();
+    },
+  },
+
+  mounted() {
+  },
+
+  methods: {
+    /**
+   * 设置消息信息
+   * @param msg
+   * @param theme
+   */
+    setMessage(msg, theme = MessageType.info) {
+      let id = `${name}_${this.index}`;
+      if (msg.single) {
+        // 不能与外层的 ref 相同，否则抖音小程序报错
+        id = `${name}_inner`;
+      }
+      const gap = unitConvert(msg.gap || this.gap);
+      const msgObj = {
+        ...msg,
+        theme,
+        id,
+        gap,
+      };
+      const instanceIndex = this.instances.findIndex(x => x.id === id);
+      if (instanceIndex < 0) {
+        this.addMessage(msgObj);
+      } else {
+      // 更新消息
+        const instance = this.instances[instanceIndex];
+        const offsetHeight = this.getOffsetHeight(instanceIndex);
+        instance.resetData(() => {
+          Object.keys(msgObj).forEach((key) => {
+            instance[key] = msgObj[key];
+          });
+          setTimeout(() => {
+            instance.show.call(instance, offsetHeight);
+          });
+          instance.onHide = () => {
+            this.close(id);
+          };
+        });
+      }
+    },
+
+    /**
+   * 新增消息
+   * @param msgObj
+   */
+    addMessage(msgObj) {
+      const list = [...this.messageList, { id: msgObj.id }];
+      this.messageList = list;
+
+      setTimeout(() => {
+        const offsetHeight = this.getOffsetHeight();
+        const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
+        if (this.instances) {
+          this.instances.push(instance);
+          this.index += 1;
+        }
+      }, 33);
+    },
+
+    /**
+   * 获取消息显示top偏移距离
+   * @param index
+   * @returns
+   */
+    getOffsetHeight(index = -1) {
+      let offsetHeight = 0;
+      let len = index;
+      if (len === -1 || len > this.instances.length) {
+        len = this.instances.length;
+      }
+      for (let i = 0; i < len; i += 1) {
+        const instance = this.instances[i];
+        offsetHeight += instance.height + instance.gap;
+      }
+      return offsetHeight;
+    },
+
+    /**
+   * 新增消息显示
+   * @param options
+   * @param id
+   * @param offsetHeight
+   * @returns
+   */
+    showMessageItem(options, id, offsetHeight) {
+      let instance = this.$refs[`${id}`];
+      if (Array.isArray(instance)) {
+        instance = instance[0];
+      }
+
+      if (instance) {
+        instance.resetData(() => {
+          Object.keys(options).forEach((key) => {
+            instance[key] = options[key];
+          });
+          setTimeout(() => {
+            instance.show.call(instance, offsetHeight);
+          });
+          instance.onHide = () => {
+            this.close(id);
+          };
+        });
+
+        return instance;
+      }
+      console.error('未找到组件,请确认 selector && context 是否正确');
+    },
+
+    close(id) {
+      setTimeout(() => {
+        this.removeMsg(id);
+      }, SHOW_DURATION);
+      this.removeInstance(id);
+    },
+
+    /**
+   * 移除指定消息，id为空则删除全部消息
+   * @param id
+   */
+    hide(id) {
+      if (!id) {
+        this.hideAll();
+      }
+      const instance = this.instances.find(x => x.id === id);
+      if (instance) {
+        instance.hide();
+      }
+    },
+
+    /**
+   * 移除全部消息
+   */
+    hideAll() {
+    // 消息移除后也会移除instance，下标不用增加，直至全部删除
+      for (let i = 0; i < this.instances.length;) {
+        const instance = this.instances[i];
+        instance.hide();
+      }
+    },
+
+    /**
+   * 移除message实例
+   */
+    removeInstance(id) {
+      const index = this.instances.findIndex(x => x.id === id);
+      if (index < 0) return;
+      const instance = this.instances[index];
+      const removedHeight = instance.height;
+      this.instances.splice(index, 1);
+      for (let i = index; i < this.instances.length; i += 1) {
+        const instance = this.instances[i];
+        instance.wrapTop = instance.wrapTop - removedHeight - instance.gap;
+      }
+    },
+
+    /**
+   * 移除页面元素
+   * @param id
+   */
+    removeMsg(id) {
+      this.messageList = this.messageList.filter(item => item.id !== id);
+      // #ifdef VUE2
+      this.$set(this, 'messageList', this.messageList);
+      // #endif
+    },
+
+    handleClose(e) {
+      this.$emit('close-btn-click', { e });
+    },
+
+    handleLinkClick(e) {
+      this.$emit('link-click', { e });
+    },
+
+    handleDurationEnd(e) {
+      this.$emit('duration-end', { e });
+    },
+  },
+});
+</script>
+<style scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/message/props.ts b/packages/tdesign-uniapp/components/message/props.ts
new file mode 100644
index 000000000..9375fac76
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/props.ts
@@ -0,0 +1,101 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdMessageProps } from './type';
+export default {
+  /** 文本对齐方式 */
+  align: {
+    type: String,
+    default: 'left' as TdMessageProps['align'],
+    validator(val: TdMessageProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'center'].includes(val);
+    },
+  },
+  /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */
+  closeBtn: {
+    type: [String, Boolean, Object],
+    default: false as TdMessageProps['closeBtn'],
+  },
+  /** 用于自定义消息弹出内容 */
+  content: {
+    type: String,
+  },
+  /** 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 */
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  /** 两条 `message` 之间的间距 */
+  gap: {
+    type: [String, Number, Boolean],
+    default: 12 as TdMessageProps['gap'],
+  },
+  /** 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdMessageProps['icon'],
+  },
+  /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` */
+  link: {
+    type: [String, Object],
+  },
+  /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */
+  marquee: {
+    type: [Boolean, Object],
+    default: false as TdMessageProps['marquee'],
+  },
+  /** 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx'] */
+  offset: {
+    type: Array,
+  },
+  /** 是否保持仅显示一条信息 */
+  single: {
+    type: Boolean,
+    default: true,
+  },
+  /** 消息组件风格 */
+  theme: {
+    type: String,
+    default: 'info' as TdMessageProps['theme'],
+    validator(val: TdMessageProps['theme']): boolean {
+      if (!val) return true;
+      return ['info', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 是否显示，隐藏时默认销毁组件 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否显示，隐藏时默认销毁组件，非受控属性 */
+  defaultVisible: Boolean,
+  /** 元素层级，样式默认为 15000 */
+  zIndex: {
+    type: Number,
+    default: 15000,
+  },
+  /** 已废弃。当操作按钮存在时，用户点击操作按钮时触发 */
+  onActionBtnClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当关闭按钮存在时，用户点击关闭按钮触发 */
+  onCloseBtnClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 计时结束后触发 */
+  onDurationEnd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当`link`链接存在时，点击链接文本时触发 */
+  onLinkClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/message/type.ts b/packages/tdesign-uniapp/components/message/type.ts
new file mode 100644
index 000000000..131902e1b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/message/type.ts
@@ -0,0 +1,101 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdMessageProps {
+  /**
+   * 文本对齐方式
+   * @default left
+   */
+  align?: MessageAlignType;
+  /**
+   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件
+   * @default false
+   */
+  closeBtn?: string | boolean | object;
+  /**
+   * 用于自定义消息弹出内容
+   */
+  content?: string;
+  /**
+   * 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器
+   * @default 3000
+   */
+  duration?: number;
+  /**
+   * 两条 `message` 之间的间距
+   * @default 12
+   */
+  gap?: string | number | boolean;
+  /**
+   * 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`
+   */
+  link?: string | object;
+  /**
+   * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
+   * @default false
+   */
+  marquee?: boolean | MessageMarquee;
+  /**
+   * 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 是否保持仅显示一条信息
+   * @default true
+   */
+  single?: boolean;
+  /**
+   * 消息组件风格
+   * @default info
+   */
+  theme?: MessageThemeList;
+  /**
+   * 是否显示，隐藏时默认销毁组件
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 是否显示，隐藏时默认销毁组件，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 元素层级，样式默认为 15000
+   * @default 15000
+   */
+  zIndex?: number;
+  /**
+   * 已废弃。当操作按钮存在时，用户点击操作按钮时触发
+   */
+  onActionBtnClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 当关闭按钮存在时，用户点击关闭按钮触发
+   */
+  onCloseBtnClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 计时结束后触发
+   */
+  onDurationEnd?: () => void;
+  /**
+   * 当`link`链接存在时，点击链接文本时触发
+   */
+  onLinkClick?: (context: { e: MouseEvent }) => void;
+}
+
+export type MessageAlignType = 'left' | 'center';
+
+export interface MessageMarquee {
+  speed?: number;
+  loop?: number;
+  delay?: number;
+}
+
+export type MessageThemeList = 'info' | 'success' | 'warning' | 'error';
diff --git a/packages/tdesign-uniapp/components/mixins/page-scroll.js b/packages/tdesign-uniapp/components/mixins/page-scroll.js
new file mode 100644
index 000000000..59340b41f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/page-scroll.js
@@ -0,0 +1,115 @@
+import { getCurrentPage } from '../common/utils';
+import Bus from '../common/bus';
+
+const overflowScrollReg = /scroll|auto|overlay/i;
+
+export const bus = new Bus();
+export const PAGE_SCROLL_EVENT_NAME = 'page-scroll';
+
+
+const onPageScroll = function (event) {
+  const page = getCurrentPage();
+
+  if (!page) return;
+  const { pageScroller } = page;
+
+  pageScroller?.forEach((scroller) => {
+    if (typeof scroller === 'function') {
+      scroller(event);
+    }
+  });
+};
+
+
+export default (funcName = 'onScroll', useBus = true) => {
+  // #ifdef H5
+  useBus = false;
+  // #endif
+
+  return {
+    mounted() {
+      if (useBus) {
+        bus.on(PAGE_SCROLL_EVENT_NAME, this[funcName]);
+        return;
+      }
+
+      // #ifdef H5
+      this._scroller = getScroller(this.$el);
+      if (this._scroller) {
+        this._scroller.addEventListener('scroll', this._bindScroller);
+      }
+      // #endif
+
+      const page = getCurrentPage();
+      if (!page) return;
+
+
+      if (Array.isArray(page.pageScroller)) {
+        page.pageScroller.push(this._bindScroller);
+      } else {
+        page.pageScroller = typeof page.onPageScroll === 'function' ? [page.onPageScroll.bind(page), this._bindScroller] : [this._bindScroller];
+      }
+
+      page.onPageScroll = onPageScroll;
+    },
+
+    beforeUnMount() {
+      if (useBus) {
+        bus.off(PAGE_SCROLL_EVENT_NAME, this[funcName]);
+        return;
+      }
+
+      // #ifdef H5
+      if (this._scroller) {
+        this._scroller.removeEventListener('scroll', this._bindScroller);
+      }
+      // #endif
+
+      const page = getCurrentPage();
+      if (!page) return;
+
+      page.pageScroller = page.pageScroller?.filter(item => item !== this._bindScroller) || [];
+    },
+    methods: {
+      _bindScroller(e) {
+        let result;
+        // #ifdef H5
+        result = this[funcName]?.call(this, e.target);
+        // #endif
+        // #ifndef H5
+        result = this[funcName]?.call(this, e);
+        // #endif
+        return result;
+      },
+    },
+  };
+};
+
+
+export function getScroller(el, root) {
+  // #ifdef H5
+  if (root === void 0) {
+    root = window;
+  }
+
+  let node = el;
+
+  while (node && node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1 && node !== root) {
+    const { overflowY } = window.getComputedStyle(node);
+
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+
+    node = node.parentNode;
+  }
+
+  return root;
+  // #endif
+}
+
+
+export function handlePageScroll(e) {
+  bus.emit(PAGE_SCROLL_EVENT_NAME, e);
+  return bus;
+}
diff --git a/packages/tdesign-uniapp/components/mixins/skyline.js b/packages/tdesign-uniapp/components/mixins/skyline.js
new file mode 100644
index 000000000..d3d7567cf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/skyline.js
@@ -0,0 +1,12 @@
+import { getCurrentPage } from '../common/utils.js';
+
+export default {
+  data() {
+    return {
+      skylineRender: false,
+    };
+  },
+  mounted() {
+    this.skylineRender = getCurrentPage().renderer === 'skyline';
+  },
+};
diff --git a/packages/tdesign-uniapp/components/mixins/theme-change.js b/packages/tdesign-uniapp/components/mixins/theme-change.js
new file mode 100644
index 000000000..63d5a52bb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/theme-change.js
@@ -0,0 +1,37 @@
+import { appBaseInfo } from '../common/utils';
+import { ref, onBeforeMount } from 'vue';
+
+export const useTheme = () => {
+  const theme = ref('light');
+  const initTheme = () => {
+    theme.value = appBaseInfo.theme;
+    if (typeof uni.onThemeChange !== 'function') return;
+    uni.onThemeChange((t) => {
+      theme.value = t.theme;
+    });
+  };
+
+  onBeforeMount(() => {
+    initTheme();
+  });
+
+  return {
+    theme,
+  };
+};
+
+
+export const themeMixin = {
+  data() {
+    return {
+      theme: 'light',
+    };
+  },
+  mounted() {
+    this.theme = appBaseInfo.theme;
+    if (typeof uni.onThemeChange !== 'function') return;
+    uni.onThemeChange((t) => {
+      this.theme = t.theme;
+    });
+  },
+};
diff --git a/packages/tdesign-uniapp/components/mixins/touch.js b/packages/tdesign-uniapp/components/mixins/touch.js
new file mode 100644
index 000000000..a555f877f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/touch.js
@@ -0,0 +1,29 @@
+const getDirection = (t, s) => (t > s && t > 10 ? 'horizontal' : s > t && s > 10 ? 'vertical' : '');
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    resetTouchStatus() {
+      this.direction = '';
+      this.deltaX = 0;
+      this.deltaY = 0;
+      this.offsetX = 0;
+      this.offsetY = 0;
+    },
+    touchStart(t) {
+      this.resetTouchStatus();
+      const [s] = t.touches;
+      this.startX = s.clientX;
+      this.startY = s.clientY;
+    },
+    touchMove(t) {
+      const [s] = t.touches;
+      this.deltaX = s.clientX - this.startX;
+      this.deltaY = s.clientY - this.startY;
+      this.offsetX = Math.abs(this.deltaX);
+      this.offsetY = Math.abs(this.deltaY);
+      this.direction = getDirection(this.offsetX, this.offsetY);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/mixins/transition.js b/packages/tdesign-uniapp/components/mixins/transition.js
new file mode 100644
index 000000000..9be641e62
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/transition.js
@@ -0,0 +1,133 @@
+import { prefix } from '../common/config';
+
+
+export default function transition() {
+  return {
+    data() {
+      return {
+        transitionClass: '',
+        transitionDurations: 300,
+        className: '',
+        realVisible: false,
+      };
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: null,
+      },
+      appear: Boolean,
+      name: {
+        type: String,
+        default: 'fade',
+      },
+      durations: {
+        type: Number,
+        optionalTypes: [Array],
+      },
+    },
+    watch: {
+      visible: {
+        handler(val, oldVal) {
+          this.watchVisible(val, oldVal);
+        },
+      },
+    },
+    created() {
+      this.status = '';
+      this.transitionT = 0;
+    },
+    beforeMount() {
+      this.dataDurations = this.getDurations();
+      if (this.visible) {
+        this.enter();
+      }
+      this.inited = true;
+    },
+    destroyed() {
+      clearTimeout(this.transitionT);
+    },
+    methods: {
+      watchVisible(curr, prev) {
+        if (this.inited && curr !== prev) {
+          curr ? this.enter() : this.leave();
+        }
+      },
+      getDurations() {
+        const { durations } = this;
+        if (Array.isArray(durations)) {
+          return durations.map(item => Number(item));
+        }
+        return [Number(durations), Number(durations)];
+      },
+      enter() {
+        const { name, transitionDurations } = this;
+        const [duration] = this.dataDurations;
+        this.status = 'entering';
+        this.realVisible = true;
+        this.transitionClass = `${prefix}-${name}-enter ${prefix}-${name}-enter-active`;
+
+
+        setTimeout(() => {
+          this.transitionClass = `${prefix}-${name}-enter-active ${prefix}-${name}-enter-to`;
+        }, 30);
+        if (typeof duration === 'number' && duration > 0) {
+          this.transitionT = setTimeout(this.entered.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'leaving' ? this.leaved.bind(this) : (() => {}),
+            transitionDurations + 30,
+          );
+        }
+      },
+      entered() {
+        this.customDuration = false;
+        clearTimeout(this.transitionT);
+        this.status = 'entered';
+        this.transitionClass = '';
+      },
+      leave() {
+        const { name, transitionDurations } = this;
+        const [, duration] = this.dataDurations;
+        this.status = 'leaving';
+        this.transitionClass = `${prefix}-${name}-leave  ${prefix}-${name}-leave-active`;
+
+        clearTimeout(this.transitionT);
+        setTimeout(() => {
+          this.transitionClass = `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`;
+        }, 30);
+
+        if (typeof duration === 'number' && duration > 0) {
+          this.customDuration = true;
+          this.transitionT = setTimeout(this.leaved.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'leaving' ? this.leaved.bind(this) : (() => {}),
+            transitionDurations + 30,
+          );
+        }
+      },
+      leaved() {
+        this.customDuration = false;
+        this.$emit('leaved');
+        clearTimeout(this.transitionT);
+        this.status = 'leaved';
+
+        this.transitionClass = '';
+        this.realVisible = false;
+      },
+      onTransitionEnd() {
+        if (this.customDuration) {
+          return;
+        }
+        clearTimeout(this.transitionT);
+        if (this.status === 'entering' && this.visible) {
+          this.entered();
+        } else if (this.status === 'leaving' && !this.visible) {
+          this.leaved();
+        }
+      },
+    },
+  };
+}
+export const transitionMixins = transition();
diff --git a/packages/tdesign-uniapp/components/mixins/using-custom-navbar.js b/packages/tdesign-uniapp/components/mixins/using-custom-navbar.js
new file mode 100644
index 000000000..4d75b5eb1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/mixins/using-custom-navbar.js
@@ -0,0 +1,38 @@
+import { systemInfo } from '../common/utils';
+const useCustomNavbarBehavior = {
+  data() {
+    return {
+      distanceTop: 0,
+    };
+  },
+  props: {
+    usingCustomNavbar: {
+      type: Boolean,
+      default: false,
+    },
+    customNavbarHeight: {
+      type: Number,
+      default: 0,
+    },
+  },
+  created() {
+    if (this.usingCustomNavbar) {
+      this.calculateCustomNavbarDistanceTop();
+    }
+  },
+  methods: {
+    calculateCustomNavbarDistanceTop() {
+      const { statusBarHeight } = systemInfo;
+      let distance = 0;
+      // #ifndef H5
+      // #ifndef APP-PLUS
+      const menuButton = uni.getMenuButtonBoundingClientRect();
+      distance = menuButton.top + menuButton.bottom - statusBarHeight;
+      // #endif
+      // #endif
+
+      this.distanceTop = Math.max(distance, this.customNavbarHeight + statusBarHeight);
+    },
+  },
+};
+export default useCustomNavbarBehavior;
diff --git a/packages/tdesign-uniapp/components/navbar/README.en-US.md b/packages/tdesign-uniapp/components/navbar/README.en-US.md
new file mode 100644
index 000000000..157c1ac79
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/README.en-US.md
@@ -0,0 +1,73 @@
+:: BASE_DOC ::
+
+## API
+
+### Navbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | Boolean | true | \- | N
+background | String | - | `deprecated`。background | N
+delta | Number | 1 | \- | N
+fixed | Boolean | true | \- | N
+home-icon | String | - | `deprecated`。homeIcon | N
+left-arrow | Boolean | false | \- | N
+left-icon | String | - | `deprecated` | N
+safe-area-inset-top | Boolean | true | \- | N
+title | String | - | page title | N
+title-max-length | Number | - | \- | N
+visible | Boolean | true | \- | N
+
+### Navbar Events
+
+name | params | description
+-- | -- | --
+complete | \- | \-
+fail | \- | \-
+go-back | \- | \-
+go-home | \- | `deprecated`
+success | \- | \-
+
+### Navbar Slots
+
+name | Description
+-- | --
+capsule | \-
+left | \-
+title | page title
+
+### Navbar External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-capsule | \-
+t-class-center | \-
+t-class-home-icon | \-
+t-class-left | \-
+t-class-left-icon | \-
+t-class-nav-btn | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-navbar-padding-top | 20px | - 
+--td-navbar-right | 95px | - 
+--td-navbar-background | @navbar-bg-color | - 
+--td-navbar-bg-color | @bg-color-container | - 
+--td-navbar-capsule-border-color | @border-level-1-color | - 
+--td-navbar-capsule-border-radius | 16px | - 
+--td-navbar-capsule-height | 32px | - 
+--td-navbar-capsule-width | 88px | - 
+--td-navbar-center-left | @navbar-right | - 
+--td-navbar-center-width | 187px | - 
+--td-navbar-color | @text-color-primary | - 
+--td-navbar-height | 48px | - 
+--td-navbar-left-arrow-size | 24px | - 
+--td-navbar-left-max-width | --td-navbar-left-max-width | - 
+--td-navbar-title-font-size | 18px | - 
+--td-navbar-title-font-weight | 600 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/navbar/README.md b/packages/tdesign-uniapp/components/navbar/README.md
new file mode 100644
index 000000000..b744aba24
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/README.md
@@ -0,0 +1,118 @@
+---
+title: Navbar 导航栏
+description: 用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+```
+
+
+### 基础导航栏
+
+{{ base }}
+
+### 胶囊样式导航栏
+
+{{ back-home }}
+
+### 带搜索导航栏
+
+{{ search }}
+
+### 带图片导航栏
+
+{{ img }}
+
+### 组件样式
+
+{{ left-title }}
+
+### 自定义颜色
+
+{{ custom-color }}
+
+### FAQ
+
+#### 高度说明
+
+`navbar` 组件可由 `--td-navbar-height` 控制。在 H5 或 APP-PLUS 平台下，`--td-navbar-height` 变量需要业务自己设置，小程序平台则会根据 `statusBarHeight` 等变量计算得到。
+
+## API
+
+### Navbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | Boolean | true | 是否添加动画效果 | N
+background | String | - | 已废弃。背景 | N
+delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack | N
+fixed | Boolean | true | 是否固定在顶部 | N
+home-icon | String | - | 已废弃。首页图标地址。值为 '' 或者 undefined 则表示不显示返回图标，值为 'circle' 表示显示默认图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
+left-arrow | Boolean | false | 是否展示左侧箭头 | N
+left-icon | String | - | 已废弃。左侧图标地址，值为 '' 或者 undefined 则表示不显示返回图标，值为 'arrow-left' 表示显示返回图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址 | N
+safe-area-inset-top | Boolean | true | 是否开启顶部安全区适配 | N
+title | String | - | 页面标题 | N
+title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
+visible | Boolean | true | 是否显示 | N
+
+### Navbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | navigateBack 执行完成后触发（失败或成功均会触发）
+fail | \- | navigateBack 执行失败后触发
+go-back | \- | 点击左侧箭头时触发
+go-home | \- | 已废弃。点击 Home 触发
+success | \- | navigateBack 执行成功后触发
+
+### Navbar Slots
+
+名称 | 描述
+-- | --
+capsule | 左侧胶囊区域
+left | 左侧内容区域
+title | 自定义 `title` 显示内容
+
+### Navbar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-capsule | 左侧胶囊区域样式类
+t-class-center | 中间内容样式类
+t-class-home-icon | 首页图标样式类
+t-class-left | 左侧内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-nav-btn | 导航按钮样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-navbar-padding-top | 20px | - |
+| --td-navbar-right | 95px | - |
+| --td-navbar-background | @navbar-bg-color | - |
+| --td-navbar-bg-color | @bg-color-container | - |
+| --td-navbar-capsule-border-color | @border-level-1-color | - |
+| --td-navbar-capsule-border-radius | 16px | - |
+| --td-navbar-capsule-height | 32px | - |
+| --td-navbar-capsule-width | 88px | - |
+| --td-navbar-center-left | @navbar-right | - |
+| --td-navbar-center-width | 187px | - |
+| --td-navbar-color | @text-color-primary | - |
+| --td-navbar-height | 48px | - |
+| --td-navbar-left-arrow-size | 24px | - |
+| --td-navbar-left-max-width | --td-navbar-left-max-width | - |
+| --td-navbar-title-font-size | 18px | - |
+| --td-navbar-title-font-weight | 600 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/navbar/_example/back-home/index.vue b/packages/tdesign-uniapp/components/navbar/_example/back-home/index.vue
new file mode 100644
index 000000000..142953d9a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/back-home/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <view>
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+      title="标题文字"
+    >
+      <template
+        #capsule
+      >
+        <view
+          class="custom-capsule"
+        >
+          <t-icon
+            size="40rpx"
+            aria-role="button"
+            aria-label="返回"
+            name="chevron-left"
+            :t-class="getIconTClass('back')"
+            :class="getIconClass('back')"
+            @click="onBack"
+          />
+          <t-icon
+            size="40rpx"
+            aria-role="button"
+            aria-label="首页"
+            name="home"
+            :t-class="getIconTClass('home')"
+            :class="getIconClass('home')"
+            @click="onGoHome"
+          />
+        </view>
+      </template>
+    </t-navbar>
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tNavbar,
+    tIcon,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onBack() {
+      uni.navigateBack();
+    },
+    onGoHome() {
+      uni.reLaunch({
+        url: '/pages/home/home',
+      });
+    },
+    getIconTClass(name) {
+      return canUseVirtualHost() ? this.getIconRealClass(name) : '';
+    },
+    getIconClass(name) {
+      return !canUseVirtualHost() ? this.getIconRealClass(name) : '';
+    },
+    getIconRealClass(name) {
+      return `custom-capsule__icon ${name}`;
+    },
+  },
+};
+</script>
+<style scoped>
+.custom-capsule {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+:deep(.custom-capsule__icon) {
+    flex: 1;
+    position: relative;
+}
+
+:deep(.custom-capsule__icon.home:before) {
+    content: '';
+    display: block;
+    position: absolute;
+    left: -1px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 18px;
+    background: #e7e7e7;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/base/index.vue b/packages/tdesign-uniapp/components/navbar/_example/base/index.vue
new file mode 100644
index 000000000..969a8b9cb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/base/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <view>
+    <view class="block">
+      <t-navbar
+        t-class-placeholder="t-navbar-placeholder"
+        t-class-content="t-navbar-content"
+        title="标题文字"
+        t-class-title="nav-title"
+      />
+    </view>
+
+    <view class="block">
+      <t-navbar
+        t-class-placeholder="t-navbar-placeholder"
+        t-class-content="t-navbar-content"
+        class="block"
+        title="标题文字"
+        left-arrow
+        @go-back="handleBack"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+export default {
+  components: {
+    tNavbar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleBack() {
+      console.log('go back');
+    },
+  },
+};
+</script>
+<style scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/custom-color/index.vue b/packages/tdesign-uniapp/components/navbar/_example/custom-color/index.vue
new file mode 100644
index 000000000..2e2f89a24
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/custom-color/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+      class="custom-navbar"
+      left-arrow
+      title="标题文字"
+    />
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+export default {
+  components: {
+    tNavbar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.custom-navbar {
+    --td-navbar-color: #fff;
+    --td-navbar-bg-color: #0052d9;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/img/index.vue b/packages/tdesign-uniapp/components/navbar/_example/img/index.vue
new file mode 100644
index 000000000..5d21f62ad
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/img/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+    >
+      <template #left>
+        <view>
+          <t-image
+            t-class="custom-image"
+            :src="theme === 'dark' ? 'https://tdesign.gtimg.com/mobile/demos/image-dark.png' : 'https://tdesign.gtimg.com/mobile/demos/logo-light.png'"
+            aria-label="导航栏图片"
+            custom-style="width: 87px;height: 24px;"
+          />
+        </view>
+      </template>
+    </t-navbar>
+  </view>
+</template>
+
+<script lang="ts">
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+import { themeMixin } from 'tdesign-uniapp/mixins/theme-change';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tNavbar,
+    tImage,
+  },
+  mixins: [themeMixin],
+  data() {
+    return {};
+  },
+  computed: {
+  },
+};
+</script>
+<style scoped>
+/* :deep(.custom-image) {
+    height: 24px;
+    width: 87px;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/left-title/index.vue b/packages/tdesign-uniapp/components/navbar/_example/left-title/index.vue
new file mode 100644
index 000000000..13936db74
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/left-title/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <view>
+    <view class="block">
+      <t-navbar
+        t-class-placeholder="t-navbar-placeholder"
+        t-class-content="t-navbar-content"
+        left-arrow
+        title="标题居中"
+      />
+    </view>
+
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+      left-arrow
+    >
+      <template
+        #left
+      >
+        <view
+          class="custom-title"
+        >
+          标题左对齐
+        </view>
+      </template>
+    </t-navbar>
+
+    <view class="demo-desc">
+      标题尺寸
+    </view>
+
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+      left-arrow
+    >
+      <template
+        #left
+      >
+        <text
+          class="left-text"
+          @click="onBack"
+        >
+          返回
+        </text>
+      </template>
+    </t-navbar>
+    <view class="header-title">
+      大标题尺寸
+    </view>
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+export default {
+  components: {
+    tNavbar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onBack() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+<style scoped>
+.custom-title {
+    margin-left: 8px;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.block {
+    display: block;
+    margin-bottom: 48rpx;
+}
+
+.demo-desc {
+    margin-top: 48rpx;
+    margin-bottom: 32rpx;
+}
+
+.left-text {
+    display: block;
+    margin-left: 4px;
+    font-size: 16px;
+}
+
+.header-title {
+    font-size: 28px;
+    line-height: 36px;
+    padding: 8rpx 32rpx 16rpx;
+    background-color: var(--td-bg-color-container);
+    font-weight: 600;
+    color: var(--td-text-color-primary);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/navbar.less b/packages/tdesign-uniapp/components/navbar/_example/navbar.less
new file mode 100644
index 000000000..90c1c428f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/navbar.less
@@ -0,0 +1,22 @@
+.demo :deep(.t-navbar--fixed .t-navbar__content) {
+    position: relative !important;
+    padding-top: 0 !important;
+    z-index: 5000 !important;
+}
+
+.demo :deep(.t-navbar__placeholder) {
+    display: none !important;
+}
+
+.block {
+    display: block;
+}
+
+:deep(.block + .block) {
+    margin-top: 48rpx;
+}
+
+.demo {
+    --td-navbar-bg-color: var(--td-bg-color-container);
+    --td-navbar-color: var(--text-color-primary);
+}
diff --git a/packages/tdesign-uniapp/components/navbar/_example/navbar.vue b/packages/tdesign-uniapp/components/navbar/_example/navbar.vue
new file mode 100644
index 000000000..d26c2087d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/navbar.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="NavBar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="NavBar 导航栏"
+        desc="用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础小程序导航栏"
+      >
+        <BaseDemo class="block" />
+        <back-home class="block" />
+      </t-demo>
+      <t-demo desc="带搜索的导航栏">
+        <search />
+      </t-demo>
+      <t-demo desc="带图片的导航栏">
+        <imgDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="标题对齐"
+      >
+        <left-title />
+      </t-demo>
+      <t-demo desc="自定义颜色">
+        <custom-color />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import search from './search/index.vue';
+import backHome from './back-home/index.vue';
+import imgDemo from './img/index.vue';
+import leftTitle from './left-title/index.vue';
+import customColor from './custom-color/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    search,
+    backHome,
+    imgDemo,
+    leftTitle,
+    customColor,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './navbar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/search/index.vue b/packages/tdesign-uniapp/components/navbar/_example/search/index.vue
new file mode 100644
index 000000000..7dc2bbb66
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/search/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-navbar
+      t-class-placeholder="t-navbar-placeholder"
+      t-class-content="t-navbar-content"
+      left-icon="slot"
+    >
+      <template
+        #left
+      >
+        <view
+          class="search-box"
+        >
+          <t-search
+            shape="round"
+            placeholder="搜索内容"
+          />
+        </view>
+      </template>
+    </t-navbar>
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tNavbar,
+    tSearch,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.search-box {
+    --td-search-height: 32px;
+    width: 252px;
+}
+
+page {
+    --td-search-font-size: 18px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.less b/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.less
new file mode 100644
index 000000000..5f2633708
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.less
@@ -0,0 +1,21 @@
+.t-navbar-content {
+    position: relative !important;
+    padding-top: 0 !important;
+}
+
+.t-navbar-placeholder {
+    display: none !important;
+}
+
+.base {
+    display: block;
+}
+
+.base .block {
+    margin: 48rpx 0;
+}
+
+.demo {
+    --td-navbar-bg-color: var(--td-bg-color-container);
+    --td-navbar-color: var(--text-color-primary);
+}
diff --git a/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.vue b/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.vue
new file mode 100644
index 000000000..8409f8302
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/_example/skyline/navbar.vue
@@ -0,0 +1,79 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="NavBar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          NavBar 导航栏
+        </view>
+        <view class="demo-desc">
+          用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础小程序导航栏"
+        >
+          <view class="base">
+            <baseDemo />
+          </view>
+          <view class="base">
+            <back-home />
+          </view>
+        </t-demo>
+        <t-demo desc="带搜索的导航栏">
+          <search />
+        </t-demo>
+        <t-demo desc="带图片的导航栏">
+          <imgDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件样式"
+          desc="标题对齐"
+        >
+          <left-title />
+        </t-demo>
+        <t-demo desc="自定义颜色">
+          <custom-color />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import search from '../search/index.vue';
+import backHome from '../back-home/index.vue';
+import imgDemo from '../img/index.vue';
+import leftTitle from '../left-title/index.vue';
+import customColor from '../custom-color/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    search,
+    backHome,
+    imgDemo,
+    leftTitle,
+    customColor,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './navbar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/navbar.less b/packages/tdesign-uniapp/components/navbar/navbar.less
new file mode 100644
index 000000000..10bcc9fc7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/navbar.less
@@ -0,0 +1,156 @@
+// @import (css) '../common/index.wxss';
+@import '../common/style/base.less';
+
+@navbar-color: var(--td-navbar-color, @text-color-primary);
+@navbar-bg-color: var(--td-navbar-bg-color, @bg-color-container);
+@navbar-background: var(--td-navbar-background, @navbar-bg-color);
+@navbar-height: var(--td-navbar-height, 48px);
+@navbar-right: var(
+  --td-navbar-right,
+  95px
+); // 默认右上角胶囊按钮宽度，组件会在初始化时尝试自动获取胶囊按钮宽度并覆写该值
+@navbar-padding-top: var(
+  --td-navbar-padding-top,
+  20px
+); // 导航栏顶部间距，组件会在初始化时尝试取右侧系统胶囊位置进行覆盖
+@navbar-title-font-size: var(--td-navbar-title-font-size, 18px);
+@navbar-title-font-weight: var(--td-navbar-title-font-weight, 600);
+@navbar-left-arrow-size: var(--td-navbar-left-arrow-size, 24px);
+
+// capsule
+@navbar-capsule-border-color: var(--td-navbar-capsule-border-color, @border-level-1-color);
+@navbar-capsule-border-radius: var(--td-navbar-capsule-border-radius, 16px);
+@navbar-capsule-width: var(--td-navbar-capsule-width, 88px);
+@navbar-capsule-height: var(--td-navbar-capsule-height, 32px);
+
+.@{prefix}-navbar {
+  &--fixed {
+    .@{prefix}-navbar__content {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 5001;
+    }
+  }
+
+  &--visible {
+    display: '';
+  }
+
+  &--visible-animation {
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  &--hide-animation {
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  &--hide {
+    display: none;
+  }
+
+  &__placeholder {
+    height: @navbar-height;
+    padding-top: @navbar-padding-top;
+    position: relative;
+    visibility: hidden;
+    box-sizing: content-box;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    height: @navbar-height;
+    width: calc(100% - @navbar-right);
+    padding-right: @navbar-right;
+    padding-top: @navbar-padding-top;
+    color: @navbar-color;
+    background: @navbar-background;
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+  }
+
+  &__left {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--td-navbar-left-max-width);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    margin-left: @spacer-1;
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    :deep(&-arrow) {
+      font-size: @navbar-left-arrow-size;
+    }
+
+    &--hide {
+      opacity: 0;
+    }
+  }
+
+  &__capsule {
+    box-sizing: border-box;
+    width: @navbar-capsule-width;
+    height: @navbar-capsule-height;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 200%;
+      height: 200%;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      box-sizing: border-box;
+      border-radius: calc(@navbar-capsule-border-radius * 2);
+      border: 2rpx solid @navbar-capsule-border-color;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__center {
+    font-size: 18px;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: var(--td-navbar-center-left, @navbar-right);
+    width: var(--td-navbar-center-width, 187px); // 默认值取 Iphone6/7/8 屏幕计算的值
+    height: @navbar-height;
+    line-height: @navbar-height;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &:empty {
+      display: none;
+    }
+
+    &-title {
+      font-size: @navbar-title-font-size;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      font-weight: @navbar-title-font-weight;
+    }
+
+    &--hide {
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/navbar/navbar.vue b/packages/tdesign-uniapp/components/navbar/navbar.vue
new file mode 100644
index 000000000..d8bdd181e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/navbar.vue
@@ -0,0 +1,277 @@
+<template>
+  <view
+    :class="_.cls(classPrefix, [['fixed', fixed]]) + ' ' + visibleClass + ' ' + tClass"
+    :style="_._style([boxStyle, customStyle])"
+  >
+    <view
+      v-if="fixed"
+      :class="classPrefix + '__placeholder ' + tClassPlaceholder"
+    />
+    <view :class="classPrefix + '__content ' + tClassContent">
+      <view :class="classPrefix + '__left ' + (hideLeft ? classPrefix + '__left--hide' : '') + ' ' + tClassLeft">
+        <view
+          v-if="leftArrow"
+          :class="classPrefix + '__btn'"
+          aria-role="button"
+          aria-label="返回"
+          @click="goBack"
+        >
+          <t-icon
+            name="chevron-left"
+            :custom-style="leftArrowCustomStyle"
+            :t-class="classPrefix + '__left-arrow'"
+          />
+        </view>
+        <slot name="left" />
+        <view :class="classPrefix + '__capsule ' + tClassCapsule">
+          <slot name="capsule" />
+        </view>
+      </view>
+      <view :class="classPrefix + '__center ' + (hideCenter ? classPrefix + '__center--hide' : '') + ' ' + tClassCenter">
+        <slot name="title" />
+        <text
+          v-if="title"
+          :class="classPrefix + '__center-title ' + tClassTitle"
+        >
+          {{ showTitle }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { getRect, systemInfo } from '../common/utils';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-navbar`;
+
+const BASE_MENU_RECT = {
+  width: 87,
+  height: 32,
+  top: 24,
+  right: systemInfo.windowWidth - 10,
+};
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-placeholder`,
+    `${prefix}-class-content`,
+    `${prefix}-class-title`,
+    `${prefix}-class-left`,
+    `${prefix}-class-center`,
+    `${prefix}-class-left-icon`,
+    `${prefix}-class-home-icon`,
+    `${prefix}-class-capsule`,
+    `${prefix}-class-nav-btn`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'fail',
+    'complete',
+    'success',
+    'go-back',
+  ],
+  data() {
+    return {
+      timer: null,
+      prefix,
+      classPrefix: name,
+      boxStyle: '',
+      showTitle: '',
+      hideLeft: false,
+      hideCenter: false,
+      _menuRect: null,
+      _leftRect: null,
+      _boxStyle: {},
+      _,
+
+      visibleClass: '',
+
+    };
+  },
+  computed: {
+    leftArrowCustomStyle() {
+      return 'font-size: var(--td-navbar-left-arrow-size, 24px);';
+    },
+  },
+  watch: {
+    visible(visible) {
+      const { animation } = this;
+      const visibleClass = `${name}${visible ? '--visible' : '--hide'}`;
+      this.visibleClass = `${visibleClass}${animation ? '-animation' : ''}`;
+
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      if (animation) {
+        this.timer = setTimeout(() => {
+          this.visibleClass = visibleClass;
+        }, 300);
+      }
+    },
+
+    title: 'onWatchTitle',
+    titleMaxLength: 'onWatchTitle',
+  },
+
+  mounted() {
+    this.onWatchTitle();
+    this.initStyle();
+    this.getLeftRect();
+    this.onMenuButtonBoundingClientRectWeightChange();
+  },
+
+  beforeUnMount() {
+    this.offMenuButtonBoundingClientRectWeightChange();
+  },
+  methods: {
+    initStyle() {
+      this.getMenuRect();
+
+      const { _menuRect, _leftRect } = this;
+
+      if (!_menuRect || !_leftRect || !systemInfo) return;
+
+      const _boxStyle = {
+        '--td-navbar-padding-top': `${systemInfo.statusBarHeight}px`,
+        '--td-navbar-right': `${systemInfo.windowWidth - _menuRect.left}px`, // 导航栏右侧小程序胶囊按钮宽度
+        '--td-navbar-left-max-width': `${_menuRect.left}px`, // 左侧内容最大宽度
+        '--td-navbar-capsule-height': `${_menuRect.height}px`, // 胶囊高度
+        '--td-navbar-capsule-width': `${_menuRect.width}px`, // 胶囊宽度
+        '--td-navbar-height': `${(_menuRect.top - systemInfo.statusBarHeight) * 2 + _menuRect.height}px`,
+      };
+      // #ifdef H5 || APP-PLUS
+      delete _boxStyle['--td-navbar-height'];
+      // #endif
+
+      this.calcCenterStyle(_leftRect, _menuRect, _boxStyle);
+    },
+    onWatchTitle() {
+      const { title } = this;
+      const titleMaxLength = this.titleMaxLength || Number.MAX_SAFE_INTEGER;
+      let temp = title.slice(0, titleMaxLength);
+      if (titleMaxLength < title.length) temp += '...';
+
+      this.showTitle = temp;
+    },
+
+    calcCenterStyle(
+      leftRect,
+      menuRect,
+      defaultStyle,
+    ) {
+      const maxSpacing = Math.max(leftRect.right, systemInfo.windowWidth - menuRect.left);
+      const _boxStyle = {
+        ...defaultStyle,
+        '--td-navbar-center-left': `${maxSpacing}px`, // 标题左侧距离
+        '--td-navbar-center-width': `${Math.max(menuRect.left - maxSpacing, 0)}px`, // 标题宽度
+      };
+
+      const boxStyle = Object.entries(_boxStyle)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('; ');
+
+      this.boxStyle = boxStyle;
+      this._boxStyle = _boxStyle;
+    },
+
+    getLeftRect() {
+      getRect(this, `.${name}__left`).then((res) => {
+        if (res.right > this._leftRect.right) {
+          this.calcCenterStyle(res, this._menuRect, this._boxStyle);
+        }
+      });
+    },
+
+    getMenuRect() {
+      // 场景值为1177（视频号直播间）和1175 （视频号profile页）时，小程序禁用了 uni.getMenuButtonBoundingClientRect
+      let rect = {
+        ...BASE_MENU_RECT,
+        bottom: BASE_MENU_RECT.top + BASE_MENU_RECT.height,
+        left: BASE_MENU_RECT.right - BASE_MENU_RECT.width,
+      };
+      if (uni.getMenuButtonBoundingClientRect) {
+        rect = uni.getMenuButtonBoundingClientRect();
+      }
+
+      this._menuRect = rect;
+      this._leftRect = {
+        right: systemInfo.windowWidth - rect.left,
+      };
+    },
+
+    onMenuButtonBoundingClientRectWeightChange() {
+      if (uni.onMenuButtonBoundingClientRectWeightChange) {
+        this.onMenuButtonBoundingClientRectWeightChangeCallback = res => this.queryElements(res);
+
+        uni.onMenuButtonBoundingClientRectWeightChange(this.onMenuButtonBoundingClientRectWeightChangeCallback);
+      }
+    },
+
+    offMenuButtonBoundingClientRectWeightChange() {
+      if (this.onMenuButtonBoundingClientRectWeightChangeCallback) {
+        uni.offMenuButtonBoundingClientRectWeightChange(this.onMenuButtonBoundingClientRectWeightChangeCallback);
+      }
+    },
+
+    /**
+     * 比较胶囊条和navbar内容，决定是否隐藏
+     * @param capsuleRect API返回值，胶囊条的位置信息
+     */
+    queryElements(capsuleRect) {
+      Promise.all([
+        getRect(this, `.${this.classPrefix}__left`),
+        getRect(this, `.${this.classPrefix}__center`),
+      ]).then(([leftRect, centerRect]) => {
+        // 部分安卓机型中（目前仅在Magic6/7中复现），仍存在精度问题，暂使用 Math.round() 取整规避
+        const leftRight = Math.round(leftRect.right);
+        const centerRight = Math.round(centerRect.right);
+        const capsuleLeft = capsuleRect.left;
+
+        this.hideLeft = leftRight > capsuleLeft;
+        this.hideCenter = leftRight > capsuleLeft ? true : centerRight > capsuleLeft;
+      });
+    },
+
+    goBack() {
+      const { delta } = this;
+      // eslint-disable-next-line
+      const that = this;
+      this.$emit('go-back');
+      if (delta > 0) {
+        uni.navigateBack({
+          delta,
+          fail(e) {
+            that.$emit('fail', e);
+          },
+          complete(e) {
+            that.$emit('complete', e);
+          },
+          success(e) {
+            that.$emit('success', e);
+          },
+        });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './navbar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/navbar/props.ts b/packages/tdesign-uniapp/components/navbar/props.ts
new file mode 100644
index 000000000..b31179451
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/props.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 是否添加动画效果 */
+  animation: {
+    type: Boolean,
+    default: true,
+  },
+  /** 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack */
+  delta: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否固定在顶部 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否展示左侧箭头 */
+  leftArrow: Boolean,
+  /** 是否开启顶部安全区适配 */
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 页面标题 */
+  title: {
+    type: String,
+  },
+  /** 标题文字最大长度，超出的范围使用 `...` 表示 */
+  titleMaxLength: {
+    type: Number,
+  },
+  /** 是否显示 */
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+  /** navigateBack 执行完成后触发（失败或成功均会触发） */
+  onComplete: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** navigateBack 执行失败后触发 */
+  onFail: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击左侧箭头时触发 */
+  onGoBack: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** navigateBack 执行成功后触发 */
+  onSuccess: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/navbar/type.ts b/packages/tdesign-uniapp/components/navbar/type.ts
new file mode 100644
index 000000000..d9bf4d81b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/navbar/type.ts
@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdNavbarProps {
+  /**
+   * 是否添加动画效果
+   * @default true
+   */
+  animation?: boolean;
+  /**
+   * 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack
+   * @default 1
+   */
+  delta?: number;
+  /**
+   * 是否固定在顶部
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 是否展示左侧箭头
+   * @default false
+   */
+  leftArrow?: boolean;
+  /**
+   * 是否开启顶部安全区适配
+   * @default true
+   */
+  safeAreaInsetTop?: boolean;
+  /**
+   * 页面标题
+   */
+  title?: string;
+  /**
+   * 标题文字最大长度，超出的范围使用 `...` 表示
+   */
+  titleMaxLength?: number;
+  /**
+   * 是否显示
+   * @default true
+   */
+  visible?: boolean;
+  /**
+   * navigateBack 执行完成后触发（失败或成功均会触发）
+   */
+  onComplete?: () => void;
+  /**
+   * navigateBack 执行失败后触发
+   */
+  onFail?: () => void;
+  /**
+   * 点击左侧箭头时触发
+   */
+  onGoBack?: () => void;
+  /**
+   * navigateBack 执行成功后触发
+   */
+  onSuccess?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/notice-bar/README.en-US.md b/packages/tdesign-uniapp/components/notice-bar/README.en-US.md
new file mode 100644
index 000000000..357c0c803
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/README.en-US.md
@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+
+### NoticeBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | String / Array | - | \- | N
+direction | String | horizontal | options: horizontal/vertical | N
+interval | Number | 2000 | \- | N
+marquee | Boolean / Object | false | Typescript：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/notice-bar/type.ts) | N
+operation | String | - | \- | N
+prefix-icon | String / Boolean / Object | true | \- | N
+suffix-icon | String / Object | - | \- | N
+theme | String | info | options: info/success/warning/error | N
+visible | Boolean | false | `v-model:visible` is supported | N
+default-visible | Boolean | false | uncontrolled property | N
+
+### NoticeBar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { current: number, source: '' \| 'autoplay' \| 'touch' })` | \-
+click | `(context: { trigger: NoticeBarTrigger })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+### NoticeBar Slots
+
+name | Description
+-- | --
+content | \-
+operation | \-
+prefix-icon | \-
+suffix-icon | \-
+
+### NoticeBar External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-operation | \-
+t-class-prefix-icon | \-
+t-class-suffix-icon | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color | - 
+--td-notice-bar-font-color | @text-color-primary | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @text-color-placeholder | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/notice-bar/README.md b/packages/tdesign-uniapp/components/notice-bar/README.md
new file mode 100644
index 000000000..8c4a08554
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/README.md
@@ -0,0 +1,116 @@
+---
+title: NoticeBar 公告栏
+description: 在导航栏下方，用于给用户显示提示消息。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+```
+
+### 01 组件类型
+
+纯文字的公告栏
+
+{{ base }}
+
+带图标的公告栏
+
+{{ iconDemo }}
+
+带关闭的公告栏
+
+{{ suffixIcon }}
+
+带入口的公告栏
+
+{{ event }}
+
+自定义样式的公告栏
+
+{{ custom }}
+
+自定义内容的公告栏
+
+{{ customization }}
+
+### 02 组件状态
+
+公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
+
+{{ theme }}
+
+### 03 可滚动公告栏
+
+可滚动公告栏有水平（horizontal）和垂直（vertical）
+
+{{ scrolling }}
+
+
+## API
+
+### NoticeBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | String / Array | - | 文本内容 | N
+direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
+interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】 | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/notice-bar/type.ts) | N
+operation | String | - | 右侧额外信息 | N
+prefix-icon | String / Boolean / Object | true | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 | N
+suffix-icon | String / Object | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标 | N
+theme | String | info | 内置主题。可选项：info/success/warning/error | N
+visible | Boolean | false | 显示/隐藏。支持语法糖 `v-model:visible` | N
+default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
+
+### NoticeBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { current: number, source: '' \| 'autoplay' \| 'touch' })` | 当 `direction="vertical"` 时轮播切换时触发
+click | `(context: { trigger: NoticeBarTrigger })` | 点击事件。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+### NoticeBar Slots
+
+名称 | 描述
+-- | --
+content | 文本内容
+operation | 自定义 `operation` 显示内容
+prefix-icon | 前缀图标
+suffix-icon | 后缀图标
+
+### NoticeBar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-operation | 右侧额外信息样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-suffix-icon | 后置图标样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-notice-bar-error-bg-color | @error-color-1 | - |
+| --td-notice-bar-error-color | @error-color | - |
+| --td-notice-bar-font-color | @text-color-primary | - |
+| --td-notice-bar-info-bg-color | @brand-color-light | - |
+| --td-notice-bar-info-color | @brand-color | - |
+| --td-notice-bar-operation-font-color | @brand-color | - |
+| --td-notice-bar-success-bg-color | @success-color-1 | - |
+| --td-notice-bar-success-color | @success-color | - |
+| --td-notice-bar-suffix-icon-color | @text-color-placeholder | - |
+| --td-notice-bar-warning-bg-color | @warning-color-1 | - |
+| --td-notice-bar-warning-color | @warning-color | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/base/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/base/index.vue
new file mode 100644
index 000000000..c85805ced
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/base/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="true"
+      :prefix-icon="false"
+    >
+      <template #content>
+        这是一条普通的通知信息
+      </template>
+    </t-notice-bar>
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+export default {
+  components: {
+    tNoticeBar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/custom/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/custom/index.vue
new file mode 100644
index 000000000..ec52bcc9f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/custom/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="true"
+      prefix-icon="sound"
+      suffix-icon="chevron-right"
+      content="提示文字描述提示文字描述提示文字描述"
+      t-class="external-class"
+      t-class-prefix-icon="external-class-prefix-icon"
+    />
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tNoticeBar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+ :deep(.external-class) {
+    opacity: 1;
+    background: var(--td-bg-color-secondarycontainer, #f3f3f3);
+}
+
+ :deep(.external-class-prefix-icon) {
+    color: var(--td-text-color-primary);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/customization/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/customization/index.vue
new file mode 100644
index 000000000..3d5bf713d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/customization/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <view>
+    <!-- slot实现自定义content内容 -->
+    <t-notice-bar :visible="true">
+      <template
+        #content
+      >
+        <view
+          class="inline"
+        >
+          提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
+        </view>
+      </template>
+      <template
+        #operation
+      >
+        <t-link
+          content="详情"
+          theme="primary"
+          :underline="false"
+          :navigator-props="navigatorProps"
+        />
+      </template>
+      <template
+        #suffix-icon
+      >
+        <t-icon
+          name="close"
+          size="44rpx"
+        />
+      </template>
+    </t-notice-bar>
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+import tLink from 'tdesign-uniapp/link/link.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tNoticeBar,
+    tLink,
+    tIcon,
+  },
+  data() {
+    return {
+      navigatorProps: {
+        url: '/pages/home/home',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.inline {
+    display: inline;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/event/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/event/index.vue
new file mode 100644
index 000000000..b79b224c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/event/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="visible"
+      suffix-icon="chevron-right"
+      @click="click"
+    >
+      <template
+        #content
+      >
+        <view
+          class="inline"
+        >
+          这是一条普通的通知信息
+        </view>
+      </template>
+      <template
+        #operation
+      >
+        <t-link
+          content="详情"
+          theme="primary"
+          :underline="false"
+          :navigator-props="navigatorProps"
+        />
+      </template>
+    </t-notice-bar>
+
+    <t-notice-bar
+      :visible="visible"
+      suffix-icon="chevron-right"
+      content="这是一条普通的通知信息"
+      @click="click"
+    />
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+import tLink from 'tdesign-uniapp/link/link.vue';
+export default {
+  components: {
+    tNoticeBar,
+    tLink,
+  },
+  data() {
+    return {
+      visible: true,
+      navigatorProps: {
+        url: '/pages/home/home',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    click(e) {
+      const { trigger } = e;
+      console.log(`click on the ${trigger} area`);
+    },
+  },
+};
+</script>
+<style>
+.inline {
+    display: inline;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/iconDemo/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/iconDemo/index.vue
new file mode 100644
index 000000000..9c2d9f04b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/iconDemo/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="visible"
+      :prefix-icon="false"
+      content="提示文字描述提示文字描述提示文字描述"
+    >
+      <template
+        #prefix-icon
+      >
+        <view>
+          <t-icon name="error-circle-filled" />
+        </view>
+      </template>
+    </t-notice-bar>
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  components: {
+    tNoticeBar,
+    tIcon,
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.less b/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.less
new file mode 100644
index 000000000..005382b4e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+:deep(.t-notice-bar) {
+    margin-bottom: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.vue b/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.vue
new file mode 100644
index 000000000..09ad3d1bb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/notice-bar.vue
@@ -0,0 +1,86 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="NoticeBar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="NoticeBar 公告栏"
+        desc="在导航栏下方，用于给用户显示提示消息。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="纯文字的公告栏"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="带图标的公告栏">
+        <iconDemo />
+      </t-demo>
+      <t-demo desc="带关闭的公告栏">
+        <suffixIcon />
+      </t-demo>
+      <t-demo desc="带入口的公告栏">
+        <event />
+      </t-demo>
+      <t-demo desc="自定义样式的公告栏">
+        <custom />
+      </t-demo>
+      <t-demo desc="自定义内容的公告栏">
+        <customization />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）"
+      >
+        <theme />
+      </t-demo>
+
+      <t-demo
+        title="03 可滚动公告栏"
+        desc="可滚动公告栏有水平（horizontal）和垂直（vertical）"
+      >
+        <scrolling />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+// import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+import BaseDemo from './base/index.vue';
+import iconDemo from './iconDemo/index.vue';
+import suffixIcon from './suffixIcon/index.vue';
+import event from './event/index.vue';
+import custom from './custom/index.vue';
+import theme from './theme/index.vue';
+import scrolling from './scrolling/index.vue';
+import customization from './customization/index.vue';
+export default {
+  components: {
+    // tNoticeBar,
+    BaseDemo,
+    iconDemo,
+    suffixIcon,
+    event,
+    custom,
+    theme,
+    scrolling,
+    customization,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './notice-bar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/scrolling/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/scrolling/index.vue
new file mode 100644
index 000000000..4760a50f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/scrolling/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="visible"
+      :prefix-icon="false"
+      :marquee="marquee1"
+      content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+    />
+
+    <t-notice-bar
+      :visible="visible"
+      :marquee="marquee2"
+      content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+    />
+
+    <t-notice-bar
+      :visible="true"
+      direction="vertical"
+      :interval="3000"
+      :content="content"
+      prefix-icon="sound"
+      @click="click"
+    />
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+export default {
+  components: {
+    tNoticeBar,
+  },
+  data() {
+    return {
+      visible: true,
+      marquee1: {
+        speed: 80,
+        loop: -1,
+        delay: 0,
+      },
+      marquee2: {
+        speed: 60,
+        loop: -1,
+        delay: 0,
+      },
+      content: ['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月'],
+    };
+  },
+  created() {},
+  methods: {
+    click() {
+      console.log('占位：函数 click 未声明');
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/suffixIcon/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/suffixIcon/index.vue
new file mode 100644
index 000000000..bb19a0e9b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/suffixIcon/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="visible"
+      suffix-icon="close"
+      content="这是一条普通的通知信息"
+      @click="click"
+    />
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+export default {
+  components: {
+    tNoticeBar,
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  created() {},
+  methods: {
+    click(e) {
+      const { trigger } = e;
+      console.log(`click on the ${trigger} area`);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/_example/theme/index.vue b/packages/tdesign-uniapp/components/notice-bar/_example/theme/index.vue
new file mode 100644
index 000000000..c4281f83b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/_example/theme/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <view>
+    <t-notice-bar
+      :visible="true"
+      content="默认状态公告栏默认状态公告栏"
+    />
+    <t-notice-bar
+      :visible="true"
+      theme="success"
+      content="成功状态公告栏成功状态公告栏"
+    />
+    <t-notice-bar
+      :visible="true"
+      theme="warning"
+      content="警示状态公告栏警示状态公告栏"
+    />
+    <t-notice-bar
+      :visible="true"
+      theme="error"
+      content="错误状态公告栏错误状态公告栏"
+    />
+  </view>
+</template>
+
+<script>
+import tNoticeBar from 'tdesign-uniapp/notice-bar/notice-bar.vue';
+export default {
+  components: {
+    tNoticeBar,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/notice-bar.less b/packages/tdesign-uniapp/components/notice-bar/notice-bar.less
new file mode 100644
index 000000000..ffca05493
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/notice-bar.less
@@ -0,0 +1,115 @@
+@import '../common/style/base.less';
+
+@notice-bar-font-size: @font-size-base;
+@notice-bar-horizontal-padding: 32rpx;
+@notice-bar-vertical-padding: 26rpx;
+@notice-bar-line-height: 44rpx;
+@notice-bar-icon-font-size: 44rpx;
+
+@notice-bar-font-color: var(--td-notice-bar-font-color, @text-color-primary); // 公告栏文本颜色
+@notice-bar-info-color: var(--td-notice-bar-info-color, @brand-color); // 'info' 主题色
+@notice-bar-info-bg-color: var(--td-notice-bar-info-bg-color, @brand-color-light); // 'info' 主题背景色
+@notice-bar-success-color: var(--td-notice-bar-success-color, @success-color); // 'success' 主题色
+@notice-bar-success-bg-color: var(--td-notice-bar-success-bg-color, @success-color-1); // 'success' 主题背景色
+@notice-bar-warning-color: var(--td-notice-bar-warning-color, @warning-color); // 'warning' 主题色
+@notice-bar-warning-bg-color: var(--td-notice-bar-warning-bg-color, @warning-color-1); // 'warning' 主题背景色
+@notice-bar-error-color: var(--td-notice-bar-error-color, @error-color); // 'error' 主题色
+@notice-bar-error-bg-color: var(--td-notice-bar-error-bg-color, @error-color-1); // 'error' 主题背景色
+@notice-bar-suffix-icon-color: var(--td-notice-bar-suffix-icon-color, @text-color-placeholder); // 后缀图标颜色
+@notice-bar-operation-font-color: var(--td-notice-bar-operation-font-color, @brand-color); // 额外信息文本颜色
+
+@notice-bar: ~'@{prefix}-notice-bar';
+
+.@{notice-bar} {
+  display: flex;
+  align-items: flex-start;
+  padding: @notice-bar-vertical-padding @notice-bar-horizontal-padding;
+  font-size: @notice-bar-font-size;
+
+  &__content-wrap {
+    flex: 1;
+    overflow-x: hidden;
+    line-height: @notice-bar-line-height;
+    color: @notice-bar-font-color;
+  }
+
+  &__content {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  &__content-wrapable {
+    white-space: normal;
+  }
+
+  &__content--vertical {
+    display: block;
+    height: @notice-bar-line-height;
+    line-height: @notice-bar-line-height;
+
+    &-item {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__prefix-icon {
+    color: inherit;
+  }
+
+  &__prefix-icon:not(:empty) {
+    padding-right: @spacer;
+    width: @notice-bar-icon-font-size;
+  }
+
+  &__suffix-icon {
+    color: @notice-bar-suffix-icon-color;
+  }
+
+  &__prefix-icon,
+  &__suffix-icon {
+    font-size: @notice-bar-icon-font-size;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__operation {
+    display: inline-flex;
+    vertical-align: top;
+    color: @notice-bar-operation-font-color;
+    font-weight: 700;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__suffix-icon:not(:empty) {
+    padding-left: @spacer;
+    width: @notice-bar-icon-font-size;
+  }
+
+  // theme
+  &--info {
+    color: @notice-bar-info-color;
+    background-color: @notice-bar-info-bg-color;
+  }
+
+  &--success {
+    color: @notice-bar-success-color;
+    background-color: @notice-bar-success-bg-color;
+  }
+
+  &--warning {
+    color: @notice-bar-warning-color;
+    background-color: @notice-bar-warning-bg-color;
+  }
+
+  &--error {
+    color: @notice-bar-error-color;
+    background-color: @notice-bar-error-bg-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/notice-bar/notice-bar.vue b/packages/tdesign-uniapp/components/notice-bar/notice-bar.vue
new file mode 100644
index 000000000..7860e7d2a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/notice-bar.vue
@@ -0,0 +1,326 @@
+<template>
+  <view
+    v-if="visible"
+    :style="_._style([customStyle])"
+    :class="[
+      classPrefix + ' ' + classPrefix + '--' + theme,
+      tClass
+    ]"
+  >
+    <view
+      :class="classPrefix + '__prefix-icon'"
+      @click="clickPrefixIcon"
+    >
+      <slot name="prefix-icon" />
+      <block
+        v-if="_prefixIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_prefixIcon.style || ''"
+          :t-class="tClassPrefixIcon"
+          :prefix="_prefixIcon.prefix"
+          :name="_prefixIcon.name"
+          :size="_prefixIcon.size"
+          :color="_prefixIcon.color"
+          :aria-hidden="!!_prefixIcon.ariaHidden"
+          :aria-label="_prefixIcon.ariaLabel"
+          :aria-role="_prefixIcon.ariaRole"
+          @click="_prefixIcon.bindclick || ''"
+        />
+      </block>
+    </view>
+    <view
+      :class="classPrefix + '__content-wrap'"
+      @click="clickContent"
+    >
+      <view v-if="direction === 'vertical' && _.isArray(content)">
+        <swiper
+          :autoplay="true"
+          :vertical="true"
+          :circular="true"
+          :interval="interval"
+          display-multiple-items="1"
+          :class="classPrefix + '__content ' + classPrefix + '__content--vertical'"
+          @change="onChange"
+        >
+          <block
+            v-for="(item, index) in content"
+            :key="index"
+          >
+            <swiper-item>
+              <view :class="classPrefix + '__content--vertical-item'">
+                {{ item }}
+              </view>
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
+      <view
+        v-else
+        :class="classPrefix + '__content ' + tClassContent + ' ' + (!marquee ? classPrefix + '__content-wrapable' : '')"
+        :animation="animationData"
+      >
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+        <view
+          :class="classPrefix + '__operation ' + tClassOperation"
+          @click.stop.prevent="clickOperation"
+        >
+          <block v-if="operation">
+            {{ operation }}
+          </block>
+          <slot name="operation" />
+        </view>
+      </view>
+    </view>
+    <view
+      :class="classPrefix + '__suffix-icon'"
+      @click="clickSuffixIcon"
+    >
+      <slot name="suffix-icon" />
+      <block
+        v-if="_suffixIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_suffixIcon.style || ''"
+          :t-class="tClassSuffixIcon"
+          :prefix="_suffixIcon.prefix"
+          :name="_suffixIcon.name"
+          :size="_suffixIcon.size"
+          :color="_suffixIcon.color"
+          :aria-hidden="!!_suffixIcon.ariaHidden"
+          :aria-label="_suffixIcon.ariaLabel"
+          :aria-role="_suffixIcon.ariaRole"
+          @click="_suffixIcon.bindclick || ''"
+        />
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon.vue';
+import { uniComponent } from '../common/src/index';
+import { getRect, getAnimationFrame, calcIcon } from '../common/utils';
+import props from './props';
+import { prefix } from '../common/config';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-notice-bar`;
+const THEME_ICON = {
+  info: 'info-circle-filled',
+  success: 'check-circle-filled',
+  warning: 'info-circle-filled',
+  error: 'error-circle-filled',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-prefix-icon`,
+    `${prefix}-class-operation`,
+    `${prefix}-class-suffix-icon`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'change',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      loop: -1,
+      __ready: false,
+      animationData: null,
+      _,
+    };
+  },
+  watch: {
+    marquee: {
+      handler(val) {
+        if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
+          this.dataMarquee = {
+            speed: 50,
+            loop: -1,
+            delay: 0,
+          };
+        }
+      },
+      immediate: true,
+    },
+
+    visible: {
+      handler(visible) {
+        if (!this.__ready) return;
+        if (visible) {
+          this.show();
+        } else {
+          this.clearNoticeBarAnimation();
+        }
+      },
+      immediate: true,
+    },
+
+    prefixIcon: {
+      handler(prefixIcon) {
+        this.setPrefixIcon(prefixIcon);
+      },
+      immediate: true,
+    },
+
+    suffixIcon: {
+      handler(v) {
+        this._suffixIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    content: {
+      handler() {
+        if (!this.__ready) return;
+        this.clearNoticeBarAnimation();
+        this.initAnimation();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.resetAnimation = uni.createAnimation({
+      duration: 0,
+      timingFunction: 'linear',
+    });
+  },
+  mounted() {
+    this.show();
+    this.__ready = true;
+  },
+  beforeUnMount() {
+    this.clearNoticeBarAnimation();
+  },
+  methods: {
+    initAnimation() {
+      // 获取外部容器和滚动内容的宽度
+      const warpID = `.${name}__content-wrap`;
+      const nodeID = `.${name}__content`;
+      getAnimationFrame(this, () => {
+        Promise.all([getRect(this, nodeID), getRect(this, warpID)])
+          .then(([nodeRect, wrapRect]) => {
+            const { marquee } = this;
+
+            if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width || marquee === false) {
+              return;
+            }
+
+            if (marquee || wrapRect.width < nodeRect.width) {
+              const speeding = marquee.speed || 50;
+              const delaying = marquee.delay || 0;
+              const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000;
+              const firstAnimationDuration = (nodeRect.width / speeding) * 1000;
+
+              this.wrapWidth = Number(wrapRect.width);
+              this.nodeWidth = Number(nodeRect.width);
+              this.animationDuration = animationDuration;
+              this.delay = delaying;
+              this.loop = marquee.loop - 1;
+              this.firstAnimationDuration = firstAnimationDuration;
+              marquee.loop !== 0 && this.startScrollAnimation(true);
+            }
+          })
+          .catch(() => {});
+      });
+    },
+
+    startScrollAnimation(isFirstScroll = false) {
+      this.clearNoticeBarAnimation();
+
+      const { wrapWidth, nodeWidth, firstAnimationDuration, animationDuration, delay } = this;
+      const delayTime = isFirstScroll ? delay : 0;
+      const durationTime = isFirstScroll ? firstAnimationDuration : animationDuration;
+      // 滚动内容: 初始位置
+      this.animationData = this.resetAnimation
+        .translateX(isFirstScroll ? 0 : wrapWidth)
+        .step()
+        .export(),
+
+      setTimeout(() => {
+        // 滚动内容: 最终位置
+        this.animationData = uni
+          .createAnimation({ duration: durationTime, timingFunction: 'linear', delay: delayTime })
+          .translateX(-nodeWidth)
+          .step()
+          .export();
+      }, 20);
+
+      // 滚动一次完成, 开启下一次的滚动
+      this.nextAnimationContext = setTimeout(() => {
+        if (this.loop > 0) {
+          this.loop -= 1;
+          this.startScrollAnimation();
+        } else if (this.loop === 0) {
+          // 动画回到初始位置
+          this.animationData = this.resetAnimation.translateX(0).step()
+            .export();
+        } else if (this.loop < 0) {
+          this.startScrollAnimation();
+        }
+      }, durationTime + delayTime);
+    },
+
+    show() {
+      this.clearNoticeBarAnimation();
+      this.setPrefixIcon(this.prefixIcon);
+      this.initAnimation();
+    },
+
+    /** 清除动画 */
+    clearNoticeBarAnimation() {
+      this.nextAnimationContext && clearTimeout(this.nextAnimationContext);
+      this.nextAnimationContext = null;
+    },
+
+    setPrefixIcon(v) {
+      const { theme } = this;
+      this._prefixIcon = calcIcon(v, THEME_ICON[theme]);
+    },
+
+    onChange(e) {
+      const { current, source } = e.detail;
+      this.$emit('change', { current, source });
+    },
+
+    clickPrefixIcon() {
+      this.$emit('click', { trigger: 'prefix-icon' });
+    },
+
+    clickContent() {
+      this.$emit('click', { trigger: 'content' });
+    },
+
+    clickSuffixIcon() {
+      this.$emit('click', { trigger: 'suffix-icon' });
+    },
+
+    clickOperation() {
+      this.$emit('click', { trigger: 'operation' });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './notice-bar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/notice-bar/props.ts b/packages/tdesign-uniapp/components/notice-bar/props.ts
new file mode 100644
index 000000000..4f0e0b31f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/props.ts
@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdNoticeBarProps } from './type';
+export default {
+  /** 文本内容 */
+  content: {
+    type: [String, Array],
+  },
+  /** 滚动方向 */
+  direction: {
+    type: String,
+    default: 'horizontal' as TdNoticeBarProps['direction'],
+    validator(val: TdNoticeBarProps['direction']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 间隔时间【仅在 direction='vertical' 有效】 */
+  interval: {
+    type: Number,
+    default: 2000,
+  },
+  /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】 */
+  marquee: {
+    type: [Boolean, Object],
+    default: false as TdNoticeBarProps['marquee'],
+  },
+  /** 右侧额外信息 */
+  operation: {
+    type: String,
+  },
+  /** 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 */
+  prefixIcon: {
+    type: [String, Boolean, Object],
+    default: true as TdNoticeBarProps['prefixIcon'],
+  },
+  /** 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标 */
+  suffixIcon: {
+    type: [String, Object],
+  },
+  /** 内置主题 */
+  theme: {
+    type: String,
+    default: 'info' as TdNoticeBarProps['theme'],
+    validator(val: TdNoticeBarProps['theme']): boolean {
+      if (!val) return true;
+      return ['info', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 显示/隐藏 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 显示/隐藏，非受控属性 */
+  defaultVisible: Boolean,
+  /** 当 `direction="vertical"` 时轮播切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击事件 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/notice-bar/type.ts b/packages/tdesign-uniapp/components/notice-bar/type.ts
new file mode 100644
index 000000000..d00d0814b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/notice-bar/type.ts
@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdNoticeBarProps {
+  /**
+   * 文本内容
+   */
+  content?: string | string[];
+  /**
+   * 滚动方向
+   * @default horizontal
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * 间隔时间【仅在 direction='vertical' 有效】
+   * @default 2000
+   */
+  interval?: number;
+  /**
+   * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】
+   * @default false
+   */
+  marquee?: boolean | NoticeBarMarquee;
+  /**
+   * 右侧额外信息
+   */
+  operation?: string;
+  /**
+   * 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标
+   * @default true
+   */
+  prefixIcon?: string | boolean | object;
+  /**
+   * 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标
+   */
+  suffixIcon?: string | object;
+  /**
+   * 内置主题
+   * @default info
+   */
+  theme?: 'info' | 'success' | 'warning' | 'error';
+  /**
+   * 显示/隐藏
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 显示/隐藏，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 当 `direction="vertical"` 时轮播切换时触发
+   */
+  onChange?: (context: { current: number; source: '' | 'autoplay' | 'touch' }) => void;
+  /**
+   * 点击事件
+   */
+  onClick?: (context: { trigger: NoticeBarTrigger }) => void;
+}
+
+export interface NoticeBarMarquee {
+  speed?: number;
+  loop?: number;
+  delay?: number;
+}
+
+export type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon';
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/constant.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/constant.js
new file mode 100644
index 000000000..02ffe1bce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/constant.js
@@ -0,0 +1,25 @@
+export var SECONDS_A_MINUTE = 60;
+export var SECONDS_A_HOUR = SECONDS_A_MINUTE * 60;
+export var SECONDS_A_DAY = SECONDS_A_HOUR * 24;
+export var SECONDS_A_WEEK = SECONDS_A_DAY * 7;
+export var MILLISECONDS_A_SECOND = 1e3;
+export var MILLISECONDS_A_MINUTE = SECONDS_A_MINUTE * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_HOUR = SECONDS_A_HOUR * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_DAY = SECONDS_A_DAY * MILLISECONDS_A_SECOND;
+export var MILLISECONDS_A_WEEK = SECONDS_A_WEEK * MILLISECONDS_A_SECOND; // English locales
+
+export var MS = 'millisecond';
+export var S = 'second';
+export var MIN = 'minute';
+export var H = 'hour';
+export var D = 'day';
+export var W = 'week';
+export var M = 'month';
+export var Q = 'quarter';
+export var Y = 'year';
+export var DATE = 'date';
+export var FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ssZ';
+export var INVALID_DATE_STRING = 'Invalid Date'; // regex
+
+export var REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/;
+export var REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/index.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/index.js
new file mode 100644
index 000000000..a82986b88
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/index.js
@@ -0,0 +1,541 @@
+import * as C from './constant';
+import en from './locale/en';
+import U from './utils';
+var L = 'en'; // global locale
+
+var Ls = {}; // global loaded locale
+
+Ls[L] = en;
+var IS_DAYJS = '$isDayjsObject'; // eslint-disable-next-line no-use-before-define
+
+var isDayjs = function isDayjs(d) {
+  return d instanceof Dayjs || !!(d && d[IS_DAYJS]);
+};
+
+var parseLocale = function parseLocale(preset, object, isLocal) {
+  var l;
+  if (!preset) return L;
+
+  if (typeof preset === 'string') {
+    var presetLower = preset.toLowerCase();
+
+    if (Ls[presetLower]) {
+      l = presetLower;
+    }
+
+    if (object) {
+      Ls[presetLower] = object;
+      l = presetLower;
+    }
+
+    var presetSplit = preset.split('-');
+
+    if (!l && presetSplit.length > 1) {
+      return parseLocale(presetSplit[0]);
+    }
+  } else {
+    var name = preset.name;
+    Ls[name] = preset;
+    l = name;
+  }
+
+  if (!isLocal && l) L = l;
+  return l || !isLocal && L;
+};
+
+var dayjs = function dayjs(date, c) {
+  if (isDayjs(date)) {
+    return date.clone();
+  } // eslint-disable-next-line no-nested-ternary
+
+
+  var cfg = typeof c === 'object' ? c : {};
+  cfg.date = date;
+  cfg.args = arguments; // eslint-disable-line prefer-rest-params
+
+  return new Dayjs(cfg); // eslint-disable-line no-use-before-define
+};
+
+var wrapper = function wrapper(date, instance) {
+  return dayjs(date, {
+    locale: instance.$L,
+    utc: instance.$u,
+    x: instance.$x,
+    $offset: instance.$offset // todo: refactor; do not use this.$offset in you code
+
+  });
+};
+
+var Utils = U; // for plugin use
+
+Utils.l = parseLocale;
+Utils.i = isDayjs;
+Utils.w = wrapper;
+
+var parseDate = function parseDate(cfg) {
+  var date = cfg.date,
+      utc = cfg.utc;
+  if (date === null) return new Date(NaN); // null is invalid
+
+  if (Utils.u(date)) return new Date(); // today
+
+  if (date instanceof Date) return new Date(date);
+
+  if (typeof date === 'string' && !/Z$/i.test(date)) {
+    var d = date.match(C.REGEX_PARSE);
+
+    if (d) {
+      var m = d[2] - 1 || 0;
+      var ms = (d[7] || '0').substring(0, 3);
+
+      if (utc) {
+        return new Date(Date.UTC(d[1], m, d[3] || 1, d[4] || 0, d[5] || 0, d[6] || 0, ms));
+      }
+
+      return new Date(d[1], m, d[3] || 1, d[4] || 0, d[5] || 0, d[6] || 0, ms);
+    }
+  }
+
+  return new Date(date); // everything else
+};
+
+var Dayjs = /*#__PURE__*/function () {
+  function Dayjs(cfg) {
+    this.$L = parseLocale(cfg.locale, null, true);
+    this.parse(cfg); // for plugin
+
+    this.$x = this.$x || cfg.x || {};
+    this[IS_DAYJS] = true;
+  }
+
+  var _proto = Dayjs.prototype;
+
+  _proto.parse = function parse(cfg) {
+    this.$d = parseDate(cfg);
+    this.init();
+  };
+
+  _proto.init = function init() {
+    var $d = this.$d;
+    this.$y = $d.getFullYear();
+    this.$M = $d.getMonth();
+    this.$D = $d.getDate();
+    this.$W = $d.getDay();
+    this.$H = $d.getHours();
+    this.$m = $d.getMinutes();
+    this.$s = $d.getSeconds();
+    this.$ms = $d.getMilliseconds();
+  } // eslint-disable-next-line class-methods-use-this
+  ;
+
+  _proto.$utils = function $utils() {
+    return Utils;
+  };
+
+  _proto.isValid = function isValid() {
+    return !(this.$d.toString() === C.INVALID_DATE_STRING);
+  };
+
+  _proto.isSame = function isSame(that, units) {
+    var other = dayjs(that);
+    return this.startOf(units) <= other && other <= this.endOf(units);
+  };
+
+  _proto.isAfter = function isAfter(that, units) {
+    return dayjs(that) < this.startOf(units);
+  };
+
+  _proto.isBefore = function isBefore(that, units) {
+    return this.endOf(units) < dayjs(that);
+  };
+
+  _proto.$g = function $g(input, get, set) {
+    if (Utils.u(input)) return this[get];
+    return this.set(set, input);
+  };
+
+  _proto.unix = function unix() {
+    return Math.floor(this.valueOf() / 1000);
+  };
+
+  _proto.valueOf = function valueOf() {
+    // timezone(hour) * 60 * 60 * 1000 => ms
+    return this.$d.getTime();
+  };
+
+  _proto.startOf = function startOf(units, _startOf) {
+    var _this = this;
+
+    // startOf -> endOf
+    var isStartOf = !Utils.u(_startOf) ? _startOf : true;
+    var unit = Utils.p(units);
+
+    var instanceFactory = function instanceFactory(d, m) {
+      var ins = Utils.w(_this.$u ? Date.UTC(_this.$y, m, d) : new Date(_this.$y, m, d), _this);
+      return isStartOf ? ins : ins.endOf(C.D);
+    };
+
+    var instanceFactorySet = function instanceFactorySet(method, slice) {
+      var argumentStart = [0, 0, 0, 0];
+      var argumentEnd = [23, 59, 59, 999];
+      return Utils.w(_this.toDate()[method].apply( // eslint-disable-line prefer-spread
+      _this.toDate('s'), (isStartOf ? argumentStart : argumentEnd).slice(slice)), _this);
+    };
+
+    var $W = this.$W,
+        $M = this.$M,
+        $D = this.$D;
+    var utcPad = "set" + (this.$u ? 'UTC' : '');
+
+    switch (unit) {
+      case C.Y:
+        return isStartOf ? instanceFactory(1, 0) : instanceFactory(31, 11);
+
+      case C.M:
+        return isStartOf ? instanceFactory(1, $M) : instanceFactory(0, $M + 1);
+
+      case C.W:
+        {
+          var weekStart = this.$locale().weekStart || 0;
+          var gap = ($W < weekStart ? $W + 7 : $W) - weekStart;
+          return instanceFactory(isStartOf ? $D - gap : $D + (6 - gap), $M);
+        }
+
+      case C.D:
+      case C.DATE:
+        return instanceFactorySet(utcPad + "Hours", 0);
+
+      case C.H:
+        return instanceFactorySet(utcPad + "Minutes", 1);
+
+      case C.MIN:
+        return instanceFactorySet(utcPad + "Seconds", 2);
+
+      case C.S:
+        return instanceFactorySet(utcPad + "Milliseconds", 3);
+
+      default:
+        return this.clone();
+    }
+  };
+
+  _proto.endOf = function endOf(arg) {
+    return this.startOf(arg, false);
+  };
+
+  _proto.$set = function $set(units, _int) {
+    var _C$D$C$DATE$C$M$C$Y$C;
+
+    // private set
+    var unit = Utils.p(units);
+    var utcPad = "set" + (this.$u ? 'UTC' : '');
+    var name = (_C$D$C$DATE$C$M$C$Y$C = {}, _C$D$C$DATE$C$M$C$Y$C[C.D] = utcPad + "Date", _C$D$C$DATE$C$M$C$Y$C[C.DATE] = utcPad + "Date", _C$D$C$DATE$C$M$C$Y$C[C.M] = utcPad + "Month", _C$D$C$DATE$C$M$C$Y$C[C.Y] = utcPad + "FullYear", _C$D$C$DATE$C$M$C$Y$C[C.H] = utcPad + "Hours", _C$D$C$DATE$C$M$C$Y$C[C.MIN] = utcPad + "Minutes", _C$D$C$DATE$C$M$C$Y$C[C.S] = utcPad + "Seconds", _C$D$C$DATE$C$M$C$Y$C[C.MS] = utcPad + "Milliseconds", _C$D$C$DATE$C$M$C$Y$C)[unit];
+    var arg = unit === C.D ? this.$D + (_int - this.$W) : _int;
+
+    if (unit === C.M || unit === C.Y) {
+      // clone is for badMutable plugin
+      var date = this.clone().set(C.DATE, 1);
+      date.$d[name](arg);
+      date.init();
+      this.$d = date.set(C.DATE, Math.min(this.$D, date.daysInMonth())).$d;
+    } else if (name) this.$d[name](arg);
+
+    this.init();
+    return this;
+  };
+
+  _proto.set = function set(string, _int2) {
+    return this.clone().$set(string, _int2);
+  };
+
+  _proto.get = function get(unit) {
+    return this[Utils.p(unit)]();
+  };
+
+  _proto.add = function add(number, units) {
+    var _this2 = this,
+        _C$MIN$C$H$C$S$unit;
+
+    number = Number(number); // eslint-disable-line no-param-reassign
+
+    var unit = Utils.p(units);
+
+    var instanceFactorySet = function instanceFactorySet(n) {
+      var d = dayjs(_this2);
+      return Utils.w(d.date(d.date() + Math.round(n * number)), _this2);
+    };
+
+    if (unit === C.M) {
+      return this.set(C.M, this.$M + number);
+    }
+
+    if (unit === C.Y) {
+      return this.set(C.Y, this.$y + number);
+    }
+
+    if (unit === C.D) {
+      return instanceFactorySet(1);
+    }
+
+    if (unit === C.W) {
+      return instanceFactorySet(7);
+    }
+
+    var step = (_C$MIN$C$H$C$S$unit = {}, _C$MIN$C$H$C$S$unit[C.MIN] = C.MILLISECONDS_A_MINUTE, _C$MIN$C$H$C$S$unit[C.H] = C.MILLISECONDS_A_HOUR, _C$MIN$C$H$C$S$unit[C.S] = C.MILLISECONDS_A_SECOND, _C$MIN$C$H$C$S$unit)[unit] || 1; // ms
+
+    var nextTimeStamp = this.$d.getTime() + number * step;
+    return Utils.w(nextTimeStamp, this);
+  };
+
+  _proto.subtract = function subtract(number, string) {
+    return this.add(number * -1, string);
+  };
+
+  _proto.format = function format(formatStr) {
+    var _this3 = this;
+
+    var locale = this.$locale();
+    if (!this.isValid()) return locale.invalidDate || C.INVALID_DATE_STRING;
+    var str = formatStr || C.FORMAT_DEFAULT;
+    var zoneStr = Utils.z(this);
+    var $H = this.$H,
+        $m = this.$m,
+        $M = this.$M;
+    var weekdays = locale.weekdays,
+        months = locale.months,
+        meridiem = locale.meridiem;
+
+    var getShort = function getShort(arr, index, full, length) {
+      return arr && (arr[index] || arr(_this3, str)) || full[index].slice(0, length);
+    };
+
+    var get$H = function get$H(num) {
+      return Utils.s($H % 12 || 12, num, '0');
+    };
+
+    var meridiemFunc = meridiem || function (hour, minute, isLowercase) {
+      var m = hour < 12 ? 'AM' : 'PM';
+      return isLowercase ? m.toLowerCase() : m;
+    };
+
+    var matches = function matches(match) {
+      switch (match) {
+        case 'YY':
+          return String(_this3.$y).slice(-2);
+
+        case 'YYYY':
+          return Utils.s(_this3.$y, 4, '0');
+
+        case 'M':
+          return $M + 1;
+
+        case 'MM':
+          return Utils.s($M + 1, 2, '0');
+
+        case 'MMM':
+          return getShort(locale.monthsShort, $M, months, 3);
+
+        case 'MMMM':
+          return getShort(months, $M);
+
+        case 'D':
+          return _this3.$D;
+
+        case 'DD':
+          return Utils.s(_this3.$D, 2, '0');
+
+        case 'd':
+          return String(_this3.$W);
+
+        case 'dd':
+          return getShort(locale.weekdaysMin, _this3.$W, weekdays, 2);
+
+        case 'ddd':
+          return getShort(locale.weekdaysShort, _this3.$W, weekdays, 3);
+
+        case 'dddd':
+          return weekdays[_this3.$W];
+
+        case 'H':
+          return String($H);
+
+        case 'HH':
+          return Utils.s($H, 2, '0');
+
+        case 'h':
+          return get$H(1);
+
+        case 'hh':
+          return get$H(2);
+
+        case 'a':
+          return meridiemFunc($H, $m, true);
+
+        case 'A':
+          return meridiemFunc($H, $m, false);
+
+        case 'm':
+          return String($m);
+
+        case 'mm':
+          return Utils.s($m, 2, '0');
+
+        case 's':
+          return String(_this3.$s);
+
+        case 'ss':
+          return Utils.s(_this3.$s, 2, '0');
+
+        case 'SSS':
+          return Utils.s(_this3.$ms, 3, '0');
+
+        case 'Z':
+          return zoneStr;
+        // 'ZZ' logic below
+
+        default:
+          break;
+      }
+
+      return null;
+    };
+
+    return str.replace(C.REGEX_FORMAT, function (match, $1) {
+      return $1 || matches(match) || zoneStr.replace(':', '');
+    }); // 'ZZ'
+  };
+
+  _proto.utcOffset = function utcOffset() {
+    // Because a bug at FF24, we're rounding the timezone offset around 15 minutes
+    // https://github.com/moment/moment/pull/1871
+    return -Math.round(this.$d.getTimezoneOffset() / 15) * 15;
+  };
+
+  _proto.diff = function diff(input, units, _float) {
+    var _this4 = this;
+
+    var unit = Utils.p(units);
+    var that = dayjs(input);
+    var zoneDelta = (that.utcOffset() - this.utcOffset()) * C.MILLISECONDS_A_MINUTE;
+    var diff = this - that;
+
+    var getMonth = function getMonth() {
+      return Utils.m(_this4, that);
+    };
+
+    var result;
+
+    switch (unit) {
+      case C.Y:
+        result = getMonth() / 12;
+        break;
+
+      case C.M:
+        result = getMonth();
+        break;
+
+      case C.Q:
+        result = getMonth() / 3;
+        break;
+
+      case C.W:
+        result = (diff - zoneDelta) / C.MILLISECONDS_A_WEEK;
+        break;
+
+      case C.D:
+        result = (diff - zoneDelta) / C.MILLISECONDS_A_DAY;
+        break;
+
+      case C.H:
+        result = diff / C.MILLISECONDS_A_HOUR;
+        break;
+
+      case C.MIN:
+        result = diff / C.MILLISECONDS_A_MINUTE;
+        break;
+
+      case C.S:
+        result = diff / C.MILLISECONDS_A_SECOND;
+        break;
+
+      default:
+        result = diff; // milliseconds
+
+        break;
+    }
+
+    return _float ? result : Utils.a(result);
+  };
+
+  _proto.daysInMonth = function daysInMonth() {
+    return this.endOf(C.M).$D;
+  };
+
+  _proto.$locale = function $locale() {
+    // get locale object
+    return Ls[this.$L];
+  };
+
+  _proto.locale = function locale(preset, object) {
+    if (!preset) return this.$L;
+    var that = this.clone();
+    var nextLocaleName = parseLocale(preset, object, true);
+    if (nextLocaleName) that.$L = nextLocaleName;
+    return that;
+  };
+
+  _proto.clone = function clone() {
+    return Utils.w(this.$d, this);
+  };
+
+  _proto.toDate = function toDate() {
+    return new Date(this.valueOf());
+  };
+
+  _proto.toJSON = function toJSON() {
+    return this.isValid() ? this.toISOString() : null;
+  };
+
+  _proto.toISOString = function toISOString() {
+    // ie 8 return
+    // new Dayjs(this.valueOf() + this.$d.getTimezoneOffset() * 60000)
+    // .format('YYYY-MM-DDTHH:mm:ss.SSS[Z]')
+    return this.$d.toISOString();
+  };
+
+  _proto.toString = function toString() {
+    return this.$d.toUTCString();
+  };
+
+  return Dayjs;
+}();
+
+var proto = Dayjs.prototype;
+dayjs.prototype = proto;
+[['$ms', C.MS], ['$s', C.S], ['$m', C.MIN], ['$H', C.H], ['$W', C.D], ['$M', C.M], ['$y', C.Y], ['$D', C.DATE]].forEach(function (g) {
+  proto[g[1]] = function (input) {
+    return this.$g(input, g[0], g[1]);
+  };
+});
+
+dayjs.extend = function (plugin, option) {
+  if (!plugin.$i) {
+    // install plugin only once
+    plugin(option, Dayjs, dayjs);
+    plugin.$i = true;
+  }
+
+  return dayjs;
+};
+
+dayjs.locale = parseLocale;
+dayjs.isDayjs = isDayjs;
+
+dayjs.unix = function (timestamp) {
+  return dayjs(timestamp * 1e3);
+};
+
+dayjs.en = Ls[L];
+dayjs.Ls = Ls;
+dayjs.p = {};
+export default dayjs;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/en.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/en.js
new file mode 100644
index 000000000..8ba610720
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/en.js
@@ -0,0 +1,12 @@
+// English [en]
+// We don't need weekdaysShort, weekdaysMin, monthsShort in en.js locale
+export default {
+  name: 'en',
+  weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+  months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+  ordinal: function ordinal(n) {
+    var s = ['th', 'st', 'nd', 'rd'];
+    var v = n % 100;
+    return "[" + n + (s[(v - 20) % 10] || s[v] || s[0]) + "]";
+  }
+};
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ja.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ja.js
new file mode 100644
index 000000000..6568e1390
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ja.js
@@ -0,0 +1,45 @@
+// Japanese [ja]
+import dayjs from '../index';
+var locale = {
+  name: 'ja',
+  weekdays: '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'),
+  weekdaysShort: '日_月_火_水_木_金_土'.split('_'),
+  weekdaysMin: '日_月_火_水_木_金_土'.split('_'),
+  months: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  ordinal: function ordinal(n) {
+    return n + "\u65E5";
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY/MM/DD',
+    LL: 'YYYY年M月D日',
+    LLL: 'YYYY年M月D日 HH:mm',
+    LLLL: 'YYYY年M月D日 dddd HH:mm',
+    l: 'YYYY/MM/DD',
+    ll: 'YYYY年M月D日',
+    lll: 'YYYY年M月D日 HH:mm',
+    llll: 'YYYY年M月D日(ddd) HH:mm'
+  },
+  meridiem: function meridiem(hour) {
+    return hour < 12 ? '午前' : '午後';
+  },
+  relativeTime: {
+    future: '%s後',
+    past: '%s前',
+    s: '数秒',
+    m: '1分',
+    mm: '%d分',
+    h: '1時間',
+    hh: '%d時間',
+    d: '1日',
+    dd: '%d日',
+    M: '1ヶ月',
+    MM: '%dヶ月',
+    y: '1年',
+    yy: '%d年'
+  }
+};
+dayjs.locale(locale, null, true);
+export default locale;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ko.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ko.js
new file mode 100644
index 000000000..cfad49de2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ko.js
@@ -0,0 +1,45 @@
+// Korean [ko]
+import dayjs from '../index';
+var locale = {
+  name: 'ko',
+  weekdays: '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
+  weekdaysShort: '일_월_화_수_목_금_토'.split('_'),
+  weekdaysMin: '일_월_화_수_목_금_토'.split('_'),
+  months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
+  monthsShort: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
+  ordinal: function ordinal(n) {
+    return n + "\uC77C";
+  },
+  formats: {
+    LT: 'A h:mm',
+    LTS: 'A h:mm:ss',
+    L: 'YYYY.MM.DD.',
+    LL: 'YYYY년 MMMM D일',
+    LLL: 'YYYY년 MMMM D일 A h:mm',
+    LLLL: 'YYYY년 MMMM D일 dddd A h:mm',
+    l: 'YYYY.MM.DD.',
+    ll: 'YYYY년 MMMM D일',
+    lll: 'YYYY년 MMMM D일 A h:mm',
+    llll: 'YYYY년 MMMM D일 dddd A h:mm'
+  },
+  meridiem: function meridiem(hour) {
+    return hour < 12 ? '오전' : '오후';
+  },
+  relativeTime: {
+    future: '%s 후',
+    past: '%s 전',
+    s: '몇 초',
+    m: '1분',
+    mm: '%d분',
+    h: '한 시간',
+    hh: '%d시간',
+    d: '하루',
+    dd: '%d일',
+    M: '한 달',
+    MM: '%d달',
+    y: '일 년',
+    yy: '%d년'
+  }
+};
+dayjs.locale(locale, null, true);
+export default locale;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ru.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ru.js
new file mode 100644
index 000000000..fbb1b3589
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/ru.js
@@ -0,0 +1,99 @@
+// Russian [ru]
+import dayjs from '../index';
+var monthFormat = 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_');
+var monthStandalone = 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_');
+var monthShortFormat = 'янв._февр._мар._апр._мая_июня_июля_авг._сент._окт._нояб._дек.'.split('_');
+var monthShortStandalone = 'янв._февр._март_апр._май_июнь_июль_авг._сент._окт._нояб._дек.'.split('_');
+var MONTHS_IN_FORMAT = /D[oD]?(\[[^[\]]*\]|\s)+MMMM?/;
+
+function plural(word, num) {
+  var forms = word.split('_');
+  return num % 10 === 1 && num % 100 !== 11 ? forms[0] : num % 10 >= 2 && num % 10 <= 4 && (num % 100 < 10 || num % 100 >= 20) ? forms[1] : forms[2]; // eslint-disable-line
+}
+
+function relativeTimeWithPlural(number, withoutSuffix, key) {
+  var format = {
+    mm: withoutSuffix ? 'минута_минуты_минут' : 'минуту_минуты_минут',
+    hh: 'час_часа_часов',
+    dd: 'день_дня_дней',
+    MM: 'месяц_месяца_месяцев',
+    yy: 'год_года_лет'
+  };
+
+  if (key === 'm') {
+    return withoutSuffix ? 'минута' : 'минуту';
+  }
+
+  return number + " " + plural(format[key], +number);
+}
+
+var months = function months(dayjsInstance, format) {
+  if (MONTHS_IN_FORMAT.test(format)) {
+    return monthFormat[dayjsInstance.month()];
+  }
+
+  return monthStandalone[dayjsInstance.month()];
+};
+
+months.s = monthStandalone;
+months.f = monthFormat;
+
+var monthsShort = function monthsShort(dayjsInstance, format) {
+  if (MONTHS_IN_FORMAT.test(format)) {
+    return monthShortFormat[dayjsInstance.month()];
+  }
+
+  return monthShortStandalone[dayjsInstance.month()];
+};
+
+monthsShort.s = monthShortStandalone;
+monthsShort.f = monthShortFormat;
+var locale = {
+  name: 'ru',
+  weekdays: 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
+  weekdaysShort: 'вск_пнд_втр_срд_чтв_птн_сбт'.split('_'),
+  weekdaysMin: 'вс_пн_вт_ср_чт_пт_сб'.split('_'),
+  months: months,
+  monthsShort: monthsShort,
+  weekStart: 1,
+  yearStart: 4,
+  formats: {
+    LT: 'H:mm',
+    LTS: 'H:mm:ss',
+    L: 'DD.MM.YYYY',
+    LL: 'D MMMM YYYY г.',
+    LLL: 'D MMMM YYYY г., H:mm',
+    LLLL: 'dddd, D MMMM YYYY г., H:mm'
+  },
+  relativeTime: {
+    future: 'через %s',
+    past: '%s назад',
+    s: 'несколько секунд',
+    m: relativeTimeWithPlural,
+    mm: relativeTimeWithPlural,
+    h: 'час',
+    hh: relativeTimeWithPlural,
+    d: 'день',
+    dd: relativeTimeWithPlural,
+    M: 'месяц',
+    MM: relativeTimeWithPlural,
+    y: 'год',
+    yy: relativeTimeWithPlural
+  },
+  ordinal: function ordinal(n) {
+    return n;
+  },
+  meridiem: function meridiem(hour) {
+    if (hour < 4) {
+      return 'ночи';
+    } else if (hour < 12) {
+      return 'утра';
+    } else if (hour < 17) {
+      return 'дня';
+    }
+
+    return 'вечера';
+  }
+};
+dayjs.locale(locale, null, true);
+export default locale;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-cn.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-cn.js
new file mode 100644
index 000000000..1a7ebf4bd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-cn.js
@@ -0,0 +1,67 @@
+// Chinese (China) [zh-cn]
+import dayjs from '../index';
+var locale = {
+  name: 'zh-cn',
+  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+  weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  ordinal: function ordinal(number, period) {
+    switch (period) {
+      case 'W':
+        return number + "\u5468";
+
+      default:
+        return number + "\u65E5";
+    }
+  },
+  weekStart: 1,
+  yearStart: 4,
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY/MM/DD',
+    LL: 'YYYY年M月D日',
+    LLL: 'YYYY年M月D日Ah点mm分',
+    LLLL: 'YYYY年M月D日ddddAh点mm分',
+    l: 'YYYY/M/D',
+    ll: 'YYYY年M月D日',
+    lll: 'YYYY年M月D日 HH:mm',
+    llll: 'YYYY年M月D日dddd HH:mm'
+  },
+  relativeTime: {
+    future: '%s内',
+    past: '%s前',
+    s: '几秒',
+    m: '1 分钟',
+    mm: '%d 分钟',
+    h: '1 小时',
+    hh: '%d 小时',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 个月',
+    MM: '%d 个月',
+    y: '1 年',
+    yy: '%d 年'
+  },
+  meridiem: function meridiem(hour, minute) {
+    var hm = hour * 100 + minute;
+
+    if (hm < 600) {
+      return '凌晨';
+    } else if (hm < 900) {
+      return '早上';
+    } else if (hm < 1100) {
+      return '上午';
+    } else if (hm < 1300) {
+      return '中午';
+    } else if (hm < 1800) {
+      return '下午';
+    }
+
+    return '晚上';
+  }
+};
+dayjs.locale(locale, null, true);
+export default locale;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-tw.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-tw.js
new file mode 100644
index 000000000..ada89ee41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/locale/zh-tw.js
@@ -0,0 +1,65 @@
+// Chinese (Taiwan) [zh-tw]
+import dayjs from '../index';
+var locale = {
+  name: 'zh-tw',
+  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+  weekdaysShort: '週日_週一_週二_週三_週四_週五_週六'.split('_'),
+  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  ordinal: function ordinal(number, period) {
+    switch (period) {
+      case 'W':
+        return number + "\u9031";
+
+      default:
+        return number + "\u65E5";
+    }
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY/MM/DD',
+    LL: 'YYYY年M月D日',
+    LLL: 'YYYY年M月D日 HH:mm',
+    LLLL: 'YYYY年M月D日dddd HH:mm',
+    l: 'YYYY/M/D',
+    ll: 'YYYY年M月D日',
+    lll: 'YYYY年M月D日 HH:mm',
+    llll: 'YYYY年M月D日dddd HH:mm'
+  },
+  relativeTime: {
+    future: '%s內',
+    past: '%s前',
+    s: '幾秒',
+    m: '1 分鐘',
+    mm: '%d 分鐘',
+    h: '1 小時',
+    hh: '%d 小時',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 個月',
+    MM: '%d 個月',
+    y: '1 年',
+    yy: '%d 年'
+  },
+  meridiem: function meridiem(hour, minute) {
+    var hm = hour * 100 + minute;
+
+    if (hm < 600) {
+      return '凌晨';
+    } else if (hm < 900) {
+      return '早上';
+    } else if (hm < 1100) {
+      return '上午';
+    } else if (hm < 1300) {
+      return '中午';
+    } else if (hm < 1800) {
+      return '下午';
+    }
+
+    return '晚上';
+  }
+};
+dayjs.locale(locale, null, true);
+export default locale;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localeData/index.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localeData/index.js
new file mode 100644
index 000000000..c48d92cbc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localeData/index.js
@@ -0,0 +1,114 @@
+import { t } from '../localizedFormat/utils';
+export default (function (o, c, dayjs) {
+  // locale needed later
+  var proto = c.prototype;
+
+  var getLocalePart = function getLocalePart(part) {
+    return part && (part.indexOf ? part : part.s);
+  };
+
+  var getShort = function getShort(ins, target, full, num, localeOrder) {
+    var locale = ins.name ? ins : ins.$locale();
+    var targetLocale = getLocalePart(locale[target]);
+    var fullLocale = getLocalePart(locale[full]);
+    var result = targetLocale || fullLocale.map(function (f) {
+      return f.slice(0, num);
+    });
+    if (!localeOrder) return result;
+    var weekStart = locale.weekStart;
+    return result.map(function (_, index) {
+      return result[(index + (weekStart || 0)) % 7];
+    });
+  };
+
+  var getDayjsLocaleObject = function getDayjsLocaleObject() {
+    return dayjs.Ls[dayjs.locale()];
+  };
+
+  var getLongDateFormat = function getLongDateFormat(l, format) {
+    return l.formats[format] || t(l.formats[format.toUpperCase()]);
+  };
+
+  var localeData = function localeData() {
+    var _this = this;
+
+    return {
+      months: function months(instance) {
+        return instance ? instance.format('MMMM') : getShort(_this, 'months');
+      },
+      monthsShort: function monthsShort(instance) {
+        return instance ? instance.format('MMM') : getShort(_this, 'monthsShort', 'months', 3);
+      },
+      firstDayOfWeek: function firstDayOfWeek() {
+        return _this.$locale().weekStart || 0;
+      },
+      weekdays: function weekdays(instance) {
+        return instance ? instance.format('dddd') : getShort(_this, 'weekdays');
+      },
+      weekdaysMin: function weekdaysMin(instance) {
+        return instance ? instance.format('dd') : getShort(_this, 'weekdaysMin', 'weekdays', 2);
+      },
+      weekdaysShort: function weekdaysShort(instance) {
+        return instance ? instance.format('ddd') : getShort(_this, 'weekdaysShort', 'weekdays', 3);
+      },
+      longDateFormat: function longDateFormat(format) {
+        return getLongDateFormat(_this.$locale(), format);
+      },
+      meridiem: this.$locale().meridiem,
+      ordinal: this.$locale().ordinal
+    };
+  };
+
+  proto.localeData = function () {
+    return localeData.bind(this)();
+  };
+
+  dayjs.localeData = function () {
+    var localeObject = getDayjsLocaleObject();
+    return {
+      firstDayOfWeek: function firstDayOfWeek() {
+        return localeObject.weekStart || 0;
+      },
+      weekdays: function weekdays() {
+        return dayjs.weekdays();
+      },
+      weekdaysShort: function weekdaysShort() {
+        return dayjs.weekdaysShort();
+      },
+      weekdaysMin: function weekdaysMin() {
+        return dayjs.weekdaysMin();
+      },
+      months: function months() {
+        return dayjs.months();
+      },
+      monthsShort: function monthsShort() {
+        return dayjs.monthsShort();
+      },
+      longDateFormat: function longDateFormat(format) {
+        return getLongDateFormat(localeObject, format);
+      },
+      meridiem: localeObject.meridiem,
+      ordinal: localeObject.ordinal
+    };
+  };
+
+  dayjs.months = function () {
+    return getShort(getDayjsLocaleObject(), 'months');
+  };
+
+  dayjs.monthsShort = function () {
+    return getShort(getDayjsLocaleObject(), 'monthsShort', 'months', 3);
+  };
+
+  dayjs.weekdays = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdays', null, null, localeOrder);
+  };
+
+  dayjs.weekdaysShort = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdaysShort', 'weekdays', 3, localeOrder);
+  };
+
+  dayjs.weekdaysMin = function (localeOrder) {
+    return getShort(getDayjsLocaleObject(), 'weekdaysMin', 'weekdays', 2, localeOrder);
+  };
+});
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/index.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/index.js
new file mode 100644
index 000000000..9defb1f41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/index.js
@@ -0,0 +1,20 @@
+import { FORMAT_DEFAULT } from '../../constant';
+import { u, englishFormats } from './utils';
+export default (function (o, c, d) {
+  var proto = c.prototype;
+  var oldFormat = proto.format;
+  d.en.formats = englishFormats;
+
+  proto.format = function (formatStr) {
+    if (formatStr === void 0) {
+      formatStr = FORMAT_DEFAULT;
+    }
+
+    var _this$$locale = this.$locale(),
+        _this$$locale$formats = _this$$locale.formats,
+        formats = _this$$locale$formats === void 0 ? {} : _this$$locale$formats;
+
+    var result = u(formatStr, formats);
+    return oldFormat.call(this, result);
+  };
+});
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/utils.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/utils.js
new file mode 100644
index 000000000..1f48eff1b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/plugin/localizedFormat/utils.js
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/prefer-default-export
+export var t = function t(format) {
+  return format.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function (_, a, b) {
+    return a || b.slice(1);
+  });
+};
+export var englishFormats = {
+  LTS: 'h:mm:ss A',
+  LT: 'h:mm A',
+  L: 'MM/DD/YYYY',
+  LL: 'MMMM D, YYYY',
+  LLL: 'MMMM D, YYYY h:mm A',
+  LLLL: 'dddd, MMMM D, YYYY h:mm A'
+};
+export var u = function u(formatStr, formats) {
+  return formatStr.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function (_, a, b) {
+    var B = b && b.toUpperCase();
+    return a || formats[b] || englishFormats[b] || t(formats[B]);
+  });
+};
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/dayjs/esm/utils.js b/packages/tdesign-uniapp/components/npm/dayjs/esm/utils.js
new file mode 100644
index 000000000..b5a81312b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/dayjs/esm/utils.js
@@ -0,0 +1,58 @@
+import * as C from './constant';
+
+var padStart = function padStart(string, length, pad) {
+  var s = String(string);
+  if (!s || s.length >= length) return string;
+  return "" + Array(length + 1 - s.length).join(pad) + string;
+};
+
+var padZoneStr = function padZoneStr(instance) {
+  var negMinutes = -instance.utcOffset();
+  var minutes = Math.abs(negMinutes);
+  var hourOffset = Math.floor(minutes / 60);
+  var minuteOffset = minutes % 60;
+  return "" + (negMinutes <= 0 ? '+' : '-') + padStart(hourOffset, 2, '0') + ":" + padStart(minuteOffset, 2, '0');
+};
+
+var monthDiff = function monthDiff(a, b) {
+  // function from moment.js in order to keep the same result
+  if (a.date() < b.date()) return -monthDiff(b, a);
+  var wholeMonthDiff = (b.year() - a.year()) * 12 + (b.month() - a.month());
+  var anchor = a.clone().add(wholeMonthDiff, C.M);
+  var c = b - anchor < 0;
+  var anchor2 = a.clone().add(wholeMonthDiff + (c ? -1 : 1), C.M);
+  return +(-(wholeMonthDiff + (b - anchor) / (c ? anchor - anchor2 : anchor2 - anchor)) || 0);
+};
+
+var absFloor = function absFloor(n) {
+  return n < 0 ? Math.ceil(n) || 0 : Math.floor(n);
+};
+
+var prettyUnit = function prettyUnit(u) {
+  var special = {
+    M: C.M,
+    y: C.Y,
+    w: C.W,
+    d: C.D,
+    D: C.DATE,
+    h: C.H,
+    m: C.MIN,
+    s: C.S,
+    ms: C.MS,
+    Q: C.Q
+  };
+  return special[u] || String(u || '').toLowerCase().replace(/s$/, '');
+};
+
+var isUndefined = function isUndefined(s) {
+  return s === undefined;
+};
+
+export default {
+  s: padStart,
+  z: padZoneStr,
+  m: monthDiff,
+  a: absFloor,
+  p: prettyUnit,
+  u: isUndefined
+};
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/npm/tinycolor2/esm/tinycolor.js b/packages/tdesign-uniapp/components/npm/tinycolor2/esm/tinycolor.js
new file mode 100644
index 000000000..374f5ea99
--- /dev/null
+++ b/packages/tdesign-uniapp/components/npm/tinycolor2/esm/tinycolor.js
@@ -0,0 +1,1180 @@
+// This file is autogenerated. It's used to publish ESM to npm.
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+// https://github.com/bgrins/TinyColor
+// Brian Grinstead, MIT License
+
+var trimLeft = /^\s+/;
+var trimRight = /\s+$/;
+function tinycolor(color, opts) {
+  color = color ? color : "";
+  opts = opts || {};
+
+  // If input is already a tinycolor, return itself
+  if (color instanceof tinycolor) {
+    return color;
+  }
+  // If we are called as a function, call using new instead
+  if (!(this instanceof tinycolor)) {
+    return new tinycolor(color, opts);
+  }
+  var rgb = inputToRGB(color);
+  this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
+  this._gradientType = opts.gradientType;
+
+  // Don't let the range of [0,255] come back in [0,1].
+  // Potentially lose a little bit of precision here, but will fix issues where
+  // .5 gets interpreted as half of the total, instead of half of 1
+  // If it was supposed to be 128, this was already taken care of by `inputToRgb`
+  if (this._r < 1) this._r = Math.round(this._r);
+  if (this._g < 1) this._g = Math.round(this._g);
+  if (this._b < 1) this._b = Math.round(this._b);
+  this._ok = rgb.ok;
+}
+tinycolor.prototype = {
+  isDark: function isDark() {
+    return this.getBrightness() < 128;
+  },
+  isLight: function isLight() {
+    return !this.isDark();
+  },
+  isValid: function isValid() {
+    return this._ok;
+  },
+  getOriginalInput: function getOriginalInput() {
+    return this._originalInput;
+  },
+  getFormat: function getFormat() {
+    return this._format;
+  },
+  getAlpha: function getAlpha() {
+    return this._a;
+  },
+  getBrightness: function getBrightness() {
+    //http://www.w3.org/TR/AERT#color-contrast
+    var rgb = this.toRgb();
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+  },
+  getLuminance: function getLuminance() {
+    //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+    var rgb = this.toRgb();
+    var RsRGB, GsRGB, BsRGB, R, G, B;
+    RsRGB = rgb.r / 255;
+    GsRGB = rgb.g / 255;
+    BsRGB = rgb.b / 255;
+    if (RsRGB <= 0.03928) R = RsRGB / 12.92;else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+    if (GsRGB <= 0.03928) G = GsRGB / 12.92;else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+    if (BsRGB <= 0.03928) B = BsRGB / 12.92;else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  },
+  setAlpha: function setAlpha(value) {
+    this._a = boundAlpha(value);
+    this._roundA = Math.round(100 * this._a) / 100;
+    return this;
+  },
+  toHsv: function toHsv() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v,
+      a: this._a
+    };
+  },
+  toHsvString: function toHsvString() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    var h = Math.round(hsv.h * 360),
+      s = Math.round(hsv.s * 100),
+      v = Math.round(hsv.v * 100);
+    return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
+  },
+  toHsl: function toHsl() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    return {
+      h: hsl.h * 360,
+      s: hsl.s,
+      l: hsl.l,
+      a: this._a
+    };
+  },
+  toHslString: function toHslString() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    var h = Math.round(hsl.h * 360),
+      s = Math.round(hsl.s * 100),
+      l = Math.round(hsl.l * 100);
+    return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
+  },
+  toHex: function toHex(allow3Char) {
+    return rgbToHex(this._r, this._g, this._b, allow3Char);
+  },
+  toHexString: function toHexString(allow3Char) {
+    return "#" + this.toHex(allow3Char);
+  },
+  toHex8: function toHex8(allow4Char) {
+    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+  },
+  toHex8String: function toHex8String(allow4Char) {
+    return "#" + this.toHex8(allow4Char);
+  },
+  toRgb: function toRgb() {
+    return {
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
+    };
+  },
+  toRgbString: function toRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
+  },
+  toPercentageRgb: function toPercentageRgb() {
+    return {
+      r: Math.round(bound01(this._r, 255) * 100) + "%",
+      g: Math.round(bound01(this._g, 255) * 100) + "%",
+      b: Math.round(bound01(this._b, 255) * 100) + "%",
+      a: this._a
+    };
+  },
+  toPercentageRgbString: function toPercentageRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+  },
+  toName: function toName() {
+    if (this._a === 0) {
+      return "transparent";
+    }
+    if (this._a < 1) {
+      return false;
+    }
+    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+  },
+  toFilter: function toFilter(secondColor) {
+    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
+    var secondHex8String = hex8String;
+    var gradientType = this._gradientType ? "GradientType = 1, " : "";
+    if (secondColor) {
+      var s = tinycolor(secondColor);
+      secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
+    }
+    return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
+  },
+  toString: function toString(format) {
+    var formatSet = !!format;
+    format = format || this._format;
+    var formattedString = false;
+    var hasAlpha = this._a < 1 && this._a >= 0;
+    var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
+    if (needsAlphaFormat) {
+      // Special case for "transparent", all other non-alpha formats
+      // will return rgba when there is transparency.
+      if (format === "name" && this._a === 0) {
+        return this.toName();
+      }
+      return this.toRgbString();
+    }
+    if (format === "rgb") {
+      formattedString = this.toRgbString();
+    }
+    if (format === "prgb") {
+      formattedString = this.toPercentageRgbString();
+    }
+    if (format === "hex" || format === "hex6") {
+      formattedString = this.toHexString();
+    }
+    if (format === "hex3") {
+      formattedString = this.toHexString(true);
+    }
+    if (format === "hex4") {
+      formattedString = this.toHex8String(true);
+    }
+    if (format === "hex8") {
+      formattedString = this.toHex8String();
+    }
+    if (format === "name") {
+      formattedString = this.toName();
+    }
+    if (format === "hsl") {
+      formattedString = this.toHslString();
+    }
+    if (format === "hsv") {
+      formattedString = this.toHsvString();
+    }
+    return formattedString || this.toHexString();
+  },
+  clone: function clone() {
+    return tinycolor(this.toString());
+  },
+  _applyModification: function _applyModification(fn, args) {
+    var color = fn.apply(null, [this].concat([].slice.call(args)));
+    this._r = color._r;
+    this._g = color._g;
+    this._b = color._b;
+    this.setAlpha(color._a);
+    return this;
+  },
+  lighten: function lighten() {
+    return this._applyModification(_lighten, arguments);
+  },
+  brighten: function brighten() {
+    return this._applyModification(_brighten, arguments);
+  },
+  darken: function darken() {
+    return this._applyModification(_darken, arguments);
+  },
+  desaturate: function desaturate() {
+    return this._applyModification(_desaturate, arguments);
+  },
+  saturate: function saturate() {
+    return this._applyModification(_saturate, arguments);
+  },
+  greyscale: function greyscale() {
+    return this._applyModification(_greyscale, arguments);
+  },
+  spin: function spin() {
+    return this._applyModification(_spin, arguments);
+  },
+  _applyCombination: function _applyCombination(fn, args) {
+    return fn.apply(null, [this].concat([].slice.call(args)));
+  },
+  analogous: function analogous() {
+    return this._applyCombination(_analogous, arguments);
+  },
+  complement: function complement() {
+    return this._applyCombination(_complement, arguments);
+  },
+  monochromatic: function monochromatic() {
+    return this._applyCombination(_monochromatic, arguments);
+  },
+  splitcomplement: function splitcomplement() {
+    return this._applyCombination(_splitcomplement, arguments);
+  },
+  // Disabled until https://github.com/bgrins/TinyColor/issues/254
+  // polyad: function (number) {
+  //   return this._applyCombination(polyad, [number]);
+  // },
+  triad: function triad() {
+    return this._applyCombination(polyad, [3]);
+  },
+  tetrad: function tetrad() {
+    return this._applyCombination(polyad, [4]);
+  }
+};
+
+// If input is an object, force 1 into "1.0" to handle ratios properly
+// String input requires "1.0" as input, so 1 will be treated as 1
+tinycolor.fromRatio = function (color, opts) {
+  if (_typeof(color) == "object") {
+    var newColor = {};
+    for (var i in color) {
+      if (color.hasOwnProperty(i)) {
+        if (i === "a") {
+          newColor[i] = color[i];
+        } else {
+          newColor[i] = convertToPercentage(color[i]);
+        }
+      }
+    }
+    color = newColor;
+  }
+  return tinycolor(color, opts);
+};
+
+// Given a string or object, convert that input to RGB
+// Possible string inputs:
+//
+//     "red"
+//     "#f00" or "f00"
+//     "#ff0000" or "ff0000"
+//     "#ff000000" or "ff000000"
+//     "rgb 255 0 0" or "rgb (255, 0, 0)"
+//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+//
+function inputToRGB(color) {
+  var rgb = {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+  var a = 1;
+  var s = null;
+  var v = null;
+  var l = null;
+  var ok = false;
+  var format = false;
+  if (typeof color == "string") {
+    color = stringInputToObject(color);
+  }
+  if (_typeof(color) == "object") {
+    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+      rgb = rgbToRgb(color.r, color.g, color.b);
+      ok = true;
+      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+      s = convertToPercentage(color.s);
+      v = convertToPercentage(color.v);
+      rgb = hsvToRgb(color.h, s, v);
+      ok = true;
+      format = "hsv";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      s = convertToPercentage(color.s);
+      l = convertToPercentage(color.l);
+      rgb = hslToRgb(color.h, s, l);
+      ok = true;
+      format = "hsl";
+    }
+    if (color.hasOwnProperty("a")) {
+      a = color.a;
+    }
+  }
+  a = boundAlpha(a);
+  return {
+    ok: ok,
+    format: color.format || format,
+    r: Math.min(255, Math.max(rgb.r, 0)),
+    g: Math.min(255, Math.max(rgb.g, 0)),
+    b: Math.min(255, Math.max(rgb.b, 0)),
+    a: a
+  };
+}
+
+// Conversion Functions
+// --------------------
+
+// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
+
+// `rgbToRgb`
+// Handle bounds / percentage checking to conform to CSS color spec
+// <http://www.w3.org/TR/css3-color/>
+// *Assumes:* r, g, b in [0, 255] or [0, 1]
+// *Returns:* { r, g, b } in [0, 255]
+function rgbToRgb(r, g, b) {
+  return {
+    r: bound01(r, 255) * 255,
+    g: bound01(g, 255) * 255,
+    b: bound01(b, 255) * 255
+  };
+}
+
+// `rgbToHsl`
+// Converts an RGB color value to HSL.
+// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
+// *Returns:* { h, s, l } in [0,1]
+function rgbToHsl(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0; // achromatic
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: h,
+    s: s,
+    l: l
+  };
+}
+
+// `hslToRgb`
+// Converts an HSL color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  h = bound01(h, 360);
+  s = bound01(s, 100);
+  l = bound01(l, 100);
+  function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+
+// `rgbToHsv`
+// Converts an RGB color value to HSV
+// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+// *Returns:* { h, s, v } in [0,1]
+function rgbToHsv(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    v = max;
+  var d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: h,
+    s: s,
+    v: v
+  };
+}
+
+// `hsvToRgb`
+// Converts an HSV color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+function hsvToRgb(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+  var i = Math.floor(h),
+    f = h - i,
+    p = v * (1 - s),
+    q = v * (1 - f * s),
+    t = v * (1 - (1 - f) * s),
+    mod = i % 6,
+    r = [v, q, p, p, t, v][mod],
+    g = [t, v, v, q, p, p][mod],
+    b = [p, p, t, v, v, q][mod];
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+
+// `rgbToHex`
+// Converts an RGB color to hex
+// Assumes r, g, and b are contained in the set [0, 255]
+// Returns a 3 or 6 character hex
+function rgbToHex(r, g, b, allow3Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+
+  // Return a 3 character hex if possible
+  if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+  }
+  return hex.join("");
+}
+
+// `rgbaToHex`
+// Converts an RGBA color plus alpha transparency to hex
+// Assumes r, g, b are contained in the set [0, 255] and
+// a in [0, 1]. Returns a 4 or 8 character rgba hex
+function rgbaToHex(r, g, b, a, allow4Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
+
+  // Return a 4 character hex if possible
+  if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  }
+  return hex.join("");
+}
+
+// `rgbaToArgbHex`
+// Converts an RGBA color to an ARGB Hex8 string
+// Rarely used, but required for "toFilter()"
+function rgbaToArgbHex(r, g, b, a) {
+  var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+  return hex.join("");
+}
+
+// `equals`
+// Can be called with any tinycolor input
+tinycolor.equals = function (color1, color2) {
+  if (!color1 || !color2) return false;
+  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+};
+tinycolor.random = function () {
+  return tinycolor.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+
+// Modification Functions
+// ----------------------
+// Thanks to less.js for some of the basics here
+// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
+
+function _desaturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s -= amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _saturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s += amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _greyscale(color) {
+  return tinycolor(color).desaturate(100);
+}
+function _lighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l += amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+function _brighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var rgb = tinycolor(color).toRgb();
+  rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
+  rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
+  rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
+  return tinycolor(rgb);
+}
+function _darken(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l -= amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+
+// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+// Values outside of this range will be wrapped into this range.
+function _spin(color, amount) {
+  var hsl = tinycolor(color).toHsl();
+  var hue = (hsl.h + amount) % 360;
+  hsl.h = hue < 0 ? 360 + hue : hue;
+  return tinycolor(hsl);
+}
+
+// Combination Functions
+// ---------------------
+// Thanks to jQuery xColor for some of the ideas behind these
+// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
+
+function _complement(color) {
+  var hsl = tinycolor(color).toHsl();
+  hsl.h = (hsl.h + 180) % 360;
+  return tinycolor(hsl);
+}
+function polyad(color, number) {
+  if (isNaN(number) || number <= 0) {
+    throw new Error("Argument to polyad must be a positive number");
+  }
+  var hsl = tinycolor(color).toHsl();
+  var result = [tinycolor(color)];
+  var step = 360 / number;
+  for (var i = 1; i < number; i++) {
+    result.push(tinycolor({
+      h: (hsl.h + i * step) % 360,
+      s: hsl.s,
+      l: hsl.l
+    }));
+  }
+  return result;
+}
+function _splitcomplement(color) {
+  var hsl = tinycolor(color).toHsl();
+  var h = hsl.h;
+  return [tinycolor(color), tinycolor({
+    h: (h + 72) % 360,
+    s: hsl.s,
+    l: hsl.l
+  }), tinycolor({
+    h: (h + 216) % 360,
+    s: hsl.s,
+    l: hsl.l
+  })];
+}
+function _analogous(color, results, slices) {
+  results = results || 6;
+  slices = slices || 30;
+  var hsl = tinycolor(color).toHsl();
+  var part = 360 / slices;
+  var ret = [tinycolor(color)];
+  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
+    hsl.h = (hsl.h + part) % 360;
+    ret.push(tinycolor(hsl));
+  }
+  return ret;
+}
+function _monochromatic(color, results) {
+  results = results || 6;
+  var hsv = tinycolor(color).toHsv();
+  var h = hsv.h,
+    s = hsv.s,
+    v = hsv.v;
+  var ret = [];
+  var modification = 1 / results;
+  while (results--) {
+    ret.push(tinycolor({
+      h: h,
+      s: s,
+      v: v
+    }));
+    v = (v + modification) % 1;
+  }
+  return ret;
+}
+
+// Utility Functions
+// ---------------------
+
+tinycolor.mix = function (color1, color2, amount) {
+  amount = amount === 0 ? 0 : amount || 50;
+  var rgb1 = tinycolor(color1).toRgb();
+  var rgb2 = tinycolor(color2).toRgb();
+  var p = amount / 100;
+  var rgba = {
+    r: (rgb2.r - rgb1.r) * p + rgb1.r,
+    g: (rgb2.g - rgb1.g) * p + rgb1.g,
+    b: (rgb2.b - rgb1.b) * p + rgb1.b,
+    a: (rgb2.a - rgb1.a) * p + rgb1.a
+  };
+  return tinycolor(rgba);
+};
+
+// Readability Functions
+// ---------------------
+// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
+
+// `contrast`
+// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
+tinycolor.readability = function (color1, color2) {
+  var c1 = tinycolor(color1);
+  var c2 = tinycolor(color2);
+  return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
+};
+
+// `isReadable`
+// Ensure that foreground and background color combinations meet WCAG2 guidelines.
+// The third argument is an optional Object.
+//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
+//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
+// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
+
+// *Example*
+//    tinycolor.isReadable("#000", "#111") => false
+//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
+tinycolor.isReadable = function (color1, color2, wcag2) {
+  var readability = tinycolor.readability(color1, color2);
+  var wcag2Parms, out;
+  out = false;
+  wcag2Parms = validateWCAG2Parms(wcag2);
+  switch (wcag2Parms.level + wcag2Parms.size) {
+    case "AAsmall":
+    case "AAAlarge":
+      out = readability >= 4.5;
+      break;
+    case "AAlarge":
+      out = readability >= 3;
+      break;
+    case "AAAsmall":
+      out = readability >= 7;
+      break;
+  }
+  return out;
+};
+
+// `mostReadable`
+// Given a base color and a list of possible foreground or background
+// colors for that base, returns the most readable color.
+// Optionally returns Black or White if the most readable color is unreadable.
+// *Example*
+//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
+//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
+//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
+//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
+tinycolor.mostReadable = function (baseColor, colorList, args) {
+  var bestColor = null;
+  var bestScore = 0;
+  var readability;
+  var includeFallbackColors, level, size;
+  args = args || {};
+  includeFallbackColors = args.includeFallbackColors;
+  level = args.level;
+  size = args.size;
+  for (var i = 0; i < colorList.length; i++) {
+    readability = tinycolor.readability(baseColor, colorList[i]);
+    if (readability > bestScore) {
+      bestScore = readability;
+      bestColor = tinycolor(colorList[i]);
+    }
+  }
+  if (tinycolor.isReadable(baseColor, bestColor, {
+    level: level,
+    size: size
+  }) || !includeFallbackColors) {
+    return bestColor;
+  } else {
+    args.includeFallbackColors = false;
+    return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
+  }
+};
+
+// Big List of Colors
+// ------------------
+// <https://www.w3.org/TR/css-color-4/#named-colors>
+var names = tinycolor.names = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "0ff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "00f",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  burntsienna: "ea7e5d",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "0ff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "f0f",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+};
+
+// Make it easy to access colors via `hexNames[hex]`
+var hexNames = tinycolor.hexNames = flip(names);
+
+// Utilities
+// ---------
+
+// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
+function flip(o) {
+  var flipped = {};
+  for (var i in o) {
+    if (o.hasOwnProperty(i)) {
+      flipped[o[i]] = i;
+    }
+  }
+  return flipped;
+}
+
+// Return a valid alpha value [0,1] with all invalid values being set to 1
+function boundAlpha(a) {
+  a = parseFloat(a);
+  if (isNaN(a) || a < 0 || a > 1) {
+    a = 1;
+  }
+  return a;
+}
+
+// Take input from [0, n] and return it as [0, 1]
+function bound01(n, max) {
+  if (isOnePointZero(n)) n = "100%";
+  var processPercent = isPercentage(n);
+  n = Math.min(max, Math.max(0, parseFloat(n)));
+
+  // Automatically convert percentage into number
+  if (processPercent) {
+    n = parseInt(n * max, 10) / 100;
+  }
+
+  // Handle floating point rounding errors
+  if (Math.abs(n - max) < 0.000001) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return n % max / parseFloat(max);
+}
+
+// Force a number between 0 and 1
+function clamp01(val) {
+  return Math.min(1, Math.max(0, val));
+}
+
+// Parse a base-16 hex value into a base-10 integer
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+
+// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+function isOnePointZero(n) {
+  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
+}
+
+// Check to see if string passed in is a percentage
+function isPercentage(n) {
+  return typeof n === "string" && n.indexOf("%") != -1;
+}
+
+// Force a hex value to have 2 characters
+function pad2(c) {
+  return c.length == 1 ? "0" + c : "" + c;
+}
+
+// Replace a decimal with it's percentage value
+function convertToPercentage(n) {
+  if (n <= 1) {
+    n = n * 100 + "%";
+  }
+  return n;
+}
+
+// Converts a decimal to a hex value
+function convertDecimalToHex(d) {
+  return Math.round(parseFloat(d) * 255).toString(16);
+}
+// Converts a hex value to a decimal
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
+}
+var matchers = function () {
+  // <http://www.w3.org/TR/css3-values/#integers>
+  var CSS_INTEGER = "[-\\+]?\\d+%?";
+
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
+
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+
+  // Actual matching.
+  // Parentheses and commas are optional, but not required.
+  // Whitespace can take the place of commas or opening paren
+  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  return {
+    CSS_UNIT: new RegExp(CSS_UNIT),
+    rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
+    rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+    hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+    hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+    hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+    hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+  };
+}();
+
+// `isValidCSSUnit`
+// Take in a single string / number and check to see if it looks like a CSS unit
+// (see `matchers` above for definition).
+function isValidCSSUnit(color) {
+  return !!matchers.CSS_UNIT.exec(color);
+}
+
+// `stringInputToObject`
+// Permissive string parsing.  Take in a number of formats, and output an object
+// based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+function stringInputToObject(color) {
+  color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
+  var named = false;
+  if (names[color]) {
+    color = names[color];
+    named = true;
+  } else if (color == "transparent") {
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  }
+
+  // Try to match string input using regular expressions.
+  // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
+  // Just return an object and let the conversion functions handle that.
+  // This way the result will be the same whether the tinycolor is initialized with string or object.
+  var match;
+  if (match = matchers.rgb.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3]
+    };
+  }
+  if (match = matchers.rgba.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsl.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3]
+    };
+  }
+  if (match = matchers.hsla.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsv.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3]
+    };
+  }
+  if (match = matchers.hsva.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hex8.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      a: convertHexToDecimal(match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex6.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  if (match = matchers.hex4.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      a: convertHexToDecimal(match[4] + "" + match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex3.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  return false;
+}
+function validateWCAG2Parms(parms) {
+  // return valid WCAG2 parms for isReadable.
+  // If input parms are invalid, return {"level":"AA", "size":"small"}
+  var level, size;
+  parms = parms || {
+    level: "AA",
+    size: "small"
+  };
+  level = (parms.level || "AA").toUpperCase();
+  size = (parms.size || "small").toLowerCase();
+  if (level !== "AA" && level !== "AAA") {
+    level = "AA";
+  }
+  if (size !== "small" && size !== "large") {
+    size = "small";
+  }
+  return {
+    level: level,
+    size: size
+  };
+}
+
+export { tinycolor as default };
diff --git a/packages/tdesign-uniapp/components/overlay/README.en-US.md b/packages/tdesign-uniapp/components/overlay/README.en-US.md
new file mode 100644
index 000000000..ce132232d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/README.en-US.md
@@ -0,0 +1,34 @@
+
+## API
+
+### Overlay Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+background-color | String | - | \- | N
+duration | Number | 300 | \- | N
+prevent-scroll-through | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | 11000 | \- | N
+
+### Overlay Events
+
+name | params | description
+-- | -- | --
+click | `(context: { visible: boolean })` | \-
+
+### Overlay Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-overlay-bg-color | @mask-active | - 
+--td-overlay-transition-duration | 300ms | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/overlay/README.md b/packages/tdesign-uniapp/components/overlay/README.md
new file mode 100644
index 000000000..c346c2614
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/README.md
@@ -0,0 +1,54 @@
+---
+title: Overlay 遮罩层
+description: 通过遮罩层，可以强调部分内容
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TOverlay from 'tdesign-uniapp/overlay/overlay.vue';
+```
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+### Overlay Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+background-color | String | - | 遮罩层的背景色 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 是否展示 | N
+z-index | Number | 11000 | 遮罩层级 | N
+
+### Overlay Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: { visible: boolean })` | 点击遮罩时触发
+
+### Overlay Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-overlay-bg-color | @mask-active | - |
+| --td-overlay-transition-duration | 300ms | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/overlay/_example/base/index.vue b/packages/tdesign-uniapp/components/overlay/_example/base/index.vue
new file mode 100644
index 000000000..94cb3b5de
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/_example/base/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <t-overlay
+      :visible="visible"
+      :duration="500"
+      @click="handleOverlayClick"
+    />
+
+    <t-button
+      block
+      size="large"
+      theme="primary"
+      variant="outline"
+      @click="handleClick"
+    >
+      基础用法
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tOverlay from 'tdesign-uniapp/overlay/overlay.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tOverlay,
+    tButton,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    handleClick() {
+      this.visible = true;
+    },
+    handleOverlayClick() {
+      this.visible = !this.visible;
+    },
+  },
+};
+</script>
+<style>
+/* @import './index.css'; */
+</style>
diff --git a/packages/tdesign-uniapp/components/overlay/_example/overlay.less b/packages/tdesign-uniapp/components/overlay/_example/overlay.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/_example/overlay.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/overlay/_example/overlay.vue b/packages/tdesign-uniapp/components/overlay/_example/overlay.vue
new file mode 100644
index 000000000..9c2ebd961
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/_example/overlay.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Overlay"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Overlay 遮罩层"
+        desc="通过遮罩层，可以强调部分内容。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础遮罩层"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+export default {
+  components: {
+    BaseDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './overlay.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.less b/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.vue b/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.vue
new file mode 100644
index 000000000..21b74c235
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/_example/skyline/overlay.vue
@@ -0,0 +1,51 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Overlay"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Overlay 遮罩层
+        </view>
+        <view class="demo-desc">
+          通过遮罩层，可以强调部分内容
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础遮罩层"
+          padding
+        >
+          <baseDemo />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './overlay.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/overlay/overlay.less b/packages/tdesign-uniapp/components/overlay/overlay.less
new file mode 100644
index 000000000..cdbde737b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/overlay.less
@@ -0,0 +1,25 @@
+@import '../common/style/base.less';
+
+@overlay: ~'@{prefix}-overlay';
+@overlay-bg-color: var(--td-overlay-bg-color, @mask-active);
+@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms);
+
+.@{overlay} {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: @overlay-bg-color;
+  transition-property: opacity;
+  transition-duration: @overlay-transition-duration;
+  transition-timing-function: ease;
+}
+
+.t-fade-enter {
+  opacity: 0;
+}
+
+.t-fade-leave-to {
+  opacity: 0;
+}
diff --git a/packages/tdesign-uniapp/components/overlay/overlay.vue b/packages/tdesign-uniapp/components/overlay/overlay.vue
new file mode 100644
index 000000000..02a804d9c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/overlay.vue
@@ -0,0 +1,105 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible && preventScrollThrough"
+      :class="prefix + '-overlay ' + transitionClass"
+      :style="_._style([
+        '--td-overlay-transition-duration:' + duration + 'ms',
+        'z-index:' + _zIndex, 'top:' + distanceTop + 'px',
+        computedStyle,
+        customStyle
+      ])"
+      :aria-role="ariaRole || 'button'"
+      :aria-label="ariaLabel || '关闭'"
+      disable-scroll
+      @click.stop="handleClick"
+      @touchmove.stop.prevent="noop"
+      @transitionend="onTransitionEnd"
+    >
+      <slot />
+    </view>
+    <view
+      v-else-if="realVisible"
+      :class="prefix + '-overlay ' + transitionClass "
+      :style="_._style([
+        'z-index:' + _zIndex,
+        'top:' + distanceTop + 'px',
+        computedStyle,
+        customStyle
+      ])"
+      :aria-role="ariaRole || 'button'"
+      :aria-label="ariaLabel || '关闭'"
+      @click.stop="handleClick"
+      @transitionend="onTransitionEnd"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import transition from '../mixins/transition';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-overlay`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [
+    transition(),
+    useCustomNavbar,
+  ],
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'leaved',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      computedStyle: '',
+      _zIndex: 11000,
+      _,
+    };
+  },
+  watch: {
+    backgroundColor: {
+      handler(v) {
+        this.computedStyle = v ? `background-color: ${v};` : '';
+      },
+      immediate: true,
+    },
+    zIndex: {
+      handler(v) {
+        if (v !== 0) {
+          this._zIndex = v;
+        }
+      },
+      immediate: true,
+
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', {
+        visible: !this.visible,
+      });
+    },
+    noop() {},
+  },
+});
+</script>
+<style scoped>
+@import './overlay.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/overlay/props.ts b/packages/tdesign-uniapp/components/overlay/props.ts
new file mode 100644
index 000000000..d09edd56e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/props.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 遮罩层的背景色 */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /** 背景色过渡时间，单位毫秒 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 是否展示 */
+  visible: Boolean,
+  /** 遮罩层级 */
+  zIndex: {
+    type: Number,
+    default: 11000,
+  },
+  /** 点击遮罩时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/overlay/type.ts b/packages/tdesign-uniapp/components/overlay/type.ts
new file mode 100644
index 000000000..b765ecc45
--- /dev/null
+++ b/packages/tdesign-uniapp/components/overlay/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdOverlayProps {
+  /**
+   * 遮罩层的背景色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * 背景色过渡时间，单位毫秒
+   * @default 300
+   */
+  duration?: number;
+  /**
+   * 防止滚动穿透，即不允许点击和滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 是否展示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 遮罩层级
+   * @default 11000
+   */
+  zIndex?: number;
+  /**
+   * 点击遮罩时触发
+   */
+  onClick?: (context: { visible: boolean }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/package.json b/packages/tdesign-uniapp/components/package.json
new file mode 100644
index 000000000..b1c301191
--- /dev/null
+++ b/packages/tdesign-uniapp/components/package.json
@@ -0,0 +1,499 @@
+{
+  "name": "tdesign-uniapp",
+  "id": "tdesign-uniapp",
+  "version": "0.5.5",
+  "author": "novlan1",
+  "title": "tdesign-uniapp",
+  "description": "TDesign Component for uniapp",
+  "typings": "./types/index.d.ts",
+  "exports": {
+    "./*": "./*",
+    "./action-sheet/action-sheet.vue": {
+      "types": "./types/action-sheet.d.ts",
+      "import": "./action-sheet/action-sheet.vue",
+      "default": "./action-sheet/action-sheet.vue"
+    },
+    "./avatar/avatar.vue": {
+      "types": "./types/avatar.d.ts",
+      "import": "./avatar/avatar.vue",
+      "default": "./avatar/avatar.vue"
+    },
+    "./avatar-group/avatar-group.vue": {
+      "types": "./types/avatar-group.d.ts",
+      "import": "./avatar-group/avatar-group.vue",
+      "default": "./avatar-group/avatar-group.vue"
+    },
+    "./back-top/back-top.vue": {
+      "types": "./types/back-top.d.ts",
+      "import": "./back-top/back-top.vue",
+      "default": "./back-top/back-top.vue"
+    },
+    "./badge/badge.vue": {
+      "types": "./types/badge.d.ts",
+      "import": "./badge/badge.vue",
+      "default": "./badge/badge.vue"
+    },
+    "./button/button.vue": {
+      "types": "./types/button.d.ts",
+      "import": "./button/button.vue",
+      "default": "./button/button.vue"
+    },
+    "./calendar/calendar.vue": {
+      "types": "./types/calendar.d.ts",
+      "import": "./calendar/calendar.vue",
+      "default": "./calendar/calendar.vue"
+    },
+    "./cascader/cascader.vue": {
+      "types": "./types/cascader.d.ts",
+      "import": "./cascader/cascader.vue",
+      "default": "./cascader/cascader.vue"
+    },
+    "./cell/cell.vue": {
+      "types": "./types/cell.d.ts",
+      "import": "./cell/cell.vue",
+      "default": "./cell/cell.vue"
+    },
+    "./cell-group/cell-group.vue": {
+      "types": "./types/cell-group.d.ts",
+      "import": "./cell-group/cell-group.vue",
+      "default": "./cell-group/cell-group.vue"
+    },
+    "./check-tag/check-tag.vue": {
+      "types": "./types/check-tag.d.ts",
+      "import": "./check-tag/check-tag.vue",
+      "default": "./check-tag/check-tag.vue"
+    },
+    "./checkbox/checkbox.vue": {
+      "types": "./types/checkbox.d.ts",
+      "import": "./checkbox/checkbox.vue",
+      "default": "./checkbox/checkbox.vue"
+    },
+    "./checkbox-group/checkbox-group.vue": {
+      "types": "./types/checkbox-group.d.ts",
+      "import": "./checkbox-group/checkbox-group.vue",
+      "default": "./checkbox-group/checkbox-group.vue"
+    },
+    "./col/col.vue": {
+      "types": "./types/col.d.ts",
+      "import": "./col/col.vue",
+      "default": "./col/col.vue"
+    },
+    "./collapse/collapse.vue": {
+      "types": "./types/collapse.d.ts",
+      "import": "./collapse/collapse.vue",
+      "default": "./collapse/collapse.vue"
+    },
+    "./collapse-panel/collapse-panel.vue": {
+      "types": "./types/collapse-panel.d.ts",
+      "import": "./collapse-panel/collapse-panel.vue",
+      "default": "./collapse-panel/collapse-panel.vue"
+    },
+    "./color-picker/color-picker.vue": {
+      "types": "./types/color-picker.d.ts",
+      "import": "./color-picker/color-picker.vue",
+      "default": "./color-picker/color-picker.vue"
+    },
+    "./count-down/count-down.vue": {
+      "types": "./types/count-down.d.ts",
+      "import": "./count-down/count-down.vue",
+      "default": "./count-down/count-down.vue"
+    },
+    "./date-time-picker/date-time-picker.vue": {
+      "types": "./types/date-time-picker.d.ts",
+      "import": "./date-time-picker/date-time-picker.vue",
+      "default": "./date-time-picker/date-time-picker.vue"
+    },
+    "./dialog/dialog.vue": {
+      "types": "./types/dialog.d.ts",
+      "import": "./dialog/dialog.vue",
+      "default": "./dialog/dialog.vue"
+    },
+    "./divider/divider.vue": {
+      "types": "./types/divider.d.ts",
+      "import": "./divider/divider.vue",
+      "default": "./divider/divider.vue"
+    },
+    "./drawer/drawer.vue": {
+      "types": "./types/drawer.d.ts",
+      "import": "./drawer/drawer.vue",
+      "default": "./drawer/drawer.vue"
+    },
+    "./dropdown-item/dropdown-item.vue": {
+      "types": "./types/dropdown-item.d.ts",
+      "import": "./dropdown-item/dropdown-item.vue",
+      "default": "./dropdown-item/dropdown-item.vue"
+    },
+    "./dropdown-menu/dropdown-menu.vue": {
+      "types": "./types/dropdown-menu.d.ts",
+      "import": "./dropdown-menu/dropdown-menu.vue",
+      "default": "./dropdown-menu/dropdown-menu.vue"
+    },
+    "./empty/empty.vue": {
+      "types": "./types/empty.d.ts",
+      "import": "./empty/empty.vue",
+      "default": "./empty/empty.vue"
+    },
+    "./fab/fab.vue": {
+      "types": "./types/fab.d.ts",
+      "import": "./fab/fab.vue",
+      "default": "./fab/fab.vue"
+    },
+    "./footer/footer.vue": {
+      "types": "./types/footer.d.ts",
+      "import": "./footer/footer.vue",
+      "default": "./footer/footer.vue"
+    },
+    "./form/form.vue": {
+      "types": "./types/form.d.ts",
+      "import": "./form/form.vue",
+      "default": "./form/form.vue"
+    },
+    "./form-item/form-item.vue": {
+      "types": "./types/form-item.d.ts",
+      "import": "./form-item/form-item.vue",
+      "default": "./form-item/form-item.vue"
+    },
+    "./grid/grid.vue": {
+      "types": "./types/grid.d.ts",
+      "import": "./grid/grid.vue",
+      "default": "./grid/grid.vue"
+    },
+    "./grid-item/grid-item.vue": {
+      "types": "./types/grid-item.d.ts",
+      "import": "./grid-item/grid-item.vue",
+      "default": "./grid-item/grid-item.vue"
+    },
+    "./guide/guide.vue": {
+      "types": "./types/guide.d.ts",
+      "import": "./guide/guide.vue",
+      "default": "./guide/guide.vue"
+    },
+    "./icon/icon.vue": {
+      "types": "./types/icon.d.ts",
+      "import": "./icon/icon.vue",
+      "default": "./icon/icon.vue"
+    },
+    "./image/image.vue": {
+      "types": "./types/image.d.ts",
+      "import": "./image/image.vue",
+      "default": "./image/image.vue"
+    },
+    "./image-viewer/image-viewer.vue": {
+      "types": "./types/image-viewer.d.ts",
+      "import": "./image-viewer/image-viewer.vue",
+      "default": "./image-viewer/image-viewer.vue"
+    },
+    "./indexes/indexes.vue": {
+      "types": "./types/indexes.d.ts",
+      "import": "./indexes/indexes.vue",
+      "default": "./indexes/indexes.vue"
+    },
+    "./indexes-anchor/indexes-anchor.vue": {
+      "types": "./types/indexes-anchor.d.ts",
+      "import": "./indexes-anchor/indexes-anchor.vue",
+      "default": "./indexes-anchor/indexes-anchor.vue"
+    },
+    "./input/input.vue": {
+      "types": "./types/input.d.ts",
+      "import": "./input/input.vue",
+      "default": "./input/input.vue"
+    },
+    "./link/link.vue": {
+      "types": "./types/link.d.ts",
+      "import": "./link/link.vue",
+      "default": "./link/link.vue"
+    },
+    "./loading/loading.vue": {
+      "types": "./types/loading.d.ts",
+      "import": "./loading/loading.vue",
+      "default": "./loading/loading.vue"
+    },
+    "./message/message.vue": {
+      "types": "./types/message.d.ts",
+      "import": "./message/message.vue",
+      "default": "./message/message.vue"
+    },
+    "./navbar/navbar.vue": {
+      "types": "./types/navbar.d.ts",
+      "import": "./navbar/navbar.vue",
+      "default": "./navbar/navbar.vue"
+    },
+    "./notice-bar/notice-bar.vue": {
+      "types": "./types/notice-bar.d.ts",
+      "import": "./notice-bar/notice-bar.vue",
+      "default": "./notice-bar/notice-bar.vue"
+    },
+    "./overlay/overlay.vue": {
+      "types": "./types/overlay.d.ts",
+      "import": "./overlay/overlay.vue",
+      "default": "./overlay/overlay.vue"
+    },
+    "./picker/picker.vue": {
+      "types": "./types/picker.d.ts",
+      "import": "./picker/picker.vue",
+      "default": "./picker/picker.vue"
+    },
+    "./picker-item/picker-item.vue": {
+      "types": "./types/picker-item.d.ts",
+      "import": "./picker-item/picker-item.vue",
+      "default": "./picker-item/picker-item.vue"
+    },
+    "./popup/popup.vue": {
+      "types": "./types/popup.d.ts",
+      "import": "./popup/popup.vue",
+      "default": "./popup/popup.vue"
+    },
+    "./progress/progress.vue": {
+      "types": "./types/progress.d.ts",
+      "import": "./progress/progress.vue",
+      "default": "./progress/progress.vue"
+    },
+    "./pull-down-refresh/pull-down-refresh.vue": {
+      "types": "./types/pull-down-refresh.d.ts",
+      "import": "./pull-down-refresh/pull-down-refresh.vue",
+      "default": "./pull-down-refresh/pull-down-refresh.vue"
+    },
+    "./qrcode/qrcode.vue": {
+      "types": "./types/qrcode.d.ts",
+      "import": "./qrcode/qrcode.vue",
+      "default": "./qrcode/qrcode.vue"
+    },
+    "./radio/radio.vue": {
+      "types": "./types/radio.d.ts",
+      "import": "./radio/radio.vue",
+      "default": "./radio/radio.vue"
+    },
+    "./radio-group/radio-group.vue": {
+      "types": "./types/radio-group.d.ts",
+      "import": "./radio-group/radio-group.vue",
+      "default": "./radio-group/radio-group.vue"
+    },
+    "./rate/rate.vue": {
+      "types": "./types/rate.d.ts",
+      "import": "./rate/rate.vue",
+      "default": "./rate/rate.vue"
+    },
+    "./result/result.vue": {
+      "types": "./types/result.d.ts",
+      "import": "./result/result.vue",
+      "default": "./result/result.vue"
+    },
+    "./row/row.vue": {
+      "types": "./types/row.d.ts",
+      "import": "./row/row.vue",
+      "default": "./row/row.vue"
+    },
+    "./search/search.vue": {
+      "types": "./types/search.d.ts",
+      "import": "./search/search.vue",
+      "default": "./search/search.vue"
+    },
+    "./side-bar/side-bar.vue": {
+      "types": "./types/side-bar.d.ts",
+      "import": "./side-bar/side-bar.vue",
+      "default": "./side-bar/side-bar.vue"
+    },
+    "./side-bar-item/side-bar-item.vue": {
+      "types": "./types/side-bar-item.d.ts",
+      "import": "./side-bar-item/side-bar-item.vue",
+      "default": "./side-bar-item/side-bar-item.vue"
+    },
+    "./skeleton/skeleton.vue": {
+      "types": "./types/skeleton.d.ts",
+      "import": "./skeleton/skeleton.vue",
+      "default": "./skeleton/skeleton.vue"
+    },
+    "./slider/slider.vue": {
+      "types": "./types/slider.d.ts",
+      "import": "./slider/slider.vue",
+      "default": "./slider/slider.vue"
+    },
+    "./step-item/step-item.vue": {
+      "types": "./types/step-item.d.ts",
+      "import": "./step-item/step-item.vue",
+      "default": "./step-item/step-item.vue"
+    },
+    "./stepper/stepper.vue": {
+      "types": "./types/stepper.d.ts",
+      "import": "./stepper/stepper.vue",
+      "default": "./stepper/stepper.vue"
+    },
+    "./steps/steps.vue": {
+      "types": "./types/steps.d.ts",
+      "import": "./steps/steps.vue",
+      "default": "./steps/steps.vue"
+    },
+    "./sticky/sticky.vue": {
+      "types": "./types/sticky.d.ts",
+      "import": "./sticky/sticky.vue",
+      "default": "./sticky/sticky.vue"
+    },
+    "./swipe-cell/swipe-cell.vue": {
+      "types": "./types/swipe-cell.d.ts",
+      "import": "./swipe-cell/swipe-cell.vue",
+      "default": "./swipe-cell/swipe-cell.vue"
+    },
+    "./swiper/swiper.vue": {
+      "types": "./types/swiper.d.ts",
+      "import": "./swiper/swiper.vue",
+      "default": "./swiper/swiper.vue"
+    },
+    "./swiper-nav/swiper-nav.vue": {
+      "types": "./types/swiper-nav.d.ts",
+      "import": "./swiper-nav/swiper-nav.vue",
+      "default": "./swiper-nav/swiper-nav.vue"
+    },
+    "./switch/switch.vue": {
+      "types": "./types/switch.d.ts",
+      "import": "./switch/switch.vue",
+      "default": "./switch/switch.vue"
+    },
+    "./tab-bar/tab-bar.vue": {
+      "types": "./types/tab-bar.d.ts",
+      "import": "./tab-bar/tab-bar.vue",
+      "default": "./tab-bar/tab-bar.vue"
+    },
+    "./tab-bar-item/tab-bar-item.vue": {
+      "types": "./types/tab-bar-item.d.ts",
+      "import": "./tab-bar-item/tab-bar-item.vue",
+      "default": "./tab-bar-item/tab-bar-item.vue"
+    },
+    "./tab-panel/tab-panel.vue": {
+      "types": "./types/tab-panel.d.ts",
+      "import": "./tab-panel/tab-panel.vue",
+      "default": "./tab-panel/tab-panel.vue"
+    },
+    "./tabs/tabs.vue": {
+      "types": "./types/tabs.d.ts",
+      "import": "./tabs/tabs.vue",
+      "default": "./tabs/tabs.vue"
+    },
+    "./tag/tag.vue": {
+      "types": "./types/tag.d.ts",
+      "import": "./tag/tag.vue",
+      "default": "./tag/tag.vue"
+    },
+    "./textarea/textarea.vue": {
+      "types": "./types/textarea.d.ts",
+      "import": "./textarea/textarea.vue",
+      "default": "./textarea/textarea.vue"
+    },
+    "./toast/toast.vue": {
+      "types": "./types/toast.d.ts",
+      "import": "./toast/toast.vue",
+      "default": "./toast/toast.vue"
+    },
+    "./tree-select/tree-select.vue": {
+      "types": "./types/tree-select.d.ts",
+      "import": "./tree-select/tree-select.vue",
+      "default": "./tree-select/tree-select.vue"
+    },
+    "./upload/upload.vue": {
+      "types": "./types/upload.d.ts",
+      "import": "./upload/upload.vue",
+      "default": "./upload/upload.vue"
+    },
+    "./watermark/watermark.vue": {
+      "types": "./types/watermark.d.ts",
+      "import": "./watermark/watermark.vue",
+      "default": "./watermark/watermark.vue"
+    }
+  },
+  "keywords": [
+    "tdesign",
+    "miniprogram",
+    "uniapp",
+    "vue"
+  ],
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev:custom": "uni -p",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:mp-xhs": "uni -p mp-xhs",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:mp-xhs": "uni build -p mp-xhs",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "type-check": "vue-tsc --noEmit",
+    "postinstall": "node ./script/postinstall",
+    "publish": "node ../example/script/release/publish-tdesign-uniapp.js"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-app": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
+    "@dcloudio/uni-automator": "3.0.0-4030620241128001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
+    "@dcloudio/uni-components": "3.0.0-4030620241128001",
+    "@dcloudio/uni-h5": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
+    "@stylistic/eslint-plugin-jsx": "3.1.0",
+    "@types/node": "^24.2.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "8.57.1",
+    "eslint-config-light": "latest",
+    "eslint-config-light-vue3": "latest",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-node": "0.3.9",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "25",
+    "eslint-plugin-light": "latest",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.26.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-tailwindcss": "3.18.0",
+    "eslint-plugin-vue": "9.14.0",
+    "prismjs": "^1.30.0",
+    "typescript": "~4.7.2",
+    "vite": "5.2.8",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.1.9",
+    "vue-tsc": "^1.0.24"
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/picker-item/README.en-US.md b/packages/tdesign-uniapp/components/picker-item/README.en-US.md
new file mode 100644
index 000000000..0538cdd07
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/README.en-US.md
@@ -0,0 +1,16 @@
+:: BASE_DOC ::
+
+## API
+
+### PickerItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+format | Function | - | Typescript：`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
+options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+
+### PickerItem Slots
+
+name | Description
+-- | --
+label-suffix--[index] | \-
diff --git a/packages/tdesign-uniapp/components/picker-item/README.md b/packages/tdesign-uniapp/components/picker-item/README.md
new file mode 100644
index 000000000..efeb6465a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/README.md
@@ -0,0 +1,16 @@
+:: BASE_DOC ::
+
+## API
+
+### PickerItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
+options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+
+### PickerItem Slots
+
+名称 | 描述
+-- | --
+label-suffix--[index] | 列表子项后置插槽，用于自定义标签文本之后的内容。
diff --git a/packages/tdesign-uniapp/components/picker-item/picker-item.less b/packages/tdesign-uniapp/components/picker-item/picker-item.less
new file mode 100644
index 000000000..f8938cb27
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/picker-item.less
@@ -0,0 +1,50 @@
+@import '../common/style/base.less';
+
+@picker: ~'@{prefix}-picker';
+@item: ~'@{picker}-item';
+@picker-group-height: var(--td-picker-group-height, 400rpx);
+@picker-item-color: var(--td-picker-item-color, @text-color-secondary);
+@picker-item-active-color: var(--td-picker-item-active-color, @text-color-primary);
+@picker-item-font-size: var(--td-picker-item-font-size, @font-size-m);
+
+:host {
+  display: flex;
+  // padding: 0 40rpx;
+}
+
+.@{item} {
+  &__group {
+    height: @picker-group-height;
+    overflow: hidden;
+    flex: 1;
+    z-index: 1;
+  }
+
+  &__wrapper {
+    padding: 144rpx 0;
+  }
+
+  &__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: @picker-item-color;
+    font-size: @picker-item-font-size;
+
+    &-icon {
+      font-size: 36rpx;
+      margin-right: @spacer;
+    }
+
+    &-label {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &--active {
+      color: @picker-item-active-color;
+      font-weight: 600;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/picker-item/picker-item.vue b/packages/tdesign-uniapp/components/picker-item/picker-item.vue
new file mode 100644
index 000000000..90a351032
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/picker-item.vue
@@ -0,0 +1,232 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix + '__group', []) + ' ' + tClass"
+    @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <view
+      :class="classPrefix + '__wrapper'"
+      :style="'transition: transform ' + duration + 'ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, ' + offset + 'px, 0)'"
+    >
+      <view
+        v-for="(option, index) in formatOptions"
+        :key="index"
+        :class="_.cls(classPrefix + '__item', [['active', curIndex == index]])"
+        :style="'height: ' + pickItemHeight + 'px'"
+        :data-index="index"
+        @click="onClickItem"
+      >
+        <text :class="classPrefix + '__item-label'">
+          {{ option[pickerKeys.label] }}
+        </text>
+
+        <slot :name="'label-suffix--' + index" />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-picker-item`;
+
+// 动画持续时间
+const ANIMATION_DURATION = 1000;
+// 和上一次move事件间隔小于INERTIA_TIME
+const INERTIA_TIME = 300;
+// 且距离大于`MOMENTUM_DISTANCE`时，执行惯性滚动
+const INERTIA_DISTANCE = 15;
+
+const range = function (num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+
+const momentum = (distance, duration) => {
+  let nDistance = distance;
+  // 惯性滚动的速度
+  const speed = Math.abs(nDistance / duration);
+  // 加速度经验值: 0.005
+  // 惯性滚动的距离
+  nDistance = (speed / 0.005) * (nDistance < 0 ? -1 : 1);
+  return nDistance;
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.PickerItem),
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      offset: 0, // 滚动偏移量
+      duration: 0, // 滚动动画延迟
+      value: '',
+      curIndex: 0,
+      columnIndex: 0,
+      pickerKeys: { value: 'value', label: 'label', icon: 'icon' },
+      formatOptions: props.options.value,
+      _,
+
+      pickItemHeight: undefined,
+    };
+  },
+  watch: {
+    options: {
+      handler() {
+        this.update();
+      },
+      immediate: true,
+    },
+    pickerKeys: {
+      handler() {
+        this.update();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.StartY = 0;
+    this.StartOffset = 0;
+    this.startTime = 0;
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      const parent = this[RELATION_MAP.PickerItem];
+
+      if ('keys' in parent) {
+        const { keys } = parent;
+
+        if (keys === null || JSON.stringify(this.pickerKeys) === JSON.stringify(keys)) return;
+
+        this.pickerKeys = { ...this.pickerKeys, ...keys };
+      }
+    },
+    onClickItem(event) {
+      const { index: clickIndex } = event.currentTarget.dataset;
+      const { pickItemHeight } = this;
+      const index = range(clickIndex, 0, this.getCount() - 1);
+
+      if (index !== this._selectedIndex) {
+        this.offset = -index * pickItemHeight;
+        this.curIndex = index;
+        this.duration = 200;
+      }
+
+      this.updateSelected(index, true);
+    },
+
+    onTouchStart(event) {
+      this.StartY = event.touches[0].clientY;
+      this.StartOffset = this.offset;
+      this.startTime = Date.now();
+
+      this.duration =  0;
+    },
+
+    onTouchMove(event) {
+      const { StartY, StartOffset } = this;
+      const { pickItemHeight } = this;
+      // 偏移增量
+      const deltaY = event.touches[0].clientY - StartY;
+      const newOffset = range(StartOffset + deltaY, -(this.getCount() * pickItemHeight), 0);
+
+      this.offset = newOffset;
+    },
+
+    onTouchEnd(event) {
+      const { offset, pickItemHeight } = this;
+      const { startTime } = this;
+      if (offset === this.StartOffset) {
+        return;
+      }
+
+      // 判断是否需要惯性滚动
+      let distance = 0;
+      const move = event.changedTouches[0].clientY - this.StartY;
+      const moveTime = Date.now() - startTime;
+      if (moveTime < INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+        distance = momentum(move, moveTime);
+      }
+
+      // 调整偏移量
+      const newOffset = range(offset + distance, -this.getCount() * pickItemHeight, 0);
+      const index = range(Math.round(-newOffset / pickItemHeight), 0, this.getCount() - 1);
+
+      this.offset = -index * pickItemHeight;
+      this.duration = ANIMATION_DURATION;
+      this.curIndex = index;
+
+      if (index === this._selectedIndex) return;
+      this.updateSelected(index, true);
+    },
+
+    formatOption(options, columnIndex, format) {
+      if (typeof format !== 'function') return options;
+
+      return options.map(ele => format(ele, columnIndex));
+    },
+
+    updateSelected(index, trigger) {
+      const { columnIndex, pickerKeys, formatOptions } = this;
+      this._selectedIndex = index;
+      this._selectedValue = formatOptions[index]?.[pickerKeys?.value];
+      this._selectedLabel = formatOptions[index]?.[pickerKeys?.label];
+
+      if (trigger) {
+        this[RELATION_MAP.PickerItem]?.triggerColumnChange({
+          index,
+          column: columnIndex,
+        });
+      }
+    },
+
+    // 刷新选中状态
+    update() {
+      const { options, value, pickerKeys, pickItemHeight, format, columnIndex } = this;
+
+      const formatOptions = this.formatOption(options, columnIndex, format);
+
+      const index = formatOptions.findIndex(item => item[pickerKeys?.value] === value);
+      const selectedIndex = index > 0 ? index : 0;
+
+      this.formatOptions = formatOptions;
+      this.offset = -selectedIndex * pickItemHeight;
+      this.curIndex = selectedIndex;
+
+      setTimeout(() => {
+        this.updateSelected(selectedIndex, false);
+      }, 20);
+    },
+
+    getCount() {
+      return this?.options?.length;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './picker-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/picker-item/props.ts b/packages/tdesign-uniapp/components/picker-item/props.ts
new file mode 100644
index 000000000..88771a754
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/props.ts
@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPickerItemProps } from './type';
+export default {
+  /** 格式化标签 */
+  format: {
+    type: Function,
+  },
+  /** 数据源 */
+  options: {
+    type: Array,
+    default: (): TdPickerItemProps['options'] => [],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/picker-item/type.ts b/packages/tdesign-uniapp/components/picker-item/type.ts
new file mode 100644
index 000000000..db8507496
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker-item/type.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdPickerItemProps {
+  /**
+   * 格式化标签
+   */
+  format?: (option: PickerItemOption, columnIndex: number) => PickerItemOption;
+  /**
+   * 数据源
+   * @default []
+   */
+  options?: PickerItemOption[];
+}
+
+export interface PickerItemOption {
+  label: string;
+  value: string | number;
+  icon?: string;
+}
diff --git a/packages/tdesign-uniapp/components/picker/README.en-US.md b/packages/tdesign-uniapp/components/picker/README.en-US.md
new file mode 100644
index 000000000..a669a32f3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/README.en-US.md
@@ -0,0 +1,81 @@
+:: BASE_DOC ::
+
+## API
+
+### Picker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-close | Boolean | true | \- | N
+cancel-btn | String / Boolean | true | Typescript: `boolean \| string` | N
+confirm-btn | String / Boolean | true | Typescript: `boolean \| string` | N
+header | Boolean | true | \- | N
+item-height | Number | 80 | \- | N
+keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+popup-props | Object | {} | popup properties。Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+title | String | '' | \- | N
+use-popup | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+value | Array | - | `v-model:value` is supported。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+default-value | Array | - | uncontrolled property。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+visible | Boolean | false | \- | N
+
+### Picker Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+change | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> })` | \-
+close | `(context: { trigger: TriggerSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+confirm | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> })` | \-
+pick | `(context: { value: Array<PickerValue>, label: string, column: number, index: number })` | \-
+
+### Picker Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+footer | \-
+header | \-
+
+
+### PickerItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+format | Function | - | Typescript: `(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
+options | Array | [] | Typescript: `PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker-item/type.ts) | N
+
+### PickerItem Slots
+
+name | Description
+-- | --
+label-suffix-index | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-picker-bg-color | @bg-color-container | - 
+--td-picker-border-radius | 24rpx | - 
+--td-picker-button-font-size | 32rpx | - 
+--td-picker-cancel-color | @text-color-secondary | - 
+--td-picker-confirm-color | @brand-color | - 
+--td-picker-indicator-bg-color | @bg-color-secondarycontainer | - 
+--td-picker-indicator-border-radius | 12rpx | - 
+--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | - 
+--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | - 
+--td-picker-title-color | @text-color-primary | - 
+--td-picker-title-font-size | 36rpx | - 
+--td-picker-title-font-weight | 600 | - 
+--td-picker-title-line-height | 52rpx | - 
+--td-picker-toolbar-height | 116rpx | - 
+--td-picker-transparent-color | --td-picker-transparent-color | - 
+--td-picker-group-height | 400rpx | - 
+--td-picker-item-active-color | @text-color-primary | - 
+--td-picker-item-color | @text-color-secondary | - 
+--td-picker-item-font-size | @font-size-m | -
diff --git a/packages/tdesign-uniapp/components/picker/README.md b/packages/tdesign-uniapp/components/picker/README.md
new file mode 100644
index 000000000..4bc16fb02
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/README.md
@@ -0,0 +1,116 @@
+---
+title: Picker 选择器
+description: 用于一组预设数据中的选择。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TPicker from 'tdesign-uniapp/picker/picker.vue';
+import TPickerItem from 'tdesign-uniapp/picker-item/picker-item.vue';
+```
+
+### 组件类型
+
+#### 基础选择器
+
+单项和多选选择
+
+{{ base }}
+
+#### 地区选择器
+
+支持省市区切换，支持数据联动
+
+{{ area }}
+
+### 组件样式
+
+是否带标题
+
+{{ with-title }}
+
+## API
+
+### Picker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible | N
+cancel-btn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean \| string` | N
+confirm-btn | String / Boolean | true | 确定按钮文字。TS 类型：`boolean \| string` | N
+header | Boolean | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 | N
+item-height | Number | 80 | PickerItem 的子项高度，单位 rpx | N
+keys | Object | - | 用来定义 value / label / icon 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+title | String | '' | 标题 | N
+use-popup | Boolean | true | 是否使用弹出层包裹 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+default-value | Array | - | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts) | N
+visible | Boolean | false | 是否显示。支持语法糖 `v-model:visible` | N
+
+### Picker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 点击取消按钮时触发
+change | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> })` | 选中变化时候触发，即确认变化时触发
+close | `(context: { trigger: TriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
+confirm | `(context: { value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number; disabled?: boolean; }> })` | 点击确认按钮时触发
+pick | `(context: { value: Array<PickerValue>, label: string, column: number, index: number })` | 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
+
+### Picker Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容
+content | 中间内容，介于头部跟内容之间
+footer | 底部内容
+header | 自定义 `header` 显示内容
+
+
+### PickerItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
+options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/picker-item/type.ts) | N
+
+### PickerItem Slots
+
+名称 | 描述
+-- | --
+label-suffix-index | 列表子项后置插槽，用于自定义标签文本之后的内容。
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-picker-bg-color | @bg-color-container | - |
+| --td-picker-border-radius | 24rpx | - |
+| --td-picker-button-font-size | 32rpx | - |
+| --td-picker-cancel-color | @text-color-secondary | - |
+| --td-picker-confirm-color | @brand-color | - |
+| --td-picker-indicator-bg-color | @bg-color-secondarycontainer | - |
+| --td-picker-indicator-border-radius | 12rpx | - |
+| --td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | - |
+| --td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | - |
+| --td-picker-title-color | @text-color-primary | - |
+| --td-picker-title-font-size | 36rpx | - |
+| --td-picker-title-font-weight | 600 | - |
+| --td-picker-title-line-height | 52rpx | - |
+| --td-picker-toolbar-height | 116rpx | - |
+| --td-picker-transparent-color | --td-picker-transparent-color | - |
+| --td-picker-group-height | 400rpx | - |
+| --td-picker-item-active-color | @text-color-primary | - |
+| --td-picker-item-color | @text-color-secondary | - |
+| --td-picker-item-font-size | @font-size-m | - |
diff --git a/packages/tdesign-uniapp/components/picker/_example/area/index.vue b/packages/tdesign-uniapp/components/picker/_example/area/index.vue
new file mode 100644
index 000000000..91c0232e7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/area/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <view>
+    <t-cell
+      title="选择地区"
+      arrow
+      hover
+      :note="areaText"
+      @click="onAreaPicker"
+    />
+
+    <t-picker
+      v-model:visible="areaVisible"
+      :value="areaValue"
+      title="选择地区"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange"
+      @pick="onColumnChange"
+      @cancel="onPickerCancel"
+    >
+      <t-picker-item :options="provinces" />
+      <t-picker-item :options="cities" />
+      <t-picker-item :options="counties" />
+    </t-picker>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tPicker from 'tdesign-uniapp/picker/picker.vue';
+import tPickerItem from 'tdesign-uniapp/picker-item/picker-item.vue';
+const areaList = {
+  provinces: {
+    110000: '北京市',
+    440000: '广东省',
+  },
+  cities: {
+    110100: '北京市',
+    440100: '广州市',
+    440200: '韶关市',
+    440300: '深圳市',
+    440400: '珠海市',
+    440500: '汕头市',
+    440600: '佛山市',
+  },
+  counties: {
+    110101: '东城区',
+    110102: '西城区',
+    110105: '朝阳区',
+    110106: '丰台区',
+    110107: '石景山区',
+    110108: '海淀区',
+    110109: '门头沟区',
+    110111: '房山区',
+    110112: '通州区',
+    110113: '顺义区',
+    110114: '昌平区',
+    110115: '大兴区',
+    110116: '怀柔区',
+    110117: '平谷区',
+    110118: '密云区',
+    110119: '延庆区',
+    440103: '荔湾区',
+    440104: '越秀区',
+    440105: '海珠区',
+    440106: '天河区',
+    440111: '白云区',
+    440112: '黄埔区',
+    440113: '番禺区',
+    440114: '花都区',
+    440115: '南沙区',
+    440117: '从化区',
+    440118: '增城区',
+    440203: '武江区',
+    440204: '浈江区',
+    440205: '曲江区',
+    440222: '始兴县',
+    440224: '仁化县',
+    440229: '翁源县',
+    440232: '乳源瑶族自治县',
+    440233: '新丰县',
+    440281: '乐昌市',
+    440282: '南雄市',
+    440303: '罗湖区',
+    440304: '福田区',
+    440305: '南山区',
+    440306: '宝安区',
+    440307: '龙岗区',
+    440308: '盐田区',
+    440309: '龙华区',
+    440310: '坪山区',
+    440311: '光明区',
+    440402: '香洲区',
+    440403: '斗门区',
+    440404: '金湾区',
+    440507: '龙湖区',
+    440511: '金平区',
+    440512: '濠江区',
+    440513: '潮阳区',
+    440514: '潮南区',
+    440515: '澄海区',
+    440523: '南澳县',
+    440604: '禅城区',
+    440605: '南海区',
+    440606: '顺德区',
+    440607: '三水区',
+    440608: '高明区',
+  },
+};
+const getOptions = (obj, filter) => {
+  const res = Object.keys(obj).map(key => ({
+    value: key,
+    label: obj[key],
+  }));
+  if (filter) {
+    return res.filter(filter);
+  }
+  return res;
+};
+const match = (v1, v2, size) => v1.toString().slice(0, size) === v2.toString().slice(0, size);
+export default {
+  components: {
+    tCell,
+    tPicker,
+    tPickerItem,
+  },
+  data() {
+    return {
+      areaText: '',
+      areaValue: [],
+      provinces: getOptions(areaList.provinces),
+      cities: [],
+      counties: [],
+      areaVisible: false,
+    };
+  },
+  mounted() {
+    // 处理小程序 ready 生命周期
+    this.$nextTick(() => this.ready());
+  },
+  created() {},
+  methods: {
+    ready() {
+      this.init();
+    },
+
+    init() {
+      const { provinces } = this;
+      const { cities, counties } = this.getCities(provinces[0].value);
+      this.cities = cities;
+      this.counties = counties;
+    },
+
+    onColumnChange(e) {
+      console.log('pick:', e);
+      const { column, index } = e;
+      const { provinces, cities } = this;
+      if (column === 0) {
+        // 更改省份
+        const { cities, counties } = this.getCities(provinces[index].value);
+        this.cities = cities;
+        this.counties = counties;
+      }
+      if (column === 1) {
+        // 更改城市
+        const counties = this.getCounties(cities[index].value);
+        this.counties = counties;
+      }
+      if (column === 2) {
+        // 更改区县
+      }
+    },
+
+    getCities(provinceValue) {
+      const cities = getOptions(areaList.cities, city => match(city.value, provinceValue, 2));
+      const counties = this.getCounties(cities[0].value);
+      return {
+        cities,
+        counties,
+      };
+    },
+
+    getCounties(cityValue) {
+      return getOptions(areaList.counties, county => match(county.value, cityValue, 4));
+    },
+
+    onPickerChange(e) {
+      const { value, label } = e;
+      console.log('picker confirm:', e);
+      this.areaVisible = false;
+      this.areaValue = value;
+      this.areaText =  label.join(' ');
+    },
+
+    onPickerCancel(e) {
+      console.log('picker cancel', e);
+      this.areaVisible = false;
+      if (this.areaValue.length) {
+        return;
+      }
+      this.init();
+    },
+
+    onAreaPicker() {
+      this.areaVisible = true;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/_example/base/index.vue b/packages/tdesign-uniapp/components/picker/_example/base/index.vue
new file mode 100644
index 000000000..ab15cf051
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/base/index.vue
@@ -0,0 +1,216 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <view>
+    <t-cell
+      t-class="mb-16"
+      title="选择城市"
+      arrow
+      hover
+      :note="cityText"
+      @click="onCityPicker"
+    />
+
+    <t-cell
+      t-class="mb-16"
+      title="选择时间"
+      arrow
+      hover
+      :note="dateText"
+      @click="onSeasonPicker"
+    />
+
+    <t-picker
+      v-model:visible="cityVisible"
+      :value="cityValue"
+      data-key="city"
+      title="选择城市"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange($event, { key: 'city' })"
+      @pick="onColumnChange($event, { key: 'city' })"
+      @cancel="onPickerCancel($event, { key: 'city' })"
+    >
+      <t-picker-item
+        :options="citys"
+        :format="formatter"
+      >
+        <block
+          v-for="(option, index) in citys"
+          :key="index"
+        >
+          <view
+            v-if="option.tag"
+            :slot="'label-suffix--' + index"
+            class="label-suffix"
+          >
+            <t-tag
+              size="small"
+              theme="primary"
+            >
+              {{ option.tag }}
+            </t-tag>
+          </view>
+        </block>
+      </t-picker-item>
+    </t-picker>
+
+    <t-picker
+      v-model:visible="dateVisible"
+      :value="dateValue"
+      data-key="date"
+      title="选择时间"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange($event, { key: 'date' })"
+      @pick="onColumnChange($event, { key: 'date' })"
+      @cancel="onPickerCancel($event, { key: 'date' })"
+    >
+      <t-picker-item :options="years" />
+      <t-picker-item :options="seasons" />
+    </t-picker>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tPicker from 'tdesign-uniapp/picker/picker.vue';
+import tPickerItem from 'tdesign-uniapp/picker-item/picker-item.vue';
+import tTag from 'tdesign-uniapp/tag/tag.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tCell,
+    tPicker,
+    tPickerItem,
+    tTag,
+  },
+  data() {
+    return {
+      cityText: '',
+      cityValue: [],
+      dateText: '',
+      dateValue: [],
+
+      citys: [
+        {
+          label: '北京市',
+          value: '北京市',
+          tag: '合',
+        },
+        {
+          label: '上海市',
+          value: '上海市',
+          tag: '合',
+        },
+        {
+          label: '广州市',
+          value: '广州市',
+        },
+        {
+          label: '深圳市',
+          value: '深圳市',
+        },
+        {
+          label: '成都市',
+          value: '成都市',
+        },
+      ],
+
+      years: [
+        {
+          label: '2021年',
+          value: '2021',
+        },
+        {
+          label: '2020年',
+          value: '2020',
+        },
+        {
+          label: '2019年',
+          value: '2019',
+        },
+      ],
+
+      seasons: [
+        {
+          label: '春',
+          value: '春',
+        },
+        {
+          label: '夏',
+          value: '夏',
+        },
+        {
+          label: '秋',
+          value: '秋',
+        },
+        {
+          label: '冬',
+          value: '冬',
+        },
+      ],
+
+      formatter(item) {
+        const { value, label } = item;
+        if (value === '北京市') {
+          return {
+            value,
+            label: label.substring(0, 2),
+          };
+        }
+        return item;
+      },
+
+      cityVisible: false,
+      dateVisible: false,
+
+      option: {
+        tag: '',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    onColumnChange(e, { key }) {
+      console.log('picker pick:', { e, key });
+    },
+    onPickerChange(e, { key }) {
+      console.log('picker change:', { e, key });
+      const { value } = e;
+      this[`${key}Visible`] = false;
+      this[`${key}Value`] = value;
+      this[`${key}Text`] = value.join(' ');
+    },
+    onPickerCancel(e, { key }) {
+      console.log(e, '取消');
+      console.log('picker cancel: ', { e, key });
+
+      this[`${key}Visible`] = false;
+    },
+    onCityPicker() {
+      this.cityVisible = true;
+    },
+    onSeasonPicker() {
+      this.dateVisible = true;
+    },
+  },
+};
+</script>
+<style>
+:deep(.mb-16) {
+    margin-bottom: 32rpx;
+}
+
+.label-suffix {
+    --td-tag-small-height: 32rpx;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 12rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/_example/picker.less b/packages/tdesign-uniapp/components/picker/_example/picker.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/picker/_example/picker.vue b/packages/tdesign-uniapp/components/picker/_example/picker.vue
new file mode 100644
index 000000000..f810f56eb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/picker.vue
@@ -0,0 +1,56 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Picker"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="area-picker-demo">
+      <t-demo-header
+        title="Picker 选择器"
+        desc="用于一组预设数据中的选择。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础选择器"
+      >
+        <BaseDemo />
+        <area>
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="是否带标题"
+      >
+        <with-title />
+      </t-demo>
+
+      <!-- <areaDemo /> -->
+      <!-- <withoutPopup /> -->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import withTitle from './with-title/index.vue';
+// import areaDemo from './area/index.vue';
+// import withoutPopup from './without-popup/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    withTitle,
+    // areaDemo,
+    // withoutPopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+@import './picker.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/_example/skyline/picker.less b/packages/tdesign-uniapp/components/picker/_example/skyline/picker.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/picker/_example/skyline/picker.vue b/packages/tdesign-uniapp/components/picker/_example/skyline/picker.vue
new file mode 100644
index 000000000..5d9a1bd1b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/skyline/picker.vue
@@ -0,0 +1,65 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Picker"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="area-picker-demo">
+        <view class="demo-title">
+          Picker 选择器
+        </view>
+        <view class="demo-desc">
+          用于一组预设数据中的选择。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础选择器"
+        >
+          <labelDemo />
+          <areaDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件样式"
+          desc="是否带标题"
+        >
+          <with-title />
+        </t-demo>
+        <t-demo desc="不使用 Popup">
+          <without-popup />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import labelDemo from '../base/index.vue';
+import withTitle from '../with-title/index.vue';
+import areaDemo from '../area/index.vue';
+import withoutPopup from '../without-popup/index.vue';
+export default {
+  components: {
+    tNavbar,
+    labelDemo,
+    withTitle,
+    areaDemo,
+    withoutPopup,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './picker.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/_example/with-title/index.vue b/packages/tdesign-uniapp/components/picker/_example/with-title/index.vue
new file mode 100644
index 000000000..1b7af42d5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/with-title/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <view>
+    <t-cell
+      t-class="mb-16"
+      title="带标题选择器"
+      arrow
+      hover
+      :note="cityText"
+      @click="onTitlePicker"
+    />
+
+    <t-cell
+      title="无标题选择器"
+      arrow
+      hover
+      :note="city2Text"
+      @click="onWithoutTitlePicker"
+    />
+
+    <t-picker
+      v-model:visible="cityVisible"
+      :value="cityValue"
+      data-key="city"
+      :title="cityTitle"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange($event, { key: 'city' })"
+      @pick="onColumnChange($event, { key: 'city' })"
+      @cancel="onPickerCancel($event, { key: 'city' })"
+    >
+      <t-picker-item :options="citys" />
+    </t-picker>
+
+    <t-picker
+      v-model:visible="city2Visible"
+      :value="city2Value"
+      data-key="city2"
+      :title="city2Title"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange($event, { key: 'city2' })"
+      @pick="onColumnChange($event, { key: 'city2' })"
+      @cancel="onPickerCancel($event, { key: 'city2' })"
+    >
+      <t-picker-item :options="citys" />
+    </t-picker>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tPicker from 'tdesign-uniapp/picker/picker.vue';
+import tPickerItem from 'tdesign-uniapp/picker-item/picker-item.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tCell,
+    tPicker,
+    tPickerItem,
+  },
+  data() {
+    return {
+      cityText: '',
+      city2Text: '',
+      cityValue: [],
+      city2Value: [],
+      cityTitle: '',
+      city2Title: '',
+
+      citys: [
+        {
+          label: '北京市',
+          value: '北京市',
+        },
+        {
+          label: '上海市',
+          value: '上海市',
+        },
+        {
+          label: '广州市',
+          value: '广州市',
+        },
+        {
+          label: '深圳市',
+          value: '深圳市',
+        },
+        {
+          label: '成都市',
+          value: '成都市',
+        },
+      ],
+
+      cityVisible: false,
+      city2Visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onColumnChange(e, { key }) {
+      console.log('picker pick:', { e, key });
+    },
+    onPickerChange(e, { key }) {
+      const { value } = e;
+      console.log('picker change:', e);
+
+      this[`${key}Visible`] = false;
+      this[`${key}Value`] = value;
+      this[`${key}Text`] = value.join(' ');
+    },
+    onPickerCancel(e, { key }) {
+      console.log('picker1 cancel:', e, key);
+      this[`${key}Visible`] = false;
+    },
+    onTitlePicker() {
+      this.cityVisible = true;
+      this.cityTitle =  '选择城市';
+    },
+    onWithoutTitlePicker() {
+      this.city2Visible = true;
+      this.city2Title = '';
+    },
+  },
+};
+</script>
+<style>
+:deep(.mb-16) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/_example/without-popup/index.vue b/packages/tdesign-uniapp/components/picker/_example/without-popup/index.vue
new file mode 100644
index 000000000..0db3fa097
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/_example/without-popup/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <view>
+    <t-picker
+      v-model:visible="cityVisible"
+      :value="cityValue"
+      :use-popup="false"
+      data-key="city"
+      :title="cityTitle"
+      cancel-btn="取消"
+      confirm-btn="确认"
+      :using-custom-navbar="!isMPAlipay"
+      @change="onPickerChange($event, { key: 'city' })"
+      @pick="onColumnChange($event, { key: 'city' })"
+      @cancel="onPickerCancel($event, { key: 'city' })"
+    >
+      <t-picker-item :options="citys" />
+    </t-picker>
+  </view>
+</template>
+
+<script>
+import tPicker from 'tdesign-uniapp/picker/picker.vue';
+import tPickerItem from 'tdesign-uniapp/picker-item/picker-item.vue';
+export default {
+  components: {
+    tPicker,
+    tPickerItem,
+  },
+  data() {
+    return {
+      cityValue: [],
+      cityTitle: '',
+
+      citys: [
+        {
+          label: '北京市',
+          value: '北京市',
+        },
+        {
+          label: '上海市',
+          value: '上海市',
+        },
+        {
+          label: '广州市',
+          value: '广州市',
+        },
+        {
+          label: '深圳市',
+          value: '深圳市',
+        },
+        {
+          label: '成都市',
+          value: '成都市',
+        },
+      ],
+
+      cityVisible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onColumnChange(e) {
+      console.log('picker pick:', e);
+    },
+    onPickerChange(e, { key }) {
+      const { value } = e;
+      console.log('picker change:', e);
+      this[`${key}Visible`] = false;
+      this[`${key}Value`] = value;
+      this[`${key}Text`] = value.join(' ');
+    },
+    onPickerCancel(e, { key }) {
+      console.log(e, '取消');
+      console.log('picker1 cancel:');
+      this[`${key}Visible`] = false;
+    },
+  },
+};
+</script>
+<style>
+.mb-16 {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/picker.less b/packages/tdesign-uniapp/components/picker/picker.less
new file mode 100644
index 000000000..49286d728
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/picker.less
@@ -0,0 +1,108 @@
+@import '../common/style/base.less';
+
+@picker: ~'@{prefix}-picker';
+
+@picker-border-radius: var(--td-picker-border-radius, 24rpx);
+@picker-toolbar-height: var(--td-picker-toolbar-height, 116rpx);
+
+@picker-cancel-color: var(--td-picker-cancel-color, @text-color-secondary);
+@picker-confirm-color: var(--td-picker-confirm-color, @brand-color);
+@picker-button-font-size: var(--td-picker-button-font-size, 32rpx);
+
+@picker-title-font-size: var(--td-picker-title-font-size, 36rpx);
+@picker-title-font-weight: var(--td-picker-title-font-weight, 600);
+@picker-title-line-height: var(--td-picker-title-line-height, 52rpx);
+@picker-title-color: var(--td-picker-title-color, @text-color-primary);
+
+@picker-bg-color: var(--td-picker-bg-color, @bg-color-container);
+@picker-mask-color: var(--td-picker-transparent-color);
+@picker-mask-color-top: var(--td-picker-mask-color-top, hsla(0, 0%, 100%, 0.92));
+@picker-mask-color-bottom: var(--td-picker-mask-color-bottom, hsla(0, 0%, 100%, 0.4));
+
+@picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer);
+@picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 12rpx);
+
+.@{picker} {
+  position: relative;
+  background-color: @picker-bg-color;
+  border-top-left-radius: @picker-border-radius;
+  border-top-right-radius: @picker-border-radius;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    height: @picker-toolbar-height;
+  }
+
+  &__title {
+    flex: 1;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: @picker-title-color;
+    line-height: @picker-title-line-height;
+    font-weight: @picker-title-font-weight;
+    font-size: @picker-title-font-size;
+  }
+
+  &__cancel,
+  &__confirm {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    font-size: @picker-button-font-size;
+    height: 100%;
+    padding: 0 32rpx;
+  }
+
+  &__cancel {
+    color: @picker-cancel-color;
+  }
+
+  &__confirm {
+    color: @picker-confirm-color;
+  }
+
+  &__main {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    padding-left: 64rpx;
+    padding-right: 64rpx;
+  }
+
+  &__mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    backface-visibility: hidden;
+    pointer-events: none;
+    height: 96rpx;
+
+    &--top {
+      top: 0;
+      background: linear-gradient(180deg, @picker-bg-color 0%, @picker-mask-color 100%);
+    }
+
+    &--bottom {
+      bottom: 0;
+      background: linear-gradient(180deg, @picker-bg-color 0%, @picker-mask-color 100%);
+      transform: matrix(1, 0, 0, -1, 0, 0);
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    left: 32rpx;
+    right: 32rpx;
+    top: 144rpx;
+    pointer-events: none;
+    background-color: @picker-indicator-bg-color;
+    border-radius: @picker-indicator-border-radius;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/picker/picker.vue b/packages/tdesign-uniapp/components/picker/picker.vue
new file mode 100644
index 000000000..455c7677f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/picker.vue
@@ -0,0 +1,274 @@
+<template>
+  <view>
+    <t-popup
+      v-if="usePopup"
+      :visible="dataVisible"
+      placement="bottom"
+      :using-custom-navbar="usingCustomNavbar || popupProps?.usingCustomNavbar"
+      :custom-navbar-height="coalesce(customNavbarHeight, popupProps?.usingCustomNavbar)"
+      :z-index="popupProps?.zIndex || defaultPopUpzIndex"
+      :overlay-props="popupProps?.overlayProps || defaultPopUpProps"
+      @visible-change="onPopupChange"
+    >
+      <template #content>
+        <view
+          :style="_._style([customStyle])"
+          :class="classPrefix + ' ' + tClass"
+        >
+          <view
+            v-if="header"
+            :class="classPrefix + '__toolbar'"
+          >
+            <view
+              v-if="cancelBtn"
+              :class="classPrefix + '__cancel ' + tClassCancel"
+              @click="onCancel"
+            >
+              {{ cancelBtn }}
+            </view>
+            <view :class="classPrefix + '__title ' + tClassTitle">
+              {{ title }}
+            </view>
+            <view
+              v-if="confirmBtn"
+              :class="classPrefix + '__confirm ' + tClassConfirm"
+              @click="onConfirm"
+            >
+              {{ confirmBtn }}
+            </view>
+          </view>
+          <slot name="header" />
+          <slot name="content" />
+          <view
+            :class="_.cls(classPrefix + '__main', [])"
+            disable-scroll
+          >
+            <slot />
+            <view :class="classPrefix + '__mask ' + classPrefix + '__mask--top'" />
+            <view :class="classPrefix + '__mask ' + classPrefix + '__mask--bottom'" />
+            <view
+              :class="classPrefix + '__indicator'"
+              :style="'height: ' + pickItemHeight + 'px'"
+            />
+          </view>
+          <slot name="footer" />
+        </view>
+      </template>
+    </t-popup>
+
+    <block v-else>
+      <view
+        :style="_._style([customStyle])"
+        :class="classPrefix + ' ' + tClass"
+      >
+        <view
+          v-if="header"
+          :class="classPrefix + '__toolbar'"
+        >
+          <view
+            v-if="cancelBtn"
+            :class="classPrefix + '__cancel ' + tClassCancel"
+            @click="onCancel"
+          >
+            {{ cancelBtn }}
+          </view>
+          <view :class="classPrefix + '__title ' + tClassTitle">
+            {{ title }}
+          </view>
+          <view
+            v-if="confirmBtn"
+            :class="classPrefix + '__confirm ' + tClassConfirm"
+            @click="onConfirm"
+          >
+            {{ confirmBtn }}
+          </view>
+        </view>
+        <slot name="header" />
+        <slot name="content" />
+        <view
+          :class="_.cls(classPrefix + '__main', [])"
+          disable-scroll
+        >
+          <slot />
+          <view :class="classPrefix + '__mask ' + classPrefix + '__mask--top'" />
+          <view :class="classPrefix + '__mask ' + classPrefix + '__mask--bottom'" />
+          <view
+            :class="classPrefix + '__indicator'"
+            :style="'height: ' + pickItemHeight + 'px'"
+          />
+        </view>
+        <slot name="footer" />
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import tPopup from '../popup/popup';
+import { uniComponent } from '../common/src/index';
+import { rpx2px, coalesce } from '../common/utils';
+import { prefix } from '../common/config';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-picker`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-confirm`,
+    `${prefix}-class-cancel`,
+    `${prefix}-class-title`,
+  ],
+  components: {
+    tPopup,
+  },
+  mixins: [
+    ParentMixin(RELATION_MAP.PickerItem),
+    useCustomNavbar,
+  ],
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      defaultPopUpProps: {},
+      defaultPopUpzIndex: 11500,
+      pickItemHeight: 0,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+      dataVisible: this.visible,
+    };
+  },
+  watch: {
+    value: {
+      handler(value) {
+        this.dataValue = value;
+      },
+      immediate: true,
+    },
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+    dataVisible: {
+      handler() {
+        this.updateChildren();
+        setTimeout(() => {
+          this.updateChildren();
+        });
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler() {
+        this.updateChildren();
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.children?.map((column, index) => (column.columnIndex = index));
+
+    this.pickItemHeight = rpx2px(this.itemHeight);
+    setTimeout(() => {
+      this.updateChildren();
+    });
+  },
+  methods: {
+    coalesce,
+    innerAfterLinked() {
+      this.updateChildren();
+    },
+    updateChildren() {
+      const { pickItemHeight } = this;
+      const { value, defaultValue } = this;
+
+      this.children?.forEach((child, index) => {
+        child.value = coalesce(value?.[index], defaultValue?.[index], '');
+        child.columnIndex = index;
+        child.pickItemHeight = pickItemHeight;
+
+        child.update();
+      });
+    },
+
+    getSelectedValue() {
+      const value = this.children?.map(item => item._selectedValue);
+      const label = this.children?.map(item => item._selectedLabel);
+      return [value, label];
+    },
+
+    getColumnIndexes() {
+      const columns = this.children?.map((pickerColumn, columnIndex) => ({
+        column: columnIndex,
+        index: pickerColumn._selectedIndex,
+      }));
+      return columns;
+    },
+
+    onConfirm() {
+      const [value, label] = this.getSelectedValue();
+      const columns = this.getColumnIndexes();
+
+      this.close('confirm-btn');
+      this.$emit('confirm', { value, label, columns });
+
+      if (JSON.stringify(this.dataValue) === JSON.stringify(value)) return;
+      this.$emit('change', { value, label, columns });
+    },
+
+    triggerColumnChange({ column, index }) {
+      const [value, label] = this.getSelectedValue();
+      this.$emit('pick', { value, label, column, index });
+    },
+
+    onCancel() {
+      this.close('cancel-btn');
+      this.$emit('cancel');
+    },
+
+    onPopupChange(e) {
+      const { visible } = e;
+
+      this.close('overlay');
+      this.$emit('visible-change', { visible });
+      this.$emit('update:visible', visible);
+    },
+
+    close(trigger) {
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.$emit('update:visible', false);
+      }
+      this.$emit('close', { trigger });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './picker.css';
+
+/* #ifndef MP-WEIXIN */
+/* 适配 qq 小程序等 */
+:deep(t-picker-item) {
+  z-index: 1;
+  flex: 1;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/picker/props.ts b/packages/tdesign-uniapp/components/picker/props.ts
new file mode 100644
index 000000000..b66cbb7ee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/props.ts
@@ -0,0 +1,90 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPickerProps } from './type';
+export default {
+  /** 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 取消按钮文字 */
+  cancelBtn: {
+    type: [String, Boolean],
+    default: true as TdPickerProps['cancelBtn'],
+  },
+  /** 确定按钮文字 */
+  confirmBtn: {
+    type: [String, Boolean],
+    default: true as TdPickerProps['confirmBtn'],
+  },
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
+  header: {
+    type: Boolean,
+    default: true as TdPickerProps['header'],
+  },
+  /** PickerItem 的子项高度，单位 rpx */
+  itemHeight: {
+    type: Number,
+    default: 80,
+  },
+  /** 用来定义 value / label / icon 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '',
+  },
+  /** 是否使用弹出层包裹 */
+  usePopup: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 选中值 */
+  value: {
+    type: Array,
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: Array,
+  },
+  /** 是否显示。支持语法糖 `v-model:visible` */
+  visible: Boolean,
+  /** 点击取消按钮时触发 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选中变化时候触发，即确认变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击确认按钮时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标 */
+  onPick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/picker/type.ts b/packages/tdesign-uniapp/components/picker/type.ts
new file mode 100644
index 000000000..3ee9df71d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/picker/type.ts
@@ -0,0 +1,109 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+import type { KeysType } from '../common/common';
+
+export interface TdPickerProps {
+  /**
+   * 自动关闭；在确认、取消、点击遮罩层自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 取消按钮文字
+   * @default true
+   */
+  cancelBtn?: boolean | string;
+  /**
+   * 确定按钮文字
+   * @default true
+   */
+  confirmBtn?: boolean | string;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
+   * @default true
+   */
+  header?: boolean;
+  /**
+   * PickerItem 的子项高度，单位 rpx
+   * @default 80
+   */
+  itemHeight?: number;
+  /**
+   * 用来定义 value / label / icon 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 是否使用弹出层包裹
+   * @default true
+   */
+  usePopup?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 选中值
+   */
+  value?: Array<PickerValue>;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: Array<PickerValue>;
+  /**
+   * 是否显示。支持语法糖 `v-model:visible`
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 点击取消按钮时触发
+   * @default ''
+   */
+  onCancel?: () => void;
+  /**
+   * 选中变化时候触发，即确认变化时触发
+   * @default ''
+   */
+  onChange?: (context: {
+    value: Array<PickerValue>;
+    label: string;
+    columns: Array<{ column: number; index: number; disabled?: boolean }>;
+  }) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: TriggerSource }) => void;
+  /**
+   * 点击确认按钮时触发
+   * @default ''
+   */
+  onConfirm?: (context: {
+    value: Array<PickerValue>;
+    label: string;
+    columns: Array<{ column: number; index: number; disabled?: boolean }>;
+  }) => void;
+  /**
+   * 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
+   * @default ''
+   */
+  onPick?: (context: { value: Array<PickerValue>; label: string; column: number; index: number }) => void;
+}
+
+export type PickerValue = string | number;
+
+export type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn';
diff --git a/packages/tdesign-uniapp/components/popup/README.en-US.md b/packages/tdesign-uniapp/components/popup/README.en-US.md
new file mode 100644
index 000000000..eea1c8a12
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/README.en-US.md
@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+
+### Popup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+close-btn | Boolean | - | \- | N
+close-on-overlay-click | Boolean | true | \- | N
+content | String | - | \- | N
+duration | Number | 240 | \- | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/popup/type.ts) | N
+placement | String | top | options: top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | - | `v-model:visible` is supported。Typescript：`boolean` | N
+default-visible | Boolean | - | uncontrolled property。Typescript：`boolean` | N
+z-index | Number | 11500 | \- | N
+
+### Popup Events
+
+name | params | description
+-- | -- | --
+visible-change | `(context: { visible: boolean, trigger: PopupSource }) ` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+### Popup Slots
+
+name | Description
+-- | --
+\- | \-
+close-btn | \-
+content | \-
+
+### Popup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-extraLarge | - 
+--td-popup-close-btn-color | @text-color-primary | - 
+--td-popup-distance-top | 0) | - 
+--td-popup-transition | all 300ms ease | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/popup/README.md b/packages/tdesign-uniapp/components/popup/README.md
new file mode 100644
index 000000000..5f10d260f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/README.md
@@ -0,0 +1,82 @@
+---
+title: Popup 弹出层
+description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TPopup from 'tdesign-uniapp/popup/popup.vue';
+```
+
+### 组件类型
+
+基础弹出层
+
+{{ base }}
+
+### 组件示例
+
+应用示例
+
+{{ with-title }}
+
+{{ custom-close }}
+
+## API
+
+### Popup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+close-btn | Boolean | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String | - | 浮层里面的内容 | N
+duration | Number | 240 | 动画过渡时间 | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/popup/type.ts) | N
+placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | 是否阻止背景滚动 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model:visible`。TS 类型：`boolean` | N
+default-visible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N
+z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 | N
+
+### Popup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(context: { visible: boolean, trigger: PopupSource }) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+### Popup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+close-btn | 自定义 `close-btn` 显示内容
+content | 自定义 `content` 显示内容
+
+### Popup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-popup-bg-color | @bg-color-container | - |
+| --td-popup-border-radius | @radius-extraLarge | - |
+| --td-popup-close-btn-color | @text-color-primary | - |
+| --td-popup-distance-top | 0) | - |
+| --td-popup-transition | all 300ms ease | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/popup/_example/base/index.vue b/packages/tdesign-uniapp/components/popup/_example/base/index.vue
new file mode 100644
index 000000000..dc5b77cb4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/base/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <view>
+    <t-popup
+      :visible="visible"
+      :using-custom-navbar="!isMPAlipay"
+      :placement="cur.value || 'top'"
+      @visible-change="onVisibleChange"
+    >
+      <view :class="'block block--' + cur.value">
+        {{ cur.text }}
+      </view>
+    </t-popup>
+
+    <t-button
+      v-for="(item, index) in position"
+      :key="index"
+      block
+      size="large"
+      variant="outline"
+      theme="primary"
+      :data-item="item"
+      :custom-style="index === item.length - 1 ? '' : 'margin-bottom: 16px;'"
+      @click="handlePopup($event, { item })"
+    >
+      {{ item.text }}
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tPopup,
+    tButton,
+  },
+  data() {
+    return {
+      cur: {
+        value: '',
+        text: '',
+      },
+
+      position: [
+        {
+          value: 'top',
+          text: '顶部弹出',
+        },
+        {
+          value: 'left',
+          text: '左侧弹出',
+        },
+        {
+          value: 'center',
+          text: '中间弹出',
+        },
+        {
+          value: 'bottom',
+          text: '底部弹出',
+        },
+        {
+          value: 'right',
+          text: '右侧弹出',
+        },
+      ],
+
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    handlePopup(e, { item }) {
+      this.cur = item;
+
+      setTimeout(() => {
+        this.visible = true;
+      });
+    },
+    onVisibleChange({ visible }) {
+      this.visible = visible;
+    },
+  },
+};
+</script>
+<style scoped>
+.block {
+    color: var(--td-text-color-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.block--top,
+.block--bottom {
+    width: 100vw;
+    height: 240px;
+}
+
+.block--left,
+.block--right {
+    width: 280px;
+    height: 100%;
+}
+
+.block--center {
+    width: 240px;
+    height: 240px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/_example/custom-close/index.vue b/packages/tdesign-uniapp/components/popup/_example/custom-close/index.vue
new file mode 100644
index 000000000..f5f2152bc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/custom-close/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <view>
+    <t-popup
+      :visible="visible"
+      placement="center"
+      @visible-change="onVisibleChange"
+    >
+      <view class="block">
+        <t-icon
+          name="close-circle"
+          :custom-style="closeIconCustomStyle"
+          size="64rpx"
+          color="#fff"
+          @click="onClose"
+        />
+      </view>
+    </t-popup>
+
+    <t-button
+      block
+      size="large"
+      variant="outline"
+      theme="primary"
+      custom-style="display: block; margin-top: 32rpx"
+      @click="handlePopup"
+    >
+      居中弹出层-带自定义关闭按钮
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tPopup,
+    tIcon,
+    tButton,
+  },
+  data() {
+    return {
+      cur: {},
+
+      position: [
+        {
+          value: 'top',
+          text: '顶部弹出',
+        },
+        {
+          value: 'left',
+          text: '左侧弹出',
+        },
+        {
+          value: 'center',
+          text: '中间弹出',
+        },
+        {
+          value: 'bottom',
+          text: '底部弹出',
+        },
+        {
+          value: 'right',
+          text: '右侧弹出',
+        },
+      ],
+
+      visible: false,
+
+      closeIconCustomStyle: _._style({
+        position: 'absolute',
+        left: '50%',
+        marginLeft: '-16px',
+        bottom: 'calc(-1 * (24px + 32px))',
+      }),
+    };
+  },
+  created() {},
+  methods: {
+    handlePopup() {
+      this.visible = true;
+    },
+    onVisibleChange({ visible }) {
+      this.visible = visible;
+    },
+    onClose() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style scoped>
+.block {
+    position: relative;
+    width: 240px;
+    height: 240px;
+    background: var(--td-bg-color-container);
+    border-radius: 16rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/_example/popup.less b/packages/tdesign-uniapp/components/popup/_example/popup.less
new file mode 100644
index 000000000..3a80c0dc3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/popup.less
@@ -0,0 +1,4 @@
+page {
+    background-color: var(--td-bg-color-container);
+    padding-bottom: 48rpx;
+}
diff --git a/packages/tdesign-uniapp/components/popup/_example/popup.vue b/packages/tdesign-uniapp/components/popup/_example/popup.vue
new file mode 100644
index 000000000..43a8c930d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/popup.vue
@@ -0,0 +1,72 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Popup"
+      left-arrow
+    />
+    <!-- #endif -->
+    <t-demo-header
+      title="Popup 弹出层"
+      desc="由其他控件触发，屏幕滑出或弹出一块自定义内容区域。"
+      notice="渲染框架支持情况：Skyline、WebView"
+    />
+    <view class="tdesign-demo-popup">
+      <t-demo
+        title="01 组件类型"
+        desc="基础弹出层"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件示例"
+        desc="应用示例"
+        padding
+      >
+        <with-title />
+        <custom-close />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import BaseDemo from './base/index.vue';
+import withTitle from './with-title/index.vue';
+import customClose from './custom-close/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    withTitle,
+    customClose,
+  },
+  data() {
+    return {
+      bottom: false,
+      center: false,
+      left: false,
+      right: false,
+      placement: '',
+    };
+  },
+  methods: {
+    handlePopup(e: any) {
+      const placement = e.currentTarget.dataset.type;
+      this.placement = placement;
+      this[placement] = true;
+    },
+
+    onVisibleChange({ detail }) {
+      const { visible } = detail;
+      if (this.placement) {
+        this[this.placement] = visible;
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './popup.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/_example/skyline/popup.less b/packages/tdesign-uniapp/components/popup/_example/skyline/popup.less
new file mode 100644
index 000000000..88f6ee6b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/skyline/popup.less
@@ -0,0 +1,2 @@
+page {
+}
diff --git a/packages/tdesign-uniapp/components/popup/_example/skyline/popup.vue b/packages/tdesign-uniapp/components/popup/_example/skyline/popup.vue
new file mode 100644
index 000000000..7f43546ff
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/skyline/popup.vue
@@ -0,0 +1,63 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Popup"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        Popup 弹出层
+      </view>
+      <view class="demo-desc">
+        由其他控件触发，屏幕滑出或弹出一块自定义内容区域。
+      </view>
+      <view class="tdesign-demo-popup">
+        <t-demo
+          title="01 组件类型"
+          desc="基础弹出层"
+          padding
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件示例"
+          desc="应用示例"
+          padding
+        >
+          <with-title />
+          <custom-close style="display: block; margin-top: 32rpx" />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import withTitle from '../with-title/index.vue';
+import customClose from '../custom-close/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    withTitle,
+    customClose,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './popup.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/_example/with-title/index.vue b/packages/tdesign-uniapp/components/popup/_example/with-title/index.vue
new file mode 100644
index 000000000..a50b8e807
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/_example/with-title/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <view>
+    <t-popup
+      :visible="visible"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <view class="block">
+        <view class="header">
+          <view
+            class="btn btn--cancel"
+            aria-role="button"
+          >
+            取消
+          </view>
+          <view class="title">
+            标题文字
+          </view>
+          <view
+            class="btn btn--confirm"
+            aria-role="button"
+          >
+            确定
+          </view>
+        </view>
+      </view>
+    </t-popup>
+
+    <t-button
+      block
+      size="large"
+      variant="outline"
+      theme="primary"
+      @click="handlePopup"
+    >
+      底部弹出层-带标题及操作
+    </t-button>
+  </view>
+</template>
+
+<script>
+import tPopup from 'tdesign-uniapp/popup/popup.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tPopup,
+    tButton,
+  },
+  data() {
+    return {
+      cur: {},
+
+      position: [
+        {
+          value: 'top',
+          text: '顶部弹出',
+        },
+        {
+          value: 'left',
+          text: '左侧弹出',
+        },
+        {
+          value: 'center',
+          text: '中间弹出',
+        },
+        {
+          value: 'bottom',
+          text: '底部弹出',
+        },
+        {
+          value: 'right',
+          text: '右侧弹出',
+        },
+      ],
+
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    handlePopup() {
+      this.visible = true;
+    },
+    onVisibleChange({ visible }) {
+      this.visible = visible;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.block {
+  width: 100vw;
+  height: 240px;
+  background: var(--td-bg-color-container);
+  border-top-left-radius: 16rpx;
+  border-top-right-radius: 16rpx;
+  .header {
+    display: flex;
+    align-items: center;
+    height: 116rpx;
+  }
+
+  .title {
+    flex: 1;
+    text-align: center;
+    font-weight: 600;
+    font-size: 36rpx;
+    color: var(--td-text-color-primary);
+  }
+
+  .btn {
+    font-size: 32rpx;
+    padding: 32rpx;
+  }
+
+  .btn--cancel {
+    color: var(--td-text-color-secondary);
+  }
+
+  .btn--confirm {
+    color: #0052d9;
+  }
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/computed.js b/packages/tdesign-uniapp/components/popup/computed.js
new file mode 100644
index 000000000..9f5fef825
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/computed.js
@@ -0,0 +1,11 @@
+function getPopupStyles(zIndex, distanceTop, placement) {
+  let zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  if ((placement === 'top' || placement === 'left' || placement === 'right') && distanceTop) {
+    zIndexStyle = `${zIndexStyle}top:${distanceTop}px;` + `--td-popup-distance-top:${distanceTop}px;`;
+  }
+  return zIndexStyle;
+}
+
+export default {
+  getPopupStyles,
+};
diff --git a/packages/tdesign-uniapp/components/popup/popup.less b/packages/tdesign-uniapp/components/popup/popup.less
new file mode 100644
index 000000000..5cd1d02ba
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/popup.less
@@ -0,0 +1,104 @@
+@import '../common/style/base.less';
+
+@popup: ~'@{prefix}-popup';
+@popup-position: ~'@{popup}--position';
+@popup-transition: ~'@{popup}--transition';
+
+@popup-bg-color: var(--td-popup-bg-color, @bg-color-container);
+@popup-border-radius: var(--td-popup-border-radius, @radius-extraLarge);
+
+@popup-close-btn-color: var(--td-popup-close-btn-color, @text-color-primary);
+
+.@{popup} {
+  position: fixed;
+  z-index: 11500;
+  max-height: calc(100vh - var(--td-popup-distance-top, 0));
+  transition: var(--td-popup-transition, all 300ms ease);
+  background-color: @popup-bg-color;
+
+  &__content {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 20rpx;
+    line-height: 1;
+    color: @popup-close-btn-color;
+  }
+
+  &--top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    border-bottom-left-radius: @popup-border-radius;
+    border-bottom-right-radius: @popup-border-radius;
+  }
+
+  &--bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-top-left-radius: @popup-border-radius;
+    border-top-right-radius: @popup-border-radius;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &--left {
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+
+  &--right {
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+
+  &--center {
+    top: 50%;
+    left: 50%;
+    transform: scale(1) translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+    border-radius: @popup-border-radius;
+  }
+
+  &.@{prefix}-fade-enter,
+  &.@{prefix}-fade-leave-to {
+    &.@{popup}--top {
+      transform: translateY(-100%);
+      transform-origin: 0% 0%;
+    }
+
+    &.@{popup}--bottom {
+      transform: translateY(100%);
+    }
+
+    &.@{popup}--left {
+      transform: translateX(-100%);
+    }
+
+    &.@{popup}--right {
+      transform: translateX(100%);
+    }
+
+    &.@{popup}--center {
+      transform: scale(0.6) translate3d(-50%, -50%, 0);
+      opacity: 0;
+    }
+  }
+
+  &.@{prefix}-dialog-enter,
+  &.@{prefix}-dialog-leave-to {
+    &.@{popup}--center {
+      transform: scale(0.6) translate3d(-50%, -50%, 0);
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/popup/popup.vue b/packages/tdesign-uniapp/components/popup/popup.vue
new file mode 100644
index 000000000..71b987c9b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/popup.vue
@@ -0,0 +1,138 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible"
+      :style="_._style([popup.getPopupStyles(zIndex, distanceTop, placement), customStyle])"
+      :class="_.cls(classPrefix, [placement]) + ' ' + transitionClass + ' ' + tClass"
+      @transitionend="onTransitionEnd"
+    >
+      <view
+        v-if="innerPreventScrollThrough"
+        :class="classPrefix + '__content ' + tClassContent"
+        @touchmove.stop.prevent="noop"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+
+      <view
+        v-else
+        :class="classPrefix + '__content ' + tClassContent"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+    </view>
+    <t-overlay
+      v-if="showOverlay"
+      id="popup-overlay"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :z-index="(overlayProps && overlayProps.zIndex) || 11000"
+      :duration="(overlayProps && overlayProps.duration) || 300"
+      :background-color="(overlayProps && overlayProps.backgroundColor) || ''"
+      :prevent-scroll-through="preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)"
+      :custom-style="(overlayProps && overlayProps.style) || ''"
+      @click="handleOverlayClick($event, { tagId: 'popup-overlay' })"
+    />
+  </view>
+</template>
+<script>
+import tOverlay from '../overlay/overlay';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { transitionMixins } from '../mixins/transition';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+import popup from './computed.js';
+
+delete props.visible;
+
+const name = `${prefix}-popup`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [transitionMixins, useCustomNavbar],
+  components: {
+    tOverlay,
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'leaved',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      popup,
+      _,
+    };
+  },
+  computed: {
+    innerPreventScrollThrough() {
+      const { preventScrollThrough, overlayProps } = this;
+      return preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false);
+    },
+  },
+  methods: {
+    noop() {},
+    handleOverlayClick() {
+      const { closeOnOverlayClick } = this;
+      if (closeOnOverlayClick) {
+        this.$emit('visible-change', { visible: false, trigger: 'overlay' });
+      }
+    },
+
+    handleClose() {
+      this.$emit('visible-change', { visible: false, trigger: 'close-btn' });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './popup.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/popup/props.ts b/packages/tdesign-uniapp/components/popup/props.ts
new file mode 100644
index 000000000..06ebf8a25
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/props.ts
@@ -0,0 +1,67 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps } from './type';
+export default {
+  /** 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 */
+  closeBtn: {
+    type: Boolean,
+  },
+  /** 点击遮罩层是否关闭 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: true,
+  },
+  /** 浮层里面的内容 */
+  content: {
+    type: String,
+  },
+  /** 动画过渡时间 */
+  duration: {
+    type: Number,
+    default: 240,
+  },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 浮层出现位置 */
+  placement: {
+    type: String,
+    default: 'top' as TdPopupProps['placement'],
+    validator(val: TdPopupProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'left', 'right', 'bottom', 'center'].includes(val);
+    },
+  },
+  /** 是否阻止背景滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 是否显示浮层 */
+  visible: Boolean,
+  /** 是否显示浮层，非受控属性 */
+  defaultVisible: Boolean,
+  /** 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 当浮层隐藏或显示时触发 */
+  onVisibleChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/popup/type.ts b/packages/tdesign-uniapp/components/popup/type.ts
new file mode 100644
index 000000000..8bdadf244
--- /dev/null
+++ b/packages/tdesign-uniapp/components/popup/type.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdPopupProps {
+  /**
+   * 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮
+   */
+  closeBtn?: boolean;
+  /**
+   * 点击遮罩层是否关闭
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 浮层里面的内容
+   */
+  content?: string;
+  /**
+   * 动画过渡时间
+   * @default 240
+   */
+  duration?: number;
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 浮层出现位置
+   * @default top
+   */
+  placement?: 'top' | 'left' | 'right' | 'bottom' | 'center';
+  /**
+   * 是否阻止背景滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 是否显示浮层
+   */
+  visible?: boolean;
+  /**
+   * 是否显示浮层，非受控属性
+   */
+  defaultVisible?: boolean;
+  /**
+   * 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 当浮层隐藏或显示时触发
+   */
+  onVisibleChange?: (context: { visible: boolean; trigger: PopupSource }) => void;
+}
+
+export type PopupSource = 'close-btn' | 'overlay';
diff --git a/packages/tdesign-uniapp/components/progress/README.en-US.md b/packages/tdesign-uniapp/components/progress/README.en-US.md
new file mode 100644
index 000000000..754138568
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/README.en-US.md
@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+
+### Progress Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
+label | String / Boolean | true | \- | N
+percentage | Number | 0 | \- | N
+size | String / Number | 'default' | \- | N
+status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/progress/type.ts) | N
+stroke-width | String / Number | - | \- | N
+theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/progress/type.ts) | N
+track-color | String | '' | \- | N
+
+### Progress Slots
+
+name | Description
+-- | --
+label | \-
+
+### Progress External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-bar | \-
+t-class-label | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-progress-info-dark-color | @text-color-primary | - 
+--td-progress-info-light-color | @text-color-anti | - 
+--td-progress-inner-bg-color-active | @bg-color-container | - 
+--td-progress-inner-bg-color-error | @error-color | - 
+--td-progress-inner-bg-color-success | @success-color | - 
+--td-progress-inner-bg-color-warning | @warning-color | - 
+--td-progress-circle-inner-bg-color | @text-color-anti | - 
+--td-progress-circle-label-font-size | 40rpx | - 
+--td-progress-circle-label-font-weight | 700 | - 
+--td-progress-circle-label-line-height | 56rpx | - 
+--td-progress-circle-width | 224rpx | - 
+--td-progress-inner-bg-color | @brand-color | - 
+--td-progress-line-stroke-width | 12rpx | - 
+--td-progress-stroke-circle-width | 12rpx | - 
+--td-progress-stroke-plump-width | 40rpx | - 
+--td-progress-track-bg-color | @bg-color-component | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/progress/README.md b/packages/tdesign-uniapp/components/progress/README.md
new file mode 100644
index 000000000..b73ed3958
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/README.md
@@ -0,0 +1,88 @@
+---
+title: Progress 进度条
+description: 用于展示任务当前的进度。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+### 引入组件
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TProgress from 'tdesign-uniapp/progress/progress.vue';
+```
+
+### 01 组件类型
+
+{{ base }}
+
+### 02 组件状态
+
+线性进度条
+
+{{ line }}
+
+百分比内显进度条
+
+{{ plump }}
+
+环形进度条
+
+{{ circle }}
+
+## API
+
+### Progress Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array<string> \| Record<string, string>` | N
+label | String / Boolean | true | 进度百分比，可自定义 | N
+percentage | Number | 0 | 进度条百分比 | N
+size | String / Number | 'default' | 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 | N
+status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/progress/type.ts) | N
+stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | N
+theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/progress/type.ts) | N
+track-color | String | '' | 进度条未完成部分颜色 | N
+
+### Progress Slots
+
+名称 | 描述
+-- | --
+label | 进度百分比
+
+### Progress External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-bar | 进度文字样式类
+t-class-label | 标签样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-progress-info-dark-color | @text-color-primary | - |
+| --td-progress-info-light-color | @text-color-anti | - |
+| --td-progress-inner-bg-color-active | @bg-color-container | - |
+| --td-progress-inner-bg-color-error | @error-color | - |
+| --td-progress-inner-bg-color-success | @success-color | - |
+| --td-progress-inner-bg-color-warning | @warning-color | - |
+| --td-progress-circle-inner-bg-color | @text-color-anti | - |
+| --td-progress-circle-label-font-size | 40rpx | - |
+| --td-progress-circle-label-font-weight | 700 | - |
+| --td-progress-circle-label-line-height | 56rpx | - |
+| --td-progress-circle-width | 224rpx | - |
+| --td-progress-inner-bg-color | @brand-color | - |
+| --td-progress-line-stroke-width | 12rpx | - |
+| --td-progress-stroke-circle-width | 12rpx | - |
+| --td-progress-stroke-plump-width | 40rpx | - |
+| --td-progress-track-bg-color | @bg-color-component | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/progress/_example/base/index.vue b/packages/tdesign-uniapp/components/progress/_example/base/index.vue
new file mode 100644
index 000000000..6852abd4d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/base/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      基础进度条
+    </view>
+    <view class="demo-wrapper">
+      <t-progress :percentage="80" />
+    </view>
+
+    <view class="demo-desc">
+      百分比内显
+    </view>
+    <view class="demo-wrapper">
+      <t-progress
+        theme="plump"
+        :percentage="80"
+      />
+    </view>
+
+    <view class="demo-desc">
+      环形进度条
+    </view>
+    <view
+      v-if="!skylineRender"
+      class="demo-wrapper"
+    >
+      <t-progress
+        theme="circle"
+        :percentage="30"
+      />
+    </view>
+
+    <view class="demo-desc">
+      微型环形进度条
+    </view>
+    <view
+      v-if="!skylineRender"
+      class="demo-wrapper"
+    >
+      <t-progress
+        theme="circle"
+        size="micro"
+        :percentage="30"
+        :label="false"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+export default {
+  components: {
+    tProgress,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-wrapper {
+    padding: 0 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/circle/index.vue b/packages/tdesign-uniapp/components/progress/_example/circle/index.vue
new file mode 100644
index 000000000..48f205b2e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/circle/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <t-demo
+      v-if="!skylineRender"
+      desc="环形进度条"
+      padding
+    >
+      <t-progress
+        theme="circle"
+        :percentage="80"
+      />
+      <t-progress
+        theme="circle"
+        :percentage="88"
+        status="warning"
+      />
+      <t-progress
+        theme="circle"
+        :percentage="88"
+        status="error"
+      />
+      <t-progress
+        theme="circle"
+        :percentage="88"
+        status="success"
+      />
+    </t-demo>
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  components: {
+    tProgress,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/custom/index.vue b/packages/tdesign-uniapp/components/progress/_example/custom/index.vue
new file mode 100644
index 000000000..54f44f791
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/custom/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view>
+    <t-progress
+      :percentage="88"
+      track-color="#EAC9FF"
+      color="#CD04FF"
+      t-class-label="external-class-label"
+    />
+    <t-progress
+      :percentage="88"
+      t-class-bar="external-class-bar"
+    />
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tProgress,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.external-class-label {
+    color: #d504d9;
+}
+
+:deep(.external-class-bar) {
+    border-radius: 10px !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/line/index.vue b/packages/tdesign-uniapp/components/progress/_example/line/index.vue
new file mode 100644
index 000000000..fd09f9781
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/line/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <view>
+    <t-progress :percentage="80" />
+    <t-progress
+      :percentage="88"
+      status="warning"
+    />
+    <t-progress
+      :percentage="88"
+      status="error"
+    />
+    <t-progress
+      :percentage="88"
+      status="success"
+    />
+    <t-progress
+      :percentage="88"
+      color=""
+      status="active"
+    />
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+export default {
+  components: {
+    tProgress,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/plump/index.vue b/packages/tdesign-uniapp/components/progress/_example/plump/index.vue
new file mode 100644
index 000000000..925729ff1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/plump/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <view>
+    <t-progress
+      theme="plump"
+      :percentage="80"
+    />
+    <t-progress
+      theme="plump"
+      :percentage="88"
+      status="warning"
+    />
+    <t-progress
+      theme="plump"
+      :percentage="88"
+      status="error"
+    />
+    <t-progress
+      theme="plump"
+      :percentage="88"
+      status="success"
+    />
+    <t-progress
+      theme="plump"
+      :color="{ from: '#0052D9', to: '#00A870' }"
+      :percentage="88"
+      status="active"
+    />
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+export default {
+  components: {
+    tProgress,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/progress.less b/packages/tdesign-uniapp/components/progress/_example/progress.less
new file mode 100644
index 000000000..3bf006f15
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/progress.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+:deep(.t-progress) {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/progress/_example/progress.vue b/packages/tdesign-uniapp/components/progress/_example/progress.vue
new file mode 100644
index 000000000..56a32b4f8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/progress.vue
@@ -0,0 +1,80 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Progress"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Progress 进度条"
+          desc="用于展示任务当前的进度。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo title="01 组件类型">
+          <BaseDemo />
+        </t-demo>
+        <t-demo
+          desc="过渡样式"
+          padding
+        >
+          <transitionDemo />
+        </t-demo>
+        <t-demo
+          desc="自定义颜色/圆角"
+          padding
+        >
+          <custom />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="线性进度条"
+          padding
+        >
+          <lineDemo />
+        </t-demo>
+        <t-demo
+          desc="百分比内显进度条"
+          padding
+        >
+          <plump />
+        </t-demo>
+        <circleDemo />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import transitionDemo from './transition/index.vue';
+import custom from './custom/index.vue';
+import lineDemo from './line/index.vue';
+import plump from './plump/index.vue';
+import circleDemo from './circle/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    transitionDemo,
+    custom,
+    lineDemo,
+    plump,
+    circleDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './progress.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/skyline/progress.less b/packages/tdesign-uniapp/components/progress/_example/skyline/progress.less
new file mode 100644
index 000000000..0a6904970
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/skyline/progress.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.t-progress {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/progress/_example/skyline/progress.vue b/packages/tdesign-uniapp/components/progress/_example/skyline/progress.vue
new file mode 100644
index 000000000..0d604e986
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/skyline/progress.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <demo-progress />
+  </view>
+</template>
+
+<script lang="ts">
+
+import demoProgress from '../progress.vue';
+export default {
+  components: {
+    demoProgress,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './progress.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/_example/transition/index.vue b/packages/tdesign-uniapp/components/progress/_example/transition/index.vue
new file mode 100644
index 000000000..277c1f2b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/_example/transition/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <view>
+    <t-progress
+      :percentage="percentage"
+      :aria-label="percentage + '%'"
+    />
+
+    <view class="button-group">
+      <t-button
+        theme="primary"
+        size="small"
+        @click="clickReduce"
+      >
+        减少
+      </t-button>
+      <view class="space" />
+      <t-button
+        theme="primary"
+        size="small"
+        @click="clickAdd"
+      >
+        增加
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tProgress from 'tdesign-uniapp/progress/progress.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  components: {
+    tProgress,
+    tButton,
+  },
+  data() {
+    return {
+      percentage: 88,
+    };
+  },
+  created() {},
+  methods: {
+    clickAdd() {
+      this.percentage = Math.min(this.percentage + 10, 100);
+    },
+    clickReduce() {
+      this.percentage = Math.max(0, this.percentage - 10);
+    },
+  },
+};
+</script>
+<style>
+.button-group {
+    display: flex;
+    justify-content: center;
+}
+
+.button-group .space {
+    width: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/computed.js b/packages/tdesign-uniapp/components/progress/computed.js
new file mode 100644
index 000000000..aa6bb0f54
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/computed.js
@@ -0,0 +1,81 @@
+import utils from '../common/utils.wxs';
+
+const STATUS = ['success', 'error', 'warning'];
+const STATUS_TEXT = ['success', 'error', 'warning', 'active'];
+
+const PRO_THEME = {
+  LINE: 'line',
+  PLUMP: 'plump',
+  CIRCLE: 'circle',
+};
+
+const STATUS_COLOR = {
+  success: '#00a870',
+  error: '#e34d59',
+  warning: '#ed7b2f',
+};
+
+const LINE_STATUS_ICON = {
+  success: 'check-circle-filled',
+  error: 'error-circle-filled',
+  warning: 'error-circle-filled',
+};
+
+const CIRCLE_STATUS_ICON = {
+  success: 'check',
+  error: 'close',
+  warning: 'error',
+};
+
+/**
+ *
+ * 1. getIOSAriaLabel， getAndroidAriaLabel 两个函数的初衷是处理progress异常情况的文案识别。
+ * 2. iOS可以识别%，而安卓不会识别%，如 80， iOS可以识别成 80%， 而安卓只会80，因此android部分做了一个% 拼接，后续看是否有更好的方案去解决。
+ * 3. 安卓 talkback 版本为 8.1.0.278818032 ，只会读一次 80， 最新版本talkback 会读 80.0, 80。（目前也是一个痛点，啰嗦了）
+ *
+ */
+
+function getIOSAriaLabel(status) {
+  if (status === 'error') {
+    return '进度失败';
+  }
+  if (status === 'warning') {
+    return '进度异常';
+  }
+  return '';
+}
+
+function getAndroidAriaLabel(status) {
+  if (status === 'error') {
+    return '%' + '，进度失败';
+  }
+  if (status === 'warning') {
+    return '%' + '，进度异常';
+  }
+  return '%';
+}
+
+function getCircleStyle(size, strokeWidth) {
+  const styles = {
+    '--td-progress-stroke-circle-width': utils.addUnit(strokeWidth),
+  };
+
+  if (!utils.includes(['default', 'micro'], size)) {
+    styles['--td-progress-circle-width'] = utils.addUnit(size);
+  }
+
+  return utils._style(styles);
+}
+
+export {
+  STATUS,
+  STATUS_TEXT,
+  PRO_THEME,
+
+  STATUS_COLOR,
+  LINE_STATUS_ICON,
+  CIRCLE_STATUS_ICON,
+  getAndroidAriaLabel,
+  getIOSAriaLabel,
+  getCircleStyle,
+};
diff --git a/packages/tdesign-uniapp/components/progress/progress.less b/packages/tdesign-uniapp/components/progress/progress.less
new file mode 100644
index 000000000..0aa8163c6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/progress.less
@@ -0,0 +1,218 @@
+@import '../common/style/base.less';
+
+@progress-line-stroke-width: var(--td-progress-line-stroke-width, 12rpx); // line 进度条线宽
+@progress-stroke-plump-width: var(--td-progress-stroke-plump-width, 40rpx); // plump 进度条线宽
+@progress-stroke-circle-width: var(--td-progress-stroke-circle-width, 12rpx); // circle 进度条线宽
+@progress-line-icon-font-size: calc(@font-size-base + 2px);
+@progress-circle-icon-font-size: 96rpx;
+@progress-plump-label-font-size: @font-size-s;
+@progress-circle-width: var(--td-progress-circle-width, 224rpx);
+@progress-circle-from: 0deg;
+@progress-circle-label-font-size: var(--td-progress-circle-label-font-size, 40rpx);
+@progress-circle-label-line-height: var(--td-progress-circle-label-line-height, 56rpx);
+@progress-circle-label-font-weight: var(--td-progress-circle-label-font-weight, 700);
+@progress-info-spacer: @spacer; // 间距
+@progress-inner-transition: all @anim-duration-base @anim-time-fn-easing;
+
+@progress-track-bg-color: var(--td-progress-track-bg-color, @bg-color-component); // 进度条背景色值(未完成部分进度)
+@progress-inner-bg-color: var(--td-progress-inner-bg-color, @brand-color); // 进度条已完成进度色值(默认状态)
+@progress-inner-bg-color-success: var(
+  --td-progress-inner-bg-color-success,
+  @success-color
+); // 进度条已完成进度色值(success 状态)
+@progress-inner-bg-color-error: var(
+  --td-progress-inner-bg-color-error,
+  @error-color
+); // 进度条已完成进度色值(error 状态)
+@progress-inner-bg-color-warning: var(
+  --td-progress-inner-bg-color-warning,
+  @warning-color
+); // 进度条已完成进度色值(warning 状态)
+@progress-inner-bg-color-active: var(
+  --td-progress-inner-bg-color-active,
+  @bg-color-container
+); // 进度条已完成进度色值(active 状态)
+@progress-info-dark-color: var(
+  --td-progress-info-dark-color,
+  @text-color-primary
+); // 进度条深色label字体颜色(在进度条外或未完成进度灰色色块里显示的色值)
+@progress-info-light-color: var(
+  --td-progress-info-light-color,
+  @text-color-anti
+); // 进度条浅色label字体颜色(在进度条色块内显示的色值)
+@progress-circle-inner-bg-color: var(--td-progress-circle-inner-bg-color, @text-color-anti); // 环境进度条内圆背景色
+
+@progress: ~'@{prefix}-progress';
+
+// 进度条基本样式
+.@{progress} {
+  --td-progress-inner-bg-color: @brand-color;
+  --td-progress-track-bg-color: @bg-color-component;
+  --td-progress-circle-from: @progress-circle-from;
+
+  &__inner {
+    position: relative;
+    height: 100%;
+    background: @progress-inner-bg-color;
+    border-radius: @radius-round;
+    transition: @progress-inner-transition;
+  }
+
+  &__bar {
+    width: 100%;
+    height: @progress-line-stroke-width;
+    overflow: hidden;
+    background: @progress-track-bg-color;
+    border-radius: @radius-round;
+  }
+
+  &__info {
+    padding-left: @progress-info-spacer;
+    box-sizing: border-box;
+    color: @progress-info-dark-color;
+    white-space: nowrap;
+    display: inline-flex;
+  }
+}
+
+//标准进度条
+.@{progress}--thin {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  :deep(.@{progress}__icon) {
+    font-size: @progress-line-icon-font-size;
+  }
+}
+
+//条形进度条 百分比内置
+.@{progress}--plump {
+  height: @progress-stroke-plump-width;
+  border-radius: calc(@progress-stroke-plump-width / 2);
+  display: flex;
+  align-items: center;
+
+  .@{progress}__info {
+    font-size: @progress-plump-label-font-size;
+  }
+}
+
+.@{progress}--over-ten {
+  .@{progress}__info {
+    position: absolute;
+    top: 50%;
+    right: @progress-info-spacer;
+    color: @progress-info-light-color;
+    transform: translateY(-50%);
+  }
+}
+
+.@{progress}--under-ten {
+  .@{progress}__info,
+  .@{progress}__inner {
+    display: inline-block;
+  }
+
+  .@{progress}__info {
+    vertical-align: top;
+  }
+}
+
+// 环形
+.@{progress}__canvas--circle {
+  position: relative;
+  width: @progress-circle-width;
+  height: @progress-circle-width;
+  border-radius: @radius-circle;
+
+  .@{progress}__canvas--inner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - @progress-stroke-circle-width*2);
+    height: calc(100% - @progress-stroke-circle-width*2);
+    border-radius: @radius-circle;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: @progress-circle-inner-bg-color;
+  }
+
+  .@{progress}__info {
+    margin: 0;
+    font-size: @progress-circle-label-font-size;
+    font-weight: @progress-circle-label-font-weight;
+    line-height: @progress-circle-label-line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  &--micro {
+    --td-progress-circle-width: 48rpx;
+    --td-progress-stroke-circle-width: 4rpx;
+    --td-progress-circle-icon-font-size: 40rpx;
+  }
+}
+
+//进度条状态
+.@{progress}--status--active {
+  .@{progress}__inner {
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      content: '';
+      animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
+      background: @progress-inner-bg-color-active;
+      opacity: 0.2;
+    }
+  }
+}
+
+.progress-status(@bgColor, @iconColor) {
+  .@{progress}__inner {
+    background: @bgColor;
+  }
+
+  :deep(.@{progress}__icon) {
+    color: @iconColor;
+  }
+}
+
+.@{progress}--status--success {
+  .progress-status(@progress-inner-bg-color-success, @success-color);
+}
+
+.@{progress}--status--warning {
+  .progress-status(@progress-inner-bg-color-warning, @warning-color);
+}
+
+.@{progress}--status--error {
+  .progress-status(@progress-inner-bg-color-error, @error-color);
+}
+
+@keyframes progress-active-animation {
+  0% {
+    width: 0;
+    opacity: 0.1;
+  }
+
+  35% {
+    width: 50%;
+    opacity: 0.4;
+  }
+
+  100% {
+    width: 100%;
+    opacity: 0;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/progress/progress.vue b/packages/tdesign-uniapp/components/progress/progress.vue
new file mode 100644
index 000000000..a720cf84f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/progress.vue
@@ -0,0 +1,259 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix"
+  >
+    <view
+      v-if="theme === PRO_THEME.LINE"
+      :class="[
+        classPrefix + '--thin ' + classPrefix + '--status--' + (status || computedStatus),
+        tClass
+      ]"
+    >
+      <view
+        aria-role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="computedProgress"
+        :aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
+        aria-live="polite"
+        :class="classPrefix + '__bar'"
+        :style="'height: ' + heightBar + 'px;border-radius: ' + heightBar + 'px;background-color: ' + bgColorBar"
+      >
+        <view
+          :class="[
+            classPrefix + '__inner ',
+            tClassBar
+          ]"
+          :style="'background: ' + colorBar + '; width: ' + (computedProgress + '%')"
+        />
+      </view>
+      <view
+        v-if="label"
+        :class="classPrefix + '__info ' + tClassLabel"
+        :aria-hidden="true"
+      >
+        <block
+          v-if="_.includes(STATUS, status)"
+          name="icon"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--'"
+            :name="LINE_STATUS_ICON[status]"
+            :size="22 || ''"
+          />
+        </block>
+        <text v-else>
+          {{ _.isString(label) ? label : computedProgress + '%' }}
+        </text>
+      </view>
+      <slot name="label" />
+    </view>
+    <view
+      v-if="theme === PRO_THEME.PLUMP"
+      aria-role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-valuenow="computedProgress"
+      :aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
+      aria-live="polite"
+      :class="
+        classPrefix +
+          '__bar ' +
+          classPrefix +
+          '--plump ' +
+          (computedProgress > 10 ? classPrefix + '--over-ten' : classPrefix + '--under-ten') +
+          ' ' +
+          classPrefix +
+          '--status--' +
+          (status || computedStatus) +
+          ' ' +
+          tClass
+      "
+      :style="'height: ' + heightBar + 'px;border-radius: ' + heightBar + 'px;background-color: ' + bgColorBar"
+    >
+      <view
+        :class="classPrefix + '__inner ' + tClassBar"
+        :style="'background: ' + colorBar + '; width: ' + computedProgress + '%'"
+      >
+        <view
+          v-if="label && computedProgress > 10"
+          :class="classPrefix + '__info ' + tClassLabel"
+        >
+          <text>{{ _.isString(label) ? label : computedProgress + '%' }}</text>
+        </view>
+        <slot
+          v-if="computedProgress > 10"
+          name="label"
+        />
+      </view>
+      <view
+        v-if="label && computedProgress <= 10"
+        :class="classPrefix + '__info ' + tClassLabel"
+        :aria-hidden="true"
+      >
+        <text>{{ _.isString(label) ? label : computedProgress + '%' }}</text>
+      </view>
+      <slot
+        v-if="computedProgress <= 10"
+        name="label"
+      />
+    </view>
+    <view
+      v-if="theme === PRO_THEME.CIRCLE"
+      :class="classPrefix + '--status--' + (status || computedStatus) + ' ' + tClass"
+    >
+      <view
+        aria-role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="computedProgress"
+        :aria-label="ariaLabel || (isIOS ? getIOSAriaLabel(status) : getAndroidAriaLabel(status))"
+        aria-live="polite"
+        :class="_.cls(classPrefix + '__canvas--circle', [[size, true]])"
+        :style="
+          getCircleStyle(size, heightBar) +
+            '; background-image: conic-gradient(from var(--td-progress-circle-from), ' +
+            (colorCircle || STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)') +
+            ' ' +
+            computedProgress +
+            '%, ' +
+            (bgColorBar || 'var(--td-progress-track-bg-color)') +
+            ' 0%);'
+        "
+      >
+        <view :class="classPrefix + '__canvas--inner ' + tClassBar">
+          <view
+            v-if="label"
+            :class="classPrefix + '__info ' + tClassLabel"
+            :aria-hidden="true"
+          >
+            <block
+              v-if="_.includes(STATUS, status)"
+              name="icon"
+            >
+              <t-icon
+                :t-class="classPrefix + '__icon ' + classPrefix + '__icon--'"
+                :name="CIRCLE_STATUS_ICON[status]"
+                size="96rpx"
+              />
+            </block>
+            <text v-else>
+              {{ _.isString(label) ? label : computedProgress + '%' }}
+            </text>
+          </view>
+          <slot name="label" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getBackgroundColor } from './utils';
+import { unitConvert, isIOS as isIOSValidator } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+import {
+  STATUS,
+  STATUS_TEXT,
+  PRO_THEME,
+
+  STATUS_COLOR,
+  LINE_STATUS_ICON,
+  CIRCLE_STATUS_ICON,
+
+  getCircleStyle,
+  getIOSAriaLabel,
+  getAndroidAriaLabel,
+} from './computed.js';
+
+
+const name = `${prefix}-progress`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-bar`,
+    `${prefix}-class-label`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      colorBar: '',
+      heightBar: '',
+      computedStatus: '',
+      computedProgress: 0,
+      isIOS: isIOSValidator(),
+      STATUS,
+      STATUS_TEXT,
+      PRO_THEME,
+
+      STATUS_COLOR,
+      LINE_STATUS_ICON,
+      CIRCLE_STATUS_ICON,
+
+      getCircleStyle,
+      getIOSAriaLabel,
+      getAndroidAriaLabel,
+      _,
+    };
+  },
+  watch: {
+    percentage: {
+      handler(percentage) {
+        percentage = Math.max(0, Math.min(percentage, 100));
+
+        this.computedStatus = percentage === 100 ? 'success' : '';
+        this.computedProgress = percentage;
+      },
+      immediate: true,
+    },
+
+    color: {
+      handler(color) {
+        this.colorBar = getBackgroundColor(color);
+        this.colorCircle = typeof color === 'object' ? '' : color; // 环形不支持渐变，单独处理
+      },
+      immediate: true,
+    },
+
+    strokeWidth: {
+      handler(strokeWidth) {
+        if (!strokeWidth) {
+          return '';
+        }
+        this.heightBar = unitConvert(strokeWidth);
+      },
+      immediate: true,
+    },
+
+    trackColor: {
+      handler(trackColor) {
+        this.bgColorBar = trackColor;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+@import './progress.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/progress/props.ts b/packages/tdesign-uniapp/components/progress/props.ts
new file mode 100644
index 000000000..ef9893491
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/props.ts
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdProgressProps } from './type';
+export default {
+  /** 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等 */
+  color: {
+    type: [String, Object, Array],
+    default: '' as TdProgressProps['color'],
+  },
+  /** 进度百分比，可自定义 */
+  label: {
+    type: [String, Boolean],
+    default: true as TdProgressProps['label'],
+  },
+  /** 进度条百分比 */
+  percentage: {
+    type: Number,
+    default: 0,
+  },
+  /** 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 */
+  size: {
+    type: [String, Number],
+    default: 'default' as TdProgressProps['size'],
+  },
+  /** 进度条状态 */
+  status: {
+    type: String,
+    validator(val: TdProgressProps['status']): boolean {
+      if (!val) return true;
+      return ['success', 'error', 'warning', 'active'].includes(val);
+    },
+  },
+  /** 进度条线宽，默认单位 `px` */
+  strokeWidth: {
+    type: [String, Number],
+  },
+  /** 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间 */
+  theme: {
+    type: String,
+    default: 'line' as TdProgressProps['theme'],
+    validator(val: TdProgressProps['theme']): boolean {
+      if (!val) return true;
+      return ['line', 'plump', 'circle'].includes(val);
+    },
+  },
+  /** 进度条未完成部分颜色 */
+  trackColor: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/progress/type.ts b/packages/tdesign-uniapp/components/progress/type.ts
new file mode 100644
index 000000000..fa91a643f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/type.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdProgressProps {
+  /**
+   * 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等
+   * @default ''
+   */
+  color?: string | Array<string> | Record<string, string>;
+  /**
+   * 进度百分比，可自定义
+   * @default true
+   */
+  label?: string | boolean;
+  /**
+   * 进度条百分比
+   * @default 0
+   */
+  percentage?: number;
+  /**
+   * 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24
+   * @default 'default'
+   */
+  size?: string | number;
+  /**
+   * 进度条状态
+   */
+  status?: ProgressStatus;
+  /**
+   * 进度条线宽，默认单位 `px`
+   */
+  strokeWidth?: string | number;
+  /**
+   * 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间
+   * @default line
+   */
+  theme?: ProgressTheme;
+  /**
+   * 进度条未完成部分颜色
+   * @default ''
+   */
+  trackColor?: string;
+}
+
+export type ProgressStatus = 'success' | 'error' | 'warning' | 'active';
+
+export type ProgressTheme = 'line' | 'plump' | 'circle';
diff --git a/packages/tdesign-uniapp/components/progress/utils.ts b/packages/tdesign-uniapp/components/progress/utils.ts
new file mode 100644
index 000000000..157fd72ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/progress/utils.ts
@@ -0,0 +1,22 @@
+export type Gradients = { [percent: string]: string };
+export type FromTo = { from: string; to: string };
+export type LinearGradient = { direction?: string } & (Gradients | FromTo);
+export function getBackgroundColor(color: string | string[] | LinearGradient): string {
+  if (typeof color === 'string') {
+    return color;
+  }
+  if (Array.isArray(color)) {
+    if (color[0] && color[0][0] === '#') {
+      color.unshift('90deg');
+    }
+    return `linear-gradient( ${color.join(',')} )`;
+  }
+  const { from, to, direction = 'to right', ...rest } = color;
+  let keys = Object.keys(rest);
+  if (keys.length) {
+    keys = keys.sort((a, b) => parseFloat(a.substr(0, a.length - 1)) - parseFloat(b.substr(0, b.length - 1)));
+    const tempArr = keys.map((key: any) => `${rest[key]} ${key}`);
+    return `linear-gradient(${direction}, ${tempArr.join(',')})`;
+  }
+  return `linear-gradient(${direction}, ${from}, ${to})`;
+}
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/README.en-US.md b/packages/tdesign-uniapp/components/pull-down-refresh/README.en-US.md
new file mode 100644
index 000000000..86f1e5d2f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/README.en-US.md
@@ -0,0 +1,60 @@
+:: BASE_DOC ::
+
+## API
+
+### PullDownRefresh Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disabled | Boolean | false | disabled pull down refresh | N
+enable-back-to-top | Boolean | true | \- | N
+enable-passive | Boolean | false | \- | N
+loading-bar-height | String / Number | 50 | \- | N
+loading-props | Object | {} | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/pull-down-refresh/type.ts) | N
+loading-texts | Array | [] | Typescript：`string[]` | N
+lower-threshold | String / Number | 50 | \- | N
+max-bar-height | String / Number | 80 | \- | N
+refresh-timeout | Number | 3000 | \- | N
+scroll-into-view | String | - | \- | N
+show-scrollbar | Boolean | true | \- | N
+success-duration | String / Number | 500 | \- | N
+upper-threshold | String / Number | 50 | \- | N
+using-custom-navbar | Boolean | false | \- | N
+value | Boolean | false | `v-model:value` is supported | N
+default-value | Boolean | false | uncontrolled property | N
+
+### PullDownRefresh Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: boolean })` | \-
+dragend | `(context: TouchEvent)` | \-
+dragging | `(context: TouchEvent)` | \-
+dragstart | `(context: TouchEvent)` | \-
+refresh | \- | \-
+scrolltolower | \- | \-
+timeout | \- | \-
+
+### PullDownRefresh Slots
+
+name | Description
+-- | --
+\- | \-
+header | \-
+
+### PullDownRefresh External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-indicator | \-
+t-class-loading | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-pull-down-refresh-color | @text-color-placeholder | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/README.md b/packages/tdesign-uniapp/components/pull-down-refresh/README.md
new file mode 100644
index 000000000..94dc7278c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/README.md
@@ -0,0 +1,83 @@
+---
+title: PullDownRefresh 下拉刷新
+description: 用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TPullDownRefresh from 'tdesign-uniapp/pull-down-refresh/pull-down-refresh.vue';
+```
+
+### 顶部下拉刷新
+
+由于组件内无法监听页面滚动，需要由页面获取组件实例，并将页面滚动事件传递到组件。
+
+{{ base }}
+
+> 在使用 pull-down-refresh 组件的页面，建议开启 `disableScroll: true`
+
+## API
+
+### PullDownRefresh Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disabled | Boolean | false | 是否禁用下拉刷新 | N
+enable-back-to-top | Boolean | true | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
+enable-passive | Boolean | false | 开启 passive 特性，能优化一定的滚动性能 | N
+loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
+loading-props | Object | {} | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/pull-down-refresh/type.ts) | N
+loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
+lower-threshold | String / Number | 50 | 距底部/右边多远时，触发 scrolltolower 事件 | N
+max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
+refresh-timeout | Number | 3000 | 刷新超时时间 | N
+scroll-into-view | String | - | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
+show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
+success-duration | String / Number | 500 | 刷新成功提示展示时长，单位 'ms' | N
+upper-threshold | String / Number | 50 | 距顶部/左边多远时，触发 scrolltoupper 事件 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。支持语法糖 `v-model:value` | N
+default-value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
+
+### PullDownRefresh Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: boolean })` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
+dragend | `(context: TouchEvent)` | 滑动结束事件
+dragging | `(context: TouchEvent)` | 滑动事件
+dragstart | `(context: TouchEvent)` | 滑动开始事件
+refresh | \- | 结束下拉时触发
+scrolltolower | \- | 滚动到页面底部时触发
+timeout | \- | 刷新超时触发
+
+### PullDownRefresh Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+header | 头部
+
+### PullDownRefresh External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-indicator | 指示样式类
+t-class-loading | 加载样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-pull-down-refresh-color | @text-color-placeholder | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/_example/base/index.vue b/packages/tdesign-uniapp/components/pull-down-refresh/_example/base/index.vue
new file mode 100644
index 000000000..98e1940d2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/_example/base/index.vue
@@ -0,0 +1,202 @@
+<template>
+  <view>
+    <t-pull-down-refresh
+      :value="enable"
+      :loading-texts="['下拉刷新', '松手刷新', '正在刷新', '刷新完成']"
+      :using-custom-navbar="!isMPAlipay"
+      :success-duration="600"
+      @refresh="onRefresh"
+      @scroll="onScroll"
+      @dragstart="onDragstart"
+      @dragging="onDragging"
+      @dragend="onDragend"
+      @scrolltolower="onScrolltolower"
+      @timeout="onTimeout"
+    >
+      <!-- 包裹页面全部内容 -->
+      <view class="demo">
+        <t-demo-header
+          title="PullDownRefresh 下拉刷新"
+          desc="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
+          notice="渲染框架支持情况：WebView"
+        />
+        <view class="pulldown-refresh__content">
+          <t-skeleton
+            :row-col="rowCol1"
+            loading
+          />
+          <view class="row">
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+          </view>
+          <view class="row">
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+          </view>
+          <view class="row">
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+            <t-skeleton
+              :row-col="rowCol2"
+              loading
+            />
+          </view>
+          <view class="text">
+            拖拽该区域演示 顶部下拉刷新
+          </view>
+        </view>
+        <t-back-top
+          text="顶部"
+          :scroll-top="scrollTop"
+          :visibility-height="100"
+        />
+      </view>
+    </t-pull-down-refresh>
+  </view>
+</template>
+
+<script>
+import tPullDownRefresh from 'tdesign-uniapp/pull-down-refresh/pull-down-refresh.vue';
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import tBackTop from 'tdesign-uniapp/back-top/back-top.vue';
+export default {
+  components: {
+    tPullDownRefresh,
+    tSkeleton,
+    tBackTop,
+  },
+  data() {
+    return {
+      enable: false,
+      rowCol1: [
+        {
+          width: '100%',
+          height: '342rpx',
+          borderRadius: '24rpx',
+        },
+      ],
+      rowCol2: [
+        [
+          {
+            width: '327rpx',
+          },
+        ],
+        [
+          {
+            width: '200rpx',
+          },
+        ],
+        [
+          {
+            size: '327rpx',
+            borderRadius: '24rpx',
+          },
+        ],
+      ],
+      scrollTop: 0,
+    };
+  },
+  mounted() {
+    // 处理小程序 ready 生命周期
+    this.$nextTick(() => this.ready());
+  },
+  created() {},
+  methods: {
+    ready() {
+      this.enable = true;
+      setTimeout(() => {
+        this.enable = false;
+      }, 1000);
+    },
+
+    onRefresh() {
+      this.enable = true;
+      setTimeout(() => {
+        this.enable = false;
+      }, 1500);
+    },
+
+    onScroll(e) {
+      const { scrollTop } = e;
+      this.scrollTop = scrollTop;
+    },
+
+    onDragstart(e) {
+      console.log('[onDragstart]', e);
+    },
+
+    onDragging(e) {
+      console.log('[onDragging]', e);
+    },
+
+    onDragend(e) {
+      console.log('[onDragend]', e);
+    },
+
+    onScrolltolower(e) {
+      console.log('[onScrolltolower]', e);
+    },
+
+    onTimeout(e) {
+      console.log('[onTimeout]', e);
+    },
+  },
+};
+</script>
+<style>
+.demo {
+    padding-bottom: 56rpx;
+    overflow: hidden;
+}
+
+.demo-title {
+    font-size: 48rpx;
+    font-weight: 700;
+    line-height: 64rpx;
+    margin: 48rpx 32rpx 0;
+    color: var(--td-text-color-primary);
+}
+
+.demo-desc {
+    font-size: 28rpx;
+    color: var(--td-text-color-secondary);
+    margin: 16rpx 32rpx 0;
+    line-height: 44rpx;
+}
+
+.pulldown-refresh__content {
+    margin: 64rpx 32rpx 0;
+    position: relative;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 32rpx;
+}
+
+.text {
+    position: absolute;
+    top: 152rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    font-size: 32rpx;
+    color: var(--td-text-color-disabled);
+    width: 686rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.less b/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.vue b/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.vue
new file mode 100644
index 000000000..bfc063778
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/_example/pull-down-refresh.vue
@@ -0,0 +1,29 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="PullDownRefresh"
+      left-arrow
+    />
+    <!-- #endif -->
+    <BaseDemo />
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+export default {
+  components: {
+    BaseDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './pull-down-refresh.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/_example/skyline/pull-down-refresh.vue b/packages/tdesign-uniapp/components/pull-down-refresh/_example/skyline/pull-down-refresh.vue
new file mode 100644
index 000000000..fd37bf523
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/_example/skyline/pull-down-refresh.vue
@@ -0,0 +1,30 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="PullDownRefresh"
+      left-arrow
+    />
+    <!-- #endif -->
+    <baseComp />
+  </view>
+</template>
+
+<script>
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseComp from '../base';
+export default {
+  components: {
+    tNavbar,
+    baseComp,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style>
+@import './pull-down-refresh.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/props.ts b/packages/tdesign-uniapp/components/pull-down-refresh/props.ts
new file mode 100644
index 000000000..40d81c480
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/props.ts
@@ -0,0 +1,112 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPullDownRefreshProps } from './type';
+export default {
+  /** 是否禁用下拉刷新 */
+  disabled: Boolean,
+  /** iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 */
+  enableBackToTop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 开启 passive 特性，能优化一定的滚动性能 */
+  enablePassive: Boolean,
+  /** 加载中下拉高度，如果值为数字则单位是：'px' */
+  loadingBarHeight: {
+    type: [String, Number],
+    default: 50 as TdPullDownRefreshProps['loadingBarHeight'],
+  },
+  /** 加载loading样式 */
+  loadingProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] */
+  loadingTexts: {
+    type: Array,
+    default: (): TdPullDownRefreshProps['loadingTexts'] => [],
+  },
+  /** 距底部/右边多远时，触发 scrolltolower 事件 */
+  lowerThreshold: {
+    type: [String, Number],
+    default: 50 as TdPullDownRefreshProps['lowerThreshold'],
+  },
+  /** 最大下拉高度，如果值为数字则单位是：'px' */
+  maxBarHeight: {
+    type: [String, Number],
+    default: 80 as TdPullDownRefreshProps['maxBarHeight'],
+  },
+  /** 刷新超时时间 */
+  refreshTimeout: {
+    type: Number,
+    default: 3000,
+  },
+  /** 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 */
+  scrollIntoView: {
+    type: String,
+    default: '',
+  },
+  /** 滚动条显隐控制 (同时开启 enhanced 属性后生效) */
+  showScrollbar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 刷新成功提示展示时长，单位 'ms' */
+  successDuration: {
+    type: [String, Number],
+    default: 500 as TdPullDownRefreshProps['successDuration'],
+  },
+  /** 距顶部/左边多远时，触发 scrolltoupper 事件 */
+  upperThreshold: {
+    type: [String, Number],
+    default: 50 as TdPullDownRefreshProps['upperThreshold'],
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 */
+  value: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态，非受控属性 */
+  defaultValue: Boolean,
+  /** 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动结束事件 */
+  onDragend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动事件 */
+  onDragging: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动开始事件 */
+  onDragstart: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 结束下拉时触发 */
+  onRefresh: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滚动到页面底部时触发 */
+  onScrolltolower: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 刷新超时触发 */
+  onTimeout: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.less b/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.less
new file mode 100644
index 000000000..496babcd4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.less
@@ -0,0 +1,38 @@
+@import '../common/style/base.less';
+
+@pull-down-refresh-color: var(--td-pull-down-refresh-color, @text-color-placeholder);
+
+.@{prefix}-pull-down-refresh {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+
+  &__track {
+    position: relative;
+
+    &--loosing {
+      transition: transform ease 0.24s;
+    }
+  }
+
+  &__tips {
+    position: absolute;
+    color: @pull-down-refresh-color;
+    font-size: 24rpx;
+    top: 0;
+    width: 100%;
+    transform: translateY(-100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    &--loosing {
+      transition: height ease 0.24s;
+    }
+  }
+
+  &__text {
+    margin: 16rpx 0 0;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.vue b/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.vue
new file mode 100644
index 000000000..b957a3fb7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/pull-down-refresh.vue
@@ -0,0 +1,366 @@
+<template>
+  <scroll-view
+    :style="_._style([customStyle, 'max-height: calc(100vh - ' + distanceTop + 'px)'])"
+    :class="classPrefix + ' ' + tClass"
+    type="list"
+    :scroll-top="scrollTop"
+    scroll-y
+    :enable-back-to-top="enableBackToTop"
+    :enable-passive="enablePassive"
+    :lower-threshold="lowerThreshold"
+    :upper-threshold="upperThreshold"
+    :scroll-into-view="scrollIntoView"
+    :show-scrollbar="showScrollbar"
+    enhanced
+    scroll-with-animation
+    :bounces="false"
+    :throttle="false"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @scroll="onScroll"
+    @scrolltoupper="onScrollToTop"
+    @scrolltolower="onScrollToBottom"
+  >
+    <slot name="header" />
+    <view
+      :class="classPrefix + '__track ' + (classPrefix + '__track--' + (loosing ? 'loosing' : ''))"
+      :style="barHeight > 0 ? 'transform: translate3d(0, ' + barHeight + 'px, 0);' : ''"
+    >
+      <view
+        :class="classPrefix + '__tips ' + (classPrefix + '__tips--' + (loosing ? 'loosing' : ''))"
+        :style="'height: ' + tipsHeight + 'px'"
+        aria-live="polite"
+      >
+        <t-loading
+          v-if="refreshStatus === REFRESH_STATUS_MAP.LOADING"
+          :delay="loadingProps.delay || 0"
+          :duration="loadingProps.duration || 800"
+          :indicator="loadingProps.indicator || true"
+          :layout="loadingProps.layout || 'horizontal'"
+          :loading="loadingProps.loading || true"
+          :pause="loadingProps.pause || false"
+          :progress="loadingProps.progress || 0"
+          :reverse="loadingProps.reverse || false"
+          :size="loadingProps.size || '50rpx'"
+          :text="loadingProps.text || dataLoadingTexts[refreshStatus]"
+          :theme="loadingProps.theme || 'circular'"
+          :t-class-indicator="tClassIndicator"
+          :t-class="tClassLoading"
+        />
+        <view
+          v-else-if="refreshStatus > REFRESH_STATUS_MAP.INITIAL"
+          :class="classPrefix + '__text ' + tClassText"
+        >
+          {{ dataLoadingTexts[refreshStatus] }}
+        </view>
+      </view>
+      <slot />
+    </view>
+  </scroll-view>
+</template>
+<script>
+import tLoading from '../loading/loading';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, systemInfo, unitConvert } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { getObserver } from '../common/wechat';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-pull-down-refresh`;
+const defaultLoadingTexts = ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'];
+const REFRESH_STATUS_MAP = {
+  INITIAL: -1,
+  PULLING: 0,
+  LOSING: 1,
+  LOADING: 2,
+  SUCCESS: 3,
+};
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-loading`,
+    `${prefix}-class-text`,
+    `${prefix}-class-indicator`,
+  ],
+  mixins: [
+    ParentMixin(RELATION_MAP.BackTop),
+  ],
+  components: {
+    tLoading,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'scrolltolower',
+    'scroll',
+    'change',
+    'refresh',
+    'dragstart',
+    'dragging',
+    'dragend',
+    'timeout',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      distanceTop: 0,
+      barHeight: 0,
+      tipsHeight: 0,
+      refreshStatus: REFRESH_STATUS_MAP.INITIAL,
+      loosing: false,
+      enableToRefresh: true,
+      scrollTop: 0,
+      _maxBarHeight: 0,
+      _loadingBarHeight: 0,
+
+      pixelRatio: 1,
+      startPoint: null,
+      isPulling: false,
+      maxRefreshAnimateTimeFlag: 0,
+      closingAnimateTimeFlag: 0,
+      refreshStatusTimer: null,
+
+      _,
+      REFRESH_STATUS_MAP,
+    };
+  },
+  computed: {
+    touchEnable() {
+      return this.refreshStatus !== REFRESH_STATUS_MAP.LOADING
+        && this.refreshStatus !== REFRESH_STATUS_MAP.SUCCESS
+        && !this.disabled;
+    },
+  },
+  watch: {
+    value(val) {
+      if (!val) {
+        clearTimeout(this.maxRefreshAnimateTimeFlag);
+
+        if (this.refreshStatus > REFRESH_STATUS_MAP.PULLING) {
+          this.refreshStatus = REFRESH_STATUS_MAP.SUCCESS;
+        }
+
+        clearTimeout(this.successTimer);
+
+        this.successTimer = setTimeout(() => {
+          this.barHeight = 0;
+          this.refreshStatus = REFRESH_STATUS_MAP.INITIAL;
+        }, unitConvert(this.successDuration));
+      } else {
+        this.doRefresh();
+      }
+    },
+
+    barHeight(val) {
+      this.resetTimer();
+      if (val === 0 && this.refreshStatus !== REFRESH_STATUS_MAP.INITIAL) {
+        this.refreshStatusTimer = setTimeout(() => {
+          this.refreshStatus = REFRESH_STATUS_MAP.INITIAL;
+        }, 240);
+      }
+
+      this.tipsHeight = Math.min(val, this._loadingBarHeight);
+    },
+
+    maxBarHeight(v) {
+      this._maxBarHeight = unitConvert(v);
+    },
+
+    loadingBarHeight(v) {
+      this._loadingBarHeight = unitConvert(v);
+    },
+  },
+  mounted() {
+    const { screenWidth } = systemInfo;
+    const { loadingTexts, maxBarHeight, loadingBarHeight } = this;
+    const isCustomLoadingTexts = Array.isArray(loadingTexts) && loadingTexts.length >= 4;
+
+    this._maxBarHeight = unitConvert(maxBarHeight);
+    this._loadingBarHeight = unitConvert(loadingBarHeight);
+    this.dataLoadingTexts = isCustomLoadingTexts ? loadingTexts : defaultLoadingTexts;
+
+    this.pixelRatio = 750 / screenWidth;
+
+    this.updateDistanceTop();
+  },
+
+  beforeUnMount() {
+    clearTimeout(this.maxRefreshAnimateTimeFlag);
+    clearTimeout(this.closingAnimateTimeFlag);
+    this.resetTimer();
+  },
+  methods: {
+    updateDistanceTop() {
+      const update = (top) => {
+        this.distanceTop = top;
+      };
+
+      getRect(this, `.${name}`).then((rect) => {
+        if (rect.top) {
+          update(rect.top);
+          return;
+        }
+
+        getObserver(this, `.${name}`).then((res) => {
+          if (res.intersectionRatio > 0) {
+            update(res.boundingClientRect.top);
+          }
+        });
+      });
+    },
+
+    resetTimer() {
+      if (this.refreshStatusTimer) {
+        clearTimeout(this.refreshStatusTimer);
+        this.refreshStatusTimer = null;
+      }
+    },
+
+    onScrollToBottom() {
+      this.$emit('scrolltolower');
+    },
+
+    onScrollToTop() {
+      this.enableToRefresh = true;
+    },
+
+    onScroll(e) {
+      const { scrollTop } = e.detail;
+
+      this.enableToRefresh = scrollTop === 0;
+      this.$emit('scroll', { scrollTop });
+    },
+
+    onTouchStart(e) {
+      if (this.isPulling || !this.enableToRefresh || !this.touchEnable) return;
+
+      const { touches } = e;
+      this.$emit('dragstart', e);
+
+      if (touches.length !== 1) return;
+      const { pageX, pageY } = touches[0];
+
+      this.loosing = false;
+      this.startPoint = { pageX, pageY };
+      this.isPulling = true;
+    },
+
+    onTouchMove(e) {
+      if (!this.startPoint || !this.touchEnable) return;
+
+
+      const { touches } = e;
+
+      if (touches.length !== 1) return;
+
+      const { pageY } = touches[0];
+      const offset = pageY - this.startPoint.pageY;
+
+      if (offset > 0) {
+        this.setRefreshBarHeight(offset);
+      }
+      this.$emit('dragging', e);
+    },
+
+    onTouchEnd(e) {
+      if (!this.startPoint || this.disabled) return;
+      const { changedTouches } = e;
+      if (changedTouches.length !== 1) return;
+      const { pageY } = changedTouches[0];
+
+      const barHeight = pageY - this.startPoint.pageY;
+      this.startPoint = null; // 清掉起点，之后将忽略touchMove、touchEnd事件
+      this.isPulling = false;
+
+      this.loosing = true;
+
+      // 松开时高度超过阈值则触发刷新
+      if (barHeight > this._loadingBarHeight) {
+        this._trigger('change', { value: true });
+        this.$emit('refresh');
+      } else {
+        this.barHeight = 0;
+      }
+
+      this.$emit('dragend', e);
+    },
+
+    doRefresh() {
+      if (this.disabled) return;
+      this.barHeight = this._loadingBarHeight;
+      this.refreshStatus = REFRESH_STATUS_MAP.LOADING;
+      this.loosing = true;
+
+      this.maxRefreshAnimateTimeFlag = setTimeout(() => {
+        this.maxRefreshAnimateTimeFlag = null;
+
+        if (this.refreshStatus === REFRESH_STATUS_MAP.LOADING) {
+          // 超时回调
+          this.$emit('timeout');
+          this._trigger('change', { value: false });
+        }
+      }, this.refreshTimeout);
+    },
+
+    setRefreshBarHeight(value) {
+      const barHeight = Math.min(value, this._maxBarHeight);
+      const data = { barHeight };
+
+      if (barHeight >= this._loadingBarHeight) {
+        data.refreshStatus = REFRESH_STATUS_MAP.LOSING;
+      } else {
+        data.refreshStatus = REFRESH_STATUS_MAP.PULLING;
+      }
+      return new Promise((resolve) => {
+        Object.keys(data).forEach((key) => {
+          this[key] = data[key];
+        });
+        setTimeout(() => {
+          resolve(barHeight);
+        }, 20);
+      });
+    },
+
+    setScrollTop(scrollTop) {
+      this.scrollTop = scrollTop;
+    },
+
+    scrollToTop() {
+      let parsed = false;
+
+      // #ifdef APP-PLUS || MP
+      this.scrollTop = 0;
+      setTimeout(() => {
+        this.scrollTop = 0.01;
+      });
+      parsed = true;
+      // #endif
+
+      // #ifdef H5
+      // https://yuanbao.tencent.com/chat/naQivTmsDa/c10ae37f-c66f-4489-ac4e-e72710a3f65a
+      this.scrollTop = this.scrollTop === 0 ? 0.01 : 0;
+      parsed = true;
+      // #endif
+
+      if (!parsed) {
+        this.setScrollTop(0);
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './pull-down-refresh.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/pull-down-refresh/type.ts b/packages/tdesign-uniapp/components/pull-down-refresh/type.ts
new file mode 100644
index 000000000..f9d236356
--- /dev/null
+++ b/packages/tdesign-uniapp/components/pull-down-refresh/type.ts
@@ -0,0 +1,118 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps as LoadingProps } from '../loading/type';
+
+export interface TdPullDownRefreshProps {
+  /**
+   * 是否禁用下拉刷新
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启
+   * @default true
+   */
+  enableBackToTop?: boolean;
+  /**
+   * 开启 passive 特性，能优化一定的滚动性能
+   * @default false
+   */
+  enablePassive?: boolean;
+  /**
+   * 加载中下拉高度，如果值为数字则单位是：'px'
+   * @default 50
+   */
+  loadingBarHeight?: string | number;
+  /**
+   * 加载loading样式
+   * @default {}
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']
+   * @default []
+   */
+  loadingTexts?: string[];
+  /**
+   * 距底部/右边多远时，触发 scrolltolower 事件
+   * @default 50
+   */
+  lowerThreshold?: string | number;
+  /**
+   * 最大下拉高度，如果值为数字则单位是：'px'
+   * @default 80
+   */
+  maxBarHeight?: string | number;
+  /**
+   * 刷新超时时间
+   * @default 3000
+   */
+  refreshTimeout?: number;
+  /**
+   * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
+   * @default ''
+   */
+  scrollIntoView?: string;
+  /**
+   * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+   * @default true
+   */
+  showScrollbar?: boolean;
+  /**
+   * 刷新成功提示展示时长，单位 'ms'
+   * @default 500
+   */
+  successDuration?: string | number;
+  /**
+   * 距顶部/左边多远时，触发 scrolltoupper 事件
+   * @default 50
+   */
+  upperThreshold?: string | number;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态
+   * @default false
+   */
+  value?: boolean;
+  /**
+   * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态，非受控属性
+   * @default false
+   */
+  defaultValue?: boolean;
+  /**
+   * 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
+   */
+  onChange?: (context: { value: boolean }) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragend?: (context: TouchEvent) => void;
+  /**
+   * 滑动事件
+   */
+  onDragging?: (context: TouchEvent) => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragstart?: (context: TouchEvent) => void;
+  /**
+   * 结束下拉时触发
+   */
+  onRefresh?: () => void;
+  /**
+   * 滚动到页面底部时触发
+   */
+  onScrolltolower?: () => void;
+  /**
+   * 刷新超时触发
+   */
+  onTimeout?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/README.en-US.md b/packages/tdesign-uniapp/components/qrcode/README.en-US.md
new file mode 100644
index 000000000..1d20324fb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/README.en-US.md
@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### QRCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bg-color | String | - | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String | - | The address of the picture in the QR code | N
+icon-size | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/qrcode/type.ts) | N
+status-render | Boolean | false | should use custom status slot | N
+value | String | - | scanned text | N
+
+### QRCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
+
+### QRCode Slots
+
+name | Description
+-- | --
+status-render | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-font-size-title-small | --td-font-size-title-small | - 
+--td-brand-color-hover | --td-brand-color-hover | - 
+--td-success-color | --td-success-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/qrcode/README.md b/packages/tdesign-uniapp/components/qrcode/README.md
new file mode 100644
index 000000000..18ce64a49
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/README.md
@@ -0,0 +1,97 @@
+---
+title: QRCode 二维码
+description: 二维码能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
+spline: message
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TQRCode from 'tdesign-uniapp/qrcode/qrcode.vue';
+```
+
+### 01 组件类型
+
+#### 基本用法
+
+{{ base }}
+
+#### 带 Icon 的二维码
+
+{{ icon }}
+
+
+
+#### 二维码纠错等级
+
+{{ level }}
+
+### 02 组件状态
+
+{{ status }}
+
+### 03 组件样式
+
+#### 二维码颜色
+
+{{ color }}
+
+#### 二维码尺寸
+
+{{ size }}
+
+
+### FAQ
+
+#### 关于二维码纠错等级
+纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+
+通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约 `30%` 错误。但并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+有关更多信息，可参阅[官方文档](https://www.qrcode.com/zh/about/error_correction)的相关资料
+
+#### 生成的二维码无法扫描？
+若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。
+
+##
+
+## API
+
+### QRCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bg-color | String | - | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String | - | 二维码中图片的地址 | N
+icon-size | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N
+level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N
+size | Number | 160 | 二维码大小 | N
+status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/qrcode/type.ts) | N
+status-render | Boolean | false | 是否启用自定义渲染 | N
+value | String | - | 扫描后的文本 | N
+
+### QRCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
+
+### QRCode Slots
+
+名称 | 描述
+-- | --
+status-render | 自定义状态渲染器
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-font-size-title-small | --td-font-size-title-small | - 
+--td-brand-color-hover | --td-brand-color-hover | - 
+--td-success-color | --td-success-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/base/index.less b/packages/tdesign-uniapp/components/qrcode/_example/base/index.less
new file mode 100644
index 000000000..5fdee984b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/base/index.less
@@ -0,0 +1 @@
+/* 基础示例样式 */
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/base/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/base/index.vue
new file mode 100644
index 000000000..8f13fb60a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/base/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <TQrcode
+    value="https://tdesign.tencent.com/"
+    level="M"
+    status="active"
+  />
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+
+export default {
+  name: 'QRCodeBase',
+  components: {
+    TQrcode,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.less b/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.less
new file mode 100644
index 000000000..867befa33
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.less
@@ -0,0 +1 @@
+/* 无边框示例样式 */
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.vue
new file mode 100644
index 000000000..d41a4dfbb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/borderless/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <TQrcode
+    value="https://tdesign.tencent.com/"
+    :borderless="true"
+  />
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+
+export default {
+  name: 'QRCodeBorderless',
+  components: {
+    TQrcode,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/color/index.less b/packages/tdesign-uniapp/components/qrcode/_example/color/index.less
new file mode 100644
index 000000000..2854ab645
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/color/index.less
@@ -0,0 +1,9 @@
+.demo-summary {
+  padding-top: 48rpx;
+  padding-bottom: 32rpx;
+  box-sizing: border-box;
+
+  line-height: 22px;
+  color: var(--bg-color-demo-desc);
+  font-size: var(--td-font-size-base, 28rpx);
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/color/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/color/index.vue
new file mode 100644
index 000000000..be5d1365d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/color/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      level="M"
+      status="active"
+      color="#0052D9"
+      bg-color="#fff"
+    />
+
+    <view class="demo-summary">
+      二维码背景颜色
+    </view>
+
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      level="M"
+      status="active"
+      color="#0052D9"
+      bg-color="#D9E1FF"
+    />
+  </view>
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+export default {
+  name: 'QRCodeColor',
+  components: {
+    TQrcode,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/icon/index.less b/packages/tdesign-uniapp/components/qrcode/_example/icon/index.less
new file mode 100644
index 000000000..c648a167d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/icon/index.less
@@ -0,0 +1 @@
+/* Icon 示例样式 */
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/icon/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/icon/index.vue
new file mode 100644
index 000000000..1388a3860
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/icon/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <TQrcode
+    value="https://tdesign.tencent.com/"
+    icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+  />
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+
+export default {
+  name: 'QRCodeIcon',
+  components: {
+    TQrcode,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/level/index.less b/packages/tdesign-uniapp/components/qrcode/_example/level/index.less
new file mode 100644
index 000000000..d92ae1982
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/level/index.less
@@ -0,0 +1,3 @@
+.qrcode-content {
+  padding: 16px 16px 0;
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/level/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/level/index.vue
new file mode 100644
index 000000000..08e9963ea
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/level/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <view>
+    <TSlider
+      :value="value"
+      :min="0"
+      :max="3"
+      :step="1"
+      :marks="marks"
+      @change="handleSliderChange"
+    />
+    <view class="qrcode-content">
+      <TQrcode
+        value="https://tdesign.gtimg.com/site/tdesign-logo.png"
+        :level="currentLevel"
+        status="active"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+import TSlider from 'tdesign-uniapp/slider/slider.vue';
+
+export default {
+  name: 'QRCodeLevel',
+  components: {
+    TQrcode,
+    TSlider,
+  },
+  data() {
+    return {
+      value: 1,
+      marks: {
+        0: '7%',
+        1: '15%',
+        2: '25%',
+        3: '35%',
+      },
+      currentLevel: 'M',
+    };
+  },
+  methods: {
+    handleSliderChange(e) {
+      const { value } = e;
+      const levels = ['L', 'M', 'Q', 'H'];
+      this.value = value;
+      this.currentLevel = levels[value];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/qrcode.less b/packages/tdesign-uniapp/components/qrcode/_example/qrcode.less
new file mode 100644
index 000000000..2b200c211
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/qrcode.less
@@ -0,0 +1,3 @@
+page {
+  background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/qrcode.vue b/packages/tdesign-uniapp/components/qrcode/_example/qrcode.vue
new file mode 100644
index 000000000..06e683e80
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/qrcode.vue
@@ -0,0 +1,101 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="QRCode"
+      :left-arrow="true"
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="QRCode 二维码"
+        notice="渲染框架支持情况：WebView"
+      >
+        <template #desc>
+          <view>
+            能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。<text style="color: var(--td-brand-color)">
+              （QRCode基于Canvas实现，微信开发者工具暂不支持Canvas同层渲染，会导致显示异常，最终效果请以真机为准。）
+            </text>
+          </view>
+        </template>
+      </t-demo-header>
+
+      <t-demo
+        title="01 组件类型"
+        desc="基本用法"
+        :padding="true"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo
+        desc="带 Icon 的二维码"
+        :padding="true"
+      >
+        <Icon />
+      </t-demo>
+
+      <t-demo
+        desc="无边框的二维码"
+        :padding="true"
+      >
+        <Borderless />
+      </t-demo>
+
+      <t-demo desc="二维码纠错等级">
+        <Level />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="active"
+        :padding="true"
+      >
+        <Status />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="二维码颜色"
+        :padding="true"
+      >
+        <Color />
+      </t-demo>
+
+      <t-demo
+        desc="二维码尺寸"
+        :padding="true"
+      >
+        <Size />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import BaseDemo from './base/index.vue';
+import Size from './size/index.vue';
+import Icon from './icon/index.vue';
+import Color from './color/index.vue';
+import Level from './level/index.vue';
+import Status from './status/index.vue';
+import Borderless from './borderless/index.vue';
+
+export default {
+  name: 'QRCodeExample',
+  components: {
+    BaseDemo,
+    Size,
+    Icon,
+    Color,
+    Level,
+    Status,
+    Borderless,
+  },
+};
+</script>
+
+<style lang="less">
+@import './qrcode.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/size/index.less b/packages/tdesign-uniapp/components/qrcode/_example/size/index.less
new file mode 100644
index 000000000..319d99c64
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/size/index.less
@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.button-group {
+  width: 100%;
+  display: flex;
+  padding: 0;
+  border: 1px solid var(--td-component-border);
+  border-radius: 6px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.line {
+  height: auto;
+  width: 1px;
+  background-color: var(--td-component-border);
+}
+
+.button {
+  flex: 1;
+  --td-button-border-radius: 0px;
+}
+
+.qrcode-container {
+  display: flex;
+  height: 320px;
+  padding: 20px 0;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background: var(--td-bg-color-secondarycontainer);
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/size/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/size/index.vue
new file mode 100644
index 000000000..c6f589dbf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/size/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <view class="container">
+    <view class="button-group">
+      <TButton
+        class="button"
+        variant="text"
+        :disabled="size <= minSize"
+        @click="() => changeSize(-10)"
+      >
+        - Smaller
+      </TButton>
+      <view class="line" />
+      <TButton
+        class="button"
+        variant="text"
+        :disabled="size >= maxSize"
+        @click="() => changeSize(10)"
+      >
+        + Larger
+      </TButton>
+    </view>
+    <view class="qrcode-container">
+      <TQrcode
+        :size="size"
+        value="https://tdesign.tencent.com/"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  name: 'QRCodeSize',
+  components: {
+    TQrcode,
+    TButton,
+  },
+  data() {
+    return {
+      size: 160,
+      minSize: 80,
+      maxSize: 240,
+    };
+  },
+  methods: {
+    changeSize(step) {
+      const newSize = this.size + step;
+      if (newSize >= this.minSize && newSize <= this.maxSize) {
+        this.size = newSize;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/status/index.less b/packages/tdesign-uniapp/components/qrcode/_example/status/index.less
new file mode 100644
index 000000000..2854ab645
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/status/index.less
@@ -0,0 +1,9 @@
+.demo-summary {
+  padding-top: 48rpx;
+  padding-bottom: 32rpx;
+  box-sizing: border-box;
+
+  line-height: 22px;
+  color: var(--bg-color-demo-desc);
+  font-size: var(--td-font-size-base, 28rpx);
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/_example/status/index.vue b/packages/tdesign-uniapp/components/qrcode/_example/status/index.vue
new file mode 100644
index 000000000..048fc5295
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/_example/status/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <view>
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      status="active"
+      @refresh="handleRefresh"
+    />
+
+    <view class="demo-summary">
+      expired
+    </view>
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      status="expired"
+      @refresh="handleRefresh"
+    />
+
+    <view class="demo-summary">
+      loading
+    </view>
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      status="loading"
+      @refresh="handleRefresh"
+    />
+
+    <view class="demo-summary">
+      scanned
+    </view>
+    <TQrcode
+      value="https://tdesign.tencent.com/"
+      status="scanned"
+      @refresh="handleRefresh"
+    />
+  </view>
+</template>
+
+<script>
+import TQrcode from 'tdesign-uniapp/qrcode/qrcode.vue';
+
+export default {
+  name: 'QRCodeStatus',
+  components: {
+    TQrcode,
+  },
+  methods: {
+    handleRefresh() {
+      console.log('Click Refresh');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/props.ts b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/props.ts
new file mode 100644
index 000000000..bd8192f9a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/props.ts
@@ -0,0 +1,48 @@
+export default {
+  // 二维码内容
+  value: {
+    type: String,
+    default: '',
+  },
+  // 中心图标路径
+  icon: {
+    type: String,
+    default: '',
+  },
+  // 二维码大小（单位rpx）
+  size: {
+    type: Number,
+    default: 160,
+  },
+  // 中心图标大小（单位px）
+  iconSize: {
+    type: [Number, Object],
+    default: 40,
+  },
+  // 纠错等级
+  level: {
+    type: String,
+    default: 'M',
+    validator: (value) => ['L', 'M', 'Q', 'H'].includes(value),
+  },
+  // 背景色
+  bgColor: {
+    type: String,
+    default: '#FFFFFF',
+  },
+  // 二维码颜色
+  color: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否包含边距
+  includeMargin: {
+    type: Boolean,
+    default: false,
+  },
+  // 边距大小（单位rpx）
+  marginSize: {
+    type: Number,
+    default: 0,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.less b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.less
new file mode 100644
index 000000000..da717cad5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.less
@@ -0,0 +1,12 @@
+@import '../../../common/style/base.less';
+
+.t-qrcode__canvas-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.t-qrcode__canvas {
+  display: block;
+  // 不设置 width 和 height，由内联样式控制
+  // 避免 100% 导致的尺寸超出问题
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.vue b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.vue
new file mode 100644
index 000000000..9487fba46
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/qrcode-canvas.vue
@@ -0,0 +1,413 @@
+<template>
+  <view
+    class="t-qrcode__canvas-wrapper"
+    :class="tClass"
+  >
+    <canvas
+      :id="canvasId"
+      ref="qrcodeCanvas"
+      type="2d"
+      :canvas-id="canvasId"
+      class="t-qrcode__canvas"
+      :style="`width: ${size}px; height: ${size}px;`"
+    />
+  </view>
+</template>
+
+<script>
+import props from './props';
+import useQRCode from '../../hooks/useQRCode';
+import { DEFAULT_MINVERSION, excavateModules, isSupportPath2d, generatePath } from '../../../common/shared/qrcode/utils';
+import { uniComponent } from '../../../common/src/index';
+import { prefix } from '../../../common/config';
+import { loadImage } from '../../../common/canvas/index';
+import { getWindowInfo, nextTick } from '../../../common/utils';
+
+export default uniComponent({
+  name: 'QrcodeCanvas',
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  props: {
+    ...props,
+  },
+  emits: ['drawCompleted', 'drawError'],
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      canvasId: `qrcode-canvas-${Math.random().toString(36)
+        .slice(2, 11)}`,
+      isWeb: false,
+    };
+  },
+  computed: {
+    // 使用计算属性确保有默认值
+    actualBgColor() {
+      return this.bgColor || '#FFFFFF';
+    },
+    actualColor() {
+      return this.color || '#000000';
+    },
+  },
+  watch: {
+    value() {
+      this.renderQRCode();
+    },
+    icon() {
+      this.renderQRCode();
+    },
+    size() {
+      let interval = 0;
+      // #ifdef APP-PLUS
+      interval = 33;
+      // #endif
+      setTimeout(() => {
+        this.renderQRCode();
+      }, interval);
+    },
+    iconSize() {
+      this.renderQRCode();
+    },
+    level() {
+      this.renderQRCode();
+    },
+    bgColor() {
+      this.renderQRCode();
+    },
+    color() {
+      this.renderQRCode();
+    },
+  },
+  created() {
+    // 小程序不能使用响应式的this.canvas
+    this._canvas = null;
+    this._ctx = null;
+  },
+  mounted() {
+    // 判断是否为小程序环境，否则默认为 H5
+    // #ifdef MP
+    this.isWeb = false;
+    // #endif
+
+    // #ifndef MP
+    this.isWeb = true;
+    // #endif
+
+    this.initCanvas();
+  },
+  methods: {
+    async initCanvas() {
+      await nextTick();
+
+      // #ifndef H5
+      this.initMiniProgramCanvas();
+      // #endif
+
+      // #ifdef H5
+      this.initH5Canvas();
+      // #endif
+    },
+
+    // H5 环境初始化
+    async initH5Canvas() {
+      // 在 uniapp H5 环境中，canvas 会被包裹在 uni-canvas 内
+      const uniCanvasElement = document.querySelector(`#${this.canvasId}`);
+      let canvasElement = null;
+
+      // 如果获取到的是 uni-canvas，需要找到内部的 canvas
+      if (uniCanvasElement && uniCanvasElement.tagName === 'UNI-CANVAS') {
+        canvasElement = uniCanvasElement.querySelector('canvas');
+
+        // 设置 uni-canvas 的样式
+        uniCanvasElement.style.width = `${this.size}px`;
+        uniCanvasElement.style.height = `${this.size}px`;
+        uniCanvasElement.style.overflow = 'visible';
+
+        // 设置 wrapper 的样式
+        const wrapper = uniCanvasElement.parentElement;
+        if (wrapper) {
+          wrapper.style.width = `${this.size}px`;
+          wrapper.style.height = `${this.size}px`;
+          wrapper.style.overflow = 'visible';
+        }
+      } else {
+        canvasElement = uniCanvasElement;
+      }
+
+      if (canvasElement) {
+        // 在初始化时设置 Canvas 的物理尺寸和显示尺寸
+        const pixelRatio = window.devicePixelRatio || 1;
+        const canvasSize = this.size * pixelRatio;
+
+        // 设置物理尺寸（实际像素）
+        canvasElement.width = canvasSize;
+        canvasElement.height = canvasSize;
+
+        // 设置显示尺寸（CSS 像素）
+        canvasElement.style.width = `${this.size}px`;
+        canvasElement.style.height = `${this.size}px`;
+
+        // 添加 willReadFrequently 属性以优化性能并消除警告
+        const ctx = canvasElement.getContext('2d', { willReadFrequently: true });
+        this.canvas = canvasElement;
+        this.ctx = ctx;
+        await this.renderQRCode();
+      } else {
+        console.error('无法获取 canvas 元素');
+      }
+    },
+
+    // 小程序环境初始化
+    async initMiniProgramCanvas() {
+      if (typeof uni !== 'undefined' && uni.createSelectorQuery) {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#${this.canvasId}`)
+          .fields({ node: true, size: true })
+          .exec(async (res) => {
+            if (!res || !res[0] || !res[0].node) {
+              console.error('获取 canvas 节点失败');
+              return;
+            }
+
+            const canvas = res[0].node;
+            // 小程序环境也添加 willReadFrequently 属性
+            try {
+              let ctx;
+              // #ifdef MP
+              ctx = canvas.getContext('2d', { willReadFrequently: true });
+              // #endif
+              if (!ctx) {
+                ctx = uni.createCanvasContext(this.canvasId, this);
+              }
+              this._canvas = canvas;
+              this._ctx = ctx;
+            } catch (e) {
+              console.warn('获取 ctx 失败', e);
+            }
+
+
+            await this.renderQRCode();
+          });
+      }
+    },
+
+    async renderQRCode() {
+      const canvas = this._canvas || this.canvas;
+      const ctx = this._ctx || this.ctx;
+      if (!canvas || !ctx) {
+        return;
+      }
+
+      const sizeProp = this.getSizeProp(this.iconSize);
+
+      try {
+        const qrData = useQRCode({
+          value: this.value,
+          level: this.level,
+          minVersion: DEFAULT_MINVERSION,
+          includeMargin: this.includeMargin,
+          marginSize: this.marginSize,
+          size: this.size,
+          imageSettings: this.icon
+            ? {
+              src: this.icon,
+              width: sizeProp.width,
+              height: sizeProp.height,
+              excavate: true,
+            }
+            : undefined,
+        });
+
+        // 获取设备像素比
+        let pixelRatio = 1;
+        let canvasSize;
+        let scale;
+
+        // #ifndef H5
+        // 小程序环境：获取真实的设备像素比并设置 Canvas 尺寸
+        // 使用 getWindowInfo 替代已废弃的 getSystemInfoSync
+        const windowInfo = getWindowInfo();
+        pixelRatio = windowInfo.pixelRatio || 1;
+        canvasSize = this.size * pixelRatio;
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+        // 小程序环境：scale 计算方式（参考 TS 实现）
+        scale = canvasSize / qrData.numCells;
+        // #ifdef APP-PLUS
+        scale /= pixelRatio;
+        // #endif
+        // #endif
+
+        // #ifdef H5
+        // H5 环境：每次渲染时重新设置 Canvas 尺寸（因为 size 可能变化）
+        pixelRatio = window.devicePixelRatio || 1;
+        canvasSize = this.size * pixelRatio;
+
+        // 重新设置 Canvas 物理尺寸（会重置 canvas 状态）
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+
+        // 重新设置 Canvas 显示尺寸
+        canvas.style.width = `${this.size}px`;
+        canvas.style.height = `${this.size}px`;
+
+        // H5 环境：scale 计算方式（基于物理尺寸）
+        scale = canvasSize / qrData.numCells;
+        // #endif
+
+        // 重置变换矩阵并应用缩放
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(scale, scale);
+
+        // 绘制背景
+        ctx.fillStyle = this.actualBgColor;
+        ctx.fillRect(0, 0, qrData.numCells, qrData.numCells);
+
+        // 处理需要挖空的区域（如果有图标）
+        let cellsToDraw = qrData.cells;
+        if (this.icon && qrData.calculatedImageSettings?.excavation) {
+          cellsToDraw = excavateModules(qrData.cells, qrData.calculatedImageSettings.excavation);
+        }
+
+        // 绘制二维码
+        ctx.fillStyle = this.actualColor;
+
+        // Web 环境优先使用 Path2D（性能更好）
+        if (this.isWeb && isSupportPath2d) {
+          ctx.fill(new Path2D(generatePath(cellsToDraw, qrData.margin)));
+        } else {
+          // 小程序环境或不支持 Path2D 时使用逐个绘制
+          cellsToDraw.forEach((row, y) => {
+            row.forEach((cell, x) => {
+              if (cell) {
+                ctx.fillRect(x + qrData.margin, y + qrData.margin, 1, 1);
+              }
+            });
+          });
+        }
+
+        // 绘制中心图标
+        if (this.icon && qrData.calculatedImageSettings) {
+          await this.drawIcon(qrData, pixelRatio);
+        }
+
+        // #ifdef APP-PLUS
+        ctx.draw();
+        // #endif
+
+        this.$emit('drawCompleted');
+      } catch (err) {
+        console.error('二维码绘制失败:', err);
+        this.$emit('drawError', { error: err });
+      }
+    },
+
+    async drawIcon(qrData, pixelRatio) {
+      const ctx = this._ctx || this.ctx;
+      const { calculatedImageSettings, margin } = qrData;
+
+      if (!calculatedImageSettings) {
+        return;
+      }
+
+      try {
+        // 加载图标图片
+        const img = await this.loadIconImage();
+
+        if (!img) {
+          console.error('无法加载图标图片');
+          return;
+        }
+
+        const drawX = calculatedImageSettings.x + margin;
+        const drawY = calculatedImageSettings.y + margin;
+
+        // 设置透明度
+        if (calculatedImageSettings.opacity !== null && calculatedImageSettings.opacity !== undefined) {
+          ctx.globalAlpha = calculatedImageSettings.opacity;
+        }
+
+        // #ifdef H5
+        ctx.scale(1 / pixelRatio, 1 / pixelRatio); // H5 环境：需要调整缩放
+        // #endif
+
+        // 绘制图标
+        ctx.drawImage(
+          img,
+          drawX,
+          drawY,
+          calculatedImageSettings.w,
+          calculatedImageSettings.h,
+        );
+
+        // 恢复透明度
+        ctx.globalAlpha = 1;
+      } catch (err) {
+        console.error('图标绘制失败:', err);
+      }
+    },
+
+    // 加载图标图片
+    // 参考 TSX (H5) 和 TS (小程序) 的实现
+    async loadIconImage() {
+      const canvas = this._canvas || this.canvas;
+      if (!this.icon || !canvas) {
+        return null;
+      }
+      return loadImage({
+        canvas,
+        src: this.icon,
+      });
+    },
+
+    getSizeProp(iconSize) {
+      if (!iconSize) return { width: 0, height: 0 };
+      if (typeof iconSize === 'number') {
+        return {
+          width: iconSize,
+          height: iconSize,
+        };
+      }
+      return {
+        width: iconSize.width,
+        height: iconSize.height,
+      };
+    },
+
+    // 暴露 canvas 节点给父组件
+    getCanvasNode() {
+      let result;
+      // #ifndef H5
+      result = new Promise((resolve) => {
+        if (typeof uni !== 'undefined' && uni.createSelectorQuery) {
+          const query = uni.createSelectorQuery().in(this);
+          query
+            .select(`#${this.canvasId}`)
+            .fields({ node: true, size: true })
+            .exec((res) => {
+              resolve(res[0]?.node);
+            });
+        } else {
+          resolve(null);
+        }
+      });
+      // #endif
+
+      // #ifdef H5
+      result = Promise.resolve(document.querySelector(`#${this.canvasId}`));
+      // #endif
+
+      return result;
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import './qrcode-canvas.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/type.ts b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/type.ts
new file mode 100644
index 000000000..0313dc943
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-canvas/type.ts
@@ -0,0 +1,22 @@
+import { type ErrorCorrectionLevel } from '../../../common/shared/qrcode/types';
+
+export interface TdQRCodeProps {
+  /** 二维码内容 */
+  value?: string;
+  /** 中心图标路径 */
+  icon?: string;
+  /** 二维码大小（单位rpx） */
+  size?: number;
+  /** 中心图标大小（单位px） */
+  iconSize?: null;
+  /** 纠错等级 */
+  level?: ErrorCorrectionLevel;
+  /** 背景色 */
+  bgColor?: string;
+  /** 二维码颜色 */
+  color?: string;
+  /** 是否包含边距 */
+  includeMargin?: boolean;
+  /** 边距大小（单位rpx） */
+  marginSize?: number;
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/props.ts b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/props.ts
new file mode 100644
index 000000000..5aa20fc11
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/props.ts
@@ -0,0 +1,22 @@
+export default {
+  // 二维码状态
+  status: {
+    type: String,
+    default: 'active',
+    validator: (value) => ['active', 'expired', 'loading', 'scanned'].includes(value),
+  },
+  // 本地化文本配置
+  locale: {
+    type: Object,
+    default: () => ({
+      expiredText: '二维码过期',
+      refreshText: '点击刷新',
+      scannedText: '已扫描',
+    }),
+  },
+  // 是否启用自定义渲染
+  statusRender: {
+    type: Boolean,
+    default: false,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.less b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.less
new file mode 100644
index 000000000..70fd67eab
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.less
@@ -0,0 +1,41 @@
+@import '../../../common/style/base.less';
+
+@qrcode-expired-link-motion-duration-mid: 0.2s;
+@qrcode-expired-link-motion-ease-in-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+@qrcode-expired-link-color-hover: var(--td-brand-color-hover);
+@qrcode-scanned-icon-color: var(--td-success-color);
+
+@qrcode-mask-inner-gap: 8px;
+@qrcode-mask-inner-btn-height: 32px;
+
+.@{prefix}-expired {
+  &__text {
+    color: @text-color-primary;
+    font-weight: 600;
+  }
+
+  &__button {
+    display: flex;
+    color: @brand-color;
+    box-shadow: none;
+    cursor: pointer;
+    column-gap: @qrcode-mask-inner-gap;
+    align-items: center;
+    height: @qrcode-mask-inner-btn-height;
+    transition: all @qrcode-expired-link-motion-duration-mid @qrcode-expired-link-motion-ease-in-out;
+
+    &:hover {
+      color: @qrcode-expired-link-color-hover;
+    }
+  }
+}
+
+.@{prefix}-scanned {
+  display: flex;
+  column-gap: @qrcode-mask-inner-gap;
+  align-items: center;
+
+  &__icon {
+    color: @qrcode-scanned-icon-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.vue b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.vue
new file mode 100644
index 000000000..205216798
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/qrcode-status.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <slot
+      v-if="statusRender"
+      name="statusRender"
+    />
+
+    <template v-else>
+      <view
+        v-if="status === 'expired'"
+        :class="`${prefix}-expired`"
+      >
+        <view :class="`${prefix}-expired__text`">
+          {{ locale.expiredText }}
+          <view
+            :class="`${prefix}-expired__button`"
+            @click="handleRefresh"
+          >
+            <t-icon
+              name="refresh"
+              size="36rpx"
+            />
+            {{ locale.refreshText }}
+          </view>
+        </view>
+      </view>
+
+      <view
+        v-else-if="status === 'loading'"
+        :class="`${prefix}-loading-container`"
+      >
+        <t-loading
+          size="64rpx"
+          :theme="isSkyline ? 'spinner' : 'circular'"
+        />
+      </view>
+
+      <view
+        v-else-if="status === 'scanned'"
+        :class="`${prefix}-scanned`"
+      >
+        <t-icon
+          name="check-circle-filled"
+          :class="`${prefix}-scanned__icon`"
+          size="44rpx"
+        />
+        {{ locale.scannedText }}
+      </view>
+    </template>
+  </div>
+</template>
+
+<script>
+import tIcon from '../../../icon/icon';
+import tLoading from '../../../loading/loading';
+import props from './props';
+import { prefix } from '../../../common/config';
+
+const name = `${prefix}-qrcode`;
+
+export default {
+  name: 'QrcodeStatus',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tIcon,
+    tLoading,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      isSkyline: false,
+    };
+  },
+  mounted() {
+    // 暂时忽略 skyline
+    // this.isSkyline = false;
+  },
+  methods: {
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import './qrcode-status.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts
new file mode 100644
index 000000000..aa79fe7b2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts
@@ -0,0 +1,25 @@
+export interface QRCodeStatusProps {
+  /**
+   * 二维码状态
+   * @default 'active'
+   */
+  status?: 'active' | 'expired' | 'loading' | 'scanned';
+
+  /**
+   * 本地化文本配置
+   */
+  locale?: {
+    /** 过期提示文本 */
+    expiredText?: string;
+    /** 刷新按钮文本 */
+    refreshText?: string;
+    /** 已扫描提示文本 */
+    scannedText?: string;
+  };
+
+  /**
+   * 是否启用自定义渲染
+   * @default false
+   */
+  statusRender?: boolean;
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/hooks/useQRCode.ts b/packages/tdesign-uniapp/components/qrcode/hooks/useQRCode.ts
new file mode 100644
index 000000000..0bd4ba818
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/hooks/useQRCode.ts
@@ -0,0 +1,51 @@
+import { QrCode, QrSegment } from '../../common/shared/qrcode/qrcodegen';
+import type { ErrorCorrectionLevel, Excavation, ImageSettings } from '../../common/shared/qrcode/types';
+import { ERROR_LEVEL_MAP, getImageSettings, getMarginSize } from '../../common/shared/qrcode/utils';
+
+interface Options {
+  value: string;
+  level: ErrorCorrectionLevel;
+  minVersion: number;
+  includeMargin: boolean;
+  marginSize?: number;
+  imageSettings?: ImageSettings;
+  size: number;
+}
+
+interface QRCodeResult {
+  cells: boolean[][];
+  margin: number;
+  numCells: number;
+  calculatedImageSettings: {
+    x: number;
+    y: number;
+    h: number;
+    w: number;
+    excavation: Excavation | null;
+    opacity: number;
+  } | null;
+  qrcode: QrCode;
+}
+
+const useQRCode = (opt: Options): QRCodeResult => {
+  const { value, level, minVersion, includeMargin, marginSize, imageSettings, size } = opt;
+
+  const qrcode = (() => {
+    const segments = QrSegment.makeSegments(value);
+    return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
+  })();
+
+  const cells = qrcode.getModules();
+  const margin = getMarginSize(includeMargin, marginSize);
+  const calculatedImageSettings = getImageSettings(cells, size, margin, imageSettings);
+
+  return {
+    cells,
+    margin,
+    numCells: cells.length + margin * 2,
+    calculatedImageSettings,
+    qrcode,
+  };
+};
+
+export default useQRCode;
diff --git a/packages/tdesign-uniapp/components/qrcode/props.ts b/packages/tdesign-uniapp/components/qrcode/props.ts
new file mode 100644
index 000000000..ec5f3da46
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/props.ts
@@ -0,0 +1,66 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdQRCodeProps } from './type';
+export default {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    default: '',
+  },
+  /** 是否有边框 */
+  borderless: Boolean,
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的地址 */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: [Number, Object],
+    default: 40 as TdQRCodeProps['iconSize'],
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String,
+    default: 'M' as TdQRCodeProps['level'],
+    validator(val: TdQRCodeProps['level']): boolean {
+      if (!val) return true;
+      return ['L', 'M', 'Q', 'H'].includes(val);
+    },
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    default: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String,
+    default: 'active' as TdQRCodeProps['status'],
+    validator(val: TdQRCodeProps['status']): boolean {
+      if (!val) return true;
+      return ['active', 'expired', 'loading', 'scanned'].includes(val);
+    },
+  },
+  /** 是否启用自定义渲染 */
+  statusRender: Boolean,
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击"点击刷新"的回调 */
+  onRefresh: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/qrcode/qrcode.less b/packages/tdesign-uniapp/components/qrcode/qrcode.less
new file mode 100644
index 000000000..bcb919025
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/qrcode.less
@@ -0,0 +1,42 @@
+@import '../common/style/base.less';
+
+@qrcode-padding: 12px;
+@qrcode-border-radius: 6px;
+@qrcode-z-index: 300;
+@qrcode-line-height: 22px;
+@qrcode-mask-inner-font-size: var(--td-font-size-title-small);
+
+.@{prefix}-qrcode {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  background-color: @bg-color-container;
+  padding: @qrcode-padding;
+  border-radius: @qrcode-border-radius;
+  border: 1px solid @component-border;
+
+  &.@{prefix}-borderless {
+    border-color: transparent;
+  }
+
+  .@{prefix}-mask {
+    left: 0;
+    top: 0; // 解决 skyline 模式下的偏移问题
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: @qrcode-z-index;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: @text-color-primary;
+    line-height: @qrcode-line-height;
+    background-color: @mask-bg;
+    text-align: center;
+    border-radius: @qrcode-border-radius;
+    font-size: @qrcode-mask-inner-font-size;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/qrcode/qrcode.vue b/packages/tdesign-uniapp/components/qrcode/qrcode.vue
new file mode 100644
index 000000000..ed61761aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/qrcode.vue
@@ -0,0 +1,135 @@
+<template>
+  <view
+    :style="`${_._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
+    :class="`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
+  >
+    <QrcodeCanvas
+      ref="qrcodeCanvas"
+      :t-class="tClassCanvas"
+      :size="size"
+      :value="value"
+      :level="level"
+      :color="color"
+      :bg-color="bgColor"
+      :icon="icon"
+      :icon-size="iconSize"
+      @drawError="handleDrawError"
+      @drawCompleted="handleDrawCompleted"
+    />
+
+    <view
+      v-if="showMask && canvasReady"
+      :class="`${prefix}-mask`"
+    >
+      <QrcodeStatus
+        :status="status"
+        :status-render="statusRender"
+        @refresh="handleRefresh"
+      >
+        <template #statusRender>
+          <slot name="statusRender" />
+        </template>
+      </QrcodeStatus>
+    </view>
+  </view>
+</template>
+
+<script>
+import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
+import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniComponent } from '../common/src/index';
+import _ from '../common/utils.wxs';
+
+const name = `${prefix}-qrcode`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-canvas`,
+  ],
+  components: {
+    QrcodeCanvas,
+    QrcodeStatus,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      _,
+      showMask: false,
+      classPrefix: name,
+      canvasReady: false,
+      canvasNode: null,
+    };
+  },
+  computed: {
+    // 容器尺寸 = Canvas 尺寸 + padding * 2
+    // padding 为 12px，所以容器需要额外 24px
+    containerSize() {
+      return this.size + 24;
+    },
+  },
+  watch: {
+    status: {
+      handler(newVal) {
+        this.showMask = newVal !== 'active';
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  methods: {
+    async initCanvas() {
+      // 获取 canvas 实例
+      const canvasComp = this.$refs.qrcodeCanvas;
+      if (canvasComp) {
+        const canvas = await canvasComp.getCanvasNode();
+        this.canvasNode = canvas;
+      }
+    },
+    handleDrawCompleted() {
+      this.canvasReady = true;
+    },
+    handleDrawError(err) {
+      console.error('二维码绘制失败', err);
+    },
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+    // 二维码下载方法
+    async handleDownload() {
+      if (!this.canvasNode) {
+        console.error('未找到 canvas 节点');
+        return;
+      }
+
+      // 注意：此方法在非小程序环境需要适配
+      if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
+        uni.canvasToTempFilePath({
+          canvas: this.canvasNode,
+          success: (res) => {
+            uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
+          },
+          fail: (err) => {
+            console.error('canvasToTempFilePath failed', err);
+          },
+        });
+      }
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import './qrcode.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/qrcode/type.ts b/packages/tdesign-uniapp/components/qrcode/type.ts
new file mode 100644
index 000000000..ebd6961ae
--- /dev/null
+++ b/packages/tdesign-uniapp/components/qrcode/type.ts
@@ -0,0 +1,66 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdQRCodeProps {
+  /**
+   * 二维码背景颜色
+   * @default ''
+   */
+  bgColor?: string;
+  /**
+   * 是否有边框
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 二维码颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址
+   * @default ''
+   */
+  icon?: string;
+  /**
+   * 二维码中图片的大小
+   * @default 40
+   */
+  iconSize?: number | { width: number; height: number };
+  /**
+   * 二维码纠错等级
+   * @default M
+   */
+  level?: 'L' | 'M' | 'Q' | 'H';
+  /**
+   * 二维码大小
+   * @default 160
+   */
+  size?: number;
+  /**
+   * 二维码状态
+   * @default active
+   */
+  status?: QRStatus;
+  /**
+   * 是否启用自定义渲染
+   * @default false
+   */
+  statusRender?: boolean;
+  /**
+   * 扫描后的文本
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 点击"点击刷新"的回调
+   */
+  onRefresh?: () => void;
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; onRefresh?: () => void };
diff --git a/packages/tdesign-uniapp/components/radio-group/props.ts b/packages/tdesign-uniapp/components/radio-group/props.ts
new file mode 100644
index 000000000..2be472a0f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio-group/props.ts
@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRadioGroupProps } from './type';
+export default {
+  /** 是否允许取消选中 */
+  allowUncheck: Boolean,
+  /** 是否开启无边框模式 */
+  borderless: Boolean,
+  /** 是否禁用全部子单选框 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdRadioGroupProps['icon'],
+  },
+  /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同 */
+  options: {
+    type: Array,
+  },
+  /** 复选框和内容相对位置。优先级低于 Radio.placement */
+  placement: {
+    type: String,
+    default: 'left' as TdRadioGroupProps['placement'],
+    validator(val: TdRadioGroupProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 选中的值 */
+  value: {
+    type: [String, Number, Boolean],
+  },
+  /** 选中的值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Boolean],
+  },
+  /** 选中值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/radio-group/radio-group.vue b/packages/tdesign-uniapp/components/radio-group/radio-group.vue
new file mode 100644
index 000000000..dbbc2bfeb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio-group/radio-group.vue
@@ -0,0 +1,191 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+    aria-role="radiogroup"
+  >
+    <slot />
+    <t-radio
+      v-for="(item, index) in radioOptions"
+      :key="index"
+      :ref="prefix + '-radio-option'"
+      :class="prefix + '-radio-option'"
+      :data-index="index"
+      :data-value="item.value"
+      :data-allow-uncheck="item.allowUncheck || allowUncheck"
+      :block="item.block || true"
+      :label="item.label || ''"
+      :value="item.value"
+      :checked="item.checked || false"
+      :content="item.content || ''"
+      :allow-uncheck="item.allowUncheck || allowUncheck"
+      :content-disabled="item.contentDisabled || false"
+      :readonly="item.readonly || false"
+      :disabled="item.disabled || false"
+      :icon="item.icon || icon"
+      :placement="item.placement || placement"
+      :max-content-row="item.maxContentRow || 5"
+      :max-label-row="item.maxLabelRow || 3"
+      :name="item.name || ''"
+      :borderless="borderless"
+      :relation-key="relationKey"
+      @change="handleRadioChange($event, { index, value: item.value, allowUncheck: item.allowUncheck || allowUncheck })"
+    />
+  </view>
+</template>
+<script>
+import tRadio from '../radio/radio';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-radio-group`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.Radio)],
+  components: {
+    tRadio,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      radioOptions: [],
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+    dataValue: {
+      handler(v) {
+        this.getChildren()?.forEach((item) => {
+          item.dataChecked = v === item.value;
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+    options: {
+      handler() {
+        this.initWithOptions();
+      },
+      immediate: true,
+      deep: true,
+    },
+    disabled: {
+      handler(v) {
+        if (this.options?.length) {
+          this.initWithOptions();
+          return;
+        }
+        this.getChildren()?.forEach((item) => {
+          item.setDisabled(v);
+        });
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getChildren()?.forEach((item) => {
+        item.dataChecked = this.dataValue === item.value;
+        item.setDisabled(this.disabled);
+      });
+    }, 33);
+  },
+  methods: {
+    innerAfterLinked(target) {
+      const { value, disabled, readonly } = this;
+      target.dataChecked = value === target.value;
+
+      target.setDisabled(disabled);
+      target.setReadonly(readonly);
+    },
+    getChildren() {
+      let items = this.children;
+
+      if (!items?.length) {
+        items = this.$refs[`.${prefix}-radio-option`];
+      }
+
+      return items;
+    },
+
+    updateValue(value) {
+      this._trigger('change', { value });
+    },
+
+    handleRadioChange(_, { value, index, allowUncheck, checked }) {
+      this._trigger('change', checked === false && allowUncheck ? { value: null, index } : { value, index });
+    },
+
+    // 支持自定义options
+    initWithOptions() {
+      const { options, value, keys, disabled, readonly } = this;
+      // 数字数组｜字符串数组｜对像数组
+      if (!options?.length || !Array.isArray(options)) {
+        this.radioOptions = [];
+        return;
+      }
+      const optionsValue = [];
+      try {
+        options.forEach((element) => {
+          const typeName = typeof element;
+          if (typeName === 'number' || typeName === 'string') {
+            optionsValue.push({
+              label: `${element}`,
+              value: element,
+              checked: value === element,
+              disabled,
+              readonly,
+            });
+          } else if (typeName === 'object') {
+            optionsValue.push({
+              ...element,
+              label: element[coalesce(keys?.label, 'label')],
+              value: element[coalesce(keys?.value, 'value')],
+              checked: value === element[coalesce(keys?.value, 'value')],
+              disabled: element.disabled || disabled,
+              readonly: element.readonly || readonly,
+            });
+          }
+        });
+        this.radioOptions = optionsValue;
+      } catch (error) {
+
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/radio-group/type.ts b/packages/tdesign-uniapp/components/radio-group/type.ts
new file mode 100644
index 000000000..52655e2bc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio-group/type.ts
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { RadioValue } from '../radio/type';
+import type { KeysType } from '../common/common';
+
+export interface TdRadioGroupProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否开启无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否禁用全部子单选框
+   */
+  disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'dot' | Array<string>;
+  /**
+   * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同
+   */
+  options?: Array<RadioOption>;
+  /**
+   * 复选框和内容相对位置。优先级低于 Radio.placement
+   * @default left
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 选中的值
+   */
+  value?: T;
+  /**
+   * 选中的值，非受控属性
+   */
+  defaultValue?: T;
+  /**
+   * 选中值发生变化时触发
+   */
+  onChange?: (context: { value: RadioValue }) => void;
+}
+
+export type RadioOption = string | number | RadioOptionObj;
+
+export interface RadioOptionObj {
+  label?: string;
+  value?: string | number;
+  readonly?: boolean;
+  disabled?: boolean;
+  allowUncheck?: boolean;
+}
diff --git a/packages/tdesign-uniapp/components/radio/README.en-US.md b/packages/tdesign-uniapp/components/radio/README.en-US.md
new file mode 100644
index 000000000..8a5c15437
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/README.en-US.md
@@ -0,0 +1,105 @@
+:: BASE_DOC ::
+
+## API
+
+### Radio Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-uncheck | Boolean | false | \- | N
+block | Boolean | true | \- | N
+checked | Boolean | false | `v-model:checked` is supported | N
+default-checked | Boolean | false | uncontrolled property | N
+content | String | - | \- | N
+content-disabled | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+label | String | - | \- | N
+max-content-row | Number | 5 | \- | N
+max-label-row | Number | 3 | \- | N
+name | String | - | \- | N
+placement | String | - | options: left/right | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio/type.ts) | N
+
+### Radio Events
+
+name | params | description
+-- | -- | --
+change | `(context: { checked: boolean })` | \-
+
+### Radio Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+icon | \-
+label | \-
+
+### Radio External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-border | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-label | \-
+
+
+### RadioGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-uncheck | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+placement | String | left | options: left/right | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | String / Number / Boolean | - | `v-model:value` is supported。Typescript：`T`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+default-value | String / Number / Boolean | - | uncontrolled property。Typescript：`T`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+
+### RadioGroup Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: RadioValue })` | \-
+
+### RadioGroup Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | - 
+--td-radio-border-color | @component-stroke | - 
+--td-radio-content-checked-color | @text-color-secondary | - 
+--td-radio-content-color | @text-color-secondary | - 
+--td-radio-content-disabled-color | @text-color-disabled | - 
+--td-radio-content-font-size | 28rpx | - 
+--td-radio-content-line-height | 44rpx | - 
+--td-radio-font-size | 32rpx | - 
+--td-radio-icon-checked-color | @brand-color | - 
+--td-radio-icon-color | @component-border | - 
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-radio-icon-disabled-color | @brand-color-disabled | - 
+--td-radio-icon-size | 48rpx | - 
+--td-radio-label-checked-color | @text-color-primary | - 
+--td-radio-label-color | @text-color-primary | - 
+--td-radio-label-disabled-color | @text-color-disabled | - 
+--td-radio-label-line-height | 48rpx | - 
+--td-radio-vertical-padding | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/radio/README.md b/packages/tdesign-uniapp/components/radio/README.md
new file mode 100644
index 000000000..f96575e3f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/README.md
@@ -0,0 +1,149 @@
+---
+title: Radio 单选框
+description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TRadio from 'tdesign-uniapp/radio/radio.vue';
+import TRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+```
+
+### 纵向单选框
+
+{{ base }}
+
+### 横向单选框
+
+{{ horizontal }}
+
+### 单选框状态
+
+{{ status }}
+
+### 勾选样式
+
+{{ theme }}
+
+### 勾选显示位置
+
+{{ align }}
+
+### 非通栏单选样式
+
+{{ card }}
+
+### 特殊样式
+
+{{ special }}
+
+## API
+
+### Radio Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
+block | Boolean | true | 是否为块级元素 | N
+checked | Boolean | false | 是否选中。支持语法糖 `v-model:checked` | N
+default-checked | Boolean | false | 是否选中。非受控属性 | N
+content | String | - | 单选内容 | N
+content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否为禁用态 | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+label | String | - | 主文案 | N
+max-content-row | Number | 5 | 内容最大行数限制 | N
+max-label-row | Number | 3 | 主文案最大行数限制 | N
+name | String | - | HTML 元素原生属性 | N
+placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio/type.ts) | N
+
+### Radio Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { checked: boolean })` | 值变化时触发
+
+### Radio Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，主文案
+content | 自定义 `content` 显示内容
+icon | 自定义选中图标和非选中图标
+label | 自定义 `label` 显示内容
+
+### Radio External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-border | 边框样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-label | 标签样式类
+
+
+### RadioGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
+disabled | Boolean | undefined | 是否禁用全部子单选框 | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+name | String | - | HTML 元素原生属性 | N
+options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model:value`。TS 类型：`T`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+default-value | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/radio-group/type.ts) | N
+
+### RadioGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: RadioValue })` | 选中值发生变化时触发
+
+### RadioGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，单选框组内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-radio-bg-color | @bg-color-container | - |
+| --td-radio-border-color | @component-stroke | - |
+| --td-radio-content-checked-color | @text-color-secondary | - |
+| --td-radio-content-color | @text-color-secondary | - |
+| --td-radio-content-disabled-color | @text-color-disabled | - |
+| --td-radio-content-font-size | 28rpx | - |
+| --td-radio-content-line-height | 44rpx | - |
+| --td-radio-font-size | 32rpx | - |
+| --td-radio-icon-checked-color | @brand-color | - |
+| --td-radio-icon-color | @component-border | - |
+| --td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - |
+| --td-radio-icon-disabled-color | @brand-color-disabled | - |
+| --td-radio-icon-size | 48rpx | - |
+| --td-radio-label-checked-color | @text-color-primary | - |
+| --td-radio-label-color | @text-color-primary | - |
+| --td-radio-label-disabled-color | @text-color-disabled | - |
+| --td-radio-label-line-height | 48rpx | - |
+| --td-radio-vertical-padding | 32rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/radio/_example/align/index.vue b/packages/tdesign-uniapp/components/radio/_example/align/index.vue
new file mode 100644
index 000000000..6bf417726
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/align/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view>
+    <t-radio
+      value="radio1"
+      allow-uncheck
+      label="单选"
+      default-checked
+      relation-key="-1"
+    />
+
+    <view class="block" />
+
+    <t-radio
+      value="radio2"
+      allow-uncheck
+      label="单选"
+      placement="right"
+      default-checked
+      relation-key="-1"
+    />
+  </view>
+</template>
+
+<script>
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+export default {
+  components: {
+    tRadio,
+  },
+  /**
+     * 组件的属性列表
+     */
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {
+    onChange(event) {
+      console.log('radio', event);
+    },
+  },
+};
+</script>
+<style>
+.block {
+    height: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/base/index.vue b/packages/tdesign-uniapp/components/radio/_example/base/index.vue
new file mode 100644
index 000000000..1cbbd4251
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/base/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <t-radio-group
+      allow-uncheck
+      :value="current"
+      :options="options"
+      :relation-key="relationKey"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+
+export default {
+  components: {
+    tRadioGroup,
+  },
+  data() {
+    return {
+      relationKey: `${Math.random()}`,
+      current: 1,
+      options: [
+        {
+          value: 0,
+          label: '单选',
+        },
+        {
+          value: 1,
+          label: '单选',
+        },
+        {
+          value: 2,
+          label: '单选单选单选单选单选单选单选单选单选单选单选单选单选单选',
+        },
+        {
+          value: 3,
+          label: '单选',
+          content: '描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(event) {
+      console.log('[onChange]', event);
+      const { value } = event;
+      this.current = value;
+      console.log('[current]', this.current);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/card/index.vue b/packages/tdesign-uniapp/components/radio/_example/card/index.vue
new file mode 100644
index 000000000..0e4df6355
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/card/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <t-radio-group
+      t-class="theme-card"
+      :custom-style="cardCustomStyle"
+      default-value="radio1"
+    >
+      <t-radio
+        label="单选"
+        value="radio1"
+        default-checked
+      />
+      <t-radio
+        label="单选"
+        value="radio2"
+      />
+      <t-radio
+        label="单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行"
+        value="radio3"
+      />
+    </t-radio-group>
+  </view>
+</template>
+
+<script>
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tRadioGroup,
+    tRadio,
+  },
+  /**
+     * 组件的属性列表
+     */
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    cardCustomStyle() {
+      return _._style({
+        borderRadius: '24rpx',
+        margin: '16px',
+        overflow: 'hidden',
+      });
+    },
+  },
+  created() {},
+  methods: {
+    onChange() {},
+  },
+};
+</script>
+<style>
+/* .theme-card {
+    border-radius: 24rpx;
+    margin: 32rpx;
+    overflow: hidden;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/horizontal/index.vue b/packages/tdesign-uniapp/components/radio/_example/horizontal/index.vue
new file mode 100644
index 000000000..a8f621e21
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/horizontal/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <view>
+    <t-radio-group
+      default-value="0"
+      borderless
+      :custom-style="boxCustomStyle"
+    >
+      <t-radio
+        :block="false"
+        label="单选标题"
+        value="0"
+      />
+      <t-radio
+        :block="false"
+        label="单选标题"
+        value="1"
+      />
+      <t-radio
+        :block="false"
+        label="上限四字"
+        value="2"
+      />
+    </t-radio-group>
+  </view>
+</template>
+
+<script>
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tRadioGroup,
+    tRadio,
+  },
+  data() {
+    return {
+      checked: false,
+    };
+  },
+  computed: {
+    boxCustomStyle() {
+      return _._style({
+        padding: '16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        backgroundColor: 'var(--td-bg-color-container, #fff)',
+      });
+    },
+  },
+  methods: {
+    handleChange(e) {
+      console.log('handleChange', e);
+      this.checked = e.checked;
+    },
+  },
+};
+</script>
+<style>
+.box {
+    padding: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    background-color: var(--td-bg-color-container, #fff);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/radio.less b/packages/tdesign-uniapp/components/radio/_example/radio.less
new file mode 100644
index 000000000..0cc988b70
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/radio.less
@@ -0,0 +1,10 @@
+.t-radio-padding {
+    padding: 24rpx 32rpx !important;
+}
+
+.t-radio-demo {
+    margin-top: 16px;
+}
+.disable-border {
+    display: none;
+}
diff --git a/packages/tdesign-uniapp/components/radio/_example/radio.vue b/packages/tdesign-uniapp/components/radio/_example/radio.vue
new file mode 100644
index 000000000..9d82df9a3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/radio.vue
@@ -0,0 +1,98 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Radio"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view
+        class="demo"
+        hover-class="none"
+        :hover-stop-propagation="false"
+      >
+        <t-demo-header
+          title="Radio 单选框"
+          desc="用于在预设的一组选项中执行单项选择，并呈现选择结果。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="纵向单选框"
+        >
+          <BaseDemo />
+        </t-demo>
+
+        <t-demo
+          title=""
+          desc="横向单选框"
+        >
+          <horizontal />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          desc="单选框状态"
+        >
+          <status />
+        </t-demo>
+
+        <t-demo
+          title="03 组件样式"
+          desc="勾选样式"
+        >
+          <theme />
+        </t-demo>
+
+        <t-demo desc="勾选显示位置">
+          <align />
+        </t-demo>
+
+        <t-demo desc="非通栏单选样式">
+          <card />
+        </t-demo>
+
+        <t-demo
+          title="04 特殊样式"
+          desc="纵向卡片单选框"
+        >
+          <special />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import horizontal from './horizontal/index.vue';
+import align from './align/index.vue';
+import card from './card/index.vue';
+import status from './status/index.vue';
+import theme from './theme/index.vue';
+import special from './special/index.vue';
+export default {
+  components: {
+    horizontal,
+    BaseDemo,
+    align,
+    card,
+    status,
+    theme,
+    special,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './radio.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/skyline/radio.less b/packages/tdesign-uniapp/components/radio/_example/skyline/radio.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/radio/_example/skyline/radio.vue b/packages/tdesign-uniapp/components/radio/_example/skyline/radio.vue
new file mode 100644
index 000000000..f7ce50637
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/skyline/radio.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <radio-demo />
+  </view>
+</template>
+
+<script lang="ts">
+
+import radioDemo from '../radio.vue';
+export default {
+  components: {
+    radioDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './radio.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/special/index.vue b/packages/tdesign-uniapp/components/radio/_example/special/index.vue
new file mode 100644
index 000000000..d1a84f6c0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/special/index.vue
@@ -0,0 +1,181 @@
+<template>
+  <view>
+    <t-radio-group
+      :value="value"
+      allow-uncheck
+      @change="onChange"
+    >
+      <view
+        v-for="(item, index) in 3"
+        :key="index"
+        :class="'card ' + (value == index ? 'card--active' : '')"
+      >
+        <t-icon
+          v-if="value == index"
+          name="check"
+          :t-class="cardIconTClass"
+          :class="cardIconClass"
+        />
+
+        <t-radio
+          :value="index"
+          label="单选"
+          content="描述信息描述信息描述信息描述信息描述信息"
+          icon="none"
+          borderless
+        />
+      </view>
+    </t-radio-group>
+
+    <view
+      class="demo-desc"
+      style="margin: 48rpx 32rpx 32rpx"
+    >
+      横向卡片单选框
+    </view>
+
+    <t-radio-group
+      :t-class="horBoxTClass"
+      :class="horBoxClass"
+      :custom-style="horBoxCustomStyle"
+      :value="value1"
+      @change="onChange1"
+    >
+      <view
+        v-for="(item, index) in 3"
+        :key="index"
+        :class="'card ' + (value1 == index ? 'card--active' : '')"
+      >
+        <t-icon
+          v-if="value1 == index"
+          name="check"
+          :t-class="cardIconTClass"
+          :class="cardIconClass"
+          custom-style="font-size: 12px;"
+        />
+
+        <t-radio
+          :value="index"
+          label="单选"
+          icon="none"
+          borderless
+        />
+      </view>
+    </t-radio-group>
+  </view>
+</template>
+
+<script>
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import { canUseVirtualHost } from 'tdesign-uniapp/common/version';
+import _ from 'tdesign-uniapp/common/utils.wxs';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tRadioGroup,
+    tRadio,
+    tIcon,
+  },
+  data() {
+    return {
+      value: 0,
+      value1: 0,
+    };
+  },
+  computed: {
+    cardIconTClass() {
+      return canUseVirtualHost() ? this.cardIconRealClass : '';
+    },
+    cardIconClass() {
+      return !canUseVirtualHost() ? this.cardIconRealClass : '';
+    },
+    cardIconRealClass() {
+      return 'card__icon';
+    },
+    horBoxTClass() {
+      return canUseVirtualHost() ? this.horBoxRealClass : '';
+    },
+    horBoxClass() {
+      return !canUseVirtualHost() ? this.horBoxRealClass : '';
+    },
+    horBoxRealClass() {
+      return 'horizontal-box';
+    },
+    horBoxCustomStyle() {
+      return _._style({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        margin: '16px',
+      });
+    },
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+      console.log('[change] e:', e);
+    },
+    onChange1(e) {
+      this.value1 = e.value;
+      console.log('[change] e:', e);
+    },
+  },
+};
+</script>
+<style>
+.card {
+    position: relative;
+    margin: 32rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    border: 3rpx solid var(--td-bg-color-container, #fff);
+}
+
+.card--active {
+    border-color: var(--td-brand-color, #0052d9);
+}
+
+.card--active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    border-width: 28px 28px 28px 0;
+    border-style: solid;
+    border-color: var(--td-brand-color, #0052d9) transparent transparent transparent;
+}
+
+.card__icon {
+    color: var(--td-bg-color-container, #fff);
+    position: absolute;
+    left: 1.5px;
+    top: 1.5px;
+    z-index: 1;
+    font-size: 16px;
+}
+
+/* 横向布局 */
+/* .horizontal-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 32rpx;
+} */
+
+.horizontal-box .card {
+    flex: 0 0 calc(33.33% - 12rpx);
+    margin: 0 0 24rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/status/index.vue b/packages/tdesign-uniapp/components/radio/_example/status/index.vue
new file mode 100644
index 000000000..1fba3b274
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/status/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-radio-group
+      default-value="radio1"
+      :disabled="true"
+    >
+      <t-radio
+        value="radio1"
+        label="单选"
+      />
+      <t-radio
+        value="radio2"
+        label="单选"
+      />
+    </t-radio-group>
+  </view>
+</template>
+
+<script>
+import tRadioGroup from 'tdesign-uniapp/radio-group/radio-group.vue';
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+export default {
+  components: {
+    tRadioGroup,
+    tRadio,
+  },
+  /**
+     * 组件的属性列表
+     */
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/_example/theme/index.vue b/packages/tdesign-uniapp/components/radio/_example/theme/index.vue
new file mode 100644
index 000000000..d9ace744c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/_example/theme/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-radio
+      :default-checked="true"
+      allow-uncheck
+      icon="line"
+      label="单选"
+      relation-key="-1"
+    />
+
+    <view
+      class="gutter"
+      style="height: 32rpx"
+      relation-key="-1"
+    />
+
+    <t-radio
+      :default-checked="true"
+      allow-uncheck
+      icon="dot"
+      label="单选"
+      relation-key="-1"
+    />
+  </view>
+</template>
+
+<script>
+import tRadio from 'tdesign-uniapp/radio/radio.vue';
+export default {
+  components: {
+    tRadio,
+  },
+  /**
+     * 组件的属性列表
+     */
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  /**
+     * 组件的方法列表
+     */
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/props.ts b/packages/tdesign-uniapp/components/radio/props.ts
new file mode 100644
index 000000000..9dc8e92bf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/props.ts
@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRadioProps } from './type';
+export default {
+  /** 是否允许取消选中 */
+  allowUncheck: Boolean,
+  /** 是否为块级元素 */
+  block: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否选中 */
+  checked: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否选中，非受控属性 */
+  defaultChecked: Boolean,
+  /** 单选内容 */
+  content: {
+    type: String,
+  },
+  /** 是否禁用组件内容（content）触发选中 */
+  contentDisabled: Boolean,
+  /** 是否为禁用态 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdRadioProps['icon'],
+  },
+  /** 主文案 */
+  label: {
+    type: String,
+  },
+  /** 内容最大行数限制 */
+  maxContentRow: {
+    type: Number,
+    default: 5,
+  },
+  /** 主文案最大行数限制 */
+  maxLabelRow: {
+    type: Number,
+    default: 3,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */
+  placement: {
+    type: String,
+    validator(val: TdRadioProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 单选按钮的值 */
+  value: {
+    type: [String, Number, Boolean],
+    default: false as TdRadioProps['value'],
+  },
+  /** 值变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/radio/radio.less b/packages/tdesign-uniapp/components/radio/radio.less
new file mode 100644
index 000000000..c1a4af1db
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/radio.less
@@ -0,0 +1,235 @@
+@import '../common/style/base.less';
+
+@radio-icon-size: var(--td-radio-icon-size, 48rpx);
+@radio-font-size: var(--td-radio-font-size, 32rpx);
+@radio-label-line-height: var(--td-radio-label-line-height, 48rpx);
+@radio-content-line-height: var(--td-radio-content-line-height, 44rpx);
+@radio-vertical-padding: var(--td-radio-vertical-padding, 32rpx);
+@radio-bg-color: var(--td-radio-bg-color, @bg-color-container);
+@radio-border-color: var(--td-radio-border-color, @component-stroke);
+@radio-label-color: var(--td-radio-label-color, @text-color-primary);
+@radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled);
+@radio-label-checked-color: var(--td-radio-label-checked-color, @text-color-primary);
+@radio-content-color: var(--td-radio-content-color, @text-color-secondary);
+@radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled);
+@radio-content-checked-color: var(--td-radio-content-checked-color, @text-color-secondary);
+@radio-icon-color: var(--td-radio-icon-color, @component-border);
+@radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled);
+@radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled);
+@radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color);
+
+@radio-content-font-size: var(--td-radio-content-font-size, 28rpx);
+
+.limit-title-row {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.@{prefix}-radio {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  font-size: @radio-font-size;
+  background: @radio-bg-color;
+
+  &:focus {
+    outline: 0;
+  }
+  &--block {
+    display: flex;
+    padding: @radio-vertical-padding;
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  &__icon {
+    position: relative;
+    margin-top: calc((@radio-label-line-height - @radio-icon-size) / 2);
+    width: @radio-icon-size;
+    height: @radio-icon-size;
+    font-size: @radio-icon-size;
+    color: @radio-icon-color;
+    overflow: hidden;
+
+    &:empty {
+      display: none;
+    }
+
+    &--left {
+      margin-right: 16rpx;
+    }
+
+    &--checked {
+      color: @radio-icon-checked-color;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      color: @radio-icon-disabled-color;
+    }
+
+    &-circle {
+      width: @radio-icon-size;
+      height: @radio-icon-size;
+      box-sizing: border-box;
+
+      &::after {
+        content: '';
+        width: calc(200% - 6rpx);
+        height: calc(200% - 6rpx);
+        border-radius: 50%;
+        border: 3px solid @radio-icon-color;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0.5);
+        box-sizing: border-box;
+      }
+
+      &--disabled::after {
+        background: @radio-icon-disabled-bg-color;
+      }
+    }
+
+    &-line {
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 5rpx;
+        border-radius: 2rpx;
+        background: @radio-icon-checked-color;
+        transform-origin: top center;
+      }
+
+      &::before {
+        height: 16rpx;
+        left: 8rpx;
+        top: 22rpx;
+        transform: rotate(-45deg);
+      }
+
+      &::after {
+        height: 26rpx;
+        right: 8rpx;
+        top: 14rpx;
+        transform: rotate(45deg);
+      }
+
+      &--disabled {
+        &::before,
+        &::after {
+          background: @radio-icon-disabled-color;
+        }
+      }
+    }
+
+    &-dot {
+      width: calc((@radio-icon-size - 6rpx) * 2);
+      height: calc((@radio-icon-size - 6rpx) * 2);
+      border: 6rpx solid @radio-icon-checked-color;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        content: '';
+        display: block;
+        width: @radio-icon-size;
+        height: @radio-icon-size;
+        background: @radio-icon-checked-color;
+        border-radius: 50%;
+      }
+
+      &--disabled {
+        border-color: @radio-icon-disabled-color;
+
+        &::after {
+          background: @radio-icon-disabled-color;
+        }
+      }
+    }
+  }
+
+  &__image {
+    line-height: @radio-icon-size;
+  }
+
+  &-icon__image {
+    height: @radio-icon-size;
+    width: @radio-icon-size;
+    vertical-align: sub;
+  }
+
+  &__content {
+    flex: 1;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__title {
+    .limit-title-row();
+    color: @radio-label-color;
+    line-height: @radio-label-line-height;
+    text-align: left;
+
+    &--checked {
+      color: @radio-label-checked-color;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      color: @radio-label-disabled-color;
+    }
+  }
+
+  &__description {
+    .limit-title-row();
+    color: @radio-content-color;
+    font-size: @radio-content-font-size;
+    line-height: @radio-content-line-height;
+
+    &--checked {
+      color: @radio-content-checked-color;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      color: @radio-content-disabled-color;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__title + &__description {
+    margin-top: 8rpx;
+  }
+
+  &__border {
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    background: @radio-border-color;
+    left: 96rpx;
+    right: 0;
+    transform: scaleY(0.5);
+
+    &--right {
+      left: 32rpx;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/radio/radio.vue b/packages/tdesign-uniapp/components/radio/radio.vue
new file mode 100644
index 000000000..7c61631c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/radio.vue
@@ -0,0 +1,227 @@
+<template>
+  <view
+    :id="tId"
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [_placement, ['block', block]]) + ' ' + tClass"
+    :disabled="_disabled"
+    aria-role="radio"
+    :aria-checked="dataChecked"
+    :aria-label="label + content"
+    :aria-disabled="_disabled"
+    @click.stop="handleTap"
+  >
+    <view :class="_.cls(classPrefix + '__icon', [_placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon">
+      <slot
+        v-if="slotIcon"
+        name="icon"
+      />
+      <view
+        v-else-if="customIcon"
+        :class="classPrefix + '__image'"
+      >
+        <image
+          :src="dataChecked ? iconVal[0] : iconVal[1]"
+          :class="classPrefix + '-icon__image'"
+          webp
+        />
+      </view>
+      <block v-else>
+        <t-icon
+          v-if="dataChecked && (icon == 'circle' || icon == 'line')"
+          :name="icon == 'circle' ? 'check-circle-filled' : 'check'"
+          :class="classPrefix + '__icon-wrap'"
+        />
+        <view
+          v-if="dataChecked && icon == 'dot'"
+          :class="_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+        />
+        <view
+          v-if="!dataChecked && (icon == 'circle' || icon == 'dot')"
+          :class="_.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])"
+        />
+        <view
+          v-if="!dataChecked && icon == 'line'"
+          class="placeholder"
+        />
+      </block>
+    </view>
+    <view
+      :class="classPrefix + '__content'"
+      data-target="text"
+      @click.stop="handleTap"
+    >
+      <view
+        :class="
+          _.cls(classPrefix + '__title', [
+            ['disabled', _disabled],
+            ['checked', dataChecked]
+          ]) +
+            ' ' +
+            tClassLabel
+        "
+        :style="'-webkit-line-clamp:' + maxLabelRow"
+      >
+        <block v-if="label">
+          {{ label }}
+        </block>
+        <slot />
+        <slot name="label" />
+      </view>
+      <view
+        :class="
+          _.cls(classPrefix + '__description', [
+            ['disabled', _disabled],
+            ['checked', dataChecked]
+          ]) +
+            ' ' +
+            tClassContent
+        "
+        :style="'-webkit-line-clamp:' + maxContentRow"
+      >
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+      </view>
+    </view>
+    <view
+      v-if="!borderless"
+      :class="_.cls(classPrefix + '__border', [_placement]) + ' ' + tClassBorder"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
+import { coalesce } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-radio`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'checked',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-content`,
+    `${prefix}-class-border`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Radio)],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    tId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      customIcon: false,
+      slotIcon: false,
+      optionLinked: false,
+      iconVal: [],
+      _placement: '',
+      _disabled: false,
+      _readonly: false,
+      _,
+
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  computed: {
+    isIsolated() {
+      return this.relationKey === ISOLATED_RELATION_KEY;
+    },
+  },
+  watch: {
+    checked: {
+      handler(v) {
+        this.dataChecked = v;
+      },
+      immediate: true,
+    },
+    disabled: {
+      handler(v) {
+        this._disabled = v;
+      },
+      immediate: true,
+    },
+    readonly: {
+      handler(v) {
+        this._readonly = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    handleTap(e) {
+      const { _disabled, _readonly, contentDisabled } = this;
+      const { target } = e.currentTarget.dataset;
+
+      if (_disabled || _readonly || (target === 'text' && contentDisabled)) return;
+
+      this.doChange();
+    },
+    doChange() {
+      const { value, dataChecked, allowUncheck } = this;
+      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+
+      const isAllowUncheck = Boolean(allowUncheck || parent?.allowUncheck);
+
+      if (parent) {
+        this[RELATION_MAP.Radio].updateValue(dataChecked && isAllowUncheck ? null : value);
+      } else {
+        this._trigger('change', { checked: isAllowUncheck ? !dataChecked : true });
+      }
+    },
+    init() {
+      const { icon } = this;
+      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+      const isIdArr = Array.isArray(parent?.icon || icon);
+
+      this.customIcon = isIdArr;
+      this.slotIcon = icon === 'slot';
+      this.iconVal = isIdArr ? parent?.icon || icon : [];
+      this._placement = this.placement || parent?.placement || 'left';
+    },
+
+    setDisabled(disabled) {
+      if (this.isIsolated) return;
+
+      this._disabled = this.disabled || disabled;
+    },
+
+    setReadonly(readonly) {
+      this._readonly = this.readonly || readonly;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './radio.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/radio/type.ts b/packages/tdesign-uniapp/components/radio/type.ts
new file mode 100644
index 000000000..e34c4623a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/radio/type.ts
@@ -0,0 +1,89 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRadioProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否为块级元素
+   * @default true
+   */
+  block?: boolean;
+  /**
+   * 是否选中
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   * @default false
+   */
+  defaultChecked?: boolean;
+  /**
+   * 单选内容
+   */
+  content?: string;
+  /**
+   * 是否禁用组件内容（content）触发选中
+   * @default false
+   */
+  contentDisabled?: boolean;
+  /**
+   * 是否为禁用态
+   */
+  disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'dot' | Array<string>;
+  /**
+   * 主文案
+   */
+  label?: string;
+  /**
+   * 内容最大行数限制
+   * @default 5
+   */
+  maxContentRow?: number;
+  /**
+   * 主文案最大行数限制
+   * @default 3
+   */
+  maxLabelRow?: number;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 单选按钮的值
+   * @default false
+   */
+  value?: T;
+  /**
+   * 值变化时触发
+   */
+  onChange?: (context: { checked: boolean }) => void;
+}
+
+export type RadioValue = string | number | boolean;
diff --git a/packages/tdesign-uniapp/components/rate/README.en-US.md b/packages/tdesign-uniapp/components/rate/README.en-US.md
new file mode 100644
index 000000000..62d286cdd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/README.en-US.md
@@ -0,0 +1,50 @@
+:: BASE_DOC ::
+
+## API
+
+### Rate Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-half | Boolean | false | \- | N
+color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | N
+count | Number | 5 | \- | N
+disabled | Boolean | undefined | \- | N
+gap | String / Number | 8 | \- | N
+icon | String / Array | - | Typescript：`string \| string[]` | N
+icon-prefix | String | undefined | \- | N
+placement | String | top | options: top / bottom / '' | N
+show-text | Boolean | false | \- | N
+size | String / Number | '24px' | \- | N
+texts | Array | [] | Typescript：`Array<string>` | N
+value | Number | 0 | `v-model:value` is supported | N
+default-value | Number | 0 | uncontrolled property | N
+variant | String | outline | options: outline/filled | N
+
+### Rate Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number })` | \-
+
+### Rate External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @text-color-primary | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @text-color-disabled | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @component-border | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/rate/README.md b/packages/tdesign-uniapp/components/rate/README.md
new file mode 100644
index 000000000..76016c3db
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/README.md
@@ -0,0 +1,107 @@
+---
+title: Rate 评分
+description: 用于对某行为/事物进行打分。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TRate from 'tdesign-uniapp/rate/rate.vue';
+```
+
+### 组件类型
+
+实心评分
+
+{{ base }}
+
+自定义评分
+
+{{ custom }}
+
+自定义评分数量
+
+{{ count }}
+
+带描述评分
+
+{{ show-text }}
+
+### 组件状态
+
+{{ action }}
+
+### 组件样式
+
+评分大小
+
+{{ size }}
+
+设置评分颜色
+
+{{ color }}
+
+### 特殊样式
+
+竖向带描述评分
+
+{{ special }}
+
+自定义图片前缀
+
+{{iconPrefix}}
+
+
+## API
+
+### Rate Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
+count | Number | 5 | 评分的数量 | N
+disabled | Boolean | undefined | 是否禁用评分 | N
+gap | String / Number | 8 | 评分图标的间距 | N
+icon | String / Array | - | 自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
+icon-prefix | String | undefined | 定义图标前缀 | N
+placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹框。可选项：top / bottom / '' | N
+show-text | Boolean | false | 是否显示对应的辅助文字 | N
+size | String / Number | '24px' | 评分图标的大小 | N
+texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
+value | Number | 0 | 选择评分的值。支持语法糖 `v-model:value` | N
+default-value | Number | 0 | 选择评分的值。非受控属性 | N
+variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+
+### Rate Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number })` | 评分数改变时触发
+
+### Rate External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-rate-icon-scale | 1.33 | - |
+| --td-rate-selected-color | @warning-color | - |
+| --td-rate-text-active-color | @text-color-primary | - |
+| --td-rate-text-active-font-weight | 600 | - |
+| --td-rate-text-color | @text-color-disabled | - |
+| --td-rate-text-font-size | @font-size-m | - |
+| --td-rate-unselected-color | @component-border | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/rate/_example/action/index.vue b/packages/tdesign-uniapp/components/rate/_example/action/index.vue
new file mode 100644
index 000000000..997003dc0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/action/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      只可选全星时
+    </view>
+
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        点击或滑动
+      </view>
+      <t-rate
+        :value="value"
+        @change="onChange"
+      />
+    </view>
+
+    <view class="demo-desc">
+      只可选半星时
+    </view>
+
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        点击或滑动
+      </view>
+      <t-rate
+        :default-value="3"
+        allow-half
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 3.5,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/base/index.vue b/packages/tdesign-uniapp/components/rate/_example/base/index.vue
new file mode 100644
index 000000000..ddcfb0b92
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/base/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view class="demo-rate">
+    <view class="demo-rate__title">
+      实心评分
+    </view>
+
+    <t-rate
+      :value="value"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 3,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/color/index.vue b/packages/tdesign-uniapp/components/rate/_example/color/index.vue
new file mode 100644
index 000000000..28749fa45
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/color/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <view class="demo-rate custom-color">
+      <view class="demo-rate__title">
+        填充评分
+      </view>
+      <t-rate
+        :default-value="3"
+        allow-half
+      />
+    </view>
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        线描评分
+      </view>
+      <t-rate
+        :default-value="3"
+        :icon="['star-filled', 'star']"
+        color="#00a870"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.custom-color {
+    --td-rate-selected-color: #f96102;
+    --td-rate-unselected-color: #bbbbbb;
+}
+
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/count/index.vue b/packages/tdesign-uniapp/components/rate/_example/count/index.vue
new file mode 100644
index 000000000..7e2a1725d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/count/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view class="demo-rate">
+    <view class="demo-rate__title">
+      自定义评分数量
+    </view>
+    <!-- 自定义评分数量，设置属性：count -->
+    <t-rate
+      :value="value"
+      :count="3"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 2,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/custom-prefix/index.vue b/packages/tdesign-uniapp/components/rate/_example/custom-prefix/index.vue
new file mode 100644
index 000000000..b5ca8c990
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/custom-prefix/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view class="demo-rate">
+    <view class="demo-rate__title">
+      第三方图标
+    </view>
+    <t-rate
+      :value="value"
+      icon-prefix="icon"
+      icon="a-1h"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 3,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/custom/index.vue b/packages/tdesign-uniapp/components/rate/_example/custom/index.vue
new file mode 100644
index 000000000..466fd0046
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/custom/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view class="demo-rate">
+    <view class="demo-rate__title">
+      自定义评分
+    </view>
+    <t-rate
+      :value="value"
+      icon="thumb-up"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 3,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/iconfont.css b/packages/tdesign-uniapp/components/rate/_example/iconfont.css
new file mode 100644
index 000000000..1e2c54344
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/iconfont.css
@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'icon'; /* Project id 3144196 */
+    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+        format('woff2');
+}
+
+:deep(.icon) {
+    font-family: 'icon' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:deep(.icon-a-0:before) {
+    content: '\e64d';
+}
+
+:deep(.icon-a-1h:before) {
+    content: '\e64e';
+}
+
+:deep(.icon-a-2h:before) {
+    content: '\e64f';
+}
+
+:deep(.icon-a-3h:before) {
+    content: '\e650';
+}
diff --git a/packages/tdesign-uniapp/components/rate/_example/rate.less b/packages/tdesign-uniapp/components/rate/_example/rate.less
new file mode 100644
index 000000000..feaf508cb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/rate.less
@@ -0,0 +1 @@
+@import './iconfont.css';
diff --git a/packages/tdesign-uniapp/components/rate/_example/rate.vue b/packages/tdesign-uniapp/components/rate/_example/rate.vue
new file mode 100644
index 000000000..46ec38334
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/rate.vue
@@ -0,0 +1,98 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Rate"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Rate 评分"
+        desc="用于对某行为/事物进行打分。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo title="01 组件类型">
+        <view class="demo-desc">
+          实心评分
+        </view>
+        <BaseDemo />
+
+        <view class="demo-desc">
+          自定义评分
+        </view>
+        <custom />
+
+        <view class="demo-desc">
+          第三方图标评分
+        </view>
+        <custom-prefix />
+
+        <view class="demo-desc">
+          自定义评分数量
+        </view>
+        <count />
+
+        <view class="demo-desc">
+          带描述评分
+        </view>
+        <show-text />
+      </t-demo>
+
+      <t-demo title="02 组件状态">
+        <action />
+      </t-demo>
+
+      <t-demo title="03 组件样式">
+        <view class="demo-desc">
+          评分大小
+        </view>
+        <size />
+
+        <view class="demo-desc">
+          设置评分颜色
+        </view>
+        <color />
+      </t-demo>
+
+      <t-demo
+        title="04 特殊样式"
+        desc="竖向带描述评分"
+      />
+      <special />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import custom from './custom/index.vue';
+import customPrefix from './custom-prefix/index.vue';
+import special from './special/index.vue';
+import count from './count/index.vue';
+import action from './action/index.vue';
+import showText from './show-text/index.vue';
+import color from './color/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    custom,
+    customPrefix,
+    special,
+    count,
+    action,
+    showText,
+    color,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './rate.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/show-text/index.vue b/packages/tdesign-uniapp/components/rate/_example/show-text/index.vue
new file mode 100644
index 000000000..0761ea143
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/show-text/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view>
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        带描述评分
+      </view>
+      <!-- 自定义带描述评分，设置属性：texts -->
+      <t-rate
+        :value="value[0]"
+        :data-index="0"
+        :show-text="true"
+        :texts="texts"
+        @change="onChange($event, { index: 0 })"
+      />
+    </view>
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        带描述评分
+      </view>
+      <!-- 带描述评分，设置属性：showText -->
+      <t-rate
+        :value="value[1]"
+        :data-index="1"
+        :show-text="true"
+        @change="onChange($event, { index: 1 })"
+      />
+    </view>
+
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        带描述评分
+      </view>
+      <t-rate
+        :value="value[2]"
+        :data-index="2"
+        :show-text="true"
+        @change="onChange($event, { index: 2 })"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: [3, 3, 0],
+      texts: ['1分', '2分', '3分', '4分', '5分'],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e, { index }) {
+      const { value } = e;
+      this.value[index] = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/size/index.vue b/packages/tdesign-uniapp/components/rate/_example/size/index.vue
new file mode 100644
index 000000000..bda4cf5dd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/size/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        大尺寸 24
+      </view>
+      <t-rate
+        :value="value[0]"
+        :data-index="0"
+        @change="onChange($event, { index: 0 })"
+      />
+    </view>
+    <view class="demo-rate">
+      <view class="demo-rate__title">
+        小尺寸 20
+      </view>
+      <t-rate
+        :value="value[1]"
+        :data-index="1"
+        :size="20"
+        @change="onChange($event, { index: 1 })"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: [3, 3],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e, { index }) {
+      const { value } = e;
+      this.value[index] = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+    width: 200rpx;
+    font-size: 16px;
+}
+
+.demo-rate__transparent {
+    background-color: transparent;
+    padding-left: 32rpx;
+    border: 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/_example/special/index.vue b/packages/tdesign-uniapp/components/rate/_example/special/index.vue
new file mode 100644
index 000000000..15a832a98
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/_example/special/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <view class="demo-rate">
+    <view class="rate-wrapper">
+      <t-rate
+        :value="value"
+        size="60rpx"
+        :texts="texts"
+        @change="onChange"
+      />
+    </view>
+    <view :class="'desc desc--' + (value > 3 ? 'active' : '')">
+      {{ texts[value - 1] }}
+    </view>
+  </view>
+</template>
+
+<script>
+import tRate from 'tdesign-uniapp/rate/rate.vue';
+export default {
+  components: {
+    tRate,
+  },
+  data() {
+    return {
+      value: 4,
+      texts: ['非常糟糕', '有些糟糕', '可以尝试', '可以前往', '推荐前往'],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { value } = e;
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.demo-rate {
+    background-color: var(--bg-color-demo);
+    color: var(--td-text-color-primary);
+    padding: 32rpx;
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+}
+
+.rate-wrapper {
+    display: flex;
+    justify-content: center;
+}
+
+.desc {
+    text-align: center;
+    margin-top: 24rpx;
+}
+
+.desc--active {
+    color: #ed7b2f;
+    font-weight: 600;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/computed.js b/packages/tdesign-uniapp/components/rate/computed.js
new file mode 100644
index 000000000..11930ca59
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/computed.js
@@ -0,0 +1,66 @@
+export default {
+  getText(texts, val, defaultTexts) {
+    if (!texts.length) {
+      texts = defaultTexts;
+    }
+    const curVal = Math.floor(val - 1);
+    return texts[curVal] || '未评分';
+  },
+
+  getIconName(defaultValue, value, index, icon) {
+    const curVal = value >= 0 ? value : defaultValue;
+    let name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = Array.isArray(icon) ? icon : [icon, icon];
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass(classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    const curVal = value >= 0 ? value : defaultValue;
+    const className = [];
+    if (curVal >= index + 1) {
+      className.push(`${classPrefix}--selected`);
+      if (disabled) {
+        className.push(`${classPrefix}--disabled`);
+      }
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(`${classPrefix}--selected-half`);
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+      if (disabled) {
+        className.push(`${classPrefix}--disabled-half`);
+      }
+    } else {
+      className.push(`${classPrefix}--unselected`);
+    }
+    return className.join(' ');
+  },
+
+  ceil(value) {
+    return Math.ceil(value);
+  },
+
+  getColor(color) {
+    if (Array.isArray(color) && color.length === 2) {
+      return `;--td-rate-selected-color: ${color[0]}; --td-rate-unselected-color: ${color[1]}`;
+    }
+
+    if (typeof color === 'string') {
+      return `;--td-rate-selected-color: ${color}`;
+    }
+
+    return '';
+  },
+
+  regSize(val) {
+    const value = `${val}`;
+    return value.indexOf('px') ? value : `${value}px`;
+  },
+};
diff --git a/packages/tdesign-uniapp/components/rate/props.ts b/packages/tdesign-uniapp/components/rate/props.ts
new file mode 100644
index 000000000..50640647b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/props.ts
@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRateProps } from './type';
+export default {
+  /** 是否允许半选 */
+  allowHalf: Boolean,
+  /** 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] */
+  color: {
+    type: [String, Array],
+    default: '#ED7B2F' as TdRateProps['color'],
+  },
+  /** 评分的数量 */
+  count: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否禁用评分 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 评分图标的间距 */
+  gap: {
+    type: [String, Number],
+    default: 8 as TdRateProps['gap'],
+  },
+  /** 自定义评分图标，[选中图标，未选中图标] */
+  icon: {
+    type: [String, Array],
+  },
+  /** 定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    default: undefined,
+  },
+  /** 选择评分弹框的位置，值为空字符表示不显示评分弹框 */
+  placement: {
+    type: String,
+    default: 'top' as TdRateProps['placement'],
+    validator(val: TdRateProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'bottom', ''].includes(val);
+    },
+  },
+  /** 是否显示对应的辅助文字 */
+  showText: Boolean,
+  /** 评分图标的大小 */
+  size: {
+    type: [String, Number],
+    default: '24px' as TdRateProps['size'],
+  },
+  /** 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] */
+  texts: {
+    type: Array,
+    default: (): TdRateProps['texts'] => [],
+  },
+  /** 选择评分的值 */
+  value: {
+    type: Number,
+    default: 0,
+  },
+  /** 选择评分的值，非受控属性 */
+  defaultValue: {
+    type: Number,
+    default: 0,
+  },
+  /** 已废弃。形状类型，有描边类型和填充类型两种 */
+  variant: {
+    type: String,
+    default: 'outline' as TdRateProps['variant'],
+    validator(val: TdRateProps['variant']): boolean {
+      if (!val) return true;
+      return ['outline', 'filled'].includes(val);
+    },
+  },
+  /** 评分数改变时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/rate/rate.less b/packages/tdesign-uniapp/components/rate/rate.less
new file mode 100644
index 000000000..4c5972576
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/rate.less
@@ -0,0 +1,101 @@
+@import '../common/style/base.less';
+
+@rate-text-font-size: var(--td-rate-text-font-size, @font-size-m);
+@rate-text-color: var(--td-rate-text-color, @text-color-disabled);
+@rate-text-active-color: var(--td-rate-text-active-color, @text-color-primary);
+@rate-selected-color: var(--td-rate-selected-color, @warning-color);
+@rate-unselected-color: var(--td-rate-unselected-color, @component-border);
+@rate-text-active-font-weight: var(--td-rate-text-active-font-weight, 600);
+@rate-icon-scale: var(--td-rate-icon-scale, 1.33);
+
+.@{prefix}-rate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &__wrapper {
+    line-height: 1em;
+    display: inline-flex;
+  }
+
+  :deep(&__icon) {
+    display: block;
+    line-height: 1em;
+    width: 1em;
+    transition: transform 0.3s ease;
+
+    &--current {
+      transform: scale(@rate-icon-scale);
+    }
+
+    &--selected {
+      color: @rate-selected-color;
+
+      &-half {
+        color: transparent;
+        background: linear-gradient(
+          to right,
+          @rate-selected-color 0%,
+          @rate-selected-color 50%,
+          @rate-unselected-color 51%,
+          @rate-unselected-color 100%
+        );
+        -webkit-background-clip: text;
+        background-clip: text;
+      }
+    }
+
+    &--unselected {
+      color: @rate-unselected-color;
+    }
+  }
+
+  &__text {
+    font-size: @rate-text-font-size;
+    color: @rate-text-color;
+    margin-left: 32rpx;
+    vertical-align: middle;
+
+    &--active {
+      color: @rate-text-active-color;
+      font-weight: @rate-text-active-font-weight;
+    }
+    .sr-only();
+  }
+
+  &__tips {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: calc(100% + 16rpx);
+    padding: 8rpx;
+    border-radius: 12rpx;
+    box-shadow: @shadow-1;
+    background-color: @bg-color-container;
+    transform: translateX(-50%);
+
+    &--bottom {
+      top: calc(100% + 16rpx);
+      bottom: auto;
+    }
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 64rpx;
+      border-radius: 6rpx;
+
+      &--active {
+        background-color: @bg-color-component;
+      }
+    }
+
+    &-text {
+      text-align: center;
+      font-size: 24rpx;
+      line-height: 40rpx;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/rate/rate.vue b/packages/tdesign-uniapp/components/rate/rate.vue
new file mode 100644
index 000000000..b7c2e51f7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/rate.vue
@@ -0,0 +1,276 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="_._style([customStyle])"
+  >
+    <view
+      :class="classPrefix + '__wrapper ' + tClass"
+      :style="'font-size:' + utils.regSize(size)"
+      aria-role="slider"
+      :aria-valuemax="count"
+      :aria-valuemin="0"
+      :aria-valuenow="dataValue"
+      :aria-valuetext="utils.getText(texts, dataValue, defaultTexts)"
+      @touchstart="parseEventDynamicCode($event, !disabled ? 'onTouchStart' : '')"
+      @touchmove="parseEventDynamicCode($event, !disabled ? 'onTouchMove' : '')"
+      @click="onTap"
+      @touchend="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+      @touchcancel="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+    >
+      <t-icon
+        v-for="(item, index) in count"
+        :key="index"
+        :t-class="classPrefix + '__icon ' + utils.getIconClass(classPrefix + '__icon', defaultValue, dataValue, index, allowHalf, disabled, scaleIndex) + ' ' + tClassIcon"
+        :custom-style="'margin-right: ' + (count - index > 1 ? _.addUnit(gap) : 0) + '; ' + utils.getColor(color)"
+        :name="utils.getIconName(defaultValue, dataValue, index, icon)"
+        :size="size"
+        :prefix="iconPrefix"
+      />
+    </view>
+    <text
+      v-if="showText"
+      :class="_.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
+      :aria-hidden="true"
+    >
+      {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <text
+      v-if="isVisibleToScreenReader"
+      :class="
+        _.cls(classPrefix + '__text', [
+          ['active', dataValue > 0],
+          ['sr-only', isVisibleToScreenReader]
+        ]) +
+          ' ' +
+          tClassText
+      "
+      aria-role="alert"
+      aria-live="assertive"
+    >
+      {{ dataValue + '星' }} {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <!-- TODO -->
+    <view
+      v-if="tipsVisible && placement"
+      :class="_.cls(classPrefix + '__tips', [placement])"
+      :style="'left: ' + tipsLeft + 'px'"
+      :aria-hidden="true"
+    >
+      <block v-if="actionType == 'tap'">
+        <view
+          v-if="allowHalf"
+          :class="_.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) - 0.5 == dataValue]])"
+          :data-value="utils.ceil(dataValue) - 0.5"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--selected-half'"
+            :name="utils.getIconName(defaultValue, dataValue, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) - 0.5 }}
+          </view>
+        </view>
+        <view
+          :class="_.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue]])"
+          :data-value="utils.ceil(dataValue)"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="_.cls(classPrefix + '__icon', ['selected'])"
+            :name="utils.getIconName(defaultValue, 0, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) }}
+          </view>
+        </view>
+      </block>
+      <view
+        v-else
+        :class="_.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue && actionType == 'tap']])"
+        :data-value="utils.ceil(dataValue)"
+        @click="onSelect"
+      >
+        <t-icon
+          :t-class="
+            _.cls(classPrefix + '__icon', [
+              ['selected', utils.ceil(dataValue) == dataValue],
+              ['selected-half', utils.ceil(dataValue) != dataValue]
+            ])
+          "
+          :name="utils.getIconName(defaultValue, 0, 0, icon)"
+          :size="size"
+          :custom-style="utils.getColor(color)"
+        />
+        <view :class="classPrefix + '__tips-text'">
+          {{ dataValue }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { unitConvert, getRect, coalesce } from '../common/utils';
+import _ from '../common/utils.wxs';
+import utils from './computed.js';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+
+const name = `${prefix}-rate`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
+      tipsVisible: false,
+      tipsLeft: 0,
+      actionType: '',
+      scaleIndex: -1,
+      isVisibleToScreenReader: false,
+
+      _,
+      utils,
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    parseEventDynamicCode,
+    onTouch(e, eventType) {
+      const { count, allowHalf, gap, dataValue: currentValue, size } = this;
+      let touch = e.changedTouches?.[0];
+      // #ifdef MP-ALIPAY
+      if (eventType === 'tap') {
+        touch = e.target;
+      }
+      // #endif
+      const margin = unitConvert(gap);
+      getRect(this, `.${name}__wrapper`).then((rect) => {
+        const { width, left } = rect;
+        const starWidth = (width - (count - 1) * margin) / count;
+        const offsetX = touch.pageX - left;
+        const num = (offsetX + margin) / (starWidth + margin);
+        const remainder = num % 1;
+        const integral = num - remainder;
+        let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
+
+        if (value > count) {
+          value = count;
+        } else if (value < 0) {
+          value = 0;
+        }
+
+        const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
+        this.tipsVisible = true;
+        this.actionType = eventType;
+        this.scaleIndex = Math.ceil(value);
+        this.tipsLeft = Math.max(tipsLeft, 0);
+
+        if (value !== currentValue) {
+          this.innerTrigger(value);
+        }
+
+        if (this.touchEnd) {
+          this.hideTips();
+        }
+      });
+    },
+    innerTrigger(value) {
+      this._trigger('change', { value });
+      if (this._selfControlled) {
+        this.currentValue = value;
+      }
+    },
+    onTap(e) {
+      const { disabled } = this;
+      if (disabled) return;
+      this.onTouch(e, 'tap');
+    },
+    onTouchStart() {
+      this.touchEnd = false;
+    },
+    onTouchMove(e) {
+      this.onTouch(e, 'move');
+      this.showAlertText();
+    },
+    onTouchEnd() {
+      this.touchEnd = true;
+      this.hideTips();
+    },
+    hideTips() {
+      if (this.actionType === 'move') {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }
+    },
+    onSelect(e) {
+      const { value } = e.currentTarget.dataset;
+      const { actionType } = this;
+
+      if (actionType === 'move') return;
+
+      this.innerTrigger(value);
+
+      setTimeout(() => {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }, 300);
+    },
+    // 旁白模式: 变更数值时显示告警文案
+    showAlertText() {
+      if (this.isVisibleToScreenReader === true) return;
+      this.isVisibleToScreenReader = true;
+
+      setTimeout(() => {
+        this.isVisibleToScreenReader = false;
+      }, 2e3);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './rate.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/rate/type.ts b/packages/tdesign-uniapp/components/rate/type.ts
new file mode 100644
index 000000000..cf86913c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/rate/type.ts
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRateProps {
+  /**
+   * 是否允许半选
+   * @default false
+   */
+  allowHalf?: boolean;
+  /**
+   * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']
+   * @default '#ED7B2F'
+   */
+  color?: string | Array<string>;
+  /**
+   * 评分的数量
+   * @default 5
+   */
+  count?: number;
+  /**
+   * 是否禁用评分
+   */
+  disabled?: boolean;
+  /**
+   * 评分图标的间距
+   * @default 8
+   */
+  gap?: string | number;
+  /**
+   * 自定义评分图标，[选中图标，未选中图标]
+   */
+  icon?: string | string[];
+  /**
+   * 定义图标前缀
+   */
+  iconPrefix?: string;
+  /**
+   * 选择评分弹框的位置，值为空字符表示不显示评分弹框
+   * @default top
+   */
+  placement?: 'top' | 'bottom' | '';
+  /**
+   * 是否显示对应的辅助文字
+   * @default false
+   */
+  showText?: boolean;
+  /**
+   * 评分图标的大小
+   * @default '24px'
+   */
+  size?: string | number;
+  /**
+   * 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']
+   * @default []
+   */
+  texts?: Array<string>;
+  /**
+   * 选择评分的值
+   * @default 0
+   */
+  value?: number;
+  /**
+   * 选择评分的值，非受控属性
+   * @default 0
+   */
+  defaultValue?: number;
+  /**
+   * 已废弃。形状类型，有描边类型和填充类型两种
+   * @default outline
+   */
+  variant?: 'outline' | 'filled';
+  /**
+   * 评分数改变时触发
+   */
+  onChange?: (context: { value: number }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/result/README.en-US.md b/packages/tdesign-uniapp/components/result/README.en-US.md
new file mode 100644
index 000000000..5cda96d0d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/README.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### Result Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+description | String | - | \- | N
+icon | String / Boolean / Object | true | \- | N
+image | String | - | \- | N
+theme | String | default | options: default/success/warning/error | N
+title | String | '' | \- | N
+
+### Result Slots
+
+name | Description
+-- | --
+description | \-
+image | \-
+title | \-
+
+### Result External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-description | \-
+t-class-image | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-result-description-color | @text-color-secondary | - 
+--td-result-description-font-size | @font-size-base | - 
+--td-result-description-line-height | 44rpx | - 
+--td-result-description-margin-top | @spacer | - 
+--td-result-icon-default-color | @brand-color | - 
+--td-result-icon-error-color | @error-color | - 
+--td-result-icon-success-color | @success-color | - 
+--td-result-icon-warning-color | @warning-color | - 
+--td-result-title-color | @text-color-primary | - 
+--td-result-title-font-size | @font-size-xl | - 
+--td-result-title-line-height | 56rpx | - 
+--td-result-title-margin-top | @spacer-1 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/result/README.md b/packages/tdesign-uniapp/components/result/README.md
new file mode 100644
index 000000000..41e6eb630
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/README.md
@@ -0,0 +1,90 @@
+---
+title: Result 结果
+description: 反馈结果状态。
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TResult from 'tdesign-uniapp/result/result.vue';
+```
+
+### 组件类型
+
+基础结果
+
+{{ theme }}
+
+带描述的结果
+
+{{ description }}
+
+自定义结果
+
+{{ custom }}
+
+## 常见问题
+
+<details>
+  <summary>
+    本地图片无法正确引用?
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
+  </p>
+</details>
+
+## API
+
+### Result Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+description | String | - | 描述文字 | N
+icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 | N
+image | String | - | 图片地址 | N
+theme | String | default | 内置主题。可选项：default/success/warning/error | N
+title | String | '' | 标题 | N
+
+### Result Slots
+
+名称 | 描述
+-- | --
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+title | 自定义 `title` 显示内容
+
+### Result External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-result-description-color | @text-color-secondary | - |
+| --td-result-description-font-size | @font-size-base | - |
+| --td-result-description-line-height | 44rpx | - |
+| --td-result-description-margin-top | @spacer | - |
+| --td-result-icon-default-color | @brand-color | - |
+| --td-result-icon-error-color | @error-color | - |
+| --td-result-icon-success-color | @success-color | - |
+| --td-result-icon-warning-color | @warning-color | - |
+| --td-result-title-color | @text-color-primary | - |
+| --td-result-title-font-size | @font-size-xl | - |
+| --td-result-title-line-height | 56rpx | - |
+| --td-result-title-margin-top | @spacer-1 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/result/_example/custom/index.vue b/packages/tdesign-uniapp/components/result/_example/custom/index.vue
new file mode 100644
index 000000000..7fe99a731
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/custom/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-result
+      t-class-image="external-class-image"
+      image="https://tdesign.gtimg.com/mobile/demos/result1.png"
+    >
+      <template #title>
+        <view>
+          自定义结果
+        </view>
+      </template>
+      <template #description>
+        <view>
+          描述文字
+        </view>
+      </template>
+    </t-result>
+  </view>
+</template>
+
+<script>
+import tResult from 'tdesign-uniapp/result/result.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tResult,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+:deep(.external-class-image) {
+    width: 100px;
+    height: 80px;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/result/_example/description/index.vue b/packages/tdesign-uniapp/components/result/_example/description/index.vue
new file mode 100644
index 000000000..9af2ee132
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/description/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <view
+      v-for="(item, index) in resultList"
+      :key="index"
+    >
+      <view class="demo-section__content">
+        <t-result
+          :theme="item.theme"
+          :title="item.title"
+          :description="item.description"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tResult from 'tdesign-uniapp/result/result.vue';
+export default {
+  components: {
+    tResult,
+  },
+  data() {
+    return {
+      resultList: [
+        {
+          title: '成功状态',
+          theme: 'success',
+          description: '描述文字',
+        },
+        {
+          title: '失败状态',
+          theme: 'error',
+          description: '描述文字',
+        },
+        {
+          title: '警示状态',
+          theme: 'warning',
+          description: '描述文字',
+        },
+        {
+          title: '默认状态',
+          theme: 'default',
+          description: '描述文字',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-section__content {
+    margin-bottom: 96rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/result/_example/result-page.less b/packages/tdesign-uniapp/components/result/_example/result-page.less
new file mode 100644
index 000000000..0f0c25781
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/result-page.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    .demo-section__wrapper {
+        padding: 48rpx 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/result/_example/result-page.vue b/packages/tdesign-uniapp/components/result/_example/result-page.vue
new file mode 100644
index 000000000..852009ceb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/result-page.vue
@@ -0,0 +1,56 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Result Page"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="page">
+      <view class="demo-section__wrapper">
+        <t-result
+          theme="success"
+          title="成功状态"
+          description="描述文字"
+        />
+      </view>
+      <view class="demo-section__wrapper">
+        <t-button
+          theme="primary"
+          block
+          size="large"
+          variant="outline"
+          @click="goBack"
+        >
+          返回
+        </t-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tResult from 'tdesign-uniapp/result/result.vue';
+export default {
+  components: {
+    tButton,
+    tResult,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './result-page.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/result/_example/result.less b/packages/tdesign-uniapp/components/result/_example/result.less
new file mode 100644
index 000000000..7ebba6bf7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/result.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    .demo-section__wrapper {
+        padding: 0 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/result/_example/result.vue b/packages/tdesign-uniapp/components/result/_example/result.vue
new file mode 100644
index 000000000..f4e3844f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/result.vue
@@ -0,0 +1,72 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Result"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Result 结果"
+        desc="用于反馈不同结果的展示。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="组件类型"
+        desc="基础结果"
+      >
+        <theme />
+      </t-demo>
+      <t-demo desc="带描述的结果">
+        <description />
+      </t-demo>
+      <t-demo desc="自定义结果">
+        <custom />
+      </t-demo>
+      <t-demo desc="页面示例">
+        <view class="demo-section__wrapper">
+          <t-button
+            theme="primary"
+            block
+            size="large"
+            variant="outline"
+            @click="goResultPage"
+          >
+            页面示例
+          </t-button>
+        </view>
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import theme from './theme/index.vue';
+import description from './description/index.vue';
+import custom from './custom/index.vue';
+export default {
+  components: {
+    tButton,
+    theme,
+    description,
+    custom,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goResultPage() {
+      uni.navigateTo({
+        url: './result-page',
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './result.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/result/_example/skyline/result.less b/packages/tdesign-uniapp/components/result/_example/skyline/result.less
new file mode 100644
index 000000000..7ebba6bf7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/skyline/result.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+
+    .demo-section__wrapper {
+        padding: 0 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/result/_example/skyline/result.vue b/packages/tdesign-uniapp/components/result/_example/skyline/result.vue
new file mode 100644
index 000000000..b102e6958
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/skyline/result.vue
@@ -0,0 +1,81 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Result"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Result 结果
+        </view>
+        <view class="demo-desc">
+          用于反馈不同结果的展示。
+        </view>
+        <t-demo
+          title="组件类型"
+          desc="基础结果"
+        >
+          <theme />
+        </t-demo>
+        <t-demo desc="带描述的结果">
+          <description />
+        </t-demo>
+        <t-demo desc="自定义结果">
+          <custom />
+        </t-demo>
+        <t-demo desc="页面示例">
+          <view class="demo-section__wrapper">
+            <t-button
+              theme="primary"
+              block
+              size="large"
+              variant="outline"
+              @click="goResultPage"
+            >
+              页面示例
+            </t-button>
+          </view>
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import theme from '../theme/index.vue';
+import description from '../description/index.vue';
+import custom from '../custom/index.vue';
+export default {
+  components: {
+    tNavbar,
+    tButton,
+    theme,
+    description,
+    custom,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    goResultPage() {
+      uni.navigateTo({
+        url: '../result-page',
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './result.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/result/_example/theme/index.vue b/packages/tdesign-uniapp/components/result/_example/theme/index.vue
new file mode 100644
index 000000000..c001df1fb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/_example/theme/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <view
+      v-for="(item, index) in resultList"
+      :key="index"
+    >
+      <view class="demo-section__content">
+        <t-result
+          :theme="item.theme"
+          :title="item.title"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tResult from 'tdesign-uniapp/result/result.vue';
+export default {
+  components: {
+    tResult,
+  },
+  data() {
+    return {
+      resultList: [
+        {
+          title: '成功状态',
+          theme: 'success',
+        },
+        {
+          title: '失败状态',
+          theme: 'error',
+        },
+        {
+          title: '警示状态',
+          theme: 'warning',
+        },
+        {
+          title: '默认状态',
+          theme: 'default',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-section__content {
+    margin-bottom: 96rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/result/props.ts b/packages/tdesign-uniapp/components/result/props.ts
new file mode 100644
index 000000000..cad78627b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/props.ts
@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdResultProps } from './type';
+export default {
+  /** 描述文字 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdResultProps['icon'],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+  },
+  /** 内置主题 */
+  theme: {
+    type: String,
+    default: 'default' as TdResultProps['theme'],
+    validator(val: TdResultProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '' as TdResultProps['title'],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/result/result.less b/packages/tdesign-uniapp/components/result/result.less
new file mode 100644
index 000000000..219f651ca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/result.less
@@ -0,0 +1,70 @@
+@import '../common/style/base.less';
+
+@result-icon-font-size: 160rpx;
+
+@result-title-font-size: var(--td-result-title-font-size, @font-size-xl);
+@result-title-line-height: var(--td-result-title-line-height, 56rpx);
+@result-title-color: var(--td-result-title-color, @text-color-primary);
+
+@result-description-font-size: var(--td-result-description-font-size, @font-size-base);
+@result-description-line-height: var(--td-result-description-line-height, 44rpx);
+@result-description-color: var(--td-result-description-color, @text-color-secondary);
+
+@result-icon-default-color: var(--td-result-icon-default-color, @brand-color);
+@result-icon-success-color: var(--td-result-icon-success-color, @success-color);
+@result-icon-warning-color: var(--td-result-icon-warning-color, @warning-color);
+@result-icon-error-color: var(--td-result-icon-error-color, @error-color);
+
+@result-title-margin-top: var(--td-result-title-margin-top, @spacer-1);
+@result-description-margin-top: var(--td-result-description-margin-top, @spacer);
+
+.@{prefix}-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :deep(&__icon) {
+    font-size: @result-icon-font-size;
+  }
+
+  &__title {
+    line-height: @result-title-line-height; // 标题行高
+    font-size: @result-title-font-size; // 标题文字大小
+    font-weight: 700;
+    color: @result-title-color; // 标题颜色
+  }
+
+  &__thumb:not(:empty) + &__title:not(:empty) {
+    margin-top: @result-title-margin-top; // 标题内容上边距
+  }
+
+  &__description {
+    text-align: center;
+    color: @result-description-color; // 描述颜色
+    font-size: @result-description-font-size; // 描述文字大小
+    line-height: @result-description-line-height; // 描述行高
+  }
+
+  &__title + &__description:not(:empty) {
+    margin-top: @result-description-margin-top; // 描述内容上边距
+  }
+
+  // theme
+  &--theme {
+    &-default {
+      color: @result-icon-default-color; // 默认状态图标颜色
+    }
+
+    &-success {
+      color: @result-icon-success-color; // 成功状态图标颜色
+    }
+
+    &-warning {
+      color: @result-icon-warning-color; // 警示状态图标颜色
+    }
+
+    &-error {
+      color: @result-icon-error-color; // 失败状态图标颜色
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/result/result.vue b/packages/tdesign-uniapp/components/result/result.vue
new file mode 100644
index 000000000..148bd113e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/result.vue
@@ -0,0 +1,128 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="[
+      classPrefix + ' ' + classPrefix + '--theme-' + theme,
+      tClass
+    ]"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__thumb'"
+    >
+      <t-image
+        v-if="image"
+        :t-class="tClassImage"
+        :src="image"
+        mode="aspectFit"
+      />
+      <block
+        v-else-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ')"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+        />
+      </block>
+      <slot name="image" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__title ',
+        tClassTitle
+      ]"
+    >
+      <block v-if="title">
+        {{ title }}
+      </block>
+      <slot name="title" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__description ',
+        tClassDescription
+      ]"
+    >
+      <block v-if="description">
+        {{ description }}
+      </block>
+      <slot name="description" />
+    </view>
+  </view>
+</template>
+
+<script>
+import tIcon from '../icon/icon';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-result`;
+const THEME_ICON = {
+  default: 'error-circle',
+  success: 'check-circle',
+  warning: 'error-circle',
+  error: 'close-circle',
+};
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-image`,
+    `${prefix}-class-title`,
+    `${prefix}-class-description`,
+  ],
+  components: {
+    tIcon,
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+
+      _icon: null,
+    };
+  },
+  watch: {
+    icon: 'initIcon',
+    theme: 'initIcon',
+  },
+  mounted() {
+    this.initIcon();
+  },
+  methods: {
+    initIcon() {
+      const {
+        icon,
+        theme,
+      } = this;
+      this._icon = calcIcon(icon, THEME_ICON[theme]);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './result.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/result/type.ts b/packages/tdesign-uniapp/components/result/type.ts
new file mode 100644
index 000000000..f8833f24a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/result/type.ts
@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdResultProps {
+  /**
+   * 描述文字
+   */
+  description?: string;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 图片地址
+   */
+  image?: string;
+  /**
+   * 内置主题
+   * @default default
+   */
+  theme?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+}
diff --git a/packages/tdesign-uniapp/components/row/computed.js b/packages/tdesign-uniapp/components/row/computed.js
new file mode 100644
index 000000000..b6dc4b698
--- /dev/null
+++ b/packages/tdesign-uniapp/components/row/computed.js
@@ -0,0 +1,13 @@
+import utils from '../common/utils.wxs';
+
+export function getRowStyles(gutter, customStyle) {
+  let _style = '';
+  if (gutter) {
+    _style = utils._style({
+      'margin-right': utils.addUnit(-gutter / 2),
+      'margin-left': utils.addUnit(-gutter / 2),
+    });
+  }
+
+  return utils._style([customStyle]) + _style;
+}
diff --git a/packages/tdesign-uniapp/components/row/props.ts b/packages/tdesign-uniapp/components/row/props.ts
new file mode 100644
index 000000000..6d766c87c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/row/props.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 列之间的间距（默认单位px） */
+  gutter: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/row/row.less b/packages/tdesign-uniapp/components/row/row.less
new file mode 100644
index 000000000..b6ecdbeca
--- /dev/null
+++ b/packages/tdesign-uniapp/components/row/row.less
@@ -0,0 +1,8 @@
+.t-row {
+  // 适配 qq 小程序等
+  // display: flex;
+  // flex-direction: row;
+  // flex-wrap: wrap;
+
+  box-sizing: border-box;
+}
diff --git a/packages/tdesign-uniapp/components/row/row.vue b/packages/tdesign-uniapp/components/row/row.vue
new file mode 100644
index 000000000..84f54832d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/row/row.vue
@@ -0,0 +1,63 @@
+<template>
+  <view
+    :class="prefix + '-row'"
+    :style="getRowStyles(gutter, customStyle)"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { getRowStyles } from './computed.js';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-row`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [ParentMixin(RELATION_MAP.Col)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      _,
+    };
+  },
+  watch: {
+    gutter: {
+      handler() {
+        this.setGutter();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getRowStyles,
+    innerAfterLinked() {
+      this.setGutter();
+    },
+    setGutter() {
+      const {
+        gutter,
+      } = this;
+
+      this.children?.forEach((o) => {
+        o.gutter = gutter;
+      });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './row.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/row/type.ts b/packages/tdesign-uniapp/components/row/type.ts
new file mode 100644
index 000000000..8d43195c5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/row/type.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRowProps {
+  /**
+   * 列之间的间距（默认单位px）
+   */
+  gutter?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/script/postinstall.js b/packages/tdesign-uniapp/components/script/postinstall.js
new file mode 100644
index 000000000..49615aabb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/script/postinstall.js
@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+
+function switchVersion(version) {
+  const pkg = require('../package.json');
+  if (version != 2) {
+    return;
+  }
+
+  delete pkg.exports;
+
+  const pkgStr = JSON.stringify(pkg, null, 2);
+
+  fs.writeFileSync(path.resolve(__dirname, '../package.json'), pkgStr, 'utf-8');
+}
+
+
+function loadModule(name) {
+  try {
+    return require(name);
+  } catch (e) {
+    return undefined;
+  }
+}
+
+const Vue  = loadModule('vue');
+
+function main() {
+  const version =  process.env.npm_config_vueVersion || (Vue ? Vue.version : '2.7.');
+  if (!Vue || typeof version !== 'string') {
+    console.warn('Vue is not found. Please run "npm install vue" to install.');
+    return;
+  }
+
+  if (version.startsWith('2.')) {
+    switchVersion(2);
+  } else if (version.startsWith('3.')) {
+    switchVersion(3);
+  } else {
+    console.warn(`Vue version v${version} is not supported.`);
+  }
+}
+
+main();
+
diff --git a/packages/tdesign-uniapp/components/scroll-view/scroll-view.vue b/packages/tdesign-uniapp/components/scroll-view/scroll-view.vue
new file mode 100644
index 000000000..4e5ba088e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/scroll-view/scroll-view.vue
@@ -0,0 +1,52 @@
+<template>
+  <scroll-view
+    :class="tClass"
+    type="list"
+    scroll-y
+    enhanced
+    :show-scrollbar="false"
+    :scroll-into-view="scrollIntoView"
+  >
+    <slot />
+  </scroll-view>
+</template>
+
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+// import { canUseProxyScrollView } from '../common/version';
+
+
+const name = `${prefix}-scroll-view`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    scrollIntoView: {
+      type: [String, Number, null],
+      default: null,
+    },
+  },
+  data() {
+    return {
+
+    };
+  },
+  watch: {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+</style>
diff --git a/packages/tdesign-uniapp/components/search/README.en-US.md b/packages/tdesign-uniapp/components/search/README.en-US.md
new file mode 100644
index 000000000..9ab31a17a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/README.en-US.md
@@ -0,0 +1,87 @@
+
+## API
+
+### Search Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+action | String | '' | \- | N
+adjust-position | Boolean | true | \- | N
+always-embed | Boolean | false | \- | N
+center | Boolean | false | \- | N
+clear-trigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
+clearable | Boolean | true | \- | N
+confirm-hold | Boolean | false | \- | N
+confirm-type | String | search | options: send/search/next/go/done | N
+cursor | Number | -1 | \- | N
+cursor-spacing | Number | 0 | \- | N
+disabled | Boolean | false | \- | N
+focus | Boolean | false | \- | N
+hold-keyboard | Boolean | false | \- | N
+label | String | '' | `deprecated` | N
+left-icon | String | 'search' | \- | N
+maxcharacter | Number | - | The maximum number of characters that the user can enter. One Chinese character represents two characters in length. Use either `maxcharacter` or `maxlength` | N
+maxlength | Number | -1 | \- | N
+placeholder | String | '' | \- | N
+placeholder-class | String | input-placeholder | \- | N
+placeholder-style | String | - | \- | N
+readonly | Boolean | undefined | \- | N
+result-list | Array | [] | Typescript：`Array<string>` | N
+right-icon | String | 'close-circle-filled' | `deprecated` | N
+selection-end | Number | -1 | \- | N
+selection-start | Number | -1 | \- | N
+shape | String | 'square' | options: square/round | N
+type | String | 'text' | options: text/number/idcard/digit/nickname | N
+value | String | '' | \- | N
+
+### Search Events
+
+name | params | description
+-- | -- | --
+action-click | \- | \-
+blur | `(context: { value: string })` | \-
+change | `(context: { value: string })` | \-
+clear | `(context: { value: string })` | \-
+focus | `(context: { value: string })` | \-
+submit | `(context: { value: string })` | \-
+
+### Search Slots
+
+name | Description
+-- | --
+action | \-
+left-icon | \-
+right-icon | `deprecated`
+
+### Search External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-action | \-
+t-class-clear | \-
+t-class-input | \-
+t-class-input-container | \-
+t-class-left | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @text-color-placeholder | - 
+--td-search-clear-icon-font-size | 48rpx | - 
+--td-search-disabled-text-color | @text-color-disabled | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 80rpx | - 
+--td-search-icon-color | @text-color-placeholder | - 
+--td-search-icon-font-size | 48rpx | - 
+--td-search-label-color | @text-color-primary | - 
+--td-search-padding | 16rpx 24rpx | - 
+--td-search-placeholder-color | @text-color-placeholder | - 
+--td-search-result-high-light-color | @brand-color | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @text-color-primary | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/search/README.md b/packages/tdesign-uniapp/components/search/README.md
new file mode 100644
index 000000000..7a9bad219
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/README.md
@@ -0,0 +1,125 @@
+---
+title: Search 搜索框
+description: 用于用户输入搜索信息，并进行页面内容搜索。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSearch from 'tdesign-uniapp/search/search.vue';
+```
+
+### 01 组件类型
+
+基础搜索框
+
+{{ base }}
+
+获取焦点后显示取消按钮
+
+{{ action }}
+
+### 02 组件样式
+
+搜索框形状
+
+{{ shape }}
+
+### 03 组件状态
+
+默认状态其他对齐方式
+
+{{ other }}
+
+## API
+
+### Search Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+action | String | '' | 自定义右侧操作按钮文字 | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
+center | Boolean | false | 是否居中 | N
+clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
+clearable | Boolean | true | 是否启用清除控件 | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
+confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
+cursor | Number | -1 | 指定 focus 时的光标位置 | N
+cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
+disabled | Boolean | false | 是否禁用 | N
+focus | Boolean | false | 是否聚焦 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+label | String | '' | 已废弃。左侧文本 | N
+left-icon | String | 'search' | 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+placeholder | String | '' | 占位符 | N
+placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
+placeholder-style | String | - | 指定 placeholder 的样式 | N
+readonly | Boolean | undefined | 只读状态 | N
+result-list | Array | [] | 预览结果列表。TS 类型：`Array<string>` | N
+right-icon | String | 'close-circle-filled' | 已废弃。右侧图标 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+shape | String | 'square' | 搜索框形状。可选项：square/round | N
+type | String | 'text' | 拉起键盘的类型。可选项：text/number/idcard/digit/nickname | N
+value | String | '' | 值 | N
+
+### Search Events
+
+名称 | 参数 | 描述
+-- | -- | --
+action-click | \- | 点击右侧操作按钮文字时触发
+blur | `(context: { value: string })` | 失去焦点时触发
+change | `(context: { value: string })` | 值发生变化时触发
+clear | `(context: { value: string })` | 点击清除时触发
+focus | `(context: { value: string })` | 聚焦时触发
+submit | `(context: { value: string })` | 提交时触发
+
+### Search Slots
+
+名称 | 描述
+-- | --
+action | 自定义 `action` 显示内容
+left-icon | 左侧图标
+right-icon | 已废弃。自定义 `right-icon` 显示内容
+
+### Search External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-action | 操作按钮样式类
+t-class-clear | 右侧图标样式类
+t-class-input | 输入框样式类
+t-class-input-container | 输入框容器样式类
+t-class-left | 左侧图标样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-search-action-color | @brand-color | - |
+| --td-search-bg-color | @bg-color-secondarycontainer | - |
+| --td-search-clear-icon-color | @text-color-placeholder | - |
+| --td-search-clear-icon-font-size | 48rpx | - |
+| --td-search-disabled-text-color | @text-color-disabled | - |
+| --td-search-font-size | @font-size-m | - |
+| --td-search-height | 80rpx | - |
+| --td-search-icon-color | @text-color-placeholder | - |
+| --td-search-icon-font-size | 48rpx | - |
+| --td-search-label-color | @text-color-primary | - |
+| --td-search-padding | 16rpx 24rpx | - |
+| --td-search-placeholder-color | @text-color-placeholder | - |
+| --td-search-result-high-light-color | @brand-color | - |
+| --td-search-square-radius | @radius-default | - |
+| --td-search-text-color | @text-color-primary | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/search/_example/action/index.vue b/packages/tdesign-uniapp/components/search/_example/action/index.vue
new file mode 100644
index 000000000..625e4db64
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/action/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <view class="example-search">
+    <t-search
+      :value="value"
+      center
+      placeholder="搜索预设文案"
+      :action="actionText"
+      @blur="blurHandle"
+      @focus="focusHandle"
+      @action-click="actionHandle"
+      @change="changeHandle"
+    />
+  </view>
+</template>
+
+<script>
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tSearch,
+  },
+  data() {
+    return {
+      value: '',
+      actionText: '',
+    };
+  },
+  created() {},
+  methods: {
+    changeHandle(e) {
+      const { value } = e;
+      this.value = value;
+    },
+    focusHandle() {
+      this.actionText = '取消';
+    },
+    blurHandle() {
+      this.actionText = '';
+    },
+    actionHandle() {
+      this.actionText = '';
+      this.value = '';
+    },
+  },
+};
+</script>
+<style>
+.example-search {
+    background-color: var(--bg-color-demo);
+    padding: 16rpx 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/base/index.vue b/packages/tdesign-uniapp/components/search/_example/base/index.vue
new file mode 100644
index 000000000..f8fdb3cba
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/base/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <view class="example-search">
+      <t-search placeholder="搜索预设文案" />
+    </view>
+
+    <view class="example-search">
+      <t-search
+        placeholder="输入tdesign，有预览结果"
+        :result-list="resultList"
+        @change="onChangeValue"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tSearch,
+  },
+  data() {
+    return {
+      value: '',
+      resultList: [],
+    };
+  },
+  created() {},
+  methods: {
+    onChangeValue(e) {
+      const { value } = e;
+      const list = ['tdesign-vue', 'tdesign-react', 'tdesign-miniprogram', 'tdesign-angular', 'tdesign-mobile-vue', 'tdesign-mobile-react'];
+      this.resultList = value ? list.filter(v => v.includes(value)) : [];
+    },
+  },
+};
+</script>
+<style>
+.example-search {
+    background-color: var(--bg-color-demo);
+    padding: 16rpx 32rpx;
+}
+
+.example-search:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/maxlength/index.vue b/packages/tdesign-uniapp/components/search/_example/maxlength/index.vue
new file mode 100644
index 000000000..60264c6a0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/maxlength/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view>
+    <view class="example-search">
+      <t-search
+        placeholder="最大输入10个字符"
+        :maxlength="10"
+      />
+    </view>
+    <view class="example-search">
+      <t-search
+        placeholder="最大输入10个字符，汉字算两个"
+        :maxcharacter="10"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tSearch,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.example-search {
+    background-color: var(--bg-color-demo);
+    padding: 16rpx 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/other/index.vue b/packages/tdesign-uniapp/components/search/_example/other/index.vue
new file mode 100644
index 000000000..21433efe7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/other/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view class="example-search">
+    <t-search
+      v-model="value"
+      center
+      placeholder="搜索预设文案"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tSearch,
+  },
+  data() {
+    return {
+      value: '',
+    };
+  },
+  created() {},
+  methods: {
+    onChange(detail) {
+      console.log(`modelValue: ${detail.value}`);
+    },
+  },
+};
+</script>
+<style>
+.example-search {
+    background-color: var(--bg-color-demo);
+    padding: 16rpx 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/search.less b/packages/tdesign-uniapp/components/search/_example/search.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/search/_example/search.vue b/packages/tdesign-uniapp/components/search/_example/search.vue
new file mode 100644
index 000000000..53617cd71
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/search.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Search"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Search 搜索框"
+        desc="用于用户输入搜索信息，并进行页面内容搜索。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础搜索框"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo desc="字数限制">
+        <maxlength />
+      </t-demo>
+      <t-demo desc="获取焦点后显示取消按钮">
+        <action />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="搜索框形状"
+      >
+        <shape />
+      </t-demo>
+      <t-demo
+        title="03 组件状态"
+        desc="默认状态其他对齐方式"
+      >
+        <other />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import maxlength from './maxlength/index.vue';
+import action from './action/index.vue';
+import shape from './shape/index.vue';
+import other from './other/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    maxlength,
+    action,
+    shape,
+    other,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './search.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/shape/index.vue b/packages/tdesign-uniapp/components/search/_example/shape/index.vue
new file mode 100644
index 000000000..419d74f9f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/shape/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <view>
+    <view class="example-search">
+      <t-search placeholder="搜索预设文案" />
+    </view>
+
+    <view class="example-search">
+      <t-search
+        placeholder="搜索预设文案"
+        shape="round"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSearch from 'tdesign-uniapp/search/search.vue';
+export default {
+  components: {
+    tSearch,
+  },
+  data() {
+    return {
+      value: '',
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log(e.value);
+    },
+  },
+};
+</script>
+<style>
+.example-search {
+    background-color: var(--bg-color-demo);
+    padding: 16rpx 32rpx;
+}
+
+.example-search:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/search/_example/skyline/search.less b/packages/tdesign-uniapp/components/search/_example/skyline/search.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/search/_example/skyline/search.vue b/packages/tdesign-uniapp/components/search/_example/skyline/search.vue
new file mode 100644
index 000000000..2e3a4c3fc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/_example/skyline/search.vue
@@ -0,0 +1,71 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Search"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        Search 搜索框
+      </view>
+      <view class="demo-desc">
+        用于用户输入搜索信息，并进行页面内容搜索。
+      </view>
+      <t-demo
+        title="01 组件类型"
+        desc="基础搜索框"
+      >
+        <baseDemo />
+      </t-demo>
+      <t-demo desc="字数限制">
+        <maxlength />
+      </t-demo>
+      <t-demo desc="获取焦点后显示取消按钮">
+        <action />
+      </t-demo>
+      <t-demo
+        title="02 组件样式"
+        desc="搜索框形状"
+      >
+        <shape />
+      </t-demo>
+      <t-demo
+        title="03 组件状态"
+        desc="默认状态其他对齐方式"
+      >
+        <other />
+      </t-demo>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import baseDemo from '../base/index.vue';
+import maxlength from '../maxlength/index.vue';
+import action from '../action/index.vue';
+import shape from '../shape/index.vue';
+import other from '../other/index.vue';
+export default {
+  components: {
+    baseDemo,
+    maxlength,
+    action,
+    shape,
+    other,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './search.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/search/computed.js b/packages/tdesign-uniapp/components/search/computed.js
new file mode 100644
index 000000000..848026ec7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/computed.js
@@ -0,0 +1,3 @@
+export const highLight = function (label, keyword) {
+  return label.replace(keyword, `<span class="t-search__result-item--highLight">${keyword}</span>`);
+};
diff --git a/packages/tdesign-uniapp/components/search/props.ts b/packages/tdesign-uniapp/components/search/props.ts
new file mode 100644
index 000000000..9195c4e93
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/props.ts
@@ -0,0 +1,166 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSearchProps } from './type';
+export default {
+  /** 自定义右侧操作按钮文字 */
+  action: {
+    type: String,
+    default: '' as TdSearchProps['action'],
+  },
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
+  alwaysEmbed: Boolean,
+  /** 是否居中 */
+  center: Boolean,
+  /** 清空图标触发方式，仅在输入框有值时有效 */
+  clearTrigger: {
+    type: String,
+    default: 'always' as TdSearchProps['clearTrigger'],
+    validator(val: TdSearchProps['clearTrigger']): boolean {
+      if (!val) return true;
+      return ['always', 'focus'].includes(val);
+    },
+  },
+  /** 是否启用清除控件 */
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 点击键盘右下角按钮时是否保持键盘不收起 */
+  confirmHold: Boolean,
+  /** 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */
+  confirmType: {
+    type: String,
+    default: 'search' as TdSearchProps['confirmType'],
+    validator(val: TdSearchProps['confirmType']): boolean {
+      if (!val) return true;
+      return ['send', 'search', 'next', 'go', 'done'].includes(val);
+    },
+  },
+  /** 指定 focus 时的光标位置 */
+  cursor: {
+    type: Number,
+    default: -1,
+  },
+  /** 搜索框聚焦时底部与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 是否聚焦 */
+  focus: Boolean,
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: Boolean,
+  /** 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值 */
+  leftIcon: {
+    type: String,
+    default: 'search' as TdSearchProps['leftIcon'],
+  },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxlength: {
+    type: Number,
+    default: -1,
+  },
+  /** 占位符 */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  /** 指定 placeholder 的样式类 */
+  placeholderClass: {
+    type: String,
+    default: 'input-placeholder',
+  },
+  /** 指定 placeholder 的样式 */
+  placeholderStyle: {
+    type: String,
+    default: '',
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 预览结果列表 */
+  resultList: {
+    type: Array,
+    default: (): TdSearchProps['resultList'] => [],
+  },
+  /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
+  selectionEnd: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */
+  selectionStart: {
+    type: Number,
+    default: -1,
+  },
+  /** 搜索框形状 */
+  shape: {
+    type: String,
+    default: 'square' as TdSearchProps['shape'],
+    validator(val: TdSearchProps['shape']): boolean {
+      if (!val) return true;
+      return ['square', 'round'].includes(val);
+    },
+  },
+  /** 拉起键盘的类型 */
+  type: {
+    type: String,
+    default: 'text' as TdSearchProps['type'],
+    validator(val: TdSearchProps['type']): boolean {
+      if (!val) return true;
+      return ['text', 'number', 'idcard', 'digit', 'nickname'].includes(val);
+    },
+  },
+  /** 值 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击右侧操作按钮文字时触发 */
+  onActionClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 失去焦点时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击清除时触发 */
+  onClear: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 聚焦时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 提交时触发 */
+  onSubmit: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/search/search.less b/packages/tdesign-uniapp/components/search/search.less
new file mode 100644
index 000000000..2f6791897
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/search.less
@@ -0,0 +1,114 @@
+@import '../common/style/base.less';
+
+@search-bg-color: var(--td-search-bg-color, @bg-color-secondarycontainer);
+@search-text-color: var(--td-search-text-color, @text-color-primary);
+@search-label-color: var(--td-search-label-color, @text-color-primary);
+@search-font-size: var(--td-search-font-size, @font-size-m);
+@search-height: var(--td-search-height, 80rpx);
+@search-padding: var(--td-search-padding, 16rpx 24rpx);
+@search-placeholder-color: var(--td-search-placeholder-color, @text-color-placeholder);
+@search-icon-color: var(--td-search-icon-color, @text-color-placeholder);
+@search-disabled-text-color: var(--td-search-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色
+@search-icon-font-size: var(--td-search-icon-font-size, 48rpx);
+@search-square-radius: var(--td-search-square-radius, @radius-default);
+@search-round-radius: calc(@search-height / 2);
+@search-action-color: var(--td-search-action-color, @brand-color);
+@search-clear-icon-color: var(--td-search-clear-icon-color, @text-color-placeholder);
+@search-clear-icon-font-size: var(--td-search-clear-icon-font-size, 48rpx);
+@search-result-high-light-color: var(--td-search-result-high-light-color, @brand-color);
+
+.@{prefix}-search {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__label {
+    padding: 8rpx;
+    color: @search-label-color;
+  }
+
+  &__input-box {
+    flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    height: @search-height;
+    align-items: center;
+    border: 2rpx solid @search-bg-color;
+    background: @search-bg-color;
+    padding: @search-padding;
+
+    &.@{prefix}-is-focused {
+      border-color: @search-bg-color;
+    }
+
+    &--round {
+      border-radius: @search-round-radius;
+    }
+
+    &--square {
+      border-radius: @search-square-radius;
+    }
+
+    &--center {
+      text-align: center;
+    }
+
+    .@{prefix}-input__keyword {
+      display: inline-block;
+      flex: 1;
+      color: @search-text-color;
+      font-size: @search-font-size;
+      padding-left: 10rpx;
+      min-height: 48rpx;
+      line-height: 48rpx;
+
+      background: inherit;
+    }
+
+    .@{prefix}-input--disabled {
+      color: @search-disabled-text-color;
+      cursor: not-allowed;
+      opacity: 1;
+      -webkit-text-fill-color: currentColor; // fix disabled color in iOS
+    }
+
+    .@{prefix}-icon {
+      color: @search-icon-color;
+      font-size: @search-icon-font-size;
+    }
+  }
+
+  &__clear {
+    position: relative;
+    margin-left: 10px;
+    font-size: @search-clear-icon-font-size;
+    color: @search-clear-icon-color;
+  }
+
+  &__search-action {
+    margin-left: 30rpx;
+    font-size: @search-font-size;
+    color: @search-action-color;
+  }
+
+  &__placeholder {
+    color: @search-placeholder-color;
+
+    &--center {
+      text-align: center;
+    }
+  }
+  &__result-item {
+    :deep(&--highLight) {
+      color: @search-result-high-light-color;
+    }
+  }
+
+  &__result-list :deep(&__result-item) {
+    padding-left: 0;
+
+    &::after {
+      left: 0;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/search/search.vue b/packages/tdesign-uniapp/components/search/search.vue
new file mode 100644
index 000000000..ebe63d652
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/search.vue
@@ -0,0 +1,284 @@
+<template>
+  <view>
+    <view
+      :style="_._style([customStyle])"
+      :class="classPrefix + ' ' + tClass"
+    >
+      <view
+        :class="
+          classPrefix +'__input-box ' +
+            prefix + '-' +(focus ? 'is-focused' : 'not-focused') +
+            ' ' + classPrefix + '__input-box--' + (center ? 'center' : '') +
+            ' ' + classPrefix + '__input-box--' + shape +
+            ' ' + tClassInputContainer
+        "
+      >
+        <t-icon
+          v-if="leftIcon"
+          :name="leftIcon"
+          :t-class="prefix + '-icon ' + tClassLeft"
+          :aria-hidden="true"
+        />
+        <slot
+          v-else
+          name="left-icon"
+        />
+        <input
+          :type="type"
+          name="input"
+          :maxlength="maxlength"
+          :disabled="disabled || readonly"
+          :class="prefix + '-input__keyword ' + tClassInput + ' ' + (disabled ? prefix + '-input--disabled' : '')"
+          :focus="focus"
+          :value="dataValue"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :adjust-position="adjustPosition"
+          :always-embed="alwaysEmbed"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :hold-keyboard="holdKeyboard"
+          :cursor-spacing="cursorSpacing"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          :placeholder-class="placeholderClass + ' ' + classPrefix + '__placeholder ' + classPrefix + '__placeholder--' + (center ? 'center' : 'normal')"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+        >
+        <view
+          v-if="dataValue !== '' && clearable && showClearIcon"
+          :class="classPrefix + '__clear hotspot-expanded ' + tClassClear"
+          aria-role="button"
+          aria-label="清除"
+          @click.stop.prevent="handleClear"
+        >
+          <t-icon
+            name="close-circle-filled"
+            size="inherit"
+            color="inherit"
+          />
+        </view>
+      </view>
+      <view
+        v-if="action"
+        :class="classPrefix + '__search-action ' + tClassAction"
+        aria-role="button"
+        @click.stop.prevent="onActionClick"
+      >
+        {{ action }}
+      </view>
+      <slot
+        v-else
+        name="action"
+      />
+    </view>
+    <view
+      v-if="isShowResultList && !isSelected"
+      :class="classPrefix + '__result-list'"
+      aria-role="listbox"
+    >
+      <t-cell
+        v-for="(item, index) in resultList"
+        :key="index"
+        :data-index="index"
+        :t-class="classPrefix + '__result-item'"
+        hover
+        aria-role="option"
+        @click="onSelectResultItem($event, { index })"
+      >
+        <template
+          #title
+        >
+          <rich-text
+            :nodes="highLight(item, dataValue)"
+          />
+        </template>
+      </t-cell>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tCell from '../cell/cell';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, nextTick } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { highLight } from './computed.js';
+// import { getInnerMaxLen } from '../input/utils';
+
+const name = `${prefix}-search`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-input-container`,
+    `${prefix}-class-input`,
+    `${prefix}-class-action`,
+    `${prefix}-class-left`,
+    `${prefix}-class-clear`,
+  ],
+  components: {
+    tIcon,
+    tCell,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'selectresult',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      isShowResultList: false,
+      isSelected: false,
+      showClearIcon: false,
+      _,
+
+      dataValue: this.value,
+      // innerMaxLen: -1,
+      // rawValue: '',
+    };
+  },
+  watch: {
+    resultList: {
+      handler(val) {
+        const { isSelected } = this;
+        if (val.length) {
+          if (isSelected) {
+          // 已选择
+            this.isShowResultList = false;
+            this.isSelected = false;
+          } else {
+            this.isShowResultList = true;
+          }
+        } else {
+          this.isShowResultList = false;
+        }
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler() {
+        // this.updateInnerMaxLen();
+        this.updateClearIconVisible();
+      },
+    },
+    clearTrigger: 'updateClearIconVisible',
+    clearable: 'updateClearIconVisible',
+    disabled: 'updateClearIconVisible',
+    readonly: 'updateClearIconVisible',
+
+    // maxcharacter: 'updateInnerMaxLen',
+    // maxlength: 'updateInnerMaxLen',
+  },
+  mounted() {
+    this.updateClearIconVisible();
+  },
+  methods: {
+    updateClearIconVisible(value = false) {
+      const { clearTrigger, disabled, readonly, dataValue } = this;
+      if (disabled || readonly || !dataValue) {
+        this.showClearIcon = false;
+        return;
+      }
+
+      this.showClearIcon = value || String(clearTrigger) === 'always';
+    },
+
+    onInput(e) {
+      let { value } = e.detail;
+      // this.rawValue = value;
+      this.dataValue = value;
+
+      const { maxcharacter } = this;
+      if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
+        const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+
+        value = characters;
+      }
+
+
+      nextTick().then(() => {
+        this.dataValue = value;
+        this.$emit('change', { value });
+      });
+      // this.updateInnerMaxLen();
+    },
+
+    onFocus(e) {
+      const { value } = e.detail;
+      this.updateClearIconVisible(true);
+      this.$emit('focus', { value });
+    },
+
+    onBlur(e) {
+      const { value } = e.detail;
+      this.updateClearIconVisible();
+      this.$emit('blur', { value });
+    },
+
+    handleClear() {
+      this.dataValue = '';
+      this.$emit('clear', { value: '' });
+      this.$emit('change', { value: '' });
+    },
+
+    onConfirm(e) {
+      const { value } = e.detail;
+      this.$emit('submit', { value });
+    },
+
+    onActionClick() {
+      this.$emit('action-click');
+    },
+
+    onSelectResultItem(_, { index }) {
+      const item = this.resultList[index];
+      this.dataValue = item;
+      this.isSelected = true;
+
+      this.$emit('change', { value: item });
+      this.$emit('selectresult', { index, item });
+    },
+    highLight,
+    // updateInnerMaxLen() {
+    //   // this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax: false,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+  },
+});
+
+
+</script>
+<style scoped>
+@import './search.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/search/type.ts b/packages/tdesign-uniapp/components/search/type.ts
new file mode 100644
index 000000000..5f39c6c19
--- /dev/null
+++ b/packages/tdesign-uniapp/components/search/type.ts
@@ -0,0 +1,160 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSearchProps {
+  /**
+   * 自定义右侧操作按钮文字
+   * @default ''
+   */
+  action?: string;
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: boolean;
+  /**
+   * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   * @default false
+   */
+  alwaysEmbed?: boolean;
+  /**
+   * 是否居中
+   * @default false
+   */
+  center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
+  /**
+   * 是否启用清除控件
+   * @default true
+   */
+  clearable?: boolean;
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   * @default false
+   */
+  confirmHold?: boolean;
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+   * @default search
+   */
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
+  /**
+   * 指定 focus 时的光标位置
+   * @default -1
+   */
+  cursor?: number;
+  /**
+   * 搜索框聚焦时底部与键盘的距离
+   * @default 0
+   */
+  cursorSpacing?: number;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否聚焦
+   * @default false
+   */
+  focus?: boolean;
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: boolean;
+  /**
+   * 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值
+   * @default 'search'
+   */
+  leftIcon?: string;
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: number;
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   * @default -1
+   */
+  maxlength?: number;
+  /**
+   * 占位符
+   * @default ''
+   */
+  placeholder?: string;
+  /**
+   * 指定 placeholder 的样式类
+   * @default input-placeholder
+   */
+  placeholderClass?: string;
+  /**
+   * 指定 placeholder 的样式
+   * @default ''
+   */
+  placeholderStyle?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 预览结果列表
+   * @default []
+   */
+  resultList?: Array<string>;
+  /**
+   * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
+   * @default -1
+   */
+  selectionEnd?: number;
+  /**
+   * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
+   * @default -1
+   */
+  selectionStart?: number;
+  /**
+   * 搜索框形状
+   * @default 'square'
+   */
+  shape?: 'square' | 'round';
+  /**
+   * 拉起键盘的类型
+   * @default 'text'
+   */
+  type?: 'text' | 'number' | 'idcard' | 'digit' | 'nickname';
+  /**
+   * 值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 点击右侧操作按钮文字时触发
+   */
+  onActionClick?: () => void;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (context: { value: string }) => void;
+  /**
+   * 值发生变化时触发
+   */
+  onChange?: (context: { value: string }) => void;
+  /**
+   * 点击清除时触发
+   */
+  onClear?: (context: { value: string }) => void;
+  /**
+   * 聚焦时触发
+   */
+  onFocus?: (context: { value: string }) => void;
+  /**
+   * 提交时触发
+   */
+  onSubmit?: (context: { value: string }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/side-bar-item/props.ts b/packages/tdesign-uniapp/components/side-bar-item/props.ts
new file mode 100644
index 000000000..e75554a81
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar-item/props.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 展示的标签 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 当前选项的值 */
+  value: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.less b/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.less
new file mode 100644
index 000000000..bfc2769dc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.less
@@ -0,0 +1,88 @@
+@import '../common/style/base.less';
+
+@side-bar-color: var(--td-side-bar-color, @text-color-primary);
+@side-bar-font-size: var(--td-side-bar-font-size, 32rpx);
+@side-bar-item-height: var(--td-side-bar-item-height, 112rpx);
+@side-bar-item-line-height: var(--td-side-bar-item-line-height, 48rpx);
+@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer);
+@side-bar-disabled-color: var(--td-side-bar-disabled-color, @text-color-disabled);
+@side-bar-active-color: var(--td-side-bar-active-color, @brand-color);
+@side-bar-border-radius: var(--td-side-bar-border-radius, 18rpx);
+@side-bar-icon-size: var(--td-side-bar-icon-size, 40rpx);
+
+.@{prefix}-side-bar-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 32rpx;
+  font-size: @side-bar-font-size;
+  color: @side-bar-color;
+  background: @side-bar-bg-color;
+  min-height: @side-bar-item-height;
+  box-sizing: border-box;
+  white-space: wrap;
+  line-height: @side-bar-item-line-height;
+
+  &--active {
+    font-weight: 600;
+    background: @bg-color-container;
+    color: @side-bar-active-color;
+
+    --td-badge-content-text-color: @side-bar-active-color;
+  }
+
+  // :deep(&__icon) {
+  //   font-size: @side-bar-icon-size;
+  //   margin-right: 4rpx;
+  // }
+
+  &__prefix,
+  &__suffix {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    width: 100%;
+    height: calc(@side-bar-border-radius * 2);
+    background: @bg-color-container;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: @side-bar-bg-color;
+    }
+  }
+
+  &__prefix {
+    top: calc(@side-bar-border-radius * -2);
+
+    &::after {
+      border-bottom-right-radius: @side-bar-border-radius;
+    }
+  }
+
+  &__suffix {
+    bottom: calc(@side-bar-border-radius * -2);
+
+    &::after {
+      border-top-right-radius: @side-bar-border-radius;
+    }
+  }
+
+  &--disabled {
+    color: @side-bar-disabled-color;
+  }
+
+  &__line {
+    width: 6rpx;
+    height: 28rpx;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background: @side-bar-active-color;
+    border-radius: 8rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.vue b/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.vue
new file mode 100644
index 000000000..d6c17da67
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar-item/side-bar-item.vue
@@ -0,0 +1,157 @@
+<template>
+  <view
+    :id="tId"
+    :class="
+      _.cls(classPrefix, [
+        ['active', active],
+        ['disabled', disabled]
+      ]) +
+        ' ' +
+        tClass
+    "
+    :style="_._style([customStyle])"
+    aria-role="button"
+    :aria-label="
+      ariaLabel ||
+        (badgeProps?.dot || badgeProps?.count ? (active ? '已选中，' + label + _.getBadgeAriaLabel({ ...badgeProps }) : label + _.getBadgeAriaLabel({ ...badgeProps })) : '')
+    "
+    :aria-disabled="disabled"
+    @click="handleClick"
+  >
+    <block v-if="active">
+      <view :class="classPrefix + '__line'" />
+      <view :class="classPrefix + '__prefix'" />
+      <view :class="classPrefix + '__suffix'" />
+    </block>
+    <block
+      v-if="_icon"
+      name="icon"
+    >
+      <t-icon
+        :custom-style="iconCustomStyle"
+        :t-class="classPrefix + '__icon'"
+        :prefix="_icon.prefix"
+        :name="_icon.name"
+        :size="_icon.size"
+        :color="_icon.color"
+        :aria-hidden="!!_icon.ariaHidden"
+        :aria-label="_icon.ariaLabel"
+        :aria-role="_icon.ariaRole"
+        @click="_icon.click || ''"
+      />
+    </block>
+    <block v-if="badgeProps">
+      <t-badge
+        :color="badgeProps.color"
+        :content="label"
+        :count="badgeProps.count"
+        :dot="badgeProps.dot"
+        :max-count="badgeProps.maxCount"
+        :offset="badgeProps.offset"
+        :shape="badgeProps.shape"
+        :show-zero="badgeProps.showZero"
+        :size="badgeProps.size"
+        :t-class="badgeProps.tClass"
+        :t-class-content="badgeProps.tClassContent"
+        :t-class-count="badgeProps.tClassCount"
+      />
+    </block>
+    <block v-else>
+      {{ label }}
+    </block>
+  </view>
+</template>
+<script>
+import tBadge from '../badge/badge';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-side-bar-item`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.SideBarItem)],
+  components: {
+    tBadge,
+    tIcon,
+  },
+  props: {
+    ...props,
+    tId: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      active: false,
+      isPre: false,
+      isNext: false,
+      _,
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      return _._style([
+        {
+          fontSize: 'var(--td-side-bar-icon-size, 20px)',
+          marginRight: '2px',
+        },
+        this._icon.style || '',
+      ]);
+    },
+  },
+  watch: {
+    icon: {
+      handler(v) {
+        this._icon = typeof v === 'string' ? { name: v } : v;
+      },
+      immediate: true,
+    },
+    disabled: {
+      handler() {
+        this.updateActive(this.value);
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      const parent = this[RELATION_MAP.SideBarItem];
+      this.updateActive(parent.dataValue);
+    },
+    updateActive(value) {
+      const active = value === this.value && !this.disabled;
+      this.active = active;
+    },
+    handleClick() {
+      if (this.disabled) return;
+      const { value, label } = this;
+
+      this[RELATION_MAP.SideBarItem]?.doChange({ value, label });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './side-bar-item.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar-item/type.ts b/packages/tdesign-uniapp/components/side-bar-item/type.ts
new file mode 100644
index 000000000..05f9a4a0a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar-item/type.ts
@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+
+export interface TdSideBarItemProps {
+  /**
+   * 透传至 Badge 组件
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 图标，传对象则透传至 Icon
+   */
+  icon?: string | object;
+  /**
+   * 展示的标签
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 当前选项的值
+   */
+  value?: string | number;
+}
diff --git a/packages/tdesign-uniapp/components/side-bar/README.en-US.md b/packages/tdesign-uniapp/components/side-bar/README.en-US.md
new file mode 100644
index 000000000..d06d91c7f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/README.en-US.md
@@ -0,0 +1,60 @@
+:: BASE_DOC ::
+
+## API
+
+### SideBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+
+### SideBar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | \-
+click | `(context: { value: number \| string; label: string })` | \-
+
+### SideBar Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### SideBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/side-bar-item/type.ts) | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+label | String | - | \- | N
+value | String / Number | - | \- | N
+
+### SideBarItem Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-height | 100% | - 
+--td-side-bar-width | 206rpx | - 
+--td-side-bar-active-color | @brand-color | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-border-radius | 18rpx | - 
+--td-side-bar-color | @text-color-primary | - 
+--td-side-bar-disabled-color | @text-color-disabled | - 
+--td-side-bar-font-size | 32rpx | - 
+--td-side-bar-icon-size | 40rpx | - 
+--td-side-bar-item-height | auto | - 
+--td-side-bar-item-line-height | 48rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/side-bar/README.md b/packages/tdesign-uniapp/components/side-bar/README.md
new file mode 100644
index 000000000..cd87fa66e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/README.md
@@ -0,0 +1,91 @@
+---
+title: SideBar 侧边栏
+description: 用于内容分类后的展示切换。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSideBar from 'tdesign-uniapp/side-bar/side-bar.vue';
+import TSideBarItem from 'tdesign-uniapp/side-bar-item/side-bar-item.vue';
+```
+
+### 锚点用法
+
+{{ base }}
+
+### 切页用法
+
+{{ switch }}
+
+### 带图标侧边导航
+
+{{ with-icon }}
+
+### 自定义样式
+
+{{ custom }}
+
+## API
+
+### SideBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+value | String / Number | - | 选项值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 选项值。非受控属性 | N
+
+### SideBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | 选项值发生变化时触发
+click | `(context: { value: number \| string; label: string })` | 点击选项时触发
+
+### SideBar Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航栏内容
+
+
+### SideBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/side-bar-item/type.ts) | N
+disabled | Boolean | false | 是否禁用 | N
+icon | String / Object | - | 图标，传对象则透传至 Icon | N
+label | String | - | 展示的标签 | N
+value | String / Number | - | 当前选项的值 | N
+
+### SideBarItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航项内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-side-bar-bg-color | @bg-color-secondarycontainer | - |
+| --td-side-bar-height | 100% | - |
+| --td-side-bar-width | 206rpx | - |
+| --td-side-bar-active-color | @brand-color | - |
+| --td-side-bar-bg-color | @bg-color-secondarycontainer | - |
+| --td-side-bar-border-radius | 18rpx | - |
+| --td-side-bar-color | @text-color-primary | - |
+| --td-side-bar-disabled-color | @text-color-disabled | - |
+| --td-side-bar-font-size | 32rpx | - |
+| --td-side-bar-icon-size | 40rpx | - |
+| --td-side-bar-item-height | auto | - |
+| --td-side-bar-item-line-height | 48rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/base/index.vue b/packages/tdesign-uniapp/components/side-bar/_example/base/index.vue
new file mode 100644
index 000000000..811695378
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/base/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        class="demo-navbar"
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+
+    <view
+      class="side-bar-wrapper"
+      :style="'height: calc(100vh - ' + navbarHeight + 'px)'"
+    >
+      <t-side-bar
+        :value="sideBarIndex"
+        @change="onSideBarChange"
+      >
+        <t-side-bar-item
+          v-for="(item, index) in categories"
+          :key="index"
+          :value="item.value || index"
+          :label="item.label"
+          :badge-props="item.badgeProps"
+        />
+      </t-side-bar>
+      <scroll-view
+        class="content"
+        scroll-y
+        scroll-with-animation
+        :scroll-top="scrollTop"
+        @scroll="onScroll"
+      >
+        <view
+          v-for="(item, index) in categories"
+          :key="index"
+          class="section"
+        >
+          <view class="title">
+            {{ item.title || item.label }}
+          </view>
+
+          <t-grid
+            :column="3"
+            :border="false"
+          >
+            <block
+              v-for="(cargo, index1) in item.items"
+              :key="index1"
+            >
+              <t-grid-item
+                t-class-image="image"
+                :text="cargo.label"
+                :image="cargo.image"
+                :image-props="{ shape: 'round', lazy: true }"
+              />
+            </block>
+          </t-grid>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSideBar from 'tdesign-uniapp/side-bar/side-bar.vue';
+import tSideBarItem from 'tdesign-uniapp/side-bar-item/side-bar-item.vue';
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+
+const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png';
+const items = new Array(12).fill()
+  .map((_, index) => ({
+    label: index % 3 === 2 ? '最多六个文字' : '标题文字',
+    image,
+  }));
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSideBar,
+    tSideBarItem,
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      sideBarIndex: 1,
+      scrollTop: 0,
+
+      categories: [
+        {
+          label: '选项一',
+          title: '标题一',
+          badgeProps: {},
+          items,
+        },
+        {
+          label: '选项二',
+          title: '标题二',
+          badgeProps: {
+            dot: true,
+          },
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项三',
+          title: '标题三',
+          badgeProps: {},
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项四',
+          title: '标题四',
+          badgeProps: {
+            count: 6,
+          },
+          items: items.slice(0, 6),
+        },
+        {
+          label: '选项五',
+          title: '标题五',
+          badgeProps: {},
+          items: items.slice(0, 3),
+        },
+      ],
+
+      navbarHeight: 0,
+      offsetTopList: [],
+      lastScrollTop: 0,
+
+      cargo: {
+        label: '',
+        image: '',
+      },
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      let query = uni.createSelectorQuery().in(this);
+      // #ifdef MP-ALIPAY
+      query = uni.createSelectorQuery();
+      // #endif
+
+      const { sideBarIndex } = this;
+      query.selectAll('.title').boundingClientRect();
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const [rects, { height: navbarHeight }] = res;
+        this.offsetTopList = rects.map(item => item.top - navbarHeight);
+
+        this.navbarHeight = navbarHeight;
+        this.scrollTop = this.offsetTopList[sideBarIndex];
+      });
+    },
+    onSideBarChange(e) {
+      const { value } = e;
+      console.log('change: ', value);
+
+      this.sideBarIndex = value;
+      this.scrollTop = this.offsetTopList[value];
+    },
+
+    onScroll(e) {
+      const { scrollTop } = e.detail;
+      const threshold = 50; // 下一个标题与顶部的距离
+      const direction = scrollTop > this.lastScrollTop ? 'down' : 'up';
+      this.lastScrollTop = scrollTop;
+
+      // 动态调整阈值：向下滚动时增大阈值，向上时减小
+      const dynamicThreshold = direction === 'down' ? threshold * 1.5 : threshold * 0.8;
+
+      // 使用二分查找优化查找效率
+      const findNearestIndex = (arr, target) => {
+        let left = 0;
+        let right = arr.length - 1;
+        let result = 0;
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          if (arr[mid] <= target + dynamicThreshold) {
+            result = mid;
+            left = mid + 1;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return result;
+      };
+      const newIndex = findNearestIndex(this.offsetTopList, scrollTop);
+      if (newIndex !== this.sideBarIndex) {
+        this.sideBarIndex = newIndex;
+      }
+    },
+  },
+};
+</script>
+<style>
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+page .round-image {
+    border-radius: 12rpx;
+}
+
+.side-bar-wrapper {
+    display: flex;
+    height: 100vh;
+
+    --td-grid-item-text-font-size: 24rpx;
+}
+
+.side-bar-wrapper .content {
+    flex: 1;
+}
+
+.side-bar-wrapper .section {
+    padding: 32rpx 0;
+}
+
+.side-bar-wrapper .title {
+    padding-left: 40rpx;
+    margin-bottom: 8rpx;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-primary);
+}
+
+.side-bar-wrapper :deep(.image) {
+    width: 96rpx;
+    height: 96rpx;
+    position: relative;
+}
+
+.side-bar-wrapper :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/custom/index.vue b/packages/tdesign-uniapp/components/side-bar/_example/custom/index.vue
new file mode 100644
index 000000000..69531a720
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/custom/index.vue
@@ -0,0 +1,257 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        class="demo-navbar"
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+
+    <view
+      class="side-bar-wrapper"
+      :style="'height: calc(100vh - ' + navbarHeight + 'px)'"
+    >
+      <t-side-bar
+        :value="sideBarIndex"
+        @change="onSideBarChange"
+      >
+        <t-side-bar-item
+          v-for="(item, index) in categories"
+          :key="index"
+          :value="item.value || index"
+          :label="item.label"
+          :badge-props="item.badgeProps"
+        />
+      </t-side-bar>
+      <scroll-view
+        class="content"
+        scroll-y
+        scroll-with-animation
+        :scroll-top="scrollTop"
+        @scroll="onScroll"
+      >
+        <view
+          v-for="(item, index) in categories"
+          :key="index"
+          class="section"
+        >
+          <view class="title">
+            {{ item.title || item.label }}
+          </view>
+
+          <t-grid
+            :column="3"
+            :border="false"
+          >
+            <block
+              v-for="(cargo, index1) in item.items"
+              :key="index1"
+            >
+              <t-grid-item
+                t-class-image="image"
+                :text="cargo.label"
+                :image="cargo.image"
+                :image-props="{ shape: 'round', lazy: true }"
+              />
+            </block>
+          </t-grid>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSideBar from 'tdesign-uniapp/side-bar/side-bar.vue';
+import tSideBarItem from 'tdesign-uniapp/side-bar-item/side-bar-item.vue';
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+const image = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
+const items = new Array(12).fill()
+  .map((_, index) => ({
+    label: index % 3 === 2 ? '最多六个文字' : '标题文字',
+    image,
+  }));
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSideBar,
+    tSideBarItem,
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      sideBarIndex: 1,
+      scrollTop: 0,
+
+      categories: [
+        {
+          label: '选项一',
+          title: '标题一',
+          badgeProps: {},
+          items,
+        },
+        {
+          label: '选项二',
+          title: '标题二',
+          badgeProps: {
+            dot: true,
+          },
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项三',
+          title: '标题三',
+          badgeProps: {},
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项四',
+          title: '标题四',
+          badgeProps: {
+            count: 6,
+          },
+          items: items.slice(0, 6),
+        },
+        {
+          label: '选项五',
+          title: '标题五',
+          badgeProps: {},
+          items: items.slice(0, 3),
+        },
+      ],
+
+      navbarHeight: 0,
+      offsetTopList: [],
+      lastScrollTop: 0,
+
+      cargo: {
+        label: '',
+        image: '',
+      },
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      let query = uni.createSelectorQuery().in(this);
+      // #ifdef MP-ALIPAY
+      query = uni.createSelectorQuery();
+      // #endif
+      const { sideBarIndex } = this;
+      query.selectAll('.title').boundingClientRect();
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const [rects, { height: navbarHeight }] = res;
+        this.offsetTopList = rects.map(item => item.top - navbarHeight);
+
+        this.navbarHeight = navbarHeight;
+        this.scrollTop = this.offsetTopList[sideBarIndex];
+      });
+    },
+    onSideBarChange(e) {
+      const { value } = e;
+
+      this.sideBarIndex = value;
+      this.scrollTop = this.offsetTopList[value];
+    },
+
+    onScroll(e) {
+      const { scrollTop } = e.detail;
+      const threshold = 50; // 下一个标题与顶部的距离
+      const direction = scrollTop > this.lastScrollTop ? 'down' : 'up';
+      this.lastScrollTop = scrollTop;
+
+      // 动态调整阈值：向下滚动时增大阈值，向上时减小
+      const dynamicThreshold = direction === 'down' ? threshold * 1.5 : threshold * 0.8;
+
+      // 使用二分查找优化查找效率
+      const findNearestIndex = (arr, target) => {
+        let left = 0;
+        let right = arr.length - 1;
+        let result = 0;
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          if (arr[mid] <= target + dynamicThreshold) {
+            result = mid;
+            left = mid + 1;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return result;
+      };
+      const newIndex = findNearestIndex(this.offsetTopList, scrollTop);
+      if (newIndex !== this.sideBarIndex) {
+        this.sideBarIndex = newIndex;
+      }
+    },
+  },
+};
+</script>
+<style>
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+page .round-image {
+    border-radius: 12rpx;
+}
+
+.side-bar-wrapper {
+    display: flex;
+    height: 100vh;
+
+    --td-grid-item-text-font-size: 24rpx;
+}
+
+.side-bar-wrapper .content {
+    flex: 1;
+}
+
+.side-bar-wrapper .section {
+    padding: 32rpx 0;
+}
+
+.side-bar-wrapper .title {
+    padding-left: 40rpx;
+    margin-bottom: 8rpx;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-primary);
+}
+
+.side-bar-wrapper :deep(.image) {
+    width: 96rpx;
+    height: 96rpx;
+    position: relative;
+}
+
+.side-bar-wrapper :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+
+page .side-bar-wrapper {
+    --td-side-bar-border-radius: 6px;
+    --td-side-bar-active-color: green;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/side-bar.less b/packages/tdesign-uniapp/components/side-bar/_example/side-bar.less
new file mode 100644
index 000000000..53e6de0ec
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/side-bar.less
@@ -0,0 +1,7 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.t-button {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/side-bar.vue b/packages/tdesign-uniapp/components/side-bar/_example/side-bar.vue
new file mode 100644
index 000000000..b956d6c88
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/side-bar.vue
@@ -0,0 +1,100 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="SideBar"
+      left-arrow
+    />
+    <!-- #endif -->
+
+    <t-demo-header
+      title="SideBar 侧边栏"
+      desc="用于内容分类后的展示切换。"
+      notice="渲染框架支持情况：WebView"
+    />
+    <t-demo
+      title="01 组件类型"
+      desc="侧边导航用法"
+      padding
+    >
+      <TButton
+        variant="outline"
+        theme="primary"
+        size="large"
+        block
+        data-target="base"
+        @click="toNavigation($event, { target: 'base' })"
+      >
+        锚点用法
+      </TButton>
+
+      <TButton
+        variant="outline"
+        theme="primary"
+        size="large"
+        block
+        data-target="switch"
+        @click="toNavigation($event, { target: 'switch' })"
+      >
+        切页用法
+      </TButton>
+    </t-demo>
+
+    <t-demo
+      desc="带图标侧边导航"
+      padding
+    >
+      <TButton
+        variant="outline"
+        theme="primary"
+        size="large"
+        block
+        data-target="with-icon"
+        @click="toNavigation($event, { target: 'with-icon' })"
+      >
+        带图标侧边导航
+      </TButton>
+    </t-demo>
+
+    <t-demo
+      title="02 组件样式"
+      desc="侧边导航样式"
+      padding
+    >
+      <TButton
+        variant="outline"
+        theme="primary"
+        size="large"
+        block
+        data-target="custom"
+        @click="toNavigation($event, { target: 'custom' })"
+      >
+        自定义样式
+      </TButton>
+    </t-demo>
+  </view>
+</template>
+
+<script>
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+export default {
+  components: {
+    TButton,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toNavigation(e, { target }) {
+      uni.navigateTo({
+        url: `./${target}/index`,
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './side-bar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/switch/index.vue b/packages/tdesign-uniapp/components/side-bar/_example/switch/index.vue
new file mode 100644
index 000000000..c9742beb4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/switch/index.vue
@@ -0,0 +1,238 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        class="demo-navbar"
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+
+    <view
+      class="side-bar-wrapper"
+      :style="'height: calc(100vh - ' + navbarHeight + 'px)'"
+    >
+      <t-side-bar
+        :value="sideBarIndex"
+        @change="onSideBarChange"
+      >
+        <t-side-bar-item
+          v-for="(item, index) in categories"
+          :key="index"
+          :value="item.value || index"
+          :label="item.label"
+          :disabled="item.disabled"
+          :badge-props="item.badgeProps"
+        />
+      </t-side-bar>
+      <view
+        class="content"
+        :style="'transform: translateY(-' + sideBarIndex * 100 + '%)'"
+      >
+        <scroll-view
+          v-for="(item, index) in categories"
+          :key="index"
+          class="section"
+          scroll-y
+          :scroll-top="scrollTop"
+          scroll-with-animation
+          :show-scrollbar="false"
+        >
+          <view class="title">
+            {{ item.title || item.label }}
+          </view>
+
+          <t-cell-group>
+            <block
+              v-for="(cargo, index1) in item.items"
+              :key="index1"
+            >
+              <t-cell
+                t-class-left="cell"
+                :title="cargo.label + index"
+              >
+                <template
+                  #image
+                >
+                  <t-image
+                    shape="round"
+                    :src="cargo.image"
+                    lazy
+                    t-class="image"
+                  />
+                </template>
+              </t-cell>
+            </block>
+          </t-cell-group>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSideBar from 'tdesign-uniapp/side-bar/side-bar.vue';
+import tSideBarItem from 'tdesign-uniapp/side-bar-item/side-bar-item.vue';
+import tCellGroup from 'tdesign-uniapp/cell-group/cell-group.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tImage from 'tdesign-uniapp/image/image.vue';
+
+const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png';
+const items = new Array(12).fill(
+  {
+    label: '标题文字',
+    image,
+  },
+  0,
+  12,
+);
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSideBar,
+    tSideBarItem,
+    tCellGroup,
+    tCell,
+    tImage,
+  },
+  data() {
+    return {
+      sideBarIndex: 1,
+      scrollTop: 0,
+
+      categories: [
+        {
+          label: '选项一',
+          title: '标题一',
+          badgeProps: {},
+          items,
+        },
+        {
+          label: '选项二',
+          title: '标题二',
+          badgeProps: {
+            dot: true,
+          },
+          items: items.slice(0, 10),
+        },
+        {
+          label: '选项三',
+          title: '标题三',
+          badgeProps: {},
+          items: items.slice(0, 6),
+        },
+        {
+          label: '选项四',
+          title: '标题四',
+          badgeProps: {
+            count: 8,
+          },
+          items: items.slice(0, 8),
+        },
+        {
+          label: '选项五',
+          title: '标题五',
+          badgeProps: {},
+          disabled: true,
+          items: items.slice(0, 8),
+        },
+      ],
+
+      navbarHeight: 0,
+      offsetTopList: [],
+
+      cargo: {
+        label: '',
+        image: '',
+      },
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const { height = 0 } = res[0] || {};
+        this.navbarHeight = height;
+      });
+    },
+
+    onSideBarChange(e) {
+      const { value } = e;
+      console.log('change: ', value);
+      this.sideBarIndex = value;
+      this.scrollTop = 0;
+    },
+  },
+};
+</script>
+<style>
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+page .round-image {
+    border-radius: 12rpx;
+}
+
+.side-bar-wrapper {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+
+    --td-grid-item-text-font-size: 24rpx;
+}
+
+.side-bar-wrapper .content {
+    flex: 1;
+    transition: transform 0.3s ease;
+}
+
+.side-bar-wrapper .section {
+    padding: 32rpx 0;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.side-bar-wrapper .title {
+    padding-left: 40rpx;
+    margin-bottom: 8rpx;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-primary);
+}
+
+.side-bar-wrapper :deep(.image) {
+    width: 96rpx;
+    height: 96rpx;
+
+    position: relative;
+}
+
+.side-bar-wrapper .cell {
+    margin-right: 32rpx !important;
+}
+
+.side-bar-wrapper :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/_example/with-icon/index.vue b/packages/tdesign-uniapp/components/side-bar/_example/with-icon/index.vue
new file mode 100644
index 000000000..71e584088
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/_example/with-icon/index.vue
@@ -0,0 +1,258 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        class="demo-navbar"
+        title="TDesign"
+        left-arrow
+      />
+      <!-- #endif -->
+    </view>
+
+    <view
+      class="side-bar-wrapper"
+      :style="'height: calc(100vh - ' + navbarHeight + 'px)'"
+    >
+      <t-side-bar
+        :value="sideBarIndex"
+        @change="onSideBarChange"
+      >
+        <t-side-bar-item
+          v-for="(item, index) in categories"
+          :key="index"
+          :value="item.value || index"
+          :label="item.label"
+          :icon="item.icon"
+          :badge-props="item.badgeProps"
+        />
+      </t-side-bar>
+      <scroll-view
+        class="content"
+        scroll-y
+        scroll-with-animation
+        :scroll-top="scrollTop"
+        @scroll="onScroll"
+      >
+        <view
+          v-for="(item, index) in categories"
+          :key="index"
+          class="section"
+        >
+          <view class="title">
+            {{ item.title || item.label }}
+          </view>
+
+          <t-grid
+            :column="3"
+            :border="false"
+          >
+            <block
+              v-for="(cargo, index1) in item.items"
+              :key="index1"
+            >
+              <t-grid-item
+                t-class-image="image"
+                :text="cargo.label"
+                :image="cargo.image"
+                :image-props="{ shape: 'round', lazy: true }"
+              />
+            </block>
+          </t-grid>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSideBar from 'tdesign-uniapp/side-bar/side-bar.vue';
+import tSideBarItem from 'tdesign-uniapp/side-bar-item/side-bar-item.vue';
+import tGrid from 'tdesign-uniapp/grid/grid.vue';
+import tGridItem from 'tdesign-uniapp/grid-item/grid-item.vue';
+const image = 'https://tdesign.gtimg.com/mobile/demos/example2.png';
+const items = new Array(12).fill()
+  .map((_, index) => ({
+    label: index % 3 === 2 ? '最多六个文字' : '标题文字',
+    image,
+  }));
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSideBar,
+    tSideBarItem,
+    tGrid,
+    tGridItem,
+  },
+  data() {
+    return {
+      sideBarIndex: 1,
+      scrollTop: 0,
+
+      categories: [
+        {
+          label: '选项一',
+          title: '标题一',
+          icon: 'app',
+          badgeProps: {},
+          items,
+        },
+        {
+          label: '选项二',
+          title: '标题二',
+          icon: 'app',
+          badgeProps: {
+            dot: true,
+          },
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项三',
+          title: '标题三',
+          icon: 'app',
+          badgeProps: {},
+          items: items.slice(0, 9),
+        },
+        {
+          label: '选项四',
+          title: '标题四',
+          icon: 'app',
+          badgeProps: {
+            count: 6,
+          },
+          items: items.slice(0, 6),
+        },
+        {
+          label: '选项五',
+          title: '标题五',
+          icon: 'app',
+          badgeProps: {},
+          items: items.slice(0, 3),
+        },
+      ],
+
+      navbarHeight: 0,
+      offsetTopList: [],
+      lastScrollTop: 0,
+
+      cargo: {
+        label: '',
+        image: '',
+      },
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      let query = uni.createSelectorQuery().in(this);
+      // #ifdef MP-ALIPAY
+      query = uni.createSelectorQuery();
+      // #endif
+      const { sideBarIndex } = this;
+      query.selectAll('.title').boundingClientRect();
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const [rects, { height: navbarHeight = 0 }] = res;
+        this.offsetTopList = rects.map(item => item.top - navbarHeight);
+
+        this.navbarHeight = navbarHeight;
+        this.scrollTop = this.offsetTopList[sideBarIndex];
+      });
+    },
+    onSideBarChange(e) {
+      const { value } = e;
+
+      this.sideBarIndex = value;
+      this.scrollTop = this.offsetTopList[value];
+    },
+
+    onScroll(e) {
+      const { scrollTop } = e.detail;
+      const threshold = 50; // 下一个标题与顶部的距离
+      const direction = scrollTop > this.lastScrollTop ? 'down' : 'up';
+      this.lastScrollTop = scrollTop;
+
+      // 动态调整阈值：向下滚动时增大阈值，向上时减小
+      const dynamicThreshold = direction === 'down' ? threshold * 1.5 : threshold * 0.8;
+
+      // 使用二分查找优化查找效率
+      const findNearestIndex = (arr, target) => {
+        let left = 0;
+        let right = arr.length - 1;
+        let result = 0;
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          if (arr[mid] <= target + dynamicThreshold) {
+            result = mid;
+            left = mid + 1;
+          } else {
+            right = mid - 1;
+          }
+        }
+        return result;
+      };
+      const newIndex = findNearestIndex(this.offsetTopList, scrollTop);
+      if (newIndex !== this.sideBarIndex) {
+        this.sideBarIndex = newIndex;
+      }
+    },
+  },
+};
+</script>
+<style>
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+page .round-image {
+    border-radius: 12rpx;
+}
+
+.side-bar-wrapper {
+    display: flex;
+    height: 100vh;
+
+    --td-grid-item-text-font-size: 24rpx;
+}
+
+.side-bar-wrapper .content {
+    flex: 1;
+}
+
+.side-bar-wrapper .section {
+    padding: 32rpx 0;
+}
+
+.side-bar-wrapper .title {
+    padding-left: 40rpx;
+    margin-bottom: 8rpx;
+    font-size: 28rpx;
+    line-height: 44rpx;
+    color: var(--td-text-color-primary);
+}
+
+.side-bar-wrapper :deep(.image) {
+    width: 96rpx;
+    height: 96rpx;
+    position: relative;
+}
+
+.side-bar-wrapper :deep(.image)::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border-radius: 24rpx;
+    border: 2rpx solid var(--td-gray-color-4);
+    transform-origin: 0 0;
+    transform: scale(0.5);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/props.ts b/packages/tdesign-uniapp/components/side-bar/props.ts
new file mode 100644
index 000000000..1fc762324
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/props.ts
@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 选项值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选项值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 选项值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击选项时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/side-bar/side-bar-item-props.ts b/packages/tdesign-uniapp/components/side-bar/side-bar-item-props.ts
new file mode 100644
index 000000000..e75554a81
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/side-bar-item-props.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+  },
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 展示的标签 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 当前选项的值 */
+  value: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/side-bar/side-bar.less b/packages/tdesign-uniapp/components/side-bar/side-bar.less
new file mode 100644
index 000000000..5b099fc74
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/side-bar.less
@@ -0,0 +1,22 @@
+@import '../common/style/base.less';
+
+@side-bar-width: var(--td-side-bar-width, 206rpx);
+@side-bar-height: var(--td-side-bar-height, 100%);
+@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer);
+
+.@{prefix}-side-bar {
+  display: flex;
+  flex-direction: column;
+  width: @side-bar-width;
+  height: @side-bar-height;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__padding {
+    flex: 1;
+    background-color: @side-bar-bg-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/side-bar/side-bar.vue b/packages/tdesign-uniapp/components/side-bar/side-bar.vue
new file mode 100644
index 000000000..03e1177e8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/side-bar.vue
@@ -0,0 +1,81 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle])"
+  >
+    <slot />
+    <view :class="classPrefix + '__padding'" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-side-bar`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.SideBarItem)],
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'change',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(e) {
+        this.dataValue = e;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler(v) {
+        this.children?.forEach((item) => {
+          item.updateActive(v);
+        });
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    innerAfterUnLinked(child) {
+      const index = this.children.findIndex(item => item === child);
+      this.children.splice(index, 1);
+    },
+    doChange({ value, label }) {
+      this._trigger('change', { value, label });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './side-bar.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/side-bar/type.ts b/packages/tdesign-uniapp/components/side-bar/type.ts
new file mode 100644
index 000000000..51712564d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/side-bar/type.ts
@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSideBarProps {
+  /**
+   * 选项值
+   */
+  value?: string | number;
+  /**
+   * 选项值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 选项值发生变化时触发
+   */
+  onChange?: (context: { value: number | string; label: string }) => void;
+  /**
+   * 点击选项时触发
+   */
+  onClick?: (context: { value: number | string; label: string }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/skeleton/README.en-US.md b/packages/tdesign-uniapp/components/skeleton/README.en-US.md
new file mode 100644
index 000000000..229a4c9f3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/README.en-US.md
@@ -0,0 +1,45 @@
+:: BASE_DOC ::
+
+## API
+
+### Skeleton Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | String | none | options: gradient/flashed/none | N
+delay | Number | 0 | \- | N
+loading | Boolean | true | \- | N
+row-col | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/skeleton/type.ts) | N
+theme | String | text | options: avatar/image/text/paragraph | N
+
+### Skeleton Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Skeleton External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-col | \-
+t-class-row | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-skeleton-circle-border-radius | @skeleton-circle-border-radius | - 
+--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | - 
+--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - 
+--td-skeleton-bg-color | @bg-color-secondarycontainer | - 
+--td-skeleton-circle-border-radius | @radius-circle | - 
+--td-skeleton-circle-height | 96rpx | - 
+--td-skeleton-rect-border-radius | @radius-default | - 
+--td-skeleton-rect-height | 32rpx | - 
+--td-skeleton-row-spacing | @spacer-2 | - 
+--td-skeleton-text-border-radius | @radius-small | - 
+--td-skeleton-text-height | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/skeleton/README.md b/packages/tdesign-uniapp/components/skeleton/README.md
new file mode 100644
index 000000000..9d0d09da5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/README.md
@@ -0,0 +1,83 @@
+---
+title: Skeleton 骨架屏
+description: 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+```
+
+### 骨架屏类型
+
+基础骨架屏
+
+{{ theme }}
+
+单元格骨架屏
+
+{{ cell-group }}
+
+
+宫格骨架屏
+
+{{ grid }}
+
+图文组合骨架屏
+
+{{ image-group }}
+
+### 组件动效
+
+{{ animation }}
+
+
+## API
+
+### Skeleton Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
+row-col | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/skeleton/type.ts) | N
+theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
+
+### Skeleton Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Skeleton External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-col | 行样式类
+t-class-row | 列样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-skeleton-circle-border-radius | @skeleton-circle-border-radius | - |
+| --td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | - |
+| --td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - |
+| --td-skeleton-bg-color | @bg-color-secondarycontainer | - |
+| --td-skeleton-circle-border-radius | @radius-circle | - |
+| --td-skeleton-circle-height | 96rpx | - |
+| --td-skeleton-rect-border-radius | @radius-default | - |
+| --td-skeleton-rect-height | 32rpx | - |
+| --td-skeleton-row-spacing | @spacer-2 | - |
+| --td-skeleton-text-border-radius | @radius-small | - |
+| --td-skeleton-text-height | 32rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/animation/index.vue b/packages/tdesign-uniapp/components/skeleton/_example/animation/index.vue
new file mode 100644
index 000000000..6c5012232
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/animation/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <view
+      v-for="(animationItem, index) in animationList"
+      :key="index"
+    >
+      <view class="demo-section__desc">
+        {{ animationItem.title }}
+      </view>
+
+      <view class="demo-section__content">
+        <t-skeleton
+          theme="paragraph"
+          :animation="animationItem.value"
+          :loading="animationItem.loading"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+export default {
+  components: {
+    tSkeleton,
+  },
+  data() {
+    return {
+      animationList: [
+        {
+          title: '渐变加载效果',
+          value: 'gradient',
+          loading: true,
+        },
+        {
+          title: '闪烁加载效果',
+          value: 'flashed',
+          loading: true,
+        },
+      ],
+
+      animationItem: {
+        title: '',
+        value: '',
+        loading: '',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-section__desc {
+    font-size: 28rpx;
+    color: var(--td-text-color-placeholder);
+    margin-top: 16rpx;
+    line-height: 44rpx;
+}
+
+.demo-section__content {
+    margin-top: 32rpx;
+    margin-bottom: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/cell-group/index.vue b/packages/tdesign-uniapp/components/skeleton/_example/cell-group/index.vue
new file mode 100644
index 000000000..f069801c8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/cell-group/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <view>
+    <view class="group">
+      <t-skeleton
+        class="group-avatar"
+        :row-col="rowColsAvater"
+        loading
+      />
+      <t-skeleton
+        class="group-content"
+        :row-col="rowColsContent"
+        loading
+      />
+    </view>
+
+    <view class="group">
+      <t-skeleton
+        class="group-avatar"
+        :row-col="rowColsImage"
+        loading
+      />
+      <t-skeleton
+        class="group-content"
+        :row-col="rowColsContent"
+        loading
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+export default {
+  components: {
+    tSkeleton,
+  },
+  data() {
+    return {
+      rowColsAvater: [
+        {
+          size: '96rpx',
+          type: 'circle',
+        },
+      ],
+      rowColsImage: [
+        {
+          size: '96rpx',
+          type: 'rect',
+        },
+      ],
+      rowColsContent: [
+        {
+          width: '50%',
+        },
+        {
+          width: '100%',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.group {
+    display: flex;
+    align-items: center;
+    margin-top: 32rpx;
+}
+
+.group-avatar {
+    margin-right: 24rpx;
+}
+
+.group-content {
+    width: 566rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/grid/index.vue b/packages/tdesign-uniapp/components/skeleton/_example/grid/index.vue
new file mode 100644
index 000000000..6088d48f5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/grid/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view class="wrapper">
+    <t-skeleton
+      :row-col="grid"
+      loading
+    />
+  </view>
+</template>
+
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+export default {
+  components: {
+    tSkeleton,
+  },
+  data() {
+    return {
+      grid: [
+        [
+          {
+            width: '96rpx',
+            height: '96rpx',
+            borderRadius: '12rpx',
+          },
+          {
+            width: '96rpx',
+            height: '96rpx',
+            borderRadius: '12rpx',
+          },
+          {
+            width: '96rpx',
+            height: '96rpx',
+            borderRadius: '12rpx',
+          },
+          {
+            width: '96rpx',
+            height: '96rpx',
+            borderRadius: '12rpx',
+          },
+          {
+            width: '96rpx',
+            height: '96rpx',
+            borderRadius: '12rpx',
+          },
+        ],
+        [
+          {
+            width: '96rpx',
+            height: '32rpx',
+            borderRadius: '6rpx',
+          },
+          {
+            width: '96rpx',
+            height: '32rpx',
+            borderRadius: '6rpx',
+          },
+          {
+            width: '96rpx',
+            height: '32rpx',
+            borderRadius: '6rpx',
+          },
+          {
+            width: '96rpx',
+            height: '32rpx',
+            borderRadius: '6rpx',
+          },
+          {
+            width: '96rpx',
+            height: '32rpx',
+            borderRadius: '6rpx',
+          },
+        ],
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.wrapper {
+    --td-skeleton-row-spacing: 20rpx;
+    margin-top: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/image-group/index.vue b/packages/tdesign-uniapp/components/skeleton/_example/image-group/index.vue
new file mode 100644
index 000000000..703e56578
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/image-group/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <view class="group">
+    <t-skeleton
+      :row-col="rowCol"
+      loading
+    />
+    <t-skeleton
+      :row-col="rowCol"
+      loading
+    />
+  </view>
+</template>
+
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+export default {
+  components: {
+    tSkeleton,
+  },
+  data() {
+    return {
+      rowCol: [
+        {
+          size: '327rpx',
+          borderRadius: '24rpx',
+        },
+        1,
+        {
+          width: '61%',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.group {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/skeleton.less b/packages/tdesign-uniapp/components/skeleton/_example/skeleton.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/skeleton.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/skeleton.vue b/packages/tdesign-uniapp/components/skeleton/_example/skeleton.vue
new file mode 100644
index 000000000..95a84ee17
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/skeleton.vue
@@ -0,0 +1,78 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Skeleton"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Skeleton 骨架屏"
+        desc="用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。"
+      />
+      <t-demo
+        title="01 骨架屏类型"
+        padding
+      >
+        <theme />
+      </t-demo>
+
+      <t-demo
+        desc="单元格骨架屏"
+        padding
+      >
+        <cell-group />
+      </t-demo>
+
+      <t-demo
+        desc="宫格骨架屏"
+        padding
+      >
+        <grid />
+      </t-demo>
+
+      <t-demo
+        desc="图文组合骨架屏"
+        padding
+      >
+        <image-group />
+      </t-demo>
+
+      <t-demo
+        title="02 组件动效"
+        padding
+      >
+        <animation />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+// import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+import theme from './theme/index.vue';
+import grid from './grid/index.vue';
+import cellGroup from './cell-group/index.vue';
+import imageGroup from './image-group/index.vue';
+import animation from './animation/index.vue';
+export default {
+  components: {
+    // tSkeleton,
+    theme,
+    grid,
+    cellGroup,
+    imageGroup,
+    animation,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './skeleton.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.less b/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.vue b/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.vue
new file mode 100644
index 000000000..438e6fad8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/skyline/skeleton.vue
@@ -0,0 +1,86 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Skeleton"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Skeleton 骨架屏
+        </view>
+        <view class="demo-desc">
+          用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
+        </view>
+        <t-demo
+          title="01 骨架屏类型"
+          padding
+        >
+          <theme />
+        </t-demo>
+
+        <t-demo
+          desc="单元格骨架屏"
+          padding
+        >
+          <cell-group />
+        </t-demo>
+
+        <t-demo
+          desc="宫格骨架屏"
+          padding
+        >
+          <grid />
+        </t-demo>
+
+        <t-demo
+          desc="图文组合骨架屏"
+          padding
+        >
+          <image-group />
+        </t-demo>
+
+        <t-demo
+          title="02 组件动效"
+          padding
+        >
+          <animation />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import theme from '../theme/index.vue';
+import grid from '../grid/index.vue';
+import cellGroup from '../cell-group/index.vue';
+import imageGroup from '../image-group/index.vue';
+import animation from '../animation/index.vue';
+export default {
+  components: {
+    tNavbar,
+    theme,
+    grid,
+    cellGroup,
+    imageGroup,
+    animation,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './skeleton.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/_example/theme/index.vue b/packages/tdesign-uniapp/components/skeleton/_example/theme/index.vue
new file mode 100644
index 000000000..db08d7e59
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/_example/theme/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <view>
+    <view
+      v-for="(themeItem, index) in themeList"
+      :key="index"
+    >
+      <view class="demo-section__desc">
+        {{ themeItem.title }}
+      </view>
+
+      <view class="demo-section__content">
+        <t-skeleton :theme="themeItem.value" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSkeleton from 'tdesign-uniapp/skeleton/skeleton.vue';
+export default {
+  components: {
+    tSkeleton,
+  },
+  data() {
+    return {
+      themeList: [
+        {
+          title: '头像骨架屏',
+          value: 'avatar',
+        },
+        {
+          title: '图片骨架屏',
+          value: 'image',
+        },
+        {
+          title: '文本骨架屏',
+          value: 'text',
+        },
+        {
+          title: '段落骨架屏',
+          value: 'paragraph',
+        },
+      ],
+
+      themeItem: {
+        title: '',
+        value: '',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.demo-section__desc {
+    font-size: 28rpx;
+    color: var(--td-text-color-placeholder);
+    margin-top: 16rpx;
+    line-height: 44rpx;
+}
+
+.demo-section__content {
+    margin-top: 32rpx;
+    margin-bottom: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/props.ts b/packages/tdesign-uniapp/components/skeleton/props.ts
new file mode 100644
index 000000000..0038bb08f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/props.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSkeletonProps } from './type';
+export default {
+  /** 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画 */
+  animation: {
+    type: String,
+    default: 'none' as TdSkeletonProps['animation'],
+    validator(val: TdSkeletonProps['animation']): boolean {
+      if (!val) return true;
+      return ['gradient', 'flashed', 'none'].includes(val);
+    },
+  },
+  /** 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
+  delay: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 */
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  /** 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等 */
+  rowCol: {
+    type: Array,
+  },
+  /** 骨架图风格，有基础、头像组合等两大类 */
+  theme: {
+    type: String,
+    default: 'text' as TdSkeletonProps['theme'],
+    validator(val: TdSkeletonProps['theme']): boolean {
+      if (!val) return true;
+      return ['avatar', 'image', 'text', 'paragraph'].includes(val);
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/components/skeleton/skeleton.less b/packages/tdesign-uniapp/components/skeleton/skeleton.less
new file mode 100644
index 000000000..9b25a4dcb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/skeleton.less
@@ -0,0 +1,117 @@
+@import '../common/style/base.less';
+
+@skeleton-animation-gradient: var(--td-skeleton-animation-gradient, rgba(0, 0, 0, 4%));
+@skeleton-animation-flashed: var(--td-skeleton-animation-flashed, rgba(90%, 90%, 90%, 0.3));
+@skeleton-bg-color: var(--td-skeleton-bg-color, @bg-color-secondarycontainer);
+@skeleton-row-spacing: var(--td-skeleton-row-spacing, @spacer-2);
+@skeleton-text-height: var(--td-skeleton-text-height, 32rpx);
+@skeleton-rect-height: var(--td-skeleton-rect-height, 32rpx);
+@skeleton-circle-height: var(--td-skeleton-circle-height, 96rpx);
+@skeleton-text-border-radius: var(--td-skeleton-text-border-radius, @radius-small);
+@skeleton-rect-border-radius: var(--td-skeleton-rect-border-radius, @radius-default);
+@skeleton-circle-border-radius: var(--td-skeleton-circle-border-radius, @radius-circle);
+
+.@{prefix}-skeleton {
+  box-sizing: border-box;
+
+  &__row {
+    display: flex;
+    margin-bottom: @skeleton-row-spacing; // 骨架屏行间距
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__row:only-child,
+  &__row:last-child {
+    margin-bottom: 0;
+  }
+
+  &__col {
+    background-color: @skeleton-bg-color; // 骨架屏背景颜色
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: @spacer-2;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &--type {
+    &-text {
+      width: 100%;
+      height: @skeleton-text-height; // 'text'类型骨架屏列高
+      border-radius: @skeleton-text-border-radius; // 'text'类型骨架屏列圆角
+    }
+
+    &-rect {
+      width: 100%;
+      height: @skeleton-rect-height; // 'rect'类型骨架屏列高
+      border-radius: @skeleton-rect-border-radius; // rect'类型骨架屏列圆角
+    }
+
+    &-circle {
+      width: @skeleton-circle-height; // 'circle'类型骨架屏列宽
+      height: @skeleton-circle-height; // 'circle'类型骨架屏列高
+      border-radius: var(
+        --td-skeleton-circle-border-radius,
+        @skeleton-circle-border-radius
+      ); // 'circle'类型骨架屏列圆角
+      flex-shrink: 0;
+    }
+  }
+
+  &--animation {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0%),
+          @skeleton-animation-gradient,
+          rgba(255, 255, 255, 0%)
+        );
+        animation: t-skeleton--gradient 1.5s linear 0s infinite;
+      }
+    }
+
+    &-flashed {
+      animation: t-skeleton--flashed 2s linear 0s infinite;
+    }
+  }
+
+  @keyframes t-skeleton--gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+
+  @keyframes t-skeleton--flashed {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      background-color: @skeleton-animation-flashed;
+      opacity: 0.3;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/skeleton/skeleton.vue b/packages/tdesign-uniapp/components/skeleton/skeleton.vue
new file mode 100644
index 000000000..ba373a7b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/skeleton.vue
@@ -0,0 +1,210 @@
+<template>
+  <view>
+    <view
+      v-if="isShow"
+      :style="_._style([customStyle])"
+      :class="[classPrefix + ' ', tClass]"
+    >
+      <view
+        v-if="parsedRowCols.length"
+        :class="classPrefix + '__content'"
+      >
+        <view
+          v-for="(row, index) in parsedRowCols"
+          :key="index"
+          :class="[
+            classPrefix + '__row ',
+            tClassRow
+          ]"
+        >
+          <view
+            v-for="(col, index1) in row"
+            :key="index1"
+            :class="[col.class + ' ', tClassCol]"
+            :style="_._style(col.style)"
+          />
+        </view>
+      </view>
+    </view>
+    <view
+      v-else
+      :class="classPrefix + '__content'"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames } from '../common/utils';
+import { isNumber } from '../common/validator';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-skeleton`;
+
+
+const ThemeMap = {
+  avatar: [{
+    type: 'circle',
+    size: '96rpx',
+  }],
+  image: [{
+    type: 'rect',
+    size: '144rpx',
+  }],
+  text: [[{
+    width: '24%',
+    height: '32rpx',
+    marginRight: '32rpx',
+  }, {
+    width: '76%',
+    height: '32rpx',
+  }], 1],
+  paragraph: [1, 1, 1, {
+    width: '55%',
+  }],
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-col`,
+    `${prefix}-class-row`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      parsedRowCols: [],
+      isShow: false,
+      _,
+      timer: null,
+    };
+  },
+  watch: {
+    rowCol: {
+      handler() {
+        this.init();
+      },
+      immediate: true,
+    },
+    loading: 'isShowSkeleton',
+    delay: 'isShowSkeleton',
+  },
+  mounted() {
+    this.init();
+    this.isShowSkeleton();
+  },
+  beforeUnMount() {
+    this.clearTimer();
+  },
+  methods: {
+    init() {
+      const { theme, rowCol } = this;
+      const rowCols = [];
+
+      if (rowCol &&  rowCol.length) {
+        rowCols.push(...rowCol);
+      } else {
+        rowCols.push(...ThemeMap[theme || 'text']);
+      }
+
+      const parsedRowCols = rowCols.map((item) => {
+        if (isNumber(item)) {
+          return new Array(item).fill({
+            class: this.getColItemClass({ type: 'text' }),
+            style: {},
+          });
+        }
+        if (Array.isArray(item)) {
+          return item.map(col => ({
+            ...col,
+            class: this.getColItemClass(col),
+            style: this.getColItemStyle(col),
+          }));
+        }
+
+        const nItem = item;
+        return [
+          {
+            ...nItem,
+            class: this.getColItemClass(nItem),
+            style: this.getColItemStyle(nItem),
+          },
+        ];
+      });
+
+      this.parsedRowCols = parsedRowCols;
+    },
+
+    getColItemClass(obj) {
+      return classNames([
+        `${name}__col`,
+        `${name}--type-${obj.type || 'text'}`,
+        `${name}--animation-${this.animation}`,
+      ]);
+    },
+
+    getColItemStyle(obj) {
+      const styleName = [
+        'width',
+        'height',
+        'marginRight',
+        'marginLeft',
+        'margin',
+        'size',
+        'background',
+        'backgroundColor',
+        'borderRadius',
+      ];
+      const style = {};
+      styleName.forEach((name) => {
+        if (name in obj) {
+          const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
+          if (name === 'size') {
+            [style.width, style.height] = [px, px];
+          } else {
+            style[name] = px;
+          }
+        }
+      });
+      return style;
+    },
+
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+
+    isShowSkeleton() {
+      this.clearTimer();
+
+      const { loading, delay } = this;
+
+      if (!loading || delay === 0) {
+        this.isShow = loading;
+        return;
+      }
+
+      this.timer = setTimeout(() => {
+        this.isShow = this.loading;
+      }, delay);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './skeleton.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/skeleton/type.ts b/packages/tdesign-uniapp/components/skeleton/type.ts
new file mode 100644
index 000000000..91187fd7f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/skeleton/type.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSkeletonProps {
+  /**
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画
+   * @default none
+   */
+  animation?: 'gradient' | 'flashed' | 'none';
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等
+   */
+  rowCol?: SkeletonRowCol;
+  /**
+   * 骨架图风格，有基础、头像组合等两大类
+   * @default text
+   */
+  theme?: 'avatar' | 'image' | 'text' | 'paragraph';
+}
+
+export type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
+
+export interface SkeletonRowColObj {
+  width?: string;
+  size?: string;
+  height?: string;
+  marginRight?: string;
+  marginLeft?: string;
+  margin?: string;
+  type?: 'rect' | 'circle' | 'text';
+}
diff --git a/packages/tdesign-uniapp/components/slider/README.en-US.md b/packages/tdesign-uniapp/components/slider/README.en-US.md
new file mode 100644
index 000000000..0cca603bc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/README.en-US.md
@@ -0,0 +1,64 @@
+:: BASE_DOC ::
+
+## API
+
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+colors | Array | [] | `deprecated`。Typescript：`Array<string>` | N
+disabled | Boolean | undefined | \- | N
+disabled-color | Array | [] | `deprecated`。Typescript：`Array<string>` | N
+label | String / Boolean / Function | false | Typescript：`string \| boolean` | N
+marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+show-extreme-value | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | options: default/capsule | N
+value | Number / Array | 0 | `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/slider/type.ts) | N
+default-value | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/slider/type.ts) | N
+vertical | Boolean | false | \- | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: SliderValue })` | \-
+dragend | `(context: { value: SliderValue, e: TouchEvent })` | \-
+dragstart | `(context: { e: TouchEvent })` | \-
+
+### Slider External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-bar | \-
+t-class-bar-active | \-
+t-class-bar-disabled | \-
+t-class-cursor | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-slider-active-color | @brand-color | - 
+--td-slider-bar-height | 8rpx | - 
+--td-slider-bar-width | 8rpx | - 
+--td-slider-capsule-bar-color | @bg-color-component | - 
+--td-slider-capsule-bar-heihgt | 48rpx | - 
+--td-slider-capsule-bar-width | 48rpx | - 
+--td-slider-capsule-line-heihgt | 36rpx | - 
+--td-slider-default-color | @bg-color-component | - 
+--td-slider-default-color | @bg-color-component-disabled | - 
+--td-slider-disabled-color | @brand-color-disabled | - 
+--td-slider-disabled-text-color | @text-color-disabled | - 
+--td-slider-dot-bg-color | #fff | - 
+--td-slider-dot-color | @component-border | - 
+--td-slider-dot-disabled-bg-color | #fff | - 
+--td-slider-dot-disabled-border-color | #f3f3f3 | - 
+--td-slider-dot-size | 40rpx | - 
+--td-slider-text-color | @text-color-primary | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/slider/README.md b/packages/tdesign-uniapp/components/slider/README.md
new file mode 100644
index 000000000..a0a85ec7c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/README.md
@@ -0,0 +1,128 @@
+---
+title: Slider 滑动选择器
+description: 用于选择横轴上的数值、区间、档位。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSlider from 'tdesign-uniapp/slider/slider.vue';
+```
+
+### 组件类型
+
+单游标滑块
+
+{{ base }}
+
+双游标滑块
+
+{{ range }}
+
+带数值滑动选择器
+
+{{ label }}
+
+带刻度滑动选择器
+
+{{ step }}
+
+### 组件状态
+
+滑块禁用状态
+
+{{ disabled }}
+
+#### 特殊样式
+
+胶囊型滑块
+
+{{ capsule }}
+
+#### 垂直状态
+
+垂直方向的滑块
+
+{{ vertical }}
+
+## FAQ
+
+当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染（在t-popup/t-dialog中同理）。如下：
+
+```html
+<t-slider id="slider" />
+```
+
+```js
+const $slider = this.selectComponent('#slider');
+
+$slider.init();
+```
+
+## API
+
+### Slider Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
+label | String / Boolean / Function | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
+marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | 滑块范围最大值 | N
+min | Number | 0 | 滑块范围最小值 | N
+range | Boolean | false | 双游标滑块 | N
+show-extreme-value | Boolean | false | 是否边界值 | N
+step | Number | 1 | 步长 | N
+theme | String | default | 滑块风格。可选项：default/capsule | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/slider/type.ts) | N
+default-value | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/slider/type.ts) | N
+vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） | N
+
+### Slider Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: SliderValue })` | 滑块值变化时触发
+dragend | `(context: { value: SliderValue, e: TouchEvent })` | 结束拖动时触发
+dragstart | `(context: { e: TouchEvent })` | 开始拖动时触发
+
+### Slider External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-bar | 滑道底部样式类
+t-class-bar-active | 滑道激活态样式类
+t-class-bar-disabled | 滑道禁用态样式类
+t-class-cursor | 游标样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-slider-active-color | @brand-color | - |
+| --td-slider-bar-height | 8rpx | - |
+| --td-slider-bar-width | 8rpx | - |
+| --td-slider-capsule-bar-color | @bg-color-component | - |
+| --td-slider-capsule-bar-heihgt | 48rpx | - |
+| --td-slider-capsule-bar-width | 48rpx | - |
+| --td-slider-capsule-line-heihgt | 36rpx | - |
+| --td-slider-default-color | @bg-color-component | - |
+| --td-slider-default-color | @bg-color-component-disabled | - |
+| --td-slider-disabled-color | @brand-color-disabled | - |
+| --td-slider-disabled-text-color | @text-color-disabled | - |
+| --td-slider-dot-bg-color | #fff | - |
+| --td-slider-dot-color | @component-border | - |
+| --td-slider-dot-disabled-bg-color | #fff | - |
+| --td-slider-dot-disabled-border-color | #f3f3f3 | - |
+| --td-slider-dot-size | 40rpx | - |
+| --td-slider-text-color | @text-color-primary | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/slider/_example/base/index.vue b/packages/tdesign-uniapp/components/slider/_example/base/index.vue
new file mode 100644
index 000000000..00c3423c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/base/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="wrapper">
+    <t-slider
+      :default-value="23"
+      :step="0.1"
+      @change="handleChange"
+    />
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      console.log(e.value);
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    background: var(--bg-color-demo);
+    padding: 0 12rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/capsule/index.vue b/packages/tdesign-uniapp/components/slider/_example/capsule/index.vue
new file mode 100644
index 000000000..623a79745
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/capsule/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="wrapper">
+    <t-slider
+      :default-value="30"
+      theme="capsule"
+    />
+
+    <t-slider
+      :default-value="[40, 60]"
+      range
+      theme="capsule"
+    />
+
+    <t-slider
+      :default-value="[40, 60]"
+      range
+      label="${value}"
+      theme="capsule"
+    />
+
+    <t-slider
+      :default-value="60"
+      :marks="marks"
+      :step="20"
+      theme="capsule"
+    />
+
+    <t-slider
+      :default-value="[20, 80]"
+      range
+      :marks="marks"
+      :step="20"
+      theme="capsule"
+    />
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      marks: {
+        0: '0',
+        20: '20',
+        40: '40',
+        60: '60',
+        80: '80',
+        100: '100',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.label {
+    display: flex;
+    align-items: center;
+    width: 718rpx;
+    padding-left: 32rpx;
+}
+
+.label-class {
+    flex-grow: 1;
+}
+
+.wrapper {
+    background: var(--bg-color-demo);
+    padding: 0 12rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/disabled/index.vue b/packages/tdesign-uniapp/components/slider/_example/disabled/index.vue
new file mode 100644
index 000000000..a374594bd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/disabled/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <t-slider
+      :value="35"
+      disabled
+    />
+
+    <view class="wrapper">
+      <t-slider
+        show-extreme-value
+        label="${value}"
+        :value="[40, 60]"
+        range
+        disabled
+      />
+    </view>
+
+    <view class="wrapper">
+      <t-slider
+        range
+        :value="[20, 60]"
+        :marks="marks"
+        :step="20"
+        disabled
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      marks: {
+        0: '0',
+        20: '20',
+        40: '40',
+        60: '60',
+        80: '80',
+        100: '100',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.wrapper {
+    margin-top: 32rpx;
+    background: var(--bg-color-demo);
+    padding: 40rpx 12rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/label/index.vue b/packages/tdesign-uniapp/components/slider/_example/label/index.vue
new file mode 100644
index 000000000..556f507d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/label/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <view class="wrapper">
+      <t-slider
+        :value="value"
+        label="${value}"
+        @change="handleChange"
+      />
+    </view>
+
+    <view class="demo-desc">
+      带数值双游标滑块
+    </view>
+
+    <view class="wrapper">
+      <t-slider
+        show-extreme-value
+        label="${value}"
+        :default-value="[40, 60]"
+        range
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      value: 35,
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+.demo-desc {
+    margin-top: 24rpx;
+    margin-bottom: 16rpx;
+}
+
+.wrapper {
+    background: var(--bg-color-demo);
+    padding: 40rpx 12rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/max/index.vue b/packages/tdesign-uniapp/components/slider/_example/max/index.vue
new file mode 100644
index 000000000..d9014e6f5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/max/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <view class="wrapper">
+    <t-slider
+      :default-value="30"
+      :min="20"
+      :max="100"
+      :step="20"
+      :marks="marks"
+      @change="handleChange"
+    />
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      marks: {
+        20: '20',
+        40: '40',
+        60: '60',
+        80: '80',
+        100: '100',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      console.log(e.value);
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    padding: 40rpx 12rpx 0;
+    background: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/range/index.vue b/packages/tdesign-uniapp/components/slider/_example/range/index.vue
new file mode 100644
index 000000000..188fb9e82
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/range/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view class="wrapper">
+    <t-slider
+      range
+      :default-value="[35, 65]"
+      @dragstart="onDragstart"
+      @dragend="onDragend"
+    />
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onDragstart(e) {
+      console.log('dragstart', e);
+    },
+    onDragend(e) {
+      console.log('dragend', e);
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    background: var(--bg-color-demo);
+    padding: 0 12rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/skyline/slider.less b/packages/tdesign-uniapp/components/slider/_example/skyline/slider.less
new file mode 100644
index 000000000..da02a26ee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/skyline/slider.less
@@ -0,0 +1,18 @@
+page {
+    padding-bottom: 32rpx;
+}
+
+.t-slider {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 32rpx 0;
+}
+
+.t-slider {
+    flex: 1;
+}
+
+.t-slider + .t-slider {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/slider/_example/skyline/slider.vue b/packages/tdesign-uniapp/components/slider/_example/skyline/slider.vue
new file mode 100644
index 000000000..b8b4bf2af
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/skyline/slider.vue
@@ -0,0 +1,97 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="Slider"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Slider 滑动选择器
+        </view>
+        <view class="demo-desc">
+          用于选择横轴上的数值、区间、档位。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="单游标滑块"
+        >
+          <baseDemo />
+        </t-demo>
+
+        <t-demo desc="双游标滑块">
+          <range />
+        </t-demo>
+
+        <t-demo desc="带数值滑动选择器">
+          <labelDemo />
+        </t-demo>
+        <!--
+      <t-demo desc="起始非零滑动选择器">
+        <max />
+      </t-demo> -->
+
+        <t-demo desc="带刻度滑动选择器">
+          <step />
+        </t-demo>
+
+        <t-demo
+          title="02 组件状态"
+          desc="滑块禁用状态"
+        >
+          <disabled />
+        </t-demo>
+
+        <t-demo
+          title="03 特殊样式"
+          desc="胶囊型滑块"
+        >
+          <capsule />
+        </t-demo>
+
+        <!-- skylne模式下，e.changedTouches返回的坐标为0 -->
+        <!-- <t-demo title="04 垂直状态">
+        <verticalDemo />
+      </t-demo> -->
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import labelDemo from '../label/index.vue';
+import step from '../step/index.vue';
+import range from '../range/index.vue';
+import disabled from '../disabled/index.vue';
+import capsule from '../capsule/index.vue';
+// import verticalDemo from '../vertical/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    labelDemo,
+    step,
+    range,
+    disabled,
+    capsule,
+    // verticalDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './slider.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/slider.less b/packages/tdesign-uniapp/components/slider/_example/slider.less
new file mode 100644
index 000000000..386d751b5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/slider.less
@@ -0,0 +1,18 @@
+page {
+    padding-bottom: 32rpx;
+}
+
+:deep(.t-slider) {
+    display: flex;
+    align-items: center;
+    background: var(--bg-color-demo);
+    padding: 32rpx 0;
+}
+
+:deep(.t-slider) {
+    flex: 1;
+}
+
+:deep(.t-slider + .t-slider) {
+    margin-top: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/slider/_example/slider.vue b/packages/tdesign-uniapp/components/slider/_example/slider.vue
new file mode 100644
index 000000000..bef61957b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/slider.vue
@@ -0,0 +1,88 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Slider"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Slider 滑动选择器"
+        desc="用于选择横轴上的数值、区间、档位。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="单游标滑块"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="双游标滑块">
+        <range />
+      </t-demo>
+
+      <t-demo desc="带数值滑动选择器">
+        <labelDemo />
+      </t-demo>
+
+      <t-demo desc="起始非零滑动选择器">
+        <maxDemo />
+      </t-demo>
+
+      <t-demo desc="带刻度滑动选择器">
+        <step />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="滑块禁用状态"
+      >
+        <disabled />
+      </t-demo>
+
+      <t-demo
+        title="03 特殊样式"
+        desc="胶囊型滑块"
+      >
+        <capsule />
+      </t-demo>
+
+      <t-demo title="04 垂直状态">
+        <vertical />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import range from './range/index.vue';
+import labelDemo from './label/index.vue';
+import maxDemo from './max/index.vue';
+import step from './step/index.vue';
+import disabled from './disabled/index.vue';
+import capsule from './capsule/index.vue';
+import vertical from './vertical/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    range,
+    labelDemo,
+    maxDemo,
+    step,
+    disabled,
+    capsule,
+    vertical,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './slider.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/step/index.vue b/packages/tdesign-uniapp/components/slider/_example/step/index.vue
new file mode 100644
index 000000000..4a877085c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/step/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <view class="wrapper">
+      <t-slider
+        :default-value="60"
+        :marks="marks"
+        :step="20"
+        @change="handleChange"
+      />
+    </view>
+
+    <view class="demo-desc">
+      带刻度双游标滑块
+    </view>
+
+    <view class="wrapper">
+      <t-slider
+        range
+        :default-value="[20, 60]"
+        :marks="marks"
+        :step="20"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      marks: {
+        0: '0',
+        20: '20',
+        40: '40',
+        60: '60',
+        80: '80',
+        100: '100',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+<style>
+.demo-desc {
+    margin-top: 24rpx;
+    margin-bottom: 16rpx;
+}
+
+.wrapper {
+    background: var(--bg-color-demo);
+    padding: 40rpx 12rpx 0;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/_example/vertical/index.vue b/packages/tdesign-uniapp/components/slider/_example/vertical/index.vue
new file mode 100644
index 000000000..8608ef36a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/_example/vertical/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      单游标垂直滑块
+    </view>
+    <view class="wrapper">
+      <t-slider
+        vertical
+        :value="singlevalue"
+        label="${singlevalue}"
+        @change="handleSingleChange"
+      />
+    </view>
+    <view class="demo-desc">
+      带刻度的双游标垂直滑块
+    </view>
+    <view class="wrapper">
+      <t-slider
+        vertical
+        range
+        :default-value="[20, 60]"
+        :marks="marks"
+        :step="20"
+      />
+    </view>
+    <view class="demo-desc">
+      胶囊型垂直滑块
+    </view>
+    <view class="wrapper">
+      <t-slider
+        vertical
+        :value="capsuleValue"
+        label="${capsuleValue}"
+        theme="capsule"
+        @change="handleCapsuleChange"
+      />
+    </view>
+    <view class="demo-desc">
+      带刻度的胶囊型垂直滑块
+    </view>
+    <view class="wrapper">
+      <t-slider
+        vertical
+        :default-value="[20, 80]"
+        range
+        :marks="marks"
+        :step="20"
+        theme="capsule"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+export default {
+  components: {
+    tSlider,
+  },
+  data() {
+    return {
+      singlevalue: 35,
+      capsuleValue: 35,
+      marks: {
+        0: '0',
+        20: '20',
+        40: '40',
+        60: '60',
+        80: '80',
+        100: '100',
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleSingleChange(e) {
+      this.singlevalue = e.value;
+    },
+    handleCapsuleChange(e) {
+      this.capsuleValue = e.value;
+    },
+  },
+};
+</script>
+<style>
+.demo-desc {
+    margin-top: 24rpx;
+    margin-bottom: 16rpx;
+}
+
+.wrapper {
+    background: var(--bg-color-demo);
+    padding-top: 40rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/computed.js b/packages/tdesign-uniapp/components/slider/computed.js
new file mode 100644
index 000000000..c8436497b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/computed.js
@@ -0,0 +1,9 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+const REGEXP = getRegExp('[$][{value}]{7}');
+
+export function getValue(label, value) {
+  if (label && label === 'true') return value;
+  if (REGEXP.test(label)) return label.replace(REGEXP, value);
+}
+
diff --git a/packages/tdesign-uniapp/components/slider/props.ts b/packages/tdesign-uniapp/components/slider/props.ts
new file mode 100644
index 000000000..a12057107
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/props.ts
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSliderProps } from './type';
+export default {
+  /** 是否禁用组件 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
+  label: {
+    type: [String, Boolean, Function],
+    default: false as TdSliderProps['label'],
+  },
+  /** 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }` */
+  marks: {
+    type: [Object, Array],
+    default: () => ({}) as TdSliderProps['marks'],
+  },
+  /** 滑块范围最大值 */
+  max: {
+    type: Number,
+    default: 100,
+  },
+  /** 滑块范围最小值 */
+  min: {
+    type: Number,
+    default: 0,
+  },
+  /** 双游标滑块 */
+  range: Boolean,
+  /** 是否边界值 */
+  showExtremeValue: Boolean,
+  /** 步长 */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /** 滑块风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdSliderProps['theme'],
+    validator(val: TdSliderProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'capsule'].includes(val);
+    },
+  },
+  /** 滑块值 */
+  value: {
+    type: [Number, Array],
+    default: 0 as TdSliderProps['value'],
+  },
+  /** 滑块值，非受控属性 */
+  defaultValue: {
+    type: [Number, Array],
+    default: 0 as TdSliderProps['defaultValue'],
+  },
+  /** 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） */
+  vertical: Boolean,
+  /** 滑块值变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 结束拖动时触发 */
+  onDragend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 开始拖动时触发 */
+  onDragstart: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/slider/slider.less b/packages/tdesign-uniapp/components/slider/slider.less
new file mode 100644
index 000000000..3d032b33c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/slider.less
@@ -0,0 +1,312 @@
+@import '../common/style/base.less';
+
+@slider: ~'@{prefix}-slider';
+@slider-text-color: var(--td-slider-text-color, @text-color-primary);
+@slider-bar-width: var(--td-slider-bar-width, 8rpx);
+@slider-bar-height: var(--td-slider-bar-height, 8rpx);
+@slider-dot-bg-color: var(--td-slider-dot-bg-color, #fff);
+@slider-dot-disabled-bg-color: var(--td-slider-dot-disabled-bg-color, #fff);
+@slider-dot-size: var(--td-slider-dot-size, 40rpx);
+@slider-dot-border-color: var(--td-slider-dot-color, @component-border);
+@slider-dot-disabled-border-color: var(--td-slider-dot-disabled-border-color, #f3f3f3);
+@slider-default-color: var(--td-slider-default-color, @bg-color-component);
+@slider-default-disabled-color: var(--td-slider-default-color, @bg-color-component-disabled);
+@slider-active-color: var(--td-slider-active-color, @brand-color);
+@slider-active-disabled-color: var(--td-slider-disabled-color, @brand-color-disabled);
+@slider-disabled-text-color: var(--td-slider-disabled-text-color, @text-color-disabled);
+
+// capsule
+@slider-capsule-bar-heihgt: var(--td-slider-capsule-bar-heihgt, 48rpx);
+@slider-capsule-bar-width: var(--td-slider-capsule-bar-width, 48rpx);
+@slider-capsule-bar-color: var(--td-slider-capsule-bar-color, @bg-color-component);
+@slider-capsule-line-heihgt: var(--td-slider-capsule-line-heihgt, 36rpx);
+
+.@{slider} {
+  width: 100%;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+
+  &--disabled {
+    .@{slider}__value,
+    .@{slider}__range-extreme,
+    .@{slider}__dot-value,
+    .@{slider}__scale-desc {
+      color: @slider-disabled-text-color;
+    }
+
+    .@{slider}__dot {
+      background-color: @slider-dot-disabled-bg-color;
+      border-color: @slider-dot-disabled-border-color;
+    }
+  }
+
+  &--top {
+    padding-top: 40rpx;
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    height: @slider-bar-height;
+    border-radius: calc(@slider-bar-height / 2);
+    background-color: @slider-active-color;
+
+    &--disabled {
+      background-color: @slider-active-disabled-color;
+    }
+
+    &--capsule {
+      height: @slider-capsule-line-heihgt;
+    }
+
+    &--capsule&--single {
+      border-top-left-radius: calc(@slider-capsule-line-heihgt / 2);
+      border-bottom-left-radius: calc(@slider-capsule-line-heihgt / 2);
+    }
+  }
+
+  &__dot {
+    border-radius: 50%;
+    border: 2rpx solid @slider-dot-border-color;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate3d(50%, -50%, 0);
+    z-index: 2;
+    background-color: @slider-dot-bg-color;
+    width: @slider-dot-size;
+    height: @slider-dot-size;
+    box-shadow: @shadow-1;
+    box-sizing: border-box;
+
+    &--left {
+      left: 0;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+    &-value {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -52rpx;
+      text-align: center;
+      width: 96rpx;
+      height: 44rpx;
+      line-height: 44rpx;
+    }
+  }
+
+  &__value,
+  &__range-extreme,
+  &__dot-value {
+    color: @slider-text-color;
+    &--sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      clip-path: inset(50%);
+      border: 0;
+    }
+  }
+  &__dot-slider {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &__value--min {
+    margin-left: 32rpx;
+  }
+
+  &__value--max {
+    margin-right: 32rpx;
+  }
+
+  &__bar {
+    margin: 16rpx 32rpx;
+    flex: 10;
+    background-clip: content-box;
+    height: @slider-bar-height;
+    border-radius: calc(@slider-bar-height / 2);
+    position: relative;
+    background-color: @slider-default-color;
+
+    &--capsule {
+      height: @slider-capsule-bar-heihgt;
+      border-radius: calc(@slider-capsule-bar-heihgt / 2);
+      background-color: @slider-capsule-bar-color;
+      border: 6rpx solid @slider-capsule-bar-color;
+      box-sizing: border-box;
+    }
+
+    &--marks {
+      background-color: @slider-default-color;
+    }
+
+    &--disabled {
+      background-color: @slider-default-disabled-color;
+    }
+  }
+
+  &__range-extreme--min {
+    margin-left: 32rpx;
+    text-align: left;
+  }
+
+  &__range-extreme--max {
+    margin-right: 32rpx;
+    text-align: right;
+  }
+
+  // 刻度样式
+  &__scale {
+    &-item {
+      background-color: @slider-default-color;
+      width: @slider-bar-height;
+      height: 16rpx;
+      width: 16rpx;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      margin-top: -8rpx;
+      z-index: 1;
+
+      &--active {
+        background-color: @slider-active-color;
+      }
+
+      &--disabled {
+        background-color: @slider-default-disabled-color;
+      }
+
+      &--active&--disabled {
+        background-color: @slider-active-disabled-color;
+      }
+
+      &--capsule {
+        height: @slider-capsule-line-heihgt;
+        width: 4rpx;
+        border-radius: 0;
+        background-color: @slider-capsule-bar-color;
+        margin-top: calc(-0.5 * @slider-capsule-line-heihgt);
+      }
+
+      &--hidden {
+        background-color: transparent;
+      }
+    }
+
+    &-desc {
+      position: absolute;
+      left: 50%;
+      color: @slider-text-color;
+      transform: translateX(-50%);
+      bottom: 32rpx;
+
+      &--capsule {
+        bottom: 46rpx;
+      }
+    }
+  }
+}
+
+.@{slider}--vertical {
+  --td-slider-bar-height: 400rpx;
+
+  height: @slider-bar-height;
+  justify-content: center;
+  position: relative;
+
+  .@{slider}__bar {
+    flex: none;
+    height: 100%;
+    width: @slider-bar-width;
+
+    &--capsule {
+      width: @slider-capsule-bar-width;
+      border-radius: calc(@slider-capsule-bar-width / 2);
+    }
+  }
+
+  .@{slider}__line {
+    width: 100%;
+    height: unset;
+    left: 0;
+    border-radius: calc(@slider-bar-width / 2);
+
+    &--capsule.@{slider}__line--single {
+      border-top-left-radius: calc(@slider-capsule-line-heihgt / 2);
+      border-top-right-radius: calc(@slider-capsule-line-heihgt / 2);
+    }
+  }
+
+  .@{slider}__dot {
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%, -50%);
+
+    &--left {
+      top: 0;
+      transform: translate(-50%, -50%);
+      left: 50%;
+    }
+
+    &--right {
+      left: 50%;
+      transform: translate(-50%, -50%);
+      top: 100%;
+    }
+
+    &-value {
+      left: 54rpx;
+      top: 50%;
+      transform: translate(0, -50%);
+      width: auto;
+    }
+  }
+
+  .@{slider}__range-extreme {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0;
+
+    &--min {
+      top: 0;
+    }
+
+    &--max {
+      bottom: 0;
+    }
+  }
+
+  .@{slider}__scale {
+    &-item {
+      left: 50%;
+      margin-top: 0;
+
+      &--capsule {
+        height: 4rpx;
+        width: @slider-capsule-line-heihgt;
+      }
+    }
+
+    &-desc {
+      top: 50%;
+      transform: translateY(-50%);
+      bottom: unset;
+      left: 38rpx;
+
+      &--capsule {
+        left: 52rpx;
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/slider/slider.vue b/packages/tdesign-uniapp/components/slider/slider.vue
new file mode 100644
index 000000000..afc2cde7e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/slider.vue
@@ -0,0 +1,716 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="
+      _.cls(classPrefix, [
+        ['top', label || scaleTextArray.length],
+        ['disabled', disabled],
+        ['range', range]
+      ]) +
+        '  ' +
+        tClass +
+        ' ' +
+        (vertical ? classPrefix + '--vertical' : '')
+    "
+  >
+    <block v-if="!range">
+      <text
+        v-if="showExtremeValue"
+        :class="classPrefix + '__value ' + classPrefix + '__value--min'"
+      >
+        {{ label ? getValue(label, min) : min }}
+      </text>
+      <view
+        id="sliderLine"
+        :class="_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
+        @click="onSingleLineTap"
+      >
+        <block v-if="isScale">
+          <view
+            v-for="(item, index) in scaleArray"
+            :key="index"
+            :class="
+              _.cls(classPrefix + '__scale-item', [
+                ['active', _value >= item.val],
+                ['disabled', disabled],
+                theme,
+                ['hidden', ((index == 0 || index == scaleArray.length - 1) && theme == 'capsule') || value == item.val]
+              ])
+            "
+            :style="(vertical ? 'top' : 'left') + ':' + item.left + 'px; ' + (vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);')"
+            :aria-hidden="true"
+          >
+            <view
+              v-if="scaleTextArray.length"
+              :class="_.cls(classPrefix + '__scale-desc', [theme])"
+            >
+              {{ scaleTextArray[index] }}
+            </view>
+          </view>
+        </block>
+        <view
+          :class="_.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single']) + ' ' + tClassBarActive"
+          :style="(vertical ? 'height' : 'width') + ': ' + lineBarWidth"
+        >
+          <view
+            id="singleDot"
+            :class="classPrefix + '__dot ' + tClassCursor"
+            @touchstart.stop.prevent="onTouchStart"
+            @touchmove.stop.prevent="onSingleLineTap"
+            @touchend.stop.prevent="onTouchEnd"
+            @touchcancel.stop.prevent="onTouchEnd"
+          >
+            <view
+              v-if="label || isVisibleToScreenReader"
+              :class="_.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              aria-role="alert"
+              aria-live="assertive"
+              :aria-hidden="!isVisibleToScreenReader"
+            >
+              {{ getValue(label, _value) || _value }}
+            </view>
+            <view
+              :class="classPrefix + '__dot-slider'"
+              aria-role="slider"
+              :aria-disabled="disabled"
+              :aria-valuemax="max"
+              :aria-valuemin="min"
+              :aria-valuenow="_value"
+              :aria-valuetext="getValue(label, _value) || _value"
+            />
+          </view>
+        </view>
+      </view>
+      <text
+        v-if="showExtremeValue"
+        :class="classPrefix + '__value ' + classPrefix + '__value--max'"
+      >
+        {{ label ? getValue(label, max) : max }}
+      </text>
+    </block>
+    <block v-if="range">
+      <view
+        v-if="showExtremeValue"
+        :class="classPrefix + '__range-extreme ' + classPrefix + '__range-extreme--min'"
+      >
+        {{ min }}
+      </view>
+      <view
+        id="sliderLine"
+        :class="_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']]) + ' ' + tClassBar"
+        @click="onLineTap"
+      >
+        <block v-if="isScale">
+          <view
+            v-for="(item, index) in scaleArray"
+            :key="index"
+            :class="
+              _.cls(classPrefix + '__scale-item', [
+                ['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]],
+                ['disabled', disabled],
+                theme,
+                ['hidden', ((index == 0 || index == scaleArray.length - 1) && theme == 'capsule') || value == item.val]
+              ])
+            "
+            :style="(vertical ? 'top' : 'left') + ':' + item.left + 'px; ' + (vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);')"
+            :aria-hidden="true"
+          >
+            <view
+              v-if="scaleTextArray.length"
+              :class="_.cls(classPrefix + '__scale-desc', [theme])"
+            >
+              {{ scaleTextArray[index] }}
+            </view>
+          </view>
+        </block>
+        <view
+          :class="_.cls(classPrefix + '__line', [['disabled', disabled], theme]) + ' ' + tClassBarActive"
+          :style="(vertical ? 'top' : 'left') + ': ' + lineLeft + 'px; ' + (vertical ? 'bottom' : 'right') + ': ' + lineRight + 'px'"
+        >
+          <view
+            id="leftDot"
+            :class="classPrefix + '__dot ' + classPrefix + '__dot--left ' + tClassCursor"
+            @touchstart.stop.prevent="onTouchStart"
+            @touchmove.stop.prevent="onTouchMoveLeft"
+            @touchend.stop.prevent="onTouchEnd"
+            @touchcancel.stop.prevent="onTouchEnd"
+          >
+            <view
+              v-if="label || isVisibleToScreenReader"
+              :class="_.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              aria-role="alert"
+              aria-live="assertive"
+              :aria-hidden="!isVisibleToScreenReader"
+            >
+              {{ getValue(label, dotTopValue[0]) || dotTopValue[0] }}
+            </view>
+            <view
+              :class="classPrefix + '__dot-slider'"
+              aria-role="slider"
+              :aria-disabled="disabled"
+              :aria-valuemax="max"
+              :aria-valuemin="min"
+              :aria-valuenow="dotTopValue[0]"
+              :aria-valuetext="getValue(label, dotTopValue[0]) || dotTopValue[0]"
+            />
+          </view>
+          <view
+            id="rightDot"
+            :class="classPrefix + '__dot ' + classPrefix + '__dot--right ' + tClassCursor"
+            @touchstart.stop.prevent="onTouchStart"
+            @touchmove.stop.prevent="onTouchMoveRight"
+            @touchend.stop.prevent="onTouchEnd"
+            @touchcancel.stop.prevent="onTouchEnd"
+          >
+            <view
+              v-if="label || isVisibleToScreenReader"
+              :class="_.cls(classPrefix + '__dot-value', [['sr-only', !label]])"
+              aria-role="alert"
+              aria-live="assertive"
+              :aria-hidden="!isVisibleToScreenReader"
+            >
+              {{ getValue(label, dotTopValue[1]) || dotTopValue[1] }}
+            </view>
+            <view
+              :class="classPrefix + '__dot-slider'"
+              aria-role="slider"
+              :aria-disabled="disabled"
+              :aria-valuemax="max"
+              :aria-valuemin="min"
+              :aria-valuenow="dotTopValue[1]"
+              :aria-valuetext="getValue(label, dotTopValue[1]) || dotTopValue[1]"
+            />
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="showExtremeValue"
+        :class="classPrefix + '__range-extreme ' + classPrefix + '__range-extreme--max'"
+      >
+        {{ max }}
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { trimSingleValue, trimValue } from './tool';
+import props from './props';
+import { getRect, coalesce, nextTick } from '../common/utils';
+import Bus from '../common/bus';
+import _ from '../common/utils.wxs';
+import { getValue } from './computed.js';
+import { isString, isFunction } from '../common/validator';
+
+
+const name = `${prefix}-slider`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-bar`,
+    `${prefix}-class-bar-active`,
+    `${prefix}-class-bar-disabled`,
+    `${prefix}-class-cursor`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      // 按钮样式列表
+      sliderStyles: '',
+      classPrefix: name,
+      initialLeft: null,
+      initialRight: null,
+      activeLeft: 0,
+      activeRight: 0,
+      maxRange: 0,
+      lineLeft: 0,
+      lineRight: 0,
+      dotTopValue: [0, 0],
+      _value: 0,
+      blockSize: 20,
+      isScale: false,
+      scaleArray: [],
+      scaleTextArray: [],
+      prefix,
+      realLabel: '',
+      extremeLabel: [],
+      isVisibleToScreenReader: false,
+      identifier: [-1, -1],
+      __inited: false,
+      _,
+
+      lineBarWidth: 0,
+    };
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.handlePropsChange(newValue);
+      },
+      // immediate: true,
+      deep: true,
+    },
+    _value: {
+      handler(newValue) {
+        this.bus.on('initial', () => this.renderLine(newValue));
+        this.toggleA11yTips();
+      },
+      // immediate: true,
+      deep: true,
+    },
+    marks: {
+      handler(val) {
+        this.bus.on('initial', () => this.handleMark(val));
+      },
+      // immediate: true,
+      deep: true,
+    },
+    label: {
+      handler(val) {
+        this.isShowLabel = Boolean(val);
+      },
+      immediate: true,
+    },
+    showExtremeValue: 'getwExtremeLabel',
+    min: 'getwExtremeLabel',
+    max: 'getwExtremeLabel',
+  },
+  created() {
+    this.bus = new Bus();
+    this.bus.on('initial', () => this.handleMark(this.marks));
+    this.bus.on('initial', () => {
+      nextTick().then(() => {
+        this.renderLine(this._value);
+      });
+    });
+    this.toggleA11yTips();
+  },
+  mounted() {
+    const { value, defaultValue } = this;
+    // if (!value)
+    this.handlePropsChange(coalesce(value, defaultValue, 0));
+    this.init();
+    this.injectPageScroll();
+  },
+
+  methods: {
+    getValue,
+    getwExtremeLabel() {
+      const { showExtremeValue, min, max } = this;
+      if (!showExtremeValue) return;
+
+      this.extremeLabel = [this.getLabelByValue(Number(min), 'min'), this.getLabelByValue(Number(max), 'max')];
+    },
+    injectPageScroll() {
+      const { range, vertical } = this;
+      if (!range || !vertical) return;
+      const pages = getCurrentPages() || [];
+      let curPage = null;
+      if (pages && pages.length - 1 >= 0) {
+        curPage = pages[pages.length - 1];
+      }
+      if (!curPage) return;
+      const originPageScroll = curPage?.onPageScroll;
+      curPage.onPageScroll = (rest) => {
+        originPageScroll?.call(this, rest);
+        this.observerScrollTop(rest);
+      };
+    },
+
+    observerScrollTop(rest) {
+      const { scrollTop } = rest || {};
+      this.pageScrollTop = scrollTop;
+    },
+
+    toggleA11yTips() {
+      this.isVisibleToScreenReader = true;
+
+      setTimeout(() => {
+        this.isVisibleToScreenReader = false;
+      }, 2000);
+    },
+
+    renderLine(val) {
+      const { min, max, range } = this;
+      const { maxRange } = this;
+
+      if (range) {
+        const left = (maxRange * (val[0] - Number(min))) / (Number(max) - Number(min));
+        const right = (maxRange * (Number(max) - val[1])) / (Number(max) - Number(min));
+        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+        this.setLineStyle(left, right);
+      } else {
+        this.setSingleBarWidth(val);
+      }
+    },
+
+    triggerValue(value) {
+      if (this.preval === value) return;
+      const { min, max, range } = this;
+
+      this.preval = value;
+      const parsed = trimValue(value, {
+        min, max, range,
+      });
+      this._trigger('change', {
+        value: parsed,
+      });
+      if (this._selfControlled) {
+        this._value = parsed;
+      }
+    },
+
+    getLabelByValue(value, position) {
+      const { label } = this;
+
+      if (isString(label)) {
+        let text = String(value);
+        try {
+          const rule = /\${value}%/g;
+          const enableToReplace = rule.test(label);
+          if (enableToReplace) {
+            text = label.replace(rule, String(value));
+          } else {
+            text = label;
+            throw new Error();
+          }
+        } catch (e) {
+
+        }
+        return text;
+      }
+
+      if (isFunction(label)) {
+        return label(value, position);
+      }
+
+      return String(value);
+    },
+
+    handlePropsChange(newValue) {
+      const { min, max, range } = this;
+
+      const value = trimValue(newValue, {
+        min, max, range,
+      });
+
+
+      const realLabel = this.getLabelByValue(value);
+
+      this.triggerValue(value);
+
+      const setValueAndTrigger = () => {
+        this._value = value;
+        this.realLabel = realLabel;
+      };
+
+      // 基本样式未初始化，等待初始化后在改变数据。
+      if (this.maxRange === 0) {
+        this.init().then(setValueAndTrigger);
+        return;
+      }
+
+      setValueAndTrigger();
+    },
+
+    valueToPosition(value) {
+      const { min, max, theme } = this;
+      const { blockSize, maxRange } = this;
+      const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
+
+      return Math.round(((Number(value) - Number(min)) / (Number(max) - Number(min))) * maxRange) + halfBlock;
+    },
+
+    handleMark(marks) {
+      const calcPos = arr => arr.map(item => ({
+        val: item,
+        left: this.valueToPosition(item),
+      }));
+
+      if (marks?.length && Array.isArray(marks)) {
+        this.isScale = true;
+        this.scaleArray = calcPos(marks);
+        this.scaleTextArray = [];
+      }
+
+      if (Object.prototype.toString.call(marks) === '[object Object]') {
+        const scaleArray = Object.keys(marks).map(item => Number(item));
+        const scaleTextArray = scaleArray.map(item => marks[item]);
+
+        this.isScale = scaleArray.length > 0;
+        this.scaleArray = calcPos(scaleArray);
+        this.scaleTextArray = scaleTextArray;
+      }
+    },
+
+    setSingleBarWidth(value) {
+      const width = this.valueToPosition(value);
+
+      this.lineBarWidth = `${width}px`;
+    },
+
+    async init() {
+      if (this.__inited) return;
+      await this.getInitialInfo();
+      this.__inited = true;
+      this.bus.emit('initial');
+    },
+
+    async getInitialInfo() {
+      const line = await getRect(this, '#sliderLine');
+      const { blockSize } = this;
+      const { theme, vertical } = this;
+      const halfBlock = Number(blockSize) / 2;
+      const { top, bottom, right, left } = line;
+      let maxRange = vertical ? bottom - top : right - left;
+      let initialLeft = vertical ? top : left;
+      let initialRight = vertical ? bottom : right;
+      if (initialLeft === 0 && initialRight === 0) return;
+
+      if ((theme) === 'capsule') {
+        maxRange = maxRange - Number(blockSize) - 6; // 6 是边框宽度
+        initialLeft -= halfBlock;
+        initialRight -= halfBlock;
+      }
+
+      this.maxRange = maxRange;
+      this.initialLeft = initialLeft;
+      this.initialRight = initialRight;
+    },
+
+    stepValue(value) {
+      const { step, min, max } = this;
+      const decimal = String(step).indexOf('.') > -1 ? String(step).length - String(step).indexOf('.') - 1 : 0;
+      const closestStep = trimSingleValue(
+        Number((Math.round(value / Number(step)) * Number(step)).toFixed(decimal)),
+        Number(min),
+        Number(max),
+      );
+      return closestStep;
+    },
+
+    // 点击滑动条的事件
+    async onSingleLineTap(e) {
+      await this.getInitialInfo();
+      const { disabled } = this;
+      if (disabled) return;
+      const isSingleLineTap = this.identifier[0] === -1; // 区分点击滑动条和单游标的滑动
+      if (isSingleLineTap) {
+        const [touch] = e.changedTouches;
+        this.identifier[0] = touch.identifier;
+      }
+      const value = await this.getSingleChangeValue(e);
+
+      if (isSingleLineTap) {
+        this.identifier[0] = -1;
+      }
+      this.triggerValue(value);
+    },
+
+    async getSingleChangeValue(e) {
+      // await this.getInitialInfo();
+      const { min, max, theme, vertical } = this;
+      const { initialLeft, maxRange, blockSize } = this;
+      const touch = e.changedTouches.find(item => item.identifier === this.identifier[0]);
+      if (!touch) return;
+      const pagePosition = this.getPagePosition(touch);
+
+      let offset = 0;
+      if ((theme) === 'capsule') {
+        offset = Number(blockSize);
+        if (vertical) {
+        }
+        offset += 3;
+      } else if (vertical) {
+      }
+
+      const currentLeft = pagePosition - initialLeft - offset;
+      let value = 0;
+      if (currentLeft <= 0) {
+        value = Number(min);
+      } else if (currentLeft >= maxRange) {
+        value = Number(max);
+      } else {
+        value = (currentLeft / maxRange) * (Number(max) - Number(min)) + Number(min);
+      }
+      return this.stepValue(value);
+    },
+
+    /**
+   * 将位置转换为值
+   *
+   * @param {number} posValue 位置数据
+   * @param {(0 | 1)} dir 方向： 0-left， 1-right
+   * @return  {number}
+   * @memberof Slider
+   */
+    convertPosToValue(posValue, dir) {
+      const { maxRange } = this;
+      const { max, min } = this;
+      return dir === 0
+        ? (posValue / maxRange) * (Number(max) - Number(min)) + Number(min)
+        : Number(max) - (posValue / maxRange) * (Number(max) - Number(min));
+    },
+
+    // 点击范围选择滑动条的事件
+    onLineTap(e) {
+      const { disabled, theme, vertical } = this;
+      const { initialLeft, initialRight, maxRange, blockSize } = this;
+      if (disabled) return;
+
+      const [touch] = e.changedTouches;
+      const pagePosition = this.getPagePosition(touch);
+      const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
+
+      const currentLeft = pagePosition - initialLeft;
+      const currentRight = -(pagePosition - initialRight);
+      if (currentLeft < 0 || currentRight > maxRange + Number(blockSize)) return;
+
+      Promise.all([getRect(this, '#leftDot'), getRect(this, '#rightDot')]).then(([leftDot, rightDot]) => {
+        const pageScrollTop = this.pageScrollTop || 0;
+        // 点击处-halfblock 与 leftDot左侧的距离（绝对值）
+        const leftDotPosition = vertical ? leftDot.top + pageScrollTop : leftDot.left;
+        const distanceLeft = Math.abs(pagePosition - leftDotPosition - halfBlock);
+        // 点击处-halfblock 与 rightDot左侧的距离（绝对值）
+        const rightDotPosition = vertical ? rightDot.top + pageScrollTop : rightDot.left;
+        const distanceRight = Math.abs(rightDotPosition - pagePosition + halfBlock);
+        // 哪个绝对值小就移动哪个Dot
+        const isMoveLeft = distanceLeft < distanceRight;
+
+        let offset = 0;
+        if ((theme) === 'capsule') {
+          offset = Number(blockSize);
+          if (vertical) {
+            offset *= 2;
+          }
+          offset += 6;
+        } else if (vertical) {
+          offset = Number(blockSize);
+        }
+
+        if (isMoveLeft) {
+        // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
+          const left = pagePosition - initialLeft - offset;
+          const leftValue = this.convertPosToValue(left, 0);
+          this.triggerValue([this.stepValue(leftValue), this._value[1]]);
+        } else {
+          let right = -(pagePosition - initialRight);
+          if (vertical) {
+            right += offset / 2;
+          }
+          const rightValue = this.convertPosToValue(right, 1);
+
+          this.triggerValue([this._value[0], this.stepValue(rightValue)]);
+        }
+      });
+    },
+
+    async onTouchStart(e) {
+      await this.getInitialInfo();
+      this.$emit('dragstart', { e });
+      const [touch] = e.changedTouches;
+      if (e.currentTarget.id === 'rightDot') {
+        this.identifier[1] = touch.identifier;
+      } else {
+        this.identifier[0] = touch.identifier;
+      }
+    },
+
+    onTouchMoveLeft(e) {
+      const { disabled, theme } = this;
+      const { initialLeft, _value, blockSize } = this;
+      if (disabled) return;
+
+      const touch = e.changedTouches.find(item => item.identifier === this.identifier[0]);
+      if (!touch) return;
+      const pagePosition = this.getPagePosition(touch);
+      let offset = 0;
+      if ((theme) === 'capsule') {
+        offset = Number(blockSize) + 3;
+      }
+      const currentLeft = pagePosition - initialLeft - offset;
+
+      const newData = [...(_value)];
+      const leftValue = this.convertPosToValue(currentLeft, 0);
+
+      newData[0] = this.stepValue(leftValue);
+
+      this.triggerValue(newData);
+    },
+
+    onTouchMoveRight(e) {
+      const { disabled, vertical, theme } = this;
+      const { initialRight, _value } = this;
+      if (disabled) return;
+
+      const touch = e.changedTouches.find(item => item.identifier === this.identifier[1]);
+      if (!touch) return;
+
+      const pagePosition = this.getPagePosition(touch);
+      let offset = 0;
+      if ((theme) === 'capsule') {
+        offset -= 3;
+      } else if (vertical) {
+      }
+      const currentRight = -(pagePosition - initialRight - offset);
+
+      const newData = [...(_value)];
+      const rightValue = this.convertPosToValue(currentRight, 1);
+      newData[1] = this.stepValue(rightValue);
+
+      this.triggerValue(newData);
+    },
+
+    setLineStyle(left, right) {
+      const { theme } = this;
+      const { blockSize, maxRange } = this;
+      const halfBlock = (theme) === 'capsule' ? Number(blockSize) / 2 : 0;
+      const [a, b] = this._value ;
+      const cut = v => parseInt(v, 10);
+
+      this.dotTopValue = [a, b];
+      this.realLabel = [this.getLabelByValue(a, 'start'), this.getLabelByValue(b, 'end')];
+
+      if (left + right <= maxRange) {
+        this.lineLeft = cut(left + halfBlock);
+        this.lineRight = cut(right + halfBlock);
+      } else {
+        this.lineLeft = cut(maxRange + halfBlock - right);
+        this.lineRight = cut(maxRange - left + halfBlock * 1.5);
+      }
+    },
+
+    onTouchEnd(e) {
+      this.$emit('dragend', { e, value: this._value });
+      if (e.currentTarget.id === 'rightDot') {
+        this.identifier[1] = -1;
+      } else {
+        this.identifier[0] = -1;
+      }
+    },
+
+    getPagePosition(touch) {
+      const { clientX, clientY } = touch;
+      const { vertical } = this;
+      return vertical ? clientY : clientX;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './slider.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/slider/tool.ts b/packages/tdesign-uniapp/components/slider/tool.ts
new file mode 100644
index 000000000..42b2b7667
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/tool.ts
@@ -0,0 +1,43 @@
+/**
+ * 处理单个number的超限和异常
+ * @param {any} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+export const trimSingleValue = (value: any, min: number, max: number): number => {
+  if (value < min) {
+    return min;
+  }
+
+  if (value > max) {
+    return max;
+  }
+
+  return value;
+};
+
+/**
+ * 处理超限和异常value
+ * @param value
+ * @param props
+ * @returns
+ */
+export const trimValue = (value: number | number[], props): number | number[] | undefined => {
+  const { min, max, range } = props;
+
+  if (range && Array.isArray(value)) {
+    value[0] = trimSingleValue(value[0], min, max);
+    value[1] = trimSingleValue(value[1], min, max);
+
+    return value[0] <= value[1] ? value : [value[1], value[0]];
+  }
+
+  if (range) {
+    return [min, max];
+  }
+
+  if (!range) {
+    return trimSingleValue(value, min, max);
+  }
+};
diff --git a/packages/tdesign-uniapp/components/slider/type.ts b/packages/tdesign-uniapp/components/slider/type.ts
new file mode 100644
index 000000000..659ebb1b8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/slider/type.ts
@@ -0,0 +1,81 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSliderProps {
+  /**
+   * 是否禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default false
+   */
+  label?: string | boolean;
+  /**
+   * 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`
+   * @default {}
+   */
+  marks?: Record<number, string> | Array<number>;
+  /**
+   * 滑块范围最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 滑块范围最小值
+   * @default 0
+   */
+  min?: number;
+  /**
+   * 双游标滑块
+   * @default false
+   */
+  range?: boolean;
+  /**
+   * 是否边界值
+   * @default false
+   */
+  showExtremeValue?: boolean;
+  /**
+   * 步长
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 滑块风格
+   * @default default
+   */
+  theme?: 'default' | 'capsule';
+  /**
+   * 滑块值
+   * @default 0
+   */
+  value?: SliderValue;
+  /**
+   * 滑块值，非受控属性
+   * @default 0
+   */
+  defaultValue?: SliderValue;
+  /**
+   * 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度）
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * 滑块值变化时触发
+   */
+  onChange?: (context: { value: SliderValue }) => void;
+  /**
+   * 结束拖动时触发
+   */
+  onDragend?: (context: { value: SliderValue; e: TouchEvent }) => void;
+  /**
+   * 开始拖动时触发
+   */
+  onDragstart?: (context: { e: TouchEvent }) => void;
+}
+
+export type SliderValue = number | Array<number>;
diff --git a/packages/tdesign-uniapp/components/step-item/computed.js b/packages/tdesign-uniapp/components/step-item/computed.js
new file mode 100644
index 000000000..8a518ee01
--- /dev/null
+++ b/packages/tdesign-uniapp/components/step-item/computed.js
@@ -0,0 +1,4 @@
+export function getAriaLabel(index, title, content) {
+  return `第${index + 1}步，${title}，${content}`;
+}
+
diff --git a/packages/tdesign-uniapp/components/step-item/props.ts b/packages/tdesign-uniapp/components/step-item/props.ts
new file mode 100644
index 000000000..dceb9a7ed
--- /dev/null
+++ b/packages/tdesign-uniapp/components/step-item/props.ts
@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStepItemProps } from './type';
+export default {
+  /** 步骤描述 */
+  content: {
+    type: String,
+    default: '' as TdStepItemProps['content'],
+  },
+  /** 步骤条自定义内容 */
+  extra: {
+    type: String,
+  },
+  /** 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 */
+  icon: {
+    type: String,
+  },
+  /** 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态 */
+  status: {
+    type: String,
+    default: 'default' as TdStepItemProps['status'],
+    validator(val: TdStepItemProps['status']): boolean {
+      if (!val) return true;
+      return ['default', 'process', 'finish', 'error'].includes(val);
+    },
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '' as TdStepItemProps['title'],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/step-item/step-item.less b/packages/tdesign-uniapp/components/step-item/step-item.less
new file mode 100644
index 000000000..a7b6f0d3f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/step-item/step-item.less
@@ -0,0 +1,224 @@
+@import '../common/style/base.less';
+
+@step-item-dot-size: var(--td-step-item-dot-size, 16rpx);
+@step-item-circle-size: var(--td-step-item-circle-size, 44rpx);
+@step-item-circle-font-size: var(--td-step-item-circle-font-size, 28rpx);
+@step-item-description-color: var(--td-step-item-description-color, @text-color-placeholder);
+
+@step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer);
+@step-item-default-circle-color: var(--td-step-item-default-circle-color, @text-color-placeholder);
+@step-item-default-title-color: var(--td-step-item-default-title-color, @text-color-placeholder);
+@step-item-default-icon-color: var(--td-step-item-default-icon-color, @text-color-placeholder);
+@step-item-default-dot-border-color: var(--td-step-item-default-dot-border-color, @component-border);
+
+@step-item-process-circle-color: var(--td-step-item-process-circle-color, @text-color-anti);
+@step-item-process-circle-bg: var(--td-step-item-process-circle-bg, @brand-color);
+@step-item-process-title-color: var(--td-step-item-process-title-color, @brand-color);
+@step-item-process-icon-color: var(--td-step-item-process-icon-color, @brand-color);
+@step-item-process-dot-border-color: var(--td-step-item-process-dot-border-color, @brand-color);
+
+@step-item-finish-circle-color: var(--td-step-item-finish-circle-color, @brand-color);
+@step-item-finish-circle-bg: var(--td-step-item-finish-circle-bg, @brand-color-light);
+@step-item-finish-title-color: var(--td-step-item-finish-title-color, @text-color-primary);
+@step-item-finish-icon-color: var(--td-step-item-finish-icon-color, @brand-color);
+@step-item-finish-dot-border-color: var(--td-step-item-finish-dot-border-color, @brand-color);
+
+@step-item-error-circle-color: var(--td-step-item-error-circle-color, @error-color);
+@step-item-error-circle-bg: var(--td-step-item-error-circle-bg, @error-color-1);
+@step-item-error-title-color: var(--td-step-item-error-title-color, @error-color);
+@step-item-error-icon-color: var(--td-step-item-error-icon-color, @error-color);
+@step-item-error-dot-border-color: var(--td-step-item-error-dot-border-color, @error-color);
+
+@step-item-line-color: var(--td-step-item-line-color, @component-border);
+@step-item-finish-line-color: var(--td-step-item-finish-line-color, @brand-color);
+
+@step: ~'@{prefix}-step';
+@steps: ~'@{step}s';
+@item: ~'@{steps}-item';
+
+.color-generate() {
+  @status: default, process, finish, error;
+  each(@status, {
+    @bgVar: ~"step-item-@{value}-circle-bg";
+    @colorVar: ~"step-item-@{value}-circle-color";
+    @titleColorVar: ~"step-item-@{value}-title-color";
+    @iconColorVar: ~"step-item-@{value}-icon-color";
+    @dotBorderColorVar: ~"step-item-@{value}-dot-border-color";
+
+    &__circle--@{value} {
+      color: @@colorVar;
+      background-color: @@bgVar;
+    }
+
+    &__title--@{value} {
+      color: @@titleColorVar;
+    }
+
+    &__icon--@{value} {
+      color: @@iconColorVar;
+    }
+
+    &__dot--@{value} {
+      border-color: @@dotBorderColorVar;
+      background-color: @@dotBorderColorVar;
+    }
+  });
+}
+
+.@{item} {
+  flex: 1;
+  vertical-align: top;
+  position: relative;
+  display: flex;
+
+  .color-generate();
+
+  &--horizontal {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &--vertical {
+    margin-bottom: 16rpx;
+  }
+
+  &__anchor {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--vertical {
+      width: @step-item-circle-size;
+      height: @step-item-circle-size;
+    }
+  }
+
+  &__circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: @step-item-circle-size;
+    height: @step-item-circle-size;
+    text-align: center;
+    border-radius: 50%;
+    font-size: @step-item-circle-font-size;
+  }
+
+  &__icon {
+    z-index: 1;
+    vertical-align: top;
+    font-size: @font-size-base;
+    position: relative;
+  }
+
+  &__dot {
+    width: @step-item-dot-size;
+    height: @step-item-dot-size;
+    border-radius: 50%;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+  }
+
+  &__content {
+    text-align: center;
+
+    &--horizontal {
+      max-width: 80px;
+      margin-top: 16rpx;
+    }
+
+    &--vertical {
+      margin-left: 16rpx;
+      flex: 1;
+      padding-bottom: 32rpx;
+    }
+
+    &--vertical&--last {
+      padding-bottom: 0;
+    }
+  }
+
+  &__title {
+    position: relative;
+    line-height: @step-item-circle-size;
+    font-size: @font-size-base;
+
+    &--process {
+      font-weight: 600;
+    }
+
+    &--vertical {
+      text-align: left;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  &__title + &__description:not(:empty) {
+    margin-top: 8rpx;
+  }
+
+  &__description {
+    color: @step-item-description-color;
+    line-height: 40rpx;
+    font-size: @font-size-s;
+
+    &--vertical {
+      text-align: left;
+    }
+  }
+
+  &__extra {
+    &:not(:empty) {
+      margin-top: 16rpx;
+    }
+  }
+
+  &__line {
+    background-color: @step-item-line-color;
+    content: '';
+    display: block;
+    position: absolute;
+
+    &--horizontal {
+      height: 1px;
+      transform: translateY(-50%);
+      width: calc(100% - 32rpx - @step-item-circle-size);
+      top: calc(@step-item-circle-size / 2 + 1px);
+      left: calc(50% + @step-item-circle-size / 2 + 16rpx);
+    }
+
+    &--horizontal&--dot {
+      top: calc(@step-item-dot-size / 2);
+    }
+
+    &--finish,
+    &--reverse&--process {
+      background-color: @step-item-finish-line-color;
+    }
+
+    &--vertical {
+      height: calc(100% - 32rpx - @step-item-circle-size);
+      width: 1px;
+      transform: translateX(-50%);
+      left: calc(@step-item-circle-size / 2);
+      top: calc(@step-item-circle-size + 16rpx);
+    }
+
+    &--vertical&--dot {
+      top: @step-item-circle-size;
+      height: calc(100% - @step-item-circle-size);
+    }
+  }
+}
+
+:host {
+  flex: 1;
+  vertical-align: top;
+  position: relative;
+  align-self: flex-start;
+  width: inherit;
+}
diff --git a/packages/tdesign-uniapp/components/step-item/step-item.vue b/packages/tdesign-uniapp/components/step-item/step-item.vue
new file mode 100644
index 000000000..1ea19dcf0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/step-item/step-item.vue
@@ -0,0 +1,175 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [layout, ['readonly', readonly]]) + ' ' + tClass"
+    :aria-role="ariaRole || readonly ? 'option' : 'button'"
+    :aria-label="ariaLabel || getAriaLabel(index, title, content)"
+    :aria-current="curStatus == 'process' ? 'step' : ''"
+    @click="onTap"
+  >
+    <view
+      :class="_.cls(classPrefix + '__anchor', [layout])"
+      :aria-hidden="true"
+    >
+      <view
+        v-if="isDot"
+        :class="_.cls(classPrefix + '__dot', [curStatus])"
+      />
+      <view
+        v-else-if="icon"
+        :class="_.cls(classPrefix + '__icon', [curStatus])"
+      >
+        <slot
+          v-if="icon == 'slot'"
+          name="icon"
+        />
+        <t-icon
+          v-else
+          :name="icon"
+          size="44rpx"
+        />
+      </view>
+      <view
+        v-else
+        :class="_.cls(classPrefix + '__circle', [curStatus])"
+      >
+        <t-icon
+          v-if="curStatus == 'finish'"
+          name="check"
+        />
+        <t-icon
+          v-else-if="curStatus == 'error'"
+          name="close"
+        />
+        <block v-else>
+          {{ index + 1 }}
+        </block>
+      </view>
+    </view>
+    <view
+      :class="_.cls(classPrefix + '__content', [layout, ['last', isLastChild]]) + ' ' + tClassContent"
+      :aria-hidden="true"
+    >
+      <slot />
+      <view :class="_.cls(classPrefix + '__title', [curStatus, layout]) + ' ' + tClassContent">
+        <block v-if="title">
+          {{ title }}
+        </block>
+        <slot name="title" />
+        <slot
+          v-if="layout === 'vertical'"
+          name="title-right"
+        />
+      </view>
+      <view :class="_.cls(classPrefix + '__description', [layout]) + ' ' + tClassDescription">
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+      </view>
+      <view :class="_.cls(classPrefix + '__extra', [layout]) + ' ' + tClassExtra">
+        <slot name="extra" />
+      </view>
+    </view>
+    <view
+      v-if="!isLastChild"
+      :class="_.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])"
+      :aria-hidden="true"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { getAriaLabel } from './computed.js';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-steps-item`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-title`,
+    `${prefix}-class-description`,
+    `${prefix}-class-extra`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.StepItem, {
+    indexKey: 'tIndex',
+  })],
+  props: {
+    ...props,
+  },
+  components: {
+    tIcon,
+  },
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      index: 0,
+      isDot: false,
+      curStatus: '',
+      layout: 'vertical',
+      isLastChild: false,
+      sequence: 'positive',
+      _,
+
+      readonly: false,
+      theme: '',
+    };
+  },
+  watch: {
+    status(value) {
+      const { curStatus } = this;
+
+      if (curStatus === '' || value === curStatus) return;
+
+      this.curStatus = value;
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    getAriaLabel,
+    updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
+      let curStatus = this.status;
+
+      if (curStatus === 'default') {
+        if (index < Number(current)) {
+          curStatus = 'finish';
+        } else if (index === Number(current)) {
+          curStatus = currentStatus;
+        }
+      }
+
+      this.curStatus = curStatus;
+      this.index = index;
+      this.layout = layout;
+      this.theme = theme;
+      this.sequence = sequence;
+      this.isDot = theme === 'dot';
+      this.isLastChild = index === (sequence === 'positive' ? items.length - 1 : 0);
+    },
+
+    onTap() {
+      this[RELATION_MAP.StepItem].handleClick(this.index);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './step-item.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/step-item/type.ts b/packages/tdesign-uniapp/components/step-item/type.ts
new file mode 100644
index 000000000..60ddbd87d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/step-item/type.ts
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdStepItemProps {
+  /**
+   * 步骤描述
+   * @default ''
+   */
+  content?: string;
+  /**
+   * 步骤条自定义内容
+   */
+  extra?: string;
+  /**
+   * 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标
+   */
+  icon?: string;
+  /**
+   * 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态
+   * @default default
+   */
+  status?: StepStatus;
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+}
+
+export type StepStatus = 'default' | 'process' | 'finish' | 'error';
diff --git a/packages/tdesign-uniapp/components/stepper/README.en-US.md b/packages/tdesign-uniapp/components/stepper/README.en-US.md
new file mode 100644
index 000000000..b9e24085e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/README.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### Stepper Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disable-input | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+input-width | Number | - | \- | N
+integer | Boolean | true | \- | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+step | Number | 1 | \- | N
+theme | String | normal | stylish。options: normal/filled/outline | N
+value | String / Number | 0 | `v-model:value` is supported | N
+default-value | String / Number | 0 | uncontrolled property | N
+
+### Stepper Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { type: string \| number })` | \-
+change | `(context: { value: string \| number })` | \-
+focus | `(context: { value: string \| number })` | \-
+overlimit | `(context: {type: 'minus' \| 'plus'})` | \-
+
+### Stepper External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-input | \-
+t-class-minus | \-
+t-class-plus | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-stepper-input-disabled-bg | @bg-color-component-disabled | - 
+--td-stepper-input-disabled-color | @text-color-disabled | - 
+--td-stepper-border-color | @component-border | - 
+--td-stepper-border-radius | @radius-small | - 
+--td-stepper-input-color | @text-color-primary | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/stepper/README.md b/packages/tdesign-uniapp/components/stepper/README.md
new file mode 100644
index 000000000..03e0e411a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/README.md
@@ -0,0 +1,90 @@
+---
+title: Stepper 步进器
+description: 用于数量的增减。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TStepper from 'tdesign-uniapp/stepper/stepper.vue';
+```
+
+### 组件类型
+
+基础步进器
+
+{{ base }}
+
+### 组件状态
+
+最大最小状态
+
+{{ min-max }}
+
+禁用状态
+
+{{ status }}
+
+### 组件样式
+
+步进器样式
+
+{{ theme }}
+
+步进器尺寸
+
+{{ size }}
+
+
+## API
+
+### Stepper Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disable-input | Boolean | false | 禁用输入框 | N
+disabled | Boolean | undefined | 禁用全部操作 | N
+input-width | Number | - | 输入框宽度，默认单位 `px` | N
+integer | Boolean | true | 是否整型 | N
+max | Number | 100 | 最大值 | N
+min | Number | 0 | 最小值 | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+step | Number | 1 | 步长 | N
+theme | String | normal | 组件风格。可选项：normal/filled/outline | N
+value | String / Number | 0 | 值。支持语法糖 `v-model:value` | N
+default-value | String / Number | 0 | 值。非受控属性 | N
+
+### Stepper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { type: string \| number })` | 输入框失去焦点时触发
+change | `(context: { value: string \| number })` | 数值发生变更时触发
+focus | `(context: { value: string \| number })` | 输入框聚焦时触发
+overlimit | `(context: {type: 'minus' \| 'plus'})` | 数值超出限制时触发
+
+### Stepper External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-input | 输入框样式类
+t-class-minus | 左侧递减号样式类
+t-class-plus | 右侧递增号样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-stepper-input-disabled-bg | @bg-color-component-disabled | - |
+| --td-stepper-input-disabled-color | @text-color-disabled | - |
+| --td-stepper-border-color | @component-border | - |
+| --td-stepper-border-radius | @radius-small | - |
+| --td-stepper-input-color | @text-color-primary | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/stepper/_example/base/index.vue b/packages/tdesign-uniapp/components/stepper/_example/base/index.vue
new file mode 100644
index 000000000..256ff8841
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/base/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <view class="stepper-example">
+    <t-stepper
+      default-value="3"
+      theme="filled"
+    />
+  </view>
+</template>
+
+<script>
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+export default {
+  components: {
+    tStepper,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.stepper-example {
+    padding: 32rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/min-max/index.vue b/packages/tdesign-uniapp/components/stepper/_example/min-max/index.vue
new file mode 100644
index 000000000..2a7119385
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/min-max/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <view class="stepper-example">
+    <t-stepper
+      default-value="0"
+      theme="filled"
+    />
+    <t-stepper
+      default-value="99"
+      theme="filled"
+      :min="5"
+      :max="999"
+    />
+    <t-stepper
+      default-value="999"
+      theme="filled"
+      :max="999"
+    />
+  </view>
+</template>
+
+<script>
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+export default {
+  components: {
+    tStepper,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.stepper-example {
+    padding: 32rpx;
+    display: flex;
+    background-color: var(--bg-color-demo);
+    justify-content: space-between;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/size/index.vue b/packages/tdesign-uniapp/components/stepper/_example/size/index.vue
new file mode 100644
index 000000000..747385718
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/size/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="stepper-example">
+    <t-stepper
+      :value="value"
+      size="large"
+      theme="filled"
+      @change="handleChange"
+    />
+    <t-stepper
+      default-value="3"
+      :max="99"
+      theme="filled"
+    />
+    <t-stepper
+      default-value="3"
+      size="small"
+      theme="filled"
+    />
+  </view>
+</template>
+
+<script>
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+export default {
+  components: {
+    tStepper,
+  },
+  data() {
+    return {
+      value: 3,
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      const { value } = e;
+      console.log(value);
+      this.value = value;
+    },
+  },
+};
+</script>
+<style>
+.stepper-example {
+    padding: 32rpx;
+    display: flex;
+    background-color: var(--bg-color-demo);
+    justify-content: space-between;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.less b/packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.vue b/packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.vue
new file mode 100644
index 000000000..c2afe9c00
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/skyline/stepper.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="Stepper"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Stepper 步进器
+        </view>
+        <view class="demo-desc">
+          用于数量的增减。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础步进器"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="最大最小状态"
+        >
+          <min-max />
+        </t-demo>
+        <t-demo desc="禁用状态">
+          <status />
+        </t-demo>
+        <t-demo
+          title="03 组件样式"
+          desc="步进器样式"
+        >
+          <theme />
+        </t-demo>
+        <t-demo desc="步进器尺寸">
+          <size />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import minMax from '../min-max/index.vue';
+import status from '../status/index.vue';
+import theme from '../theme/index.vue';
+import size from '../size/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    minMax,
+    status,
+    theme,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './stepper.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/status/index.vue b/packages/tdesign-uniapp/components/stepper/_example/status/index.vue
new file mode 100644
index 000000000..1daa551f8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/status/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <view class="stepper-example">
+    <t-stepper
+      disabled
+      theme="filled"
+    />
+  </view>
+</template>
+
+<script>
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+export default {
+  components: {
+    tStepper,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.stepper-example {
+    padding: 32rpx;
+    background-color: var(--bg-color-demo);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/stepper.less b/packages/tdesign-uniapp/components/stepper/_example/stepper.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/stepper/_example/stepper.vue b/packages/tdesign-uniapp/components/stepper/_example/stepper.vue
new file mode 100644
index 000000000..eee3f1194
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/stepper.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Stepper"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Stepper 步进器"
+        desc="用于数量的增减。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础步进器"
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="最大最小状态"
+      >
+        <min-max />
+      </t-demo>
+      <t-demo desc="禁用状态">
+        <status />
+      </t-demo>
+      <t-demo
+        title="03 组件样式"
+        desc="步进器样式"
+      >
+        <theme />
+      </t-demo>
+      <t-demo desc="步进器尺寸">
+        <size />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import minMax from './min-max/index.vue';
+import status from './status/index.vue';
+import theme from './theme/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    minMax,
+    status,
+    theme,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './stepper.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/_example/theme/index.vue b/packages/tdesign-uniapp/components/stepper/_example/theme/index.vue
new file mode 100644
index 000000000..e037e0c6f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/_example/theme/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <view class="stepper-example">
+    <t-stepper
+      default-value="3"
+      theme="filled"
+    />
+    <t-stepper
+      default-value="3"
+      theme="outline"
+    />
+    <t-stepper default-value="3" />
+  </view>
+</template>
+
+<script>
+import tStepper from 'tdesign-uniapp/stepper/stepper.vue';
+export default {
+  components: {
+    tStepper,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.stepper-example {
+    padding: 32rpx;
+    display: flex;
+    background-color: var(--bg-color-demo);
+    justify-content: space-between;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/props.ts b/packages/tdesign-uniapp/components/stepper/props.ts
new file mode 100644
index 000000000..4fad714ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/props.ts
@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStepperProps } from './type';
+export default {
+  /** 禁用输入框 */
+  disableInput: Boolean,
+  /** 禁用全部操作 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 输入框宽度，默认单位 `px` */
+  inputWidth: {
+    type: Number,
+  },
+  /** 是否整型 */
+  integer: {
+    type: Boolean,
+    default: true,
+  },
+  /** 最大值 */
+  max: {
+    type: Number,
+    default: 100,
+  },
+  /** 最小值 */
+  min: {
+    type: Number,
+    default: 0,
+  },
+  /** 组件尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdStepperProps['size'],
+    validator(val: TdStepperProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 步长 */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /** 组件风格 */
+  theme: {
+    type: String,
+    default: 'normal' as TdStepperProps['theme'],
+    validator(val: TdStepperProps['theme']): boolean {
+      if (!val) return true;
+      return ['normal', 'filled', 'outline'].includes(val);
+    },
+  },
+  /** 值 */
+  value: {
+    type: [String, Number],
+    default: 0 as TdStepperProps['value'],
+  },
+  /** 值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+    default: 0 as TdStepperProps['defaultValue'],
+  },
+  /** 输入框失去焦点时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 数值发生变更时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入框聚焦时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 数值超出限制时触发 */
+  onOverlimit: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/stepper/stepper.less b/packages/tdesign-uniapp/components/stepper/stepper.less
new file mode 100644
index 000000000..4f484fb8c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/stepper.less
@@ -0,0 +1,159 @@
+@import '../common/style/base.less';
+
+@stepper-small-height: 40rpx;
+@stepper-medium-height: 48rpx;
+@stepper-large-height: 56rpx;
+@stepper-small-font-size: 20rpx;
+@stepper-medium-font-size: 24rpx;
+@stepper-large-font-size: 32rpx;
+@stepper-small-icon-size: 24rpx;
+@stepper-medium-icon-size: 32rpx;
+@stepper-large-icon-size: 40rpx;
+@stepper-small-input-width: 68rpx;
+@stepper-medium-input-width: 76rpx;
+@stepper-large-input-width: 90rpx;
+@stepper-border-width: 2rpx;
+
+@stepper-border-radius: var(--td-stepper-border-radius, @radius-small); // outline/filled 主题下的圆角大小
+@stepper-border-color: var(--td-stepper-border-color, @component-border); // outline/filled 主题下的圆角颜色
+@stepper-input-color: var(--td-stepper-input-color, @text-color-primary); // 输入框文本/图标颜色
+@stepper-input-disabled-color: var(
+  --td-stepper-input-disabled-color,
+  @text-color-disabled
+); // 禁用态输入框文本/图标颜色
+@stepper-input-disabled-bg: var(
+  --td-stepper-input-disabled-bg,
+  @bg-color-component-disabled
+); // 禁用态输入框文本/图标颜色
+
+@stepper: ~'@{prefix}-stepper';
+
+.@{stepper} {
+  display: flex;
+  align-items: center;
+  color: @stepper-input-color;
+
+  &__input {
+    margin: 0 8rpx;
+    text-align: center;
+    vertical-align: top;
+    height: inherit;
+    min-height: inherit;
+
+    background: inherit;
+    padding: 0;
+  }
+
+  &__minus,
+  &__plus {
+    padding: 8rpx;
+    box-sizing: border-box;
+  }
+
+  &__input,
+  &__minus-icon,
+  &__plus-icon {
+    color: inherit;
+  }
+
+  &__input--normal,
+  &__input--filled,
+  &__input--outline {
+    height: inherit;
+    box-sizing: border-box;
+  }
+
+  &--small {
+    height: @stepper-small-height;
+    font-size: @stepper-small-font-size;
+  }
+
+  &--medium {
+    height: @stepper-medium-height;
+    font-size: @stepper-medium-font-size;
+  }
+
+  &--large {
+    height: @stepper-large-height;
+    font-size: @stepper-large-font-size;
+  }
+
+  &__input--small {
+    width: @stepper-small-input-width;
+  }
+
+  &__input--medium {
+    height: @stepper-medium-height;
+    width: @stepper-medium-input-width;
+  }
+
+  &__input--large {
+    width: @stepper-large-input-width;
+  }
+
+  &__icon--small {
+    width: @stepper-small-height;
+    height: @stepper-small-height;
+    font-size: @stepper-small-icon-size;
+  }
+
+  &__icon--medium {
+    width: @stepper-medium-height;
+    height: @stepper-medium-height;
+    font-size: @stepper-medium-icon-size;
+  }
+
+  &__icon--large {
+    width: @stepper-large-height;
+    height: @stepper-large-height;
+    font-size: @stepper-large-icon-size;
+  }
+
+  &__minus--outline,
+  &__plus--outline {
+    border: @stepper-border-width solid @stepper-border-color;
+  }
+
+  &__input--outline {
+    border: none;
+    border-top: @stepper-border-width solid @stepper-border-color;
+    border-bottom: @stepper-border-width solid @stepper-border-color;
+  }
+
+  &__minus--outline,
+  &__minus--filled {
+    border-radius: 0;
+    border-top-left-radius: @stepper-border-radius;
+    border-bottom-left-radius: @stepper-border-radius;
+  }
+  &__plus--outline,
+  &__plus--filled {
+    border-radius: 0;
+    border-top-right-radius: @stepper-border-radius;
+    border-bottom-right-radius: @stepper-border-radius;
+  }
+
+  &__minus--filled,
+  &__plus--filled {
+    background-color: @bg-color-secondarycontainer;
+  }
+
+  &__input--filled {
+    background-color: @bg-color-secondarycontainer;
+    margin: 0 8rpx;
+
+    .@{stepper}__input {
+      margin: 0;
+    }
+  }
+
+  &--normal-disabled {
+    color: @stepper-input-disabled-color;
+  }
+
+  &--filled-disabled,
+  &--outline-disabled {
+    color: @stepper-input-disabled-color;
+    background-color: @stepper-input-disabled-bg;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/stepper/stepper.vue b/packages/tdesign-uniapp/components/stepper/stepper.vue
new file mode 100644
index 000000000..d8bb0f874
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/stepper.vue
@@ -0,0 +1,223 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + classPrefix + '--' + size + ' ' + tClass"
+  >
+    <view
+      :class="
+        classPrefix +'__minus ' +
+          classPrefix + '__minus--' + theme +
+          ' ' + classPrefix + '__icon--' + size +
+          ' ' + (disabled || disableMinus || currentValue <= min ? classPrefix + '--' + theme + '-disabled' : '') +
+          ' ' + tClassMinus
+      "
+      :aria-label="'减少' + step"
+      aria-role="button"
+      :aria-disabled="disabled || disableMinus || currentValue <= min"
+      @click.stop.prevent="minusValue"
+    >
+      <t-icon name="remove" />
+    </view>
+    <view :class="classPrefix + '__input--' + theme + ' ' + (disabled || disableInput ? classPrefix + '--' + theme + '-disabled' : '')">
+      <input
+        :style="inputWidth ? 'width:' + inputWidth + 'px;' : ''"
+        :class="classPrefix + '__input ' + classPrefix + '__input--' + size + ' ' + tClassInput"
+        :disabled="disabled || disableInput"
+        :type="integer ? 'number' : 'digit'"
+        :value="currentValue"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      >
+    </view>
+    <view
+      :class="
+        classPrefix + '__plus ' +
+          classPrefix + '__plus--' + theme +
+          ' ' + classPrefix + '__icon--' + size +
+          ' ' + (disabled || disablePlus || currentValue >= max ? classPrefix + '--' + theme + '-disabled' : '') +
+          ' ' + tClassPlus
+      "
+      :aria-label="'增加' + step"
+      aria-role="button"
+      :aria-disabled="disabled || disablePlus || currentValue >= max"
+      @click.stop.prevent="plusValue"
+    >
+      <t-icon name="add" />
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-stepper`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-input`,
+    `${prefix}-class-minus`,
+    `${prefix}-class-plus`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      currentValue: 0,
+      classPrefix: name,
+      prefix,
+      _,
+      disablePlus: false,
+      disableMinus: false,
+    };
+  },
+  watch: {
+    value(v) {
+      this.preValue = Number(v);
+      this.updateCurrentValue(this.format(this.preValue));
+    },
+  },
+  mounted() {
+    const { value, defaultValue, min } = this;
+    const cur = coalesce(value, defaultValue);
+
+    this.updateCurrentValue(cur ? Number(cur) : min);
+  },
+  methods: {
+    isDisabled(type) {
+      const { min, max, disabled } = this;
+      const { currentValue } = this;
+      if (disabled) {
+        return true;
+      }
+      if (type === 'minus' && currentValue <= min) {
+        return true;
+      }
+      if (type === 'plus' && currentValue >= max) {
+        return true;
+      }
+      return false;
+    },
+
+    getLen(num) {
+      const numStr = num.toString();
+      return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+    },
+
+    add(a, b) {
+      const maxLen = Math.max(this.getLen(a), this.getLen(b));
+      const base = 10 ** maxLen;
+      return Math.round(a * base + b * base) / base;
+    },
+
+    format(value) {
+      const { min, max, step } = this;
+      const len = Math.max(this.getLen(step), this.getLen(value));
+      // 超过边界取边界值
+      return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
+    },
+
+    setValue(value) {
+      const newValue = Number(this.format(value));
+
+      this.updateCurrentValue(newValue);
+
+      if (this.preValue === newValue) return;
+
+      this.preValue = newValue;
+      this._trigger('change', { value: newValue });
+    },
+
+    minusValue() {
+      if (this.isDisabled('minus')) {
+        this.$emit('overlimit', { type: 'minus' });
+        return false;
+      }
+      const { currentValue, step } = this;
+      this.setValue(this.add(currentValue, -step));
+    },
+
+    plusValue() {
+      if (this.isDisabled('plus')) {
+        this.$emit('overlimit', { type: 'plus' });
+        return false;
+      }
+      const { currentValue, step } = this;
+      this.setValue(this.add(currentValue, step));
+    },
+
+    filterIllegalChar(value) {
+      const v = String(value).replace(/[^0-9.]/g, '');
+      const indexOfDot = v.indexOf('.');
+      if (this.integer && indexOfDot !== -1) {
+        return v.split('.')[0];
+      }
+
+      if (!this.integer && indexOfDot !== -1 && indexOfDot !== v.lastIndexOf('.')) {
+        return v.split('.', 2).join('.');
+      }
+
+      return v;
+    },
+
+    updateCurrentValue(value) {
+      this.currentValue = value;
+    },
+
+    handleFocus(e) {
+      const { value } = e.detail;
+
+      this.$emit('focus', { value });
+    },
+
+    handleInput(e) {
+      const { value } = e.detail;
+      // 允许输入空值
+      if (value === '') {
+        return;
+      }
+
+      const formatted = this.filterIllegalChar(value);
+      const newValue = this.format(formatted);
+
+      this.updateCurrentValue(this.integer ? newValue : formatted);
+
+      if (this.integer || /\.\d+/.test(formatted)) {
+        this.setValue(formatted);
+      }
+    },
+
+    handleBlur(e) {
+      const { value: rawValue } = e.detail;
+      const value = this.format(rawValue);
+
+      this.setValue(value);
+      this.$emit('blur', { value });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './stepper.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/stepper/type.ts b/packages/tdesign-uniapp/components/stepper/type.ts
new file mode 100644
index 000000000..599a8210c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/stepper/type.ts
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { SizeEnum } from '../common/common';
+
+export interface TdStepperProps {
+  /**
+   * 禁用输入框
+   * @default false
+   */
+  disableInput?: boolean;
+  /**
+   * 禁用全部操作
+   */
+  disabled?: boolean;
+  /**
+   * 输入框宽度，默认单位 `px`
+   */
+  inputWidth?: number;
+  /**
+   * 是否整型
+   * @default true
+   */
+  integer?: boolean;
+  /**
+   * 最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 最小值
+   * @default 0
+   */
+  min?: number;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 步长
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 组件风格
+   * @default normal
+   */
+  theme?: 'normal' | 'filled' | 'outline';
+  /**
+   * 值
+   * @default 0
+   */
+  value?: string | number;
+  /**
+   * 值，非受控属性
+   * @default 0
+   */
+  defaultValue?: string | number;
+  /**
+   * 输入框失去焦点时触发
+   */
+  onBlur?: (context: { type: string | number }) => void;
+  /**
+   * 数值发生变更时触发
+   */
+  onChange?: (context: { value: string | number }) => void;
+  /**
+   * 输入框聚焦时触发
+   */
+  onFocus?: (context: { value: string | number }) => void;
+  /**
+   * 数值超出限制时触发
+   */
+  onOverlimit?: (context: { type: 'minus' | 'plus' }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/steps/README.en-US.md b/packages/tdesign-uniapp/components/steps/README.en-US.md
new file mode 100644
index 000000000..acc54b29d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/README.en-US.md
@@ -0,0 +1,99 @@
+:: BASE_DOC ::
+
+## API
+
+### Steps Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+current | String / Number | - | `v-model:current` is supported | N
+default-current | String / Number | - | uncontrolled property | N
+current-status | String | process | options: default/process/finish/error | N
+layout | String | horizontal | options: horizontal/vertical | N
+readonly | Boolean | undefined | \- | N
+sequence | String | positive | options: positive/reverse | N
+theme | String | default | options: default/dot | N
+
+### Steps Events
+
+name | params | description
+-- | -- | --
+change | `(context: {current: string \| number, previous: string \| number})` | \-
+
+### Steps Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Steps External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### StepItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+content | String | '' | \- | N
+extra | String | - | \- | N
+icon | String | - | \- | N
+status | String | default | options: default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/step-item/type.ts) | N
+sub-step-items | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/step-item/type.ts) | N
+title | String | '' | \- | N
+
+### StepItem Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+extra | \-
+icon | \-
+title | \-
+
+### StepItem External Classes
+
+className | Description
+-- | --
+t-class | class name of root node
+t-class-content | \-
+t-class-description | \-
+t-class-extra | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-step-item-circle-font-size | 28rpx | - 
+--td-step-item-circle-size | 44rpx | - 
+--td-step-item-default-circle-bg | @bg-color-secondarycontainer | - 
+--td-step-item-default-circle-color | @text-color-placeholder | - 
+--td-step-item-default-dot-border-color | @component-border | - 
+--td-step-item-default-icon-color | @text-color-placeholder | - 
+--td-step-item-default-title-color | @text-color-placeholder | - 
+--td-step-item-description-color | @text-color-placeholder | - 
+--td-step-item-dot-size | 16rpx | - 
+--td-step-item-error-circle-bg | @error-color-1 | - 
+--td-step-item-error-circle-color | @error-color | - 
+--td-step-item-error-dot-border-color | @error-color | - 
+--td-step-item-error-icon-color | @error-color | - 
+--td-step-item-error-title-color | @error-color | - 
+--td-step-item-finish-circle-bg | @brand-color-light | - 
+--td-step-item-finish-circle-color | @brand-color | - 
+--td-step-item-finish-dot-border-color | @brand-color | - 
+--td-step-item-finish-icon-color | @brand-color | - 
+--td-step-item-finish-line-color | @brand-color | - 
+--td-step-item-finish-title-color | @text-color-primary | - 
+--td-step-item-line-color | @component-border | - 
+--td-step-item-process-circle-bg | @brand-color | - 
+--td-step-item-process-circle-color | @text-color-anti | - 
+--td-step-item-process-dot-border-color | @brand-color | - 
+--td-step-item-process-icon-color | @brand-color | - 
+--td-step-item-process-title-color | @brand-color | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/steps/README.md b/packages/tdesign-uniapp/components/steps/README.md
new file mode 100644
index 000000000..76c65a25b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/README.md
@@ -0,0 +1,157 @@
+---
+title: Steps 步骤条
+description: 用于任务步骤展示或任务进度展示。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSteps from 'tdesign-uniapp/steps/steps.vue';
+import TStepsItem from 'tdesign-uniapp/steps-item/steps-item.vue';
+```
+
+## 代码演示
+
+步骤条，方向可以横向和纵向，可以自定义步骤条显示内容以及是否可写
+
+<a href="https://developers.weixin.qq.com/s/3H9EuimQ7JS0" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
+
+<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
+<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
+</blockquote>
+
+### 组件类型
+
+#### 水平步骤条
+
+支持三种类型：序号、图标、简略
+
+{{ horizontal }}
+
+#### 垂直步骤条
+
+支持三种类型：序号、图标、简略
+
+{{ vertical }}
+
+### 组件状态
+
+#### 选项卡状态
+
+共支持 4 种状态：未完成（default）、已完成（finish）、进行中（process）、错误（error）
+
+{{ status }}
+
+### 特殊类型
+
+通过已有特性，改造出两种常见类型：
+
+- 垂直自定义（在 Cascader 中使用）
+- 纯展示步骤条
+
+可以参考以下代码实现
+
+{{ special }}
+
+## API
+
+### Steps Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model:current` | N
+default-current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
+current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
+layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
+readonly | Boolean | undefined | 只读状态 | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
+theme | String | default | 步骤条风格。可选项：default/dot | N
+
+### Steps Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: {current: string \| number, previous: string \| number})` | 当前步骤发生变化时触发
+
+### Steps Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义步骤条内容
+
+### Steps External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### StepItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+content | String | '' | 步骤描述 | N
+extra | String | - | 步骤条自定义内容 | N
+icon | String | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
+status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/step-item/type.ts) | N
+sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/step-item/type.ts) | N
+title | String | '' | 标题 | N
+
+### StepItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义步骤内容
+content | 自定义 `content` 显示内容
+extra | 自定义 `extra` 显示内容
+icon | 自定义 `icon` 显示内容
+title | 自定义 `title` 显示内容
+
+### StepItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-description | 描述样式类
+t-class-extra | 额外样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-step-item-circle-font-size | 28rpx | - |
+| --td-step-item-circle-size | 44rpx | - |
+| --td-step-item-default-circle-bg | @bg-color-secondarycontainer | - |
+| --td-step-item-default-circle-color | @text-color-placeholder | - |
+| --td-step-item-default-dot-border-color | @component-border | - |
+| --td-step-item-default-icon-color | @text-color-placeholder | - |
+| --td-step-item-default-title-color | @text-color-placeholder | - |
+| --td-step-item-description-color | @text-color-placeholder | - |
+| --td-step-item-dot-size | 16rpx | - |
+| --td-step-item-error-circle-bg | @error-color-1 | - |
+| --td-step-item-error-circle-color | @error-color | - |
+| --td-step-item-error-dot-border-color | @error-color | - |
+| --td-step-item-error-icon-color | @error-color | - |
+| --td-step-item-error-title-color | @error-color | - |
+| --td-step-item-finish-circle-bg | @brand-color-light | - |
+| --td-step-item-finish-circle-color | @brand-color | - |
+| --td-step-item-finish-dot-border-color | @brand-color | - |
+| --td-step-item-finish-icon-color | @brand-color | - |
+| --td-step-item-finish-line-color | @brand-color | - |
+| --td-step-item-finish-title-color | @text-color-primary | - |
+| --td-step-item-line-color | @component-border | - |
+| --td-step-item-process-circle-bg | @brand-color | - |
+| --td-step-item-process-circle-color | @text-color-anti | - |
+| --td-step-item-process-dot-border-color | @brand-color | - |
+| --td-step-item-process-icon-color | @brand-color | - |
+| --td-step-item-process-title-color | @brand-color | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/steps/_example/horizontal/index.vue b/packages/tdesign-uniapp/components/steps/_example/horizontal/index.vue
new file mode 100644
index 000000000..42c35c174
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/horizontal/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      水平带序号步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        :current="first"
+        @change="onFirstChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(first, index)"
+          content="辅助信息"
+        />
+      </t-steps>
+    </view>
+
+    <view class="demo-desc">
+      水平带图标步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        :current="second"
+        @change="onSecondChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(second, index)"
+          content="辅助信息"
+          icon="cart"
+        />
+      </t-steps>
+    </view>
+
+    <view class="demo-desc">
+      水平简略步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        theme="dot"
+        :current="third"
+        @change="onThirdChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(third, index)"
+          content="辅助信息"
+        />
+      </t-steps>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSteps from 'tdesign-uniapp/steps/steps.vue';
+import tStepItem from 'tdesign-uniapp/step-item/step-item.vue';
+
+
+export default {
+  components: {
+    tSteps,
+    tStepItem,
+  },
+  data() {
+    return {
+      first: 1,
+      second: 1,
+      third: 1,
+    };
+  },
+  created() {},
+  methods: {
+    getText(value, curr) {
+      if (value > curr) return '已完成';
+      if (value == curr) return '当前步骤';
+      return '未完成';
+    },
+    onFirstChange(e) {
+      this.first = e.current;
+    },
+    onSecondChange(e) {
+      this.second = e.current;
+    },
+    onThirdChange(e) {
+      this.third = e.current;
+    },
+  },
+};
+</script>
+<style>
+.block {
+    background-color: var(--bg-color-demo);
+    padding: 32rpx 0;
+    margin: 32rpx 0 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/_example/skyline/steps.less b/packages/tdesign-uniapp/components/steps/_example/skyline/steps.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/steps/_example/skyline/steps.vue b/packages/tdesign-uniapp/components/steps/_example/skyline/steps.vue
new file mode 100644
index 000000000..2134ba1cf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/skyline/steps.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <steps />
+  </view>
+</template>
+
+<script lang="ts">
+
+import steps from '../steps.vue';
+export default {
+  components: {
+    steps,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './steps.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/_example/special/index.vue b/packages/tdesign-uniapp/components/steps/_example/special/index.vue
new file mode 100644
index 000000000..0b9f63cb0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/special/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      垂直自定义步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        theme="dot"
+        :current="count - 1"
+        @change="onCascader"
+      >
+        <t-step-item
+          v-for="(item, index) in count"
+          :key="index"
+          :title="getText(count - 1, index)"
+        >
+          <template
+            #title-right
+          >
+            <t-icon
+              name="chevron-right"
+              size="44rpx"
+              color="rgba(0, 0, 0, .4)"
+            />
+          </template>
+        </t-step-item>
+      </t-steps>
+
+      <TButton
+        :style="`margin-top: 32rpx; display: block`"
+        block
+        @click="toNext"
+      >
+        下一步
+      </TButton>
+    </view>
+
+    <view class="demo-desc">
+      纯展示步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        readonly
+        theme="dot"
+        :current="5"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          title="步骤展示"
+          content="可自定义此处内容"
+        />
+      </t-steps>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSteps from 'tdesign-uniapp/steps/steps.vue';
+import tStepItem from 'tdesign-uniapp/step-item/step-item.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+export default {
+  components: {
+    tSteps,
+    tStepItem,
+    tIcon,
+    TButton,
+  },
+  data() {
+    return {
+      count: 4,
+    };
+  },
+  created() {},
+  methods: {
+    getText(value, curr) {
+      if (value > curr) return '已完成步骤';
+      if (value == curr) return '当前步骤';
+      return '未完成步骤';
+    },
+    toNext() {
+      this.count = this.count + 1;
+    },
+    onCascader(e) {
+      const { current } = e;
+      this.count = current + 1;
+    },
+  },
+};
+</script>
+<style>
+.block {
+    background-color: var(--bg-color-demo);
+    padding: 32rpx;
+    margin: 32rpx 0 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/_example/status/index.vue b/packages/tdesign-uniapp/components/steps/_example/status/index.vue
new file mode 100644
index 000000000..2bcd69839
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/status/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <view>
+    <view class="block">
+      <t-steps
+        :current="first"
+        current-status="error"
+        @change="onFirstChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(first, index)"
+          content="辅助信息"
+        />
+      </t-steps>
+    </view>
+
+    <view class="block">
+      <t-steps
+        :current="second"
+        current-status="error"
+        @change="onSecondChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(second, index)"
+          content="辅助信息"
+          icon="cart"
+        />
+      </t-steps>
+    </view>
+
+    <view class="block">
+      <t-steps
+        theme="dot"
+        :current="third"
+        current-status="error"
+        @change="onThirdChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(third, index)"
+          content="辅助信息"
+        />
+      </t-steps>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSteps from 'tdesign-uniapp/steps/steps.vue';
+import tStepItem from 'tdesign-uniapp/step-item/step-item.vue';
+
+
+export default {
+  components: {
+    tSteps,
+    tStepItem,
+  },
+  data() {
+    return {
+      first: 1,
+      second: 1,
+      third: 1,
+    };
+  },
+  created() {},
+  methods: {
+    getText(value, curr) {
+      if (value > curr) return '已完成';
+      if (value == curr) return '错误步骤';
+      return '未完成';
+    },
+    onFirstChange(e) {
+      this.first = e.current;
+    },
+    onSecondChange(e) {
+      this.second = e.current;
+    },
+    onThirdChange(e) {
+      this.third = e.current;
+    },
+  },
+};
+</script>
+<style>
+.block {
+    background-color: var(--bg-color-demo);
+    padding: 32rpx 0;
+    margin: 32rpx 0 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/_example/steps.less b/packages/tdesign-uniapp/components/steps/_example/steps.less
new file mode 100644
index 000000000..a5ea06425
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/steps.less
@@ -0,0 +1,12 @@
+.demo-steps {
+    padding-top: 80rpx;
+}
+
+.group {
+    padding-bottom: 80rpx;
+    margin-top: 32rpx;
+
+    & + .demo-section__desc {
+        margin-top: 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/steps/_example/steps.vue b/packages/tdesign-uniapp/components/steps/_example/steps.vue
new file mode 100644
index 000000000..f928abc7a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/steps.vue
@@ -0,0 +1,63 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Steps"
+      left-arrow
+      :capsule="false"
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Steps 步骤条"
+          desc="用于任务步骤展示或任务进度展示。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo title="01 组件类型" />
+
+        <horizontal />
+
+        <vertical />
+
+        <t-demo
+          title="02 组件状态"
+          desc="选项卡状态"
+        />
+
+        <status />
+
+        <t-demo title="03 特殊类型" />
+
+        <special />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import horizontal from './horizontal/index.vue';
+import vertical from './vertical/index.vue';
+import special from './special/index.vue';
+import status from './status/index.vue';
+export default {
+  components: {
+    horizontal,
+    vertical,
+    special,
+    status,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './steps.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/_example/vertical/index.vue b/packages/tdesign-uniapp/components/steps/_example/vertical/index.vue
new file mode 100644
index 000000000..24fe0c9cb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/_example/vertical/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      垂直带序号步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        :current="first"
+        @change="onFirstChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(first, index)"
+          content="可自定义此处内容"
+        />
+      </t-steps>
+    </view>
+
+    <view class="demo-desc">
+      垂直带图标步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        :current="second"
+        @change="onSecondChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(second, index)"
+          content="可自定义此处内容"
+          icon="cart"
+        />
+      </t-steps>
+    </view>
+
+    <view class="demo-desc">
+      垂直简略步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        theme="dot"
+        :current="third"
+        @change="onThirdChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 4"
+          :key="index"
+          :title="getText(third, index)"
+          content="可自定义此处内容"
+        />
+      </t-steps>
+    </view>
+
+    <view class="demo-desc">
+      垂直带自定义内容步骤条
+    </view>
+
+    <view class="block">
+      <t-steps
+        layout="vertical"
+        :current="third"
+        @change="onThirdChange"
+      >
+        <t-step-item
+          v-for="(item, index) in 3"
+          :key="index"
+          :title="getText(third, index)"
+          content="可自定义此处内容"
+        >
+          <template
+            #extra
+          >
+            <view
+              v-if="index == 1"
+            >
+              <image
+                src="https://tdesign.gtimg.com/mobile/demos/steps1.png"
+                alt="图标"
+                style="width: 100%"
+                mode="widthFix"
+              />
+            </view>
+          </template>
+        </t-step-item>
+      </t-steps>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSteps from 'tdesign-uniapp/steps/steps.vue';
+import tStepItem from 'tdesign-uniapp/step-item/step-item.vue';
+
+
+export default {
+  components: {
+    tSteps,
+    tStepItem,
+  },
+  data() {
+    return {
+      first: 1,
+      second: 1,
+      third: 1,
+    };
+  },
+  created() {},
+  methods: {
+    getText(value, curr) {
+      if (value > curr) return '已完成步骤';
+      if (value == curr) return '当前步骤';
+      return '未完成步骤';
+    },
+    onFirstChange(e) {
+      this.first = e.current;
+    },
+    onSecondChange(e) {
+      this.second = e.current;
+    },
+    onThirdChange(e) {
+      this.third = e.current;
+    },
+  },
+};
+</script>
+<style>
+.block {
+    background-color: var(--bg-color-demo);
+    padding: 32rpx;
+    margin: 32rpx 0 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/props.ts b/packages/tdesign-uniapp/components/steps/props.ts
new file mode 100644
index 000000000..a9a0e04df
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/props.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStepsProps } from './type';
+export default {
+  /** 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 */
+  current: {
+    type: [String, Number],
+  },
+  /** 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成，非受控属性 */
+  defaultCurrent: {
+    type: [String, Number],
+  },
+  /** 用于控制 current 指向的步骤条的状态 */
+  currentStatus: {
+    type: String,
+    default: 'process' as TdStepsProps['currentStatus'],
+    validator(val: TdStepsProps['currentStatus']): boolean {
+      if (!val) return true;
+      return ['default', 'process', 'finish', 'error'].includes(val);
+    },
+  },
+  /** 步骤条方向，有两种：横向和纵向 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdStepsProps['layout'],
+    validator(val: TdStepsProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 步骤条顺序 */
+  sequence: {
+    type: String,
+    default: 'positive' as TdStepsProps['sequence'],
+    validator(val: TdStepsProps['sequence']): boolean {
+      if (!val) return true;
+      return ['positive', 'reverse'].includes(val);
+    },
+  },
+  /** 步骤条风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdStepsProps['theme'],
+    validator(val: TdStepsProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'dot'].includes(val);
+    },
+  },
+  /** 当前步骤发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/steps/steps.less b/packages/tdesign-uniapp/components/steps/steps.less
new file mode 100644
index 000000000..985631ef9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/steps.less
@@ -0,0 +1,32 @@
+@import '../common/style/base.less';
+
+@step: ~'@{prefix}-step';
+@steps: ~'@{step}s';
+@item: ~'@{step}-item';
+
+:host {
+  display: flex;
+}
+
+.@{step} {
+  &--vertical {
+    padding-right: 32rpx;
+  }
+}
+
+.@{steps} {
+  display: flex;
+  width: 100%;
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--vertical&--reverse {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/steps/steps.vue b/packages/tdesign-uniapp/components/steps/steps.vue
new file mode 100644
index 000000000..f1892db33
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/steps.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [layout, ['readonly', readonly], sequence]) + ' ' + tClass"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-steps`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'current',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.StepItem)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+
+      dataCurrent: this.current,
+    };
+  },
+  watch: {
+    current: {
+      handler(v) {
+        this.dataCurrent = v;
+      },
+      immediate: true,
+    },
+    dataCurrent: {
+      handler() {
+        this.updateChildren();
+      },
+      immediate: true,
+    },
+    theme: 'updateChildren',
+    sequence: 'updateChildren',
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked(child) {
+      this.updateChildren();
+
+      const { readonly } = this;
+
+      child.readonly = readonly;
+    },
+    innerAfterUnlinked() {
+      this.updateLastChid();
+    },
+    updateChildren() {
+      const items = this.children;
+      const {
+        dataCurrent, currentStatus, theme, layout, sequence,
+      } = this;
+
+      items?.forEach((item, index) => {
+        item.updateStatus({
+          index,
+          items,
+
+          current: dataCurrent,
+          currentStatus,
+          theme,
+          layout,
+          sequence,
+        });
+      });
+    },
+    updateLastChid() {
+      const items = this.children;
+
+      items.forEach((child, index) => child.isLastChild = index === items.length - 1);
+    },
+    handleClick(index) {
+      if (!this.readonly) {
+        const preIndex = this.dataCurrent;
+        this._trigger('change', {
+          previous: preIndex,
+          current: index,
+        });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './steps.css';
+
+/* #ifndef MP-WEIXIN */
+/* 适配 qq 小程序等 */
+:deep(t-step-item) {
+  flex: 1;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/steps/type.ts b/packages/tdesign-uniapp/components/steps/type.ts
new file mode 100644
index 000000000..e16fab135
--- /dev/null
+++ b/packages/tdesign-uniapp/components/steps/type.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdStepsProps {
+  /**
+   * 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成
+   */
+  current?: string | number;
+  /**
+   * 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成，非受控属性
+   */
+  defaultCurrent?: string | number;
+  /**
+   * 用于控制 current 指向的步骤条的状态
+   * @default process
+   */
+  currentStatus?: 'default' | 'process' | 'finish' | 'error';
+  /**
+   * 步骤条方向，有两种：横向和纵向
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 步骤条顺序
+   * @default positive
+   */
+  sequence?: 'positive' | 'reverse';
+  /**
+   * 步骤条风格
+   * @default default
+   */
+  theme?: 'default' | 'dot';
+  /**
+   * 当前步骤发生变化时触发
+   */
+  onChange?: (context: { current: string | number; previous: string | number }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/sticky/README.en-US.md b/packages/tdesign-uniapp/components/sticky/README.en-US.md
new file mode 100644
index 000000000..329b8789c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/README.en-US.md
@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### Sticky Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+container | Function | - | \- | N
+disabled | Boolean | false | \- | N
+offset-top | String / Number | 0 | \- | N
+z-index | Number | 99 | \- | N
+
+### Sticky Events
+
+name | params | description
+-- | -- | --
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | \-
+
+### Sticky Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Sticky External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
diff --git a/packages/tdesign-uniapp/components/sticky/README.md b/packages/tdesign-uniapp/components/sticky/README.md
new file mode 100644
index 000000000..8c203d45e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/README.md
@@ -0,0 +1,66 @@
+---
+title: Sticky 吸顶
+description: 用于常驻页面顶部的信息、操作展示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSticky from 'tdesign-uniapp/sticky/sticky.vue';
+```
+
+## 代码演示
+
+将内容包裹在 `Sticky` 组件内
+
+
+### 基础吸顶
+
+{{ base }}
+
+
+### 吸顶距离
+
+{{ offset }}
+
+### 指定容器
+
+{{ container }}
+
+
+
+## API
+
+### Sticky Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置 | N
+disabled | Boolean | false | 是否禁用组件 | N
+offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
+z-index | Number | 99 | 吸顶时的 z-index | N
+
+### Sticky Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+
+### Sticky Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Sticky External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
diff --git a/packages/tdesign-uniapp/components/sticky/_example/base/index.vue b/packages/tdesign-uniapp/components/sticky/_example/base/index.vue
new file mode 100644
index 000000000..32b14a042
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/_example/base/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <view>
+    <t-sticky :offset-top="navbarHeight">
+      <t-button
+        size="large"
+        theme="primary"
+        t-class="external-class"
+        custom-style="width: 104px"
+      >
+        基础吸顶
+      </t-button>
+    </t-sticky>
+  </view>
+</template>
+
+<script>
+import tSticky from 'tdesign-uniapp/sticky/sticky.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSticky,
+    tButton,
+  },
+  props: {
+    navbarHeight: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+/* :deep(.external-class) {
+    width: 208rpx;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/sticky/_example/container/index.vue b/packages/tdesign-uniapp/components/sticky/_example/container/index.vue
new file mode 100644
index 000000000..e26899174
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/_example/container/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <view class="wrapper">
+    <t-sticky
+      :container="container"
+      :offset-top="navbarHeight"
+    >
+      <t-button
+        size="large"
+        t-class="external-class green-button"
+        hover-class="hover-class "
+        custom-style="width: 104px;margin-left: 256px;"
+      >
+        指定容器
+      </t-button>
+    </t-sticky>
+  </view>
+</template>
+
+<script>
+import tSticky from 'tdesign-uniapp/sticky/sticky.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSticky,
+    tButton,
+  },
+  props: {
+    navbarHeight: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      container: null,
+    };
+  },
+  mounted() {
+    // 处理小程序 ready 生命周期
+    this.$nextTick(() => this.ready());
+  },
+  created() {},
+  methods: {
+    ready() {
+      this.container = () => uni.createSelectorQuery().in(this)
+        .select('.wrapper');
+    },
+  },
+};
+</script>
+<style scoped>
+.wrapper {
+    width: 100%;
+    height: 150px;
+    background-color: var(--bg-color-demo-secondary);
+}
+
+/* :deep(.external-class) {
+    width: 208rpx;
+    margin-left: 512rpx;
+} */
+
+.green-button {
+    z-index: 0 !important;
+    background-color: #008858 !important;
+    color: #fff !important;
+}
+
+.hover-class::after {
+    z-index: -1;
+    background-color: #006c45;
+    border-color: #006c45;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/sticky/_example/offset/index.vue b/packages/tdesign-uniapp/components/sticky/_example/offset/index.vue
new file mode 100644
index 000000000..31f33ba8e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/_example/offset/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <view>
+    <t-sticky :offset-top="40 + navbarHeight">
+      <t-button
+        size="large"
+        theme="danger"
+        t-class="external-class"
+        custom-style="width: 104px;margin-left: 136px;"
+      >
+        吸顶距离
+      </t-button>
+    </t-sticky>
+  </view>
+</template>
+
+<script>
+import tSticky from 'tdesign-uniapp/sticky/sticky.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSticky,
+    tButton,
+  },
+  props: {
+    navbarHeight: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+/* :deep(.external-class) {
+    width: 208rpx;
+    margin-left: 272rpx;
+} */
+</style>
diff --git a/packages/tdesign-uniapp/components/sticky/_example/sticky.less b/packages/tdesign-uniapp/components/sticky/_example/sticky.less
new file mode 100644
index 000000000..0ce83f0fb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/_example/sticky.less
@@ -0,0 +1,3 @@
+.tdesign-demo-sticky-base {
+    height: 3000rpx;
+}
diff --git a/packages/tdesign-uniapp/components/sticky/_example/sticky.vue b/packages/tdesign-uniapp/components/sticky/_example/sticky.vue
new file mode 100644
index 000000000..811e51c3a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/_example/sticky.vue
@@ -0,0 +1,81 @@
+<template>
+  <view>
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        title="Sticky"
+        left-arrow
+      />
+    <!-- #endif -->
+    </view>
+    <view class="demo tdesign-demo-sticky-base">
+      <t-demo-header
+        title="Sticky 吸顶"
+        desc="用于常驻页面顶部的信息、操作展示。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 类型"
+        desc="基础吸顶"
+        padding
+      >
+        <BaseDemo :navbar-height="navbarHeight" />
+      </t-demo>
+      <t-demo
+        title=""
+        desc="吸顶距离"
+      >
+        <offset :navbar-height="navbarHeight" />
+      </t-demo>
+      <t-demo
+        title=""
+        desc="指定容器"
+      >
+        <container :navbar-height="navbarHeight" />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import offset from './offset/index.vue';
+import container from './container/index.vue';
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+
+export default {
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+  components: {
+    BaseDemo,
+    offset,
+    container,
+  },
+  data() {
+    return {
+      navbarHeight: 0,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const { height = 0 } = res[0] || {};
+        this.navbarHeight = height;
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import './sticky.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/sticky/props.ts b/packages/tdesign-uniapp/components/sticky/props.ts
new file mode 100644
index 000000000..c39e03f0c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/props.ts
@@ -0,0 +1,30 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStickyProps } from './type';
+export default {
+  /** 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置 */
+  container: {
+    type: Function,
+  },
+  /** 是否禁用组件 */
+  disabled: Boolean,
+  /** 吸顶时与顶部的距离，单位`px` */
+  offsetTop: {
+    type: [String, Number],
+    default: 0 as TdStickyProps['offsetTop'],
+  },
+  /** 吸顶时的 z-index */
+  zIndex: {
+    type: Number,
+    default: 99,
+  },
+  /** 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/sticky/sticky.less b/packages/tdesign-uniapp/components/sticky/sticky.less
new file mode 100644
index 000000000..2dd9716cc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/sticky.less
@@ -0,0 +1,5 @@
+@import '../common/style/base.less';
+
+.@{prefix}-sticky {
+  position: relative;
+}
diff --git a/packages/tdesign-uniapp/components/sticky/sticky.vue b/packages/tdesign-uniapp/components/sticky/sticky.vue
new file mode 100644
index 000000000..8a7eca7ba
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/sticky.vue
@@ -0,0 +1,144 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style(['z-index:' + zIndex, containerStyle, customStyle])"
+  >
+    <view
+      :class="classPrefix + '__content ' + tClassContent"
+      :style="_._style(['z-index:' + zIndex, contentStyle])"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import pageScrollMixin from '../mixins/page-scroll';
+import { getRect, nextTick } from '../common/utils';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-sticky`;
+const ContainerClass = `.${name}`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [pageScrollMixin()],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      containerStyle: '',
+      contentStyle: '',
+      _,
+    };
+  },
+  watch: {
+    offsetTop: 'onScroll',
+    disabled: 'onScroll',
+    container: 'onScroll',
+  },
+  mounted() {
+    this.onScroll();
+  },
+  methods: {
+    onScroll(event) {
+      const { scrollTop } = event || {};
+      const { container, offsetTop, disabled } = this;
+
+      if (disabled) {
+        this.setDataAfterDiff({
+          isFixed: false,
+          transform: 0,
+        });
+        return;
+      }
+
+      this.scrollTop = scrollTop || this.scrollTop;
+
+      if (typeof container === 'function') {
+        Promise.all([getRect(this, ContainerClass), this.getContainerRect()]).then(([root, container]) => {
+          if (!root || !container) return;
+          if (offsetTop + root.height > container.height + container.top) {
+            this.setDataAfterDiff({
+              isFixed: false,
+              transform: container.height - root.height,
+            });
+          } else if (offsetTop >= root.top) {
+            this.setDataAfterDiff({
+              isFixed: true,
+              height: root.height,
+              transform: 0,
+            });
+          } else {
+            this.setDataAfterDiff({ isFixed: false, transform: 0 });
+          }
+        });
+
+        return;
+      }
+
+      getRect(this, ContainerClass).then((root) => {
+        if (!root) return;
+        if (offsetTop >= root.top) {
+          this.setDataAfterDiff({ isFixed: true, height: root.height });
+          this.transform = 0;
+        } else {
+          this.setDataAfterDiff({ isFixed: false });
+        }
+      });
+    },
+
+    setDataAfterDiff(data) {
+      const { offsetTop } = this;
+      const { containerStyle: prevContainerStyle, contentStyle: prevContentStyle } = this;
+      const { isFixed, height, transform } = data;
+      nextTick().then(() => {
+        let containerStyle = '';
+        let contentStyle = '';
+
+        if (isFixed) {
+          containerStyle += `height:${height}px;`;
+          contentStyle += `position:fixed;top:${offsetTop}px;left:0;right:0;`;
+        }
+        if (transform) {
+          const translate = `translate3d(0, ${transform}px, 0)`;
+          contentStyle += `-webkit-transform:${translate};transform:${translate};`;
+        }
+
+        if (prevContainerStyle !== containerStyle || prevContentStyle !== contentStyle) {
+          this.containerStyle = containerStyle;
+          this.contentStyle = contentStyle;
+        }
+
+        this.$emit('scroll', {
+          scrollTop: this.scrollTop,
+          isFixed,
+        });
+      });
+    },
+
+    getContainerRect() {
+      const nodesRef = this.container();
+      return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './sticky.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/sticky/type.ts b/packages/tdesign-uniapp/components/sticky/type.ts
new file mode 100644
index 000000000..f9fe8b8a1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/sticky/type.ts
@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdStickyProps {
+  /**
+   * 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置
+   */
+  container?: function;
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 吸顶时与顶部的距离，单位`px`
+   * @default 0
+   */
+  offsetTop?: string | number;
+  /**
+   * 吸顶时的 z-index
+   * @default 99
+   */
+  zIndex?: number;
+  /**
+   * 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+   */
+  onScroll?: (context: { scrollTop: number; isFixed: boolean }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/swipe-cell/README.en-US.md b/packages/tdesign-uniapp/components/swipe-cell/README.en-US.md
new file mode 100644
index 000000000..b91ec1db1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/README.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+
+### SwipeCell Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disabled | Boolean | - | \- | N
+left | Array | - | Typescript：`Array<SwipeActionItem>` | N
+opened | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
+right | Array | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+name | params | description
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+dragend | \- | \-
+dragstart | \- | \-
+
+### SwipeCell Slots
+
+name | Description
+-- | --
+\- | \-
+left | \-
+right | \-
diff --git a/packages/tdesign-uniapp/components/swipe-cell/README.md b/packages/tdesign-uniapp/components/swipe-cell/README.md
new file mode 100644
index 000000000..550a21e97
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/README.md
@@ -0,0 +1,66 @@
+---
+title: SwipeCell 滑动操作
+description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSwipeCell from 'tdesign-uniapp/swipe-cell/swipe-cell.vue';
+```
+
+### 组件类型
+
+左滑单操作
+
+{{ left }}
+
+右滑单操作
+
+{{ right }}
+
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
+## FAQ
+### `SwipeCell` 组件在真机上无法滑动？
+移除全局配置项: "componentFramework": "glass-easel"，详情见： [issue 2524](https://github.com/Tencent/tdesign-miniprogram/issues/2524)。如需使用 `skyline render`，建议页面级粒度开启。
+
+## API
+
+### SwipeCell Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disabled | Boolean | - | 是否禁用滑动 | N
+left | Array | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
+opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N
+right | Array | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+dragend | \- | 滑动结束事件
+dragstart | \- | 滑动开始事件
+
+### SwipeCell Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+left | 左侧滑动操作项
+right | 右侧滑动操作项
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/double/index.vue b/packages/tdesign-uniapp/components/swipe-cell/_example/double/index.vue
new file mode 100644
index 000000000..9dc93c92b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/double/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <view>
+    <t-swipe-cell
+      :right="right"
+      :left="left"
+      @click="onActionClick"
+    >
+      <t-cell
+        title="左右滑操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+    </t-swipe-cell>
+  </view>
+</template>
+
+<script>
+import tSwipeCell from 'tdesign-uniapp/swipe-cell/swipe-cell.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+export default {
+  components: {
+    tSwipeCell,
+    tCell,
+  },
+  data() {
+    return {
+      right: [
+        {
+          text: '删除',
+          className: 'btn delete-btn',
+        },
+      ],
+      left: [
+        {
+          text: '选择',
+          className: 'btn favor-btn',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onActionClick(detail) {
+      uni.showToast({
+        title: `你点击了${detail.text}`,
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+<style>
+.btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 120rpx;
+    height: 100%;
+    color: white;
+}
+
+.favor-btn {
+    background-color: var(--td-brand-color, #0052d9);
+}
+
+.delete-btn {
+    background-color: #e34d59;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/icon/index.vue b/packages/tdesign-uniapp/components/swipe-cell/_example/icon/index.vue
new file mode 100644
index 000000000..780f61779
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/icon/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <view>
+    <t-swipe-cell
+      :right="right"
+      @click="onActionClick"
+    >
+      <t-cell
+        title="左滑-带图标文本双操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+    </t-swipe-cell>
+
+    <t-swipe-cell :right="rightIcon">
+      <t-cell
+        title="左滑-仅带图标双操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+    </t-swipe-cell>
+
+    <t-swipe-cell>
+      <t-cell
+        :bordered="false"
+        title="左滑大列表-仅带图标双操作"
+        description="一段很长很长的内容文字"
+        note="辅助信息"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+      />
+      <template
+        #right
+      >
+        <view
+          class="btn-wrapper"
+        >
+          <view
+            class="btn edit-btn column"
+            @click="onEdit"
+          >
+            <t-icon
+              t-class="padding-bottom"
+              name="edit"
+              size="32rpx"
+            />
+            编辑
+          </view>
+          <view
+            class="btn delete-btn column"
+            @click="onDelete"
+          >
+            <t-icon
+              t-class="padding-bottom"
+              name="delete"
+              size="32rpx"
+            />
+            删除
+          </view>
+        </view>
+      </template>
+    </t-swipe-cell>
+  </view>
+</template>
+
+<script>
+import tSwipeCell from 'tdesign-uniapp/swipe-cell/swipe-cell.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tIcon from 'tdesign-uniapp/icon/icon.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSwipeCell,
+    tCell,
+    tIcon,
+  },
+  data() {
+    return {
+      right: [
+        {
+          text: '编辑',
+          icon: {
+            name: 'edit',
+            size: 16,
+          },
+          className: 'btn edit-btn',
+        },
+        {
+          text: '删除',
+          icon: {
+            name: 'delete',
+            size: 16,
+          },
+          className: 'btn delete-btn',
+        },
+      ],
+      rightIcon: [
+        {
+          icon: 'edit',
+          className: 'btn edit-btn',
+        },
+        {
+          icon: 'delete',
+          className: 'btn delete-btn',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onActionClick(detail) {
+      uni.showToast({
+        title: `你点击了${detail.text}`,
+        icon: 'none',
+      });
+    },
+    onDelete() {
+      uni.showToast({
+        title: '你点击了删除',
+        icon: 'none',
+      });
+    },
+    onEdit() {
+      uni.showToast({
+        title: '你点击了编辑',
+        icon: 'none',
+      });
+    },
+    onFavor() {
+      uni.showToast({
+        title: '你点击了收藏',
+        icon: 'none',
+      });
+    },
+    onChoice() {
+      uni.showToast({
+        title: '你点击了选择',
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+<style>
+.btn-wrapper {
+    height: 100%;
+}
+
+.btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 120rpx;
+    height: 100%;
+    color: white;
+}
+
+.delete-btn {
+    background-color: #e34d59;
+}
+
+.edit-btn {
+    background-color: #ed7b2f;
+}
+
+.favor-btn {
+    background-color: var(--td-brand-color, #0052d9);
+}
+
+.column {
+    flex-direction: column;
+}
+
+.padding-bottom {
+    padding-bottom: 8rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/left/index.vue b/packages/tdesign-uniapp/components/swipe-cell/_example/left/index.vue
new file mode 100644
index 000000000..b27db839b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/left/index.vue
@@ -0,0 +1,164 @@
+<template>
+  <view>
+    <t-swipe-cell>
+      <t-cell
+        title="左滑单操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+      <template #right>
+        <view
+          class="btn delete-btn"
+          @click="onDelete"
+        >
+          删除
+        </view>
+      </template>
+    </t-swipe-cell>
+
+    <t-swipe-cell>
+      <t-cell
+        :bordered="false"
+        title="左滑大列表"
+        description="一段很长很长的内容文字"
+        note="辅助信息"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+      />
+      <template #right>
+        <view
+          class="btn delete-btn"
+          @click="onDelete"
+        >
+          删除
+        </view>
+      </template>
+    </t-swipe-cell>
+
+    <t-swipe-cell
+      :right="right"
+      @click="onActionClick"
+    >
+      <t-cell
+        title="左滑双操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+    </t-swipe-cell>
+
+    <t-swipe-cell>
+      <t-cell
+        title="左滑多操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+      <template #right>
+        <view
+          class="btn-wrapper"
+        >
+          <view
+            class="btn favor-btn"
+            @click="onFavor"
+          >
+            收藏
+          </view>
+          <view
+            class="btn edit-btn"
+            @click="onEdit"
+          >
+            编辑
+          </view>
+          <view
+            class="btn delete-btn"
+            @click="onDelete"
+          >
+            删除
+          </view>
+        </view>
+      </template>
+    </t-swipe-cell>
+  </view>
+</template>
+
+<script>
+import tSwipeCell from 'tdesign-uniapp/swipe-cell/swipe-cell.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+export default {
+  components: {
+    tSwipeCell,
+    tCell,
+  },
+  data() {
+    return {
+      right: [
+        {
+          text: '编辑',
+          className: 'btn edit-btn',
+        },
+        {
+          text: '删除',
+          className: 'btn delete-btn',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onActionClick(action) {
+      uni.showToast({
+        title: `你点击了${action.text}`,
+        icon: 'none',
+      });
+    },
+    onDelete() {
+      uni.showToast({
+        title: '你点击了删除',
+        icon: 'none',
+      });
+    },
+    onEdit() {
+      uni.showToast({
+        title: '你点击了编辑',
+        icon: 'none',
+      });
+    },
+    onFavor() {
+      uni.showToast({
+        title: '你点击了收藏',
+        icon: 'none',
+      });
+    },
+    onChoice() {
+      uni.showToast({
+        title: '你点击了选择',
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+<style>
+.btn-wrapper {
+    height: 100%;
+}
+
+.btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 120rpx;
+    height: 100%;
+    color: white;
+}
+
+.delete-btn {
+    background-color: #e34d59;
+}
+
+.edit-btn {
+    background-color: #ed7b2f;
+}
+
+.favor-btn {
+    background-color: var(--td-brand-color, #0052d9);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/right/index.vue b/packages/tdesign-uniapp/components/swipe-cell/_example/right/index.vue
new file mode 100644
index 000000000..7b0ae91e7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/right/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <t-swipe-cell>
+      <t-cell
+        title="右滑单操作"
+        note="辅助信息"
+        :bordered="false"
+      />
+      <template
+        #left
+      >
+        <view
+          class="btn favor-btn"
+          @click="onChoice"
+        >
+          选择
+        </view>
+      </template>
+    </t-swipe-cell>
+  </view>
+</template>
+
+<script>
+import tSwipeCell from 'tdesign-uniapp/swipe-cell/swipe-cell.vue';
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+export default {
+  components: {
+    tSwipeCell,
+    tCell,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onChoice() {
+      uni.showToast({
+        title: '你点击了选择',
+        icon: 'none',
+      });
+    },
+  },
+};
+</script>
+<style>
+.btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 120rpx;
+    height: 100%;
+    color: white;
+}
+
+.favor-btn {
+    background-color: var(--td-brand-color, #0052d9);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.less b/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.less
new file mode 100644
index 000000000..0f4969c7b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.less
@@ -0,0 +1,20 @@
+:deep(.btn) {
+    height: 100%;
+    color: white;
+}
+
+:deep(.delete-btn) {
+    background-color: #e34d59;
+}
+
+:deep(.edit-btn) {
+    background-color: #ed7b2f;
+}
+
+:deep(.favor-btn) {
+    background-color: #0052d9;
+}
+
+:deep(.t-swipe-cell) {
+    margin-bottom: 32rpx;
+}
diff --git a/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.vue b/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.vue
new file mode 100644
index 000000000..d04f84a95
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/_example/swipe-cell.vue
@@ -0,0 +1,55 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="SwipeCell"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="SwipeCell 滑动操作"
+        desc="用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="左滑单操作"
+      >
+        <left />
+      </t-demo>
+      <t-demo desc="右滑单操作">
+        <right />
+      </t-demo>
+      <t-demo desc="左右滑操作">
+        <double />
+      </t-demo>
+      <t-demo desc="带图标的滑动操作">
+        <iconDemo />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import left from './left/index.vue';
+import right from './right/index.vue';
+import double from './double/index.vue';
+import iconDemo from './icon/index.vue';
+export default {
+  components: {
+    left,
+    right,
+    double,
+    iconDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './swipe-cell.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/computed.js b/packages/tdesign-uniapp/components/swipe-cell/computed.js
new file mode 100644
index 000000000..6aeebe2b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/computed.js
@@ -0,0 +1,186 @@
+import _ from '../common/utils.wxs';
+
+const THRESHOLD = 0.3;
+const MIN_DISTANCE = 10;
+let owner;
+let state;
+
+function getState(context) {
+  owner = context;
+  state = {
+    ...(state || {}),
+  };
+  state.leftWidth = context.leftWidth || 0;
+  state.rightWidth = context.rightWidth || 0;
+  state.offset = state.offset || 0;
+  state.startOffset = state.startOffset || 0;
+  state.opened = context.dataOpened || false;
+}
+
+export function initRightWidth() {
+  getState(this);
+  // state.rightWidth = newVal;
+  initOpen(this);
+}
+
+export function initLeftWidth() {
+  getState(this);
+  // state.leftWidth = newVal;
+  initOpen(this);
+}
+
+function initOpen(context) {
+  getState(context);
+  if (state.opened.constructor === 'Boolean') {
+    // opened为boolean类型，判断默认打开
+    if (state.opened && state.rightWidth > 0) {
+      swipeMove(-state.rightWidth);
+    } else if (state.opened && state.leftWidth > 0) {
+      swipeMove(state.leftWidth);
+    }
+  }
+
+  if (Array.isArray(state.opened)) {
+    // opened为array类型，判断默认打开，同时设定左右action时优先打开右边
+    if (state.opened[1] && state.rightWidth > 0) {
+      swipeMove(-state.rightWidth);
+    } else if (state.opened[0] && state.leftWidth > 0) {
+      swipeMove(state.leftWidth);
+    }
+  }
+}
+
+const resetTouchStatus = function () {
+  state.direction = '';
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
+
+const touchMove = function (event) {
+  const touchPoint = event.touches[0];
+
+  state.deltaX = +touchPoint.clientX - state.startX;
+  state.deltaY = +touchPoint.clientY - state.startY;
+  state.offsetX = Math.abs(state.deltaX);
+  state.offsetY = Math.abs(state.deltaY);
+  state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+};
+
+const getDirection = function (x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+};
+
+const range = function (num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+
+function swipeMove(_offset) {
+  if (_offset === undefined) _offset = 0;
+  state.offset = range(_offset, -state.rightWidth, +state.leftWidth);
+  const transform = `translate3d(${state.offset}px, 0, 0)`;
+  // const transition = state.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+  const transition = 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+
+  owner.wrapperStyle = _._style({
+    '-webkit-transform': transform,
+    '-webkit-transition': transition,
+    transform,
+    transition,
+  });
+}
+
+const close = function () {
+  swipeMove(0);
+};
+
+export function onCloseChange() {
+  getState(this);
+  // if (newVal === oldVal) return;
+  if (this.closed) {
+    close();
+  }
+}
+
+export function onOpenedChange() {
+  getState(this);
+  // state.opened = newVal;
+  // if (newVal === oldVal) return;
+  if (!this.dataOpened) {
+    close();
+  }
+}
+
+const touchStart = function (event) {
+  resetTouchStatus();
+  state.startOffset = state.offset;
+  const touchPoint = event.touches[0];
+
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  owner.closeOther();
+};
+
+export function startDrag(event) {
+  this.catchMove();
+  getState(this);
+  touchStart(event);
+}
+
+export function onDrag(event) {
+  getState(this);
+  touchMove(event);
+
+  if (state.direction === 'vertical') {
+    this.onSkipMove();
+  }
+  if (state.direction !== 'horizontal') {
+    return;
+  }
+  if (!state.dragging) {
+    this.$emit('dragstart');
+  }
+  state.dragging = true;
+  swipeMove(state.startOffset + state.deltaX);
+  return false;
+}
+
+const open = function (position) {
+  const _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
+  owner.open({ position });
+  swipeMove(_offset);
+};
+
+export function endDrag() {
+  getState(this);
+  state.dragging = false;
+  // 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上）
+  if (
+    +state.rightWidth > 0
+    && -state.startOffset < +state.rightWidth
+    && -state.offset > +state.rightWidth * THRESHOLD
+  ) {
+    open('right');
+  } else if (
+    +state.leftWidth > 0
+    && state.startOffset < +state.leftWidth
+    && state.offset > +state.leftWidth * THRESHOLD
+  ) {
+    open('left');
+  } else {
+    // 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭）
+    if (state.startOffset !== state.offset) {
+      // this.dataOpened = false;
+      close();
+    }
+  }
+  this.$emit('dragend');
+}
+
diff --git a/packages/tdesign-uniapp/components/swipe-cell/props.ts b/packages/tdesign-uniapp/components/swipe-cell/props.ts
new file mode 100644
index 000000000..dda7b73ab
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/props.ts
@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwipeCellProps } from './type';
+export default {
+  /** 是否禁用滑动 */
+  disabled: Boolean,
+  /** 左侧滑动操作项。所有行为同 `right` */
+  left: {
+    type: Array,
+  },
+  /** 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态 */
+  opened: {
+    type: [Boolean, Array],
+    default: false as TdSwipeCellProps['opened'],
+  },
+  /** 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]` */
+  right: {
+    type: Array,
+  },
+  /** 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件） */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动结束事件 */
+  onDragend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动开始事件 */
+  onDragstart: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.less b/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.less
new file mode 100644
index 000000000..6efdaef13
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.less
@@ -0,0 +1,40 @@
+@import '../common/style/base.less';
+
+.@{prefix}-swipe-cell {
+  position: relative;
+  overflow: hidden;
+
+  &__left,
+  &__right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+
+  &__left {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &__right {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  &__content {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 @spacer-2;
+  }
+
+  :deep(&__icon) {
+    font-size: @font-size-xl;
+  }
+
+  :deep(&__icon) + &__text:not(:empty) {
+    margin-left: @spacer;
+    font-size: @font-size-base;
+    line-height: 44rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.vue b/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.vue
new file mode 100644
index 000000000..d12ba60b4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/swipe-cell.vue
@@ -0,0 +1,235 @@
+<template>
+  <view
+    :class="tClass + ' ' + classPrefix"
+    :style="_._style([customStyle])"
+    data-key="cell"
+    :opened="dataOpened"
+    :left-width="leftWidth"
+    :right-width="rightWidth"
+    @click="onTap"
+    @touchstart="parseEventDynamicCode($event, disabled || 'startDrag')"
+    @touchmove="parseEventDynamicCode($event, skipMove ? '' : disabled || 'onDrag')"
+    @touchend="parseEventDynamicCode($event, skipMove ? '' : disabled || 'endDrag')"
+    @touchcancel="parseEventDynamicCode($event, disabled || 'endDrag')"
+  >
+    <view
+      id="wrapper"
+      ref="wrapper"
+      :style="wrapperStyle"
+    >
+      <view
+        :class="classPrefix + '__left'"
+        data-key="left"
+      >
+        <slot name="left" />
+        <view
+          v-for="(item, index) in left"
+          :key="index"
+          :class="classPrefix + '__content ' + item.className"
+          :style="item.style"
+          :data-action="item"
+          @click.stop="onActionTap(item, 'left')"
+        >
+          <block
+            v-if="item.icon"
+          >
+            <t-icon
+              :custom-style="item.icon.style || ''"
+              :t-class="classPrefix + '__icon'"
+              :prefix="item.icon.prefix"
+              :name="item.icon?.name || item.icon"
+              :size="item.icon.size"
+              :color="item.icon.color"
+              :aria-hidden="!!item.icon.ariaHidden"
+              :aria-label="item.icon.ariaLabel"
+              :aria-role="item.icon.ariaRole"
+            />
+          </block>
+
+          <text
+            v-if="item.text"
+            :class="classPrefix + '__text'"
+          >
+            {{ item.text }}
+          </text>
+        </view>
+      </view>
+      <slot />
+      <view
+        :class="classPrefix + '__right'"
+        data-key="right"
+      >
+        <slot name="right" />
+        <view
+          v-for="(item, index) in right"
+          :key="index"
+          :class="classPrefix + '__content ' + item.className"
+          :style="item.style"
+          :data-action="item"
+          @click.stop="onActionTap(item, 'right')"
+        >
+          <block
+            v-if="item.icon"
+          >
+            <t-icon
+              :custom-style="item.icon.style || ''"
+              :t-class="classPrefix + '__icon'"
+              :prefix="item.icon?.prefix"
+              :name="item.icon?.name || item.icon"
+              :size="item.icon.size"
+              :color="item.icon.color"
+              :aria-hidden="!!item.icon.ariaHidden"
+              :aria-label="item.icon.ariaLabel"
+              :aria-role="item.icon.ariaRole"
+            />
+          </block>
+
+          <text
+            v-if="item.text"
+            :class="classPrefix + '__text'"
+          >
+            {{ item.text }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect } from '../common/utils';
+import { getObserver } from '../common/wechat';
+import {
+  initLeftWidth,
+  initRightWidth,
+  startDrag,
+  onDrag,
+  endDrag,
+  onCloseChange,
+  onOpenedChange,
+} from './computed';
+import _ from '../common/utils.wxs';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+let ARRAY = [];
+
+
+const name = `${prefix}-swipe-cell`;
+
+const ContainerClass = `.${name}`;
+
+const makeMethods = () => [
+  [initLeftWidth, 'initLeftWidth'],
+  [initRightWidth, 'initRightWidth'],
+  [startDrag, 'startDrag'],
+  [onDrag, 'onDrag'],
+  [endDrag, 'endDrag'],
+  [onCloseChange, 'onCloseChange'],
+  [onOpenedChange, 'onOpenedChange'],
+].reduce((acc, item) => {
+  const func = item[0];
+  return {
+    ...acc,
+    [item[1]](...args) {
+      func.call(this, ...args);
+    },
+  };
+}, {});
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['click', 'dragend', 'dragstart'],
+  data() {
+    return {
+      prefix,
+      wrapperStyle: '',
+      closed: true,
+      classPrefix: name,
+      skipMove: false,
+      dataOpened: null,
+      _,
+
+      leftWidth: 0,
+      rightWidth: 0,
+    };
+  },
+  watch: {
+    left: 'setSwipeWidth',
+    right: 'setSwipeWidth',
+    leftWidth: 'initLeftWidth',
+    rightWidth: 'initRightWidth',
+    dataOpened: 'onOpenedChange',
+  },
+  mounted() {
+    ARRAY.push(this);
+    this.setSwipeWidth();
+  },
+  beforeUnMount() {
+    ARRAY = ARRAY.filter(e => e !== this);
+  },
+  methods: {
+    ...makeMethods(),
+    parseEventDynamicCode,
+    setSwipeWidth() {
+      Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(([leftRect, rightRect]) => {
+        if (leftRect.width === 0 && rightRect.width === 0 && !this._hasObserved) {
+          this._hasObserved = true;
+          getObserver(this, `.${name}`).then(() => {
+            this.setSwipeWidth();
+          });
+        }
+        this.leftWidth = leftRect.width;
+        this.rightWidth = rightRect.width;
+      });
+    },
+
+    onSkipMove() {
+      this.skipMove = true;
+    },
+
+    catchMove() {
+      this.skipMove = false;
+    },
+
+    open() {
+      this.dataOpened = true;
+    },
+
+    close() {
+      this.dataOpened = false;
+    },
+
+    closeOther() {
+      ARRAY.filter(item => item !== this).forEach(item => item.close());
+    },
+
+    onTap() {
+      this.close();
+    },
+
+    onActionTap(action, source) {
+      this.$emit('click', action, source);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './swipe-cell.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/swipe-cell/type.ts b/packages/tdesign-uniapp/components/swipe-cell/type.ts
new file mode 100644
index 000000000..eba8df28d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swipe-cell/type.ts
@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSwipeCellProps {
+  /**
+   * 是否禁用滑动
+   */
+  disabled?: boolean;
+  /**
+   * 左侧滑动操作项。所有行为同 `right`
+   */
+  left?: Array<SwipeActionItem>;
+  /**
+   * 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态
+   * @default false
+   */
+  opened?: boolean | Array<boolean>;
+  /**
+   * 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`
+   */
+  right?: Array<SwipeActionItem>;
+  /**
+   * 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）
+   */
+  onClick?: (action: SwipeActionItem, source: SwipeSource) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragend?: () => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragstart?: () => void;
+}
+
+export interface SwipeActionItem {
+  text?: string;
+  icon?: string | object;
+  className?: string;
+  style?: string;
+  onClick?: () => void;
+  [key: string]: any;
+}
+
+export type SwipeSource = 'left' | 'right';
diff --git a/packages/tdesign-uniapp/components/swiper-nav/props.ts b/packages/tdesign-uniapp/components/swiper-nav/props.ts
new file mode 100644
index 000000000..1f178d46c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper-nav/props.ts
@@ -0,0 +1,49 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwiperNavProps } from './type';
+export default {
+  /** 当前轮播在哪一项（下标） */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 轮播滑动方向，包括横向滑动和纵向滑动两个方向 */
+  direction: {
+    type: String,
+    default: 'horizontal' as TdSwiperNavProps['direction'],
+    validator(val: TdSwiperNavProps['direction']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 小于这个数字不会显示导航器 */
+  minShowNum: {
+    type: Number,
+    default: 2,
+  },
+  /** 页码信息展示位置 */
+  paginationPosition: {
+    type: String,
+    default: 'bottom' as TdSwiperNavProps['paginationPosition'],
+    validator(val: TdSwiperNavProps['paginationPosition']): boolean {
+      if (!val) return true;
+      return ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right', 'left', 'right'].includes(val);
+    },
+  },
+  /** 是否显示两侧的控制按钮 */
+  showControls: Boolean,
+  /** 总共的项数 */
+  total: {
+    type: Number,
+    default: 0,
+  },
+  /** 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等 */
+  type: {
+    type: String,
+    default: 'dots',
+  },
+};
diff --git a/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.less b/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.less
new file mode 100644
index 000000000..7f40bd7d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.less
@@ -0,0 +1,173 @@
+@import '../common/style/base.less';
+
+// dot & dots-bar
+@swiper-nav-dot-color: var(--td-swiper-nav-dot-color, @font-white-2);
+@swiper-nav-dot-active-color: var(--td-swiper-nav-dot-active-color, @text-color-anti);
+@swiper-nav-dot-size: var(--td-swiper-nav-dot-size, 12rpx);
+@swiper-nav-dots-bar-active-width: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
+
+// fraction
+@swiper-nav-fraction-color: var(--td-swiper-nav-fraction-color, @text-color-anti);
+@swiper-nav-fraction-bg-color: var(--td-swiper-nav-fraction-bg-color, @font-gray-3);
+@swiper-nav-fraction-height: var(--td-swiper-nav-fraction-height, 48rpx);
+@swiper-nav-fraction-font-size: var(--td-swiper-nav-fraction-font-size, 24rpx);
+
+// button
+@swiper-nav-btn-color: var(--td-swiper-nav-btn-color, @text-color-anti);
+@swiper-nav-btn-bg-color: var(--td-swiper-nav-btn-bg-color, @font-gray-3);
+@swiper-nav-btn-size: var(--td-swiper-nav-btn-size, 48rpx);
+
+.@{prefix}-swiper-nav {
+  &__dots,
+  &__dots-bar {
+    display: flex;
+    flex-direction: row;
+
+    &-item {
+      width: @swiper-nav-dot-size;
+      height: @swiper-nav-dot-size;
+      background: @swiper-nav-dot-color;
+      border-radius: 50%;
+      margin: 0 10rpx;
+      transition: all 0.4s ease-in;
+
+      &--vertical {
+        margin: 10rpx 0;
+      }
+
+      &--active {
+        background-color: @swiper-nav-dot-active-color;
+      }
+    }
+  }
+
+  &__dots-bar {
+    &-item {
+      &--vertical&--active {
+        width: @swiper-nav-dot-size;
+        height: @swiper-nav-dots-bar-active-width;
+      }
+      &--active {
+        width: @swiper-nav-dots-bar-active-width;
+        border-radius: calc(@swiper-nav-dot-size / 2);
+        background-color: @swiper-nav-dot-active-color;
+      }
+    }
+  }
+
+  &--left {
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &--right {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &--top-left {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+  }
+
+  &--top {
+    position: absolute;
+    left: 50%;
+    top: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  &--top-right {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+  }
+
+  &--bottom-left {
+    position: absolute;
+    left: 24rpx;
+    bottom: 24rpx;
+  }
+
+  &--bottom {
+    position: absolute;
+    left: 50%;
+    bottom: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  &--bottom-right {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__fraction {
+    padding: 0 16rpx;
+    height: @swiper-nav-fraction-height;
+    line-height: @swiper-nav-fraction-height;
+    border-radius: calc(@swiper-nav-fraction-height / 2);
+    background: @swiper-nav-fraction-bg-color;
+    color: @swiper-nav-fraction-color;
+    font-size: @swiper-nav-fraction-font-size;
+  }
+
+  &__btn {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    &--prev,
+    &--next {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: @swiper-nav-btn-size;
+      height: @swiper-nav-btn-size;
+      border-radius: 50%;
+      background: @swiper-nav-btn-bg-color;
+
+      &::after {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: block;
+        content: '';
+        width: 12rpx;
+        height: 12rpx;
+        border-color: @swiper-nav-btn-color;
+        border-style: solid;
+      }
+    }
+
+    &--prev {
+      left: 30rpx;
+
+      &::after {
+        margin-left: 4rpx;
+        border-width: 2rpx 0 0 2rpx;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+    }
+
+    &--next {
+      right: 30rpx;
+
+      &::after {
+        margin-left: -4rpx;
+        border-width: 2rpx 2rpx 0 0;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.vue b/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.vue
new file mode 100644
index 000000000..ed8d51028
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper-nav/swiper-nav.vue
@@ -0,0 +1,93 @@
+<template>
+  <view>
+    <view
+      v-if="showControls"
+      :class="classPrefix + '__btn ' + ' ' + tClass"
+      :style="_._style([customStyle])"
+    >
+      <view
+        :class="classPrefix + '__btn--prev'"
+        data-dir="prev"
+        aria-role="button"
+        aria-label="上一张"
+        @click="nav($event, { dir: 'prev'})"
+      />
+      <view
+        :class="classPrefix + '__btn--next'"
+        data-dir="next"
+        aria-role="button"
+        aria-label="下一张"
+        @click="nav($event, { dir: 'next'})"
+      />
+    </view>
+    <view
+      v-if="total >= minShowNum"
+      :style="_._style([customStyle])"
+      :class="
+        tClass +
+          ' ' + classPrefix +
+          ' ' + classPrefix + '--' + direction +
+          ' ' + classPrefix + '__' + type +
+          ' ' + classPrefix + '--' + paginationPosition
+      "
+    >
+      <block v-if="type === 'dots' || type === 'dots-bar'">
+        <view
+          v-for="(item, idx) in total"
+          :key="idx"
+          :class="_.cls(classPrefix + '__' + type + '-item', [['active', current === idx], direction])"
+        />
+      </block>
+      <block v-if="type === 'fraction'">
+        {{ current + 1 }}/{{ total }}
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-swiper-nav`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.SwiperNav)],
+  components: { },
+  props: {
+    ...props,
+  },
+  emits: [
+    'nav-btn-change',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+    };
+  },
+
+  methods: {
+    nav(e, dataset) {
+      const { dir } = dataset;
+      const source = 'nav';
+      this.$emit('nav-btn-change', { dir, source });
+      const parent = this[RELATION_MAP.SwiperNav];
+      if (parent) {
+        parent.doNavBtnChange(dir, source);
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './swiper-nav.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper-nav/type.ts b/packages/tdesign-uniapp/components/swiper-nav/type.ts
new file mode 100644
index 000000000..030b01aa2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper-nav/type.ts
@@ -0,0 +1,45 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSwiperNavProps {
+  /**
+   * 当前轮播在哪一项（下标）
+   * @default 0
+   */
+  current?: number;
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   * @default horizontal
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * 小于这个数字不会显示导航器
+   * @default 2
+   */
+  minShowNum?: number;
+  /**
+   * 页码信息展示位置
+   * @default bottom
+   */
+  paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
+  /**
+   * 是否显示两侧的控制按钮
+   * @default false
+   */
+  showControls?: boolean;
+  /**
+   * 总共的项数
+   * @default 0
+   */
+  total?: number;
+  /**
+   * 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+   * @default dots
+   */
+  type?: SwiperNavigationType;
+}
+
+export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';
diff --git a/packages/tdesign-uniapp/components/swiper/README.en-US.md b/packages/tdesign-uniapp/components/swiper/README.en-US.md
new file mode 100644
index 000000000..c6eea7256
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/README.en-US.md
@@ -0,0 +1,89 @@
+:: BASE_DOC ::
+
+## API
+
+### Swiper Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+autoplay | Boolean | true | \- | N
+current | Number | 0 | \- | N
+direction | String | horizontal | options: horizontal/vertical | N
+display-multiple-items | Number | 1 | \- | N
+duration | Number | 300 | \- | N
+easing-function | String | default | options: default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
+height | String / Number | 192 | \- | N
+image-props | Object | {} | \- | N
+interval | Number | 5000 | \- | N
+list | Array | - | Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts) | N
+loop | Boolean | true | \- | N
+navigation | Boolean / Object | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts) | N
+next-margin | String / Number | 0 | \- | N
+pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+previous-margin | String / Number | 0 | \- | N
+snap-to-edge | Boolean | false | \- | N
+
+### Swiper Events
+
+name | params | description
+-- | -- | --
+animationfinish | `(context: { current: number, source: SwiperChangeSource })` | 动画结束时会触发 animationfinish 事件
+change | `(context: { current: number, source: SwiperChangeSource })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
+click | `(context: { index: number })` | \-
+image-load | `(context: { index: number})` | \-
+
+### Swiper Slots
+
+name | Description
+-- | --
+navigation | \-
+
+### Swiper External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-image | \-
+t-class-nav | \-
+t-class-next-image | \-
+t-class-prev-image | \-
+
+
+### SwiperNav Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+current | Number | 0 | \- | N
+direction | String | horizontal | options: horizontal/vertical | N
+min-show-num | Number | 2 | \- | N
+pagination-position | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+show-controls | Boolean | false | \- | N
+total | Number | 0 | \- | N
+type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper-nav/type.ts) | N
+
+### SwiperNav External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-swiper-item-padding | 0 | - 
+--td-swiper-radius | @radius-large | - 
+--td-swiper-nav-btn-bg-color | @font-gray-3 | - 
+--td-swiper-nav-btn-color | @text-color-anti | - 
+--td-swiper-nav-btn-size | 48rpx | - 
+--td-swiper-nav-dot-active-color | @text-color-anti | - 
+--td-swiper-nav-dot-color | @font-white-2 | - 
+--td-swiper-nav-dot-size | 12rpx | - 
+--td-swiper-nav-dots-bar-active-width | 40rpx | - 
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | - 
+--td-swiper-nav-fraction-color | @text-color-anti | - 
+--td-swiper-nav-fraction-font-size | 24rpx | - 
+--td-swiper-nav-fraction-height | 48rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/swiper/README.md b/packages/tdesign-uniapp/components/swiper/README.md
new file mode 100644
index 000000000..30b1d8964
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/README.md
@@ -0,0 +1,139 @@
+---
+title: Swiper 轮播图
+description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+import TSwiperNav from 'tdesign-uniapp/swiper-nav/swiper-nav.vue';
+```
+### 组件说明
+
+从 `0.32.0` 版本开始，依赖原生 `swiper` 组件实现，移除了 `swiper-item` 组件，新增了 `list` 属性；
+
+## 代码演示
+
+多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
+
+### 组件类型
+
+#### 点状（dots）轮播图
+
+{{ base }}
+
+#### 点条状（dots-bar）轮播图
+
+{{ custom }}
+
+#### 分式（fraction）导航器轮播图
+
+{{ fraction }}
+
+#### 切换按钮（controls）轮播图
+
+{{ nav-btn }}
+
+#### 卡片式（cards）轮播图
+
+{{ cards }}
+
+### 组件样式
+
+#### 垂直模式
+
+{{ vertical }}
+
+## API
+
+### Swiper Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+display-multiple-items | Number | 1 | 同时显示的滑块数量 | N
+duration | Number | 300 | 滑动动画时长 | N
+easing-function | String | default | 指定 swiper 切换缓动动画类型。可选项：default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
+height | String / Number | 192 | 轮播的高度；默认单位 `px` | N
+image-props | Object | {} | 透传至 Image 组件 | N
+interval | Number | 5000 | 轮播间隔时间 | N
+list | Array | - | 图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts) | N
+loop | Boolean | true | 是否循环播放 | N
+navigation | Boolean / Object | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts) | N
+next-margin | String / Number | 0 | 后边距，可用于露出后一项的一小部分。默认单位 `px` | N
+pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+previous-margin | String / Number | 0 | 前边距，可用于露出前一项的一小部分。默认单位 `px` | N
+snap-to-edge | Boolean | false | 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | N
+
+### Swiper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+animationfinish | `(context: { current: number, source: SwiperChangeSource })` | 轮播切换时触发
+change | `(context: { current: number, source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
+click | `(context: { index: number })` | 点击轮播项时触发
+image-load | `(context: { index: number})` | 图片加载时触发
+
+### Swiper Slots
+
+名称 | 描述
+-- | --
+navigation | 导航器全部配置
+
+### Swiper External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-image | 当前图片样式类
+t-class-nav | 导航样式类
+t-class-next-image | 下一图片样式类
+t-class-prev-image | 上一图片样式类
+
+
+### SwiperNav Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N
+pagination-position | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
+show-controls | Boolean | false | 是否显示两侧的控制按钮 | N
+total | Number | 0 | 总共的项数 | N
+type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/swiper-nav/type.ts) | N
+
+### SwiperNav External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-swiper-item-padding | 0 | - |
+| --td-swiper-radius | @radius-large | - |
+| --td-swiper-nav-btn-bg-color | @font-gray-3 | - |
+| --td-swiper-nav-btn-color | @text-color-anti | - |
+| --td-swiper-nav-btn-size | 48rpx | - |
+| --td-swiper-nav-dot-active-color | @text-color-anti | - |
+| --td-swiper-nav-dot-color | @font-white-2 | - |
+| --td-swiper-nav-dot-size | 12rpx | - |
+| --td-swiper-nav-dots-bar-active-width | 40rpx | - |
+| --td-swiper-nav-fraction-bg-color | @font-gray-3 | - |
+| --td-swiper-nav-fraction-color | @text-color-anti | - |
+| --td-swiper-nav-fraction-font-size | 24rpx | - |
+| --td-swiper-nav-fraction-height | 48rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/swiper/_example/base/index.vue b/packages/tdesign-uniapp/components/swiper/_example/base/index.vue
new file mode 100644
index 000000000..bbb40d161
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/base/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <t-swiper
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :list="swiperList"
+      :navigation="{ type: 'dots' }"
+      @click="onTap"
+      @change="onChange"
+      @image-load="onImageLoad"
+    />
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [`${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`];
+export default {
+  components: {
+    tSwiper,
+  },
+  data() {
+    return {
+      current: 0,
+      autoplay: false,
+      duration: 500,
+      interval: 5000,
+      swiperList,
+    };
+  },
+  created() {},
+  methods: {
+    onTap(e) {
+      const { index } = e;
+      console.log(index);
+    },
+    onChange(e) {
+      const { current, source } = e;
+      console.log(current, source);
+    },
+    onImageLoad(e) {
+      console.log(e.index);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/cards/index.vue b/packages/tdesign-uniapp/components/swiper/_example/cards/index.vue
new file mode 100644
index 000000000..d9df459a7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/cards/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <view class="card-theme">
+    <t-swiper
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :list="swiperList"
+      :navigation="{ type: 'dots' }"
+      :image-props="{ shape: 'round' }"
+      previous-margin="34px"
+      next-margin="34px"
+      t-class-nav="card-theme-nav"
+      @change="onChange"
+    />
+
+    <view
+      class="box"
+      style="height: 42px"
+    />
+
+    <t-swiper
+      class="scale-card-theme"
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :list="swiperList"
+      :navigation="{ type: 'dots' }"
+      :image-props="{ shape: 'round' }"
+      previous-margin="34px"
+      next-margin="34px"
+      t-class-nav="card-theme-nav"
+      t-class-prev-image="scale-candidate"
+      t-class-next-image="scale-candidate"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [`${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`];
+export default {
+  components: {
+    tSwiper,
+  },
+  data() {
+    return {
+      current: 0,
+      autoplay: false,
+      duration: 500,
+      interval: 5000,
+      swiperList,
+      scale: 0,
+      candidate: 0,
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { current, source } = e;
+      console.log(current, source);
+    },
+  },
+};
+</script>
+<style>
+.card-theme {
+    --td-swiper-radius: 0;
+    --td-swiper-item-padding: 0 12rpx;
+    --td-swiper-nav-dot-color: var(--td-bg-color-component, #e7e7e7);
+    --td-swiper-nav-dot-active-color: var(--td-brand-color, #0052d9);
+
+    padding-bottom: 18px;
+}
+
+.card-theme .card-theme-nav {
+    bottom: -18px;
+}
+
+.scale-candidate {
+    height: 126px !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/custom/index.vue b/packages/tdesign-uniapp/components/swiper/_example/custom/index.vue
new file mode 100644
index 000000000..aef8b7c7f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/custom/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <t-swiper
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :list="swiperList"
+      :navigation="{ type: 'dots-bar' }"
+    />
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+];
+export default {
+  components: {
+    tSwiper,
+  },
+  data() {
+    return {
+      current: 1,
+      autoplay: true,
+      duration: 500,
+      interval: 5000,
+      swiperList,
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.img {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/fraction/index.vue b/packages/tdesign-uniapp/components/swiper/_example/fraction/index.vue
new file mode 100644
index 000000000..f2c2dd1cf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/fraction/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <view>
+    <t-swiper
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :navigation="navigation"
+      :pagination-position="paginationPosition"
+      :list="swiperList"
+    />
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [`${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`, `${imageCdn}/swiper2.png`, `${imageCdn}/swiper1.png`];
+export default {
+  components: {
+    tSwiper,
+  },
+  data() {
+    return {
+      current: 2,
+      autoplay: true,
+      duration: 500,
+      interval: 5000,
+      paginationPosition: 'bottom-right',
+      swiperList,
+      navigation: {
+        type: 'fraction',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.img {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/nav-btn/index.vue b/packages/tdesign-uniapp/components/swiper/_example/nav-btn/index.vue
new file mode 100644
index 000000000..64aeec0df
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/nav-btn/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <view>
+    <t-swiper
+      :current="current"
+      :autoplay="autoplay"
+      :duration="duration"
+      :interval="interval"
+      :navigation="navigation"
+      :list="swiperList"
+      :loop="false"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+];
+export default {
+  components: {
+    tSwiper,
+  },
+  data() {
+    return {
+      current: 3,
+      autoplay: true,
+      duration: 500,
+      interval: 5000,
+      swiperList,
+      navigation: {
+        type: '',
+        showControls: true,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      const { current } = e;
+      this.current = current;
+    },
+  },
+};
+</script>
+<style>
+.img {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/skyline/swiper.vue b/packages/tdesign-uniapp/components/swiper/_example/skyline/swiper.vue
new file mode 100644
index 000000000..220670ba3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/skyline/swiper.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>1</div>
+</template>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/swiper.less b/packages/tdesign-uniapp/components/swiper/_example/swiper.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/swiper.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/swiper/_example/swiper.vue b/packages/tdesign-uniapp/components/swiper/_example/swiper.vue
new file mode 100644
index 000000000..c422c7089
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/swiper.vue
@@ -0,0 +1,86 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Swiper"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo swiper-demo">
+      <t-demo-header
+        title="Swiper 轮播图"
+        desc="用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。"
+      />
+      <view class="demo-section">
+        <t-demo
+          title="01 组件类型"
+          desc="点状（dots）"
+          padding
+        >
+          <!-- 受控属性示例 -->
+          <BaseDemo />
+        </t-demo>
+
+        <t-demo
+          desc="点条状（dots-bar）"
+          padding
+        >
+          <custom />
+        </t-demo>
+
+        <t-demo
+          desc="分式（fraction）"
+          padding
+        >
+          <fraction />
+        </t-demo>
+
+        <t-demo
+          desc="切换按钮（controls）"
+          padding
+        >
+          <nav-btn />
+        </t-demo>
+
+        <t-demo desc="卡片式（cards）">
+          <cards />
+        </t-demo>
+
+        <t-demo
+          title="02 组件样式"
+          desc="垂直模式"
+        >
+          <vertical />
+        </t-demo>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import fraction from './fraction/index.vue';
+import navBtn from './nav-btn/index.vue';
+import custom from './custom/index.vue';
+import cards from './cards/index.vue';
+import vertical from './vertical/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    fraction,
+    navBtn,
+    custom,
+    cards,
+    vertical,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './swiper.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/_example/vertical/index.vue b/packages/tdesign-uniapp/components/swiper/_example/vertical/index.vue
new file mode 100644
index 000000000..218d197d1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/_example/vertical/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <view>
+    <view class="swiper-box">
+      <t-swiper
+        :current="1"
+        :autoplay="autoplay"
+        :duration="duration"
+        :interval="interval"
+        :navigation="navigation"
+        direction="vertical"
+        :pagination-position="paginationPosition"
+        :list="swiperList"
+      />
+    </view>
+
+    <view class="swiper-box swiper-box-option">
+      <view class="cell">
+        <view class="label">
+          自动播放
+        </view>
+        <view class="option">
+          <t-switch
+            t-class="swiper-switch"
+            :value="autoplay"
+            @change="onAutoplayChange"
+          />
+          <view class="option-desc">
+            {{ autoplay ? '开' : '关' }}
+          </view>
+        </view>
+      </view>
+      <view class="cell">
+        <view class="label">
+          自动播放间隔时间(单位毫秒)
+        </view>
+        <view class="option">
+          <t-slider
+            t-class="swiper-slider"
+            t-class-bar="external-class-bar"
+            :value="interval"
+            :min="1000"
+            :max="5000"
+            :label="true"
+            :step="500"
+            @change="onIntervalChange"
+          />
+        </view>
+      </view>
+      <view class="cell">
+        <view class="label">
+          动画持续时间(单位毫秒)
+        </view>
+        <view class="option">
+          <t-slider
+            t-class="swiper-slider"
+            t-class-bar="external-class-bar"
+            :value="duration"
+            :min="200"
+            :max="2000"
+            :label="true"
+            :step="100"
+            @change="onDurationChange"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tSwiper from 'tdesign-uniapp/swiper/swiper.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+import tSlider from 'tdesign-uniapp/slider/slider.vue';
+const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
+const swiperList = [
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+];
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tSwiper,
+    tSwitch,
+    tSlider,
+  },
+  data() {
+    return {
+      current: 1,
+      autoplay: true,
+      duration: 500,
+      interval: 5000,
+      swiperList,
+      navigation: {
+        type: 'dots-bar',
+      },
+      paginationPosition: 'right',
+    };
+  },
+  created() {},
+  methods: {
+    onAutoplayChange(e) {
+      this.autoplay = e.value;
+    },
+    onIntervalChange(e) {
+      this.interval = e.value;
+    },
+    onDurationChange(e) {
+      this.duration = e.value;
+    },
+  },
+};
+</script>
+<style lang="less">
+.swiper-box {
+    margin: 0 32rpx 32rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    transform: translateY(0);
+}
+
+.swiper-box .img {
+    width: 100%;
+    height: 100%;
+}
+
+:deep(.swiper-switch) {
+  margin: 22rpx 0;
+  .t-switch__label {
+    display: none;
+  }
+}
+
+.cell {
+    padding: 10rpx 0;
+    font-size: 28rpx;
+    color: #999;
+}
+.cell.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.cell .label {
+    color: #999;
+    margin-right: 20rpx;
+}
+
+.cell .option-desc {
+    width: 68rpx;
+}
+
+.cell :deep(.swiper-slider) {
+    margin: 32rpx 0;
+}
+
+.swiper-box-vertical .item {
+    line-height: 400rpx;
+}
+
+.swiper-box-option {
+    overflow: visible;
+    border-radius: 0;
+}
+
+:deep(.external-class-bar) {
+    margin: 0 !important;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/computed.js b/packages/tdesign-uniapp/components/swiper/computed.js
new file mode 100644
index 000000000..2fc27f13a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/computed.js
@@ -0,0 +1,29 @@
+export function isPrev(current, index, list) {
+  return (current - 1 + list.length) % list.length === index;
+}
+
+export function isNext(current, index, list) {
+  return (current + 1 + list.length) % list.length === index;
+}
+
+export function getImageClass(
+  prefix,
+  current,
+  index,
+  list,
+  tClassImage,
+  tClassPrevImage,
+  tClassNextImage,
+) {
+  const arr = [`${prefix}-swiper__image-host`, `${prefix}-swiper__image`, tClassImage];
+
+  if (isPrev(current, index, list)) {
+    arr.push(tClassPrevImage);
+  }
+
+  if (isNext(current, index, list)) {
+    arr.push(tClassNextImage);
+  }
+
+  return arr.join(' ');
+}
diff --git a/packages/tdesign-uniapp/components/swiper/props.ts b/packages/tdesign-uniapp/components/swiper/props.ts
new file mode 100644
index 000000000..98ac519ea
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/props.ts
@@ -0,0 +1,117 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwiperProps } from './type';
+export default {
+  /** 是否自动播放 */
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 当前轮播在哪一项（下标） */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 轮播滑动方向，包括横向滑动和纵向滑动两个方向 */
+  direction: {
+    type: String,
+    default: 'horizontal' as TdSwiperProps['direction'],
+    validator(val: TdSwiperProps['direction']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 同时显示的滑块数量 */
+  displayMultipleItems: {
+    type: Number,
+    default: 1,
+  },
+  /** 滑动动画时长 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 指定 swiper 切换缓动动画类型 */
+  easingFunction: {
+    type: String,
+    default: 'default' as TdSwiperProps['easingFunction'],
+    validator(val: TdSwiperProps['easingFunction']): boolean {
+      if (!val) return true;
+      return ['default', 'linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'].includes(val);
+    },
+  },
+  /** 轮播的高度；默认单位 `px` */
+  height: {
+    type: [String, Number],
+    default: 192 as TdSwiperProps['height'],
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 轮播间隔时间 */
+  interval: {
+    type: Number,
+    default: 5000,
+  },
+  /** 图片列表 */
+  list: {
+    type: Array,
+  },
+  /** 是否循环播放 */
+  loop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 导航器全部配置，true 的话使用默认配置 */
+  navigation: {
+    type: [Boolean, Object],
+    default: true as TdSwiperProps['navigation'],
+  },
+  /** 后边距，可用于露出后一项的一小部分。默认单位 `px` */
+  nextMargin: {
+    type: [String, Number],
+    default: 0 as TdSwiperProps['nextMargin'],
+  },
+  /** 页码信息展示位置 */
+  paginationPosition: {
+    type: String,
+    default: 'bottom' as TdSwiperProps['paginationPosition'],
+    validator(val: TdSwiperProps['paginationPosition']): boolean {
+      if (!val) return true;
+      return ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right', 'left', 'right'].includes(val);
+    },
+  },
+  /** 前边距，可用于露出前一项的一小部分。默认单位 `px` */
+  previousMargin: {
+    type: [String, Number],
+    default: 0 as TdSwiperProps['previousMargin'],
+  },
+  /** 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 */
+  snapToEdge: Boolean,
+  /** 轮播切换时触发 */
+  onAnimationfinish: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 轮播切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击轮播项时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 图片加载时触发 */
+  onImageLoad: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/swiper/swiper.less b/packages/tdesign-uniapp/components/swiper/swiper.less
new file mode 100644
index 000000000..911a6a269
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/swiper.less
@@ -0,0 +1,30 @@
+@import '../common/style/base.less';
+
+@swiper-radius: var(--td-swiper-radius, @radius-large);
+@swiper-item-padding: var(--td-swiper-item-padding, 0);
+
+.@{prefix}-swiper {
+  position: relative;
+
+  &-host {
+    border-radius: @swiper-radius;
+    overflow: hidden;
+    transform: translateY(0);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: @swiper-item-padding;
+  }
+
+  :deep(&__image) {
+    width: 100%;
+    transition: all 0.3s ease;
+
+    &-host {
+      width: 100%;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/swiper/swiper.vue b/packages/tdesign-uniapp/components/swiper/swiper.vue
new file mode 100644
index 000000000..579494d3a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/swiper.vue
@@ -0,0 +1,197 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle])"
+  >
+    <swiper
+      :class="classPrefix + '-host'"
+      :autoplay="autoplay"
+      :current="current"
+      :interval="interval"
+      :duration="duration"
+      :circular="loop"
+      :vertical="direction == 'vertical'"
+      :easing-function="easingFunction"
+      :previous-margin="_.addUnit(previousMargin)"
+      :next-margin="_.addUnit(nextMargin)"
+      :snap-to-edge="snapToEdge"
+      :display-multiple-items="displayMultipleItems"
+      :style="'height: ' + _.addUnit(height)"
+      @change="onChange"
+      @animationfinish="onAnimationFinish"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        :class="
+          _.cls(classPrefix + '__item', [
+            ['preview', isPrev(navCurrent, index, list)],
+            ['next', isNext(navCurrent, index, list)]
+          ])
+        "
+        :data-index="index"
+        :aria-hidden="navCurrent !== index"
+        aria-role="image"
+        :aria-label="_.isObject(item) ? item.ariaLabel : ''"
+        @click="onTap($event, { index })"
+      >
+        <t-image
+          :t-class="getImageClass(prefix, navCurrent, index, list, tClassImage, tClassPrevImage, tClassNextImage)"
+          :custom-style="'height: ' + _.addUnit(height) || ''"
+          :error="imageProps.error || 'default'"
+          :lazy="imageProps.lazy || false"
+          :loading="imageProps.loading || 'default'"
+          :shape="imageProps.shape || 'square'"
+          :src="_.isObject(item) ? item.value : item"
+          :mode="imageProps.mode || 'aspectFill'"
+          :webp="imageProps.webp || false"
+          :show-menu-by-longpress="imageProps.showMenuByLongpress || false"
+          @load="onImageLoad($event, { custom: index || null })"
+        />
+      </swiper-item>
+    </swiper>
+    <t-swiper-nav
+      v-if="navigation"
+      :t-class="tClassNav"
+      :type="navigation.type || 'dots'"
+      :current="navCurrent || 0"
+      :total="list.length || 0"
+      :direction="direction || 'horizontal'"
+      :pagination-position="paginationPosition || 'bottom'"
+      :min-show-num="navigation.minShowNum || 2"
+      :show-controls="navigation.showControls || false"
+      @nav-btn-change="onNavBtnChange"
+    />
+    <slot name="navigation" />
+    <slot name="nav" />
+  </view>
+</template>
+<script>
+import tSwiperNav from '../swiper-nav/swiper-nav';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { isPrev, isNext, getImageClass } from './computed.js';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+const name = `${prefix}-swiper`;
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`, `${prefix}-class-nav`, `${prefix}-class-image`, `${prefix}-class-prev-image`, `${prefix}-class-next-image`],
+  mixins: [ParentMixin(RELATION_MAP.SwiperNav)],
+  components: {
+    tSwiperNav,
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'change',
+    'animationfinish',
+    'image-load',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _,
+      navCurrent: 0,
+    };
+  },
+  watch: {
+    navCurrent(t) {
+      this.updateNav(t);
+    },
+  },
+
+  mounted() {
+    this.navCurrent = this.current;
+  },
+
+  methods: {
+    isPrev,
+    isNext,
+    getImageClass,
+    getImageSize(column) {
+      if (column >= 5) return 'small';
+      if (column === 4) return 'middle';
+    },
+
+    updateNav(currentValue) {
+      if (this.navigation) return;
+      const $nav = this.getRelationNodes('./swiper-nav')?.[0];
+      if (!$nav) return;
+      const { direction, paginationPosition, list } = this;
+
+      this.current = currentValue;
+      this.total = list.length;
+      this.direction = direction;
+      this.paginationPosition = paginationPosition;
+    },
+
+    onTap(e, dataset) {
+      const { index } = dataset;
+      this.$emit('click', { index });
+    },
+
+    onChange(e) {
+      const { current, source } = e.detail;
+
+      if (!source) return;
+
+      this.navCurrent = current;
+      this.triggerSource = source;
+
+      this.$emit('change', { current, source });
+    },
+
+    onAnimationFinish(e) {
+      const { current, source } = e.detail;
+
+      this.$emit('animationfinish', { current, source: source || this.triggerSource });
+    },
+
+    onNavBtnChange(e) {
+      const { dir, source } = e;
+
+      this.doNavBtnChange(dir, source);
+    },
+
+    doNavBtnChange(dir, source) {
+      const { current, list, loop, navCurrent } = this;
+      const count = list.length;
+      let nextPos = dir === 'next' ? current + 1 : current - 1;
+
+      if (loop) {
+        nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
+      } else {
+        nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
+      }
+
+      if (nextPos === navCurrent) return;
+
+      this.navCurrent = nextPos;
+      this.triggerSource = source;
+
+      this.$emit('change', { current: nextPos, source });
+    },
+
+    onImageLoad(e, dataset) {
+      this.$emit('image-load', { index: dataset.custom });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './swiper.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/swiper/type.ts b/packages/tdesign-uniapp/components/swiper/type.ts
new file mode 100644
index 000000000..963d5e6d4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/swiper/type.ts
@@ -0,0 +1,112 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwiperNavProps as SwiperNavProps } from '../swiper-nav/type';
+
+export interface TdSwiperProps {
+  /**
+   * 是否自动播放
+   * @default true
+   */
+  autoplay?: boolean;
+  /**
+   * 当前轮播在哪一项（下标）
+   * @default 0
+   */
+  current?: number;
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   * @default horizontal
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * 同时显示的滑块数量
+   * @default 1
+   */
+  displayMultipleItems?: number;
+  /**
+   * 滑动动画时长
+   * @default 300
+   */
+  duration?: number;
+  /**
+   * 指定 swiper 切换缓动动画类型
+   * @default default
+   */
+  easingFunction?: 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic';
+  /**
+   * 轮播的高度；默认单位 `px`
+   * @default 192
+   */
+  height?: string | number;
+  /**
+   * 透传至 Image 组件
+   * @default {}
+   */
+  imageProps?: object;
+  /**
+   * 轮播间隔时间
+   * @default 5000
+   */
+  interval?: number;
+  /**
+   * 图片列表
+   */
+  list?: string[] | SwiperList[];
+  /**
+   * 是否循环播放
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * 导航器全部配置，true 的话使用默认配置
+   * @default true
+   */
+  navigation?: SwiperNavProps | boolean;
+  /**
+   * 后边距，可用于露出后一项的一小部分。默认单位 `px`
+   * @default 0
+   */
+  nextMargin?: string | number;
+  /**
+   * 页码信息展示位置
+   * @default bottom
+   */
+  paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
+  /**
+   * 前边距，可用于露出前一项的一小部分。默认单位 `px`
+   * @default 0
+   */
+  previousMargin?: string | number;
+  /**
+   * 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
+   * @default false
+   */
+  snapToEdge?: boolean;
+  /**
+   * 轮播切换时触发
+   */
+  onAnimationfinish?: (context: { current: number; source: SwiperChangeSource }) => void;
+  /**
+   * 轮播切换时触发
+   */
+  onChange?: (context: { current: number; source: SwiperChangeSource }) => void;
+  /**
+   * 点击轮播项时触发
+   */
+  onClick?: (context: { index: number }) => void;
+  /**
+   * 图片加载时触发
+   */
+  onImageLoad?: (context: { index: number }) => void;
+}
+
+export interface SwiperList {
+  value: string;
+  ariaLabel: string;
+}
+
+export type SwiperChangeSource = 'autoplay' | 'touch' | 'nav';
diff --git a/packages/tdesign-uniapp/components/switch/README.en-US.md b/packages/tdesign-uniapp/components/switch/README.en-US.md
new file mode 100644
index 000000000..3d3616fa6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/README.en-US.md
@@ -0,0 +1,70 @@
+:: BASE_DOC ::
+
+## API
+
+### Switch Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+custom-value | Array | [true, false] | Typescript：`Array<SwitchValue>` | N
+disabled | Boolean | undefined | \- | N
+icon | Array | [] | Typescript：`string[]` | N
+label | Array | [] | Typescript：`string[]` | N
+loading | Boolean | false | \- | N
+size | String | medium | options: small/medium/large | N
+value | String / Number / Boolean | - | `v-model:value` is supported。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/switch/type.ts) | N
+default-value | String / Number / Boolean | - | uncontrolled property。Typescript：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/switch/type.ts) | N
+
+### Switch Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: SwitchValue })` | \-
+
+### Switch External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-body | \-
+t-class-dot | \-
+t-class-label | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-switch-checked-color | @brand-color | - 
+--td-switch-checked-disabled-color | @brand-color-disabled | - 
+--td-switch-dot-disabled-color | @font-white-1 | - 
+--td-switch-dot-horizontal-margin | 6rpx | - 
+--td-switch-dot-large-size | 52rpx | - 
+--td-switch-dot-plain-horizontal-margin | 10rpx | - 
+--td-switch-dot-plain-large-size | 44rpx | - 
+--td-switch-dot-plain-size | 36rpx | - 
+--td-switch-dot-plain-small-size | 28rpx | - 
+--td-switch-dot-shadow | @shadow-1 | - 
+--td-switch-dot-size | 44rpx | - 
+--td-switch-dot-small-size | 36rpx | - 
+--td-switch-height | 56rpx | - 
+--td-switch-icon-large-size | 48rpx | - 
+--td-switch-icon-size | 40rpx | - 
+--td-switch-icon-small-size | 32rpx | - 
+--td-switch-label-checked-color | @switch-checked-color | - 
+--td-switch-label-color | @bg-color-secondarycontainer-active | - 
+--td-switch-label-font-size | 28rpx | - 
+--td-switch-label-large-font-size | 32rpx | - 
+--td-switch-label-small-font-size | 24rpx | - 
+--td-switch-large-height | 64rpx | - 
+--td-switch-large-radius | calc(@switch-large-height / 2) | - 
+--td-switch-large-width | 104rpx | - 
+--td-switch-loading-color | @brand-color | - 
+--td-switch-radius | calc(@switch-height / 2) | - 
+--td-switch-small-height | 48rpx | - 
+--td-switch-small-radius | calc(@switch-small-height / 2) | - 
+--td-switch-small-width | 78rpx | - 
+--td-switch-unchecked-color | @bg-color-secondarycontainer-active | - 
+--td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
+--td-switch-width | 90rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/switch/README.md b/packages/tdesign-uniapp/components/switch/README.md
new file mode 100644
index 000000000..916212d49
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/README.md
@@ -0,0 +1,104 @@
+---
+title: Switch 开关
+description: 用于控制某个功能的开启和关闭。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSwitch from 'tdesign-uniapp/switch/switch.vue';
+```
+
+### 基础开关
+
+{{ base }}
+
+### 带描述开关
+
+{{ label }}
+
+### 自定义颜色
+
+{{ color }}
+
+### 开关状态
+
+{{ status }}
+
+### 尺寸
+
+{{ size }}
+
+## API
+
+### Switch Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+custom-value | Array | [true, false] | 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']。TS 类型：`Array<SwitchValue>` | N
+disabled | Boolean | undefined | 是否禁用组件。优先级：Switch.disabled > Form.disabled | N
+icon | Array | [] | 开关的图标；[打开时的图标，关闭时的图标]。TS 类型：`string[]` | N
+label | Array | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 。TS 类型：`string[]` | N
+loading | Boolean | false | 是否处于加载中状态 | N
+size | String | medium | 开关尺寸。可选项：small/medium/large | N
+value | String / Number / Boolean | - | 开关值。支持语法糖 `v-model:value`。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/switch/type.ts) | N
+default-value | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`SwitchValue` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/switch/type.ts) | N
+
+### Switch Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: SwitchValue })` | 数据发生变化时触发
+
+### Switch External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-body | 描述文本样式类
+t-class-dot | 滑块样式类
+t-class-label | 开关内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-switch-checked-color | @brand-color | - |
+| --td-switch-checked-disabled-color | @brand-color-disabled | - |
+| --td-switch-dot-disabled-color | @font-white-1 | - |
+| --td-switch-dot-horizontal-margin | 6rpx | - |
+| --td-switch-dot-large-size | 52rpx | - |
+| --td-switch-dot-plain-horizontal-margin | 10rpx | - |
+| --td-switch-dot-plain-large-size | 44rpx | - |
+| --td-switch-dot-plain-size | 36rpx | - |
+| --td-switch-dot-plain-small-size | 28rpx | - |
+| --td-switch-dot-shadow | @shadow-1 | - |
+| --td-switch-dot-size | 44rpx | - |
+| --td-switch-dot-small-size | 36rpx | - |
+| --td-switch-height | 56rpx | - |
+| --td-switch-icon-large-size | 48rpx | - |
+| --td-switch-icon-size | 40rpx | - |
+| --td-switch-icon-small-size | 32rpx | - |
+| --td-switch-label-checked-color | @switch-checked-color | - |
+| --td-switch-label-color | @bg-color-secondarycontainer-active | - |
+| --td-switch-label-font-size | 28rpx | - |
+| --td-switch-label-large-font-size | 32rpx | - |
+| --td-switch-label-small-font-size | 24rpx | - |
+| --td-switch-large-height | 64rpx | - |
+| --td-switch-large-radius | calc(@switch-large-height / 2) | - |
+| --td-switch-large-width | 104rpx | - |
+| --td-switch-loading-color | @brand-color | - |
+| --td-switch-radius | calc(@switch-height / 2) | - |
+| --td-switch-small-height | 48rpx | - |
+| --td-switch-small-radius | calc(@switch-small-height / 2) | - |
+| --td-switch-small-width | 78rpx | - |
+| --td-switch-unchecked-color | @bg-color-secondarycontainer-active | - |
+| --td-switch-unchecked-disabled-color | @bg-color-component-disabled | - |
+| --td-switch-width | 90rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/switch/_example/base/index.vue b/packages/tdesign-uniapp/components/switch/_example/base/index.vue
new file mode 100644
index 000000000..31606d961
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/base/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <t-cell
+      title="基础开关"
+      :bordered="false"
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+        />
+      </template>
+    </t-cell>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tSwitch,
+  },
+  data() {
+    return {
+      defaultVal: true,
+    };
+  },
+  created() {},
+  methods: {
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/color/index.vue b/packages/tdesign-uniapp/components/switch/_example/color/index.vue
new file mode 100644
index 000000000..9fea5a626
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/color/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <view class="custom-color">
+    <t-cell
+      title="自定义颜色开关"
+      :bordered="false"
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+        />
+      </template>
+    </t-cell>
+    <!-- <t-cell title="自定义颜色" bordered="{{false}}">
+    <t-switch loading defaultValue="{{true}}" slot="note" />
+  </t-cell>
+  <t-cell title="自定义颜色" bordered="{{false}}">
+    <t-switch defaultValue="{{true}}" label="{{['关', '开']}}" slot="note" />
+  </t-cell>
+  <t-cell title="自定义颜色" bordered="{{false}}">
+    <t-switch defaultValue="{{true}}" icon="{{['close', 'check']}}" slot="note" />
+  </t-cell> -->
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tSwitch,
+  },
+  data() {
+    return {
+      defaultVal: true,
+    };
+  },
+  created() {},
+  methods: {
+  },
+};
+</script>
+<style>
+.custom-color {
+    --td-switch-checked-color: #00a870;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/label/index.vue b/packages/tdesign-uniapp/components/switch/_example/label/index.vue
new file mode 100644
index 000000000..581fac704
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/label/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <t-cell title="带文字开关">
+      <template
+        #note
+      >
+        <t-switch
+          :value="defaultVal"
+          :label="['开', '关']"
+          @change="handleChange"
+        />
+      </template>
+    </t-cell>
+
+    <t-cell
+      title="带图标开关"
+      :bordered="false"
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+          :icon="['check', 'close']"
+        />
+      </template>
+    </t-cell>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tSwitch,
+  },
+  data() {
+    return {
+      defaultVal: true,
+    };
+  },
+  created() {},
+  methods: {
+    handleChange(e) {
+      this.defaultVal = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/size/index.vue b/packages/tdesign-uniapp/components/switch/_example/size/index.vue
new file mode 100644
index 000000000..edc759976
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/size/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <t-cell title="大尺寸 32">
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+          size="large"
+        />
+      </template>
+    </t-cell>
+    <t-cell title="中尺寸 28">
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+        />
+      </template>
+    </t-cell>
+    <t-cell
+      title="小尺寸 24"
+      :bordered="false"
+    >
+      <template
+        #note
+      >
+        <t-switch
+          :default-value="true"
+          size="small"
+        />
+      </template>
+    </t-cell>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tSwitch,
+  },
+  data() {
+    return {
+      defaultVal: true,
+    };
+  },
+  created() {},
+  methods: {
+
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/skyline/switch.less b/packages/tdesign-uniapp/components/switch/_example/skyline/switch.less
new file mode 100644
index 000000000..b4cd57dfb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/skyline/switch.less
@@ -0,0 +1,3 @@
+page {
+    --td-cell-height: 112rpx;
+}
diff --git a/packages/tdesign-uniapp/components/switch/_example/skyline/switch.vue b/packages/tdesign-uniapp/components/switch/_example/skyline/switch.vue
new file mode 100644
index 000000000..465d7bca0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/skyline/switch.vue
@@ -0,0 +1,73 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Switch"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo-title">
+        Switch 开关
+      </view>
+      <view class="demo-desc">
+        用于控制某个功能的开启和关闭。
+      </view>
+
+      <t-demo
+        title="01 组件类型"
+        desc="基础开关"
+      >
+        <baseDemo />
+      </t-demo>
+
+      <t-demo desc="带描述开关">
+        <labelDemo />
+      </t-demo>
+
+      <t-demo desc="自定义颜色开关">
+        <color />
+      </t-demo>
+
+      <t-demo title="02 组件状态">
+        <status />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="开关尺寸"
+      >
+        <size />
+      </t-demo>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import baseDemo from '../base/index.vue';
+import labelDemo from '../label/index.vue';
+import color from '../color/index.vue';
+import status from '../status/index.vue';
+import size from '../size/index.vue';
+export default {
+  components: {
+    baseDemo,
+    labelDemo,
+    color,
+    status,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './switch.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/status/index.vue b/packages/tdesign-uniapp/components/switch/_example/status/index.vue
new file mode 100644
index 000000000..51f1e5604
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/status/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view>
+    <view class="demo-desc">
+      加载状态
+    </view>
+
+    <view class="group">
+      <t-cell title="加载状态">
+        <template
+          #note
+        >
+          <t-switch
+            :default-value="false"
+            loading
+          />
+        </template>
+      </t-cell>
+      <t-cell
+        title="加载状态"
+        :bordered="false"
+      >
+        <template
+          #note
+        >
+          <t-switch
+            :default-value="true"
+            loading
+          />
+        </template>
+      </t-cell>
+    </view>
+
+    <view class="demo-desc">
+      禁用状态
+    </view>
+
+    <view class="group">
+      <t-cell title="禁用状态">
+        <template
+          #note
+        >
+          <t-switch
+            disabled
+          />
+        </template>
+      </t-cell>
+      <t-cell
+        title="禁用状态"
+        :bordered="false"
+      >
+        <template
+          #note
+        >
+          <t-switch
+            :default-value="true"
+            disabled
+          />
+        </template>
+      </t-cell>
+    </view>
+  </view>
+</template>
+
+<script>
+import tCell from 'tdesign-uniapp/cell/cell.vue';
+import tSwitch from 'tdesign-uniapp/switch/switch.vue';
+export default {
+  components: {
+    tCell,
+    tSwitch,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.group {
+    margin-top: 32rpx;
+}
+
+.group + .demo-desc {
+    margin-top: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/_example/switch.less b/packages/tdesign-uniapp/components/switch/_example/switch.less
new file mode 100644
index 000000000..b4cd57dfb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/switch.less
@@ -0,0 +1,3 @@
+page {
+    --td-cell-height: 112rpx;
+}
diff --git a/packages/tdesign-uniapp/components/switch/_example/switch.vue b/packages/tdesign-uniapp/components/switch/_example/switch.vue
new file mode 100644
index 000000000..835efad6f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/_example/switch.vue
@@ -0,0 +1,67 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Switch"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Switch 开关"
+        desc="用于控制某个功能的开启和关闭。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础开关"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="带描述开关">
+        <labelDemo />
+      </t-demo>
+
+      <t-demo desc="自定义颜色开关">
+        <color />
+      </t-demo>
+
+      <t-demo title="02 组件状态">
+        <status />
+      </t-demo>
+
+      <t-demo
+        title="03 组件样式"
+        desc="开关尺寸"
+      >
+        <size />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import labelDemo from './label/index.vue';
+import color from './color/index.vue';
+import status from './status/index.vue';
+import size from './size/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    labelDemo,
+    color,
+    status,
+    size,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './switch.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/props.ts b/packages/tdesign-uniapp/components/switch/props.ts
new file mode 100644
index 000000000..5da7b1b08
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/props.ts
@@ -0,0 +1,53 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwitchProps } from './type';
+export default {
+  /** 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close'] */
+  customValue: {
+    type: Array,
+    default: (): TdSwitchProps['customValue'] => [true, false],
+  },
+  /** 是否禁用组件。优先级：Switch.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 开关的图标；[打开时的图标，关闭时的图标] */
+  icon: {
+    type: Array,
+    default: (): TdSwitchProps['icon'] => [],
+  },
+  /** 开关内容，[开启时内容，关闭时内容]。示例：['开', '关']  */
+  label: {
+    type: Array,
+    default: (): TdSwitchProps['label'] => [],
+  },
+  /** 是否处于加载中状态 */
+  loading: Boolean,
+  /** 开关尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdSwitchProps['size'],
+    validator(val: TdSwitchProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 开关值 */
+  value: {
+    type: [String, Number, Boolean],
+  },
+  /** 开关值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Boolean],
+  },
+  /** 数据发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/switch/switch.less b/packages/tdesign-uniapp/components/switch/switch.less
new file mode 100644
index 000000000..774bee576
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/switch.less
@@ -0,0 +1,200 @@
+@import '../common/style/base.less';
+
+@switch-checked-color: var(--td-switch-checked-color, @brand-color);
+@switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled);
+@switch-unchecked-color: var(--td-switch-unchecked-color, @bg-color-secondarycontainer-active);
+@switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled);
+@switch-dot-disabled-color: var(--td-switch-dot-disabled-color, @font-white-1);
+
+@switch-width: var(--td-switch-width, 90rpx);
+@switch-height: var(--td-switch-height, 56rpx);
+@switch-radius: var(--td-switch-radius, calc(@switch-height / 2));
+
+// large
+@switch-large-width: var(--td-switch-large-width, 104rpx);
+@switch-large-height: var(--td-switch-large-height, 64rpx);
+@switch-large-radius: var(--td-switch-large-radius, calc(@switch-large-height / 2));
+
+// small
+@switch-small-width: var(--td-switch-small-width, 78rpx);
+@switch-small-height: var(--td-switch-small-height, 48rpx);
+@switch-small-radius: var(--td-switch-small-radius, calc(@switch-small-height / 2));
+
+@switch-dot-size: var(--td-switch-dot-size, 44rpx);
+@switch-dot-plain-size: var(--td-switch-dot-plain-size, 36rpx);
+@switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 6rpx);
+@switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 10rpx);
+@switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1);
+
+// large dot
+@switch-dot-large-size: var(--td-switch-dot-large-size, 52rpx);
+@switch-dot-plain-large-size: var(--td-switch-dot-plain-large-size, 44rpx);
+
+// small dot
+@switch-dot-small-size: var(--td-switch-dot-small-size, 36rpx);
+@switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 28rpx);
+
+@switch-label-font-size: var(--td-switch-label-font-size, 28rpx);
+@switch-label-large-font-size: var(--td-switch-label-large-font-size, 32rpx);
+@switch-label-small-font-size: var(--td-switch-label-small-font-size, 24rpx);
+
+@switch-label-color: var(--td-switch-label-color, @bg-color-secondarycontainer-active);
+@switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color);
+
+// icon
+@switch-icon-size: var(--td-switch-icon-size, 40rpx);
+@switch-icon-large-size: var(--td-switch-icon-large-size, 48rpx);
+@switch-icon-small-size: var(--td-switch-icon-small-size, 32rpx);
+
+@switch-loading-color: var(--td-switch-loading-color, @brand-color);
+
+.@{prefix}-switch {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &__label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    font-size: @switch-label-font-size;
+    color: @switch-label-color;
+    overflow: hidden;
+
+    &--checked {
+      color: @switch-label-checked-color;
+    }
+
+    &--disabled {
+      color: @switch-unchecked-disabled-color;
+    }
+
+    &--checked&--disabled {
+      color: @switch-checked-disabled-color;
+    }
+
+    &--large {
+      font-size: @switch-label-large-font-size;
+    }
+
+    &--small {
+      font-size: @switch-label-small-font-size;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__icon {
+    font-size: @switch-icon-size;
+
+    &--large {
+      font-size: @switch-icon-large-size;
+    }
+
+    &--small {
+      font-size: @switch-icon-small-size;
+    }
+  }
+
+  &__loading {
+    --td-loading-color: @switch-loading-color;
+  }
+
+  &__body {
+    vertical-align: middle;
+    width: @switch-width;
+    height: @switch-height;
+    border-radius: @switch-radius;
+    background-color: @switch-unchecked-color;
+    position: relative;
+    transition: all 0.3s ease;
+    overflow: hidden;
+
+    &--checked {
+      background-color: @switch-checked-color;
+    }
+
+    &--disabled {
+      background-color: @switch-unchecked-disabled-color;
+    }
+
+    &--checked&--disabled {
+      background-color: @switch-checked-disabled-color;
+    }
+
+    &--large {
+      width: @switch-large-width;
+      height: @switch-large-height;
+      border-radius: @switch-large-radius;
+    }
+
+    &--small {
+      width: @switch-small-width;
+      height: @switch-small-height;
+      border-radius: @switch-small-radius;
+    }
+  }
+
+  &__dot {
+    position: absolute;
+    left: @switch-dot-horizontal-margin;
+    top: 50%;
+    width: @switch-dot-size;
+    height: @switch-dot-size;
+    border-radius: 50%;
+    background-color: @text-color-anti;
+    transition: all 0.3s;
+    transform: translateY(-50%);
+    box-shadow: @switch-dot-shadow;
+
+    &--disabled {
+      background-color: @switch-dot-disabled-color;
+    }
+
+    &--large {
+      width: @switch-dot-large-size;
+      height: @switch-dot-large-size;
+    }
+
+    &--small {
+      width: @switch-dot-small-size;
+      height: @switch-dot-small-size;
+    }
+
+    &--checked {
+      left: calc(@switch-width - @switch-dot-size - @switch-dot-horizontal-margin);
+    }
+
+    &--large&--checked {
+      left: calc(@switch-large-width - @switch-dot-large-size - @switch-dot-horizontal-margin);
+    }
+
+    &--small&--checked {
+      left: calc(@switch-small-width - @switch-dot-small-size - @switch-dot-horizontal-margin);
+    }
+
+    &--plain:not(&--checked) {
+      width: @switch-dot-plain-size;
+      height: @switch-dot-plain-size;
+      left: @switch-dot-plain-horizontal-margin;
+    }
+
+    &--large&--plain:not(&--checked) {
+      width: @switch-dot-plain-large-size;
+      height: @switch-dot-plain-large-size;
+    }
+
+    &--small&--plain:not(&--checked) {
+      width: @switch-dot-plain-small-size;
+      height: @switch-dot-plain-small-size;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/switch/switch.vue b/packages/tdesign-uniapp/components/switch/switch.vue
new file mode 100644
index 000000000..94587d829
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/switch.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="tClass + ' ' + classPrefix"
+    :aria-checked="checked"
+    :aria-disabled="disabled"
+    aria-role="switch"
+    @click="handleSwitch"
+  >
+    <view :class="_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size]) + ' ' + tClassBody">
+      <view
+        :class="
+          _.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size]) +
+            ' ' +
+            tClassDot
+        "
+        :aria-hidden="true"
+      >
+        <view
+          v-if="label"
+          :class="_.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size]) + ' ' + tClassLabel"
+        >
+          <t-loading
+            v-if="loading"
+            inherit-color
+            size="32rpx"
+          />
+          <text v-else-if="label.length == 2">
+            {{ checked ? label[0] : label[1] }}
+          </text>
+          <t-icon
+            v-else-if="icon.length == 2"
+            :name="checked ? icon[0] : icon[1]"
+            :t-class="_.cls(classPrefix + '__icon', [['checked', checked], size])"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tLoading from '../loading/loading';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-switch`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-body`,
+    `${prefix}-class-dot`,
+  ],
+  components: {
+    tIcon,
+    tLoading,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['change'],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      checked: false,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler(val) {
+        const [activeValue] = this.customValue;
+
+        this.checked = val === activeValue;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleSwitch() {
+      const { loading, disabled, dataValue, customValue } = this;
+      const [activeValue, inactiveValue] = customValue;
+      if (loading || disabled) return;
+
+      this._trigger('change', {
+        value: dataValue === activeValue ? inactiveValue : activeValue,
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './switch.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/switch/type.ts b/packages/tdesign-uniapp/components/switch/type.ts
new file mode 100644
index 000000000..6141b2ea8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/switch/type.ts
@@ -0,0 +1,51 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSwitchProps<T = SwitchValue> {
+  /**
+   * 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']
+   * @default [true, false]
+   */
+  customValue?: Array<SwitchValue>;
+  /**
+   * 是否禁用组件。优先级：Switch.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 开关的图标；[打开时的图标，关闭时的图标]
+   * @default []
+   */
+  icon?: string[];
+  /**
+   * 开关内容，[开启时内容，关闭时内容]。示例：['开', '关']
+   * @default []
+   */
+  label?: string[];
+  /**
+   * 是否处于加载中状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 开关尺寸
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * 开关值
+   */
+  value?: SwitchValue;
+  /**
+   * 开关值，非受控属性
+   */
+  defaultValue?: SwitchValue;
+  /**
+   * 数据发生变化时触发
+   */
+  onChange?: (context: { value: SwitchValue }) => void;
+}
+
+export type SwitchValue = string | number | boolean;
diff --git a/packages/tdesign-uniapp/components/tab-bar-item/props.ts b/packages/tdesign-uniapp/components/tab-bar-item/props.ts
new file mode 100644
index 000000000..111e8a88e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar-item/props.ts
@@ -0,0 +1,25 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 图标右上角提示信息 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 图标名称。传入对象时透传至 Icon 组件 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 二级菜单 */
+  subTabBar: {
+    type: Array,
+  },
+  /** 标识符 */
+  value: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.less b/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.less
new file mode 100644
index 000000000..746f1b45c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.less
@@ -0,0 +1,152 @@
+@import '../common/style/base.less';
+
+@item: ~'@{prefix}-tab-bar-item';
+
+@tab-bar-height: var(--td-tab-bar-height, 80rpx);
+@tab-bar-color: var(--td-tab-bar-color, @text-color-primary);
+@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container);
+@tab-bar-border-color: var(--td-tab-bar-border-color, @border-color);
+@tab-bar-hover-bg-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
+@tab-bar-active-color: var(--td-tab-bar-active-color, @brand-color);
+@tab-bar-active-bg: var(--td-tab-bar-active-bg, @brand-color-light);
+@tab-bar-spread-shadow: var(--td-tab-bar-spread-shadow, @shadow-3);
+@tab-bar-spread-border-color: var(--td-tab-bar-spread-border-color, @border-color);
+
+:host {
+  flex: 1;
+}
+
+.@{item} {
+  flex: 1;
+  height: @tab-bar-height;
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+  margin: 16rpx 0;
+  background-color: @tab-bar-bg-color;
+  padding: 0 24rpx;
+
+  &--text-only {
+    font-size: 32rpx;
+  }
+
+  &--split {
+    & + &::before {
+      .hairline-left(@color: @tab-bar-border-color);
+      top: 16rpx;
+      bottom: 16rpx;
+    }
+  }
+
+  &--crowded {
+    padding: 0 16rpx;
+  }
+
+  &--round {
+    border-radius: 99px;
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16rpx;
+    color: @tab-bar-color;
+
+    &--checked {
+      color: @tab-bar-active-color;
+      font-weight: 600;
+    }
+
+    &--tag {
+      border-radius: 99px;
+    }
+
+    &--tag&--checked {
+      background-color: @tab-bar-active-bg;
+    }
+
+    // &--active {
+    //   background-color: @tab-bar-hover-bg-color;
+    // }
+  }
+
+  &__icon {
+    display: contents;
+  }
+
+  &__icon:empty {
+    display: none;
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+
+    &--small {
+      font-size: 20rpx;
+      line-height: 32rpx;
+    }
+  }
+
+  &__icon-menu {
+    margin-right: 8rpx;
+  }
+
+  &__spread {
+    position: absolute;
+    top: 0;
+    left: 7%;
+    width: 86%;
+    background-color: @tab-bar-bg-color;
+    transform: translate3d(0, calc(-100% - 32rpx), 0);
+    z-index: 1;
+    border-radius: 12rpx;
+    color: @tab-bar-color;
+    box-shadow: @tab-bar-spread-shadow;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border: 16rpx solid transparent;
+      border-top: 16rpx solid @tab-bar-bg-color;
+      transform: translate3d(-50%, 32rpx, 0);
+    }
+
+    &-item {
+      width: 100%;
+      height: 96rpx;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      position: relative;
+      flex-direction: column;
+
+      &--active {
+        background-color: @tab-bar-hover-bg-color;
+      }
+
+      &-split {
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        background-color: @tab-bar-spread-border-color;
+        width: 80%;
+        height: 1px;
+        transform: translateY(0.5);
+      }
+
+      &-text {
+        padding-top: 24rpx;
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.vue b/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.vue
new file mode 100644
index 000000000..42dd2c873
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar-item/tab-bar-item.vue
@@ -0,0 +1,222 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [
+      ['split', split], ['text-only', !icon],
+      ['crowded', crowded], shape]
+    ) + ' ' + tClass"
+  >
+    <view
+      :class="_.cls(classPrefix + '__content', [['checked', isChecked], theme])"
+      :hover-class="classPrefix + '__content--active'"
+      :hover-stay-time="200"
+      :aria-selected="(!hasChildren || !isSpread) && isChecked ? true : false"
+      :aria-expanded="hasChildren && isSpread ? true : ''"
+      :aria-role="hasChildren ? 'button' : 'tab'"
+      :aria-label="ariaLabel || (badgeProps.dot || badgeProps.count ? _.getBadgeAriaLabel({ ...badgeProps }) : '')"
+      @click="toggle"
+    >
+      <view
+        :class="classPrefix + '__icon'"
+        :style="'height: ' + (iconOnly ? 24 : 20) + 'px'"
+        :aria-hidden="badgeProps.dot || badgeProps.count"
+      >
+        <t-badge
+          v-if="badgeProps.dot || badgeProps.count"
+          :count="badgeProps.count || 0"
+          :max-count="badgeProps.maxCount || 99"
+          :dot="badgeProps.dot || false"
+          :content="badgeProps.content || ''"
+          :size="badgeProps.size || 'medium'"
+          :visible="badgeProps.visible"
+          :offset="badgeProps.offset || [0, 0]"
+          :t-class-count="prefix + '-badge-class'"
+        >
+          <block
+            v-if="_icon"
+            name="icon"
+          >
+            <t-icon
+              :custom-style="_icon.style || ''"
+              :t-class="_icon.tClass || ''"
+              :prefix="_icon.prefix"
+              :name="_icon.name"
+              :size="_icon.size || (iconOnly ? 24 : 20)"
+              :color="_icon.color"
+              :aria-hidden="_icon.ariaHidden"
+              :aria-label="_icon.ariaLabel"
+              :aria-role="_icon.ariaRole"
+              @click="_icon.click || ''"
+            />
+          </block>
+          <!-- 避免被 badge 组件识别为空，t-badge__content:not(:empty) -->
+          <view v-else />
+        </t-badge>
+        <block
+          v-else-if="!!icon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_icon.style || ''"
+            :t-class="_icon.tClass || ''"
+            :prefix="_icon.prefix"
+            :name="_icon.name"
+            :size="_icon.size || (iconOnly ? 24 : 20)"
+            :color="_icon.color"
+            :aria-hidden="!iconOnly"
+            :aria-label="_icon.ariaLabel"
+            :aria-role="_icon.ariaRole"
+            @click="_icon.click || ''"
+          />
+        </block>
+        <slot name="icon" />
+      </view>
+      <view :class="_.cls(classPrefix + '__text', [['small', !!icon]])">
+        <t-icon
+          v-if="hasChildren"
+          name="view-list"
+          size="32rpx"
+          :t-class="classPrefix + '__icon-menu'"
+        />
+        <slot />
+      </view>
+    </view>
+    <view
+      v-if="hasChildren && isSpread"
+      :class="classPrefix + '__spread'"
+    >
+      <view
+        v-for="(child, index) in (subTabBar || [])"
+        :key="index"
+        :class="classPrefix + '__spread-item'"
+        :hover-class="classPrefix + '__spread-item--active'"
+        :hover-stay-time="200"
+        :data-value="child.value || index"
+        aria-role="tab"
+        @click="selectChild"
+      >
+        <view
+          v-if="index !== 0"
+          :class="classPrefix + '__spread-item-split'"
+        />
+
+        <view
+          :class="classPrefix + '__spread-item-text'"
+          :data-value="child.value || index"
+        >
+          {{ child.label }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tBadge from '../badge/badge';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, calcIcon } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+const classPrefix = `${prefix}-tab-bar-item`;
+
+
+export default uniComponent({
+  name: classPrefix,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.TabBarItem)],
+  components: {
+    tIcon,
+    tBadge,
+  },
+  props: {
+    ...props,
+  },
+  emits: [],
+  watch: {
+    subTabBar: {
+      handler(value) {
+        this.hasChildren = value?.length > 0;
+      },
+      immediate: true,
+    },
+    icon: {
+      handler(v) {
+        this._icon = calcIcon(v);
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix,
+      isSpread: false,
+      isChecked: false,
+      hasChildren: false,
+      currentName: '',
+      split: true,
+      iconOnly: false,
+      theme: '',
+      crowded: false,
+      shape: 'normal',
+      _,
+    };
+  },
+  async mounted() {
+    const res = await getRect(this, `.${classPrefix}__text`);
+
+    this.iconOnly = res.height === 0;
+  },
+  methods: {
+    innerAfterLinked() {
+      const parent = this[RELATION_MAP.TabBarItem];
+      const { theme, split, shape } = parent;
+
+      this.theme = theme;
+      this.split = split;
+      this.shape = shape;
+      this.currentName = this.value ? this.value : parent.initName();
+
+      parent.updateChildren();
+    },
+    showSpread() {
+      this.isSpread = true;
+    },
+    toggle() {
+      const { currentName, hasChildren, isSpread } = this;
+
+      if (hasChildren) {
+        this.isSpread = !isSpread;
+      }
+      this[RELATION_MAP.TabBarItem].updateValue(currentName);
+      this[RELATION_MAP.TabBarItem].changeOtherSpread(currentName);
+    },
+    selectChild(event) {
+      const { value } = event.target.dataset;
+
+      this[RELATION_MAP.TabBarItem].updateValue(value);
+      this.isSpread = false;
+    },
+    checkActive(value) {
+      const { currentName, subTabBar = [] } = this;
+      const isChecked = subTabBar?.some(item => item.value === value) || currentName === value;
+
+      this.isChecked = isChecked;
+    },
+    closeSpread() {
+      this.isSpread = false;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-bar-item.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar-item/type.ts b/packages/tdesign-uniapp/components/tab-bar-item/type.ts
new file mode 100644
index 000000000..33dd14865
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar-item/type.ts
@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+
+export interface TdTabBarItemProps {
+  /**
+   * 图标右上角提示信息
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 图标名称。传入对象时透传至 Icon 组件
+   */
+  icon?: string | object;
+  /**
+   * 二级菜单
+   */
+  subTabBar?: SubTabBarItem[];
+  /**
+   * 标识符
+   */
+  value?: string | number;
+}
+
+export interface SubTabBarItem {
+  value: string;
+  label: string;
+}
diff --git a/packages/tdesign-uniapp/components/tab-bar/README.en-US.md b/packages/tdesign-uniapp/components/tab-bar/README.en-US.md
new file mode 100644
index 000000000..10a4fcca8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/README.en-US.md
@@ -0,0 +1,64 @@
+:: BASE_DOC ::
+
+## API
+
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bordered | Boolean | true | \- | N
+fixed | Boolean | true | \- | N
+safe-area-inset-bottom | Boolean | true | \- | N
+shape | String | normal | options: normal/round | N
+split | Boolean | true | \- | N
+theme | String | normal | options: normal/tag | N
+value | String / Number / Array | - | `v-model:value` is supported。Typescript：`string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | - | uncontrolled property。Typescript：`string \| number \| Array<string \| number>` | N
+
+### TabBar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string \| number })` | \-
+
+### TabBar External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/type.ts) | N
+icon | String / Object | - | \- | N
+sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/type.ts) | N
+value | String / Number | - | \- | N
+
+### TabBarItem Slots
+
+name | Description
+-- | --
+icon | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-level-1-color | - 
+--td-tab-bar-round-shadow | @shadow-3 | - 
+--td-tab-bar-active-bg | @brand-color-light | - 
+--td-tab-bar-active-color | @brand-color | - 
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-color | @text-color-primary | - 
+--td-tab-bar-height | 80rpx | - 
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | - 
+--td-tab-bar-spread-border-color | @border-color | - 
+--td-tab-bar-spread-shadow | @shadow-3 | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tab-bar/README.md b/packages/tdesign-uniapp/components/tab-bar/README.md
new file mode 100644
index 000000000..633447057
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/README.md
@@ -0,0 +1,110 @@
+---
+title: TabBar 标签栏
+description: 用于在不同功能模块之间进行快速切换，位于页面底部。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import TTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+```
+
+### 组件类型
+#### 纯文本标签栏
+
+{{ text-only }}
+
+#### 图标加文字标签栏
+
+{{ base }}
+
+#### 纯图标标签栏
+
+{{ icon-only }}
+
+#### 双层级纯文本标签栏
+
+{{ sub }}
+
+### 组件样式
+
+#### 弱选中标签栏
+
+{{ badge }}
+
+#### 悬浮胶囊标签栏
+
+{{ round }}
+
+#### 自定义主题
+
+{{ custom }}
+
+## API
+
+### TabBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bordered | Boolean | true | 是否显示外边框 | N
+fixed | Boolean | true | 是否固定在底部 | N
+safe-area-inset-bottom | Boolean | true | 是否开启底部安全区适配 | N
+shape | String | normal | 标签栏的形状。可选项：normal/round | N
+split | Boolean | true | 是否需要分割线 | N
+theme | String | normal | 选项风格。可选项：normal/tag | N
+value | String / Number / Array | - | 当前选中标签的索引。支持语法糖 `v-model:value`。TS 类型：`string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | - | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | N
+
+### TabBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string \| number })` | 选中标签切换时触发
+
+### TabBar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### TabBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | {} | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/type.ts) | N
+icon | String / Object | - | 图标名称。传入对象时透传至 Icon 组件 | N
+sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/type.ts) | N
+value | String / Number | - | 标识符 | N
+
+### TabBarItem Slots
+
+名称 | 描述
+-- | --
+icon | 图标插槽，用于自定义图标区域内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-tab-bar-bg-color | @bg-color-container | - |
+| --td-tab-bar-border-color | @border-level-1-color | - |
+| --td-tab-bar-round-shadow | @shadow-3 | - |
+| --td-tab-bar-active-bg | @brand-color-light | - |
+| --td-tab-bar-active-color | @brand-color | - |
+| --td-tab-bar-bg-color | @bg-color-container | - |
+| --td-tab-bar-border-color | @border-color | - |
+| --td-tab-bar-color | @text-color-primary | - |
+| --td-tab-bar-height | 80rpx | - |
+| --td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | - |
+| --td-tab-bar-spread-border-color | @border-color | - |
+| --td-tab-bar-spread-shadow | @shadow-3 | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/badge/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/badge/index.vue
new file mode 100644
index 000000000..b5b04ec3e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/badge/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <view>
+    <!-- 文本 + 徽标 -->
+    <view class="wrapper">
+      <t-tab-bar
+        t-class="t-tab-bar"
+        default-value="label1"
+      >
+        <t-tab-bar-item
+          :badge-props="{count: 16, offset: [16, 0]} "
+          aria-label="首页，有16条消息"
+          value="label1"
+        >
+          首页
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{ dot: true, offset: [16, 0] }"
+          aria-label="应用，有新的消息"
+          value="label2"
+        >
+          应用
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{count: 'New', offset: [16, 0]}"
+          aria-label="聊天，New"
+          value="label3"
+        >
+          聊天
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{count: '···', offset: [16, 0]}"
+          aria-label="我的，有很多消息"
+          value="label4"
+        >
+          我的
+        </t-tab-bar-item>
+      </t-tab-bar>
+    </view>
+
+    <!-- 图标 + 徽标 -->
+    <view class="wrapper">
+      <t-tab-bar
+        t-class="t-tab-bar"
+        default-value="label1"
+        :split="false"
+      >
+        <t-tab-bar-item
+          :badge-props="{count: 16}"
+          aria-label="首页，有16条消息"
+          value="label1"
+          icon="home"
+        />
+        <t-tab-bar-item
+          :badge-props="{ dot: true }"
+          aria-label="应用，有新的消息"
+          value="label2"
+          icon="app"
+        />
+        <t-tab-bar-item
+          :badge-props="{count: 'New'}"
+          aria-label="聊天，New"
+          value="label3"
+          icon="chat"
+        />
+        <t-tab-bar-item
+          :badge-props="{count: '···'}"
+          aria-label="我的，有很多消息"
+          value="label4"
+          icon="user"
+        />
+      </t-tab-bar>
+    </view>
+
+    <!-- 文本 + 图标 + 徽标 -->
+    <view class="wrapper">
+      <t-tab-bar
+        t-class="t-tab-bar"
+        default-value="label1"
+        :split="false"
+      >
+        <t-tab-bar-item
+          :badge-props="{count: 16}"
+          aria-label="首页，有16条消息"
+          value="label1"
+          icon="home"
+        >
+          首页
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{ dot: true }"
+          aria-label="应用，有新的消息"
+          value="label2"
+          icon="app"
+        >
+          应用
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{count: 'New'}"
+          aria-label="聊天，New"
+          value="label3"
+          icon="chat"
+        >
+          聊天
+        </t-tab-bar-item>
+        <t-tab-bar-item
+          :badge-props="{count: '···'}"
+          aria-label="我的，有很多消息"
+          value="label4"
+          icon="user"
+        >
+          我的
+        </t-tab-bar-item>
+      </t-tab-bar>
+    </view>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      list: [
+        {
+          value: 'label_1',
+          label: '文字',
+          icon: 'home',
+        },
+        {
+          value: 'label_2',
+          label: '文字',
+          icon: 'app',
+        },
+        {
+          value: 'label_3',
+          label: '文字',
+          icon: 'chat',
+        },
+        {
+          value: 'label_4',
+          label: '文字',
+          icon: 'user',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.wrapper:not(:last-child) {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/base/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/base/index.vue
new file mode 100644
index 000000000..d84c95874
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/base/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <t-tab-bar
+      t-class="t-tab-bar"
+      :value="value"
+      theme="tag"
+      :split="false"
+      @change="onChange"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+        :icon="item.icon"
+      >
+        {{ item.label }}
+      </t-tab-bar-item>
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      value: 'label_1',
+      list: [
+        {
+          value: 'label_1',
+          label: '首页',
+          icon: 'home',
+        },
+        {
+          value: 'label_2',
+          label: '应用',
+          icon: 'app',
+        },
+        {
+          value: 'label_3',
+          label: '聊天',
+          icon: 'chat',
+        },
+        {
+          value: 'label_4',
+          label: '我的',
+          icon: 'user',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/custom/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/custom/index.vue
new file mode 100644
index 000000000..f61baa6c2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/custom/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="wrapper">
+    <t-tab-bar
+      t-class="t-tab-bar"
+      :value="value"
+      @change="onChange"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+        :icon="item.icon"
+        :aria-label="item.ariaLabel"
+      />
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      value: 'label_1',
+      list: [
+        {
+          value: 'label_1',
+          icon: 'home',
+          ariaLabel: '首页',
+        },
+        {
+          value: 'label_2',
+          icon: 'app',
+          ariaLabel: '软件',
+        },
+        {
+          value: 'label_3',
+          icon: 'chat',
+          ariaLabel: '聊天',
+        },
+        {
+          value: 'label_4',
+          icon: 'user',
+          ariaLabel: '我的',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+    --td-tab-bar-border-color: var(--td-border-level-1-color, #e7e7e7);
+    --td-tab-bar-bg-color: var(--td-bg-color-secondarycontainer, #f3f3f3);
+    --td-tab-bar-hover-color: #ddd;
+    --td-tab-bar-item-color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
+    --td-tab-bar-item-active-color: var(--td-brand-color, #0052d9);
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/icon-only/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/icon-only/index.vue
new file mode 100644
index 000000000..e28b85c64
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/icon-only/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <view>
+    <t-tab-bar
+      t-class="t-tab-bar"
+      :value="value"
+      theme="tag"
+      :split="false"
+      @change="onChange"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+        :icon="item.icon"
+        :aria-label="item.ariaLabel"
+      />
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      value: 'label_1',
+      list: [
+        {
+          value: 'label_1',
+          icon: 'home',
+          ariaLabel: '首页',
+        },
+        {
+          value: 'label_2',
+          icon: 'app',
+          ariaLabel: '软件',
+        },
+        {
+          value: 'label_3',
+          icon: 'chat',
+          ariaLabel: '聊天',
+        },
+        {
+          value: 'label_4',
+          icon: 'user',
+          ariaLabel: '我的',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/round/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/round/index.vue
new file mode 100644
index 000000000..81a704b41
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/round/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <view>
+    <t-tab-bar
+      t-class="t-tab-bar"
+      :value="value"
+      shape="round"
+      theme="tag"
+      :split="false"
+      @change="onChange"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+        :icon="item.icon"
+        :aria-label="item.ariaLabel"
+      />
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      value: 'label_1',
+      list: [
+        {
+          value: 'label_1',
+          icon: 'home',
+          ariaLabel: '首页',
+        },
+        {
+          value: 'label_2',
+          icon: 'app',
+          ariaLabel: '软件',
+        },
+        {
+          value: 'label_3',
+          icon: 'chat',
+          ariaLabel: '聊天',
+        },
+        {
+          value: 'label_4',
+          icon: 'user',
+          ariaLabel: '我的',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.less b/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.less
new file mode 100644
index 000000000..d08347170
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.less
@@ -0,0 +1,16 @@
+.demo {
+    .mb-12 {
+        margin-bottom: 24rpx;
+        display: block;
+    }
+
+    .mg-16 {
+        margin: 32rpx;
+    }
+
+    .t-tab-bar {
+        position: relative;
+        padding-bottom: 0 !important;
+        bottom: 0 !important;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.vue b/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.vue
new file mode 100644
index 000000000..185f8b3ea
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/skyline/tab-bar.vue
@@ -0,0 +1,105 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block"
+      title="TabBar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+      :scroll-top="scrollTo"
+      @scroll="onScroll"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          TabBar 标签栏
+        </view>
+        <view class="demo-desc">
+          用于在不同功能模块之间进行快速切换，位于页面底部。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="纯文本标签栏"
+        >
+          <text-only />
+        </t-demo>
+
+        <t-demo desc="图标加文字标签栏">
+          <baseDemo />
+        </t-demo>
+
+        <t-demo desc="纯图标标签栏">
+          <icon-only />
+        </t-demo>
+
+        <t-demo desc="双层级纯文本标签栏">
+          <subDemo />
+        </t-demo>
+
+        <t-demo
+          title="02 组件样式"
+          desc="弱选中标签栏"
+        >
+          <badge />
+        </t-demo>
+
+        <t-demo desc="悬浮胶囊标签栏">
+          <round />
+        </t-demo>
+
+        <t-demo
+          title="03 自定义"
+          desc="自定义样式"
+        >
+          <custom />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import textOnly from '../text-only/index.vue';
+import iconOnly from '../icon-only/index.vue';
+import baseDemo from '../base/index.vue';
+import subDemo from '../sub/index.vue';
+import badge from '../badge/index.vue';
+import round from '../round/index.vue';
+import custom from '../custom/index.vue';
+export default {
+  components: {
+    tNavbar,
+    textOnly,
+    iconOnly,
+    baseDemo,
+    subDemo,
+    badge,
+    round,
+    custom,
+  },
+  data() {
+    return {
+      value: 'label_1',
+      scrollTo: '',
+    };
+  },
+  methods: {
+    onChange(event: any) {
+      console.log(event);
+    },
+
+    onScroll() {
+      console.log('占位：函数 onScroll 未声明');
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './tab-bar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/sub/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/sub/index.vue
new file mode 100644
index 000000000..be89c8ca0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/sub/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <view>
+    <t-tab-bar
+      t-class="t-tab-bar"
+      default-value="user"
+      theme="tag"
+      :split="false"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+        :sub-tab-bar="item.children"
+      >
+        {{ item.label }}
+      </t-tab-bar-item>
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+const list = [
+  {
+    value: 'home',
+    label: '首页',
+    icon: 'home',
+    children: [],
+  },
+  {
+    value: 'app',
+    label: '应用',
+    icon: 'app',
+    children: [],
+  },
+  {
+    value: 'user',
+    label: '我的',
+    children: [
+      {
+        value: 'info',
+        label: '基本信息',
+      },
+      {
+        value: 'home-page',
+        label: '个人主页',
+      },
+      {
+        value: 'setting',
+        label: '设置',
+      },
+    ],
+  },
+];
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      list,
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.less b/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.less
new file mode 100644
index 000000000..254f075b6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.less
@@ -0,0 +1,16 @@
+.demo {
+    .mb-12 {
+        margin-bottom: 24rpx;
+        display: block;
+    }
+
+    .mg-16 {
+        margin: 32rpx;
+    }
+
+    :deep(.t-tab-bar) {
+        position: relative !important;
+        padding-bottom: 0 !important;
+        bottom: 0 !important;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.vue b/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.vue
new file mode 100644
index 000000000..0455ab60e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/tab-bar.vue
@@ -0,0 +1,87 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="TabBar"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="TabBar 标签栏"
+        desc="用于在不同功能模块之间进行快速切换，位于页面底部。"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="纯文本标签栏"
+      >
+        <text-only />
+      </t-demo>
+
+      <t-demo desc="图标加文本标签栏">
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="纯图标标签栏">
+        <icon-only />
+      </t-demo>
+
+      <t-demo desc="双层级文本标签栏">
+        <subDemo />
+      </t-demo>
+
+      <t-demo
+        title="02 组件样式"
+        desc="弱选中标签栏"
+      >
+        <badge />
+      </t-demo>
+
+      <t-demo desc="悬浮胶囊标签栏">
+        <round />
+      </t-demo>
+
+      <t-demo
+        title="03 自定义"
+        desc="自定义样式"
+      >
+        <custom />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import textOnly from './text-only/index.vue';
+import iconOnly from './icon-only/index.vue';
+import BaseDemo from './base/index.vue';
+import subDemo from './sub/index.vue';
+import badge from './badge/index.vue';
+import round from './round/index.vue';
+import custom from './custom/index.vue';
+export default {
+  components: {
+    textOnly,
+    iconOnly,
+    BaseDemo,
+    subDemo,
+    badge,
+    round,
+    custom,
+  },
+  data() {
+    return {
+      value: 'label_1',
+    };
+  },
+  methods: {
+    onChange(event: any) {
+      console.log(event);
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './tab-bar.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/_example/text-only/index.vue b/packages/tdesign-uniapp/components/tab-bar/_example/text-only/index.vue
new file mode 100644
index 000000000..7e8eff7c7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/_example/text-only/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <view>
+    <t-tab-bar
+      t-class="t-tab-bar"
+      :value="value"
+      theme="tag"
+      :split="false"
+      @change="onChange"
+    >
+      <t-tab-bar-item
+        v-for="(item, index) in list"
+        :key="index"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </t-tab-bar-item>
+    </t-tab-bar>
+  </view>
+</template>
+
+<script>
+import tTabBar from 'tdesign-uniapp/tab-bar/tab-bar.vue';
+import tTabBarItem from 'tdesign-uniapp/tab-bar-item/tab-bar-item.vue';
+export default {
+  components: {
+    tTabBar,
+    tTabBarItem,
+  },
+  data() {
+    return {
+      value: 'home',
+      list: [
+        {
+          value: 'home',
+          label: '首页',
+        },
+        {
+          value: 'app',
+          label: '应用',
+        },
+        {
+          value: 'chat',
+          label: '聊天',
+        },
+        {
+          value: 'user',
+          label: '我的',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/props.ts b/packages/tdesign-uniapp/components/tab-bar/props.ts
new file mode 100644
index 000000000..fdcdd0d14
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/props.ts
@@ -0,0 +1,60 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTabBarProps } from './type';
+export default {
+  /** 是否显示外边框 */
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否固定在底部 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启底部安全区适配 */
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标签栏的形状 */
+  shape: {
+    type: String,
+    default: 'normal' as TdTabBarProps['shape'],
+    validator(val: TdTabBarProps['shape']): boolean {
+      if (!val) return true;
+      return ['normal', 'round'].includes(val);
+    },
+  },
+  /** 是否需要分割线 */
+  split: {
+    type: Boolean,
+    default: true,
+  },
+  /** 选项风格 */
+  theme: {
+    type: String,
+    default: 'normal' as TdTabBarProps['theme'],
+    validator(val: TdTabBarProps['theme']): boolean {
+      if (!val) return true;
+      return ['normal', 'tag'].includes(val);
+    },
+  },
+  /** 当前选中标签的索引 */
+  value: {
+    type: [String, Number, Array],
+  },
+  /** 当前选中标签的索引，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Array],
+  },
+  /** 选中标签切换时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tab-bar/tab-bar.less b/packages/tdesign-uniapp/components/tab-bar/tab-bar.less
new file mode 100644
index 000000000..3ec7b5ce6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/tab-bar.less
@@ -0,0 +1,47 @@
+@import '../common/style/base.less';
+
+@tab-bar-cls: ~'@{prefix}-tab-bar';
+
+@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container);
+@tab-bar-border-color: var(--td-tab-bar-border-color, @border-level-1-color);
+@tab-bar-round-shadow: var(--td-tab-bar-round-shadow, @shadow-3);
+
+.@{tab-bar-cls} {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  font-size: 16px;
+  background-color: @tab-bar-bg-color;
+  box-sizing: border-box;
+  pointer-events: auto;
+
+  &--normal&--border::before {
+    z-index: 1;
+    .hairline-top(@color: @tab-bar-border-color);
+  }
+
+  &--fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  &--normal&--safe {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &--round {
+    margin-left: 32rpx;
+    margin-right: 32rpx;
+    border-radius: 999px;
+    box-shadow: @tab-bar-round-shadow;
+  }
+
+  &--fixed&--round&--safe {
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tab-bar/tab-bar.vue b/packages/tdesign-uniapp/components/tab-bar/tab-bar.vue
new file mode 100644
index 000000000..f912915fa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/tab-bar.vue
@@ -0,0 +1,113 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [
+      ['border', bordered], ['fixed', fixed],
+      ['safe', safeAreaInsetBottom], shape]
+    ) + ' ' + tClass"
+    aria-role="tablist"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { coalesce } from '../common/utils';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import _ from '../common/utils.wxs';
+
+const classPrefix = `${prefix}-tab-bar`;
+
+
+export default uniComponent({
+  name: classPrefix,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'value',
+    event: 'change',
+  }],
+  externalClasses: [`${prefix}-class`],
+  mixins: [ParentMixin(RELATION_MAP.TabBarItem)],
+  props: {
+    ...props,
+  },
+  emits: [
+    'change',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(e) {
+        this.dataValue = e;
+      },
+      immediate: true,
+    },
+    dataValue: {
+      handler() {
+        this.updateChildren();
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.showChildren();
+  },
+  methods: {
+    showChildren() {
+      const { dataValue } = this;
+
+      this.children.forEach((child) => {
+        this.crowded = this.children.length > 3;
+
+        if (child.value === dataValue) {
+          child.showSpread();
+        }
+      });
+    },
+
+    updateChildren() {
+      const { dataValue } = this;
+
+      this.children?.forEach((child) => {
+        child.checkActive(dataValue);
+      });
+    },
+
+    updateValue(value) {
+      this._trigger('change', { value });
+    },
+
+    changeOtherSpread(value) {
+      this.children.forEach((child) => {
+        if (child.value !== value) {
+          child.closeSpread();
+        }
+      });
+    },
+
+    initName() {
+      return (this.backupValue += 1);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-bar.css';
+/* #ifndef MP-WEIXIN */
+:deep(t-tab-bar-item) {
+  flex: 1;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-bar/type.ts b/packages/tdesign-uniapp/components/tab-bar/type.ts
new file mode 100644
index 000000000..cdb662614
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-bar/type.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdTabBarProps {
+  /**
+   * 是否显示外边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 是否固定在底部
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 是否开启底部安全区适配
+   * @default true
+   */
+  safeAreaInsetBottom?: boolean;
+  /**
+   * 标签栏的形状
+   * @default normal
+   */
+  shape?: 'normal' | 'round';
+  /**
+   * 是否需要分割线
+   * @default true
+   */
+  split?: boolean;
+  /**
+   * 选项风格
+   * @default normal
+   */
+  theme?: 'normal' | 'tag';
+  /**
+   * 当前选中标签的索引
+   */
+  value?: string | number | Array<string | number>;
+  /**
+   * 当前选中标签的索引，非受控属性
+   */
+  defaultValue?: string | number | Array<string | number>;
+  /**
+   * 选中标签切换时触发
+   */
+  onChange?: (context: { value: string | number }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/tab-panel/props.ts b/packages/tdesign-uniapp/components/tab-panel/props.ts
new file mode 100644
index 000000000..9c016bee5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-panel/props.ts
@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否禁用当前选项卡 */
+  disabled: Boolean,
+  /** `1.0.0-rc.1`。图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 选项卡名称 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 是否启用选项卡懒加载 */
+  lazy: Boolean,
+  /** 用于自定义选项卡面板内容 */
+  panel: {
+    type: String,
+  },
+  /** 选项卡的值，唯一标识 */
+  value: {
+    type: [String, Number],
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tab-panel/tab-panel.less b/packages/tdesign-uniapp/components/tab-panel/tab-panel.less
new file mode 100644
index 000000000..b164218f7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-panel/tab-panel.less
@@ -0,0 +1,19 @@
+@import '../common/style/base.less';
+
+.@{prefix}-tab-panel {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &--active {
+    height: auto;
+  }
+
+  &--inactive {
+    height: 0;
+    overflow: visible;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tab-panel/tab-panel.vue b/packages/tdesign-uniapp/components/tab-panel/tab-panel.vue
new file mode 100644
index 000000000..5511691ee
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-panel/tab-panel.vue
@@ -0,0 +1,100 @@
+<template>
+  <view
+    v-if="!lazy || hasActivated"
+    :id="id"
+    :class="tClass + ' ' + classPrefix + ' ' + (active ? classPrefix + '--active' : classPrefix + '--inactive')"
+    :style="_._style([customStyle, hide ? 'display: none' : ''])"
+    aria-role="tabpanel"
+  >
+    <view v-if="panel">
+      {{ panel }}
+    </view>
+    <slot />
+    <slot name="panel" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import _ from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-tab-panel`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.TabPanel)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      active: false,
+      hide: true,
+      id: '',
+      hasActivated: false,
+      _,
+    };
+  },
+  watch: {
+    label: 'update',
+    badgeProps: {
+      handler() {
+        this.update();
+      },
+      deep: true,
+    },
+    disabled: 'update',
+
+    icon: 'update',
+    panel: 'update',
+    value: 'update',
+
+    lazy: 'update',
+  },
+  methods: {
+    setParent(parent) {
+      this[RELATION_MAP.TabPanel] = parent;
+      if (!parent.children.includes(this)) {
+        parent.children.push(this);
+      }
+      parent.innerAfterLinked(this);
+    },
+    setId(id) {
+      this.id = id;
+    },
+    getComputedName() {
+      if (this.value != null) {
+        return `${this.value}`;
+      }
+      return `${this.dataIndex}`;
+    },
+    update() {
+      this[RELATION_MAP.TabPanel]?.updateTabs();
+    },
+
+    render(active, parent) {
+      this.initialized = this.initialized || active;
+
+      if (active && !this.hasActivated) {
+        this.hasActivated = true;
+      }
+
+      this.active = active;
+      this.hide = !parent.animation && !active;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-panel.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/tab-panel/type.ts b/packages/tdesign-uniapp/components/tab-panel/type.ts
new file mode 100644
index 000000000..7de533a1c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tab-panel/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTabValue as TabValue } from '../tabs/type';
+
+export interface TdTabPanelProps {
+  /**
+   * 透传至 Badge 组件
+   * @default {}
+   */
+  badgeProps?: object;
+  /**
+   * 是否禁用当前选项卡
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * `1.0.0-rc.1`。图标，传对象则透传至 Icon
+   */
+  icon?: string | object;
+  /**
+   * 选项卡名称
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 用于自定义选项卡面板内容
+   */
+  panel?: string;
+  /**
+   * 选项卡的值，唯一标识
+   */
+  value?: TabValue;
+}
diff --git a/packages/tdesign-uniapp/components/tabs/README.en-US.md b/packages/tdesign-uniapp/components/tabs/README.en-US.md
new file mode 100644
index 000000000..4c3f150eb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/README.en-US.md
@@ -0,0 +1,89 @@
+:: BASE_DOC ::
+
+## API
+
+### Tabs Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+bottom-line-mode | String | fixed | options: fixed/auto/full | N
+show-bottom-line | Boolean | true | \- | N
+space-evenly | Boolean | true | \- | N
+split | Boolean | true | \- | N
+sticky | Boolean | false | \- | N
+sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+swipeable | Boolean | true | \- | N
+theme | String | line | options: line/tag/card | N
+value | String / Number | - | `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+default-value | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+
+### Tabs Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: TabValue; label: string })` | \-
+click | `(context: { value: TabValue; label: string })` | \-
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | \-
+
+### Tabs Slots
+
+name | Description
+-- | --
+\- | \-
+middle | \-
+
+### Tabs External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-active | \-
+t-class-content | \-
+t-class-item | \-
+t-class-track | \-
+
+
+### TabPanel Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | \- | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+label | String | - | \- | N
+lazy | Boolean | false | Enable tab lazy loading | N
+panel | String | - | \- | N
+value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-panel/type.ts) | N
+
+### TabPanel Slots
+
+name | Description
+-- | --
+\- | \-
+panel | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-border-color | @component-stroke | - 
+--td-tab-font-size | 28rpx | - 
+--td-tab-icon-size | 36rpx | - 
+--td-tab-item-active-color | @brand-color | - 
+--td-tab-item-color | @text-color-primary | - 
+--td-tab-item-disabled-color | @text-color-disabled | - 
+--td-tab-item-height | 96rpx | - 
+--td-tab-item-tag-active-bg | @brand-color-light | - 
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
+--td-tab-item-tag-height | 64rpx | - 
+--td-tab-item-vertical-height | 108rpx | - 
+--td-tab-item-vertical-width | 208rpx | - 
+--td-tab-nav-bg-color | @bg-color-container | - 
+--td-tab-track-color | @brand-color | - 
+--td-tab-track-radius | 8rpx | - 
+--td-tab-track-thickness | 6rpx | - 
+--td-tab-track-width | 32rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tabs/README.md b/packages/tdesign-uniapp/components/tabs/README.md
new file mode 100644
index 000000000..e1cb376a1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/README.md
@@ -0,0 +1,198 @@
+---
+title: Tabs 选项卡
+description: 用于内容分类后的展示切换。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import TTabsPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+```
+
+### 基础选项卡
+
+{{ base }}
+
+### 等距选项卡
+
+{{ scroll }}
+
+### 带图标选项卡
+
+{{ with-icon }}
+
+### 带徽章选项卡
+
+{{ with-badge }}
+
+### 带内容区选项卡
+
+{{ with-content }}
+
+### 选项卡状态
+
+{{ status }}
+
+### 选项卡尺寸
+
+{{ size }}
+
+### 选项卡样式
+
+使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片
+
+{{ theme }}
+
+<!-- 横向选项卡支持超过屏幕滑动 -->
+
+### 受控用法
+
+```html
+<t-tabs :value="value" @change="onTabsChange">
+  <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
+  <t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
+</t-tabs>
+```
+
+```js
+export default{
+  data: {
+    return {
+      value: '0',
+    };
+  },
+  methods: {
+    onTabsChange(e) {
+      this.value = e.value;
+    },
+  }
+  
+};
+```
+
+### 与 Popup 使用
+
+```html
+ <t-popup :visible="visible" @visible-change="onVisibleChange">
+  <t-tabs ref="tabs" defaultValue="0" @change="onTabsChange" @click="onTabsClick" t-class="custom-tabs">
+    <t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
+    <t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
+    <t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
+  </t-tabs>
+</t-popup>
+```
+
+```js
+export default {
+  data: {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    showPopup() {
+      this.visible = true;
+      setTimeout(() => {
+        const tabs = this.$refs['tabs'];
+
+        // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
+        tabs.setTrack(); 
+      });
+    },
+  },
+})
+```
+
+## API
+
+### Tabs Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
+show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
+space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
+split | Boolean | true | `1.1.10`。是否展示分割线 | N
+sticky | Boolean | false | 是否开启粘性布局 | N
+sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+swipeable | Boolean | true | 是否可以滑动切换 | N
+theme | String | line | 标签的样式。可选项：line/tag/card | N
+value | String / Number | - | 激活的选项卡值。支持语法糖 `v-model:value`。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+default-value | String / Number | - | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tabs/type.ts) | N
+
+### Tabs Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: TabValue; label: string })` | 激活的选项卡发生变化时触发
+click | `(context: { value: TabValue; label: string })` | 点击选项卡时触发
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | 页面滚动时触发
+
+### Tabs Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义选项卡内容
+middle | 中间内容，介于头部和内容之间
+
+### Tabs External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-active | 激活态样式类
+t-class-content | 内容样式类
+t-class-item | 选项样式类
+t-class-track | 滚动条样式类
+
+
+### TabPanel Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | {} | 透传至 Badge 组件 | N
+disabled | Boolean | false | 是否禁用当前选项卡 | N
+icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
+label | String | - | 选项卡名称 | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
+panel | String | - | 用于自定义选项卡面板内容 | N
+value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-panel/type.ts) | N
+
+### TabPanel Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义选项卡面板内容
+panel | 自定义 `panel` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-tab-border-color | @component-stroke | - |
+| --td-tab-font-size | 28rpx | - |
+| --td-tab-icon-size | 36rpx | - |
+| --td-tab-item-active-color | @brand-color | - |
+| --td-tab-item-color | @text-color-primary | - |
+| --td-tab-item-disabled-color | @text-color-disabled | - |
+| --td-tab-item-height | 96rpx | - |
+| --td-tab-item-tag-active-bg | @brand-color-light | - |
+| --td-tab-item-tag-bg | @bg-color-secondarycontainer | - |
+| --td-tab-item-tag-height | 64rpx | - |
+| --td-tab-item-vertical-height | 108rpx | - |
+| --td-tab-item-vertical-width | 208rpx | - |
+| --td-tab-nav-bg-color | @bg-color-container | - |
+| --td-tab-track-color | @brand-color | - |
+| --td-tab-track-radius | 8rpx | - |
+| --td-tab-track-thickness | 6rpx | - |
+| --td-tab-track-width | 32rpx | - |
diff --git a/packages/tdesign-uniapp/components/tabs/_example/base/index.vue b/packages/tdesign-uniapp/components/tabs/_example/base/index.vue
new file mode 100644
index 000000000..58f98e05e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/base/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <view>
+    <t-tabs
+      :default-value="0"
+      t-class="custom-tabs"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        label="选项"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+    </t-tabs>
+
+    <t-tabs
+      :default-value="0"
+      t-class="custom-tabs"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        label="选项"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+      <t-tab-panel
+        label="上限六个文字"
+        value="2"
+      />
+    </t-tabs>
+
+    <t-tabs
+      :default-value="0"
+      t-class="custom-tabs"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        label="选项"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+      <t-tab-panel
+        label="选项"
+        value="2"
+      />
+      <t-tab-panel
+        label="上限四字"
+        value="3"
+      />
+    </t-tabs>
+
+    <t-tabs
+      :default-value="0"
+      sticky
+      :sticky-props="stickyProps"
+      t-class="custom-tabs"
+      @change="onTabsChange"
+      @click="onTabsClick"
+      @scroll="onStickyScroll"
+    >
+      <t-tab-panel
+        label="选项"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+      <t-tab-panel
+        label="选项"
+        value="2"
+      />
+      <t-tab-panel
+        label="选项"
+        value="3"
+      />
+      <t-tab-panel
+        label="上限四字"
+        value="4"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  props: {
+    stickyOffset: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    stickyProps() {
+      return {
+        zIndex: 2,
+        offsetTop: this.stickyOffset,
+
+      };
+    },
+  },
+  created() {},
+  methods: {
+    onTabsChange(event) {
+      console.log(`Change tab, tab-panel value is ${event.value}.`);
+    },
+    onTabsClick(event) {
+      console.log(`Click tab, tab-panel value is ${event.value}.`);
+    },
+    onStickyScroll(event) {
+      console.log('sticky scroll: ', event);
+    },
+  },
+};
+</script>
+<style>
+
+.custom-tabs {
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/scroll/index.vue b/packages/tdesign-uniapp/components/tabs/_example/scroll/index.vue
new file mode 100644
index 000000000..c9a8291cb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/scroll/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <t-tabs
+      :default-value="0"
+      :space-evenly="false"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        v-for="(item, index) in 8"
+        :key="index"
+        label="选项"
+        :value="index"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onTabsChange(event) {
+      console.log(`Change tab, tab-panel value is ${event.value}.`);
+    },
+    onTabsClick(event) {
+      console.log(`Click tab, tab-panel value is ${event.value}.`);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/size/index.vue b/packages/tdesign-uniapp/components/tabs/_example/size/index.vue
new file mode 100644
index 000000000..d3a90f033
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/size/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <view>
+    <t-tabs :default-value="0">
+      <t-tab-panel
+        label="小尺寸"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+      <t-tab-panel
+        label="选项"
+        value="2"
+      />
+      <t-tab-panel
+        label="选项"
+        value="3"
+      />
+    </t-tabs>
+
+    <view style="height: 16px" />
+
+    <t-tabs
+      class="bigger"
+      :default-value="0"
+    >
+      <t-tab-panel
+        label="大尺寸"
+        value="0"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+      />
+      <t-tab-panel
+        label="选项"
+        value="2"
+      />
+      <t-tab-panel
+        label="选项"
+        value="3"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onTabsChange(event) {
+      console.log(`Change tab, tab-panel value is ${event.value}.`);
+    },
+    onTabsClick(event) {
+      console.log(`Click tab, tab-panel value is ${event.value}.`);
+    },
+  },
+};
+</script>
+<style>
+.bigger {
+    --td-tab-font-size: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/status/index.vue b/packages/tdesign-uniapp/components/tabs/_example/status/index.vue
new file mode 100644
index 000000000..c0c2566f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/status/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <t-tabs
+      :value="value"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        :label="value == '0' ? '选中' : '默认'"
+        value="0"
+      />
+      <t-tab-panel
+        :label="value == '1' ? '选中' : '默认'"
+        value="1"
+      />
+      <t-tab-panel
+        label="禁用"
+        value="2"
+        disabled
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {
+      value: '0',
+    };
+  },
+  created() {},
+  methods: {
+    onTabsChange(event) {
+      this.value = event.value;
+      console.log(`Change tab, tab-panel value is ${event.value}.`);
+    },
+    onTabsClick(event) {
+      console.log(`Click tab, tab-panel value is ${event.value}.`);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/tabs.less b/packages/tdesign-uniapp/components/tabs/_example/tabs.less
new file mode 100644
index 000000000..81b0e7650
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/tabs.less
@@ -0,0 +1,7 @@
+/* #ifdef H5 */
+
+.demo-wrap {
+    height: 100vh;
+    overflow: auto;
+}
+/* #endif */
diff --git a/packages/tdesign-uniapp/components/tabs/_example/tabs.vue b/packages/tdesign-uniapp/components/tabs/_example/tabs.vue
new file mode 100644
index 000000000..13652c8aa
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/tabs.vue
@@ -0,0 +1,105 @@
+<template>
+  <view class="demo-wrap">
+    <view class="custom-navbar">
+      <!-- #ifndef MP-ALIPAY -->
+      <t-navbar
+        title="Tabs"
+        left-arrow
+      />
+    <!-- #endif -->
+    </view>
+    <view class="demo">
+      <t-demo-header
+        title="Tabs 选项卡"
+        desc="用于内容分类后的展示切换。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础选项卡"
+      >
+        <BaseDemo :sticky-offset="stickyOffset" />
+      </t-demo>
+      <t-demo desc="等距选项卡">
+        <scroll />
+      </t-demo>
+      <t-demo desc="带图标选项卡">
+        <with-icon />
+      </t-demo>
+      <t-demo desc="带徽标选项卡">
+        <with-badge />
+      </t-demo>
+      <t-demo desc="带内容区选项卡">
+        <with-content />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="选项卡状态"
+      >
+        <status />
+      </t-demo>
+      <t-demo
+        title="03 组件样式"
+        desc="选项卡尺寸"
+      >
+        <size />
+      </t-demo>
+      <t-demo desc="选项卡样式">
+        <theme />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import scroll from './scroll/index.vue';
+import size from './size/index.vue';
+import status from './status/index.vue';
+import withIcon from './with-icon/index.vue';
+import withBadge from './with-badge/index.vue';
+import theme from './theme/index.vue';
+import withContent from './with-content/index.vue';
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+
+export default {
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+  components: {
+    BaseDemo,
+    scroll,
+    size,
+    status,
+    withIcon,
+    withBadge,
+    theme,
+    withContent,
+  },
+  data() {
+    return {
+      stickyOffset: 0,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getCustomNavbarHeight();
+    }, 30);
+  },
+  methods: {
+    getCustomNavbarHeight() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.custom-navbar').boundingClientRect();
+      query.exec((res) => {
+        const { height = 0 } = res[0] || {};
+        this.stickyOffset = height;
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './tabs.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/theme/index.vue b/packages/tdesign-uniapp/components/tabs/_example/theme/index.vue
new file mode 100644
index 000000000..616f761b9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/theme/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view>
+    <t-tabs
+      :default-value="0"
+      theme="tag"
+    >
+      <t-tab-panel
+        v-for="(item, index) in 4"
+        :key="index"
+        label="选项"
+        :value="index"
+      />
+    </t-tabs>
+
+    <view style="height: 16px" />
+
+    <t-tabs
+      :default-value="0"
+      theme="card"
+    >
+      <t-tab-panel
+        v-for="(item, index) in 4"
+        :key="index"
+        label="选项"
+        :value="index"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/with-badge/index.vue b/packages/tdesign-uniapp/components/tabs/_example/with-badge/index.vue
new file mode 100644
index 000000000..1befdcd07
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/with-badge/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <view>
+    <t-tabs :default-value="0">
+      <t-tab-panel
+        label="选项"
+        value="0"
+        :badge-props="{ dot: true, offset: ['4px', '4px'] }"
+      />
+      <t-tab-panel
+        label="选项"
+        value="1"
+        :badge-props="{ count: 8, offset: ['8px', '8px'] }"
+      />
+      <t-tab-panel
+        label="选项"
+        value="2"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/with-content/index.vue b/packages/tdesign-uniapp/components/tabs/_example/with-content/index.vue
new file mode 100644
index 000000000..24cffba2d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/with-content/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view>
+    <t-tabs
+      :animation="{ duration: 0.6 }"
+      :default-value="0"
+      t-class="custom-tabs"
+      t-class-content="custom-panel"
+      @change="onTabsChange"
+      @click="onTabsClick"
+    >
+      <t-tab-panel
+        label="选项一"
+        value="0"
+      >
+        <view class="custom-panel__content">
+          选项一内容
+        </view>
+      </t-tab-panel>
+      <t-tab-panel
+        label="选项二"
+        value="1"
+      >
+        <view class="custom-panel__content">
+          选项二内容
+        </view>
+      </t-tab-panel>
+      <t-tab-panel
+        label="选项三"
+        value="2"
+      >
+        <view class="custom-panel__content">
+          选项三内容
+        </view>
+      </t-tab-panel>
+      <t-tab-panel
+        label="选项四"
+        value="3"
+      >
+        <view class="custom-panel__content">
+          选项四内容
+        </view>
+      </t-tab-panel>
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    onTabsChange(event) {
+      console.log(`Change tab, tab-panel value is ${event.value}.`);
+    },
+    onTabsClick(event) {
+      console.log(`Click tab, tab-panel value is ${event.value}.`);
+    },
+  },
+};
+</script>
+<style>
+.custom-tabs {
+    margin-bottom: 32rpx;
+}
+
+.custom-panel {
+    color: var(--td-text-color-primary);
+}
+
+.custom-panel__content {
+    height: 240rpx;
+    font-size: 28rpx;
+    color: var(--td-text-color-placeholder);
+    padding: 40rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/_example/with-icon/index.vue b/packages/tdesign-uniapp/components/tabs/_example/with-icon/index.vue
new file mode 100644
index 000000000..70f4a2431
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/_example/with-icon/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+    <t-tabs :default-value="0">
+      <t-tab-panel
+        v-for="(item, index) in 3"
+        :key="index"
+        icon="app"
+        label="选项"
+        :value="index"
+      />
+    </t-tabs>
+  </view>
+</template>
+
+<script>
+import tTabs from 'tdesign-uniapp/tabs/tabs.vue';
+import tTabPanel from 'tdesign-uniapp/tab-panel/tab-panel.vue';
+export default {
+  components: {
+    tTabs,
+    tTabPanel,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/computed.js b/packages/tdesign-uniapp/components/tabs/computed.js
new file mode 100644
index 000000000..8394610bd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/computed.js
@@ -0,0 +1,26 @@
+import utils from '../common/utils.wxs';
+
+export function animate(options) {
+  if (options.duration) {
+    return utils._style({
+      'transition-duration': `${options.duration}s`,
+      transform: `translate3d( ${-100 * options.currentIndex}%,0, 0)`,
+    });
+  }
+  return '';
+}
+
+export function trackStyle(options) {
+  if (options.distance || options.lineWidth) {
+    return utils._style({
+      '-webkit-transform': `translateX(${options.distance}px)`,
+      transform: `translateX(${options.distance}px)`,
+      'transition-duration': options.isInit ? '0' : '0.3s',
+      width: `${options.lineWidth}px`,
+      opacity: 1,
+    });
+  }
+
+  return '';
+}
+
diff --git a/packages/tdesign-uniapp/components/tabs/props.ts b/packages/tdesign-uniapp/components/tabs/props.ts
new file mode 100644
index 000000000..04b81b53e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/props.ts
@@ -0,0 +1,80 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTabsProps } from './type';
+export default {
+  /** 动画效果设置。其中 duration 表示动画时长。（单位：秒） */
+  animation: {
+    type: Object,
+  },
+  /** 激活下划线的模式 */
+  bottomLineMode: {
+    type: String,
+    default: 'fixed' as TdTabsProps['bottomLineMode'],
+    validator(val: TdTabsProps['bottomLineMode']): boolean {
+      if (!val) return true;
+      return ['fixed', 'auto', 'full'].includes(val);
+    },
+  },
+  /** 是否展示底部激活线条 */
+  showBottomLine: {
+    type: Boolean,
+    default: true,
+  },
+  /** 选项卡头部空间是否均分 */
+  spaceEvenly: {
+    type: Boolean,
+    default: true,
+  },
+  /** `1.1.10`。是否展示分割线 */
+  split: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启粘性布局 */
+  sticky: Boolean,
+  /** 透传至 Sticky 组件 */
+  stickyProps: {
+    type: Object,
+  },
+  /** 是否可以滑动切换 */
+  swipeable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标签的样式 */
+  theme: {
+    type: String,
+    default: 'line' as TdTabsProps['theme'],
+    validator(val: TdTabsProps['theme']): boolean {
+      if (!val) return true;
+      return ['line', 'tag', 'card'].includes(val);
+    },
+  },
+  /** 激活的选项卡值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 激活的选项卡值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 激活的选项卡发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击选项卡时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 页面滚动时触发 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tabs/tabs.less b/packages/tdesign-uniapp/components/tabs/tabs.less
new file mode 100644
index 000000000..322f8e8ec
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/tabs.less
@@ -0,0 +1,237 @@
+@import '../common/style/base.less';
+
+@tabs: ~'@{prefix}-tabs';
+@item: ~'@{tabs}__item';
+
+@tab-font-size: var(--td-tab-font-size, 28rpx);
+@tab-nav-bg-color: var(--td-tab-nav-bg-color, @bg-color-container);
+
+@tab-item-height: var(--td-tab-item-height, 96rpx);
+@tab-item-vertical-height: var(--td-tab-item-vertical-height, 108rpx);
+@tab-item-vertical-width: var(--td-tab-item-vertical-width, 208rpx);
+
+@tab-item-color: var(--td-tab-item-color, @text-color-primary);
+@tab-item-active-color: var(--td-tab-item-active-color, @brand-color);
+@tab-item-disabled-color: var(--td-tab-item-disabled-color, @text-color-disabled);
+@tab-border-color: var(--td-tab-border-color, @component-stroke);
+
+// track
+@tab-track-color: var(--td-tab-track-color, @brand-color);
+@tab-track-thickness: var(--td-tab-track-thickness, 6rpx);
+@tab-track-width: var(--td-tab-track-width, 32rpx);
+@tab-track-radius: var(--td-tab-track-radius, 8rpx);
+
+// theme = tag
+@tab-item-tag-height: var(--td-tab-item-tag-height, 64rpx);
+@tab-item-tag-bg: var(--td-tab-item-tag-bg, @bg-color-secondarycontainer);
+@tab-item-tag-active-bg: var(--td-tab-item-tag-active-bg, @brand-color-light);
+
+@tab-icon-size: var(--td-tab-icon-size, 36rpx);
+
+.@{prefix}-tabs {
+  position: relative;
+  font-size: @tab-font-size;
+  background: @tab-nav-bg-color;
+  flex-wrap: wrap;
+
+  &__wrapper {
+    display: flex;
+    overflow: hidden;
+    background: @tab-nav-bg-color;
+
+    &--card {
+      background: @tab-item-tag-bg;
+      --td-tab-border-color: transparent;
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    color: @tab-item-color;
+    padding: 0 @spacer-2;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    height: @tab-item-height;
+
+    &--active {
+      font-weight: 600;
+      color: @tab-item-active-color;
+    }
+
+    &--disabled {
+      color: @tab-item-disabled-color;
+    }
+
+    &--evenly {
+      flex: 1 0 auto;
+    }
+
+    &-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &--tag {
+        width: 100%;
+        text-align: center;
+        padding: 0 @spacer-2;
+        line-height: @tab-item-tag-height;
+        border-radius: calc(@tab-item-tag-height / 2);
+        background-color: @tab-item-tag-bg;
+      }
+
+      &--active&--tag {
+        background-color: @tab-item-tag-active-bg;
+      }
+    }
+
+    &--tag:not(&--evenly) {
+      padding: 0 calc(@spacer / 2);
+
+      &:first-child {
+        margin-left: @spacer;
+      }
+
+      &:last-child {
+        padding-right: @spacer-1;
+      }
+    }
+
+    &--tag {
+      padding: 0 @spacer;
+    }
+
+    &--card {
+      &.@{item}--active {
+        background-color: @tab-nav-bg-color;
+        border-radius: @radius-large @radius-large 0 0;
+
+        &:first-child {
+          border-top-left-radius: 0;
+        }
+
+        &:last-child {
+          border-top-right-radius: 0;
+        }
+      }
+
+      &.@{item}--pre {
+        border-bottom-right-radius: @radius-large;
+      }
+    }
+
+    &-prefix,
+    &-suffix {
+      position: absolute;
+      bottom: 0;
+      width: 18rpx;
+      height: 18rpx;
+      background-color: @tab-nav-bg-color;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: @tab-item-tag-bg;
+      }
+    }
+
+    &-prefix {
+      right: 0;
+
+      &::after {
+        border-bottom-right-radius: @radius-large;
+      }
+    }
+
+    &-suffix {
+      left: 0;
+
+      &::after {
+        border-bottom-left-radius: @radius-large;
+      }
+    }
+  }
+
+  // :deep(&__badge) {
+  //   &--active {
+  //     --td-badge-content-text-color: @tab-item-active-color;
+  //   }
+
+  //   &--disabled {
+  //     --td-badge-content-text-color: @tab-item-disabled-color;
+  //   }
+  // }
+
+  // :deep(&__icon) {
+  //   font-size: @tab-icon-size;
+  //   margin-right: calc(@spacer / 4);
+  // }
+
+  &__content {
+    overflow: hidden;
+  }
+
+  &__nav {
+    position: relative;
+    user-select: none;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  &__nav&__nav--evenly {
+    width: 100%;
+  }
+
+  &__track {
+    position: absolute;
+    font-weight: 600;
+    z-index: 1;
+    opacity: 0;
+    background-color: @tab-track-color;
+    left: 0;
+    bottom: 1rpx;
+    width: @tab-track-width;
+    height: @tab-track-thickness;
+    border-radius: @tab-track-radius;
+  }
+
+  &__scroll {
+    position: relative;
+    width: 100%;
+    height: @tab-item-height;
+
+    &--split {
+      .border(bottom, @tab-border-color);
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__content {
+    width: 100%;
+
+    &-inner {
+      display: block;
+    }
+
+    &--animated .@{prefix}-tabs__content-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      will-change: left;
+      transition-property: transform;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tabs/tabs.vue b/packages/tdesign-uniapp/components/tabs/tabs.vue
new file mode 100644
index 000000000..3b7b497fd
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/tabs.vue
@@ -0,0 +1,494 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="_.cls(classPrefix, [placement]) + ' ' + tClass"
+  >
+    <t-sticky
+      :t-class="_.cls(classPrefix + '__sticky', [placement])"
+      :disabled="!sticky"
+      :z-index="stickyProps?.zIndex || 1"
+      :offset-top="stickyProps?.offsetTop || 0"
+      :container="stickyProps?.container"
+      @scroll="onTouchScroll"
+    >
+      <view :class="_.cls(classPrefix + '__wrapper', [theme])">
+        <scroll-view
+          :class="_.cls(classPrefix + '__scroll', [placement, ['split', split]])"
+          enhanced
+          enable-flex
+          :scroll-left="offset"
+          :scroll-x="true"
+          scroll-anchoring
+          scroll-with-animation
+          enable-passive
+          :show-scrollbar="false"
+          type="list"
+          @scroll="onScroll"
+        >
+          <view
+            :class="_.cls(classPrefix + '__nav', [placement, ['evenly', spaceEvenly]])"
+            aria-role="tablist"
+          >
+            <view
+              v-for="(item, index) in tabs"
+              :key="index"
+              :data-index="index"
+              :class="
+                _.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]]) +
+                  ' ' +
+                  (currentIndex === index ? tClassActive : '') +
+                  ' ' +
+                  tClassItem
+              "
+              aria-role="tab"
+              :aria-controls="tabID + '_panel_' + index"
+              :aria-selected="currentIndex === index"
+              :aria-disabled="item.disabled"
+              :aria-label="ariaLabel || (item.badgeProps.dot || item.badgeProps.count ? item.label + _.getBadgeAriaLabel({ ...item.badgeProps }) : '')"
+              @click="onTabTap"
+            >
+              <view
+                :class="_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])"
+                :aria-hidden="item.badgeProps.dot || item.badgeProps.count"
+              >
+                <block
+                  v-if="item.icon"
+                  name="icon"
+                >
+                  <t-icon
+                    :t-class="classPrefix + '__icon'"
+                    :custom-style="getIconCustomStyle(item)"
+                    :prefix="item.icon.prefix"
+                    :name="item.icon.name"
+                    :size="item.icon.size"
+                    :color="item.icon.color"
+                    :aria-hidden="!!item.icon.ariaHidden"
+                    :aria-label="item.icon.ariaLabel"
+                    :aria-role="item.icon.ariaRole"
+                    @click="item.icon.click || ''"
+                  />
+                </block>
+                <block v-if="item.badgeProps">
+                  <t-badge
+                    :color="item.badgeProps.color || ''"
+                    :content="item.label"
+                    :count="item.badgeProps.count || 0"
+                    :dot="item.badgeProps.dot || false"
+                    :max-count="item.badgeProps.maxCount || 99"
+                    :offset="item.badgeProps.offset || []"
+                    :shape="item.badgeProps.shape || 'circle'"
+                    :show-zero="item.badgeProps.showZero || false"
+                    :size="item.badgeProps.size || 'medium'"
+                    :t-class="
+                      _.cls(classPrefix + '__badge', [
+                        ['disabled', item.disabled],
+                        ['active', currentIndex === index]
+                      ])
+                    "
+                    :custom-style="getBadgeCustomStyle(item, index)"
+                    :t-class-content="item.badgeProps.tClassContent"
+                    :t-class-count="item.badgeProps.tClassCount"
+                  />
+                </block>
+                <block v-else>
+                  {{ item.label }}
+                </block>
+              </view>
+
+              <view
+                v-if="theme == 'card' && currentIndex - 1 == index"
+                :class="classPrefix + '__item-prefix'"
+              />
+
+              <view
+                v-if="theme == 'card' && currentIndex + 1 == index"
+                :class="classPrefix + '__item-suffix'"
+              />
+            </view>
+            <view
+              v-if="theme == 'line' && showBottomLine"
+              :class="_.cls(classPrefix + '__track', [placement]) + ' ' + tClassTrack"
+              :style="trackStyle(trackOption)"
+            />
+          </view>
+        </scroll-view>
+      </view>
+    </t-sticky>
+    <slot name="middle" />
+    <view
+      :class="_.cls(classPrefix + '__content', [['animated', animation]])"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
+      <view
+        :class="classPrefix + '__content-inner ' + tClassContent"
+        :style="animate({ duration: animation && animation.duration, currentIndex: currentIndex })"
+      >
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import tSticky from '../sticky/sticky';
+import tBadge from '../badge/badge';
+import tIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import touch from '../mixins/touch';
+import { getRect, uniqueFactory, coalesce, nextTick } from '../common/utils';
+import { getObserver } from '../common/wechat';
+import _ from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { animate, trackStyle } from './computed';
+
+const name = `${prefix}-tabs`;
+const getUniqueID = uniqueFactory('tabs');
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'value',
+    event: 'change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-item`,
+    `${prefix}-class-active`,
+    `${prefix}-class-track`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [touch, ParentMixin(RELATION_MAP.TabPanel)],
+  components: {
+    tSticky,
+    tBadge,
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'change',
+    'scroll',
+    'error',
+    'click',
+  ],
+  watch: {
+    value: {
+      handler(e) {
+        this.dataValue = e;
+      },
+      immediate: true,
+    },
+    dataValue(name) {
+      if (name !== this.getCurrentName()) {
+        this.setCurrentIndexByName(name);
+      }
+    },
+  },
+  created() {
+    this.children = this.children || [];
+  },
+
+  mounted() {
+    nextTick().then(() => {
+      this.setTrack();
+    });
+    getRect(this, `.${name}`).then((rect) => {
+      this.containerWidth = rect.width;
+    });
+    this.tabID = getUniqueID();
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tabs: [],
+      currentLabels: [],
+      currentIndex: -1,
+      trackOption: {
+        lineWidth: 0,
+        distance: 0,
+        isInit: true,
+      },
+      offset: 0,
+      scrollLeft: 0,
+      tabID: '',
+      placement: 'top',
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  methods: {
+    trackStyle,
+    animate,
+    innerAfterLinked(target) {
+      // mixin 中已注入
+      // this.children.push(target);
+      this.initChildId();
+      target.dataIndex = this.children.length - 1;
+      this.updateTabs();
+    },
+    innerAfterUnlinked(target) {
+      this.children = this.children.filter(item => item.index !== target.dataIndex);
+      this.updateTabs(() => this.setTrack());
+      this.initChildId();
+    },
+    initChildId() {
+      this.children.forEach((item, index) => {
+        item.setId(`${this.tabID}_panel_${index}`);
+      });
+    },
+    onScroll(e = {}) {
+      const { scrollLeft } = e.detail || {};
+      this.scrollLeft = scrollLeft;
+    },
+    updateTabs(cb) {
+      const { children } = this;
+      const tabs = children.map((child) => {
+        const { label, badgeProps, disabled, icon, panel, value, lazy } = child;
+        return {
+          label, badgeProps, disabled, icon, panel, value, lazy,
+        };
+      });
+
+      tabs.forEach((item) => {
+        if (typeof item.icon === 'string') {
+          item.icon = { name: item.icon };
+        }
+      });
+
+      this.tabs = tabs;
+      if (typeof cb === 'function') {
+        setTimeout(cb, 33);
+      }
+
+      this.setCurrentIndexByName(this.dataValue);
+    },
+
+    setCurrentIndexByName(name) {
+      const { children } = this;
+      const index = children.findIndex(child => child.getComputedName() === `${name}`);
+      if (index > -1) {
+        this.setCurrentIndex(index);
+      }
+    },
+
+    setCurrentIndex(index) {
+      if (index <= -1 || index >= this.children.length) return;
+      const Labels = [];
+      this.children.forEach((child, idx) => {
+        const isActive = index === idx;
+        if (isActive !== child.active || !child.initialized) {
+          child.render(isActive, this);
+        }
+        Labels.push(child.label);
+      });
+
+      const { currentIndex, currentLabels } = this;
+      if (currentIndex === index && currentLabels.join('') === Labels.join('')) return;
+
+      this.currentIndex = index;
+      this.currentLabels = Labels;
+
+
+      setTimeout(() => {
+        this.setTrack();
+      }, 33);
+    },
+
+    getCurrentName() {
+      if (this.children) {
+        const activeTab = this.children[this.currentIndex];
+        if (activeTab) {
+          return activeTab.getComputedName();
+        }
+      }
+    },
+
+    calcScrollOffset(containerWidth, targetLeft, targetWidth, offset) {
+      return offset + targetLeft - (1 / 2) * containerWidth + targetWidth / 2;
+    },
+
+    // 外部无法获取虚拟组件节点位置信息
+    getTabHeight() {
+      return getRect(this, `.${name}`);
+    },
+
+    getTrackSize() {
+      const { bottomLineMode } = this;
+      const targetMap = {
+        fixed: `.${prefix}-tabs__track`,
+        auto: `.${prefix}-tabs__item--active .${prefix}-tabs__item-inner`,
+        full: `.${prefix}-tabs__item--active`,
+      };
+      return new Promise((resolve, reject) => {
+        if (this.trackWidth) {
+          resolve(this.trackWidth);
+          return;
+        }
+        getRect(this, targetMap[bottomLineMode] || targetMap.fixed)
+          .then((res) => {
+            if (res) {
+              resolve(res.width);
+            }
+          })
+          .catch(reject);
+      });
+    },
+
+    async setTrack() {
+      const { children } = this;
+      if (!children) return;
+      const { currentIndex } = this;
+      if (currentIndex <= -1) return;
+
+      try {
+        const res = await getRect(this, `.${prefix}-tabs__item`, true);
+        const rect = res[currentIndex];
+        if (!rect) return;
+        let count = 0;
+        let distance = 0;
+        let totalSize = 0;
+
+        res.forEach((item) => {
+          if (count < currentIndex) {
+            distance += item.width;
+            count += 1;
+          }
+          totalSize += item.width;
+        });
+
+        if (this.containerWidth) {
+          const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.scrollLeft);
+          const maxOffset = totalSize - this.containerWidth;
+          this.offset = Math.min(Math.max(offset, 0), maxOffset);
+        } else if (!this._hasObserved) {
+          this._hasObserved = true;
+          getObserver(this, `.${name}`).then(() => this.setTrack());
+        }
+
+        const lineWidth = await this.getTrackSize();
+        if (this.theme === 'line') {
+          distance += (rect.width - lineWidth) / 2;
+        }
+
+        const isInit = this.previousIndex === undefined;
+        if (isInit
+          || this.previousIndex !== currentIndex
+          || this.lastDistance !== distance
+        ) {
+          this.previousIndex = currentIndex;
+          this.trackOption = { lineWidth, distance, isInit };
+          this.lastDistance = distance;
+        }
+      } catch (err) {
+        this.$emit('error', err);
+      }
+    },
+
+    onTabTap(event) {
+      const { index } = event.currentTarget.dataset;
+
+      this.changeIndex(index);
+    },
+
+    onTouchStart(event) {
+      if (!this.swipeable) return;
+
+      this.touchStart(event);
+    },
+
+    onTouchMove(event) {
+      if (!this.swipeable) return;
+
+      this.touchMove(event);
+    },
+
+    onTouchEnd() {
+      if (!this.swipeable) return;
+
+      const { direction, deltaX, offsetX } = this;
+      const minSwipeDistance = 50;
+      if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
+        const index = this.getAvailableTabIndex(deltaX);
+        if (index !== -1) {
+          this.changeIndex(index);
+        }
+      }
+    },
+
+    onTouchScroll(event) {
+      this._trigger('scroll', event);
+    },
+
+    changeIndex(index) {
+      const currentTab = this.tabs[index];
+      const { value, label } = currentTab;
+      if (!currentTab?.disabled && index !== this.currentIndex) {
+        this._trigger('change', { value, label });
+      }
+      this._trigger('click', { value, label });
+    },
+
+    getAvailableTabIndex(deltaX) {
+      const step = deltaX > 0 ? -1 : 1;
+      const { currentIndex, tabs } = this;
+      const len = tabs.length;
+      for (let i = step; currentIndex + step >= 0 && currentIndex + step < len; i += step) {
+        const newIndex = currentIndex + i;
+        if (newIndex >= 0 && newIndex < len && tabs[newIndex]) {
+          if (!tabs[newIndex].disabled) {
+            return newIndex;
+          }
+        } else {
+          return currentIndex;
+        }
+      }
+      return -1;
+    },
+
+    getBadgeCustomStyle(item, index) {
+      if (item.disabled) {
+        return '--td-badge-content-text-color: var(--td-tab-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, .26))))';
+      }
+      if (this.currentIndex === index) {
+        return '--td-badge-content-text-color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));';
+      }
+      return '';
+    },
+
+    getIconCustomStyle(item) {
+      return _._style([
+        {
+          fontSize: 'var(--td-tab-icon-size, 18px)',
+          marginRight: 'calc(var(--td-spacer, 8px) / 4)',
+        },
+        item.icon.style || '',
+      ]);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tabs.css';
+
+/* #ifndef MP-WEIXIN */
+:deep(t-tab-panel) {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+/* #endif */
+</style>
diff --git a/packages/tdesign-uniapp/components/tabs/type.ts b/packages/tdesign-uniapp/components/tabs/type.ts
new file mode 100644
index 000000000..7e9eebd1c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tabs/type.ts
@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStickyProps as StickyProps } from '../sticky/type';
+
+export interface TdTabsProps {
+  /**
+   * 动画效果设置。其中 duration 表示动画时长。（单位：秒）
+   */
+  animation?: TabAnimation;
+  /**
+   * 激活下划线的模式
+   * @default fixed
+   */
+  bottomLineMode?: 'fixed' | 'auto' | 'full';
+  /**
+   * 是否展示底部激活线条
+   * @default true
+   */
+  showBottomLine?: boolean;
+  /**
+   * 选项卡头部空间是否均分
+   * @default true
+   */
+  spaceEvenly?: boolean;
+  /**
+   * `1.1.10`。是否展示分割线
+   * @default true
+   */
+  split?: boolean;
+  /**
+   * 是否开启粘性布局
+   * @default false
+   */
+  sticky?: boolean;
+  /**
+   * 透传至 Sticky 组件
+   */
+  stickyProps?: StickyProps;
+  /**
+   * 是否可以滑动切换
+   * @default true
+   */
+  swipeable?: boolean;
+  /**
+   * 标签的样式
+   * @default line
+   */
+  theme?: 'line' | 'tag' | 'card';
+  /**
+   * 激活的选项卡值
+   */
+  value?: TabValue;
+  /**
+   * 激活的选项卡值，非受控属性
+   */
+  defaultValue?: TabValue;
+  /**
+   * 激活的选项卡发生变化时触发
+   */
+  onChange?: (context: { value: TabValue; label: string }) => void;
+  /**
+   * 点击选项卡时触发
+   */
+  onClick?: (context: { value: TabValue; label: string }) => void;
+  /**
+   * 页面滚动时触发
+   */
+  onScroll?: (context: { scrollTop: number; isFixed: boolean }) => void;
+}
+
+export type TabAnimation = { duration: number } & Record<string, any>;
+
+export type TabValue = string | number;
diff --git a/packages/tdesign-uniapp/components/tag/README.en-US.md b/packages/tdesign-uniapp/components/tag/README.en-US.md
new file mode 100644
index 000000000..7d29d6771
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/README.en-US.md
@@ -0,0 +1,163 @@
+:: BASE_DOC ::
+
+## API
+
+### Tag Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+closable | Boolean / Object | false | \- | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+max-width | String / Number | - | \- | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large/extra-large | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
+
+### Tag Events
+
+name | params | description
+-- | -- | --
+click | `(context: { e: MouseEvent })` | \-
+close | `(context: { e: MouseEvent })` | \-
+
+### Tag Slots
+
+name | Description
+-- | --
+\- | \-
+closable | \-
+icon | \-
+
+### Tag External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### CheckTag Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+checked | Boolean | - | `v-model:checked` is supported | N
+default-checked | Boolean | - | uncontrolled property | N
+closable | Boolean | false | \- | N
+content | String / Number / Array | - | Typescript：`string \| number \| string[]` | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+variant | String | dark | options: dark/light/outline/light-outline | N
+
+### CheckTag Events
+
+name | params | description
+-- | -- | --
+change | `(context: { checked: boolean })` | \-
+click | \- | \-
+close | \- | \-
+
+### CheckTag Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+icon | \-
+
+### CheckTag External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tag-close-icon-color | @text-color-placeholder | - 
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @text-color-primary | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @text-color-disabled | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 80rpx | - 
+--td-tag-extra-large-icon-size | 32rpx | - 
+--td-tag-extra-large-padding | 32rpx - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 56rpx | - 
+--td-tag-large-icon-size | 32rpx | - 
+--td-tag-large-padding | 16rpx - 1px | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 48rpx | - 
+--td-tag-medium-icon-size | 28rpx | - 
+--td-tag-medium-padding | 16rpx - 1px | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-round-border-radius | 999px | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 40rpx | - 
+--td-tag-small-icon-size | 24rpx | - 
+--td-tag-small-padding | 12rpx - 1px | - 
+--td-tag-square-border-radius | 8rpx | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
+--td-tag-warning-light-color | @warning-color-1 | - 
+ant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color | @bg-color-container | - 
+ant = dark | @@theme-color, @@theme-light-color | - 
+ant = dark | @text-color-anti, @@theme-color | - 
+ant = light | @@theme-light-color, @@theme-color | - 
+ant) {
+ @themes: default | primary, success, warning, dange | - 
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @text-color-primary | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @text-color-disabled | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 80rpx | - 
+--td-tag-extra-large-icon-size | 32rpx | - 
+--td-tag-extra-large-padding | 32rpx - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 56rpx | - 
+--td-tag-large-icon-size | 32rpx | - 
+--td-tag-large-padding | 16rpx - 1px | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 48rpx | - 
+--td-tag-medium-icon-size | 28rpx | - 
+--td-tag-medium-padding | 16rpx - 1px | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-round-border-radius | 999px | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 40rpx | - 
+--td-tag-small-icon-size | 24rpx | - 
+--td-tag-small-padding | 12rpx - 1px | - 
+--td-tag-square-border-radius | 8rpx | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
+--td-tag-warning-light-color | @warning-color-1 | - 
+ant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color | @bg-color-container | - 
+ant = dark | @@theme-color, @@theme-light-color | - 
+ant = dark | @text-color-anti, @@theme-color | - 
+ant = light | @@theme-light-color, @@theme-color | - 
+ant) {
+ @themes: default | primary, success, warning, dange | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tag/README.md b/packages/tdesign-uniapp/components/tag/README.md
new file mode 100644
index 000000000..0eb199e7d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/README.md
@@ -0,0 +1,201 @@
+---
+title: Tag 标签
+description: 用于表明主体的类目，属性或状态。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTag from 'tdesign-uniapp/tag/tag.vue';
+import TCheckTag from 'tdesign-uniapp/check-tag/check-tag.vue';
+```
+
+### 组件类型
+
+{{ type }}
+
+可关闭的标签
+
+{{ closable }}
+
+可点击的标签
+
+{{ checkable }}
+
+### 组件状态
+
+展示型标签
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+
+## API
+
+### Tag Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+closable | Boolean / Object | false | 标签是否可关闭 | N
+disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
+icon | String / Object | - | 标签中的图标，可自定义图标呈现 | N
+max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N
+shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
+size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large | N
+theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N
+variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
+
+### Tag Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: { e: MouseEvent })` | 点击时触发
+close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发
+
+### Tag Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+closable | 标签可关闭内容区域
+icon | 标签中的图标
+
+### Tag External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### CheckTag Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model:checked` | N
+default-checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+closable | Boolean | false | 标签是否可关闭 | N
+content | String / Number / Array | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N
+disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
+icon | String / Object | - | 标签图标 | N
+shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
+size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
+
+### CheckTag Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { checked: boolean })` | 状态切换时触发
+click | \- | 点击标签时触发
+close | \- | 如果关闭按钮存在，点击关闭按钮时触发
+
+### CheckTag Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义内容区域
+icon | 标签区域
+
+### CheckTag External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-tag-close-icon-color | @text-color-placeholder | - |
+| --td-tag-danger-color | @error-color | - |
+| --td-tag-danger-light-color | @error-color-1 | - |
+| --td-tag-default-color | @bg-color-component | - |
+| --td-tag-default-font-color | @text-color-primary | - |
+| --td-tag-default-light-color | @bg-color-secondarycontainer | - |
+| --td-tag-disabled-background-color | @bg-color-component-disabled | - |
+| --td-tag-disabled-border-color | @component-border | - |
+| --td-tag-disabled-color | @text-color-disabled | - |
+| --td-tag-extra-large-font-size | @font-size-base | - |
+| --td-tag-extra-large-height | 80rpx | - |
+| --td-tag-extra-large-icon-size | 32rpx | - |
+| --td-tag-extra-large-padding | 32rpx - 1px | - |
+| --td-tag-large-font-size | @font-size-base | - |
+| --td-tag-large-height | 56rpx | - |
+| --td-tag-large-icon-size | 32rpx | - |
+| --td-tag-large-padding | 16rpx - 1px | - |
+| --td-tag-mark-border-radius | @tag-round-border-radius | - |
+| --td-tag-medium-font-size | @font-size-s | - |
+| --td-tag-medium-height | 48rpx | - |
+| --td-tag-medium-icon-size | 28rpx | - |
+| --td-tag-medium-padding | 16rpx - 1px | - |
+| --td-tag-primary-color | @brand-color | - |
+| --td-tag-primary-light-color | @brand-color-light | - |
+| --td-tag-round-border-radius | 999px | - |
+| --td-tag-small-font-size | @font-size | - |
+| --td-tag-small-height | 40rpx | - |
+| --td-tag-small-icon-size | 24rpx | - |
+| --td-tag-small-padding | 12rpx - 1px | - |
+| --td-tag-square-border-radius | 8rpx | - |
+| --td-tag-success-color | @success-color | - |
+| --td-tag-success-light-color | @success-color-1 | - |
+| --td-tag-warning-color | @warning-color | - |
+| --td-tag-warning-light-color | @warning-color-1 | - |
+ant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color | @bg-color-container | - 
+ant = dark | @@theme-color, @@theme-light-color | - 
+ant = dark | @text-color-anti, @@theme-color | - 
+ant = light | @@theme-light-color, @@theme-color | - 
+ant) {
+ @themes: default | primary, success, warning, dange | - 
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @text-color-primary | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @text-color-disabled | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 80rpx | - 
+--td-tag-extra-large-icon-size | 32rpx | - 
+--td-tag-extra-large-padding | 32rpx - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 56rpx | - 
+--td-tag-large-icon-size | 32rpx | - 
+--td-tag-large-padding | 16rpx - 1px | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 48rpx | - 
+--td-tag-medium-icon-size | 28rpx | - 
+--td-tag-medium-padding | 16rpx - 1px | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-round-border-radius | 999px | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 40rpx | - 
+--td-tag-small-icon-size | 24rpx | - 
+--td-tag-small-padding | 12rpx - 1px | - 
+--td-tag-square-border-radius | 8rpx | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
+--td-tag-warning-light-color | @warning-color-1 | - 
+ant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color | @bg-color-container | - 
+ant = dark | @@theme-color, @@theme-light-color | - 
+ant = dark | @text-color-anti, @@theme-color | - 
+ant = light | @@theme-light-color, @@theme-color | - 
+ant) {
+ @themes: default | primary, success, warning, dange | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tag/_example/checkable/index.vue b/packages/tdesign-uniapp/components/tag/_example/checkable/index.vue
new file mode 100644
index 000000000..f725d0db1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/checkable/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <view class="wrapper">
+    <block
+      v-for="(item, index) in items"
+      :key="index"
+    >
+      <view class="block">
+        <text>{{ item }}</text>
+        <t-check-tag
+          size="large"
+          :variant="item"
+          :custom-style="mr16"
+          :content="['已选中态', '未选中态']"
+        />
+        <t-check-tag
+          default-checked
+          size="large"
+          :variant="item"
+          :content="['已选中态', '未选中态']"
+        />
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+import tCheckTag from 'tdesign-uniapp/check-tag/check-tag.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tCheckTag,
+  },
+  data() {
+    return {
+      items: ['light', 'dark', 'outline', 'light-outline'],
+      mr16: 'margin-right: 16px;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.wrapper {
+    flex-wrap: wrap;
+    margin: 0 32rpx;
+}
+
+.wrapper t-check-tag {
+    display: block;
+}
+
+.block {
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    line-height: 76rpx;
+    color: var(--td-text-color-placeholder);
+}
+
+.block text {
+    display: block;
+    width: 160rpx;
+    margin-right: 32rpx;
+}
+
+.block + .block {
+    margin-top: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/closable/index.vue b/packages/tdesign-uniapp/components/tag/_example/closable/index.vue
new file mode 100644
index 000000000..5a59d7083
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/closable/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <view class="demo-closable">
+    <t-tag
+      v-if="show[0]"
+      :custom-style="mr16"
+      closable
+      variant="light"
+      @close="handleClose0"
+    >
+      文字标签
+    </t-tag>
+    <t-tag
+      v-if="show[1]"
+      :custom-style="mr16"
+      closable
+      variant="outline"
+      @close="handleClose1"
+    >
+      文字标签
+    </t-tag>
+  </view>
+</template>
+
+<script>
+import tTag from 'tdesign-uniapp/tag/tag.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTag,
+  },
+  data() {
+    return {
+      show: [true, true],
+      mr16: 'margin-right: 16px;',
+    };
+  },
+  created() {},
+  methods: {
+    handleClose0() {
+      this.show[0] = false;
+    },
+    handleClose1() {
+      this.show[1] = false;
+    },
+  },
+};
+</script>
+<style>
+.demo-closable {
+    margin-left: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/size/index.vue b/packages/tdesign-uniapp/components/tag/_example/size/index.vue
new file mode 100644
index 000000000..4a75ec3e6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/size/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <view>
+    <view class="block">
+      <t-tag
+        :custom-style="mr16V"
+        size="extra-large"
+        variant="light"
+      >
+        加大尺寸
+      </t-tag>
+      <t-tag
+        :custom-style="mr16V"
+        size="large"
+        variant="light"
+      >
+        大尺寸
+      </t-tag>
+      <t-tag
+        :custom-style="mr16V"
+        size="medium"
+        variant="light"
+      >
+        中尺寸
+      </t-tag>
+      <t-tag
+        custom-style="vertical-align: top;"
+        size="small"
+        variant="light"
+      >
+        小尺寸
+      </t-tag>
+    </view>
+
+    <view class="block">
+      <t-tag
+        :custom-style="mr8V"
+        size="extra-large"
+        variant="light"
+        closable
+      >
+        加大尺寸
+      </t-tag>
+      <t-tag
+        :custom-style="mr8V"
+        size="large"
+        variant="light"
+        closable
+      >
+        大尺寸
+      </t-tag>
+      <t-tag
+        :custom-style="mr8V"
+        size="medium"
+        variant="light"
+        closable
+      >
+        中尺寸
+      </t-tag>
+      <t-tag
+        size="small"
+        variant="light"
+        closable
+        custom-style="vertical-align: top;"
+      >
+        小尺寸
+      </t-tag>
+    </view>
+  </view>
+</template>
+
+<script>
+import tTag from 'tdesign-uniapp/tag/tag.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTag,
+  },
+  data() {
+    return {
+      mr16V: 'margin-right: 16px;vertical-align: top;',
+      mr8V: 'margin-right: 8px;vertical-align: top;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    margin: 0 32rpx;
+}
+
+.block + .block {
+    margin-top: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/skyline/tag.less b/packages/tdesign-uniapp/components/tag/_example/skyline/tag.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/skyline/tag.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/tag/_example/skyline/tag.vue b/packages/tdesign-uniapp/components/tag/_example/skyline/tag.vue
new file mode 100644
index 000000000..30b4b863e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/skyline/tag.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block demo-navbar"
+      title="Tag"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Tag 标签
+        </view>
+        <view class="demo-desc">
+          用于表明主体的类目，属性或状态。
+        </view>
+        <t-demo title="01 组件类型">
+          <type />
+        </t-demo>
+        <t-demo desc="可关闭的标签">
+          <closable />
+        </t-demo>
+        <t-demo desc="可点击的标签">
+          <checkable />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="展示型标签"
+        >
+          <theme />
+        </t-demo>
+        <t-demo title="03 组件尺寸">
+          <size />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import theme from '../theme/index.vue';
+import size from '../size/index.vue';
+import type from '../type/index.vue';
+import closable from '../closable/index.vue';
+import checkable from '../checkable/index.vue';
+export default {
+  components: {
+    tNavbar,
+    theme,
+    size,
+    type,
+    closable,
+    checkable,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './tag.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/tag.less b/packages/tdesign-uniapp/components/tag/_example/tag.less
new file mode 100644
index 000000000..60bdd590a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/tag.less
@@ -0,0 +1,3 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/tag/_example/tag.vue b/packages/tdesign-uniapp/components/tag/_example/tag.vue
new file mode 100644
index 000000000..3ee61db07
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/tag.vue
@@ -0,0 +1,61 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Tag"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view>
+      <t-demo-header
+        title="Tag 标签"
+        desc="用于表明主体的类目，属性或状态。"
+      />
+      <t-demo title="01 组件类型">
+        <typeDemo />
+      </t-demo>
+      <t-demo desc="可关闭的标签">
+        <closable />
+      </t-demo>
+      <t-demo desc="可点击的标签">
+        <checkable />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="展示型标签"
+      >
+        <theme />
+      </t-demo>
+      <t-demo title="03 组件尺寸">
+        <size />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import theme from './theme/index.vue';
+import size from './size/index.vue';
+import typeDemo from './type/index.vue';
+import closable from './closable/index.vue';
+import checkable from './checkable/index.vue';
+
+export default {
+  components: {
+    theme,
+    size,
+    typeDemo,
+    closable,
+    checkable,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './tag.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/theme/index.vue b/packages/tdesign-uniapp/components/tag/_example/theme/index.vue
new file mode 100644
index 000000000..b0485f0cf
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/theme/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <view>
+    <view class="block">
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+      >
+        默认
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+        theme="primary"
+      >
+        主要
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+        theme="warning"
+      >
+        警告
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+        theme="danger"
+      >
+        危险
+      </t-tag>
+      <t-tag
+        variant="light"
+        theme="success"
+      >
+        成功
+      </t-tag>
+    </view>
+
+    <view class="block">
+      <t-tag
+        :custom-style="mr16"
+        theme="default"
+      >
+        默认
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        theme="primary"
+      >
+        主要
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        theme="warning"
+      >
+        警告
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        theme="danger"
+      >
+        危险
+      </t-tag>
+      <t-tag
+        theme="success"
+      >
+        成功
+      </t-tag>
+    </view>
+
+    <view class="block">
+      <t-tag
+        :custom-style="mr16"
+        variant="outline"
+      >
+        默认
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="outline"
+        theme="primary"
+      >
+        主要
+      </t-tag>
+      <t-tag
+        t-class="margin-16"
+        :custom-style="mr16"
+        variant="outline"
+        theme="warning"
+      >
+        警告
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="outline"
+        theme="danger"
+      >
+        危险
+      </t-tag>
+      <t-tag
+        variant="outline"
+        theme="success"
+      >
+        成功
+      </t-tag>
+    </view>
+
+    <view class="block">
+      <t-tag
+        :custom-style="mr16"
+        variant="light-outline"
+      >
+        默认
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light-outline"
+        theme="primary"
+      >
+        主要
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light-outline"
+        theme="warning"
+      >
+        警告
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="light-outline"
+        theme="danger"
+      >
+        危险
+      </t-tag>
+      <t-tag
+        variant="light-outline"
+        theme="success"
+      >
+        成功
+      </t-tag>
+    </view>
+  </view>
+</template>
+
+<script>
+import tTag from 'tdesign-uniapp/tag/tag.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTag,
+  },
+  data() {
+    return {
+      mr16: 'margin-right: 16px;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style>
+.block {
+    margin: 0 32rpx;
+}
+
+.block + .block {
+    margin-top: 48rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/_example/type/index.vue b/packages/tdesign-uniapp/components/tag/_example/type/index.vue
new file mode 100644
index 000000000..f3fbcd73b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/_example/type/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <view>
+    <view class="demo">
+      <view class="tag-demo-desc">
+        基础标签
+      </view>
+
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+      >
+        标签文字
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="outline"
+      >
+        标签文字
+      </t-tag>
+    </view>
+
+    <view class="demo">
+      <view class="tag-demo-desc">
+        圆弧标签
+      </view>
+
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+        shape="round"
+      >
+        标签文字
+      </t-tag>
+      <t-tag
+        :custom-style="mr16"
+        variant="outline"
+        shape="round"
+      >
+        标签文字
+      </t-tag>
+      <t-tag
+        variant="outline"
+        shape="mark"
+      >
+        标签文字
+      </t-tag>
+    </view>
+
+    <view class="demo">
+      <view class="tag-demo-desc">
+        带图标的标签
+      </view>
+
+      <t-tag
+        :custom-style="mr16"
+        variant="light"
+        icon="discount"
+      >
+        标签文字
+      </t-tag>
+      <t-tag
+        variant="outline"
+        icon="discount"
+      >
+        标签文字
+      </t-tag>
+    </view>
+
+    <!-- skyline暂不支持设置后max-width超出省略 -->
+    <view
+      v-if="!skylineRender"
+      class="demo"
+    >
+      <view class="tag-demo-desc">
+        超长省略文本标签
+      </view>
+
+      <t-tag
+        :max-width="130"
+        variant="light"
+      >
+        超长省略文本标签超长省略文本标签
+      </t-tag>
+    </view>
+  </view>
+</template>
+
+<script>
+import tTag from 'tdesign-uniapp/tag/tag.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTag,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+      mr16: 'margin-right: 16px;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.demo {
+    padding: 0 32rpx 48rpx;
+}
+
+.demo:last-child {
+    padding-bottom: 0;
+}
+
+.tag-demo-desc {
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+    margin-bottom: 32rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/props.ts b/packages/tdesign-uniapp/components/tag/props.ts
new file mode 100644
index 000000000..5729fc7a3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/props.ts
@@ -0,0 +1,70 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTagProps } from './type';
+export default {
+  /** 标签是否可关闭 */
+  closable: {
+    type: [Boolean, Object],
+    default: false as TdTagProps['closable'],
+  },
+  /** 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 */
+  disabled: Boolean,
+  /** 标签中的图标，可自定义图标呈现 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 */
+  maxWidth: {
+    type: [String, Number],
+  },
+  /** 标签类型，有三种：方形、圆角方形、标记型 */
+  shape: {
+    type: String,
+    default: 'square' as TdTagProps['shape'],
+    validator(val: TdTagProps['shape']): boolean {
+      if (!val) return true;
+      return ['square', 'round', 'mark'].includes(val);
+    },
+  },
+  /** 标签尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdTagProps['size'],
+    validator(val: TdTagProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large', 'extra-large'].includes(val);
+    },
+  },
+  /** 组件风格，用于描述组件不同的应用场景 */
+  theme: {
+    type: String,
+    default: 'default' as TdTagProps['theme'],
+    validator(val: TdTagProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'primary', 'warning', 'danger', 'success'].includes(val);
+    },
+  },
+  /** 标签风格变体 */
+  variant: {
+    type: String,
+    default: 'dark' as TdTagProps['variant'],
+    validator(val: TdTagProps['variant']): boolean {
+      if (!val) return true;
+      return ['dark', 'light', 'outline', 'light-outline'].includes(val);
+    },
+  },
+  /** 点击时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果关闭按钮存在，点击关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tag/tag.less b/packages/tdesign-uniapp/components/tag/tag.less
new file mode 100644
index 000000000..d031c28e6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/tag.less
@@ -0,0 +1,210 @@
+@import '../common/style/base.less';
+
+// themes
+@tag-default-color: var(--td-tag-default-color, @bg-color-component);
+@tag-default-light-color: var(--td-tag-default-light-color, @bg-color-secondarycontainer);
+@tag-primary-color: var(--td-tag-primary-color, @brand-color);
+@tag-primary-light-color: var(--td-tag-primary-light-color, @brand-color-light);
+@tag-success-color: var(--td-tag-success-color, @success-color);
+@tag-success-light-color: var(--td-tag-success-light-color, @success-color-1);
+@tag-warning-color: var(--td-tag-warning-color, @warning-color);
+@tag-warning-light-color: var(--td-tag-warning-light-color, @warning-color-1);
+@tag-danger-color: var(--td-tag-danger-color, @error-color);
+@tag-danger-light-color: var(--td-tag-danger-light-color, @error-color-1);
+
+// variant
+@tag-outline-bg-color: var(--td-tag-outline-bg-color, @bg-color-container);
+@tag-default-font-color: var(--td-tag-default-font-color, @text-color-primary);
+
+// status
+@tag-disabled-color: var(--td-tag-disabled-color, @text-color-disabled);
+@tag-disabled-background-color: var(--td-tag-disabled-background-color, @bg-color-component-disabled);
+@tag-disabled-border-color: var(--td-tag-disabled-border-color, @component-border);
+
+// size
+@tag-small-padding: var(--td-tag-small-padding, 12rpx - 1px);
+@tag-medium-padding: var(--td-tag-medium-padding, 16rpx - 1px);
+@tag-large-padding: var(--td-tag-large-padding, 16rpx - 1px);
+@tag-extra-large-padding: var(--td-tag-extra-large-padding, 32rpx - 1px);
+
+@tag-small-font-size: var(--td-tag-small-font-size, @font-size);
+@tag-medium-font-size: var(--td-tag-medium-font-size, @font-size-s);
+@tag-large-font-size: var(--td-tag-large-font-size, @font-size-base);
+@tag-extra-large-font-size: var(--td-tag-extra-large-font-size, @font-size-base);
+
+@tag-small-icon-size: var(--td-tag-small-icon-size, 24rpx);
+@tag-medium-icon-size: var(--td-tag-medium-icon-size, 28rpx);
+@tag-large-icon-size: var(--td-tag-large-icon-size, 32rpx);
+@tag-extra-large-icon-size: var(--td-tag-extra-large-icon-size, 32rpx);
+
+@tag-small-height: var(--td-tag-small-height, 40rpx);
+@tag-medium-height: var(--td-tag-medium-height, 48rpx);
+@tag-large-height: var(--td-tag-large-height, 56rpx);
+@tag-extra-large-height: var(--td-tag-extra-large-height, 80rpx);
+
+@tag-square-border-radius: var(--td-tag-square-border-radius, 8rpx);
+@tag-round-border-radius: var(--td-tag-round-border-radius, 999px);
+@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius);
+
+@tag-close-icon-color: var(--td-tag-close-icon-color, @text-color-placeholder);
+
+.genVariant(@variant) {
+  @themes: default, primary, success, warning, danger;
+  each(@themes, {
+    @theme-color: 'tag-@{value}-color';
+    @theme-light-color: 'tag-@{value}-light-color';
+
+    &.@{prefix}-tag--@{value} {
+      color: if(@variant = dark, @text-color-anti, @@theme-color);
+      border-color: if(@variant = light, @@theme-light-color, @@theme-color);
+      background-color: if(@variant = dark, @@theme-color, @@theme-light-color);
+    }
+  });
+}
+
+.@{prefix}-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: @tag-square-border-radius;
+  font-size: @tag-medium-font-size;
+  user-select: none;
+  vertical-align: middle;
+
+  &__text {
+    word-wrap: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__icon,
+  &__icon-close {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon-close {
+    color: @tag-close-icon-color;
+  }
+
+  &__icon:not(:empty) + &__text:not(:empty),
+  &__text:not(:empty) + &__icon-close:not(:empty) {
+    margin-left: 8rpx;
+  }
+
+  &.@{prefix}-tag {
+    &--small {
+      height: @tag-small-height;
+      line-height: @tag-small-height;
+      padding: 0 @tag-small-padding;
+      font-size: @tag-small-font-size;
+
+      .@{prefix}-icon,
+      .@{prefix}-icon-close {
+        font-size: @tag-small-icon-size;
+      }
+
+      .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty),
+      .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) {
+        margin-left: 4rpx;
+      }
+    }
+
+    &--medium {
+      height: @tag-medium-height;
+      line-height: @tag-medium-height;
+      padding: 0 @tag-medium-padding;
+      font-size: @tag-medium-font-size;
+
+      .@{prefix}-icon,
+      .@{prefix}-icon-close {
+        font-size: @tag-medium-icon-size;
+      }
+    }
+
+    &--large {
+      height: @tag-large-height;
+      line-height: @tag-large-height;
+      padding: 0 @tag-large-padding;
+      font-size: @tag-large-font-size;
+
+      .@{prefix}-icon,
+      .@{prefix}-icon-close {
+        font-size: @tag-large-icon-size;
+      }
+    }
+
+    &--extra-large {
+      height: @tag-extra-large-height;
+      line-height: @tag-extra-large-height;
+      padding: 0 @tag-extra-large-padding;
+      font-size: @tag-extra-large-font-size;
+
+      .@{prefix}-icon,
+      .@{prefix}-icon-close {
+        font-size: @tag-extra-large-icon-size;
+      }
+    }
+  }
+
+  &.@{prefix}-tag {
+    &--square {
+      border-radius: @tag-square-border-radius;
+    }
+
+    &--round {
+      border-radius: @tag-round-border-radius;
+    }
+
+    &--mark {
+      border-radius: 0;
+      border-top-right-radius: @tag-mark-border-radius;
+      border-bottom-right-radius: @tag-mark-border-radius;
+    }
+  }
+
+  &--dark {
+    .genVariant(dark);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+  }
+
+  &--outline {
+    .genVariant(outline);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+    each(@themes, {
+      &.@{prefix}-tag--@{value} {
+        background-color: @tag-outline-bg-color;
+      }
+    });
+  }
+
+  &--light {
+    .genVariant(light);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+    }
+  }
+
+  &--light-outline {
+    .genVariant(light-outline);
+    &.@{prefix}-tag--default {
+      color: @tag-default-font-color;
+      border-color: @component-border;
+    }
+  }
+
+  &.@{prefix}-tag--closable {
+    &.@{prefix}-tag--disabled {
+      cursor: not-allowed;
+      color: @tag-disabled-color;
+      background-color: @tag-disabled-background-color;
+      border-color: @tag-disabled-border-color;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tag/tag.vue b/packages/tdesign-uniapp/components/tag/tag.vue
new file mode 100644
index 000000000..5ce587bb5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/tag.vue
@@ -0,0 +1,161 @@
+<template>
+  <view
+    :class="[className + ' ', tClass]"
+    :style="_._style([tagStyle, customStyle])"
+    @click="handleClick"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__icon'"
+    >
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="prefix + '-icon'"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+        />
+      </block>
+      <slot name="icon" />
+    </view>
+    <view :class="classPrefix + '__text'">
+      <slot />
+    </view>
+    <block
+      v-if="_closable"
+      name="icon"
+    >
+      <t-icon
+        :custom-style="_closable.style || ''"
+        :t-class="classPrefix + '__icon-close ' + prefix + '-icon'"
+        :prefix="_closable.prefix"
+        :name="_closable.name"
+        :size="_closable.size"
+        :color="_closable.color"
+        :aria-hidden="!!_closable.ariaHidden"
+        :aria-label="_closable.ariaLabel || '关闭'"
+        :aria-role="_closable.ariaRole"
+        @click="handleClose"
+      />
+    </block>
+    <slot
+      v-else
+      name="closable"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '.././icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames, calcIcon } from '../common/utils';
+import { isNumber } from '../common/validator';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-tag`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    tIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      className: '',
+      tagStyle: '',
+      _,
+
+      _icon: null,
+      _closable: null,
+    };
+  },
+  watch: {
+    size: 'setClass',
+    shape: 'setClass',
+    theme: 'setClass',
+    variant: 'setClass',
+    disabled: 'setClass',
+    maxWidth: 'setTagStyle',
+    icon: {
+      handler(s) {
+        this._icon = calcIcon(s);
+      },
+      immediate: true,
+    },
+    closable: {
+      handler(s) {
+        this.setClass();
+        this._closable = calcIcon(s, 'close');
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.setClass();
+    this.setTagStyle();
+  },
+  methods: {
+    setClass() {
+      const { prefix, classPrefix } = this;
+      const { size, shape, theme, variant, closable, disabled } = this;
+      const tagClass = [
+        classPrefix,
+        `${classPrefix}--${theme || 'default'}`,
+        `${classPrefix}--${variant}`,
+        closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
+        disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
+        `${classPrefix}--${size}`,
+        `${classPrefix}--${shape}`,
+      ];
+      const className = classNames(tagClass);
+      this.className = className;
+    },
+
+    setTagStyle() {
+      const { maxWidth } = this;
+      if (!maxWidth) {
+        return '';
+      }
+      const width = isNumber(maxWidth) ? `${maxWidth}px` : maxWidth;
+      this.tagStyle = `max-width:${width};`;
+    },
+
+    handleClick(e) {
+      if (this.disabled) return;
+      this.$emit('click', { e });
+    },
+
+    handleClose(e) {
+      if (this.disabled) return;
+      this.$emit('close', { e });
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './tag.css';
+
+</style>
diff --git a/packages/tdesign-uniapp/components/tag/type.ts b/packages/tdesign-uniapp/components/tag/type.ts
new file mode 100644
index 000000000..3628c1e69
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tag/type.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdTagProps {
+  /**
+   * 标签是否可关闭
+   * @default false
+   */
+  closable?: boolean | object;
+  /**
+   * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 标签中的图标，可自定义图标呈现
+   */
+  icon?: string | object;
+  /**
+   * 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80
+   */
+  maxWidth?: string | number;
+  /**
+   * 标签类型，有三种：方形、圆角方形、标记型
+   * @default square
+   */
+  shape?: 'square' | 'round' | 'mark';
+  /**
+   * 标签尺寸
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large' | 'extra-large';
+  /**
+   * 组件风格，用于描述组件不同的应用场景
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'warning' | 'danger' | 'success';
+  /**
+   * 标签风格变体
+   * @default dark
+   */
+  variant?: 'dark' | 'light' | 'outline' | 'light-outline';
+  /**
+   * 点击时触发
+   */
+  onClick?: (context: { e: MouseEvent }) => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发
+   */
+  onClose?: (context: { e: MouseEvent }) => void;
+}
diff --git a/packages/tdesign-uniapp/components/tdesign-uniapp/tdesign-uniapp.vue b/packages/tdesign-uniapp/components/tdesign-uniapp/tdesign-uniapp.vue
new file mode 100644
index 000000000..b5c54095b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tdesign-uniapp/tdesign-uniapp.vue
@@ -0,0 +1,11 @@
+<template>
+  <div />
+</template>
+<script>
+export default {
+
+};
+</script>
+
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/README.en-US.md b/packages/tdesign-uniapp/components/textarea/README.en-US.md
new file mode 100644
index 000000000..e3fff67a7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/README.en-US.md
@@ -0,0 +1,78 @@
+:: BASE_DOC ::
+
+## API
+
+### Textarea Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+adjust-position | Boolean | true | \- | N
+allow-input-over-max | Boolean | false | Allow input after exceeding `maxlength` or `maxcharacter` | N
+autofocus | Boolean | false | \- | N
+autosize | Boolean / Object | false | Typescript：`boolean \| { maxHeight?: number, minHeight?: number }` | N
+bordered | Boolean | false | \- | N
+confirm-hold | Boolean | false | \- | N
+confirm-type | String | return | options: return/send/search/next/go/done。Typescript：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
+cursor | Number | -1 | \- | N
+cursor-color | String | #0052d9 | \- | N
+cursor-spacing | Number | 0 | \- | N
+disable-default-padding | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+fixed | Boolean | false | \- | N
+focus | Boolean | false | \- | N
+hold-keyboard | Boolean | false | \- | N
+indicator | Boolean | false | \- | N
+label | String | - | \- | N
+maxcharacter | Number | - | \- | N
+maxlength | Number | -1 | \- | N
+placeholder | String | undefined | \- | N
+placeholder-class | String | textarea-placeholder | \- | N
+placeholder-style | String | - | \- | N
+readonly | Boolean | undefined | \- | N
+selection-end | Number | -1 | \- | N
+selection-start | Number | -1 | \- | N
+show-confirm-bar | Boolean | true | \- | N
+value | String / Number | - | `v-model:value` is supported。Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/textarea/type.ts) | N
+default-value | String / Number | - | uncontrolled property。Typescript：`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/textarea/type.ts) | N
+
+### Textarea Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { value: TextareaValue, cursor: number })` | \-
+change | `(context: { value: TextareaValue, cursor: number })` | \-
+enter | `(context: { value: TextareaValue })` | \-
+focus | `(context: { value: TextareaValue })` | \-
+keyboardheightchange | `(context: { height: number, duration: number })` | \-
+line-change | `(context: { value: TextareaValue })` | \-
+
+### Textarea Slots
+
+name | Description
+-- | --
+label | \-
+
+### Textarea External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-indicator | \-
+t-class-label | \-
+t-class-textarea | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | - 
+--td-textarea-border-color | @component-border | - 
+--td-textarea-border-radius | @radius-default | - 
+--td-textarea-disabled-text-color | @text-color-disabled | - 
+--td-textarea-indicator-text-color | @text-color-placeholder | - 
+--td-textarea-label-color | @text-color-primary | - 
+--td-textarea-padding | 32rpx | - 
+--td-textarea-placeholder-color | @text-color-placeholder | - 
+--td-textarea-text-color | @text-color-primary | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/textarea/README.md b/packages/tdesign-uniapp/components/textarea/README.md
new file mode 100644
index 000000000..092db4563
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/README.md
@@ -0,0 +1,132 @@
+---
+title: Textarea 多行文本框
+description: 用于多行文本信息输入。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+
+```js
+import TTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+```
+
+### 组件类型
+
+基础多行文本框
+
+{{ base }}
+
+带标题多行文本框
+
+{{ label }}
+
+自动增高多行文本框
+
+{{ autosize }}
+
+设置最大字符个数
+
+{{ maxlength }}
+
+设置最大字符个数，一个汉字表示两个字符
+
+{{ maxcharacter }}
+
+### 组件状态
+
+禁用多行文本框
+
+{{ disabled }}
+
+### 自定义组件样式
+
+标签外置输入框
+
+{{ custom }}
+
+## 提示
+
+- 如果需要在页面中调整 `textarea` 中 `placeholder` 样式，请使用名称为`t-textarea__placeholder`的Class选择器，直接覆盖组件内部样式（注意权重）。
+
+## API
+
+### Textarea Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+allow-input-over-max | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入 | N
+autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
+autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }。TS 类型：`boolean \| { maxHeight?: number, minHeight?: number }` | N
+bordered | Boolean | false | 是否显示外边框 | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
+confirm-type | String | return | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：return/send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
+cursor | Number | -1 | 指定 focus 时的光标位置 | N
+cursor-color | String | #0052d9 | 【试验性】光标颜色，仅在 Skyline 下有效 | N
+cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
+disable-default-padding | Boolean | false | 是否去掉 iOS 下的默认内边距 | N
+disabled | Boolean | undefined | 是否禁用文本框 | N
+fixed | Boolean | false | 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N
+focus | Boolean | false | 自动聚焦 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+indicator | Boolean | false | 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 | N
+label | String | - | 左侧文本 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
+maxlength | Number | -1 | 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 | N
+placeholder | String | undefined | 占位符 | N
+placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight | N
+placeholder-style | String | - | 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight | N
+readonly | Boolean | undefined | 只读状态 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | N
+value | String / Number | - | 文本框值。支持语法糖 `v-model:value`。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/textarea/type.ts) | N
+default-value | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/textarea/type.ts) | N
+
+### Textarea Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { value: TextareaValue, cursor: number })` | 失去焦点时触发
+change | `(context: { value: TextareaValue, cursor: number })` | 输入内容变化时触发
+enter | `(context: { value: TextareaValue })` | 点击完成时触发
+focus | `(context: { value: TextareaValue })` | 获得焦点时触发
+keyboardheightchange | `(context: { height: number, duration: number })` | 键盘高度发生变化的时候触发此事件
+line-change | `(context: { value: TextareaValue })` | 行高发生变化时触发
+
+### Textarea Slots
+
+名称 | 描述
+-- | --
+label | 自定义 `label` 显示内容
+
+### Textarea External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-indicator | 计数器样式类
+t-class-label | 左侧文本样式类
+t-class-textarea | 多行文本框样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-textarea-background-color | @bg-color-container | - |
+| --td-textarea-border-color | @component-border | - |
+| --td-textarea-border-radius | @radius-default | - |
+| --td-textarea-disabled-text-color | @text-color-disabled | - |
+| --td-textarea-indicator-text-color | @text-color-placeholder | - |
+| --td-textarea-label-color | @text-color-primary | - |
+| --td-textarea-padding | 32rpx | - |
+| --td-textarea-placeholder-color | @text-color-placeholder | - |
+| --td-textarea-text-color | @text-color-primary | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/textarea/_example/autosize/index.vue b/packages/tdesign-uniapp/components/textarea/_example/autosize/index.vue
new file mode 100644
index 000000000..9eb7c516d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/autosize/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <view>
+    <t-textarea
+      label="标签文字"
+      placeholder="请输入文字"
+      :disable-default-padding="true"
+      :autosize="autosize"
+      @line-change="onLineChange"
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {
+      autosize: {
+        maxHeight: 120,
+        minHeight: 20,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    onLineChange(e) {
+      console.log('lineCount: ', e);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/base/index.vue b/packages/tdesign-uniapp/components/textarea/_example/base/index.vue
new file mode 100644
index 000000000..e80e01e2e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/base/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+    <t-textarea
+      t-class="external-class"
+      placeholder="请输入文字"
+      :disable-default-padding="true"
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+:deep(.external-class) {
+    height: 256rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/card/index.vue b/packages/tdesign-uniapp/components/textarea/_example/card/index.vue
new file mode 100644
index 000000000..a94124eb1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/card/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <view class="textarea-example">
+    <t-textarea
+      t-class="external-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      :maxlength="500"
+      indicator
+      :disable-default-padding="true"
+      :custom-style="style"
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {
+      style: 'border-radius: 18rpx;',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.textarea-example {
+    margin: 0 32rpx;
+    border-radius: 18rpx;
+}
+
+:deep(.external-class) {
+    height: 312rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/custom/index.vue b/packages/tdesign-uniapp/components/textarea/_example/custom/index.vue
new file mode 100644
index 000000000..0209194f6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/custom/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <view class="textarea-example">
+    <text class="textarea-example__label">
+      标签文字
+    </text>
+    <t-textarea
+      t-class="external-class"
+      placeholder="请输入文字"
+      bordered
+      :maxlength="100"
+      :disable-default-padding="true"
+      indicator
+      :custom-style="style"
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {
+      style: 'height: 248rpx',
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+.textarea-example {
+    padding: 32rpx 32rpx 48rpx;
+    background-color: var(--bg-color-demo);
+}
+
+:deep(.external-class){
+    padding-top: 24rpx !important;
+    padding-bottom: 24rpx !important;
+}
+
+.textarea-example__label {
+    display: block;
+    color: var(--td-text-color-primary);
+    font-size: 24rpx;
+    line-height: 40rpx;
+    padding-bottom: 16rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/disabled/index.vue b/packages/tdesign-uniapp/components/textarea/_example/disabled/index.vue
new file mode 100644
index 000000000..f072e5ebc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/disabled/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-textarea
+      t-class="external-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      value="不可编辑文字"
+      :disable-default-padding="true"
+      disabled
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+:deep(.external-class) {
+    height: 256rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/label/index.vue b/packages/tdesign-uniapp/components/textarea/_example/label/index.vue
new file mode 100644
index 000000000..8be58b1b8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/label/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <view>
+    <t-textarea
+      t-class="external-class"
+      label="标签文字"
+      placeholder="请输入文字"
+      :disable-default-padding="true"
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+:deep(.external-class) {
+    height: 256rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/maxcharacter/index.vue b/packages/tdesign-uniapp/components/textarea/_example/maxcharacter/index.vue
new file mode 100644
index 000000000..855e84892
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/maxcharacter/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-textarea
+      t-class="external-class"
+      label="标签文字"
+      placeholder="设置最大字符个数，一个汉字表示两个字符"
+      :maxcharacter="200"
+      :disable-default-padding="true"
+      indicator
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+:deep(.external-class) {
+    height: 324rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/maxlength/index.vue b/packages/tdesign-uniapp/components/textarea/_example/maxlength/index.vue
new file mode 100644
index 000000000..215f13e08
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/maxlength/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-textarea
+      t-class="external-class"
+      label="标签文字"
+      placeholder="设置最大字符个数"
+      :maxlength="200"
+      :disable-default-padding="true"
+      indicator
+    />
+  </view>
+</template>
+
+<script>
+import tTextarea from 'tdesign-uniapp/textarea/textarea.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tTextarea,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style scoped>
+:deep(.external-class) {
+    height: 324rpx;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.less b/packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.vue b/packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.vue
new file mode 100644
index 000000000..341a27a55
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/skyline/textarea.vue
@@ -0,0 +1,22 @@
+<template>
+  <view>
+    <textarea-demo />
+  </view>
+</template>
+
+<script lang="ts">
+
+import textareaDemo from '../textarea.vue';
+export default {
+  components: {
+    textareaDemo,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './textarea.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/_example/textarea.less b/packages/tdesign-uniapp/components/textarea/_example/textarea.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/textarea/_example/textarea.vue b/packages/tdesign-uniapp/components/textarea/_example/textarea.vue
new file mode 100644
index 000000000..e842503d0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/_example/textarea.vue
@@ -0,0 +1,96 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Textarea"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <t-demo-header
+          title="Textarea 多行文本框"
+          desc="用于多行文本信息输入。"
+          notice="渲染框架支持情况：Skyline、WebView"
+        />
+        <t-demo
+          title="01 组件类型"
+          desc="基础多行文本框"
+        >
+          <BaseDemo />
+        </t-demo>
+        <t-demo
+          title=""
+          desc="带标题多行文本框"
+        >
+          <labelDemo />
+        </t-demo>
+        <t-demo
+          title=""
+          desc="自动增高多行文本框"
+        >
+          <autosize />
+        </t-demo>
+        <t-demo desc="设置字符数限制">
+          <maxlength />
+        </t-demo>
+        <t-demo>
+          <maxcharacter />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="禁用状态"
+        >
+          <disabled />
+        </t-demo>
+        <t-demo
+          title="03 组件样式"
+          desc="卡片样式"
+        >
+          <card />
+        </t-demo>
+        <t-demo
+          title="04 特殊样式"
+          desc="标签外置输入框"
+        >
+          <custom />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import labelDemo from './label/index.vue';
+import autosize from './autosize/index.vue';
+import maxlength from './maxlength/index.vue';
+import disabled from './disabled/index.vue';
+import maxcharacter from './maxcharacter/index.vue';
+import card from './card/index.vue';
+import custom from './custom/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    labelDemo,
+    autosize,
+    disabled,
+    maxlength,
+    maxcharacter,
+    card,
+    custom,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+@import './textarea.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/computed.js b/packages/tdesign-uniapp/components/textarea/computed.js
new file mode 100644
index 000000000..79167a308
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/computed.js
@@ -0,0 +1,14 @@
+import utils from '../common/utils.wxs';
+
+
+export function textareaStyle(autosize) {
+  if (autosize && autosize.constructor === 'Object') {
+    return utils._style({
+      'min-height': utils.addUnit(autosize.minHeight),
+      'max-height': utils.addUnit(autosize.maxHeight),
+    });
+  }
+  return '';
+}
+
+
diff --git a/packages/tdesign-uniapp/components/textarea/props.ts b/packages/tdesign-uniapp/components/textarea/props.ts
new file mode 100644
index 000000000..1d2456ceb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/props.ts
@@ -0,0 +1,152 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTextareaProps } from './type';
+export default {
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入 */
+  allowInputOverMax: Boolean,
+  /** 自动聚焦，拉起键盘 */
+  autofocus: Boolean,
+  /** 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } */
+  autosize: {
+    type: [Boolean, Object],
+    default: false as TdTextareaProps['autosize'],
+  },
+  /** 是否显示外边框 */
+  bordered: Boolean,
+  /** 点击键盘右下角按钮时是否保持键盘不收起点 */
+  confirmHold: Boolean,
+  /** 设置键盘右下角按钮的文字，仅在 type='text'时生效 */
+  confirmType: {
+    type: String,
+    default: 'return' as TdTextareaProps['confirmType'],
+    validator(val: TdTextareaProps['confirmType']): boolean {
+      if (!val) return true;
+      return ['return', 'send', 'search', 'next', 'go', 'done'].includes(val);
+    },
+  },
+  /** 指定 focus 时的光标位置 */
+  cursor: {
+    type: Number,
+    default: -1,
+  },
+  /** 【试验性】光标颜色，仅在 Skyline 下有效 */
+  cursorColor: {
+    type: String,
+    default: '#0052d9',
+  },
+  /** 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否去掉 iOS 下的默认内边距 */
+  disableDefaultPadding: Boolean,
+  /** 是否禁用文本框 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true */
+  fixed: Boolean,
+  /** 自动聚焦 */
+  focus: Boolean,
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: Boolean,
+  /** 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效 */
+  indicator: Boolean,
+  /** 左侧文本 */
+  label: {
+    type: String,
+  },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度 */
+  maxlength: {
+    type: Number,
+    default: -1,
+  },
+  /** 占位符 */
+  placeholder: {
+    type: String,
+    default: undefined,
+  },
+  /** 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight */
+  placeholderClass: {
+    type: String,
+    default: 'textarea-placeholder',
+  },
+  /** 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight */
+  placeholderStyle: {
+    type: String,
+    default: '',
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 */
+  selectionEnd: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 */
+  selectionStart: {
+    type: Number,
+    default: -1,
+  },
+  /** 是否显示键盘上方带有”完成“按钮那一栏 */
+  showConfirmBar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 文本框值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 文本框值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 失去焦点时触发 */
+  onBlur: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 输入内容变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击完成时触发 */
+  onEnter: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 获得焦点时触发 */
+  onFocus: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 键盘高度发生变化的时候触发此事件 */
+  onKeyboardheightchange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 行高发生变化时触发 */
+  onLineChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/textarea/textarea.less b/packages/tdesign-uniapp/components/textarea/textarea.less
new file mode 100644
index 000000000..bc3757924
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/textarea.less
@@ -0,0 +1,110 @@
+@import '../common/style/base.less';
+
+@textarea-padding: var(--td-textarea-padding, 32rpx);
+@textarea-text-line-height: 48rpx; // 输入框文本行高
+@textarea-label-line-height: 44rpx; // 标签文本行高
+@textarea-label-padding-bottom: @spacer;
+@textarea-indicator-text-line-height: 40rpx; // 计数器文本行高
+@textarea-indicator-text-padding-top: @spacer; // 计数器文本顶部间距
+@textarea-indicator-text-align: right; // 计数器文本对齐方式
+@textarea-border-width: 2rpx; // 文本框边框大小
+@textarea-indicator-text-font-size: @spacer-1; // 计数器文本大小
+@textarea-label-font-size: @font-size-base; // 标签文本大小
+@textarea-text-font-size: @font-size-m; // 输入框文本大小
+@textarea-placeholder-font-size: @font-size-m; // 占位符文本大小
+
+// 文本框背景颜色
+@textarea-background-color: var(--td-textarea-background-color, @bg-color-container);
+// 占位符文本颜色
+@textarea-placeholder-color: var(--td-textarea-placeholder-color, @text-color-placeholder);
+// 输入框文本颜色
+@textarea-text-color: var(--td-textarea-text-color, @text-color-primary);
+// 标签文本颜色
+@textarea-label-color: var(--td-textarea-label-color, @text-color-primary);
+// 计数器文本颜色
+@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @text-color-placeholder);
+// 文本框圆角大小
+@textarea-border-radius: var(--td-textarea-border-radius, @radius-default);
+// 文本框边框颜色
+@textarea-border-color: var(--td-textarea-border-color, @component-border);
+// 文本框禁用状态时的输入文本颜色
+@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @text-color-disabled);
+
+.@{prefix}-textarea {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: @textarea-padding;
+  background-color: @textarea-background-color;
+
+  &__label:not(:empty) {
+    font-size: @textarea-label-font-size;
+    color: @textarea-label-color;
+    flex-shrink: 0;
+    line-height: @textarea-label-line-height;
+    padding-bottom: @textarea-label-padding-bottom;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1 1 auto;
+    overflow: hidden;
+
+    &-inner {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      width: inherit;
+      min-width: 0;
+      min-height: 20px;
+      margin: 0;
+      padding: 0;
+      text-align: left;
+      background-color: transparent;
+      border: 0;
+      resize: none;
+      font-size: @textarea-text-font-size;
+      color: @textarea-text-color;
+      line-height: @textarea-text-line-height;
+    }
+  }
+
+  &__placeholder {
+    color: @textarea-placeholder-color;
+    font-size: @textarea-placeholder-font-size;
+  }
+
+  &__indicator:not(:empty) {
+    flex-shrink: 0;
+    color: @textarea-indicator-text-color;
+    font-size: @textarea-indicator-text-font-size;
+    text-align: @textarea-indicator-text-align;
+    line-height: @textarea-indicator-text-line-height;
+    padding-top: @textarea-indicator-text-padding-top;
+  }
+
+  &--border {
+    border-radius: @textarea-border-radius;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: @textarea-border-width solid @textarea-border-color;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  }
+
+  .@{prefix}-is-disabled {
+    color: @textarea-disabled-text-color;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/textarea/textarea.vue b/packages/tdesign-uniapp/components/textarea/textarea.vue
new file mode 100644
index 000000000..1f944b24e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/textarea.vue
@@ -0,0 +1,200 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + (bordered ? classPrefix + '--border' : '') + ' ' + tClass"
+  >
+    <view :class="classPrefix + '__label ' + tClassLabel">
+      <block v-if="label">
+        {{ label }}
+      </block>
+      <slot name="label" />
+    </view>
+    <view :class="classPrefix + '__wrapper'">
+      <textarea
+        :class="classPrefix + '__wrapper-inner ' + (disabled ? prefix + '-is-disabled' : '') + ' ' + tClassTextarea"
+        :style="textareaStyle(autosize)"
+        :maxlength="allowInputOverMax ? -1 : maxlength"
+        :disabled="disabled || readonly"
+        :placeholder="placeholder"
+        :placeholder-class="classPrefix + '__placeholder ' + placeholderClass"
+        :placeholder-style="placeholderStyle"
+        :value="dataValue"
+        :auto-height="!!autosize"
+        :auto-focus="autofocus"
+        :fixed="fixed"
+        :focus="focus"
+        :cursor="cursor"
+        :cursor-spacing="cursorSpacing"
+        :adjust-position="adjustPosition"
+        :confirm-type="confirmType"
+        :confirm-hold="confirmHold"
+        :disable-default-padding="disableDefaultPadding"
+        :show-confirm-bar="showConfirmBar"
+        :selection-start="selectionStart"
+        :selection-end="selectionEnd"
+        :hold-keyboard="holdKeyboard"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @confirm="onConfirm"
+        @linechange="onLineChange"
+        @keyboardheightchange="onKeyboardHeightChange"
+      />
+      <view
+        v-if="indicator && (maxcharacter > 0 || maxlength > 0)"
+        :class="classPrefix + '__indicator ' + tClassIndicator"
+      >
+        {{ count }} / {{ maxcharacter || maxlength }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, coalesce, nextTick } from '../common/utils';
+import _ from '../common/utils.wxs';
+import { textareaStyle } from './computed.js';
+// import { getInnerMaxLen } from '../input/utils';
+
+
+const name = `${prefix}-textarea`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-textarea`,
+    `${prefix}-class-label`,
+    `${prefix}-class-indicator`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      count: 0,
+      _,
+
+      dataValue: coalesce(this.value, this.defaultValue, ''),
+    };
+  },
+  watch: {
+    value(val) {
+      this.updateValue(val);
+    },
+  },
+  mounted() {
+    const { value, defaultValue } = this;
+    this.updateValue(coalesce(value, defaultValue, ''));
+  },
+  methods: {
+    textareaStyle,
+    updateCount(val) {
+      const { maxcharacter, maxlength } = this;
+      const { count } = this.calculateValue(val, maxcharacter, maxlength);
+      this.count = count;
+    },
+
+    updateValue(val) {
+      const { maxcharacter, maxlength } = this;
+      const { value, count } = this.calculateValue(val, maxcharacter, maxlength);
+
+      this.dataValue = val;
+
+
+      nextTick().then(() => {
+        this.dataValue = value;
+        this.count = count;
+      });
+      // this.updateInnerMaxLen();
+    },
+
+    calculateValue(value, maxcharacter, maxlength) {
+      const { allowInputOverMax } = this;
+      if (maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+        const { length, characters } = getCharacterLength(
+          'maxcharacter',
+          value,
+          allowInputOverMax ? Infinity : maxcharacter,
+        );
+        return {
+          value: characters,
+          count: length,
+        };
+      }
+      if (maxlength > 0 && !Number.isNaN(maxlength)) {
+        const { length, characters } = getCharacterLength('maxlength', value, allowInputOverMax ? Infinity : maxlength);
+        return {
+          value: characters,
+          count: length,
+        };
+      }
+      return {
+        value,
+        count: value ? String(value).length : 0,
+      };
+    },
+
+    onInput(event) {
+      const { value, cursor } = event.detail;
+      this.updateValue(value);
+      this.$emit('change', { value: this.dataValue, cursor });
+    },
+    onFocus(event) {
+      this.$emit('focus', {
+        ...event.detail,
+      });
+    },
+    onBlur(event) {
+      this.$emit('blur', {
+        ...event.detail,
+      });
+    },
+    onConfirm(event) {
+      this.$emit('enter', {
+        ...event.detail,
+      });
+    },
+    onLineChange(event) {
+      this.$emit('line-change', {
+        ...event.detail,
+      });
+    },
+    onKeyboardHeightChange(e) {
+      this.$emit('keyboardheightchange', e.detail);
+    },
+
+    // updateInnerMaxLen() {
+    //   this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+  },
+});
+</script>
+<style scoped>
+@import './textarea.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/textarea/type.ts b/packages/tdesign-uniapp/components/textarea/type.ts
new file mode 100644
index 000000000..91fa69a68
--- /dev/null
+++ b/packages/tdesign-uniapp/components/textarea/type.ts
@@ -0,0 +1,167 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdTextareaProps {
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: boolean;
+  /**
+   * 超出 `maxlength` 或 `maxcharacter` 之后是否还允许输入
+   * @default false
+   */
+  allowInputOverMax?: boolean;
+  /**
+   * 自动聚焦，拉起键盘
+   * @default false
+   */
+  autofocus?: boolean;
+  /**
+   * 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 }
+   * @default false
+   */
+  autosize?: boolean | { maxHeight?: number; minHeight?: number };
+  /**
+   * 是否显示外边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起点
+   * @default false
+   */
+  confirmHold?: boolean;
+  /**
+   * 设置键盘右下角按钮的文字，仅在 type='text'时生效
+   * @default return
+   */
+  confirmType?: 'return' | 'send' | 'search' | 'next' | 'go' | 'done';
+  /**
+   * 指定 focus 时的光标位置
+   * @default -1
+   */
+  cursor?: number;
+  /**
+   * 【试验性】光标颜色，仅在 Skyline 下有效
+   * @default #0052d9
+   */
+  cursorColor?: string;
+  /**
+   * 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
+   * @default 0
+   */
+  cursorSpacing?: number;
+  /**
+   * 是否去掉 iOS 下的默认内边距
+   * @default false
+   */
+  disableDefaultPadding?: boolean;
+  /**
+   * 是否禁用文本框
+   */
+  disabled?: boolean;
+  /**
+   * 如果 textarea 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * 自动聚焦
+   * @default false
+   */
+  focus?: boolean;
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: boolean;
+  /**
+   * 显示文本计数器，如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时， indicator无效
+   * @default false
+   */
+  indicator?: boolean;
+  /**
+   * 左侧文本
+   */
+  label?: string;
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度
+   */
+  maxcharacter?: number;
+  /**
+   * 用户最多可以输入的字符个数，值为 -1 的时候不限制最大长度
+   * @default -1
+   */
+  maxlength?: number;
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+  /**
+   * 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight
+   * @default textarea-placeholder
+   */
+  placeholderClass?: string;
+  /**
+   * 指定 placeholder 的样式，目前仅支持 color ,font-size和font-weight
+   * @default ''
+   */
+  placeholderStyle?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
+   * @default -1
+   */
+  selectionEnd?: number;
+  /**
+   * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
+   * @default -1
+   */
+  selectionStart?: number;
+  /**
+   * 是否显示键盘上方带有”完成“按钮那一栏
+   * @default true
+   */
+  showConfirmBar?: boolean;
+  /**
+   * 文本框值
+   */
+  value?: TextareaValue;
+  /**
+   * 文本框值，非受控属性
+   */
+  defaultValue?: TextareaValue;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (context: { value: TextareaValue; cursor: number }) => void;
+  /**
+   * 输入内容变化时触发
+   */
+  onChange?: (context: { value: TextareaValue; cursor: number }) => void;
+  /**
+   * 点击完成时触发
+   */
+  onEnter?: (context: { value: TextareaValue }) => void;
+  /**
+   * 获得焦点时触发
+   */
+  onFocus?: (context: { value: TextareaValue }) => void;
+  /**
+   * 键盘高度发生变化的时候触发此事件
+   */
+  onKeyboardheightchange?: (context: { height: number; duration: number }) => void;
+  /**
+   * 行高发生变化时触发
+   */
+  onLineChange?: (context: { value: TextareaValue }) => void;
+}
+
+export type TextareaValue = string | number;
diff --git a/packages/tdesign-uniapp/components/toast/README.en-US.md b/packages/tdesign-uniapp/components/toast/README.en-US.md
new file mode 100644
index 000000000..e3ff5f3c6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/README.en-US.md
@@ -0,0 +1,51 @@
+:: BASE_DOC ::
+
+## API
+
+### Toast Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+direction | String | row | options: row/column | N
+duration | Number | 2000 | \- | N
+icon | String / Object | - | \- | N
+message | String | - | \- | N
+overlay-props | Object | - | Typescript：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/toast/type.ts) | N
+placement | String | middle | options:  top/middle/bottom | N
+prevent-scroll-through | Boolean | false | \- | N
+show-overlay | Boolean | false | \- | N
+theme | String | - | options: loading/success/warning/error | N
+using-custom-navbar | Boolean | false | \- | N
+
+### Toast Events
+
+name | params | description
+-- | -- | --
+close | \- | \-
+destroy | \- | \-
+
+### Toast Slots
+
+name | Description
+-- | --
+icon | \-
+message | \-
+
+### Toast External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-toast-bg-color | @mask-active | - 
+--td-toast-color | @text-color-anti | - 
+--td-toast-column-icon-size | 64rpx | - 
+--td-toast-max-width | 374rpx | - 
+--td-toast-radius | 8rpx | - 
+--td-toast-row-icon-size | 48rpx | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/toast/README.md b/packages/tdesign-uniapp/components/toast/README.md
new file mode 100644
index 000000000..6fc65cd23
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/README.md
@@ -0,0 +1,78 @@
+---
+title: Toast 轻提示
+description: 用于轻量级反馈或提示，不会打断用户操作。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TToast from 'tdesign-uniapp/toast/toast.vue';
+```
+
+### 基础提示
+
+{{ base }}
+
+### 组件状态
+
+{{ theme }}
+
+### 显示遮罩
+{{ cover }}
+
+### 手动关闭
+{{ close }}
+## API
+
+### Toast Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+direction | String | row | 图标排列方式。可选项：row/column | N
+duration | Number | 2000 | 弹窗显示毫秒数 | N
+icon | String / Object | - | 自定义图标。传入对象则透传至 Icon 组件 | N
+message | String | - | 弹窗显示文字 | N
+overlay-props | Object | - | 遮罩层属性，透传至 Overlay。TS 类型：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/toast/type.ts) | N
+placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N
+prevent-scroll-through | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N
+show-overlay | Boolean | false | 是否显示遮罩层 | N
+theme | String | - | 提示类型。可选项：loading/success/warning/error | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+
+### Toast Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 轻提示隐藏的时候触发
+destroy | \- | 轻提示销毁的时候触发
+
+### Toast Slots
+
+名称 | 描述
+-- | --
+icon | 自定义图标
+message | 弹窗显示文字
+
+### Toast External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-toast-bg-color | @mask-active | - |
+| --td-toast-color | @text-color-anti | - |
+| --td-toast-column-icon-size | 64rpx | - |
+| --td-toast-max-width | 374rpx | - |
+| --td-toast-radius | 8rpx | - |
+| --td-toast-row-icon-size | 48rpx | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/toast/_example/base/index.vue b/packages/tdesign-uniapp/components/toast/_example/base/index.vue
new file mode 100644
index 000000000..16404efe1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/base/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <view>
+    <t-toast
+      id="t-toast"
+      ref="t-toast"
+    />
+    <view class="box">
+      <t-button
+        size="large"
+        variant="outline"
+        theme="primary"
+        block
+        @click="showText"
+      >
+        纯文本
+      </t-button>
+      <t-button
+        size="large"
+        variant="outline"
+        theme="primary"
+        block
+        @click="showMultiText"
+      >
+        多行文字
+      </t-button>
+      <t-button
+        size="large"
+        variant="outline"
+        theme="primary"
+        block
+        @click="showHorizontalText"
+      >
+        带横向图标
+      </t-button>
+      <t-button
+        size="large"
+        variant="outline"
+        theme="primary"
+        block
+        @click="showVerticalText"
+      >
+        带竖向图标
+      </t-button>
+      <t-button
+        v-if="!skylineRender"
+        size="large"
+        variant="outline"
+        theme="primary"
+        block
+        @click="showLoading"
+      >
+        加载状态
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import SkylineBehavior from 'tdesign-uniapp/mixins/skyline.js';
+import { default as Toast } from 'tdesign-uniapp/toast/index';
+export default {
+  components: {
+    tToast,
+    tButton,
+  },
+  mixins: [SkylineBehavior],
+  data() {
+    return {
+    };
+  },
+  created() {},
+  methods: {
+    showText() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '轻提示文字内容',
+      });
+    },
+    showMultiText() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '最多一行展示十个汉字宽度限制最多不超过三行文字',
+      });
+    },
+    showHorizontalText() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '带横向图标',
+        icon: 'check-circle',
+      });
+    },
+    showVerticalText() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '带竖向图标',
+        icon: 'check-circle',
+        direction: 'column',
+      });
+    },
+    showLoading() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '加载中...',
+        theme: 'loading',
+        direction: 'column',
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/_example/close/index.vue b/packages/tdesign-uniapp/components/toast/_example/close/index.vue
new file mode 100644
index 000000000..b6b21bb33
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/close/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <view>
+    <t-toast
+      id="t-toast"
+      ref="t-toast"
+    />
+
+    <view class="box">
+      <view class="toast-example">
+        <t-button
+          theme="primary"
+          size="large"
+          variant="outline"
+          :style="buttonStyle"
+          @click="handleShow"
+        >
+          显示提示
+        </t-button>
+        <t-button
+          theme="primary"
+          size="large"
+          variant="outline"
+          :style="buttonStyle"
+          @click="handleHide"
+        >
+          关闭提示
+        </t-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast, { hideToast } from 'tdesign-uniapp/toast/index';
+import tButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    tToast,
+    tButton,
+  },
+  data() {
+    return {
+      // 兼容 抖音小程序、QQ 小程序等
+      buttonStyle: 'margin-left: auto;margin-right: auto;',
+    };
+  },
+  created() {},
+  methods: {
+    handleShow() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        duration: -1,
+        message: '轻提示文字内容',
+      });
+    },
+    handleHide() {
+      hideToast({
+        context: this,
+        selector: '#t-toast',
+      });
+    },
+  },
+};
+</script>
+<style>
+.toast-example {
+    text-align: center;
+    display: flex;
+}
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/_example/cover/index.vue b/packages/tdesign-uniapp/components/toast/_example/cover/index.vue
new file mode 100644
index 000000000..161c6b209
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/cover/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <t-toast
+      id="t-toast"
+      ref="t-toast"
+    />
+
+    <view class="box">
+      <t-button
+        theme="primary"
+        size="large"
+        variant="outline"
+        block
+        @click="handleToast"
+      >
+        禁止滑动和点击
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import Toast from 'tdesign-uniapp/toast/index';
+import tButton from 'tdesign-uniapp/button/button.vue';
+
+
+export default {
+  components: {
+    tToast,
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    handleToast() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '禁止滑动和点击',
+        direction: 'column',
+        duration: 3000,
+        preventScrollThrough: true,
+        icon: 'poweroff',
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/_example/skyline/toast.less b/packages/tdesign-uniapp/components/toast/_example/skyline/toast.less
new file mode 100644
index 000000000..010269d8a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/skyline/toast.less
@@ -0,0 +1,15 @@
+.demo {
+    :deep(.t-button) {
+        margin-bottom: 32rpx;
+    }
+
+    .box {
+        display: block;
+        box-sizing: border-box;
+        padding: 0 32rpx;
+    }
+}
+
+page {
+    background-color: var(--td-bg-color-container);
+}
diff --git a/packages/tdesign-uniapp/components/toast/_example/skyline/toast.vue b/packages/tdesign-uniapp/components/toast/_example/skyline/toast.vue
new file mode 100644
index 000000000..c214fa4a7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/skyline/toast.vue
@@ -0,0 +1,74 @@
+<template>
+  <view class="skyline">
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="block demo-navbar"
+      title="Toast"
+      left-arrow
+    />
+    <!-- #endif -->
+    <scroll-view
+      scroll-y
+      type="list"
+      class="scroll-view"
+    >
+      <view class="demo">
+        <view class="demo-title">
+          Toast 轻提示
+        </view>
+        <view class="demo-desc">
+          用于轻量级反馈或提示，不会打断用户操作。
+        </view>
+        <t-demo
+          title="01 组件类型"
+          desc="基础提示"
+        >
+          <baseDemo />
+        </t-demo>
+        <t-demo
+          title="02 组件状态"
+          desc="内置主题"
+        >
+          <theme />
+        </t-demo>
+        <t-demo
+          title="03 显示遮罩"
+          desc="弹窗可显示遮罩，禁止滑动和点击"
+        >
+          <cover />
+        </t-demo>
+        <t-demo
+          title="04 手动关闭"
+          desc="手动关闭轻提示"
+        >
+          <close />
+        </t-demo>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import baseDemo from '../base/index.vue';
+import theme from '../theme/index.vue';
+import cover from '../cover/index.vue';
+import close from '../close/index.vue';
+export default {
+  components: {
+    tNavbar,
+    baseDemo,
+    theme,
+    cover,
+    close,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './toast.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/_example/theme/index.vue b/packages/tdesign-uniapp/components/toast/_example/theme/index.vue
new file mode 100644
index 000000000..bc160ff6b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/theme/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <view>
+    <t-toast
+      id="t-toast"
+      ref="t-toast"
+    />
+
+    <view class="box">
+      <t-button
+        theme="primary"
+        size="large"
+        variant="outline"
+        block
+        @click="showSuccessToast"
+      >
+        成功提示
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        variant="outline"
+        block
+        @click="showWarningToast"
+      >
+        警告提示
+      </t-button>
+      <t-button
+        theme="primary"
+        size="large"
+        variant="outline"
+        block
+        @click="showErrorToast"
+      >
+        错误提示
+      </t-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import tToast from 'tdesign-uniapp/toast/toast.vue';
+import tButton from 'tdesign-uniapp/button/button.vue';
+import Toast from 'tdesign-uniapp/toast/index';
+export default {
+  components: {
+    tToast,
+    tButton,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    showSuccessToast() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '成功文案',
+        theme: 'success',
+        direction: 'column',
+      });
+    },
+    showWarningToast() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '警告文案',
+        theme: 'warning',
+        direction: 'column',
+      });
+    },
+    showErrorToast() {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '错误文案',
+        theme: 'error',
+        direction: 'column',
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/_example/toast.less b/packages/tdesign-uniapp/components/toast/_example/toast.less
new file mode 100644
index 000000000..daab87223
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/toast.less
@@ -0,0 +1,9 @@
+page {
+    background-color: var(--td-bg-color-container);
+}
+
+.demo {
+    :deep(.t-button) {
+        margin-bottom: 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/toast/_example/toast.vue b/packages/tdesign-uniapp/components/toast/_example/toast.vue
new file mode 100644
index 000000000..e3a7e228c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/_example/toast.vue
@@ -0,0 +1,72 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      class="demo-navbar"
+      title="Toast"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Toast 轻提示"
+        desc="用于轻量级反馈或提示，不会打断用户操作。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础提示"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="内置主题"
+        padding
+      >
+        <theme />
+      </t-demo>
+      <t-demo
+        title="03 显示遮罩"
+        desc="弹窗可显示遮罩，禁止滑动和点击"
+        padding
+      >
+        <cover />
+      </t-demo>
+      <t-demo
+        title="04 手动关闭"
+        desc="手动关闭轻提示"
+        padding
+      >
+        <close />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import theme from './theme/index.vue';
+import cover from './cover/index.vue';
+import close from './close/index.vue';
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    BaseDemo,
+    theme,
+    cover,
+    close,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './toast.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/index.ts b/packages/tdesign-uniapp/components/toast/index.ts
new file mode 100644
index 000000000..7fc4f87be
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/index.ts
@@ -0,0 +1,45 @@
+import { getInstance, coalesce } from '../common/utils';
+
+type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+
+type ToastType = 'loading' | 'success' | 'warning' | 'error';
+type ToastPositionType = 'top' | 'middle' | 'bottom';
+type ToastDirectionType = 'row' | 'column';
+
+export type ToastOptionsType = {
+  context?: Context;
+  selector?: string;
+  icon?: string;
+  message?: string;
+  duration?: number;
+  theme?: ToastType;
+  placement?: ToastPositionType;
+  preventScrollThrough?: boolean;
+  direction?: ToastDirectionType;
+  close?: () => void;
+};
+
+function Toast(options: ToastOptionsType) {
+  const { context, selector = '#t-toast', ...Options } = options;
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.show({
+      ...Options,
+      duration: coalesce(Options.duration, 2000),
+    });
+  }
+}
+
+function showToast(options: ToastOptionsType = {}) {
+  Toast(options);
+}
+
+function hideToast(options: ToastOptionsType = {}) {
+  const { context, selector = '#t-toast' } = options;
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.hide();
+  }
+}
+
+export { Toast as default, showToast, hideToast };
diff --git a/packages/tdesign-uniapp/components/toast/props.ts b/packages/tdesign-uniapp/components/toast/props.ts
new file mode 100644
index 000000000..393e13ab5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/props.ts
@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdToastProps } from './type';
+export default {
+  /** 图标排列方式 */
+  direction: {
+    type: String,
+    default: 'row' as TdToastProps['direction'],
+    validator(val: TdToastProps['direction']): boolean {
+      if (!val) return true;
+      return ['row', 'column'].includes(val);
+    },
+  },
+  /** 弹窗显示毫秒数 */
+  duration: {
+    type: Number,
+    default: 2000,
+  },
+  /** 自定义图标。传入对象则透传至 Icon 组件 */
+  icon: {
+    type: [String, Object],
+  },
+  /** 弹窗显示文字 */
+  message: {
+    type: String,
+  },
+  /** 遮罩层属性，透传至 Overlay */
+  overlayProps: {
+    type: Object,
+  },
+  /** 弹窗展示位置 */
+  placement: {
+    type: String,
+    default: 'middle' as TdToastProps['placement'],
+    validator(val: TdToastProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: Boolean,
+  /** 是否显示遮罩层 */
+  showOverlay: Boolean,
+  /** 提示类型 */
+  theme: {
+    type: String,
+    validator(val: TdToastProps['theme']): boolean {
+      if (!val) return true;
+      return ['loading', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 轻提示隐藏的时候触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 轻提示销毁的时候触发 */
+  onDestroy: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/toast/toast.less b/packages/tdesign-uniapp/components/toast/toast.less
new file mode 100644
index 000000000..0e96130fc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/toast.less
@@ -0,0 +1,95 @@
+@import '../common/style/base.less';
+
+@toast-color: var(--td-toast-color, @text-color-anti);
+@toast-bg-color: var(--td-toast-bg-color, @mask-active);
+@toast-max-width: var(--td-toast-max-width, 374rpx);
+@toast-radius: var(--td-toast-radius, 8rpx);
+@toast-row-icon-size: var(--td-toast-row-icon-size, 48rpx);
+@toast-column-icon-size: var(--td-toast-column-icon-size, 64rpx);
+
+.@{prefix}-toast {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 12001;
+  opacity: 1;
+  transition: opacity 300ms ease;
+  background-color: @toast-bg-color;
+  border-radius: @toast-radius;
+  font-size: 28rpx;
+  color: @toast-color;
+  max-width: @toast-max-width;
+  min-height: 0; // 防止 flex 容器被意外拉伸
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+
+  &--column {
+    padding: 48rpx;
+    min-width: 160rpx;
+    min-height: 160rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--loading&--with-text {
+    min-width: 204rpx;
+    min-height: 204rpx;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &__content {
+    align-items: center;
+    line-height: 44rpx;
+
+    &--row {
+      display: flex;
+      text-align: left;
+      padding: 28rpx 44rpx;
+    }
+
+    &--column {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  :deep(&__icon) {
+    &--row {
+      display: flex;
+      font-size: @toast-row-icon-size;
+    }
+    &--column {
+      font-size: @toast-column-icon-size;
+    }
+  }
+
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: pre-line;
+
+    &--column:not(:empty):not(:only-child) {
+      margin-top: 16rpx;
+    }
+
+    &--row:not(:empty):not(:only-child) {
+      margin-left: 16rpx;
+    }
+  }
+
+  &.@{prefix}-fade-enter,
+  &.@{prefix}-fade-leave-to {
+    opacity: 0;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/toast/toast.vue b/packages/tdesign-uniapp/components/toast/toast.vue
new file mode 100644
index 000000000..bf570e4d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/toast.vue
@@ -0,0 +1,212 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible"
+      :class="_.cls(classPrefix, [dataDirection, dataTheme, ['with-text', dataMessage]]) + ' ' + tClass + ' ' + transitionClass"
+      :style="_._style(['top:' + (dataPlacement === 'top' ? '25%' : dataPlacement === 'bottom' ? '75%' : '45%'), customStyle])"
+      @transitionend="onTransitionEnd"
+      @touchstart.stop.prevent="loop"
+    >
+      <view :class="classPrefix + '__content ' + classPrefix + '__content--' + dataDirection">
+        <t-loading
+          v-if="isLoading"
+          theme="circular"
+          :size="dataDirection === 'row' ? '48rpx' : '64rpx'"
+          loading
+          inherit-color
+          layout="vertical"
+        />
+        <block
+          v-else-if="_icon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_icon.style || ''"
+            :t-class="iconTClass"
+            :class="iconClass"
+            :prefix="_icon.prefix"
+            :name="_icon.name"
+            :size="_icon.size"
+            :color="_icon.color"
+            :aria-hidden="true"
+            :aria-label="_icon.ariaLabel"
+            :aria-role="_icon.ariaRole"
+          />
+        </block>
+        <slot name="icon" />
+        <view
+          aria-role="alert"
+          :class="classPrefix + '__text ' + classPrefix + '__text--' + dataDirection"
+        >
+          {{ dataMessage }}
+        </view>
+        <slot name="message" />
+      </view>
+    </view>
+    <t-overlay
+      :custom-style="(overlayProps && overlayProps.style) || ''"
+      :visible="realVisible && (showOverlay || dataPreventScrollThrough)"
+      :z-index="(overlayProps && overlayProps.zIndex) || 11000"
+      :duration="(overlayProps && overlayProps.duration) || 300"
+      :using-custom-navbar="(overlayProps && overlayProps.usingCustomNavbar) || usingCustomNavbar"
+      :custom-navbar-height="(overlayProps && overlayProps.customNavbarHeight) || customNavbarHeight"
+      :background-color="dataPreventScrollThrough ? 'transparent' : (overlayProps && overlayProps.backgroundColor) || ''"
+      :prevent-scroll-through="dataPreventScrollThrough || (overlayProps && overlayProps.preventScrollThrough)"
+    />
+  </view>
+</template>
+<script>
+import tIcon from '../icon/icon';
+import tLoading from '../loading/loading';
+import tOverlay from '../overlay/overlay';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { transitionMixins } from '../mixins/transition';
+import { calcIcon, toCamel, coalesce } from '../common/utils';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import _ from '../common/utils.wxs';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-toast`;
+const needTransformKeys = [
+  'direction',
+  'duration',
+  'icon',
+  'message',
+  'placement',
+  'preventScrollThrough',
+  'theme',
+];
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [transitionMixins, useCustomNavbar],
+  components: {
+    tIcon,
+    tLoading,
+    tOverlay,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'leaved',
+    'destory',
+    'close',
+  ],
+  data() {
+    const info = needTransformKeys.reduce((acc, key) => ({
+      ...acc,
+      [toCamel(`data-${key}`)]: props[key].default,
+    }), {});
+
+    return {
+      prefix,
+      classPrefix: name,
+      _icon: null,
+      ...info,
+
+      isLoading: false,
+      hideTimer: null,
+      _,
+    };
+  },
+
+  computed: {
+    iconTClass() {
+      return canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconClass() {
+      return !canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconRealClass() {
+      const { classPrefix, dataDirection } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${dataDirection}`;
+    },
+  },
+
+  pageLifetimes: {
+    hide() {
+      this.hide();
+    },
+  },
+
+  beforeUnMount() {
+    this.destroyed();
+  },
+  methods: {
+    show(options) {
+      if (this.hideTimer) clearTimeout(this.hideTimer);
+      const iconMap = {
+        loading: 'loading',
+        success: 'check-circle',
+        warning: 'error-circle',
+        error: 'close-circle',
+      };
+      const typeMapIcon = iconMap[options?.theme];
+      const defaultOptions = {
+        direction: props.direction.default,
+        duration: props.duration.default,
+        icon: props.icon.default,
+        message: props.message.default,
+        placement: props.placement.default,
+        preventScrollThrough: props.preventScrollThrough.default,
+        theme: props.theme.default,
+      };
+
+      const data = {
+        ...defaultOptions,
+        ...options,
+        realVisible: true,
+        isLoading: options?.theme === 'loading',
+        _icon: calcIcon(coalesce(typeMapIcon, options.icon)),
+      };
+
+      const { duration } = data;
+
+      Object.keys(data).forEach((key) => {
+        if (needTransformKeys.includes(key)) {
+          this[toCamel(`data-${key}`)] = data[key];
+        } else {
+          this[key] = data[key];
+        }
+      });
+
+      if (duration > 0) {
+        this.hideTimer = setTimeout(() => {
+          this.hide();
+        }, duration);
+      }
+    },
+
+    hide() {
+      if (!this.realVisible) return; // 避免重复触发（页面关闭、定时关闭都会触发）
+      this.realVisible = false;
+      this?.close?.();
+      this.$emit('close');
+    },
+
+    destroyed() {
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+      this.$emit('destory');
+    },
+
+    loop() {},
+  },
+});
+
+</script>
+<style scoped>
+@import './toast.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/toast/type.ts b/packages/tdesign-uniapp/components/toast/type.ts
new file mode 100644
index 000000000..d89fc8c37
--- /dev/null
+++ b/packages/tdesign-uniapp/components/toast/type.ts
@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdToastProps {
+  /**
+   * 图标排列方式
+   * @default row
+   */
+  direction?: 'row' | 'column';
+  /**
+   * 弹窗显示毫秒数
+   * @default 2000
+   */
+  duration?: number;
+  /**
+   * 自定义图标。传入对象则透传至 Icon 组件
+   */
+  icon?: string | object;
+  /**
+   * 弹窗显示文字
+   */
+  message?: string;
+  /**
+   * 遮罩层属性，透传至 Overlay
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 弹窗展示位置
+   * @default middle
+   */
+  placement?: 'top' | 'middle' | 'bottom';
+  /**
+   * 防止滚动穿透，即不允许点击和滚动
+   * @default false
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default false
+   */
+  showOverlay?: boolean;
+  /**
+   * 提示类型
+   */
+  theme?: 'loading' | 'success' | 'warning' | 'error';
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 轻提示隐藏的时候触发
+   */
+  onClose?: () => void;
+  /**
+   * 轻提示销毁的时候触发
+   */
+  onDestroy?: () => void;
+}
diff --git a/packages/tdesign-uniapp/components/transition/README.en-US.md b/packages/tdesign-uniapp/components/transition/README.en-US.md
new file mode 100644
index 000000000..ef1645d9f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/README.en-US.md
@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+
+### Transition Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+appear | Boolean | false | \- | N
+destoryOnHide | Boolean | false | \- | N
+durations | Number / Array | - | Typescript：`number \| number[]` | N
+name | String | t-transition | \- | N
+visible | Boolean | false | \- | N
diff --git a/packages/tdesign-uniapp/components/transition/README.md b/packages/tdesign-uniapp/components/transition/README.md
new file mode 100644
index 000000000..3d80eebc6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/README.md
@@ -0,0 +1,45 @@
+---
+title: Transition 过渡
+description: 过渡组件。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+### 引入组件
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```json
+"usingComponents": {
+  "t-transition": "tdesign-miniprogram/transition/transition"
+}
+```
+
+## 用法
+
+### 组件方式
+
+```xml
+<!-- page.wxml -->
+<t-transition
+  name="transition-class"
+  visible="{{ visible }}"
+>
+  <view class="block" style="width: 100px; height: 100px; background: red;"></view>
+</t-transition>
+```
+
+## API
+
+### Transition Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+appear | Boolean | false | 首次出现是否展示动画 | N
+destoryOnHide | Boolean | false | 隐藏时是否销毁内容 | N
+durations | Number / Array | - | 指定过渡时间。TS 类型：`number \| number[]` | N
+name | String | t-transition | 过渡类名 | N
+visible | Boolean | false | 是否显示 | N
diff --git a/packages/tdesign-uniapp/components/transition/_example/api.md b/packages/tdesign-uniapp/components/transition/_example/api.md
new file mode 100644
index 000000000..0eaec7625
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/api.md
@@ -0,0 +1,10 @@
+
+### Transition Props
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+appear | Boolean | false | 首次出现是否展示动画 | N
+customClass | String | '' | 自定义容器类名 | N
+destoryOnClose | Boolean | false | 隐藏时是否销毁内容 | N
+duration | Number | - | 指定过渡时间 | N
+name | String | 't-transition' | 过渡类名 | N
+visible | Boolean | false | 是否显示 | N
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/transition/_example/appear/index.vue b/packages/tdesign-uniapp/components/transition/_example/appear/index.vue
new file mode 100644
index 000000000..0348f633c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/appear/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="onTriggerClick"
+    >
+      Toggle attach
+    </t-button>
+
+    <view v-if="visible">
+      <t-transition
+        visible
+        appear
+      >
+        <view class="block" />
+      </t-transition>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tTransition from 'tdesign-uniapp/transition/transition.vue';
+export default {
+  components: {
+    tButton,
+    tTransition,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onTriggerClick() {
+      this.visible = !this.visible;
+    },
+    onClose() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/transition/_example/base/index.vue b/packages/tdesign-uniapp/components/transition/_example/base/index.vue
new file mode 100644
index 000000000..27996c4d7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/base/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="onTriggerClick"
+    >
+      Toggle
+    </t-button>
+
+    <t-transition
+      :visible="visible"
+      :style="style"
+      :custom-style="customStyle"
+    >
+      <view class="block" />
+    </t-transition>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tTransition from 'tdesign-uniapp/transition/transition.vue';
+export default {
+  components: {
+    tButton,
+    tTransition,
+  },
+  data() {
+    return {
+      visible: false,
+      style: 'display:none',
+      customStyle: 'font-size: 9px',
+    };
+  },
+  created() {},
+  methods: {
+    onTriggerClick() {
+      this.visible = !this.visible;
+    },
+    onClose() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/transition/_example/custom/index.less b/packages/tdesign-uniapp/components/transition/_example/custom/index.less
new file mode 100644
index 000000000..66e126887
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/custom/index.less
@@ -0,0 +1,21 @@
+.translate-enter {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+.translate-enter-to {
+    opacity: 1;
+    transform: translateX(0%);
+    transition: all 1s;
+}
+
+.translate-leave {
+    opacity: 1;
+    transform: translateX(0%);
+}
+
+.translate-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
+    transition: all 1s;
+}
diff --git a/packages/tdesign-uniapp/components/transition/_example/custom/index.vue b/packages/tdesign-uniapp/components/transition/_example/custom/index.vue
new file mode 100644
index 000000000..92dc9cadc
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/custom/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="onTriggerClick"
+    >
+      Toggle
+    </t-button>
+
+    <t-transition
+      name="translate"
+      :visible="visible"
+    >
+      <view class="block" />
+    </t-transition>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tTransition from 'tdesign-uniapp/transition/transition.vue';
+export default {
+  components: {
+    tButton,
+    tTransition,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onTriggerClick() {
+      this.visible = !this.visible;
+    },
+    onClose() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './index.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/transition/_example/destroy/index.vue b/packages/tdesign-uniapp/components/transition/_example/destroy/index.vue
new file mode 100644
index 000000000..9554ce474
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/destroy/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <t-button
+      size="large"
+      variant="outline"
+      block
+      theme="primary"
+      @click="onTriggerClick"
+    >
+      Toggle attach
+    </t-button>
+
+    <t-transition
+      :visible="visible"
+      destroy-on-hide
+    >
+      <view class="block" />
+    </t-transition>
+  </view>
+</template>
+
+<script lang="ts">
+
+import tButton from 'tdesign-uniapp/button/button.vue';
+import tTransition from 'tdesign-uniapp/transition/transition.vue';
+export default {
+  components: {
+    tButton,
+    tTransition,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  created() {},
+  methods: {
+    onTriggerClick() {
+      this.visible = !this.visible;
+    },
+    onClose() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/transition/_example/transition.less b/packages/tdesign-uniapp/components/transition/_example/transition.less
new file mode 100644
index 000000000..0c441bee0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/transition.less
@@ -0,0 +1,28 @@
+.block {
+    margin-top: 10px;
+    width: 100px;
+    height: 100px;
+    background: #0052d9;
+}
+
+.translate-enter {
+    opacity: 0;
+    transform: translateX(40px);
+}
+
+.translate-enter-to {
+    opacity: 1;
+    transform: translateY(0%);
+    transition: all 1s;
+}
+
+.translate-leave {
+    opacity: 1;
+    transform: translateY(0%);
+}
+
+.translate-leave-to {
+    opacity: 0;
+    transform: translateX(40px);
+    transition: all 1s;
+}
diff --git a/packages/tdesign-uniapp/components/transition/_example/transition.vue b/packages/tdesign-uniapp/components/transition/_example/transition.vue
new file mode 100644
index 000000000..5c8eb32f1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/_example/transition.vue
@@ -0,0 +1,72 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Transition"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <view class="demo-title">
+        Transition 过渡
+      </view>
+      <view class="demo-desc">
+        过渡。
+      </view>
+      <t-demo
+        title="01 组件类型"
+        desc="基础示例"
+        padding
+      >
+        <BaseDemo />
+      </t-demo>
+      <t-demo
+        desc="自定义动画"
+        padding
+      >
+        <custom />
+      </t-demo>
+      <t-demo
+        desc="首次出现动画"
+        padding
+      >
+        <appear />
+      </t-demo>
+      <t-demo
+        desc="隐藏不渲染"
+        padding
+      >
+        <destroy />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import BaseDemo from './base/index.vue';
+import custom from './custom/index.vue';
+import destroy from './destroy/index.vue';
+import appear from './appear/index.vue';
+export default {
+  components: {
+    BaseDemo,
+    custom,
+    destroy,
+    appear,
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    onTriggerClick() {
+      this.visible = !this.visible;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import './transition.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/transition/props.js b/packages/tdesign-uniapp/components/transition/props.js
new file mode 100644
index 000000000..6d435b519
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/props.js
@@ -0,0 +1,22 @@
+const props = {
+  appear: {
+    type: Boolean,
+    default: false,
+  },
+  destoryOnHide: {
+    type: Boolean,
+    default: false,
+  },
+  durations: {
+    type: null,
+  },
+  name: {
+    type: String,
+    default: 't-transition',
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+};
+export default props;
diff --git a/packages/tdesign-uniapp/components/transition/transition.less b/packages/tdesign-uniapp/components/transition/transition.less
new file mode 100644
index 000000000..08cb0df52
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/transition.less
@@ -0,0 +1,18 @@
+// @import (css) '../common/index.wxss';
+.t-transition-enter {
+  opacity: 0;
+}
+
+.t-transition-enter-to {
+  opacity: 1;
+  transition: opacity 1s;
+}
+
+.t-transition-leave {
+  opacity: 1;
+}
+
+.t-transition-leave-to {
+  opacity: 0;
+  transition: opacity 1s;
+}
diff --git a/packages/tdesign-uniapp/components/transition/transition.vue b/packages/tdesign-uniapp/components/transition/transition.vue
new file mode 100644
index 000000000..9c673df21
--- /dev/null
+++ b/packages/tdesign-uniapp/components/transition/transition.vue
@@ -0,0 +1,51 @@
+<template>
+  <view
+    :class="tClass + ' ' + classPrefix + ' ' + transitionClass"
+    :style="_._style([visible ? '' : 'display: none', customStyle])"
+    @transitionend="onTransitionEnd"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import transition from '../mixins/transition';
+import { prefix } from '../common/config';
+import _ from '../common/utils.wxs';
+
+
+const name = `${prefix}-transition`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [transition()],
+  props: {
+  },
+  data() {
+    return {
+      classPrefix: name,
+      _,
+    };
+  },
+  watch: {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+
+</script>
+<style scoped>
+@import './transition.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/README.en-US.md b/packages/tdesign-uniapp/components/tree-select/README.en-US.md
new file mode 100644
index 000000000..97eabec7b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/README.en-US.md
@@ -0,0 +1,48 @@
+:: BASE_DOC ::
+
+## API
+
+### TreeSelect Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+custom-value | String / Number / Array | - | Typescript：`TreeSelectValue` | N
+height | String / Number | 336 | \- | N
+keys | Object | - | alias filed name in options。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DataOption>` | N
+value | String / Number / Array | - | `v-model:value` is supported。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts) | N
+default-value | String / Number / Array | - | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: TreeSelectValue, level: TreeLevel })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
+
+### TreeSelect External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-left-column | \-
+t-class-left-item | \-
+t-class-middle-item | \-
+t-class-right-column | \-
+t-class-right-item | \-
+t-class-right-item-label | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-colum-text-color | @text-color-primary | - 
+--td-tree-colum-width | 206rpx | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-disabled-color | @text-color-disabled | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 112rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tree-select/README.md b/packages/tdesign-uniapp/components/tree-select/README.md
new file mode 100644
index 000000000..c3f09fac6
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/README.md
@@ -0,0 +1,78 @@
+---
+title: TreeSelect 树形选择
+description: 适用于选择树形的数据结构。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTreeSelect from 'tdesign-uniapp/tree-select/tree-select.vue';
+```
+
+### 组件类型
+
+#### 基础树形选择
+
+{{ base }}
+
+#### 多选树形选择
+
+{{ multiple }}
+
+### 组件状态
+
+#### 三级树形选择
+
+{{ normal }}
+
+## API
+
+### TreeSelect Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+custom-value | String / Number / Array | - | 自定义选中值，优先级高于 `value`。TS 类型：`TreeSelectValue` | N
+height | String / Number | 336 | 高度，默认单位为 px | N
+keys | Object | - | 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/common.ts) | N
+multiple | Boolean | false | 是否允许多选 | N
+options | Array | [] | 选项。TS 类型：`Array<DataOption>` | N
+value | String / Number / Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts) | N
+default-value | String / Number / Array | - | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts) | N
+
+### TreeSelect Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: TreeSelectValue, level: TreeLevel })` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
+
+### TreeSelect External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-left-column | 左侧第一列样式类
+t-class-left-item | 左侧第一列子项样式类
+t-class-middle-item | 中间列子项样式类
+t-class-right-column | 右侧第一列样式类
+t-class-right-item | 右侧第一列子项样式类
+t-class-right-item-label | 右侧第一列子项标签样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-tree-bg-color | @bg-color-container | - |
+| --td-tree-colum-text-color | @text-color-primary | - |
+| --td-tree-colum-width | 206rpx | - |
+| --td-tree-item-active-color | @brand-color | - |
+| --td-tree-item-disabled-color | @text-color-disabled | - |
+| --td-tree-item-font-size | 32rpx | - |
+| --td-tree-item-height | 112rpx | - |
+| --td-tree-root-bg-color | @bg-color-secondarycontainer | - |
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/tree-select/_example/base/index.vue b/packages/tdesign-uniapp/components/tree-select/_example/base/index.vue
new file mode 100644
index 000000000..a10671aa5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/_example/base/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <t-tree-select
+      :options="options"
+      :value="value"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tTreeSelect from 'tdesign-uniapp/tree-select/tree-select.vue';
+const chineseNumber = '一二三四五六七八九十'.split('');
+const generateTree = function (deep = 0, count = 10, prefix) {
+  const ans = [];
+  for (let i = 0; i < count; i += 1) {
+    const value = prefix ? `${prefix}-${i}` : `${i}`;
+    const rect = {
+      label: `选项${chineseNumber[i]}`,
+      value,
+    };
+    if (deep > 0) {
+      rect.children = generateTree(deep - 1, 10, value);
+    }
+    ans.push(rect);
+  }
+  return ans;
+};
+export default {
+  components: {
+    tTreeSelect,
+  },
+  data() {
+    return {
+      options: generateTree(1),
+      value: ['5', '5-5'],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change: ', e);
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/_example/multiple/index.vue b/packages/tdesign-uniapp/components/tree-select/_example/multiple/index.vue
new file mode 100644
index 000000000..c267c827b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/_example/multiple/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <view>
+    <t-tree-select
+      :options="options"
+      :value="value"
+      multiple
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tTreeSelect from 'tdesign-uniapp/tree-select/tree-select.vue';
+const chineseNumber = '一二三四五六七八九十'.split('');
+const generateTree = function (deep = 0, count = 10, prefix) {
+  const ans = [];
+  for (let i = 0; i < count; i += 1) {
+    const value = prefix ? `${prefix}-${i}` : `${i}`;
+    const rect = {
+      label: `选项${chineseNumber[i]}`,
+      value,
+    };
+    if (deep > 0) {
+      rect.children = generateTree(deep - 1, 10, value);
+    }
+    ans.push(rect);
+  }
+  return ans;
+};
+export default {
+  components: {
+    tTreeSelect,
+  },
+  data() {
+    return {
+      options: generateTree(1),
+      value: ['5', ['5-0', '5-1']],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change: ', e);
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/_example/normal/index.vue b/packages/tdesign-uniapp/components/tree-select/_example/normal/index.vue
new file mode 100644
index 000000000..95f265715
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/_example/normal/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <view>
+    <t-tree-select
+      :options="options"
+      :value="value"
+      @change="onChange"
+    />
+  </view>
+</template>
+
+<script>
+import tTreeSelect from 'tdesign-uniapp/tree-select/tree-select.vue';
+const areaList = {
+  provinces: {
+    110000: '北京市',
+    440000: '广东省',
+  },
+  cities: {
+    110100: '北京市',
+    440100: '广州市',
+    440200: '韶关市',
+    440300: '深圳市',
+    440400: '珠海市',
+    440500: '汕头市',
+    440600: '佛山市',
+  },
+  counties: {
+    110101: '东城区',
+    110102: '西城区',
+    110105: '朝阳区',
+    110106: '丰台区',
+    110107: '石景山区',
+    110108: '海淀区',
+    110109: '门头沟区',
+    110111: '房山区',
+    110112: '通州区',
+    110113: '顺义区',
+    110114: '昌平区',
+    110115: '大兴区',
+    110116: '怀柔区',
+    110117: '平谷区',
+    110118: '密云区',
+    110119: '延庆区',
+    440103: '荔湾区',
+    440104: '越秀区',
+    440105: '海珠区',
+    440106: '天河区',
+    440111: '白云区',
+    440112: '黄埔区',
+    440113: '番禺区',
+    440114: '花都区',
+    440115: '南沙区',
+    440117: '从化区',
+    440118: '增城区',
+    440203: '武江区',
+    440204: '浈江区',
+    440205: '曲江区',
+    440222: '始兴县',
+    440224: '仁化县',
+    440229: '翁源县',
+    440232: '乳源瑶族自治县',
+    440233: '新丰县',
+    440281: '乐昌市',
+    440282: '南雄市',
+    440303: '罗湖区',
+    440304: '福田区',
+    440305: '南山区',
+    440306: '宝安区',
+    440307: '龙岗区',
+    440308: '盐田区',
+    440309: '龙华区',
+    440310: '坪山区',
+    440311: '光明区',
+    440402: '香洲区',
+    440403: '斗门区',
+    440404: '金湾区',
+    440507: '龙湖区',
+    440511: '金平区',
+    440512: '濠江区',
+    440513: '潮阳区',
+    440514: '潮南区',
+    440515: '澄海区',
+    440523: '南澳县',
+    440604: '禅城区',
+    440605: '南海区',
+    440606: '顺德区',
+    440607: '三水区',
+    440608: '高明区',
+  },
+};
+const generateTree = () => {
+  const { provinces, cities, counties } = areaList;
+  const options = [];
+  const eachObj = (obj, cb) => Object.keys(obj).forEach(cb);
+  const match = (v1, v2, base) => parseInt(v1 / base, 10) === parseInt(v2 / base, 10);
+  eachObj(provinces, (prov) => {
+    const cityList = [];
+    eachObj(cities, (city) => {
+      const countyList = [];
+      if (match(city, prov, 10000)) {
+        eachObj(counties, (county) => {
+          if (match(county, city, 100)) {
+            countyList.push({
+              label: counties[county],
+              value: county,
+            });
+          }
+        });
+        cityList.push({
+          label: cities[city],
+          value: city,
+          children: countyList,
+        });
+      }
+    });
+    const item = {
+      label: provinces[prov],
+      value: prov,
+      children: cityList,
+    };
+    options.push(item);
+  });
+  return options;
+};
+export default {
+  components: {
+    tTreeSelect,
+  },
+  data() {
+    return {
+      options: generateTree(),
+      value: ['110000', '110100', '110101'],
+    };
+  },
+  created() {},
+  methods: {
+    onChange(e) {
+      console.log('change: ', e);
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/_example/tree-select.vue b/packages/tdesign-uniapp/components/tree-select/_example/tree-select.vue
new file mode 100644
index 000000000..5063c082d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/_example/tree-select.vue
@@ -0,0 +1,53 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="TreeSelect"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="TreeSelect 树形选择器"
+        desc="用于多层级数据的逐级选择。"
+        notice="渲染框架支持情况：WebView"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="基础树形选择器"
+      >
+        <BaseDemo />
+      </t-demo>
+
+      <t-demo desc="多选树形选择器">
+        <multiple />
+      </t-demo>
+
+      <t-demo
+        title="02 组件状态"
+        desc="树形选择器-三列"
+      >
+        <normal />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script>
+import BaseDemo from './base';
+import multiple from './multiple';
+import normal from './normal';
+export default {
+  components: {
+    BaseDemo,
+    multiple,
+    normal,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/computed.js b/packages/tdesign-uniapp/components/tree-select/computed.js
new file mode 100644
index 000000000..a2696ec33
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/computed.js
@@ -0,0 +1,6 @@
+export const getTreeClass = function (level, total) {
+  if (level === 0) return 'right';
+  if (level === 1 && level !== total - 1) return 'middle';
+  return 'left';
+};
+
diff --git a/packages/tdesign-uniapp/components/tree-select/props.ts b/packages/tdesign-uniapp/components/tree-select/props.ts
new file mode 100644
index 000000000..9e3deb65b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/props.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdTreeSelectProps } from './type';
+export default {
+  /** 自定义选中值，优先级高于 `value` */
+  customValue: {
+    type: [String, Number, Array],
+  },
+  /** 高度，默认单位为 px */
+  height: {
+    type: [String, Number],
+    default: 336 as TdTreeSelectProps['height'],
+  },
+  /** 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }` */
+  keys: {
+    type: Object,
+  },
+  /** 是否允许多选 */
+  multiple: Boolean,
+  /** 选项 */
+  options: {
+    type: Array,
+    default: (): TdTreeSelectProps['options'] => [],
+  },
+  /** 选中值 */
+  value: {
+    type: [String, Number, Array],
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Array],
+  },
+  /** 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/tree-select/tree-select.less b/packages/tdesign-uniapp/components/tree-select/tree-select.less
new file mode 100644
index 000000000..695a22f3e
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/tree-select.less
@@ -0,0 +1,63 @@
+@import '../common/style/base.less';
+
+@tree-bg-color: var(--td-tree-bg-color, @bg-color-container);
+@tree-root-bg-color: var(--td-tree-root-bg-color, @bg-color-secondarycontainer);
+@tree-item-active-color: var(--td-tree-item-active-color, @brand-color);
+@tree-item-disabled-color: var(--td-tree-item-disabled-color, @text-color-disabled);
+@tree-item-height: var(--td-tree-item-height, 112rpx);
+@tree-item-font-size: var(--td-tree-item-font-size, 32rpx);
+@tree-colum-width: var(--td-tree-colum-width, 206rpx);
+@tree-colum-text-color: var(--td-tree-colum-text-color, @text-color-primary);
+
+.@{prefix}-tree-select {
+  display: flex;
+  background-color: @tree-bg-color;
+
+  :deep(&__column) {
+    width: @tree-colum-width;
+    color: @tree-colum-text-color;
+
+    height: 100%;
+    overflow: auto;
+
+    &--left {
+      background: @tree-root-bg-color;
+    }
+
+    &--right {
+      flex: 1;
+    }
+
+     &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      color: transparent;
+    }
+  }
+
+  &__item {
+    .ellipsisLn(1);
+
+    height: @tree-item-height;
+    line-height: @tree-item-height;
+    font-size: @tree-item-font-size;
+    padding-left: 32rpx;
+
+    &--active {
+      font-weight: 600;
+      color: @tree-item-active-color;
+    }
+
+    &--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      color: @tree-item-disabled-color;
+    }
+  }
+
+  :deep(&-column) {
+    width: 100%;
+    height: auto;
+  }
+}
diff --git a/packages/tdesign-uniapp/components/tree-select/tree-select.vue b/packages/tdesign-uniapp/components/tree-select/tree-select.vue
new file mode 100644
index 000000000..227826bad
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/tree-select.vue
@@ -0,0 +1,318 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="_._style(['height:' + _.addUnit(height), customStyle])"
+  >
+    <t-scroll-view
+      v-for="(item, level) in treeOptions"
+      :key="level"
+      :t-class="getScrollViewTClass(level)"
+      :class="getScrollViewClass(level)"
+      :scroll-into-view="scrollIntoView && scrollIntoView[level] ? 'scroll-to-' + scrollIntoView[level] : ''"
+    >
+      <t-side-bar
+        v-if="level == 0"
+        :value="innerValue[level]"
+        :t-class="classPrefix + '-column ' + tClassLeftColumn"
+        style="width: 100%;height: auto;"
+        @change="onRootChange"
+      >
+        <t-side-bar-item
+          v-for="(sidebarItem, sidebarIndex) in treeOptions[level]"
+          :key="sidebarIndex"
+          :label="sidebarItem.label"
+          :value="sidebarItem.value"
+          :disabled="sidebarItem.disabled"
+          :t-id="'scroll-to-' + sidebarItem.value"
+          :t-class="'scroll-into-view ' + tClassLeftItem"
+        />
+      </t-side-bar>
+
+      <block v-else-if="level != leafLevel">
+        <view
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`view-${level}-${index}`"
+          :data-level="level"
+          :data-value="treeItem.value"
+          :class="
+            _.cls(classPrefix + '__item', [
+              ['active', treeItem.value === innerValue[level]],
+              ['disabled', treeItem.disabled]
+            ]) +
+              ' ' +
+              tClassMiddleItem +
+              ' scroll-into-view'
+          "
+          @click="handleTreeClick"
+        >
+          <view :id="'scroll-to-' + treeItem.value">
+            {{ treeItem.label }}
+          </view>
+        </view>
+      </block>
+
+      <t-radio-group
+        v-else-if="!multiple"
+        :t-class="classPrefix + '__radio ' + tClassRightColumn"
+        :data-level="level"
+        data-type="single"
+        :value="innerValue[level]"
+        @change="({value}) => handleChange({ value, level, type: 'single' })"
+      >
+        <t-radio
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`radio-${innerValue[level-1]}-${level}-${index}`"
+          :t-id="'scroll-to-' + treeItem.value"
+          :t-class="'scroll-into-view ' + classPrefix + '__radio-item ' + tClassRightItem"
+          :t-class-label="tClassRightItemLabel"
+          icon="line"
+          :value="treeItem.value"
+          :disabled="treeItem.disabled"
+          :max-label-row="1"
+          borderless
+          placement="right"
+        >
+          {{ treeItem.label }}
+        </t-radio>
+      </t-radio-group>
+
+      <t-checkbox-group
+        v-else
+        :t-class="classPrefix + '__checkbox ' + tClassRightColumn"
+        :value="innerValue[level] || []"
+        :data-level="level"
+        data-type="multiple"
+        @change="({context}) => handleChange({ context, value: context.value, level, type: 'multiple' })"
+      >
+        <t-checkbox
+          v-for="(treeItem, index) in treeOptions[level]"
+          :key="`checkbox-${innerValue[level-1]}-${level}-${index}`"
+          :t-id="'scroll-to-' + treeItem.value"
+          :t-class="'scroll-into-view ' + tClassRightItem"
+          :t-class-label="tClassRightItemLabel"
+          placement="right"
+          icon="line"
+          :max-label-row="1"
+          :value="treeItem.value"
+          :disabled="treeItem.disabled"
+          borderless
+        >
+          {{ treeItem.label }}
+        </t-checkbox>
+      </t-checkbox-group>
+    </t-scroll-view>
+    <slot name="content" />
+  </view>
+</template>
+<script>
+import tRadio from '../radio/radio';
+import tRadioGroup from '../radio-group/radio-group';
+import tCheckbox from '../checkbox/checkbox';
+import tCheckboxGroup from '../checkbox-group/checkbox-group';
+import tSideBar from '../side-bar/side-bar';
+import tSideBarItem from '../side-bar-item/side-bar-item';
+import tScrollView from '../scroll-view/scroll-view.vue';
+
+import { uniComponent } from '../common/src/index';
+import { isDef } from '../common/validator';
+import { prefix } from '../common/config';
+import { getTreeDepth, coalesce, nextTick } from '../common/utils';
+import props from './props';
+import _ from '../common/utils.wxs';
+import { getTreeClass } from './computed.js';
+import { canUseVirtualHost } from '../common/version';
+
+const name = `${prefix}-tree-select`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-left-column`,
+    `${prefix}-class-left-item`,
+    `${prefix}-class-middle-item`,
+    `${prefix}-class-right-column`,
+    `${prefix}-class-right-item`,
+    `${prefix}-class-right-item-label`,
+  ],
+  components: {
+    tRadio,
+    tRadioGroup,
+    tCheckbox,
+    tCheckboxGroup,
+    tSideBar,
+    tSideBarItem,
+    tScrollView,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      scrollIntoView: null,
+      _,
+
+      innerValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+    value: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    options: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    keys: {
+      handler() {
+        this.buildTreeOptions();
+      },
+      deep: true,
+      immediate: true,
+    },
+    multiple: 'buildTreeOptions',
+  },
+  mounted() {
+    nextTick().then(() => {
+      this.getScrollIntoView('init');
+    });
+  },
+  methods: {
+    getTreeClass,
+    buildTreeOptions() {
+      const { options, innerValue: value, customValue, multiple, keys } = this;
+
+      if (!options.length) return;
+
+      const treeOptions = [];
+
+      let level = -1;
+      let currentNode = { children: options };
+
+      while (currentNode?.children) {
+        level += 1;
+        const currentLevelOptions = currentNode.children.map(item => ({
+          label: item[keys?.label || 'label'],
+          value: item[keys?.value || 'value'],
+          disabled: item[keys?.disabled || 'disabled'],
+          children: item[keys?.children || 'children'],
+        }));
+
+        treeOptions.push(currentLevelOptions);
+
+        const currentValue = coalesce(customValue?.[level], value?.[level]);
+        currentNode = currentValue
+          ? coalesce(currentLevelOptions.find(child => child.value === currentValue), currentLevelOptions[0])
+          : currentLevelOptions[0];
+      }
+
+      const depth = getTreeDepth(options, keys?.children);
+
+      // 补齐 treeOptions 长度到 depth
+      while (treeOptions.length < depth) {
+        treeOptions.push([]);
+        level += 1;
+      }
+
+      const leafLevel = Math.max(0, level);
+      const innerValue = customValue
+        || treeOptions.map((levelOptions, idx) => {
+          const isLastLevel = idx === treeOptions.length - 1;
+          const defaultValue = isLastLevel && multiple ? [levelOptions[0]?.value] : levelOptions[0]?.value;
+          return coalesce(value?.[idx], defaultValue);
+        });
+
+      this.innerValue = innerValue;
+      this.leafLevel = leafLevel;
+      this.treeOptions = treeOptions;
+    },
+
+    getScrollIntoView(status) {
+      const { innerValue: value, customValue, scrollIntoView } = this;
+      if (status === 'init') {
+        const _value = customValue || value;
+        const scrollIntoView = Array.isArray(_value)
+          ? _value.map(item => (Array.isArray(item) ? item[0] : item))
+          : [_value];
+        // setTimeout(() => {
+        this.scrollIntoView = scrollIntoView;
+        // }, 1000);
+      } else {
+        if (scrollIntoView === null) return;
+        this.scrollIntoView = null;
+      }
+    },
+
+    onRootChange(e) {
+      const { innerValue } = this;
+      const { value: itemValue } = e;
+
+      this.getScrollIntoView('none');
+      innerValue[0] = itemValue;
+
+      this._trigger('change', { value: innerValue, level: 0 });
+    },
+
+    handleTreeClick(e) {
+      const { level, value: itemValue } = e.currentTarget.dataset;
+      const { innerValue } = this;
+
+      innerValue[level] = itemValue;
+      this.getScrollIntoView('none');
+      this._trigger('change', { value: innerValue, level: 1 });
+    },
+
+    handleChange({ level, type, value }) {
+      const { innerValue } = this;
+
+      if (type === 'multiple') {
+        if (!isDef(innerValue[level])) {
+          innerValue[level] = [];
+        }
+        const index = innerValue[level].indexOf(value);
+        index === -1 ? innerValue[level].push(value) : innerValue[level].splice(index, 1);
+      } else {
+        innerValue[level] = value;
+      }
+
+      this.getScrollIntoView('none');
+      this._trigger('change', { value: innerValue, level });
+    },
+
+    getScrollViewTClass(level) {
+      return canUseVirtualHost() ? this.getScrollViewRealClass(level) : '';
+    },
+    getScrollViewClass(level) {
+      return !canUseVirtualHost() ? this.getScrollViewRealClass(level) : '';
+    },
+    getScrollViewRealClass(level) {
+      const { classPrefix, leafLevel, treeOptions, tClass } = this;
+      return `${_.cls(`${classPrefix}__column`, [getTreeClass(leafLevel - level, treeOptions.length)])} ${tClass}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tree-select.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/tree-select/type.ts b/packages/tdesign-uniapp/components/tree-select/type.ts
new file mode 100644
index 000000000..943441561
--- /dev/null
+++ b/packages/tdesign-uniapp/components/tree-select/type.ts
@@ -0,0 +1,49 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TreeOptionData, TreeKeysType } from '../common/common';
+
+export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 自定义选中值，优先级高于 `value`
+   */
+  customValue?: TreeSelectValue;
+  /**
+   * 高度，默认单位为 px
+   * @default 336
+   */
+  height?: string | number;
+  /**
+   * 用来定义 `value / label / disabled / children` 在 `options` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`
+   */
+  keys?: TreeKeysType;
+  /**
+   * 是否允许多选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 选项
+   * @default []
+   */
+  options?: Array<DataOption>;
+  /**
+   * 选中值
+   */
+  value?: TreeSelectValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: TreeSelectValue;
+  /**
+   * 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进
+   */
+  onChange?: (context: { value: TreeSelectValue; level: TreeLevel }) => void;
+}
+
+export type TreeSelectValue = string | number | Array<TreeSelectValue>;
+
+export type TreeLevel = 0 | 1 | 2;
diff --git a/packages/tdesign-uniapp/components/types/action-sheet.d.ts b/packages/tdesign-uniapp/components/types/action-sheet.d.ts
new file mode 100644
index 000000000..99e02c1f4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/action-sheet.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdActionSheetProps } from '../action-sheet/type';
+
+export type ActionSheetProps = ExtractNonOnProps<TdActionSheetProps>;
+export type ActionSheetEmits = TransformEventHandlers<TdActionSheetProps, true>;
+declare const ActionSheetComponent: import('vue').DefineComponent<ActionSheetProps, {}, {}, {}, {}, {}, {}, ActionSheetEmits, any>;
+export default ActionSheetComponent;
diff --git a/packages/tdesign-uniapp/components/types/avatar-group.d.ts b/packages/tdesign-uniapp/components/types/avatar-group.d.ts
new file mode 100644
index 000000000..e8670cb6f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/avatar-group.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdAvatarGroupProps } from '../avatar-group/type';
+
+export type AvatarGroupProps = ExtractNonOnProps<TdAvatarGroupProps>;
+export type AvatarGroupEmits = TransformEventHandlers<TdAvatarGroupProps, true>;
+declare const AvatarGroupComponent: import('vue').DefineComponent<AvatarGroupProps, {}, {}, {}, {}, {}, {}, AvatarGroupEmits, any>;
+export default AvatarGroupComponent;
diff --git a/packages/tdesign-uniapp/components/types/avatar.d.ts b/packages/tdesign-uniapp/components/types/avatar.d.ts
new file mode 100644
index 000000000..82e2aafa1
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/avatar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdAvatarProps } from '../avatar/type';
+
+export type AvatarProps = ExtractNonOnProps<TdAvatarProps>;
+export type AvatarEmits = TransformEventHandlers<TdAvatarProps, true>;
+declare const AvatarComponent: import('vue').DefineComponent<AvatarProps, {}, {}, {}, {}, {}, {}, AvatarEmits, any>;
+export default AvatarComponent;
diff --git a/packages/tdesign-uniapp/components/types/back-top.d.ts b/packages/tdesign-uniapp/components/types/back-top.d.ts
new file mode 100644
index 000000000..01fce362b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/back-top.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdBackTopProps } from '../back-top/type';
+
+export type BackTopProps = ExtractNonOnProps<TdBackTopProps>;
+export type BackTopEmits = TransformEventHandlers<TdBackTopProps, true>;
+declare const BackTopComponent: import('vue').DefineComponent<BackTopProps, {}, {}, {}, {}, {}, {}, BackTopEmits, any>;
+export default BackTopComponent;
diff --git a/packages/tdesign-uniapp/components/types/badge.d.ts b/packages/tdesign-uniapp/components/types/badge.d.ts
new file mode 100644
index 000000000..e07214fa3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/badge.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdBadgeProps } from '../badge/type';
+
+export type BadgeProps = ExtractNonOnProps<TdBadgeProps>;
+export type BadgeEmits = TransformEventHandlers<TdBadgeProps, true>;
+declare const BadgeComponent: import('vue').DefineComponent<BadgeProps, {}, {}, {}, {}, {}, {}, BadgeEmits, any>;
+export default BadgeComponent;
diff --git a/packages/tdesign-uniapp/components/types/button.d.ts b/packages/tdesign-uniapp/components/types/button.d.ts
new file mode 100644
index 000000000..85abc3c11
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/button.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdButtonProps } from '../button/type';
+
+export type ButtonProps = ExtractNonOnProps<TdButtonProps>;
+export type ButtonEmits = TransformEventHandlers<TdButtonProps, true>;
+declare const ButtonComponent: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, {}, {}, ButtonEmits, any>;
+export default ButtonComponent;
diff --git a/packages/tdesign-uniapp/components/types/calendar.d.ts b/packages/tdesign-uniapp/components/types/calendar.d.ts
new file mode 100644
index 000000000..4336e715d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/calendar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCalendarProps } from '../calendar/type';
+
+export type CalendarProps = ExtractNonOnProps<TdCalendarProps>;
+export type CalendarEmits = TransformEventHandlers<TdCalendarProps, true>;
+declare const CalendarComponent: import('vue').DefineComponent<CalendarProps, {}, {}, {}, {}, {}, {}, CalendarEmits, any>;
+export default CalendarComponent;
diff --git a/packages/tdesign-uniapp/components/types/cascader.d.ts b/packages/tdesign-uniapp/components/types/cascader.d.ts
new file mode 100644
index 000000000..8bea894b3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/cascader.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCascaderProps } from '../cascader/type';
+
+export type CascaderProps = ExtractNonOnProps<TdCascaderProps>;
+export type CascaderEmits = TransformEventHandlers<TdCascaderProps, true>;
+declare const CascaderComponent: import('vue').DefineComponent<CascaderProps, {}, {}, {}, {}, {}, {}, CascaderEmits, any>;
+export default CascaderComponent;
diff --git a/packages/tdesign-uniapp/components/types/cell-group.d.ts b/packages/tdesign-uniapp/components/types/cell-group.d.ts
new file mode 100644
index 000000000..071c52084
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/cell-group.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCellGroupProps } from '../cell-group/type';
+
+export type CellGroupProps = ExtractNonOnProps<TdCellGroupProps>;
+export type CellGroupEmits = TransformEventHandlers<TdCellGroupProps, true>;
+declare const CellGroupComponent: import('vue').DefineComponent<CellGroupProps, {}, {}, {}, {}, {}, {}, CellGroupEmits, any>;
+export default CellGroupComponent;
diff --git a/packages/tdesign-uniapp/components/types/cell.d.ts b/packages/tdesign-uniapp/components/types/cell.d.ts
new file mode 100644
index 000000000..bc6401a3c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/cell.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCellProps } from '../cell/type';
+
+export type CellProps = ExtractNonOnProps<TdCellProps>;
+export type CellEmits = TransformEventHandlers<TdCellProps, true>;
+declare const CellComponent: import('vue').DefineComponent<CellProps, {}, {}, {}, {}, {}, {}, CellEmits, any>;
+export default CellComponent;
diff --git a/packages/tdesign-uniapp/components/types/check-tag.d.ts b/packages/tdesign-uniapp/components/types/check-tag.d.ts
new file mode 100644
index 000000000..440a5722a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/check-tag.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCheckTagProps } from '../check-tag/type';
+
+export type CheckTagProps = ExtractNonOnProps<TdCheckTagProps>;
+export type CheckTagEmits = TransformEventHandlers<TdCheckTagProps, true>;
+declare const CheckTagComponent: import('vue').DefineComponent<CheckTagProps, {}, {}, {}, {}, {}, {}, CheckTagEmits, any>;
+export default CheckTagComponent;
diff --git a/packages/tdesign-uniapp/components/types/checkbox-group.d.ts b/packages/tdesign-uniapp/components/types/checkbox-group.d.ts
new file mode 100644
index 000000000..61e1f0250
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/checkbox-group.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCheckboxGroupProps } from '../checkbox-group/type';
+
+export type CheckboxGroupProps = ExtractNonOnProps<TdCheckboxGroupProps>;
+export type CheckboxGroupEmits = TransformEventHandlers<TdCheckboxGroupProps, true>;
+declare const CheckboxGroupComponent: import('vue').DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, {}, {}, CheckboxGroupEmits, any>;
+export default CheckboxGroupComponent;
diff --git a/packages/tdesign-uniapp/components/types/checkbox.d.ts b/packages/tdesign-uniapp/components/types/checkbox.d.ts
new file mode 100644
index 000000000..e95c72262
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/checkbox.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCheckboxProps } from '../checkbox/type';
+
+export type CheckboxProps = ExtractNonOnProps<TdCheckboxProps>;
+export type CheckboxEmits = TransformEventHandlers<TdCheckboxProps, true>;
+declare const CheckboxComponent: import('vue').DefineComponent<CheckboxProps, {}, {}, {}, {}, {}, {}, CheckboxEmits, any>;
+export default CheckboxComponent;
diff --git a/packages/tdesign-uniapp/components/types/col.d.ts b/packages/tdesign-uniapp/components/types/col.d.ts
new file mode 100644
index 000000000..e8631e4a3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/col.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdColProps } from '../col/type';
+
+export type ColProps = ExtractNonOnProps<TdColProps>;
+export type ColEmits = TransformEventHandlers<TdColProps, true>;
+declare const ColComponent: import('vue').DefineComponent<ColProps, {}, {}, {}, {}, {}, {}, ColEmits, any>;
+export default ColComponent;
diff --git a/packages/tdesign-uniapp/components/types/collapse-panel.d.ts b/packages/tdesign-uniapp/components/types/collapse-panel.d.ts
new file mode 100644
index 000000000..1c4949187
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/collapse-panel.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCollapsePanelProps } from '../collapse-panel/type';
+
+export type CollapsePanelProps = ExtractNonOnProps<TdCollapsePanelProps>;
+export type CollapsePanelEmits = TransformEventHandlers<TdCollapsePanelProps, true>;
+declare const CollapsePanelComponent: import('vue').DefineComponent<CollapsePanelProps, {}, {}, {}, {}, {}, {}, CollapsePanelEmits, any>;
+export default CollapsePanelComponent;
diff --git a/packages/tdesign-uniapp/components/types/collapse.d.ts b/packages/tdesign-uniapp/components/types/collapse.d.ts
new file mode 100644
index 000000000..c9fbf44ce
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/collapse.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCollapseProps } from '../collapse/type';
+
+export type CollapseProps = ExtractNonOnProps<TdCollapseProps>;
+export type CollapseEmits = TransformEventHandlers<TdCollapseProps, true>;
+declare const CollapseComponent: import('vue').DefineComponent<CollapseProps, {}, {}, {}, {}, {}, {}, CollapseEmits, any>;
+export default CollapseComponent;
diff --git a/packages/tdesign-uniapp/components/types/color-picker.d.ts b/packages/tdesign-uniapp/components/types/color-picker.d.ts
new file mode 100644
index 000000000..bffd784f2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/color-picker.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdColorPickerProps } from '../color-picker/type';
+
+export type ColorPickerProps = ExtractNonOnProps<TdColorPickerProps>;
+export type ColorPickerEmits = TransformEventHandlers<TdColorPickerProps, true>;
+declare const ColorPickerComponent: import('vue').DefineComponent<ColorPickerProps, {}, {}, {}, {}, {}, {}, ColorPickerEmits, any>;
+export default ColorPickerComponent;
diff --git a/packages/tdesign-uniapp/components/types/count-down.d.ts b/packages/tdesign-uniapp/components/types/count-down.d.ts
new file mode 100644
index 000000000..797b19c6c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/count-down.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdCountDownProps } from '../count-down/type';
+
+export type CountDownProps = ExtractNonOnProps<TdCountDownProps>;
+export type CountDownEmits = TransformEventHandlers<TdCountDownProps, true>;
+declare const CountDownComponent: import('vue').DefineComponent<CountDownProps, {}, {}, {}, {}, {}, {}, CountDownEmits, any>;
+export default CountDownComponent;
diff --git a/packages/tdesign-uniapp/components/types/date-time-picker.d.ts b/packages/tdesign-uniapp/components/types/date-time-picker.d.ts
new file mode 100644
index 000000000..39b632c00
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/date-time-picker.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDateTimePickerProps } from '../date-time-picker/type';
+
+export type DateTimePickerProps = ExtractNonOnProps<TdDateTimePickerProps>;
+export type DateTimePickerEmits = TransformEventHandlers<TdDateTimePickerProps, true>;
+declare const DateTimePickerComponent: import('vue').DefineComponent<DateTimePickerProps, {}, {}, {}, {}, {}, {}, DateTimePickerEmits, any>;
+export default DateTimePickerComponent;
diff --git a/packages/tdesign-uniapp/components/types/dialog.d.ts b/packages/tdesign-uniapp/components/types/dialog.d.ts
new file mode 100644
index 000000000..70568c5ac
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/dialog.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDialogProps } from '../dialog/type';
+
+export type DialogProps = ExtractNonOnProps<TdDialogProps>;
+export type DialogEmits = TransformEventHandlers<TdDialogProps, true>;
+declare const DialogComponent: import('vue').DefineComponent<DialogProps, {}, {}, {}, {}, {}, {}, DialogEmits, any>;
+export default DialogComponent;
diff --git a/packages/tdesign-uniapp/components/types/divider.d.ts b/packages/tdesign-uniapp/components/types/divider.d.ts
new file mode 100644
index 000000000..d1c1aff0b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/divider.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDividerProps } from '../divider/type';
+
+export type DividerProps = ExtractNonOnProps<TdDividerProps>;
+export type DividerEmits = TransformEventHandlers<TdDividerProps, true>;
+declare const DividerComponent: import('vue').DefineComponent<DividerProps, {}, {}, {}, {}, {}, {}, DividerEmits, any>;
+export default DividerComponent;
diff --git a/packages/tdesign-uniapp/components/types/drawer.d.ts b/packages/tdesign-uniapp/components/types/drawer.d.ts
new file mode 100644
index 000000000..b8c4bb05d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/drawer.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDrawerProps } from '../drawer/type';
+
+export type DrawerProps = ExtractNonOnProps<TdDrawerProps>;
+export type DrawerEmits = TransformEventHandlers<TdDrawerProps, true>;
+declare const DrawerComponent: import('vue').DefineComponent<DrawerProps, {}, {}, {}, {}, {}, {}, DrawerEmits, any>;
+export default DrawerComponent;
diff --git a/packages/tdesign-uniapp/components/types/dropdown-item.d.ts b/packages/tdesign-uniapp/components/types/dropdown-item.d.ts
new file mode 100644
index 000000000..75440cf7a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/dropdown-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDropdownItemProps } from '../dropdown-item/type';
+
+export type DropdownItemProps = ExtractNonOnProps<TdDropdownItemProps>;
+export type DropdownItemEmits = TransformEventHandlers<TdDropdownItemProps, true>;
+declare const DropdownItemComponent: import('vue').DefineComponent<DropdownItemProps, {}, {}, {}, {}, {}, {}, DropdownItemEmits, any>;
+export default DropdownItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/dropdown-menu.d.ts b/packages/tdesign-uniapp/components/types/dropdown-menu.d.ts
new file mode 100644
index 000000000..f3be5e603
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/dropdown-menu.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdDropdownMenuProps } from '../dropdown-menu/type';
+
+export type DropdownMenuProps = ExtractNonOnProps<TdDropdownMenuProps>;
+export type DropdownMenuEmits = TransformEventHandlers<TdDropdownMenuProps, true>;
+declare const DropdownMenuComponent: import('vue').DefineComponent<DropdownMenuProps, {}, {}, {}, {}, {}, {}, DropdownMenuEmits, any>;
+export default DropdownMenuComponent;
diff --git a/packages/tdesign-uniapp/components/types/empty.d.ts b/packages/tdesign-uniapp/components/types/empty.d.ts
new file mode 100644
index 000000000..827a91320
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/empty.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdEmptyProps } from '../empty/type';
+
+export type EmptyProps = ExtractNonOnProps<TdEmptyProps>;
+export type EmptyEmits = TransformEventHandlers<TdEmptyProps, true>;
+declare const EmptyComponent: import('vue').DefineComponent<EmptyProps, {}, {}, {}, {}, {}, {}, EmptyEmits, any>;
+export default EmptyComponent;
diff --git a/packages/tdesign-uniapp/components/types/fab.d.ts b/packages/tdesign-uniapp/components/types/fab.d.ts
new file mode 100644
index 000000000..595708507
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/fab.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdFabProps } from '../fab/type';
+
+export type FabProps = ExtractNonOnProps<TdFabProps>;
+export type FabEmits = TransformEventHandlers<TdFabProps, true>;
+declare const FabComponent: import('vue').DefineComponent<FabProps, {}, {}, {}, {}, {}, {}, FabEmits, any>;
+export default FabComponent;
diff --git a/packages/tdesign-uniapp/components/types/footer.d.ts b/packages/tdesign-uniapp/components/types/footer.d.ts
new file mode 100644
index 000000000..5a2c8daa0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/footer.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdFooterProps } from '../footer/type';
+
+export type FooterProps = ExtractNonOnProps<TdFooterProps>;
+export type FooterEmits = TransformEventHandlers<TdFooterProps, true>;
+declare const FooterComponent: import('vue').DefineComponent<FooterProps, {}, {}, {}, {}, {}, {}, FooterEmits, any>;
+export default FooterComponent;
diff --git a/packages/tdesign-uniapp/components/types/form-item.d.ts b/packages/tdesign-uniapp/components/types/form-item.d.ts
new file mode 100644
index 000000000..6c03c45ff
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/form-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdFormItemProps } from '../form-item/type';
+
+export type FormItemProps = ExtractNonOnProps<TdFormItemProps>;
+export type FormItemEmits = TransformEventHandlers<TdFormItemProps, true>;
+declare const FormItemComponent: import('vue').DefineComponent<FormItemProps, {}, {}, {}, {}, {}, {}, FormItemEmits, any>;
+export default FormItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/form.d.ts b/packages/tdesign-uniapp/components/types/form.d.ts
new file mode 100644
index 000000000..511c78253
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/form.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdFormProps } from '../form/type';
+
+export type FormProps = ExtractNonOnProps<TdFormProps>;
+export type FormEmits = TransformEventHandlers<TdFormProps, true>;
+declare const FormComponent: import('vue').DefineComponent<FormProps, {}, {}, {}, {}, {}, {}, FormEmits, any>;
+export default FormComponent;
diff --git a/packages/tdesign-uniapp/components/types/grid-item.d.ts b/packages/tdesign-uniapp/components/types/grid-item.d.ts
new file mode 100644
index 000000000..3fe14c131
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/grid-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdGridItemProps } from '../grid-item/type';
+
+export type GridItemProps = ExtractNonOnProps<TdGridItemProps>;
+export type GridItemEmits = TransformEventHandlers<TdGridItemProps, true>;
+declare const GridItemComponent: import('vue').DefineComponent<GridItemProps, {}, {}, {}, {}, {}, {}, GridItemEmits, any>;
+export default GridItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/grid.d.ts b/packages/tdesign-uniapp/components/types/grid.d.ts
new file mode 100644
index 000000000..9fd630d5d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/grid.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdGridProps } from '../grid/type';
+
+export type GridProps = ExtractNonOnProps<TdGridProps>;
+export type GridEmits = TransformEventHandlers<TdGridProps, true>;
+declare const GridComponent: import('vue').DefineComponent<GridProps, {}, {}, {}, {}, {}, {}, GridEmits, any>;
+export default GridComponent;
diff --git a/packages/tdesign-uniapp/components/types/guide.d.ts b/packages/tdesign-uniapp/components/types/guide.d.ts
new file mode 100644
index 000000000..9ec7e98ed
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/guide.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdGuideProps } from '../guide/type';
+
+export type GuideProps = ExtractNonOnProps<TdGuideProps>;
+export type GuideEmits = TransformEventHandlers<TdGuideProps, true>;
+declare const GuideComponent: import('vue').DefineComponent<GuideProps, {}, {}, {}, {}, {}, {}, GuideEmits, any>;
+export default GuideComponent;
diff --git a/packages/tdesign-uniapp/components/types/icon.d.ts b/packages/tdesign-uniapp/components/types/icon.d.ts
new file mode 100644
index 000000000..c664c6b98
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/icon.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdIconProps } from '../icon/type';
+
+export type IconProps = ExtractNonOnProps<TdIconProps>;
+export type IconEmits = TransformEventHandlers<TdIconProps, true>;
+declare const IconComponent: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, {}, {}, IconEmits, any>;
+export default IconComponent;
diff --git a/packages/tdesign-uniapp/components/types/image-viewer.d.ts b/packages/tdesign-uniapp/components/types/image-viewer.d.ts
new file mode 100644
index 000000000..83e2af974
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/image-viewer.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdImageViewerProps } from '../image-viewer/type';
+
+export type ImageViewerProps = ExtractNonOnProps<TdImageViewerProps>;
+export type ImageViewerEmits = TransformEventHandlers<TdImageViewerProps, true>;
+declare const ImageViewerComponent: import('vue').DefineComponent<ImageViewerProps, {}, {}, {}, {}, {}, {}, ImageViewerEmits, any>;
+export default ImageViewerComponent;
diff --git a/packages/tdesign-uniapp/components/types/image.d.ts b/packages/tdesign-uniapp/components/types/image.d.ts
new file mode 100644
index 000000000..f738a807f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/image.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdImageProps } from '../image/type';
+
+export type ImageProps = ExtractNonOnProps<TdImageProps>;
+export type ImageEmits = TransformEventHandlers<TdImageProps, true>;
+declare const ImageComponent: import('vue').DefineComponent<ImageProps, {}, {}, {}, {}, {}, {}, ImageEmits, any>;
+export default ImageComponent;
diff --git a/packages/tdesign-uniapp/components/types/index.d.ts b/packages/tdesign-uniapp/components/types/index.d.ts
new file mode 100644
index 000000000..75cbab3d0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/index.d.ts
@@ -0,0 +1,77 @@
+export * from '../action-sheet/type';
+export * from '../avatar/type';
+export * from '../avatar-group/type';
+export * from '../back-top/type';
+export * from '../badge/type';
+export * from '../button/type';
+export * from '../calendar/type';
+export * from '../cascader/type';
+export * from '../cell/type';
+export * from '../cell-group/type';
+export * from '../check-tag/type';
+export * from '../checkbox/type';
+export * from '../checkbox-group/type';
+export * from '../col/type';
+export * from '../collapse/type';
+export * from '../collapse-panel/type';
+export * from '../color-picker/type';
+export * from '../count-down/type';
+export * from '../date-time-picker/type';
+export * from '../dialog/type';
+export * from '../divider/type';
+export * from '../drawer/type';
+export * from '../dropdown-item/type';
+export * from '../dropdown-menu/type';
+export * from '../empty/type';
+export * from '../fab/type';
+export * from '../footer/type';
+export * from '../form/type';
+export * from '../grid/type';
+export * from '../grid-item/type';
+export * from '../guide/type';
+export * from '../icon/type';
+export * from '../image/type';
+export * from '../image-viewer/type';
+export * from '../indexes/type';
+export * from '../indexes-anchor/type';
+export * from '../input/type';
+export * from '../link/type';
+export * from '../loading/type';
+export * from '../message/type';
+export * from '../navbar/type';
+export * from '../notice-bar/type';
+export * from '../overlay/type';
+export * from '../picker/type';
+export * from '../picker-item/type';
+export * from '../popup/type';
+export * from '../progress/type';
+export * from '../pull-down-refresh/type';
+export * from '../qrcode/type';
+export * from '../radio/type';
+export * from '../radio-group/type';
+export * from '../rate/type';
+export * from '../result/type';
+export * from '../row/type';
+export * from '../search/type';
+export * from '../side-bar/type';
+export * from '../side-bar-item/type';
+export * from '../skeleton/type';
+export * from '../slider/type';
+export * from '../step-item/type';
+export * from '../stepper/type';
+export * from '../steps/type';
+export * from '../sticky/type';
+export * from '../swipe-cell/type';
+export * from '../swiper/type';
+export * from '../swiper-nav/type';
+export * from '../switch/type';
+export * from '../tab-bar/type';
+export * from '../tab-bar-item/type';
+export * from '../tab-panel/type';
+export * from '../tabs/type';
+export * from '../tag/type';
+export * from '../textarea/type';
+export * from '../toast/type';
+export * from '../tree-select/type';
+export * from '../upload/type';
+export * from '../watermark/type';
diff --git a/packages/tdesign-uniapp/components/types/indexes-anchor.d.ts b/packages/tdesign-uniapp/components/types/indexes-anchor.d.ts
new file mode 100644
index 000000000..2034edc32
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/indexes-anchor.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdIndexesAnchorProps } from '../indexes-anchor/type';
+
+export type IndexesAnchorProps = ExtractNonOnProps<TdIndexesAnchorProps>;
+export type IndexesAnchorEmits = TransformEventHandlers<TdIndexesAnchorProps, true>;
+declare const IndexesAnchorComponent: import('vue').DefineComponent<IndexesAnchorProps, {}, {}, {}, {}, {}, {}, IndexesAnchorEmits, any>;
+export default IndexesAnchorComponent;
diff --git a/packages/tdesign-uniapp/components/types/indexes.d.ts b/packages/tdesign-uniapp/components/types/indexes.d.ts
new file mode 100644
index 000000000..2876bd977
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/indexes.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdIndexesProps } from '../indexes/type';
+
+export type IndexesProps = ExtractNonOnProps<TdIndexesProps>;
+export type IndexesEmits = TransformEventHandlers<TdIndexesProps, true>;
+declare const IndexesComponent: import('vue').DefineComponent<IndexesProps, {}, {}, {}, {}, {}, {}, IndexesEmits, any>;
+export default IndexesComponent;
diff --git a/packages/tdesign-uniapp/components/types/input.d.ts b/packages/tdesign-uniapp/components/types/input.d.ts
new file mode 100644
index 000000000..da003777f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/input.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdInputProps } from '../input/type';
+
+export type InputProps = ExtractNonOnProps<TdInputProps>;
+export type InputEmits = TransformEventHandlers<TdInputProps, true>;
+declare const InputComponent: import('vue').DefineComponent<InputProps, {}, {}, {}, {}, {}, {}, InputEmits, any>;
+export default InputComponent;
diff --git a/packages/tdesign-uniapp/components/types/link.d.ts b/packages/tdesign-uniapp/components/types/link.d.ts
new file mode 100644
index 000000000..63a692238
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/link.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdLinkProps } from '../link/type';
+
+export type LinkProps = ExtractNonOnProps<TdLinkProps>;
+export type LinkEmits = TransformEventHandlers<TdLinkProps, true>;
+declare const LinkComponent: import('vue').DefineComponent<LinkProps, {}, {}, {}, {}, {}, {}, LinkEmits, any>;
+export default LinkComponent;
diff --git a/packages/tdesign-uniapp/components/types/loading.d.ts b/packages/tdesign-uniapp/components/types/loading.d.ts
new file mode 100644
index 000000000..d71b16c50
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/loading.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdLoadingProps } from '../loading/type';
+
+export type LoadingProps = ExtractNonOnProps<TdLoadingProps>;
+export type LoadingEmits = TransformEventHandlers<TdLoadingProps, true>;
+declare const LoadingComponent: import('vue').DefineComponent<LoadingProps, {}, {}, {}, {}, {}, {}, LoadingEmits, any>;
+export default LoadingComponent;
diff --git a/packages/tdesign-uniapp/components/types/message.d.ts b/packages/tdesign-uniapp/components/types/message.d.ts
new file mode 100644
index 000000000..35054e3ba
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/message.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdMessageProps } from '../message/type';
+
+export type MessageProps = ExtractNonOnProps<TdMessageProps>;
+export type MessageEmits = TransformEventHandlers<TdMessageProps, true>;
+declare const MessageComponent: import('vue').DefineComponent<MessageProps, {}, {}, {}, {}, {}, {}, MessageEmits, any>;
+export default MessageComponent;
diff --git a/packages/tdesign-uniapp/components/types/navbar.d.ts b/packages/tdesign-uniapp/components/types/navbar.d.ts
new file mode 100644
index 000000000..f62ed4b75
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/navbar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdNavbarProps } from '../navbar/type';
+
+export type NavbarProps = ExtractNonOnProps<TdNavbarProps>;
+export type NavbarEmits = TransformEventHandlers<TdNavbarProps, true>;
+declare const NavbarComponent: import('vue').DefineComponent<NavbarProps, {}, {}, {}, {}, {}, {}, NavbarEmits, any>;
+export default NavbarComponent;
diff --git a/packages/tdesign-uniapp/components/types/notice-bar.d.ts b/packages/tdesign-uniapp/components/types/notice-bar.d.ts
new file mode 100644
index 000000000..c6a081ca8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/notice-bar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdNoticeBarProps } from '../notice-bar/type';
+
+export type NoticeBarProps = ExtractNonOnProps<TdNoticeBarProps>;
+export type NoticeBarEmits = TransformEventHandlers<TdNoticeBarProps, true>;
+declare const NoticeBarComponent: import('vue').DefineComponent<NoticeBarProps, {}, {}, {}, {}, {}, {}, NoticeBarEmits, any>;
+export default NoticeBarComponent;
diff --git a/packages/tdesign-uniapp/components/types/overlay.d.ts b/packages/tdesign-uniapp/components/types/overlay.d.ts
new file mode 100644
index 000000000..56512a8ad
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/overlay.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdOverlayProps } from '../overlay/type';
+
+export type OverlayProps = ExtractNonOnProps<TdOverlayProps>;
+export type OverlayEmits = TransformEventHandlers<TdOverlayProps, true>;
+declare const OverlayComponent: import('vue').DefineComponent<OverlayProps, {}, {}, {}, {}, {}, {}, OverlayEmits, any>;
+export default OverlayComponent;
diff --git a/packages/tdesign-uniapp/components/types/picker-item.d.ts b/packages/tdesign-uniapp/components/types/picker-item.d.ts
new file mode 100644
index 000000000..52540ac29
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/picker-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdPickerItemProps } from '../picker-item/type';
+
+export type PickerItemProps = ExtractNonOnProps<TdPickerItemProps>;
+export type PickerItemEmits = TransformEventHandlers<TdPickerItemProps, true>;
+declare const PickerItemComponent: import('vue').DefineComponent<PickerItemProps, {}, {}, {}, {}, {}, {}, PickerItemEmits, any>;
+export default PickerItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/picker.d.ts b/packages/tdesign-uniapp/components/types/picker.d.ts
new file mode 100644
index 000000000..9253fb652
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/picker.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdPickerProps } from '../picker/type';
+
+export type PickerProps = ExtractNonOnProps<TdPickerProps>;
+export type PickerEmits = TransformEventHandlers<TdPickerProps, true>;
+declare const PickerComponent: import('vue').DefineComponent<PickerProps, {}, {}, {}, {}, {}, {}, PickerEmits, any>;
+export default PickerComponent;
diff --git a/packages/tdesign-uniapp/components/types/popup.d.ts b/packages/tdesign-uniapp/components/types/popup.d.ts
new file mode 100644
index 000000000..971552958
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/popup.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdPopupProps } from '../popup/type';
+
+export type PopupProps = ExtractNonOnProps<TdPopupProps>;
+export type PopupEmits = TransformEventHandlers<TdPopupProps, true>;
+declare const PopupComponent: import('vue').DefineComponent<PopupProps, {}, {}, {}, {}, {}, {}, PopupEmits, any>;
+export default PopupComponent;
diff --git a/packages/tdesign-uniapp/components/types/progress.d.ts b/packages/tdesign-uniapp/components/types/progress.d.ts
new file mode 100644
index 000000000..1b3f40f11
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/progress.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdProgressProps } from '../progress/type';
+
+export type ProgressProps = ExtractNonOnProps<TdProgressProps>;
+export type ProgressEmits = TransformEventHandlers<TdProgressProps, true>;
+declare const ProgressComponent: import('vue').DefineComponent<ProgressProps, {}, {}, {}, {}, {}, {}, ProgressEmits, any>;
+export default ProgressComponent;
diff --git a/packages/tdesign-uniapp/components/types/pull-down-refresh.d.ts b/packages/tdesign-uniapp/components/types/pull-down-refresh.d.ts
new file mode 100644
index 000000000..9c55c0fe0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/pull-down-refresh.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdPullDownRefreshProps } from '../pull-down-refresh/type';
+
+export type PullDownRefreshProps = ExtractNonOnProps<TdPullDownRefreshProps>;
+export type PullDownRefreshEmits = TransformEventHandlers<TdPullDownRefreshProps, true>;
+declare const PullDownRefreshComponent: import('vue').DefineComponent<PullDownRefreshProps, {}, {}, {}, {}, {}, {}, PullDownRefreshEmits, any>;
+export default PullDownRefreshComponent;
diff --git a/packages/tdesign-uniapp/components/types/qrcode.d.ts b/packages/tdesign-uniapp/components/types/qrcode.d.ts
new file mode 100644
index 000000000..9aa1791b8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/qrcode.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdQrcodeProps } from '../qrcode/type';
+
+export type QrcodeProps = ExtractNonOnProps<TdQrcodeProps>;
+export type QrcodeEmits = TransformEventHandlers<TdQrcodeProps, true>;
+declare const QrcodeComponent: import('vue').DefineComponent<QrcodeProps, {}, {}, {}, {}, {}, {}, QrcodeEmits, any>;
+export default QrcodeComponent;
diff --git a/packages/tdesign-uniapp/components/types/radio-group.d.ts b/packages/tdesign-uniapp/components/types/radio-group.d.ts
new file mode 100644
index 000000000..443ae95c5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/radio-group.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdRadioGroupProps } from '../radio-group/type';
+
+export type RadioGroupProps = ExtractNonOnProps<TdRadioGroupProps>;
+export type RadioGroupEmits = TransformEventHandlers<TdRadioGroupProps, true>;
+declare const RadioGroupComponent: import('vue').DefineComponent<RadioGroupProps, {}, {}, {}, {}, {}, {}, RadioGroupEmits, any>;
+export default RadioGroupComponent;
diff --git a/packages/tdesign-uniapp/components/types/radio.d.ts b/packages/tdesign-uniapp/components/types/radio.d.ts
new file mode 100644
index 000000000..b0f7e2413
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/radio.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdRadioProps } from '../radio/type';
+
+export type RadioProps = ExtractNonOnProps<TdRadioProps>;
+export type RadioEmits = TransformEventHandlers<TdRadioProps, true>;
+declare const RadioComponent: import('vue').DefineComponent<RadioProps, {}, {}, {}, {}, {}, {}, RadioEmits, any>;
+export default RadioComponent;
diff --git a/packages/tdesign-uniapp/components/types/rate.d.ts b/packages/tdesign-uniapp/components/types/rate.d.ts
new file mode 100644
index 000000000..854e92d98
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/rate.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdRateProps } from '../rate/type';
+
+export type RateProps = ExtractNonOnProps<TdRateProps>;
+export type RateEmits = TransformEventHandlers<TdRateProps, true>;
+declare const RateComponent: import('vue').DefineComponent<RateProps, {}, {}, {}, {}, {}, {}, RateEmits, any>;
+export default RateComponent;
diff --git a/packages/tdesign-uniapp/components/types/result.d.ts b/packages/tdesign-uniapp/components/types/result.d.ts
new file mode 100644
index 000000000..6dfffd68c
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/result.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdResultProps } from '../result/type';
+
+export type ResultProps = ExtractNonOnProps<TdResultProps>;
+export type ResultEmits = TransformEventHandlers<TdResultProps, true>;
+declare const ResultComponent: import('vue').DefineComponent<ResultProps, {}, {}, {}, {}, {}, {}, ResultEmits, any>;
+export default ResultComponent;
diff --git a/packages/tdesign-uniapp/components/types/row.d.ts b/packages/tdesign-uniapp/components/types/row.d.ts
new file mode 100644
index 000000000..643a4c240
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/row.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdRowProps } from '../row/type';
+
+export type RowProps = ExtractNonOnProps<TdRowProps>;
+export type RowEmits = TransformEventHandlers<TdRowProps, true>;
+declare const RowComponent: import('vue').DefineComponent<RowProps, {}, {}, {}, {}, {}, {}, RowEmits, any>;
+export default RowComponent;
diff --git a/packages/tdesign-uniapp/components/types/search.d.ts b/packages/tdesign-uniapp/components/types/search.d.ts
new file mode 100644
index 000000000..690e749a4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/search.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSearchProps } from '../search/type';
+
+export type SearchProps = ExtractNonOnProps<TdSearchProps>;
+export type SearchEmits = TransformEventHandlers<TdSearchProps, true>;
+declare const SearchComponent: import('vue').DefineComponent<SearchProps, {}, {}, {}, {}, {}, {}, SearchEmits, any>;
+export default SearchComponent;
diff --git a/packages/tdesign-uniapp/components/types/side-bar-item.d.ts b/packages/tdesign-uniapp/components/types/side-bar-item.d.ts
new file mode 100644
index 000000000..6f3b541c4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/side-bar-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSideBarItemProps } from '../side-bar-item/type';
+
+export type SideBarItemProps = ExtractNonOnProps<TdSideBarItemProps>;
+export type SideBarItemEmits = TransformEventHandlers<TdSideBarItemProps, true>;
+declare const SideBarItemComponent: import('vue').DefineComponent<SideBarItemProps, {}, {}, {}, {}, {}, {}, SideBarItemEmits, any>;
+export default SideBarItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/side-bar.d.ts b/packages/tdesign-uniapp/components/types/side-bar.d.ts
new file mode 100644
index 000000000..ec124d112
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/side-bar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSideBarProps } from '../side-bar/type';
+
+export type SideBarProps = ExtractNonOnProps<TdSideBarProps>;
+export type SideBarEmits = TransformEventHandlers<TdSideBarProps, true>;
+declare const SideBarComponent: import('vue').DefineComponent<SideBarProps, {}, {}, {}, {}, {}, {}, SideBarEmits, any>;
+export default SideBarComponent;
diff --git a/packages/tdesign-uniapp/components/types/skeleton.d.ts b/packages/tdesign-uniapp/components/types/skeleton.d.ts
new file mode 100644
index 000000000..49ed61260
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/skeleton.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSkeletonProps } from '../skeleton/type';
+
+export type SkeletonProps = ExtractNonOnProps<TdSkeletonProps>;
+export type SkeletonEmits = TransformEventHandlers<TdSkeletonProps, true>;
+declare const SkeletonComponent: import('vue').DefineComponent<SkeletonProps, {}, {}, {}, {}, {}, {}, SkeletonEmits, any>;
+export default SkeletonComponent;
diff --git a/packages/tdesign-uniapp/components/types/slider.d.ts b/packages/tdesign-uniapp/components/types/slider.d.ts
new file mode 100644
index 000000000..2df159ebe
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/slider.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSliderProps } from '../slider/type';
+
+export type SliderProps = ExtractNonOnProps<TdSliderProps>;
+export type SliderEmits = TransformEventHandlers<TdSliderProps, true>;
+declare const SliderComponent: import('vue').DefineComponent<SliderProps, {}, {}, {}, {}, {}, {}, SliderEmits, any>;
+export default SliderComponent;
diff --git a/packages/tdesign-uniapp/components/types/step-item.d.ts b/packages/tdesign-uniapp/components/types/step-item.d.ts
new file mode 100644
index 000000000..64840c372
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/step-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdStepItemProps } from '../step-item/type';
+
+export type StepItemProps = ExtractNonOnProps<TdStepItemProps>;
+export type StepItemEmits = TransformEventHandlers<TdStepItemProps, true>;
+declare const StepItemComponent: import('vue').DefineComponent<StepItemProps, {}, {}, {}, {}, {}, {}, StepItemEmits, any>;
+export default StepItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/stepper.d.ts b/packages/tdesign-uniapp/components/types/stepper.d.ts
new file mode 100644
index 000000000..8c4497f03
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/stepper.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdStepperProps } from '../stepper/type';
+
+export type StepperProps = ExtractNonOnProps<TdStepperProps>;
+export type StepperEmits = TransformEventHandlers<TdStepperProps, true>;
+declare const StepperComponent: import('vue').DefineComponent<StepperProps, {}, {}, {}, {}, {}, {}, StepperEmits, any>;
+export default StepperComponent;
diff --git a/packages/tdesign-uniapp/components/types/steps.d.ts b/packages/tdesign-uniapp/components/types/steps.d.ts
new file mode 100644
index 000000000..117b80475
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/steps.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdStepsProps } from '../steps/type';
+
+export type StepsProps = ExtractNonOnProps<TdStepsProps>;
+export type StepsEmits = TransformEventHandlers<TdStepsProps, true>;
+declare const StepsComponent: import('vue').DefineComponent<StepsProps, {}, {}, {}, {}, {}, {}, StepsEmits, any>;
+export default StepsComponent;
diff --git a/packages/tdesign-uniapp/components/types/sticky.d.ts b/packages/tdesign-uniapp/components/types/sticky.d.ts
new file mode 100644
index 000000000..ed456ff75
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/sticky.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdStickyProps } from '../sticky/type';
+
+export type StickyProps = ExtractNonOnProps<TdStickyProps>;
+export type StickyEmits = TransformEventHandlers<TdStickyProps, true>;
+declare const StickyComponent: import('vue').DefineComponent<StickyProps, {}, {}, {}, {}, {}, {}, StickyEmits, any>;
+export default StickyComponent;
diff --git a/packages/tdesign-uniapp/components/types/swipe-cell.d.ts b/packages/tdesign-uniapp/components/types/swipe-cell.d.ts
new file mode 100644
index 000000000..aff05cd32
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/swipe-cell.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSwipeCellProps } from '../swipe-cell/type';
+
+export type SwipeCellProps = ExtractNonOnProps<TdSwipeCellProps>;
+export type SwipeCellEmits = TransformEventHandlers<TdSwipeCellProps, true>;
+declare const SwipeCellComponent: import('vue').DefineComponent<SwipeCellProps, {}, {}, {}, {}, {}, {}, SwipeCellEmits, any>;
+export default SwipeCellComponent;
diff --git a/packages/tdesign-uniapp/components/types/swiper-nav.d.ts b/packages/tdesign-uniapp/components/types/swiper-nav.d.ts
new file mode 100644
index 000000000..b15818e3d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/swiper-nav.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSwiperNavProps } from '../swiper-nav/type';
+
+export type SwiperNavProps = ExtractNonOnProps<TdSwiperNavProps>;
+export type SwiperNavEmits = TransformEventHandlers<TdSwiperNavProps, true>;
+declare const SwiperNavComponent: import('vue').DefineComponent<SwiperNavProps, {}, {}, {}, {}, {}, {}, SwiperNavEmits, any>;
+export default SwiperNavComponent;
diff --git a/packages/tdesign-uniapp/components/types/swiper.d.ts b/packages/tdesign-uniapp/components/types/swiper.d.ts
new file mode 100644
index 000000000..937fbb04f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/swiper.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSwiperProps } from '../swiper/type';
+
+export type SwiperProps = ExtractNonOnProps<TdSwiperProps>;
+export type SwiperEmits = TransformEventHandlers<TdSwiperProps, true>;
+declare const SwiperComponent: import('vue').DefineComponent<SwiperProps, {}, {}, {}, {}, {}, {}, SwiperEmits, any>;
+export default SwiperComponent;
diff --git a/packages/tdesign-uniapp/components/types/switch.d.ts b/packages/tdesign-uniapp/components/types/switch.d.ts
new file mode 100644
index 000000000..f9e492d89
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/switch.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdSwitchProps } from '../switch/type';
+
+export type SwitchProps = ExtractNonOnProps<TdSwitchProps>;
+export type SwitchEmits = TransformEventHandlers<TdSwitchProps, true>;
+declare const SwitchComponent: import('vue').DefineComponent<SwitchProps, {}, {}, {}, {}, {}, {}, SwitchEmits, any>;
+export default SwitchComponent;
diff --git a/packages/tdesign-uniapp/components/types/tab-bar-item.d.ts b/packages/tdesign-uniapp/components/types/tab-bar-item.d.ts
new file mode 100644
index 000000000..eb1737263
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tab-bar-item.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTabBarItemProps } from '../tab-bar-item/type';
+
+export type TabBarItemProps = ExtractNonOnProps<TdTabBarItemProps>;
+export type TabBarItemEmits = TransformEventHandlers<TdTabBarItemProps, true>;
+declare const TabBarItemComponent: import('vue').DefineComponent<TabBarItemProps, {}, {}, {}, {}, {}, {}, TabBarItemEmits, any>;
+export default TabBarItemComponent;
diff --git a/packages/tdesign-uniapp/components/types/tab-bar.d.ts b/packages/tdesign-uniapp/components/types/tab-bar.d.ts
new file mode 100644
index 000000000..060d0eb55
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tab-bar.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTabBarProps } from '../tab-bar/type';
+
+export type TabBarProps = ExtractNonOnProps<TdTabBarProps>;
+export type TabBarEmits = TransformEventHandlers<TdTabBarProps, true>;
+declare const TabBarComponent: import('vue').DefineComponent<TabBarProps, {}, {}, {}, {}, {}, {}, TabBarEmits, any>;
+export default TabBarComponent;
diff --git a/packages/tdesign-uniapp/components/types/tab-panel.d.ts b/packages/tdesign-uniapp/components/types/tab-panel.d.ts
new file mode 100644
index 000000000..d0dd9ef26
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tab-panel.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTabPanelProps } from '../tab-panel/type';
+
+export type TabPanelProps = ExtractNonOnProps<TdTabPanelProps>;
+export type TabPanelEmits = TransformEventHandlers<TdTabPanelProps, true>;
+declare const TabPanelComponent: import('vue').DefineComponent<TabPanelProps, {}, {}, {}, {}, {}, {}, TabPanelEmits, any>;
+export default TabPanelComponent;
diff --git a/packages/tdesign-uniapp/components/types/tabs.d.ts b/packages/tdesign-uniapp/components/types/tabs.d.ts
new file mode 100644
index 000000000..6211cee53
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tabs.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTabsProps } from '../tabs/type';
+
+export type TabsProps = ExtractNonOnProps<TdTabsProps>;
+export type TabsEmits = TransformEventHandlers<TdTabsProps, true>;
+declare const TabsComponent: import('vue').DefineComponent<TabsProps, {}, {}, {}, {}, {}, {}, TabsEmits, any>;
+export default TabsComponent;
diff --git a/packages/tdesign-uniapp/components/types/tag.d.ts b/packages/tdesign-uniapp/components/types/tag.d.ts
new file mode 100644
index 000000000..885005df2
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tag.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTagProps } from '../tag/type';
+
+export type TagProps = ExtractNonOnProps<TdTagProps>;
+export type TagEmits = TransformEventHandlers<TdTagProps, true>;
+declare const TagComponent: import('vue').DefineComponent<TagProps, {}, {}, {}, {}, {}, {}, TagEmits, any>;
+export default TagComponent;
diff --git a/packages/tdesign-uniapp/components/types/textarea.d.ts b/packages/tdesign-uniapp/components/types/textarea.d.ts
new file mode 100644
index 000000000..4efe274ea
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/textarea.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTextareaProps } from '../textarea/type';
+
+export type TextareaProps = ExtractNonOnProps<TdTextareaProps>;
+export type TextareaEmits = TransformEventHandlers<TdTextareaProps, true>;
+declare const TextareaComponent: import('vue').DefineComponent<TextareaProps, {}, {}, {}, {}, {}, {}, TextareaEmits, any>;
+export default TextareaComponent;
diff --git a/packages/tdesign-uniapp/components/types/toast.d.ts b/packages/tdesign-uniapp/components/types/toast.d.ts
new file mode 100644
index 000000000..3ccdff9e4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/toast.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdToastProps } from '../toast/type';
+
+export type ToastProps = ExtractNonOnProps<TdToastProps>;
+export type ToastEmits = TransformEventHandlers<TdToastProps, true>;
+declare const ToastComponent: import('vue').DefineComponent<ToastProps, {}, {}, {}, {}, {}, {}, ToastEmits, any>;
+export default ToastComponent;
diff --git a/packages/tdesign-uniapp/components/types/tree-select.d.ts b/packages/tdesign-uniapp/components/types/tree-select.d.ts
new file mode 100644
index 000000000..481faf4ac
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/tree-select.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdTreeSelectProps } from '../tree-select/type';
+
+export type TreeSelectProps = ExtractNonOnProps<TdTreeSelectProps>;
+export type TreeSelectEmits = TransformEventHandlers<TdTreeSelectProps, true>;
+declare const TreeSelectComponent: import('vue').DefineComponent<TreeSelectProps, {}, {}, {}, {}, {}, {}, TreeSelectEmits, any>;
+export default TreeSelectComponent;
diff --git a/packages/tdesign-uniapp/components/types/upload.d.ts b/packages/tdesign-uniapp/components/types/upload.d.ts
new file mode 100644
index 000000000..8b6c8a9e0
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/upload.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdUploadProps } from '../upload/type';
+
+export type UploadProps = ExtractNonOnProps<TdUploadProps>;
+export type UploadEmits = TransformEventHandlers<TdUploadProps, true>;
+declare const UploadComponent: import('vue').DefineComponent<UploadProps, {}, {}, {}, {}, {}, {}, UploadEmits, any>;
+export default UploadComponent;
diff --git a/packages/tdesign-uniapp/components/types/watermark.d.ts b/packages/tdesign-uniapp/components/types/watermark.d.ts
new file mode 100644
index 000000000..f2369bcd8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/types/watermark.d.ts
@@ -0,0 +1,7 @@
+import type { TransformEventHandlers, ExtractNonOnProps } from '../common/common';
+import type { TdWatermarkProps } from '../watermark/type';
+
+export type WatermarkProps = ExtractNonOnProps<TdWatermarkProps>;
+export type WatermarkEmits = TransformEventHandlers<TdWatermarkProps, true>;
+declare const WatermarkComponent: import('vue').DefineComponent<WatermarkProps, {}, {}, {}, {}, {}, {}, WatermarkEmits, any>;
+export default WatermarkComponent;
diff --git a/packages/tdesign-uniapp/components/upload/README.en-US.md b/packages/tdesign-uniapp/components/upload/README.en-US.md
new file mode 100644
index 000000000..f1a53d3d8
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/README.en-US.md
@@ -0,0 +1,63 @@
+:: BASE_DOC ::
+
+## API
+
+### Upload Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+add-btn | Boolean | true | \- | N
+add-content | String | - | \- | N
+allow-upload-duplicate-file | Boolean | false | allow to upload duplicate name files | N
+config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+disabled | Boolean | undefined | make upload to be disabled | N
+draggable | Boolean / Object | - | Typescript：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N
+files | Array | - | `v-model:files` is supported。Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+default-files | Array | - | uncontrolled property。Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+grid-config | Object | - | Typescript：`{column?: number;  width?: number; height?: number;}` | N
+gutter | Number | 16 | \- | N
+image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+max | Number | 0 | max count of files limit | N
+media-type | Array | ['image', 'video'] | Typescript：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+preview | Boolean | true | \- | N
+remove-btn | Boolean | true | \- | N
+request-method | Function | - | Typescript：`any` | N
+size-limit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+source | String | media | options: media/messageFile | N
+transition | Object | `{backTransition: true, duration: 300, timingFunction: 'ease'}` | Typescript：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+
+### Upload Events
+
+name | params | description
+-- | -- | --
+add | `(context: { files: MediaContext })` | \-
+click | `(context: { index: number; file: VideoContext \| ImageContext })` | \-
+complete | \- | \-
+drop | `(context: { files: MediaContext }) ` | \-
+fail | \- | \-
+remove | `(context: { index: number; file: UploadFile })` | \-
+select-change | `(context: { files: MediaContext[]; currentSelectedFiles: MediaContext[] })` | \-
+success | `(context: { files: MediaContext })` | [see more ts definition](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+
+### Upload Slots
+
+name | Description
+-- | --
+add-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-upload-add-bg-color | @bg-color-secondarycontainer | - 
+--td-upload-add-color | @text-color-placeholder | - 
+--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - 
+--td-upload-add-icon-disabled-color | @text-color-disabled | - 
+--td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-disabled-mask | rgba(0, 0.6) | - 
+--td-upload-drag-transition-duration | --td-upload-drag-transition-duration | - 
+--td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | - 
+--td-upload-drag-z-index | 999 | - 
+--td-upload-radius | @radius-default | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/upload/README.md b/packages/tdesign-uniapp/components/upload/README.md
new file mode 100644
index 000000000..1e06d4247
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/README.md
@@ -0,0 +1,116 @@
+---
+title: Upload 上传
+description: 用于相册读取或拉起拍照的图片上传功能。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TUpload from 'tdesign-uniapp/upload/upload.vue';
+```
+
+### 单选上传图片
+
+图片上传有两种方式：
+
+1 选择完所有图片之后，统一上传，因此选择完就直接展示
+
+2 每次选择图片都上传，展示每次上传图片的进度
+
+{{ single }}
+
+### 多选上传图片
+
+{{ multiple }}
+
+### 长按拖拽排序图片
+
+{{ drag }}
+
+### 加载状态
+
+支持多种状态：`loading`、`reload`、`failed`；
+
+其中 `loading` 还可以通过传入 `percent` 来区分是否展示进度。
+
+{{ status }}
+
+### 从聊天记录上选
+
+使用 `wx.chooseMessageFile` 实现，需要基础版本库 `2.5.0+`
+
+{{ messageFile }}
+
+## FAQ
+
+### 为什么 `Upload` 外层使用 `display: flex` 时会造成组件样式混乱？
+
+`Upload` 是基于 `TGrid` 宫格实现，当外层使用 `display: flex` ，子元素会默认加上 `flex-grow: 0`，造成 `Upload` 组件整体宽度不足。可以通过给 `Upload` 组件节点加上 `flex-grow: 1` 处理。
+ 
+
+## API
+
+### Upload Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+add-btn | Boolean | true | 添加按钮 | N
+add-content | String | - | 添加按钮内容 | N
+allow-upload-duplicate-file | Boolean | false | 是否允许重复上传相同文件名的文件 | N
+config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。TS 类型：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N
+files | Array | - | 已上传文件列表。支持语法糖 `v-model:files`。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+default-files | Array | - | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+grid-config | Object | - | upload组件每行上传图片列数以及图片的宽度和高度。TS 类型：`{column?: number;  width?: number; height?: number;}` | N
+gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N
+image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
+media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+preview | Boolean | true | 是否支持图片预览，文件没有预览 | N
+remove-btn | Boolean | true | 移除按钮 | N
+request-method | Function | - | 自定义上传方法。TS 类型：`any` | N
+size-limit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+source | String | media | 来源。可选项：media/messageFile | N
+transition | Object | `{backTransition: true, duration: 300, timingFunction: 'ease'}` | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts) | N
+
+### Upload Events
+
+名称 | 参数 | 描述
+-- | -- | --
+add | `(context: { files: MediaContext })` | 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+click | `(context: { index: number; file: VideoContext \| ImageContext })` | 点击已选文件时触发；常用于重新上传
+complete | \- | 上传成功或失败后触发
+drop | `(context: { files: MediaContext }) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+fail | \- | 上传失败后触发
+remove | `(context: { index: number; file: UploadFile })` | 移除文件时触发
+select-change | `(context: { files: MediaContext[]; currentSelectedFiles: MediaContext[] })` | 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
+success | `(context: { files: MediaContext })` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+
+### Upload Slots
+
+名称 | 描述
+-- | --
+add-content | 自定义 `add-content` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-upload-add-bg-color | @bg-color-secondarycontainer | - 
+--td-upload-add-color | @text-color-placeholder | - 
+--td-upload-add-disabled-bg-color | @bg-color-component-disabled | - 
+--td-upload-add-icon-disabled-color | @text-color-disabled | - 
+--td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-disabled-mask | rgba(0, 0.6) | - 
+--td-upload-drag-transition-duration | --td-upload-drag-transition-duration | - 
+--td-upload-drag-transition-timing-function | --td-upload-drag-transition-timing-function | - 
+--td-upload-drag-z-index | 999 | - 
+--td-upload-radius | @radius-default | -
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/upload/_example/drag/index.vue b/packages/tdesign-uniapp/components/upload/_example/drag/index.vue
new file mode 100644
index 000000000..b488f5fc5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/drag/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <view class="wrapper">
+    <t-upload
+      draggable
+      :media-type="['video', 'image']"
+      :files="originFiles"
+      :grid-config="gridConfig"
+      @success="handleSuccess"
+      @remove="handleRemove"
+      @click="handleClick"
+      @drop="handleDrop"
+    />
+  </view>
+</template>
+
+<script>
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+export default {
+  components: {
+    tUpload,
+  },
+  data() {
+    return {
+      originFiles: [
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+          name: 'uploaded1.png',
+          type: 'image',
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
+          name: 'uploaded2.png',
+          type: 'image',
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
+          name: 'uploaded3.png',
+          type: 'image',
+        },
+      ],
+      gridConfig: {
+        column: 4,
+        width: 160,
+        height: 160,
+      },
+      config: {
+        count: 1,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleSuccess(e) {
+      const { files } = e;
+      this.originFiles = files;
+    },
+    handleRemove(e) {
+      const { index } = e;
+      const { originFiles } = this;
+      originFiles.splice(index, 1);
+      this.originFiles = originFiles;
+    },
+    handleClick(e) {
+      console.log(e.file);
+    },
+    handleDrop(e) {
+      const { files } = e;
+      this.originFiles = files;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/_example/messageFile/index.vue b/packages/tdesign-uniapp/components/upload/_example/messageFile/index.vue
new file mode 100644
index 000000000..620d2215a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/messageFile/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <view class="wrapper">
+    <t-upload
+      :media-type="['video', 'image']"
+      :files="originFiles"
+      :grid-config="gridConfig"
+      :config="config"
+      source="messageFile"
+      @success="handleSuccess"
+      @remove="handleRemove"
+    />
+  </view>
+</template>
+
+<script>
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+export default {
+  components: {
+    tUpload,
+  },
+  data() {
+    return {
+      originFiles: [
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+          name: 'uploaded1.png',
+          type: 'image',
+        },
+      ],
+      gridConfig: {
+        column: 4,
+        width: 160,
+        height: 160,
+      },
+      config: {
+        count: 1,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleSuccess(e) {
+      const { files } = e;
+      this.originFiles = files;
+    },
+    handleRemove(e) {
+      const { index } = e;
+      const { originFiles } = this;
+      originFiles.splice(index, 1);
+      this.originFiles = originFiles;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/_example/multiple/index.vue b/packages/tdesign-uniapp/components/upload/_example/multiple/index.vue
new file mode 100644
index 000000000..205cb9720
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/multiple/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <view class="wrapper">
+    <t-upload
+      :media-type="['video', 'image']"
+      :files="originFiles"
+      :grid-config="gridConfig"
+      :remove-btn="false"
+      @success="handleSuccess"
+      @remove="handleRemove"
+      @click="handleClick"
+      @sort-end="handleSortEnd"
+    />
+  </view>
+</template>
+
+<script>
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+export default {
+  components: {
+    tUpload,
+  },
+  data() {
+    return {
+      originFiles: [
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+          name: 'uploaded1.png',
+          type: 'image',
+          removeBtn: true,
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
+          name: 'uploaded2.png',
+          type: 'image',
+          removeBtn: true,
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
+          name: 'uploaded3.png',
+          type: 'image',
+          removeBtn: true,
+        },
+      ],
+      gridConfig: {
+        column: 4,
+        width: 160,
+        height: 160,
+      },
+      config: {
+        count: 1,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleSuccess(e) {
+      const { files } = e;
+      this.originFiles = files;
+    },
+
+    handleRemove(e) {
+      const { index } = e;
+      const { originFiles } = this;
+      originFiles.splice(index, 1);
+      this.originFiles = originFiles;
+    },
+
+    handleClick(e) {
+      console.log(e.file);
+    },
+
+    handleSortEnd() {
+      console.log('占位：函数 handleSortEnd 未声明');
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/_example/single/index.vue b/packages/tdesign-uniapp/components/upload/_example/single/index.vue
new file mode 100644
index 000000000..cbc335038
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/single/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <view class="wrapper">
+    <t-upload
+      :disabled="false"
+      :media-type="['video', 'image']"
+      :max="1"
+      :files="fileList"
+      @add="handleAdd"
+      @remove="handleRemove"
+    />
+  </view>
+</template>
+
+<script>
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+export default {
+  components: {
+    tUpload,
+  },
+  data() {
+    return {
+      fileList: [],
+    };
+  },
+  created() {},
+  methods: {
+    handleAdd(e) {
+      const { fileList } = this;
+      console.log('add: ', e);
+      const { files } = e;
+
+      // 方法1：选择完所有图片之后，统一上传，因此选择完就直接展示
+      this.fileList = [...fileList, ...files]; // 此时设置了 fileList 之后才会展示选择的图片
+
+      // 方法2：每次选择图片都上传，展示每次上传图片的进度
+      // files.forEach(file => this.uploadFile(file))
+    },
+    onUpload(file) {
+      const { fileList } = this;
+      this.fileList = [
+        ...fileList,
+        {
+          ...file,
+          status: 'loading',
+        },
+      ];
+
+      console.log('onUpload', file);
+      const { length } = fileList;
+      const task = uni.uploadFile({
+        url: 'https://example.weixin.qq.com/upload',
+        // 仅为示例，非真实的接口地址
+        filePath: file.url,
+        name: 'file',
+        formData: {
+          user: 'test',
+        },
+        success: () => {
+          this[`fileList[${length}].status`] = 'done';
+        },
+      });
+      task.onProgressUpdate((res) => {
+        this[`fileList[${length}].percent`] = res.progress;
+      });
+    },
+    handleRemove(e) {
+      const { index } = e;
+      const { fileList } = this;
+      fileList.splice(index, 1);
+      this.fileList = fileList;
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/_example/status/index.vue b/packages/tdesign-uniapp/components/upload/_example/status/index.vue
new file mode 100644
index 000000000..e5802f71a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/status/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <view class="wrapper">
+    <t-upload
+      :media-type="['video', 'image']"
+      :files="originFiles"
+      :grid-config="gridConfig"
+      @success="handleSuccess"
+      @remove="handleRemove"
+      @click="handleClick"
+    />
+  </view>
+</template>
+
+<script>
+import tUpload from 'tdesign-uniapp/upload/upload.vue';
+export default {
+  components: {
+    tUpload,
+  },
+  data() {
+    return {
+      originFiles: [
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
+          name: 'uploaded1.png',
+          type: 'image',
+          status: 'loading',
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
+          name: 'uploaded2.png',
+          type: 'image',
+          percent: 68,
+          status: 'loading',
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
+          name: 'uploaded3.png',
+          type: 'image',
+          status: 'reload',
+        },
+        {
+          url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
+          name: 'uploaded4.png',
+          type: 'image',
+          status: 'failed',
+        },
+      ],
+      gridConfig: {
+        column: 4,
+        width: 160,
+        height: 160,
+      },
+      config: {
+        count: 1,
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleSuccess(e) {
+      const { files } = e;
+      this.originFiles = files;
+    },
+    handleRemove(e) {
+      const { index } = e;
+      const { originFiles } = this;
+      originFiles.splice(index, 1);
+      this.originFiles = originFiles;
+    },
+    handleClick(e) {
+      console.log(e.file);
+    },
+  },
+};
+</script>
+<style>
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/_example/upload.less b/packages/tdesign-uniapp/components/upload/_example/upload.less
new file mode 100644
index 000000000..e12f9c015
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/upload.less
@@ -0,0 +1,11 @@
+.upload-demo {
+    background-color: var(--bg-color-demo);
+    box-sizing: border-box;
+    padding: 32rpx;
+
+    &__title {
+        font-size: 32rpx;
+        color: var(--td-text-color-primary);
+        padding-bottom: 32rpx;
+    }
+}
diff --git a/packages/tdesign-uniapp/components/upload/_example/upload.vue b/packages/tdesign-uniapp/components/upload/_example/upload.vue
new file mode 100644
index 000000000..93247bd0d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/_example/upload.vue
@@ -0,0 +1,110 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Upload"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Upload 上传"
+        notice="渲染框架支持情况：WebView"
+      >
+        <template
+          #desc
+        >
+          <view>
+            用于相册读取或拉起拍照的图片上传功能。
+            <text style="color: var(--td-brand-color)">
+              <!-- （为避免涉及用户隐私，Upload 组件示例均为禁用态，使用时请自行取消禁用态，以便正常使用上传功能。） -->
+              （以下上传仅为示意）
+            </text>
+          </view>
+        </template>
+      </t-demo-header>
+      <t-demo
+        title="01 组件类型"
+        desc="单选上传图片"
+      >
+        <view class="upload-demo">
+          <view class="upload-demo__title">
+            上传图片
+          </view>
+          <single />
+        </view>
+      </t-demo>
+      <t-demo
+        title=""
+        desc="多选上传图片"
+      >
+        <view class="upload-demo">
+          <view class="upload-demo__title">
+            上传图片
+          </view>
+          <multiple />
+        </view>
+      </t-demo>
+      <t-demo
+        title=""
+        desc="长按拖拽排序图片"
+      >
+        <view class="upload-demo">
+          <view class="upload-demo__title">
+            上传图片
+          </view>
+          <drag />
+        </view>
+      </t-demo>
+      <t-demo
+        title="02 组件状态"
+        desc="加载状态"
+      >
+        <view class="upload-demo">
+          <view class="upload-demo__title">
+            上传图片
+          </view>
+          <status />
+        </view>
+      </t-demo>
+      <!-- #ifdef MP-WEIXIN -->
+      <t-demo
+        title=""
+        desc="从聊天记录上选"
+      >
+        <view class="upload-demo">
+          <view class="upload-demo__title">
+            上传图片
+          </view>
+          <messageFile />
+        </view>
+      </t-demo>
+      <!-- #endif -->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+
+import single from './single/index.vue';
+import multiple from './multiple/index.vue';
+import status from './status/index.vue';
+import messageFile from './messageFile/index.vue';
+import drag from './drag/index.vue';
+export default {
+  components: {
+    single,
+    multiple,
+    status,
+    messageFile,
+    drag,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less">
+@import './upload.less';
+</style>
diff --git a/packages/tdesign-uniapp/components/upload/drag.computed.js b/packages/tdesign-uniapp/components/upload/drag.computed.js
new file mode 100644
index 000000000..83022fcb3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/drag.computed.js
@@ -0,0 +1,225 @@
+/* eslint-disable no-plusplus */
+let classPrefix = '';
+let startIndex = 0;
+let endIndex = 0;
+let dragCollisionList = [];
+
+const isOutRange = function (x1, y1, x2, y2, x3, y3) {
+  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3;
+};
+
+const sortCore = function (sKey, eKey, st) {
+  const _ = st.dragBaseData;
+
+  const excludeFix = function (cKey, type) {
+    if (st.list[cKey].fixed) {
+      // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷
+      type ? --cKey : ++cKey;
+      return excludeFix(cKey, type);
+    }
+    return cKey;
+  };
+
+  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
+  let endRealKey = -1;
+  st.list.forEach((item) => {
+    if (item.sortKey === eKey) endRealKey = item.realKey;
+  });
+
+  return st.list.map((item) => {
+    if (item.fixed) return item;
+    let cKey = item.sortKey;
+    let rKey = item.realKey;
+
+    if (sKey < eKey) {
+      // 正序拖动
+      if (cKey > sKey && cKey <= eKey) {
+        --rKey;
+        cKey = excludeFix(--cKey, true);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    } else if (sKey > eKey) {
+      // 倒序拖动
+      if (cKey >= eKey && cKey < sKey) {
+        ++rKey;
+        cKey = excludeFix(++cKey, false);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    }
+
+    if (item.sortKey !== cKey) {
+      item.tranX = `${(cKey % _.columns) * 100}%`;
+      item.tranY = `${Math.floor(cKey / _.columns) * 100}%`;
+      item.sortKey = cKey;
+      item.realKey = rKey;
+    }
+    return item;
+  });
+};
+
+function triggerCustomEvent(list, type, ins) {
+  const _list = [];
+  const listData = [];
+
+  list.forEach((item) => {
+    _list[item.sortKey] = item;
+  });
+
+  _list.forEach((item) => {
+    if (!item.extraNode) {
+      listData.push(item.data);
+    }
+  });
+
+  ins.$emit(type, { listData });
+}
+
+export function longPress(event, index) {
+  const st = this.getState();
+  const _ = st.dragBaseData;
+
+  const sTouch = event.changedTouches[0];
+  if (!sTouch) return;
+
+  st.cur = index;
+
+  // compile error
+  // longPressIndex = st.cur;
+
+  // 初始项是固定项则返回
+  const item = st.list[st.cur];
+  if (item && item.fixed) return;
+
+  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
+  if (st.dragging) return;
+  st.dragging = true;
+  this.callMethod('dragStatusChange', { dragging: true });
+
+  // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移
+  st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+  st.sId = sTouch.identifier;
+  this.setDragItemStyle(index, `transform: translate3d(${st.tranX}px, ${st.tranY}px, 0)`);
+
+  st.list.forEach((item, index) => {
+    this.setDragItemClass(index, 'remove', [`${classPrefix}__drag--tran`, `${classPrefix}__drag--cur`]);
+    this.setDragItemClass(index, 'add', index === st.cur ? `${classPrefix}__drag--cur` : `${classPrefix}__drag--tran`);
+  });
+  this.callMethod('dragVibrate', { vibrateType: 'longPress' });
+}
+
+export function touchMove(event, index) {
+  // const ins = event.instance;
+  const st = this.getState();
+  const _ = st.dragBaseData;
+
+  const mTouch = event.changedTouches[0];
+  if (!mTouch) return;
+
+  if (!st.dragging) return;
+
+  // 如果不是同一个触发点则返回
+  if (st.sId !== mTouch.identifier) return;
+
+  // 计算X,Y轴位移, 单列时候X轴初始不做位移
+  const tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  const tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+
+  // 到顶到底自动滑动
+  if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) {
+    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
+    this.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize),
+    });
+  } else if (mTouch.clientY < _.itemHeight + _.realTopSize) {
+    // 当前触摸点pageY - item高度 - 顶部固定区域高度
+    this.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize,
+    });
+  }
+
+  // 设置当前激活元素偏移量
+  this.setDragItemStyle(index, `transform: translate3d(${tranX}px, ${tranY}px, 0)`);
+
+  const startKey = st.list[st.cur].sortKey;
+  const curX = Math.round(tranX / _.itemWidth);
+  const curY = Math.round(tranY / _.itemHeight);
+  const endKey = curX + _.columns * curY;
+
+  // 目标项是固定项则返回
+  const item = st.list[endKey];
+  if (item && item.fixed) return;
+
+  // X轴或Y轴超出范围则返回
+  if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return;
+
+  // 防止拖拽过程中发生乱序问题
+  if (startKey === endKey || startKey === st.preStartKey) return;
+  st.preStartKey = startKey;
+
+  dragCollisionList = sortCore(startKey, endKey, st);
+  startIndex = startKey;
+  endIndex = endKey;
+  st.list.forEach((_, index) => {
+    const item = dragCollisionList[index];
+    if (index !== st.cur) {
+      this.setDragItemStyle(index, `transform: translate3d(${item.tranX},${item.tranY}, 0)`);
+    }
+  });
+
+  this.callMethod('dragVibrate', { vibrateType: 'touchMove' });
+  this.callMethod('dragCollision', {
+    dragCollisionList,
+    startIndex,
+    endIndex,
+  });
+  triggerCustomEvent(dragCollisionList, 'change', this);
+}
+
+export function touchEnd(event, index) {
+  const st = this.getState();
+
+  if (!st.dragging) return;
+  triggerCustomEvent(st.list, 'sortend', this);
+
+  this.setDragItemClass(index, 'add', `${classPrefix}__drag--tran`);
+  this.setDragItemStyle(index, `transform: translate3d(${st.list[st.cur].tranX},${st.list[st.cur].tranY}, 0)`);
+
+  st.preStartKey = -1;
+  st.dragging = false;
+  this.callMethod('dragStatusChange', { dragging: false });
+  this.callMethod('dragEnd', {
+    dragCollisionList,
+    startIndex,
+    endIndex,
+  });
+  st.cur = -1;
+  st.tranX = 0;
+  st.tranY = 0;
+}
+
+export function baseDataObserver(newVal) {
+  if (newVal === undefined) return;
+
+  const st = this.getState();
+  st.dragBaseData = newVal;
+  classPrefix = newVal.classPrefix;
+}
+
+export function listObserver(newVal) {
+  if (newVal === undefined) return;
+
+  const st = this.getState();
+
+  st.list = newVal || [];
+  st.list.forEach((item, index) => {
+    this.setDragItemClass(index, 'remove', `${classPrefix}__drag--tran`);
+    this.setDragItemStyle(index,  `transform: translate3d(${item.tranX},${item.tranY}, 0)`);
+    if (item.fixed) this.setDragItemClass(index, 'add', `${classPrefix}__drag--fixed`);
+  });
+  dragCollisionList = [];
+}
diff --git a/packages/tdesign-uniapp/components/upload/props.ts b/packages/tdesign-uniapp/components/upload/props.ts
new file mode 100644
index 000000000..fda01a316
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/props.ts
@@ -0,0 +1,136 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdUploadProps } from './type';
+export default {
+  /** 添加按钮 */
+  addBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 添加按钮内容 */
+  addContent: {
+    type: String,
+  },
+  /** 是否允许重复上传相同文件名的文件 */
+  allowUploadDuplicateFile: Boolean,
+  /** 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html) */
+  config: {
+    type: Object,
+  },
+  /** 是否禁用组件 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }` */
+  draggable: {
+    type: [Boolean, Object],
+  },
+  /** 已上传文件列表 */
+  files: {
+    type: Array,
+  },
+  /** 已上传文件列表，非受控属性 */
+  defaultFiles: {
+    type: Array,
+  },
+  /** upload组件每行上传图片列数以及图片的宽度和高度 */
+  gridConfig: {
+    type: Object,
+  },
+  /** 预览窗格的 `gutter` 大小，单位 rpx */
+  gutter: {
+    type: Number,
+    default: 16,
+  },
+  /** 透传 Image 组件全部属性 */
+  imageProps: {
+    type: Object,
+  },
+  /** 用于控制文件上传数量，值为 0 则不限制 */
+  max: {
+    type: Number,
+    default: 0,
+  },
+  /** 支持上传的文件类型，图片或视频 */
+  mediaType: {
+    type: Array,
+    default: ['image', 'video'],
+  },
+  /** 是否支持图片预览，文件没有预览 */
+  preview: {
+    type: Boolean,
+    default: true,
+  },
+  /** 移除按钮 */
+  removeBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 自定义上传方法 */
+  requestMethod: {
+    type: Function,
+  },
+  /** 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */
+  sizeLimit: {
+    type: [Number, Object],
+  },
+  /** 来源 */
+  source: {
+    type: String,
+    default: 'media' as TdUploadProps['source'],
+    validator(val: TdUploadProps['source']): boolean {
+      if (!val) return true;
+      return ['media', 'messageFile'].includes(val);
+    },
+  },
+  /** 拖拽位置移动时的过渡参数,`duration`单位为ms */
+  transition: {
+    type: Object,
+    default: () => ({ backTransition: true, duration: 300, timingFunction: 'ease' }),
+  },
+  /** 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onAdd: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击已选文件时触发；常用于重新上传 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传成功或失败后触发 */
+  onComplete: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onDrop: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传失败后触发 */
+  onFail: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 移除文件时触发 */
+  onRemove: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表 */
+  onSelectChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 */
+  onSuccess: {
+    type: Function,
+    default: () => ({}),
+  },
+};
diff --git a/packages/tdesign-uniapp/components/upload/type.ts b/packages/tdesign-uniapp/components/upload/type.ts
new file mode 100644
index 000000000..0c800c0a5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/type.ts
@@ -0,0 +1,197 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdImageProps as ImageProps } from '../image/type';
+
+export interface TdUploadProps {
+  /**
+   * 添加按钮
+   * @default true
+   */
+  addBtn?: boolean;
+  /**
+   * 添加按钮内容
+   */
+  addContent?: string;
+  /**
+   * 是否允许重复上传相同文件名的文件
+   * @default false
+   */
+  allowUploadDuplicateFile?: boolean;
+  /**
+   * 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)
+   */
+  config?: UploadMpConfig;
+  /**
+   * 是否禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`
+   */
+  draggable?: boolean | { vibrate?: boolean; collisionVibrate?: boolean };
+  /**
+   * 已上传文件列表
+   */
+  files?: Array<UploadFile>;
+  /**
+   * 已上传文件列表，非受控属性
+   */
+  defaultFiles?: Array<UploadFile>;
+  /**
+   * upload组件每行上传图片列数以及图片的宽度和高度
+   */
+  gridConfig?: { column?: number; width?: number; height?: number };
+  /**
+   * 预览窗格的 `gutter` 大小，单位 rpx
+   * @default 16
+   */
+  gutter?: number;
+  /**
+   * 透传 Image 组件全部属性
+   */
+  imageProps?: ImageProps;
+  /**
+   * 用于控制文件上传数量，值为 0 则不限制
+   * @default 0
+   */
+  max?: number;
+  /**
+   * 支持上传的文件类型，图片或视频
+   * @default ['image', 'video']
+   */
+  mediaType?: Array<MediaType>;
+  /**
+   * 是否支持图片预览，文件没有预览
+   * @default true
+   */
+  preview?: boolean;
+  /**
+   * 移除按钮
+   * @default true
+   */
+  removeBtn?: boolean;
+  /**
+   * 自定义上传方法
+   */
+  requestMethod?: any;
+  /**
+   * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`
+   */
+  sizeLimit?: number | SizeLimitObj;
+  /**
+   * 来源
+   * @default media
+   */
+  source?: 'media' | 'messageFile';
+  /**
+   * 拖拽位置移动时的过渡参数,`duration`单位为ms
+   * @default `{backTransition: true, duration: 300, timingFunction: 'ease'}`
+   */
+  transition?: Transition;
+  /**
+   * 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onAdd?: (context: { files: MediaContext }) => void;
+  /**
+   * 点击已选文件时触发；常用于重新上传
+   */
+  onClick?: (context: { index: number; file: VideoContext | ImageContext }) => void;
+  /**
+   * 上传成功或失败后触发
+   */
+  onComplete?: () => void;
+  /**
+   * 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onDrop?: (context: { files: MediaContext }) => void;
+  /**
+   * 上传失败后触发
+   */
+  onFail?: () => void;
+  /**
+   * 移除文件时触发
+   */
+  onRemove?: (context: { index: number; file: UploadFile }) => void;
+  /**
+   * 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
+   */
+  onSelectChange?: (context: { files: MediaContext[]; currentSelectedFiles: MediaContext[] }) => void;
+  /**
+   * 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述
+   */
+  onSuccess?: (context: { files: MediaContext }) => void;
+}
+
+export type UploadMpConfig = ImageConfig | VideoConfig;
+
+export interface ImageConfig {
+  count?: number;
+  sizeType?: Array<SizeTypeValues>;
+  sourceType?: Array<SourceTypeValues>;
+}
+
+export type SizeTypeValues = 'original' | 'compressed';
+
+export type SourceTypeValues = 'album' | 'camera';
+
+export interface VideoConfig {
+  sourceType?: Array<SourceTypeValues>;
+  compressed?: boolean;
+  maxDuration?: number;
+  camera?: 'back' | 'front';
+}
+
+export interface UploadFile {
+  url: string;
+  name?: string;
+  size?: number;
+  type?: 'image' | 'video';
+  percent?: number;
+  status: 'loading' | 'reload' | 'failed' | 'done';
+}
+
+export type MediaType = 'image' | 'video';
+
+export interface SizeLimitObj {
+  size: number;
+  unit: SizeUnit;
+  message?: string;
+}
+
+export type SizeUnitArray = ['B', 'KB', 'MB', 'GB'];
+
+export type SizeUnit = SizeUnitArray[number];
+
+export interface Transition {
+  backTransition?: boolean;
+  duration?: number;
+  timingFunction?: string;
+}
+
+export type MediaContext = VideoContext[] | ImageContext[];
+
+export interface VideoContext {
+  name?: string;
+  type?: string;
+  url?: string;
+  duration?: number;
+  size?: number;
+  width?: number;
+  height?: number;
+  thumb: string;
+  progress: number;
+}
+
+export interface ImageContext {
+  name: string;
+  type: string;
+  url: string;
+  size: number;
+  width: number;
+  height: number;
+  progress: number;
+}
diff --git a/packages/tdesign-uniapp/components/upload/upload.computed.js b/packages/tdesign-uniapp/components/upload/upload.computed.js
new file mode 100644
index 000000000..e510763e4
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/upload.computed.js
@@ -0,0 +1,13 @@
+export function getWrapperAriaRole(file) {
+  return file.status && file.status != 'done' ? 'text' : 'button';
+}
+
+export function getWrapperAriaLabel(file) {
+  if (file.status && file.status != 'done') {
+    if (file.status == 'loading') {
+      return file.percent ? `上传中:${file.percent}%` : '上传中';
+    }
+    return file.status == 'reload' ? '重新上传' : '上传失败';
+  }
+  return file.type === 'video' ? '视频' : '图像';
+}
diff --git a/packages/tdesign-uniapp/components/upload/upload.less b/packages/tdesign-uniapp/components/upload/upload.less
new file mode 100644
index 000000000..8b6bcb0a9
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/upload.less
@@ -0,0 +1,146 @@
+@import '../common/style/base.less';
+
+@upload-add-color: var(--td-upload-add-color, @text-color-placeholder);
+@upload-add-bg-color: var(--td-upload-add-bg-color, @bg-color-secondarycontainer);
+@upload-add-disabled-bg-color: var(--td-upload-add-disabled-bg-color, @bg-color-component-disabled);
+@upload-radius: var(--td-upload-radius, @radius-default);
+@upload-add-icon-font-size: var(--td-upload-add-icon-font-size, 56rpx);
+@upload-add-icon-disabled-color: var(--td-upload-add-icon-disabled-color, @text-color-disabled);
+@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(0, 0.6));
+@upload-drag-z-index: var(--td-upload-drag-z-index, 999);
+
+.@{prefix}-upload {
+  position: relative;
+  :deep(&__grid) {
+    &-content {
+      padding: 0;
+    }
+
+    &-file {
+      position: relative;
+    }
+  }
+
+  &__add-icon {
+    width: 100%;
+    height: 100%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: @upload-add-icon-font-size;
+    background-color: @upload-add-bg-color;
+    color: @upload-add-color;
+    border-radius: @upload-radius;
+
+    &--disabled {
+      background-color: @upload-add-disabled-bg-color;
+      color: @upload-add-icon-disabled-color;
+    }
+
+    &:only-child {
+      display: flex;
+    }
+  }
+
+  :deep(&__thumbnail) {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+  &__wrapper {
+    position: relative;
+    border-radius: @upload-radius;
+    overflow: hidden;
+
+    &--disabled::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: @upload-disabled-mask;
+      z-index: 1;
+    }
+  }
+
+  &__close-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 40rpx;
+    border-top-right-radius: @upload-radius;
+    border-bottom-left-radius: @upload-radius;
+    background-color: @font-gray-3;
+  }
+
+  &__progress {
+    &-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: @font-gray-2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border-radius: @upload-radius;
+      color: @text-color-anti;
+      padding: 32rpx 0;
+      box-sizing: border-box;
+    }
+
+    &-text {
+      font-size: 24rpx;
+      line-height: 40rpx;
+      margin-top: 8rpx;
+    }
+
+    :deep(&-loading) {
+      animation: spin infinite linear 0.6s;
+    }
+  }
+
+  &__drag {
+    position: relative;
+    width: 100%;
+    --td-grid-item-bg-color: transparent;
+
+    &-item {
+      position: absolute;
+      z-index: 1;
+      top: 0px;
+      left: 0px;
+      height: auto;
+      width: 100%;
+    }
+    &--fixed {
+      z-index: 0;
+    }
+    &--tran {
+      transition-property: transform;
+      transition-duration: var(--td-upload-drag-transition-duration);
+      transition-timing-function: var(--td-upload-drag-transition-timing-function);
+    }
+    &--cur {
+      z-index: @upload-drag-z-index;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/upload/upload.vue b/packages/tdesign-uniapp/components/upload/upload.vue
new file mode 100644
index 000000000..a0fd442ef
--- /dev/null
+++ b/packages/tdesign-uniapp/components/upload/upload.vue
@@ -0,0 +1,880 @@
+<template>
+  <view
+    :style="_._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+  >
+    <t-grid
+      :gutter="gutter"
+      :border="false"
+      align="center"
+      :column="column"
+      :custom-style="draggable ? 'overflow: visible' : ''"
+    >
+      <block v-if="!dragLayout">
+        <t-grid-item
+          v-for="(file, index) in customFiles"
+          :key="index"
+          :t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
+          :t-class-content="classPrefix + '__grid-content'"
+          aria-role="presentation"
+        >
+          <view
+            :class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
+            :style="gridItemStyle"
+            :aria-role="ariaRole || getWrapperAriaRole(file)"
+            :aria-label="ariaLabel || getWrapperAriaLabel(file)"
+          >
+            <t-image
+              v-if="file.type !== 'video'"
+              :data-file="file"
+              :data-index="index"
+              :t-class="classPrefix + '__thumbnail'"
+              :custom-style="(imageProps && imageProps.style) || ''"
+              :src="file.thumb || file.url"
+              :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+              :error="(imageProps && imageProps.error) || 'default'"
+              :lazy="(imageProps && imageProps.lazy) || false"
+              :loading="(imageProps && imageProps.loading) || 'default'"
+              :shape="(imageProps && imageProps.shape) || 'round'"
+              :webp="(imageProps && imageProps.webp) || false"
+              :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
+              @click="onPreview($event, { file, index })"
+            />
+            <video
+              v-if="file.type === 'video'"
+              :class="classPrefix + '__thumbnail'"
+              :src="file.url"
+              :poster="file.thumb"
+              controls
+              :autoplay="false"
+              objectFit="contain"
+              :data-file="file"
+              @click.stop="onFileClick"
+            />
+            <view
+              v-if="file.status && file.status != 'done'"
+              :class="classPrefix + '__progress-mask'"
+              :data-index="index"
+              :data-file="file"
+              @click.stop="onFileClick"
+            >
+              <block v-if="file.status == 'loading'">
+                <t-icon
+                  :t-class="classPrefix + '__progress-loading'"
+                  name="loading"
+                  size="48rpx"
+                  aria-hidden
+                />
+                <view :class="classPrefix + '__progress-text'">
+                  {{ file.percent ? file.percent + '%' : '上传中...' }}
+                </view>
+              </block>
+              <t-icon
+                v-else
+                :name="file.status == 'reload' ? 'refresh' : 'close-circle'"
+                size="48rpx"
+                aria-hidden
+              />
+              <view
+                v-if="file.status == 'reload' || file.status == 'failed'"
+                :class="classPrefix + '__progress-text'"
+              >
+                {{ file.status == 'reload' ? '重新上传' : '上传失败' }}
+              </view>
+            </view>
+            <view
+              v-if="_.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
+              :class="classPrefix + '__close-btn hotspot-expanded'"
+              :data-index="index"
+              aria-role="button"
+              aria-label="删除"
+              @click.stop="onDelete"
+            >
+              <t-icon
+                name="close"
+                size="32rpx"
+                color="#fff"
+              />
+            </view>
+          </view>
+        </t-grid-item>
+        <t-grid-item
+          v-if="addBtn && customLimit > 0"
+          :t-class="classPrefix + '__grid'"
+          :t-class-content="classPrefix + '__grid-content'"
+          aria-label="上传"
+          @click="onAddTap"
+        >
+          <view
+            :class="classPrefix + '__wrapper'"
+            :style="gridItemStyle"
+          >
+            <slot name="add-content" />
+            <block v-if="addContent">
+              {{ addContent }}
+            </block>
+            <view
+              v-else
+              :class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
+            >
+              <t-icon name="add" />
+            </view>
+          </view>
+        </t-grid-item>
+      </block>
+      <block v-else>
+        <view
+          :class="classPrefix + '__drag'"
+          :list="dragList"
+          :style="dragWrapStyle + ';'"
+          :drag-base-data="dragBaseData"
+        >
+          <view
+            v-for="(file, index) in customFiles"
+            :key="index"
+            :ref="classPrefix + '__drag-item'"
+            :class="getDragItemClass(index)"
+            :style="getDragItemStyle(index)"
+            :data-index="index"
+            @longpress="parseEventDynamicCode($event, 'longPress', index)"
+            @touchmove.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchMove' : '', index)"
+            @touchend.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchEnd' : '', index)"
+          >
+            <t-grid-item
+              :t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
+              :t-class-content="classPrefix + '__grid-content'"
+              aria-role="presentation"
+              custom-style="width: 100%"
+            >
+              <view
+                :class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
+                :style="gridItemStyle + ';'"
+                :aria-role="ariaRole || getWrapperAriaRole(file)"
+                :aria-label="ariaLabel || getWrapperAriaLabel(file)"
+              >
+                <t-image
+                  v-if="file.type !== 'video'"
+                  :data-file="file"
+                  :data-index="index"
+                  :t-class="classPrefix + '__thumbnail'"
+                  :custom-style="(imageProps && imageProps.style) || ''"
+                  :src="file.thumb || file.url"
+                  :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+                  :error="(imageProps && imageProps.error) || 'default'"
+                  :lazy="(imageProps && imageProps.lazy) || false"
+                  :loading="(imageProps && imageProps.loading) || 'default'"
+                  :shape="(imageProps && imageProps.shape) || 'round'"
+                  :webp="(imageProps && imageProps.webp) || false"
+                  :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
+                  @click="onPreview($event, { file, index })"
+                />
+                <video
+                  v-if="file.type === 'video'"
+                  :class="classPrefix + '__thumbnail'"
+                  :src="file.url"
+                  :poster="file.thumb"
+                  controls
+                  :autoplay="false"
+                  objectFit="contain"
+                  :data-file="file"
+                  @click.stop="onFileClick"
+                />
+                <view
+                  v-if="file.status && file.status != 'done'"
+                  :class="classPrefix + '__progress-mask'"
+                  :data-index="index"
+                  :data-file="file"
+                  @click.stop="onFileClick"
+                >
+                  <block v-if="file.status == 'loading'">
+                    <t-icon
+                      :t-class="classPrefix + '__progress-loading'"
+                      name="loading"
+                      size="48rpx"
+                      aria-hidden
+                    />
+                    <view :class="classPrefix + '__progress-text'">
+                      {{ file.percent ? file.percent + '%' : '上传中...' }}
+                    </view>
+                  </block>
+                  <t-icon
+                    v-else
+                    :name="file.status == 'reload' ? 'refresh' : 'close-circle'"
+                    size="48rpx"
+                    aria-hidden
+                  />
+                  <view
+                    v-if="file.status == 'reload' || file.status == 'failed'"
+                    :class="classPrefix + '__progress-text'"
+                  >
+                    {{ file.status == 'reload' ? '重新上传' : '上传失败' }}
+                  </view>
+                </view>
+                <view
+                  v-if="_.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
+                  :class="classPrefix + '__close-btn hotspot-expanded'"
+                  :data-index="index"
+                  :data-url="file.url"
+                  aria-role="button"
+                  aria-label="删除"
+                  @click.stop="onDelete"
+                >
+                  <t-icon
+                    name="close"
+                    size="32rpx"
+                    color="#fff"
+                  />
+                </view>
+              </view>
+            </t-grid-item>
+          </view>
+          <view
+            v-if="addBtn && customLimit > 0"
+            :ref="classPrefix + '__drag-item'"
+            :class="getDragItemClass(customFiles.length)"
+            :style="getDragItemStyle(customFiles.length)"
+          >
+            <t-grid-item
+              :t-class="classPrefix + '__grid'"
+              :t-class-content="classPrefix + '__grid-content'"
+              aria-label="上传"
+              custom-style="width: 100%"
+              @click="onAddTap"
+            >
+              <view
+                :class="classPrefix + '__wrapper'"
+                :style="gridItemStyle"
+              >
+                <slot name="add-content" />
+                <block v-if="addContent">
+                  {{ addContent }}
+                </block>
+                <view
+                  v-else
+                  :class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
+                >
+                  <t-icon name="add" />
+                </view>
+              </view>
+            </t-grid-item>
+          </view>
+        </view>
+      </block>
+    </t-grid>
+  </view>
+</template>
+<script>
+import tGrid from '../grid/grid';
+import tGridItem from '../grid-item/grid-item';
+import tIcon from '../icon/icon';
+import tImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { isOverSize, coalesce } from '../common/utils';
+import { isObject } from '../common/validator';
+import _ from '../common/utils.wxs';
+import {
+  getWrapperAriaRole,
+  getWrapperAriaLabel,
+} from './upload.computed.js';
+import {
+  longPress,
+  touchMove,
+  touchEnd,
+  baseDataObserver,
+  listObserver,
+} from './drag.computed.js';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+
+const name = `${prefix}-upload`;
+
+const makeMethods = () => [
+  [longPress, 'longPress'],
+  [touchMove, 'touchMove'],
+  [touchEnd, 'touchEnd'],
+  [baseDataObserver, 'baseDataObserver'],
+  [listObserver, 'listObserver'],
+].reduce((acc, item) => {
+  const func = item[0];
+  return {
+    ...acc,
+    [item[1]](...args) {
+      func.call(this, ...args);
+    },
+  };
+}, {});
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'files',
+      event: 'success',
+    },
+  ],
+  externalClasses: [`${prefix}-class`],
+  components: {
+    tGrid,
+    tGridItem,
+    tIcon,
+    tImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      current: false,
+      proofs: [],
+      customFiles: [], // 内部动态修改的files
+      customLimit: 0, // 内部动态修改的limit
+      column: 4,
+      dragBaseData: {}, // 拖拽所需要页面数据
+      rows: 0, // 行数
+      dragWrapStyle: '', // 拖拽容器的样式
+      dragList: [], // 拖拽的数据列
+      dragging: true, // 是否开始拖拽
+      dragLayout: false, // 是否开启拖拽布局
+      _,
+
+      gridItemStyle: '',
+
+      fakeState: {},
+
+      dragItemClassList: [],
+      dragItemStyleList: [],
+    };
+  },
+  watch: {
+    files: {
+      handler() {
+        this.onWatchFilesLimit();
+      },
+      deep: true,
+    },
+    max: 'onWatchFilesLimit',
+    draggable: {
+      handler() {
+        this.onWatchFilesLimit();
+      },
+      deep: true,
+    },
+
+    gridConfig: {
+      handler() {
+        this.updateGrid();
+      },
+      deep: true,
+    },
+    dragList: {
+      handler(val) {
+        setTimeout(() => {
+          this.listObserver(val);
+        }, 33);
+      },
+      deep: true,
+      immediate: true,
+    },
+    dragBaseData: {
+      handler(val) {
+        this.baseDataObserver(val);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.handleLimit(this.files, this.max);
+    this.updateGrid();
+  },
+  methods: {
+    getWrapperAriaRole,
+    getWrapperAriaLabel,
+
+    ...makeMethods(),
+
+    handleLimit(customFiles, max) {
+      if (max === 0) {
+        max = Number.MAX_SAFE_INTEGER;
+      }
+      this.customFiles = customFiles.length > max ? customFiles.slice(0, max) : customFiles;
+      this.customLimit = max - customFiles.length;
+      this.dragging = true;
+
+      this.initDragLayout();
+    },
+
+    triggerSuccessEvent(files) {
+      this._trigger('success', { files: [...this.customFiles, ...files] });
+    },
+
+    triggerFailEvent(err) {
+      this.$emit('fail', err);
+    },
+
+    onFileClick(e) {
+      const { file, index } = e.currentTarget.dataset;
+      this.$emit('click', { index, file });
+    },
+
+    /**
+   * 由于小程序暂时在ios上不支持返回上传文件的fileType，这里用文件的后缀来判断
+   * @param mediaType
+   * @param tempFilePath
+   * @returns string
+   * @link https://developers.weixin.qq.com/community/develop/doc/00042820b28ee8fb41fc4d0c254c00
+   */
+    getFileType(mediaType, tempFilePath, fileType) {
+      if (fileType) return fileType; // 如果有返回fileType就直接用
+      if (mediaType.length === 1) {
+      // 在单选媒体类型的时候直接使用单选媒体类型
+        return mediaType[0];
+      }
+      // 否则根据文件后缀进行判读
+      const videoType = ['avi', 'wmv', 'mkv', 'mp4', 'mov', 'rm', '3gp', 'flv', 'mpg', 'rmvb'];
+      const temp = tempFilePath.split('.');
+      const postfix = temp[temp.length - 1];
+      if (videoType.includes(postfix.toLocaleLowerCase())) {
+        return 'video';
+      }
+      return 'image';
+    },
+
+    // 选中文件之后，计算一个随机的短文件名
+    getRandFileName(filePath) {
+      const extIndex = filePath.lastIndexOf('.');
+      const extName = extIndex === -1 ? '' : filePath.substr(extIndex);
+      return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName;
+    },
+
+    onDelete(e) {
+      const { index } = e.currentTarget.dataset;
+      this.deleteHandle(index);
+    },
+
+    deleteHandle(index) {
+      const { customFiles } = this;
+      const delFile = customFiles[index];
+      this.$emit('remove', { index, file: delFile });
+    },
+
+    updateGrid() {
+      let { gridConfig = {} } = this;
+      if (!isObject(gridConfig)) gridConfig = {};
+      const { column = 4, width = 160, height = 160 } = gridConfig;
+
+      this.gridItemStyle = `width:${width}rpx;height:${height}rpx`;
+      this.column = column;
+    },
+
+    initDragLayout() {
+      const { draggable, disabled } = this;
+      if (!draggable || disabled) return;
+      this.initDragList();
+      setTimeout(() => {
+        this.initDragBaseData();
+      }, 33)
+      ;
+    },
+
+    initDragList() {
+      let i = 0;
+      const { column, customFiles, customLimit } = this;
+      const dragList = [];
+      customFiles.forEach((item, index) => {
+        dragList.push({
+          realKey: i, // 真实顺序
+          sortKey: index, // 整体顺序
+          tranX: `${(index % column) * 100}%`,
+          tranY: `${Math.floor(index / column) * 100}%`,
+          data: { ...item },
+        });
+        i += 1;
+      });
+      if (customLimit > 0) {
+        const listLength = dragList.length;
+        dragList.push({
+          realKey: listLength, // 真实顺序
+          sortKey: listLength, // 整体顺序
+          tranX: `${(listLength % column) * 100}%`,
+          tranY: `${Math.floor(listLength / column) * 100}%`,
+          fixed: true,
+        });
+      }
+      this.rows = Math.ceil(dragList.length / column);
+
+      this.dragList = dragList;
+    },
+
+    initDragBaseData() {
+      const { classPrefix, rows, column, customFiles } = this;
+      if (customFiles.length === 0) {
+        this.dragBaseData = {};
+        this.dragWrapStyle = '';
+        this.dragLayout = false;
+        return;
+      }
+
+      let query;
+      // #ifdef H5 || APP-PLUS
+      query = uni.createSelectorQuery().in(this);
+      // #endif
+      if (!query) {
+        query = this.createSelectorQuery();
+      }
+
+
+      let selectorGridItem;
+      let selectorGrid;
+      // #ifdef H5 || APP-PLUS
+      selectorGridItem = '.t-grid-item';
+      selectorGrid = '.t-grid';
+      // #endif
+
+      if (!selectorGridItem) {
+        selectorGridItem = `.${classPrefix} >>> .t-grid-item`;
+        selectorGrid = `.${classPrefix} >>> .t-grid`;
+      }
+
+      query.select(selectorGridItem).boundingClientRect();
+      query.select(selectorGrid).boundingClientRect();
+      query.selectViewport().scrollOffset();
+      query.exec((res) => {
+        const [{ width, height }, { left, top }, { scrollTop }] = res;
+        const dragBaseData = {
+          rows,
+          classPrefix,
+          itemWidth: width,
+          itemHeight: height,
+          wrapLeft: left,
+          wrapTop: top + scrollTop,
+          columns: column,
+        };
+        const dragWrapStyle = `height: ${rows * height}px`;
+
+        this.dragBaseData = dragBaseData;
+        this.dragWrapStyle = dragWrapStyle;
+        this.dragLayout = true;
+
+
+        // 为了给拖拽元素加上拖拽方法，同时控制不拖拽时不取消穿透
+        const timer = setTimeout(() => {
+          this.dragging = false;
+          clearTimeout(timer);
+        }, 0);
+      });
+    },
+
+    getPreviewMediaSources() {
+      const previewMediaSources = [];
+      this.customFiles.forEach((ele) => {
+        const mediaSource = {
+          url: ele.url,
+          type: ele.type,
+          poster: ele.thumb || undefined,
+        };
+        previewMediaSources.push(mediaSource);
+      });
+
+      return previewMediaSources;
+    },
+
+    onPreview(e) {
+      this.onFileClick(e);
+      const { preview } = this;
+
+      if (!preview) return;
+
+      const usePreviewMedia = this.customFiles.some(file => file.type === 'video');
+      if (usePreviewMedia) {
+        this.onPreviewMedia(e);
+      } else {
+        this.onPreviewImage(e);
+      }
+    },
+
+    onPreviewImage(e) {
+      const { index } = e.currentTarget.dataset;
+      const urls = this.customFiles.filter(file => file.percent !== -1).map(file => file.url);
+      const current = this.customFiles[index]?.url;
+      uni.previewImage({
+        urls,
+        current,
+        fail() {
+          uni.showToast({ title: '预览图片失败', icon: 'none' });
+        },
+      });
+    },
+
+    onPreviewMedia(e) {
+      const { index: current } = e.currentTarget.dataset;
+      const sources = this.getPreviewMediaSources();
+      uni.previewMedia({
+        sources,
+        current,
+        fail() {
+          uni.showToast({ title: '预览视频失败', icon: 'none' });
+        },
+      });
+    },
+
+    uploadFiles(files) {
+      return new Promise((resolve) => {
+        // 开始调用上传函数
+        const task = this.requestMethod(files);
+        if (task instanceof Promise) {
+          return task;
+        }
+        resolve({});
+      });
+    },
+
+    startUpload(files) {
+      // 如果传入了上传函数，则进度设为0并开始上传，否则跳过上传
+      if (typeof this.requestMethod === 'function') {
+        return this.uploadFiles(files)
+          .then(() => {
+            files.forEach((file) => {
+              file.percent = 100;
+            });
+            this.triggerSuccessEvent(files);
+          })
+          .catch((err) => {
+            this.triggerFailEvent(err);
+          });
+      }
+
+      // 如果没有上传函数，success事件与微信api上传成功关联
+      this.triggerSuccessEvent(files);
+
+      this.handleLimit(this.customFiles, this.max);
+      return Promise.resolve();
+    },
+
+    onWatchFilesLimit() {
+      this.handleLimit(this.files, this.max);
+    },
+
+    onAddTap() {
+      const { disabled, mediaType, source } = this;
+      if (disabled) return;
+      if (source === 'media') {
+        this.chooseMedia(mediaType);
+      } else {
+        this.chooseMessageFile(mediaType);
+      }
+    },
+
+    chooseMedia(mediaType) {
+      const { customLimit } = this;
+      const { config, sizeLimit } = this;
+      let func = 'chooseMedia';
+      // #ifdef H5 || MP-ALIPAY
+      func = 'chooseImage';
+      // #endif
+      uni[func]({
+        count: Math.min(20, customLimit),
+        mediaType,
+        ...config,
+        success: (res) => {
+          const files = [];
+
+          // 支持单/多文件
+          res.tempFiles.forEach((temp) => {
+            const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp;
+
+            if (isOverSize(size, sizeLimit)) {
+              let title = `${fileType === 'image' ? '图片' : '视频'}大小超过限制`;
+
+              if (typeof sizeLimit !== 'number') {
+                title = sizeLimit.message.replace('{sizeLimit}', sizeLimit?.size);
+              }
+              uni.showToast({ icon: 'none', title });
+              return;
+            }
+
+            const name = temp.name || this.getRandFileName(tempFilePath);
+            files.push({
+              name,
+              type: this.getFileType(mediaType, temp.name || tempFilePath, fileType),
+              url: tempFilePath,
+              size,
+              width,
+              height,
+              duration,
+              thumb: thumbTempFilePath,
+              percent: 0,
+              ...res,
+            });
+          });
+          this.afterSelect(files);
+        },
+        fail: (err) => {
+          this.triggerFailEvent(err);
+        },
+        complete: (res) => {
+          this.$emit('complete', res);
+        },
+      });
+    },
+
+    chooseMessageFile(mediaType) {
+      const { customLimit } = this;
+      const { config, sizeLimit } = this;
+      uni.chooseMessageFile({
+        count: Math.min(100, customLimit),
+        type: Array.isArray(mediaType) ? 'all' : mediaType,
+        ...config,
+        success: (res) => {
+          const files = [];
+
+          // 支持单/多文件
+          res.tempFiles.forEach((temp) => {
+            const { size, type: fileType, path: tempFilePath, ...res } = temp;
+
+            if (isOverSize(size, sizeLimit)) {
+              let title = `${fileType === 'image' ? '图片' : '视频'}大小超过限制`;
+
+              if (typeof sizeLimit !== 'number') {
+                title = sizeLimit.message.replace('{sizeLimit}', sizeLimit?.size);
+              }
+              uni.showToast({ icon: 'none', title });
+              return;
+            }
+
+            const name = this.getRandFileName(tempFilePath);
+            files.push({
+              name,
+              type: this.getFileType(mediaType, tempFilePath, fileType),
+              url: tempFilePath,
+              size,
+              percent: 0,
+              ...res,
+            });
+          });
+          this.afterSelect(files);
+        },
+        fail: err => this.triggerFailEvent(err),
+        complete: res => this.$emit('complete', res),
+      });
+    },
+
+    afterSelect(files) {
+      this._trigger('select-change', {
+        files: [...this.customFiles],
+        currentSelectedFiles: [files],
+      });
+      this._trigger('add', { files });
+      this.startUpload(files);
+    },
+
+    dragVibrate(e) {
+      const { vibrateType } = e;
+      const { draggable } = this;
+      const dragVibrate = coalesce(draggable?.vibrate, true);
+      const dragCollisionVibrate = draggable?.collisionVibrate;
+      if ((dragVibrate && vibrateType === 'longPress') || (dragCollisionVibrate && vibrateType === 'touchMove')) {
+        uni.vibrateShort({
+          type: 'light',
+        });
+      }
+    },
+
+    dragStatusChange(e) {
+      const { dragging } = e;
+      this.dragging = dragging;
+    },
+
+    dragEnd(e) {
+      const { dragCollisionList } = e;
+      let files = [];
+      if (dragCollisionList.length === 0) {
+        files = this.customFiles;
+      } else {
+        files = dragCollisionList.reduce((list, item) => {
+          const { realKey, data, fixed } = item;
+          if (!fixed) {
+            list[realKey] = {
+              ...data,
+            };
+          }
+          return list;
+        }, []);
+      }
+      this.triggerDropEvent(files);
+    },
+
+    triggerDropEvent(files) {
+      const { transition } = this;
+      if (transition.backTransition) {
+        const timer = setTimeout(() => {
+          this.$emit('drop', { files });
+          clearTimeout(timer);
+        }, transition.duration);
+      } else {
+        this.$emit('drop', { files });
+      }
+    },
+    getState() {
+      return this.fakeState || {};
+    },
+    callMethod(...args) {
+      return this[args[0]]?.(...args.slice(1));
+    },
+    parseEventDynamicCode,
+    setDragItemClass(index, operation, val) {
+      if (!this.dragItemClassList[index]) {
+        this.dragItemClassList[index] = [];
+      }
+      const valList = Array.isArray(val) ? val : [val];
+      if (operation === 'add') {
+        this.dragItemClassList[index].push(...valList);
+        return;
+      }
+      if (operation === 'remove') {
+        this.dragItemClassList[index] = this.dragItemClassList[index].filter(item => !valList.includes(item));
+      }
+    },
+    getDragItemClass(index) {
+      const { classPrefix } = this;
+      const base = [
+        `${classPrefix}__drag-item`,
+      ];
+      return [
+        ...base,
+        ...(this.dragItemClassList[index] || []),
+      ].join(' ');
+    },
+    setDragItemStyle(index, val) {
+      if (!this.dragItemStyleList[index]) {
+        this.dragItemStyleList[index] = [];
+      }
+      this.dragItemStyleList[index].push(val);
+    },
+    getDragItemStyle(index) {
+      const { column, transition } = this;
+      const base = [
+        `width: ${100 / column}%`,
+        `--td-upload-drag-transition-duration: ${transition.duration}ms`,
+        `--td-upload-drag-transition-timing-function: ${transition.timingFunction}`,
+      ];
+
+      return [
+        ...base,
+        ...(this.dragItemStyleList[index] || []),
+      ].join(';');
+    },
+  },
+});
+</script>
+<style scoped>
+@import './upload.css';
+</style>
diff --git a/packages/tdesign-uniapp/components/watermark/README.en-US.md b/packages/tdesign-uniapp/components/watermark/README.en-US.md
new file mode 100644
index 000000000..19ed1e7ed
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/README.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+alpha | Number | 1 | \- | N
+content | String | - | \- | N
+height | Number | - | \- | N
+is-repeat | Boolean | true | \- | N
+layout | String | rectangular | options: rectangular/hexagonal | N
+line-space | Number | 16 | \- | N
+movable | Boolean | false | \- | N
+move-interval | Number | 3000 | \- | N
+offset | Array | - | Typescript：`Array<number>` | N
+removable | Boolean | true | \- | N
+rotate | Number | -22 | \- | N
+watermark-content | Object / Array | - | Typescript：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | \- | N
+x | Number | - | \- | N
+y | Number | - | \- | N
+z-index | Number | - | \- | N
+
+### Watermark Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+
+### WatermarkText
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | \- | N
+font-family | String | - | font-family configuration for watermark text | N
+font-size | Number | 16 | \- | N
+font-weight | String | normal | options: normal/lighter/bold/bolder | N
+text | String | - | \- | N
+
+### WatermarkImage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | \- | N
+url | String | - | \- | N
diff --git a/packages/tdesign-uniapp/components/watermark/README.md b/packages/tdesign-uniapp/components/watermark/README.md
new file mode 100644
index 000000000..119779652
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/README.md
@@ -0,0 +1,101 @@
+---
+title: Watermark 水印
+description: 给页面的某个区域加上水印。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 文字水印
+
+{{ base }}
+
+#### 图片水印
+
+{{ image }}
+
+#### 图片灰阶水印
+
+{{ gray }}
+
+#### 多行图文水印
+
+{{ multi-line }}
+
+#### 多行图文灰阶水印
+
+{{ multi-line-gray }}
+
+#### 运动文字水印
+
+{{ move-text }}
+
+#### 运动图片水印
+
+{{ move-image }}
+
+### 不同布局的水印 
+通过设置 layout 使用不同的布局。
+
+{{ layout }}
+
+
+## API
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+content | String | - | 水印所覆盖的内容节点 | N
+height | Number | - | 水印高度 | N
+is-repeat | Boolean | true | 水印是否重复出现 | N
+layout | String | rectangular | 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印。可选项：rectangular/hexagonal | N
+line-space | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
+movable | Boolean | false | 水印是否可移动 | N
+move-interval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N
+offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array<number>` | N
+removable | Boolean | true | 水印是否可被删除 | N
+rotate | Number | -22 | 水印旋转的角度，单位 ° | N
+watermark-content | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | 水印宽度 | N
+x | Number | - | 水印之间的水平间距 | N
+y | Number | - | 水印之间的垂直间距 | N
+z-index | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N
+
+### Watermark Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+
+### WatermarkText
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N
+font-family | String | - | 水印文本文字字体 | N
+font-size | Number | 16 | 水印文本文字大小 | N
+font-weight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N
+text | String | - | 水印文本内容 | N
+
+### WatermarkImage
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | 水印图片是否需要灰阶显示 | N
+url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N
diff --git a/packages/tdesign-uniapp/components/watermark/_example/base/index.vue b/packages/tdesign-uniapp/components/watermark/_example/base/index.vue
new file mode 100644
index 000000000..24c35ad58
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/base/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :y="56"
+      :x="56"
+      :width="68"
+      :height="52"
+    >
+      <view style="width: 100%; height: 340px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: { text: '文字水印' },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/gray/index.vue b/packages/tdesign-uniapp/components/watermark/_example/gray/index.vue
new file mode 100644
index 000000000..3b81099c5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/gray/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :width="120"
+      :height="20"
+      :x="56"
+      :y="76"
+      :alpha="0.3"
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: {
+        url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+        isGrayscale: true,
+      },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/image/index.vue b/packages/tdesign-uniapp/components/watermark/_example/image/index.vue
new file mode 100644
index 000000000..5ff5c56a7
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/image/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :width="120"
+      :height="20"
+      :x="56"
+      :y="76"
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: {
+        url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+      },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/layout/index.vue b/packages/tdesign-uniapp/components/watermark/_example/layout/index.vue
new file mode 100644
index 000000000..7ad99377b
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/layout/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <view>
+    <view class="demo-desc" style="margin-bottom: 32rpx"
+      >Rectangular Grid 矩形布局</view
+    >
+    <t-watermark
+      :watermark-content="watermark"
+      :width="56"
+      :height="56"
+      :x="68"
+      :y="52"
+    >
+      <view style="width: 100%; height: 340px" />
+    </t-watermark>
+
+    <view class="demo-desc" style="margin-bottom: 32rpx"
+      >Hexagonal Grid 六边形网格</view
+    >
+    <t-watermark
+      :watermark-content="watermark"
+      :width="68"
+      :height="52"
+      :x="56"
+      :y="56"
+      layout="hexagonal"
+    >
+      <view style="width: 100%; height: 340px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: { text: '文字水印' },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/move-image/index.vue b/packages/tdesign-uniapp/components/watermark/_example/move-image/index.vue
new file mode 100644
index 000000000..f73c46f80
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/move-image/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :x="100"
+      :y="140"
+      :width="120"
+      :height="30"
+      movable
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: { url: 'https://tdesign.gtimg.com/site/baseLogo-light.png' },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/move-text/index.vue b/packages/tdesign-uniapp/components/watermark/_example/move-text/index.vue
new file mode 100644
index 000000000..1c613b3e3
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/move-text/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :width="120"
+      :height="60"
+      :y="200"
+      :x="210"
+      movable
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: { text: '文字水印' },
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/multi-line-gray/index.vue b/packages/tdesign-uniapp/components/watermark/_example/multi-line-gray/index.vue
new file mode 100644
index 000000000..936ff966f
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/multi-line-gray/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :line-space="24"
+      :x="56"
+      :y="76"
+      :width="120"
+      :height="20"
+      :alpha="0.3"
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: [
+        { text: '水印文本', fontColor: 'black' },
+        {
+          url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+          isGrayscale: true,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/multi-line/index.vue b/packages/tdesign-uniapp/components/watermark/_example/multi-line/index.vue
new file mode 100644
index 000000000..09a189db5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/multi-line/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <view>
+    <t-watermark
+      :watermark-content="watermark"
+      :line-space="24"
+      :x="56"
+      :y="76"
+      :width="120"
+      :height="20"
+      :alpha="0.3"
+    >
+      <view style="width: 100%; height: 300px" />
+    </t-watermark>
+  </view>
+</template>
+
+<script>
+import tWatermark from 'tdesign-uniapp/watermark/watermark.vue';
+
+export default {
+  components: {
+    tWatermark,
+  },
+  data() {
+    return {
+      watermark: [
+        { text: '水印文本', fontColor: 'black' },
+        { url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png' },
+      ],
+    };
+  },
+};
+</script>
+<style scoped></style>
diff --git a/packages/tdesign-uniapp/components/watermark/_example/watermark.less b/packages/tdesign-uniapp/components/watermark/_example/watermark.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/tdesign-uniapp/components/watermark/_example/watermark.vue b/packages/tdesign-uniapp/components/watermark/_example/watermark.vue
new file mode 100644
index 000000000..232cd9ca5
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/_example/watermark.vue
@@ -0,0 +1,72 @@
+<template>
+  <view>
+    <!-- #ifndef MP-ALIPAY -->
+    <t-navbar
+      title="Watermark"
+      left-arrow
+    />
+    <!-- #endif -->
+    <view class="demo">
+      <t-demo-header
+        title="Watermark 水印"
+        desc="给页面的某个区域加上水印。"
+      />
+      <t-demo
+        title="01 组件类型"
+        desc="文字水印"
+      >
+        <base-watermark />
+      </t-demo>
+      <t-demo desc="图片水印">
+        <image-watermark />
+      </t-demo>
+      <t-demo desc="图片灰阶水印">
+        <gray-watermark />
+      </t-demo>
+      <t-demo desc="多行图文水印">
+        <multi-line-watermark />
+      </t-demo>
+      <t-demo desc="多行图文灰阶水印">
+        <multi-line-gray-watermark />
+      </t-demo>
+      <t-demo desc="运动文字水印">
+        <move-text-watermark />
+      </t-demo>
+      <t-demo desc="运动图片水印">
+        <move-image-watermark />
+      </t-demo>
+      <t-demo title="02 组件样式">
+        <layout />
+      </t-demo>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import baseWatermark from './base/index.vue';
+import imageWatermark from './image/index.vue';
+import grayWatermark from './gray/index.vue';
+import multiLineWatermark from './multi-line/index.vue';
+import multiLineGrayWatermark from './multi-line-gray/index.vue';
+import moveTextWatermark from './move-text/index.vue';
+import moveImageWatermark from './move-image/index.vue';
+import layout from './layout/index.vue';
+
+export default {
+  components: {
+    baseWatermark,
+    imageWatermark,
+    grayWatermark,
+    multiLineWatermark,
+    multiLineGrayWatermark,
+    moveTextWatermark,
+    moveImageWatermark,
+    layout,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="less"></style>
diff --git a/packages/tdesign-uniapp/components/watermark/props.ts b/packages/tdesign-uniapp/components/watermark/props.ts
new file mode 100644
index 000000000..946921977
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/props.ts
@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdWatermarkProps } from './type';
+export default {
+  /** 水印整体透明度，取值范围 [0-1] */
+  alpha: {
+    type: Number,
+    default: 1,
+  },
+  /** 水印所覆盖的内容节点 */
+  content: {
+    type: String,
+  },
+  /** 水印高度 */
+  height: {
+    type: Number,
+  },
+  /** 水印是否重复出现 */
+  isRepeat: {
+    type: Boolean,
+    default: true,
+  },
+  /** 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印 */
+  layout: {
+    type: String,
+    default: 'rectangular' as TdWatermarkProps['layout'],
+    validator(val: TdWatermarkProps['layout']): boolean {
+      if (!val) return true;
+      return ['rectangular', 'hexagonal'].includes(val);
+    },
+  },
+  /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
+  lineSpace: {
+    type: Number,
+    default: 16,
+  },
+  /** 水印是否可移动 */
+  movable: Boolean,
+  /** 水印发生运动位移的间隙，单位：毫秒 */
+  moveInterval: {
+    type: Number,
+    default: 3000,
+  },
+  /** 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` */
+  offset: {
+    type: Array,
+  },
+  /** 水印是否可被删除 */
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 水印旋转的角度，单位 ° */
+  rotate: {
+    type: Number,
+    default: -22,
+  },
+  /** 水印内容，需要显示多行情况下可配置为数组 */
+  watermarkContent: {
+    type: [Object, Array],
+  },
+  /** 水印宽度 */
+  width: {
+    type: Number,
+  },
+  /** 水印之间的水平间距 */
+  x: {
+    type: Number,
+  },
+  /** 水印之间的垂直间距 */
+  y: {
+    type: Number,
+  },
+  /** 水印元素的 `z-index`，默认值写在 CSS 中 */
+  zIndex: {
+    type: Number,
+  },
+};
diff --git a/packages/tdesign-uniapp/components/watermark/type.ts b/packages/tdesign-uniapp/components/watermark/type.ts
new file mode 100644
index 000000000..10e7f1fbb
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/type.ts
@@ -0,0 +1,121 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdWatermarkProps {
+  /**
+   * 水印整体透明度，取值范围 [0-1]
+   * @default 1
+   */
+  alpha?: number;
+  /**
+   * 水印所覆盖的内容节点
+   */
+  content?: string;
+  /**
+   * 水印高度
+   */
+  height?: number;
+  /**
+   * 水印是否重复出现
+   * @default true
+   */
+  isRepeat?: boolean;
+  /**
+   * 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印
+   * @default rectangular
+   */
+  layout?: 'rectangular' | 'hexagonal';
+  /**
+   * 行间距，只作用在多行（`content` 配置为数组）情况下
+   * @default 16
+   */
+  lineSpace?: number;
+  /**
+   * 水印是否可移动
+   * @default false
+   */
+  movable?: boolean;
+  /**
+   * 水印发生运动位移的间隙，单位：毫秒
+   * @default 3000
+   */
+  moveInterval?: number;
+  /**
+   * 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`
+   */
+  offset?: Array<number>;
+  /**
+   * 水印是否可被删除
+   * @default true
+   */
+  removable?: boolean;
+  /**
+   * 水印旋转的角度，单位 °
+   * @default -22
+   */
+  rotate?: number;
+  /**
+   * 水印内容，需要显示多行情况下可配置为数组
+   */
+  watermarkContent?: WatermarkText | WatermarkImage | Array<WatermarkText | WatermarkImage>;
+  /**
+   * 水印宽度
+   */
+  width?: number;
+  /**
+   * 水印之间的水平间距
+   */
+  x?: number;
+  /**
+   * 水印之间的垂直间距
+   */
+  y?: number;
+  /**
+   * 水印元素的 `z-index`，默认值写在 CSS 中
+   */
+  zIndex?: number;
+}
+
+export interface WatermarkText {
+  /**
+   * 水印文本文字颜色
+   * @default rgba(0,0,0,0.1)
+   */
+  fontColor?: string;
+  /**
+   * 水印文本文字字体
+   * @default ''
+   */
+  fontFamily?: string;
+  /**
+   * 水印文本文字大小
+   * @default 16
+   */
+  fontSize?: number;
+  /**
+   * 水印文本文字粗细
+   * @default normal
+   */
+  fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder';
+  /**
+   * 水印文本内容
+   * @default ''
+   */
+  text?: string;
+}
+
+export interface WatermarkImage {
+  /**
+   * 水印图片是否需要灰阶显示
+   * @default false
+   */
+  isGrayscale?: boolean;
+  /**
+   * 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图
+   * @default ''
+   */
+  url?: string;
+}
diff --git a/packages/tdesign-uniapp/components/watermark/utils/generateBase64Url.js b/packages/tdesign-uniapp/components/watermark/utils/generateBase64Url.js
new file mode 100644
index 000000000..1fc31d03a
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/utils/generateBase64Url.js
@@ -0,0 +1,360 @@
+import { loadImage } from '../../common/canvas/index';
+import { getWindowInfo } from '../../common/utils';
+
+const ratio = getWindowInfo().pixelRatio || 1;
+
+// 元素中心为旋转点执行旋转
+const drawRotate = (
+  ctx,
+  x,
+  y,
+  rotate,
+) => {
+  ctx.translate(x, y);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
+  ctx.translate(-x, -y);
+};
+
+// 绘制文字
+const drawText = (
+  ctx,
+  x,
+  y,
+  markHeight,
+  text,
+  fontWeight,
+  fontSize,
+  fontFamily,
+  fillStyle,
+) => {
+  ctx.font = `normal normal ${fontWeight} ${
+    fontSize * ratio
+  }px/${markHeight}px ${fontFamily}`;
+
+  ctx.fillStyle = fillStyle;
+  ctx.textAlign = 'start';
+  ctx.textBaseline = 'top';
+
+  ctx.fillText(text, x, y);
+};
+
+export default async function generateBase64Url(
+  canvas,
+  canvasId,
+  {
+    width,
+    height,
+    gapX,
+    gapY,
+    offsetLeft,
+    offsetTop,
+    rotate,
+    alpha,
+    watermarkContent,
+    lineSpace,
+    watermarkColor,
+    layout,
+  },
+  onFinish,
+  onFinally,
+) {
+  const isHexagonal = layout === 'hexagonal';
+
+  let ctx;
+
+  // #ifdef MP || H5
+  ctx = canvas.getContext('2d', { willReadFrequently: true });
+  // #endif
+
+  if (!ctx) {
+    ctx = uni.createCanvasContext(canvasId, this);
+  }
+  if (!ctx) {
+    console.warn('当前环境不支持Canvas, 无法绘制水印');
+    onFinish('');
+    return;
+  }
+
+  let actualBackgroundSize = {
+    width: gapX + width,
+  };
+
+  const canvasWidth = (gapX + width) * ratio;
+  const canvasHeight = (gapY + height) * ratio;
+
+  const markWidth = width * ratio;
+  const markHeight = height * ratio;
+
+  const dislocationRotateX = canvasWidth;
+  const dislocationRotateY = canvasHeight;
+  const dislocationDrawX = (gapX + width) * ratio;
+  const dislocationDrawY = (gapY + height) * ratio;
+
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+
+  if (isHexagonal) {
+    canvas.width = canvasWidth * 2;
+    canvas.height = canvasHeight * 2;
+
+    // 两倍宽度+间距
+    actualBackgroundSize = {
+      width: gapX + width * 2 + width / 2,
+    };
+  }
+
+  ctx.globalAlpha = alpha;
+
+  // h5需要全局缩放
+  // #ifdef H5 || APP-PLUS
+  ctx.scale(1 / ratio, 1 / ratio);
+  // #endif
+
+  ctx.fillStyle = 'transparent';
+  ctx.fillRect(0, 0, markWidth, markHeight);
+
+  ctx.translate(offsetLeft * ratio, offsetTop * ratio);
+
+  const contents = Array.isArray(watermarkContent)
+    ? watermarkContent
+    : [{ ...watermarkContent }];
+
+  let top = 0;
+
+  // 预处理
+  contents.forEach((item) => {
+    item.top = top;
+    if (item.url) {
+      top += height;
+    } else if (item.text) {
+      top += lineSpace;
+    }
+  });
+
+
+  // 绘制水印内容
+  const renderWatermarkItem = async (
+    item,
+    offsetX = 0,
+    offsetY = 0,
+    rotateX = 0,
+    rotateY = 0,
+  ) => {
+    if (item.url) {
+      const { url, isGrayscale = false } = item;
+      const img = await loadImage({
+        canvas,
+        src: url,
+      });
+
+      ctx.save?.();
+      drawRotate(ctx, rotateX, rotateY, rotate);
+
+      // TODO：其他技术栈修复了「灰度效果只影响图片，不影响文字」的bug，因为小程序不能创建临时canvas，暂时没有想到比较优雅的解决方案
+      if (isGrayscale) {
+        // #ifdef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio / 2,
+          height * ratio / 2,
+        );
+        // #endif
+
+        // #ifndef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio,
+          height * ratio,
+        );
+        // #endif
+        const imgData = await getImageData(ctx, {
+          x: 0,
+          y: 0,
+          width,
+          height,
+        });
+        const pixels = imgData.data;
+        for (let i = 0; i < pixels.length; i += 4) {
+          const lightness = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
+          pixels[i] = lightness;
+          pixels[i + 1] = lightness;
+          pixels[i + 2] = lightness;
+        }
+        await putImageData(ctx, imgData, {
+          x: 0,
+          y: 0,
+        });
+      } else {
+        // #ifdef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          (offsetY + item.top * ratio),
+          width * ratio / 2,
+          height * ratio / 2,
+        );
+        // #endif
+
+        // #ifndef APP-PLUS
+        ctx.drawImage(
+          img,
+          offsetX,
+          offsetY + item.top * ratio,
+          width * ratio,
+          height * ratio,
+        );
+        // #endif
+      }
+
+      ctx.restore?.();
+      return;
+    }
+
+    if (item.text) {
+      const {
+        text,
+        fontSize = 16,
+        fontFamily = 'normal',
+        fontWeight = 'normal',
+      } = item;
+      const fillStyle = item?.fontColor || watermarkColor;
+
+      ctx.save?.();
+      drawRotate(ctx, rotateX, rotateY, rotate);
+      drawText(
+        ctx,
+        offsetX,
+        offsetY + item.top * ratio,
+        markHeight,
+        text,
+        fontWeight,
+        fontSize,
+        fontFamily,
+        fillStyle,
+      );
+      ctx.restore?.();
+    }
+  };
+
+  // 矩形水印
+  for (const item of contents) {
+    await renderWatermarkItem(item, 0, 0, 0, 0);
+  }
+
+  // 六边形水印
+  if (isHexagonal) {
+    for (const item of contents) {
+      await renderWatermarkItem(
+        item,
+        dislocationDrawX,
+        dislocationDrawY,
+        dislocationRotateX,
+        dislocationRotateY,
+      );
+    }
+  }
+  // #ifdef APP-PLUS
+  ctx.draw();
+  // #endif
+
+
+  // 没有图片
+  const canvasUrl = await exportCanvasImage.call(this, canvas, canvasId);
+  onFinish(canvasUrl, actualBackgroundSize, ratio);
+
+  onFinally?.();
+}
+// 跨平台 Canvas 导出方法
+export function exportCanvasImage(canvas, canvasId) {
+  return new Promise((resolve, reject) => {
+    let parsed = false;
+    // #ifdef H5 || MP
+    resolve(canvas.toDataURL('image/png'));
+    parsed = true;
+    // #endif
+
+    if (parsed) return;
+    const query = uni.createSelectorQuery().in(this);
+
+    query
+      .select(`#${canvasId}`)
+      .fields({ node: true, size: true })
+      .exec(async (res) => {
+        if (!res[0]?.node) {
+          console.error('Canvas node not found');
+          return;
+        }
+
+        uni.canvasToTempFilePath({
+          // #ifdef MP
+          canvas: res[0].node,
+          // #endif
+          // #ifndef MP
+          canvasId,
+          // #endif
+          success: res => resolve(res.tempFilePath),
+          fail: reject,
+        });
+      });
+  });
+}
+
+
+async function getImageData(ctx, options) {
+  let result;
+  // #ifdef H5 || MP
+  result = ctx.getImageData(options.x, options.y, options.width, options.height);
+  // #endif
+
+  if (!result) {
+    result = new Promise((resolve) => {
+      uni.canvasGetImageData({
+        canvasId: options.canvasId,
+        x: options.x,
+        y: options.y,
+        width: options.width,
+        height: options.height,
+        success: (res) => {
+        // 小程序/App 返回的数据结构需要转换
+          resolve({
+            data: new Uint8ClampedArray(res.data),
+            width: res.width,
+            height: res.height,
+          });
+        },
+      }, this);
+    });
+  }
+
+  return result;
+}
+
+
+async function putImageData(ctx, imageData, options) {
+  let result;
+  // #ifdef H5 || MP
+  ctx.putImageData(imageData, options.x, options.y);
+  result = Promise.resolve();
+  // #endif
+
+  if (!result) {
+    result = new Promise((resolve, reject) => {
+      uni.canvasPutImageData({
+        canvasId: options.canvasId,
+        x: options.x,
+        y: options.y,
+        width: imageData.width,
+        height: imageData.height,
+        data: imageData.data,
+        success: resolve,
+        fail: reject,
+      }, this);
+    });
+  }
+
+  return result;
+}
diff --git a/packages/tdesign-uniapp/components/watermark/utils/randomMovingStyle.js b/packages/tdesign-uniapp/components/watermark/utils/randomMovingStyle.js
new file mode 100644
index 000000000..2a8a51c17
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/utils/randomMovingStyle.js
@@ -0,0 +1,27 @@
+/* eslint-disable no-nested-ternary */
+export default function randomMovingStyle() {
+  const align = Math.floor(Math.random() * 4);
+  const p1 = Math.floor(Math.random() * 70) + 30;
+  const leftTopLimit = 0;
+  const bottomLimit = 95;
+  const rightLimit = 90;
+  const left0 = align === 1 ? rightLimit : align === 3 ? leftTopLimit : p1;
+  const left25 = align === 0 ? rightLimit : align === 2 ? leftTopLimit : 100 - p1;
+  const left50 = align === 1 ? leftTopLimit : align === 3 ? rightLimit : 100 - p1;
+  const left75 = align === 0 ? leftTopLimit : align === 2 ? rightLimit : p1;
+  const top0 = align === 0 ? leftTopLimit : align === 2 ? bottomLimit : p1;
+  const top25 = align === 1 ? bottomLimit : align === 3 ? leftTopLimit : p1;
+  const top50 = align === 0 ? bottomLimit : align === 2 ? leftTopLimit : 100 - p1;
+  const top75 = align === 1 ? leftTopLimit : align === 3 ? bottomLimit : 100 - p1;
+
+  return {
+    left0: `${left0}%`,
+    left25: `${left25}%`,
+    left50: `${left50}%`,
+    left75: `${left75}%`,
+    top0: `${top0}%`,
+    top25: `${top25}%`,
+    top50: `${top50}%`,
+    top75: `${top75}%`,
+  };
+}
diff --git a/packages/tdesign-uniapp/components/watermark/watermark.less b/packages/tdesign-uniapp/components/watermark/watermark.less
new file mode 100644
index 000000000..1ae7f6728
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/watermark.less
@@ -0,0 +1,35 @@
+@import '../common/style/base.less';
+
+.@{prefix}-watermark {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.watermark-move {
+  animation: watermark var(--watermark-animation-duration, 100s) linear infinite;
+}
+
+@keyframes watermark {
+  0% {
+    left: var(--watermark-left-0);
+    top: var(--watermark-top-0);
+  }
+  25% {
+    left: var(--watermark-left-25);
+    top: var(--watermark-top-25);
+  }
+  50% {
+    left: var(--watermark-left-50);
+    top: var(--watermark-top-50);
+    transform: translateX(-100%);
+  }
+  75% {
+    left: var(--watermark-left-75);
+    top: var(--watermark-top-75);
+  }
+  100% {
+    left: var(--watermark-left-0);
+    top: var(--watermark-top-0);
+  }
+}
diff --git a/packages/tdesign-uniapp/components/watermark/watermark.vue b/packages/tdesign-uniapp/components/watermark/watermark.vue
new file mode 100644
index 000000000..8705d148d
--- /dev/null
+++ b/packages/tdesign-uniapp/components/watermark/watermark.vue
@@ -0,0 +1,195 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="_._style([customStyle])"
+  >
+    <block v-if="content">
+      {{ content }}
+    </block>
+    <slot name="content" />
+    <slot />
+    <canvas
+      :id="canvasId"
+      :canvas-id="canvasId"
+      type="2d"
+      :style="canvasStyle"
+    />
+    <view
+      :class="movable ? 'watermark-move' : ''"
+      :style="_._style(watermarkStyle)"
+    />
+  </view>
+</template>
+
+<script>
+import _ from '../common/utils.wxs';
+import watermarkProps from './props';
+import { prefix } from '../common/config';
+import { uniComponent } from '../common/src/index';
+import { appBaseInfo, nextTick } from '../common/utils';
+import generateBase64Url from './utils/generateBase64Url';
+import randomMovingStyle from './utils/randomMovingStyle';
+
+const name = `${prefix}-watermark`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    ...watermarkProps,
+  },
+  data() {
+    return {
+      classPrefix: name,
+      _,
+      watermarkStyle: {},
+      initialed: false,
+      canvasId: `watermark-canvas-${Math.random().toString(36)
+        .slice(2, 11)}`,
+    };
+  },
+  computed: {
+    canvasStyle() {
+      let result = 'width: 100px; height: 100px;';
+      let shouldHide = true;
+
+      // #ifdef APP-PLUS || MP-ALIPAY
+      if (!this.initialed) {
+        shouldHide = false;
+      }
+      // #endif
+
+      if (shouldHide) {
+        result += 'display: none;';
+      }
+      return result;
+    },
+  },
+  watch: {
+    watermarkContent: 'renderWatermark',
+    movable: 'renderWatermark',
+    rotate: 'renderWatermark',
+    x: 'renderWatermark',
+    y: 'renderWatermark',
+    width: 'renderWatermark',
+    height: 'renderWatermark',
+    alpha: 'renderWatermark',
+    lineSpace: 'renderWatermark',
+    moveInterval: 'renderWatermark',
+    zIndex: 'renderWatermark',
+    offset: 'renderWatermark',
+    removable: 'renderWatermark',
+    isRepeat: 'renderWatermark',
+    layout: 'renderWatermark',
+  },
+  async mounted() {
+    await nextTick();
+    this.renderWatermark();
+  },
+  methods: {
+    watermarkColor() {
+      return appBaseInfo.theme === 'dark'
+        ? 'rgba(238, 238, 238, 0.1)'
+        : 'rgba(0, 0, 0, 0.1)';
+    },
+    renderWatermark() {
+      const query = uni.createSelectorQuery().in(this);
+
+      query
+        .select(`#${this.canvasId}`)
+        .fields({ node: true, size: true })
+        .exec(async (res) => {
+          if (!res[0]?.node) {
+            console.error('Canvas node not found');
+            return;
+          }
+          const canvas = res[0].node;
+          const gapX = this.movable ? 0 : this.x;
+          const gapY = this.movable ? 0 : this.y;
+          const offset = this.offset || [];
+          const offsetLeft = offset[0] || gapX / 2;
+          const offsetTop = offset[1] || gapY / 2;
+
+          const bgImageOptions = {
+            width: this.width,
+            height: this.height,
+            rotate: this.movable ? 0 : this.rotate,
+            lineSpace: this.lineSpace,
+            alpha: this.alpha,
+            gapX,
+            gapY,
+            watermarkContent: this.watermarkContent,
+            offsetLeft,
+            offsetTop,
+            watermarkColor: this.watermarkColor(),
+            layout: this.layout,
+          };
+          generateBase64Url.call(
+            this,
+            canvas,
+            this.canvasId,
+            bgImageOptions,
+            (base64Url, backgroundSize) => {
+              let animationVars = {};
+              if (this.movable) {
+                const {
+                  left0,
+                  left25,
+                  left50,
+                  left75,
+                  top0,
+                  top25,
+                  top50,
+                  top75,
+                } = randomMovingStyle();
+                animationVars = {
+                  '--watermark-left-0': left0,
+                  '--watermark-left-25': left25,
+                  '--watermark-left-50': left50,
+                  '--watermark-left-75': left75,
+                  '--watermark-top-0': top0,
+                  '--watermark-top-25': top25,
+                  '--watermark-top-50': top50,
+                  '--watermark-top-75': top75,
+                  '--watermark-animation-duration': `${
+                    (this.moveInterval * 4) / 60
+                  }s`,
+                };
+              }
+
+              this.watermarkStyle = {
+                zIndex: this.zIndex,
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: '100%',
+                height: '100%',
+                backgroundSize: `${
+                  backgroundSize?.width || gapX + this.width
+                }px`,
+                pointerEvents: 'none',
+                backgroundRepeat: this.movable ? 'no-repeat' : 'repeat',
+                backgroundImage: `url('${base64Url}')`,
+                ...animationVars,
+              };
+            },
+            () => {
+              this.initialed = true;
+            },
+          ).catch((e) => {
+            console.log('e', e);
+          });
+        });
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './watermark.css';
+</style>
diff --git a/packages/tdesign-uniapp/example/.env.production b/packages/tdesign-uniapp/example/.env.production
new file mode 100644
index 000000000..237d79c0d
--- /dev/null
+++ b/packages/tdesign-uniapp/example/.env.production
@@ -0,0 +1 @@
+VUE_APP_PUBLICPATH = https://cdn.uwayfly.com/tdesign-uniapp/mobile
diff --git a/packages/tdesign-uniapp/example/docs/img/github-pages.png b/packages/tdesign-uniapp/example/docs/img/github-pages.png
new file mode 100644
index 0000000000000000000000000000000000000000..43e4e081a3cd14e577a7d320d500815ee73b1da1
GIT binary patch
literal 23979
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

literal 0
HcmV?d00001

diff --git a/packages/tdesign-uniapp/example/docs/img/tdesign-uniapp-mp.png b/packages/tdesign-uniapp/example/docs/img/tdesign-uniapp-mp.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca797c8264fd4549809d52639f3a09457bbda6f9
GIT binary patch
literal 89667
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

literal 0
HcmV?d00001

diff --git a/packages/tdesign-uniapp/example/index.html b/packages/tdesign-uniapp/example/index.html
new file mode 100644
index 000000000..b8246deeb
--- /dev/null
+++ b/packages/tdesign-uniapp/example/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon"
+    href="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/10/own_mike_tYYDt364MCtSXHsn.ico">
+  <script>
+    var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+      CSS.supports('top: constant(a)'))
+    document.write(
+      '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+      (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+  </script>
+  <title>TDesign UniApp</title>
+  <!--preload-links-->
+  <!--app-context-->
+</head>
+
+<body>
+  <div id="app"><!--app-html--></div>
+  <script type="module" src="/src/main.ts"></script>
+  <script>
+    !function (a) { var b = a.createElement("script"); b.onload = function () { TouchEmulator(); }, b.src = "https://tdesign.gtimg.com/js/touch-emulator.js", a.body.appendChild(b) }(document);
+  </script>
+</body>
+
+</html>
diff --git a/packages/tdesign-uniapp/example/package.json b/packages/tdesign-uniapp/example/package.json
new file mode 100644
index 000000000..a58d5bf6a
--- /dev/null
+++ b/packages/tdesign-uniapp/example/package.json
@@ -0,0 +1,87 @@
+{
+  "name": "tdesign-uniapp-example",
+  "version": "0.0.1",
+  "private": "true",
+  "scripts": {
+    "postbuild:h5": "mkdir -p ../site/dist/mobile && cp -r dist/build/h5/* ../site/dist/mobile",
+    "dev:custom": "uni -p",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:mp-xhs": "uni -p mp-xhs",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:mp-xhs": "uni build -p mp-xhs",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
+    "@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
+    "@dcloudio/uni-components": "3.0.0-4030620241128001",
+    "@dcloudio/uni-h5": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-compiler": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
+    "dayjs": "^1.11.18",
+    "t-comm": "^2.0.26",
+    "tinycolor2": "^1.6.0",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.1.9"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-automator": "3.0.0-4030620241128001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
+    "@plugin-light/vite-plugin-gen-version": "^1.0.1",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.7.0",
+    "chokidar": "^4.0.3",
+    "cos-nodejs-sdk-v5": "^2.15.4",
+    "glob": "^11.0.3",
+    "gulp": "^5.0.1",
+    "gulp-watch": "^5.0.1",
+    "less": "^4.4.0",
+    "postcss": "^8.5.6",
+    "postcss-rpx-transform": "^1.0.1",
+    "sass": "^1.90.0",
+    "tdesign-uniapp": "workspace:*",
+    "tdesign-uniapp-auto-import-resolver": "0.1.3",
+    "unplugin-auto-import": "^20.2.0",
+    "unplugin-vue-components": "^29.2.0",
+    "vite": "6.3.6",
+    "vue-tsc": "^1.0.24"
+  }
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/example/script/deploy/cdn.js b/packages/tdesign-uniapp/example/script/deploy/cdn.js
new file mode 100644
index 000000000..79b700454
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/deploy/cdn.js
@@ -0,0 +1,73 @@
+const { uploadCOSFileAndPurgeUrlCache } = require('t-comm');
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+require('./local.env')();
+const args = process.argv.slice(2);
+
+
+const COS_CONFIG = {
+  bucket: 'mike-1255355338',
+  region: 'ap-guangzhou',
+  secretId: args[0] || process.env.COS_SECRET_ID,
+  secretKey: args[1] || process.env.COS_SECRET_KEY,
+  isChat: args[2] == 1,
+};
+
+const CONFIG = {
+  UNIAPP_SITE_GLOB: './packages/site/dist/**/*',
+  UNIAPP_CHAT_SITE_GLOB: './packages/site-chat/dist/**/*',
+
+  UNIAPP_PREFIX: 'tdesign-uniapp',
+  UNIAPP_CHAT_PREFIX: 'tdesign-uniapp-chat',
+
+  UNIAPP_SITE_PACKAGE_NAME: 'site',
+  UNIAPP_CHAT_SITE_PACKAGE_NAME: 'site-chat',
+};
+
+
+async function uploadCdn() {
+  const list = glob.sync(COS_CONFIG.isChat ? CONFIG.UNIAPP_SITE_GLOB
+    : CONFIG.UNIAPP_CHAT_SITE_GLOB, {
+    ignore: '**/*.html',
+    nodir: true,
+  });
+
+  const files = list.map((item) => {
+    const filePath = path.resolve(process.cwd(), item);
+    const key =  `${COS_CONFIG.isChat
+      ? CONFIG.UNIAPP_PREFIX
+      : CONFIG.UNIAPP_CHAT_PREFIX}/${path.relative(path.resolve(
+      process.cwd(),
+      `./packages/${COS_CONFIG.isChat
+        ? CONFIG.UNIAPP_SITE_PACKAGE_NAME
+        : CONFIG.UNIAPP_CHAT_SITE_PACKAGE_NAME}/dist`,
+    ), item)}`;
+
+    return {
+      key,
+      path: filePath,
+    };
+  });
+
+  for (const item of files) {
+    uploadCOSFileAndPurgeUrlCache({
+      ...COS_CONFIG,
+
+      files: [item],
+
+      area: 'mainland',
+      useEO: false,
+    }).then((res) => {
+      console.log('[uploadResult] res: ', res);
+
+      fs.unlinkSync(item.path);
+    })
+      .catch((e) => {
+        console.log('uploadCOSFileAndPurgeUrlCache.err: ', e);
+      });
+  }
+}
+
+uploadCdn();
diff --git a/packages/tdesign-uniapp/example/script/deploy/local.env.js b/packages/tdesign-uniapp/example/script/deploy/local.env.js
new file mode 100644
index 000000000..baba9f85e
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/deploy/local.env.js
@@ -0,0 +1,8 @@
+const path = require('path');
+
+function readLocalEnv() {
+  const configPath =  path.resolve(process.cwd(), './.env.local');
+  require('dotenv').config({ path: configPath });
+}
+
+module.exports = readLocalEnv;
diff --git a/packages/tdesign-uniapp/example/script/deploy/mine-doc.js b/packages/tdesign-uniapp/example/script/deploy/mine-doc.js
new file mode 100644
index 000000000..55e570ba6
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/deploy/mine-doc.js
@@ -0,0 +1,35 @@
+const path = require('path');
+
+const { execCommand } = require('t-comm');
+
+require('./local.env')();
+
+const args = process.argv.slice(2);
+const isChat = args[2] == 1;
+
+const DEPLOY_CONFIG = {
+  publishBash: path.resolve(__dirname, './publish.sh'),
+  distDir: isChat ? './packages/site-chat/dist/' : './packages/site/dist/',
+  hostTargetDir: isChat ? '/usr/share/nginx/html/tdesign-uniapp-chat/' : '/usr/share/nginx/html/tdesign-uniapp/',
+  hostName: args[0] || process.env.HOST_NAME,
+  hostPwd: args[1] || process.env.HOST_PWD,
+  HOST_PORT: 22,
+  root: process.cwd(),
+};
+
+async function main() {
+  console.log('[DEPLOY_CONFIG]', DEPLOY_CONFIG);
+
+
+  if (!DEPLOY_CONFIG.hostPwd || !DEPLOY_CONFIG.hostName) {
+    throw new Error('缺少环境变量');
+  }
+
+  execCommand(
+    `sh ${DEPLOY_CONFIG.publishBash} ${DEPLOY_CONFIG.distDir} ${DEPLOY_CONFIG.hostTargetDir} ${DEPLOY_CONFIG.hostName} ${DEPLOY_CONFIG.hostPwd} ${DEPLOY_CONFIG.HOST_PORT}`,
+    DEPLOY_CONFIG.root,
+    'inherit',
+  );
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/deploy/publish.sh b/packages/tdesign-uniapp/example/script/deploy/publish.sh
new file mode 100644
index 000000000..c778c941a
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/deploy/publish.sh
@@ -0,0 +1,32 @@
+#!/bin/sh
+set -e
+
+SOURCE_DIR_OR_FILE=$1
+TARGET_DIR=$2
+HOST_NAME=$3
+HOST_PWD=$4
+
+# - 符号：如果变量未定义，使用提供的值
+HOST_PORT=${5-36000}
+
+
+SOURCE_FILES=
+
+if [ -f "$SOURCE_DIR_OR_FILE" ]; then
+  SOURCE_FILES="$SOURCE_DIR_OR_FILE"
+elif [ -d "$SOURCE_DIR_OR_FILE" ]; then
+  SOURCE_FILES="$SOURCE_DIR_OR_FILE/*"
+else
+  echo "ERROR: SOURCE_DIR_OR_FILE 不为目录或文件"
+  exit 1
+fi
+
+expect -c "
+        set timeout 1200;
+        spawn bash -c \"scp -P $HOST_PORT -r $SOURCE_FILES root@$HOST_NAME:$TARGET_DIR\"
+        expect {
+                \"*yes/no*\" {send \"yes\r\"; exp_continue}
+                \"*password*\" {send \"$HOST_PWD\r\";}
+                \"*Password*\" {send \"$HOST_PWD\r\";}
+               }
+expect eof;"
diff --git a/packages/tdesign-uniapp/example/script/pages/config.js b/packages/tdesign-uniapp/example/script/pages/config.js
new file mode 100644
index 000000000..92c902c83
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/pages/config.js
@@ -0,0 +1,36 @@
+const DEFAULT_PAGES = [
+  {
+    path: 'pages/home/home',
+  },
+  {
+    path: 'pages/home/navigate-fail/index',
+  },
+  {
+    path: 'pages-more/result/result-page',
+  },
+  {
+    path: 'pages-more/indexes/custom/index',
+  },
+  {
+    path: 'pages-more/indexes/base/index',
+  },
+  {
+    path: 'pages-more/side-bar/base/index',
+  },
+  {
+    path: 'pages-more/side-bar/switch/index',
+  },
+  {
+    path: 'pages-more/side-bar/with-icon/index',
+  },
+  {
+    path: 'pages-more/side-bar/custom/index',
+  },
+];
+
+const SHOW_SKYLINE_PAGES = false;
+
+module.exports = {
+  DEFAULT_PAGES,
+  SHOW_SKYLINE_PAGES,
+};
diff --git a/packages/tdesign-uniapp/example/script/pages/index.js b/packages/tdesign-uniapp/example/script/pages/index.js
new file mode 100644
index 000000000..bf08a7112
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/pages/index.js
@@ -0,0 +1,107 @@
+const {
+  components,
+} = require('../utils/components.js');
+const path = require('path');
+const pagesJson = path.resolve(__dirname, '../../src/pages.json');
+const { writeFileSync, readFileSync, hyphenate } = require('t-comm');
+const { DEFAULT_PAGES, SHOW_SKYLINE_PAGES } = require('./config');
+
+
+const {
+  base,
+  skylineBase,
+  nav,
+  skylineNav,
+  display,
+  skylineDisplay,
+  form,
+  skylineForm,
+  ux,
+  skylineUx,
+  chat,
+  skylineChat,
+} = components;
+
+const getComponentPages = (list,  isSkyline) => list.reduce((acc, item) => [
+  ...acc,
+  ...(item.childArr || []).filter(page => !page.hide),
+], [])
+  .map((item) => {
+    const name = hyphenate(item.name);
+    const pagePathBaseComponent = `pages-more/${isSkyline ? `${name}/skyline` : `${name}`}/${name}`;
+    const { path } = item;
+    return {
+      name,
+      path: path ? path.replace(/^\//, '') : pagePathBaseComponent,
+    };
+  });
+
+function main() {
+  const list = [
+    // chat,
+    base,
+    nav,
+    form,
+    display,
+    ux,
+  ];
+  const skylineList = SHOW_SKYLINE_PAGES ? [
+    skylineChat,
+    skylineBase,
+    skylineNav,
+    skylineForm,
+    skylineDisplay,
+    skylineUx,
+  ] : [];
+
+  const componentPages = getComponentPages(list, false);
+  const skylinePages = getComponentPages(skylineList, true);
+
+  const rawData = readFileSync(pagesJson, true);
+  rawData.pages = [
+    ...DEFAULT_PAGES,
+    ...componentPages.map(item => ({
+      path: item.path,
+    })),
+    ...skylinePages.map(item => ({
+      path: item.path,
+      style: {
+        renderer: 'skyline',
+        componentFramework: 'glass-easel',
+      },
+    })),
+  ];
+  rawData.subPackages = [
+    ...chat.childArr.map((item) => {
+      const camelName = hyphenate(item.name);
+      return {
+        root: `pages-more/${camelName}`,
+        pages: [
+          {
+            path: camelName,
+          },
+        ],
+      };
+    }),
+  ];
+  rawData.condition = {
+    current: 0,
+    list: [
+      ...componentPages.map(item => ({
+        name: item.name,
+        pathName: item.path,
+      })),
+      ...rawData.subPackages.reduce((acc, item) => [
+        ...acc,
+        ...item.pages.map(page => ({
+          name: page.path,
+          pathName: `${item.root}/${page.path}`,
+        })),
+      ], []),
+    ],
+  };
+  writeFileSync(pagesJson, `${JSON.stringify(rawData, null, 2)}\n`, false);
+  console.log('[pages.json] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/release/config.js b/packages/tdesign-uniapp/example/script/release/config.js
new file mode 100644
index 000000000..b43644936
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/config.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+const config = {
+  targetDir: path.resolve(__dirname, '../../../../npm_dist'),
+  sourceDir: path.resolve(__dirname, '../../../tdesign'),
+  sourceGlob: path.resolve(__dirname, '../../../tdesign/**/*'),
+
+  chatTargetDir: path.resolve(__dirname, '../../../../npm_dist_chat'),
+  chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
+  chatSourceGlob: path.resolve(__dirname, '../../../tdesign-uniapp-chat/**/*'),
+
+  demoDir: path.resolve(__dirname, '../../src/pages-more'),
+};
+
+
+module.exports = {
+  config,
+};
diff --git a/packages/tdesign-uniapp/example/script/release/core.js b/packages/tdesign-uniapp/example/script/release/core.js
new file mode 100644
index 000000000..c9ec5c058
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/core.js
@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const { processLess } = require('./less');
+
+
+async function copy({
+  relativePath, filePath, config,
+}) {
+  const isDemo = relativePath.split(path.sep)[1] === '_example';
+  let targetPath = path.resolve(config.targetDir, relativePath);
+  if (isDemo) {
+    targetPath = path.resolve(config.demoDir, relativePath.replace(`${path.sep}_example`, ''));
+  }
+  fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+
+  const lessResult = await processLess(filePath, targetPath);
+  if (!lessResult) {
+    fs.copyFileSync(filePath, targetPath);
+  }
+
+  return {
+    targetPath,
+    isDemo,
+    relativeTargetByCwd: path.relative(process.cwd(), targetPath),
+    relativeSourceByCwd: path.relative(process.cwd(), filePath),
+  };
+}
+
+module.exports = {
+  copy,
+};
diff --git a/packages/tdesign-uniapp/example/script/release/less.js b/packages/tdesign-uniapp/example/script/release/less.js
new file mode 100644
index 000000000..7c1c66573
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/less.js
@@ -0,0 +1,84 @@
+const fs = require('fs');
+const path = require('path');
+const less = require('less');
+const postcss = require('postcss');
+const rpxTransform = require('postcss-rpx-transform');
+
+const CONFIG = {
+  whiteList: [
+    path.resolve(process.cwd(), 'packages/tdesign/common/style/theme/index.less'),
+    path.resolve(process.cwd(), 'packages/tdesign/common/style/base.less'),
+    path.resolve(process.cwd(), 'packages/tdesign/common/style/_variables.less'),
+    path.resolve(process.cwd(), 'packages/tdesign/common/style/mixins/'),
+    path.resolve(process.cwd(), 'packages/tdesign/common/style/theme/raw/'),
+  ],
+};
+
+// 配置参数（通常 1rpx=0.5px，设计稿 750px 宽时）
+const options = {
+  transformType: 'rpx',
+  rpxUnit: 0.5,      // 转换比例 1rpx = 0.5px
+  rpxPrecision: 6,    // 输出精度
+};
+
+// 处理流程
+async function processLess(inputFile, rawOutputFile, rawOutputFileInApp) {
+  if (!inputFile.endsWith('.less')) return;
+  if (CONFIG.whiteList.find(item => inputFile.startsWith(item))) {
+    return;
+  }
+
+  try {
+    let lessCode = fs.readFileSync(inputFile, 'utf8');
+
+    lessCode = lessCode.replace('@import \'tdesign-uniapp/common/style/base.less\'', '@import \'../common/style/base.less\'');
+
+    const cssResult = await less.render(lessCode, {
+      // 设置导入路径
+      paths: [
+        path.join(__dirname, '../../../tdesign/common'),
+        path.join(__dirname, '../../../tdesign/common/style'),
+        path.join(__dirname, '../../../tdesign/common/style/mixins'),
+        path.join(__dirname, '../../../tdesign/common/style/theme'),
+      ],
+    });
+
+    const postcssResult = await postcss([
+      rpxTransform(options),
+    ]).process(cssResult.css, { from: undefined });
+
+
+    const getOutputFile = (rawOutputFile) => {
+      const filename = `${path
+        .basename(rawOutputFile, path.extname(rawOutputFile))
+        .replace(/^_/, '')}.css`;
+
+      const outputFile = path.resolve(path.dirname(rawOutputFile), filename);
+      console.log('filename', filename);
+
+      return outputFile;
+    };
+
+
+    const outputFile = getOutputFile(rawOutputFile);
+    fs.writeFileSync(outputFile, postcssResult.css);
+    console.log(`✅ 转换完成: ${outputFile}`);
+
+    if (rawOutputFileInApp) {
+      const outputFile = getOutputFile(rawOutputFileInApp);
+
+      fs.writeFileSync(outputFile, postcssResult.css);
+      console.log(`✅ 转换完成: ${outputFile}`);
+    }
+    return true;
+  } catch (err) {
+    console.error('❌ 处理失败:', err);
+  }
+}
+
+module.exports = {
+  processLess,
+};
+
+// 使用示例
+// processLess(path.resolve(process.cwd(), 'packages/tdesign/common/style/mixins/_hairline.less'), 'styles.css');
diff --git a/packages/tdesign-uniapp/example/script/release/prepare.js b/packages/tdesign-uniapp/example/script/release/prepare.js
new file mode 100644
index 000000000..06ceb0ec0
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/prepare.js
@@ -0,0 +1,64 @@
+const path = require('path');
+const glob = require('glob');
+const { deleteFolder } = require('t-comm');
+
+const { config } = require('./config');
+const { copy } = require('./core.js');
+
+async function main() {
+  const {
+    targetDir,
+    sourceGlob,
+    sourceDir,
+
+    chatTargetDir,
+    chatSourceDir,
+    chatSourceGlob,
+  } = config;
+
+  await prepareOne({
+    targetDir,
+    sourceGlob,
+    sourceDir,
+  });
+  await prepareOne({
+    targetDir: chatTargetDir,
+    sourceGlob: chatSourceGlob,
+    sourceDir: chatSourceDir,
+  });
+}
+
+async function prepareOne({
+  targetDir,
+  sourceGlob,
+  sourceDir,
+}) {
+  deleteFolder(targetDir);
+  const list = glob.sync(sourceGlob, {
+    ignore: '**/{node_modules,_example}/**/*',
+    nodir: true,
+    dot: true,
+  });
+
+  for (const item of list) {
+    const relativePath = path.relative(sourceDir, item);
+    const {
+      relativeTargetByCwd,
+      relativeSourceByCwd,
+    } = await copy({
+      relativePath,
+      filePath: item,
+      config: {
+        targetDir,
+        sourceGlob,
+        sourceDir,
+      },
+    });
+    console.log(`[Wrote] done! \nFrom ${relativeSourceByCwd} to ${relativeTargetByCwd}`);
+  }
+
+  console.log(`[Wrote] done! Length is ${list.length}!`);
+}
+
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/release/publish-core.js b/packages/tdesign-uniapp/example/script/release/publish-core.js
new file mode 100644
index 000000000..dd967d22c
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/publish-core.js
@@ -0,0 +1,27 @@
+const { execCommand, readFileSync } = require('t-comm');
+const path = require('path');
+
+
+function getTag(version) {
+  if (version.includes('alpha')) {
+    return 'alpha';
+  }
+  if (version.includes('beta')) {
+    return 'beta';
+  }
+  return 'latest';
+}
+
+function publishCore(publishDir) {
+  const { version } = readFileSync(path.resolve(publishDir, 'package.json'), true);
+  console.log('[version] ', version);
+
+  const tag = getTag(version);
+  console.log('[tag] ', version);
+
+  execCommand(`npm publish --tag ${tag}`, publishDir, { stdio: 'inherit' });
+}
+
+module.exports = {
+  publishCore,
+};
diff --git a/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp-chat.js b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp-chat.js
new file mode 100644
index 000000000..a94dde615
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp-chat.js
@@ -0,0 +1,12 @@
+const { publishCore } = require('./publish-core');
+const path = require('path');
+
+const PUBLISH_DIR = path.resolve(__dirname, '../../../../npm_dist');
+
+console.log('[PUBLISH_DIR]', PUBLISH_DIR);
+
+function main() {
+  publishCore(PUBLISH_DIR);
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
new file mode 100644
index 000000000..45e8a04c0
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
@@ -0,0 +1,12 @@
+const { publishCore } = require('./publish-core');
+const path = require('path');
+
+const PUBLISH_DIR = path.resolve(__dirname, '../../../../npm_dist_chat');
+
+console.log('[PUBLISH_DIR]', PUBLISH_DIR);
+
+function main() {
+  publishCore(PUBLISH_DIR);
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/sync/demo-vue-css.js b/packages/tdesign-uniapp/example/script/sync/demo-vue-css.js
new file mode 100644
index 000000000..5fd31ada4
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/sync/demo-vue-css.js
@@ -0,0 +1,39 @@
+// demo 中 css 纳入 vue
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+const { writeFileSync, readFileSync  } = require('t-comm');
+
+const config = {
+  target: path.resolve(__dirname, '../../../tdesign'),
+  source: path.resolve(__dirname, '../../../../../tdesign-miniprogram/packages/components'),
+};
+
+function parseOne(file) {
+  const filename = path.basename(file, path.extname(file));
+  const vuePath = path.resolve(path.dirname(file), `${filename}.vue`);
+  const content = readFileSync(vuePath);
+
+  if (content.includes('@import \'./index.css\';')) {
+    const sassContent = readFileSync(file);
+    const newVueContent = content.replace('@import \'./index.css\';\n', sassContent);
+    writeFileSync(vuePath, newVueContent);
+
+    if (!sassContent.trim()) {
+      fs.unlinkSync(file);
+    }
+  }
+}
+
+function main() {
+  const list = glob.sync(`${config.target}/*/_example/*/*.css`, {
+    ignore: '**/node_modules/**/*',
+    nodir: true,
+  });
+
+  list.slice(0, 1000).forEach(parseOne);
+  console.log('[Parsed] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/sync/doc-common-design.js b/packages/tdesign-uniapp/example/script/sync/doc-common-design.js
new file mode 100644
index 000000000..d502700b8
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/sync/doc-common-design.js
@@ -0,0 +1,26 @@
+// 拷贝组件设计指南
+
+const glob = require('glob');
+const path = require('path');
+
+const { writeFileSync, readFileSync  } = require('t-comm');
+
+const config = {
+  target: path.resolve(__dirname, '../../../site/docs/design'),
+  source: path.resolve(__dirname, '../../../../../tdesign-miniprogram/packages/common/docs/mobile/design'),
+};
+
+function cpFile(file) {
+  const filename = path.basename(file);
+  const targetPath = path.resolve(config.target, filename);
+
+  writeFileSync(targetPath, readFileSync(file));
+}
+
+function main() {
+  const list = glob.sync(`${config.source}/*.md`);
+  list.forEach(cpFile);
+  console.log('[less] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/sync/doc-component.js b/packages/tdesign-uniapp/example/script/sync/doc-component.js
new file mode 100644
index 000000000..bddadff35
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/sync/doc-component.js
@@ -0,0 +1,31 @@
+// 拷贝组件文档
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+const { writeFileSync, readFileSync  } = require('t-comm');
+
+const config = {
+  target: path.resolve(__dirname, '../../../tdesign'),
+  source: path.resolve(__dirname, '../../../../../tdesign-miniprogram/packages/components'),
+};
+
+function cpFile(file) {
+  const list = file.split(path.sep);
+  const componentName = list[list.length - 2];
+
+  const filename = path.basename(file);
+  const targetPath = path.resolve(config.target, componentName, filename);
+
+  if (fs.existsSync(path.dirname(targetPath))) {
+    writeFileSync(targetPath, readFileSync(file));
+  }
+}
+
+function main() {
+  const list = glob.sync(`${config.source}/*/*.md`);
+  list.forEach(cpFile);
+  console.log('[less] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/sync/doc-format.js b/packages/tdesign-uniapp/example/script/sync/doc-format.js
new file mode 100644
index 000000000..0b8ea79e9
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/sync/doc-format.js
@@ -0,0 +1,32 @@
+// 格式化文档，去掉多余空格
+const glob = require('glob');
+const path = require('path');
+
+const { writeFileSync, readFileSync  } = require('t-comm');
+
+const config = {
+  target: path.resolve(__dirname, '../../../tdesign'),
+  source: path.resolve(__dirname, '../../../../../tdesign-miniprogram/packages/components'),
+};
+
+function cpLess(file) {
+  const content = readFileSync(file);
+  const reg = /([\s\S]+?)(##\s+API[\s\S]+)/;
+
+  const newContent = content.replace(reg, (_, a, b) => {
+    const result = a + b.replace(/[^\S\r\n]+/g, ' ');
+    return result;
+  });
+
+  console.log('==', file, newContent === content);
+
+  writeFileSync(file, newContent);
+}
+
+function main() {
+  const list = glob.sync(`${config.target}/*/README.en-US.md`);
+  list.slice(0, 100).forEach(cpLess);
+  console.log('[less] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/sync/less.js b/packages/tdesign-uniapp/example/script/sync/less.js
new file mode 100644
index 000000000..105cc2781
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/sync/less.js
@@ -0,0 +1,34 @@
+// 拷贝 less 文件
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+const { writeFileSync, readFileSync  } = require('t-comm');
+
+const config = {
+  target: path.resolve(__dirname, '../../../tdesign'),
+  source: path.resolve(__dirname, '../../../../../tdesign-miniprogram/packages/components'),
+};
+
+function cpLess(file) {
+  const componentName = path.basename(file, '.less');
+  const targetPath = path.resolve(config.target, componentName, `${componentName}.less`);
+
+  // for copy less of tdesign-miniprogram
+  if (fs.existsSync(path.dirname(targetPath))) {
+    writeFileSync(targetPath, readFileSync(file));
+  }
+
+  // for delete useless files
+  // if (fs.existsSync(path.resolve(config.target, componentName, 'type.js'))) {
+  //   fs.unlinkSync(path.resolve(config.target, componentName, 'type.js'));
+  // }
+}
+
+function main() {
+  const list = glob.sync(`${config.source}/*/*.less`);
+  list.forEach(cpLess);
+  console.log('[less] Wrote!');
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/utils/components.js b/packages/tdesign-uniapp/example/script/utils/components.js
new file mode 100644
index 000000000..ff5255f93
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/utils/components.js
@@ -0,0 +1,24 @@
+const { base, skylineBase } = require('../../src/pages/home/data/base.json');
+const { nav, skylineNav } = require('../../src/pages/home/data/nav.json');
+const { display, skylineDisplay } = require('../../src/pages/home/data/display.json');
+const { form, skylineForm } = require('../../src/pages/home/data/form.json');
+const { ux, skylineUx } = require('../../src/pages/home/data/ux.json');
+const { chat, skylineChat } = require('../../src/pages/home/data/chat.json');
+
+
+module.exports = {
+  components: {
+    base,
+    skylineBase,
+    nav,
+    skylineNav,
+    display,
+    skylineDisplay,
+    form,
+    skylineForm,
+    ux,
+    skylineUx,
+    chat,
+    skylineChat,
+  },
+};
diff --git a/packages/tdesign-uniapp/example/script/utils/utils.js b/packages/tdesign-uniapp/example/script/utils/utils.js
new file mode 100644
index 000000000..f6087aa06
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/utils/utils.js
@@ -0,0 +1,9 @@
+const toPascal = name => name
+  .split('-')
+  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+  .join('');
+
+
+module.exports = {
+  toPascal,
+};
diff --git a/packages/tdesign-uniapp/example/script/watch/config.js b/packages/tdesign-uniapp/example/script/watch/config.js
new file mode 100644
index 000000000..1f8b68546
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/watch/config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+
+const config = {
+  targetDir: path.resolve(__dirname, '../../src/_tdesign'),
+  rawTargetDir: path.resolve(__dirname, '../../src/_tdesign-raw'),
+  rawTargetDirInApp: path.resolve(__dirname, '../../../tdesign-app/tdesign-uniapp-raw'),
+
+  sourceDir: path.resolve(__dirname, '../../../tdesign'),
+  chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
+
+  sourceGlob: path.resolve(__dirname, '../../../tdesign/**/*'),
+  chatSourceGlob: path.resolve(__dirname, '../../../tdesign-uniapp-chat/**/*'),
+  baseAndChatSourceGlob: path.resolve(__dirname, '../../../{tdesign,tdesign-uniapp-chat}/**/*'),
+
+  demoDir: path.resolve(__dirname, '../../src/pages-more'),
+
+  demoRealDir: path.resolve(__dirname, '../../'),
+
+  demoPagesGlob: path.resolve(__dirname, '../../src/pages/**/*'),
+  demoComponentsGlob: path.resolve(__dirname, '../../src/components/**/*'),
+
+  appDir: path.resolve(__dirname, '../../../tdesign-app'),
+  appPagesMoreDir: path.resolve(__dirname, '../../../tdesign-app/pages-more'),
+  appComponentsDir: path.resolve(__dirname, '../../../tdesign-app/components'),
+  appPagesDir: path.resolve(__dirname, '../../../tdesign-app/pages'),
+};
+
+
+module.exports = {
+  config,
+};
diff --git a/packages/tdesign-uniapp/example/script/watch/core.js b/packages/tdesign-uniapp/example/script/watch/core.js
new file mode 100644
index 000000000..51ac84da4
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/watch/core.js
@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+const { processLess } = require('../release/less');
+
+
+async function copy({
+  relativePath, filePath, config,
+}) {
+  const isDemo = relativePath.split(path.sep)[1] === '_example';
+  const isCommon = relativePath.split(path.sep)[0] === 'common';
+  let targetPath = path.resolve(config.targetDir, relativePath);
+  let targetPathInApp = path.resolve(config.appDir, 'uni_modules/tdesign-uniapp/components', relativePath);
+  const rawTargetPath = path.resolve(config.rawTargetDir, relativePath);
+  const rawTargetPathInApp = path.resolve(config.rawTargetDirInApp, relativePath);
+
+  if (isCommon) {
+    fs.mkdirSync(path.dirname(rawTargetPath), { recursive: true });
+    fs.mkdirSync(path.dirname(rawTargetPathInApp), { recursive: true });
+    fs.copyFileSync(filePath, rawTargetPath);
+    fs.copyFileSync(filePath, rawTargetPathInApp);
+  }
+
+
+  if (isDemo) {
+    targetPath = path.resolve(config.demoDir, relativePath.replace(`${path.sep}_example`, ''));
+    targetPathInApp = path.resolve(config.appPagesMoreDir, relativePath.replace(`${path.sep}_example`, ''));
+  }
+
+  fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+  if (targetPathInApp) {
+    fs.mkdirSync(path.dirname(targetPathInApp), { recursive: true });
+  }
+
+  let lessResult = false;
+  if (!filePath.includes('_example')) {
+    lessResult = await processLess(filePath, targetPath, targetPathInApp);
+  }
+
+  if (!lessResult) {
+    fs.copyFileSync(filePath, targetPath);
+    if (targetPathInApp) {
+      fs.copyFileSync(filePath, targetPathInApp);
+    }
+  }
+
+  return {
+    targetPath,
+    isDemo,
+    relativeTargetByCwd: path.relative(process.cwd(), targetPath),
+    relativeSourceByCwd: path.relative(process.cwd(), filePath),
+  };
+}
+
+module.exports = {
+  copy,
+};
diff --git a/packages/tdesign-uniapp/example/script/watch/init.js b/packages/tdesign-uniapp/example/script/watch/init.js
new file mode 100644
index 000000000..f1a866262
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/watch/init.js
@@ -0,0 +1,72 @@
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const { config } = require('./config');
+const { copy } = require('./core');
+const { deleteFolder } = require('t-comm');
+
+
+async function copyOneProject({
+  globMode,
+  sourceDir,
+}) {
+  const list = glob.sync(globMode, {
+    ignore: '**/node_modules/**/*',
+    nodir: true,
+  });
+
+  for (const item of list) {
+    const relativePath = path.relative(sourceDir, item);
+    await copy({
+      relativePath,
+      filePath: item,
+      config,
+    });
+  }
+
+  console.log(`[Wrote] done! Length is ${list.length}!`);
+}
+
+
+async function main() {
+  deleteFolder(config.targetDir);
+  deleteFolder(config.rawTargetDir);
+  deleteFolder(config.rawTargetDirInApp);
+  deleteFolder(config.demoDir);
+
+  deleteFolder(config.appComponentsDir);
+  deleteFolder(config.appPagesMoreDir);
+  deleteFolder(config.appPagesDir);
+
+  await copyOneProject({
+    globMode: config.sourceGlob,
+    sourceDir: config.sourceDir,
+  });
+  await copyOneProject({
+    globMode: config.chatSourceGlob,
+    sourceDir: config.chatSourceDir,
+  });
+
+  await copyDemoPagesToApp();
+}
+
+
+async function copyDemoPagesToApp() {
+  const list = glob.sync([config.demoPagesGlob, config.demoComponentsGlob], {
+    ignore: '**/node_modules/**/*',
+    nodir: true,
+  });
+
+  for (const item of list) {
+    const relativePath = path.relative(path.resolve(config.demoRealDir, 'src'), item);
+
+    const targetPath = path.resolve(config.appDir, relativePath);
+
+    fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+    fs.copyFileSync(item, targetPath);
+  }
+
+  console.log(`[Wrote] done! Length of App Files is ${list.length}!`);
+}
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/watch/types.js b/packages/tdesign-uniapp/example/script/watch/types.js
new file mode 100644
index 000000000..4b31f5af8
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/watch/types.js
@@ -0,0 +1,136 @@
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+const { writeFileSync } = require('t-comm');
+const { toPascal } = require('../utils/utils');
+
+
+const CONFIG = {
+  pkgJsonPath: path.resolve(__dirname, '../../../tdesign/package.json'),
+  chatPkgJsonPath: path.resolve(__dirname, '../../../tdesign-uniapp-chat/package.json'),
+
+  dtsDir: path.resolve(__dirname, '../../../tdesign/types'),
+  chatDtsDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat/types'),
+
+  indexPath: path.resolve(__dirname, '../../../tdesign/types/index.d.ts'),
+  chatIndexPath: path.resolve(__dirname, '../../../tdesign-uniapp-chat/types/index.d.ts'),
+
+  globalDTSPath: path.resolve(__dirname, '../../../tdesign/global.d.ts'),
+  chatGlobalDTSPath: path.resolve(__dirname, '../../../tdesign-uniapp-chat/global.d.ts'),
+  filterTypes: ['form-item'],
+};
+
+const OTHER_EXPORTS = {
+  './*': './*',
+};
+
+const getDTSTemplate = isChat => `import type { TransformEventHandlers, ExtractNonOnProps } from '${isChat ? 'tdesign-uniapp' : '..'}/common/common';
+import type { Td{{Component}}Props } from '../{{component}}/type';
+
+export type {{Component}}Props = ExtractNonOnProps<Td{{Component}}Props>;
+export type {{Component}}Emits = TransformEventHandlers<Td{{Component}}Props, true>;
+declare const {{Component}}Component: import('vue').DefineComponent<{{Component}}Props, {}, {}, {}, {}, {}, {}, {{Component}}Emits, any>;
+export default {{Component}}Component;
+`;
+
+const GLOBAL_DTS_TEMPLATE = `declare module 'vue' {
+  export interface GlobalComponents {
+    {{CONTENT}}
+  }
+}
+
+export {};
+`;
+
+async function genOnProject({
+  pkgGlob,
+  pkgJsonPath,
+  dtsDir,
+  indexPath,
+  globalDTSPath,
+  isChat,
+}) {
+  const list = glob.sync(pkgGlob);
+  const filtered = list.filter((item) => {
+    const typeFile = path.resolve(item, '../type.ts');
+    return fs.existsSync(typeFile);
+  });
+
+  const fileNames = filtered.map(item => item.split(path.sep)[item.split(path.sep).length - 2]);
+  fileNames.sort();
+
+  changePkgExports(fileNames, pkgJsonPath);
+  genDTS({ list: fileNames, dtsDir, isChat });
+  genIndexContent(fileNames, indexPath);
+  getGlobalDTS(fileNames, globalDTSPath);
+}
+
+async function main() {
+  await genOnProject({
+    pkgGlob: 'packages/tdesign/*/*.vue',
+    pkgJsonPath: CONFIG.pkgJsonPath,
+    dtsDir: CONFIG.dtsDir,
+    indexPath: CONFIG.indexPath,
+    globalDTSPath: CONFIG.globalDTSPath,
+    isChat: false,
+  });
+
+  await genOnProject({
+    pkgGlob: 'packages/tdesign-uniapp-chat/*/*.vue',
+    pkgJsonPath: CONFIG.chatPkgJsonPath,
+    dtsDir: CONFIG.chatDtsDir,
+    indexPath: CONFIG.chatIndexPath,
+    globalDTSPath: CONFIG.chatGlobalDTSPath,
+    isChat: true,
+  });
+}
+
+
+function changePkgExports(fileNames, pkgJsonPath) {
+  const exportsType = fileNames.reduce((acc, item) => {
+    const key = `./${item}/${item}.vue`;
+    return {
+      ...acc,
+      [key]: {
+        types: `./types/${item}.d.ts`,
+        import: key,
+        default: key,
+      },
+    };
+  }, {
+    ...OTHER_EXPORTS,
+  });
+
+  const pkgJson = require(pkgJsonPath);
+  pkgJson.exports = exportsType;
+  writeFileSync(pkgJsonPath, `${JSON.stringify(pkgJson, null, 2)}\n`);
+}
+
+
+function genDTS({ list, dtsDir, isChat }) {
+  list.forEach((item) => {
+    const fileName = path.resolve(dtsDir, `${item}.d.ts`);
+    const content = getDTSTemplate(isChat)
+      .replaceAll('{{Component}}', toPascal(item))
+      .replaceAll('{{component}}', item);
+    writeFileSync(fileName, content);
+  });
+}
+
+function genIndexContent(fileNames, indexPath) {
+  const content = Array.from(new Set(fileNames))
+    .filter(item => !CONFIG.filterTypes.includes(item))
+    .map(item => `export * from '../${item}/type';`);
+  writeFileSync(indexPath, `${content.join('\n')}\n`);
+}
+
+function getGlobalDTS(fileNames, globalDTSPath) {
+  const content = Array.from(new Set(fileNames))
+    .map(item => `T${toPascal(item)}: typeof import('tdesign-uniapp/${item}/${item}.vue').default;`);
+
+  const result = GLOBAL_DTS_TEMPLATE.replace('{{CONTENT}}', content.join('\n    '));
+  writeFileSync(globalDTSPath, result);
+}
+
+
+main();
diff --git a/packages/tdesign-uniapp/example/script/watch/watch.js b/packages/tdesign-uniapp/example/script/watch/watch.js
new file mode 100644
index 000000000..7295f4d23
--- /dev/null
+++ b/packages/tdesign-uniapp/example/script/watch/watch.js
@@ -0,0 +1,69 @@
+const watch = require('gulp-watch');
+const path = require('path');
+const { config } = require('./config');
+const { copy } = require('./core');
+const net = require('net');
+const port = 12345; // 选择一个空闲端口
+
+
+function isPortInUse(port) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => resolve(true));
+    server.once('listening', () => {
+      server.close(() => resolve(false));
+    });
+    server.listen(port);
+  });
+}
+
+
+async function main() {
+  if (await isPortInUse(port)) {
+    console.log('[Watch] 监听已在其他终端运行');
+    return;
+  }
+  // 创建监听服务器（占用端口）
+  const server = net.createServer();
+  server.listen(port);
+
+
+  watch(config.baseAndChatSourceGlob, async (e) => {
+    const { event, history, base } = e || {};
+
+    if (event !== 'unlink' && history?.[0]) {
+      const filePath = history[0];
+      let relativePath = path.relative(base, filePath);
+      console.log('relativePath', relativePath);
+      if (relativePath.startsWith(`tdesign${path.sep}`) || relativePath.startsWith(`tdesign-uniapp-chat${path.sep}`)) {
+        relativePath = relativePath.split(path.sep).slice(1)
+          .join(path.sep);
+      }
+
+      console.log('base', base);
+      console.log('history', history);
+
+      const { relativeTargetByCwd, relativeSourceByCwd } = await copy({
+        relativePath,
+        filePath,
+        config,
+      });
+      console.log(`[Wrote] done! \nFrom ${relativeSourceByCwd} to ${relativeTargetByCwd}`);
+    }
+  });
+
+  // 监听进程终止信号
+  process.on('exit', () => server.close());
+  process.on('SIGINT', gracefulShutdown);
+  process.on('SIGTERM', gracefulShutdown);
+}
+
+
+// 优雅关闭函数
+function gracefulShutdown() {
+  console.log('\n[Watch] 收到终止信号，关闭监听器...');
+  process.exit(0); // 退出进程
+}
+
+
+main();
diff --git a/packages/tdesign-uniapp/example/src/App.vue b/packages/tdesign-uniapp/example/src/App.vue
new file mode 100644
index 000000000..4422fbf16
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/App.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
+onLaunch(() => {
+});
+onShow(() => {
+});
+onHide(() => {
+});
+</script>
diff --git a/packages/tdesign-uniapp/example/src/components/pull-down-list/index.less b/packages/tdesign-uniapp/example/src/components/pull-down-list/index.less
new file mode 100644
index 000000000..03cc867f4
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/components/pull-down-list/index.less
@@ -0,0 +1,60 @@
+.pullDownList {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--td-bg-color-container);
+  border-radius: 8rpx;
+  margin-bottom: 12rpx * 2;
+  overflow: hidden;
+
+  .switchBox {
+    height: 60rpx * 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16rpx * 2;
+    font-size: 16rpx * 2;
+    line-height: 24rpx * 2;
+    color: var(--td-text-color-secondary);
+  }
+
+  .name,
+  .icon {
+    transition: opacity 0.3s;
+  }
+
+  .name {
+    opacity: 0.9;
+  }
+
+  &.actived {
+    .name {
+      opacity: 0.4;
+    }
+
+    .icon {
+      opacity: 0.4;
+    }
+  }
+
+  .childBox {
+    transition: height 0.3s;
+
+    .child {
+      box-sizing: border-box;
+      border-bottom: 1rpx solid var(--td-component-stroke);
+      height: 56rpx * 2;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 16rpx * 2;
+      margin-right: 16rpx * 2;
+      font-size: 16rpx * 2;
+      opacity: 0.9;
+      color: var(--td-text-color-primary);
+
+      &:last-of-type {
+        border-bottom-color: transparent;
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/components/pull-down-list/index.vue b/packages/tdesign-uniapp/example/src/components/pull-down-list/index.vue
new file mode 100644
index 000000000..c696f9242
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/components/pull-down-list/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <view
+    class="pullDownList"
+    :class="[tClass, {
+      'actived': childBoxHeight > 0
+    }]"
+  >
+    <view
+      v-if="!!childArr.length"
+      class="switchBox"
+      aria-role="button"
+      :aria-expanded="!!childBoxHeight"
+      @click.stop="switchHandle"
+    >
+      <view class="name">
+        {{ name }}
+      </view>
+      <TIcon
+        :name="icon"
+        size="48rpx"
+        color="#A6A6A6"
+        t-class="icon"
+        aria-hidden
+      />
+    </view>
+    <view
+      class="childBox"
+      :style="''+`height: ${ childBoxHeight }rpx`"
+      :aria-hidden="!childBoxHeight"
+    >
+      <view
+        v-for="item of childArr"
+        :key="item.name"
+        class="child"
+        aria-role="button"
+        @click="() => clickChild(item)"
+      >
+        {{ item.name }} {{ item.label }}
+        <TIcon
+          name="chevron-right"
+          color="var(--td-text-color-placeholder)"
+          aria-hidden
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import TIcon from 'tdesign-uniapp/icon/icon.vue';
+
+const itemHeight = 56 * 2;
+const childBoxHeight = ref(0);
+defineOptions({
+  styleIsolation: 'shared',
+});
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean;
+  name?: string;
+  icon?: string;
+  childArr?: any[];
+  tClass?: string;
+}>(), {
+  defaultOpen: false,
+  name: '',
+  icon: '',
+  childArr: () => ([]),
+  tClass: '',
+});
+
+const emits = defineEmits(['click']);
+
+
+const switchHandle = () => {
+  childBoxHeight.value = childBoxHeight.value > 0
+    ? 0
+    : props.childArr.length * itemHeight;
+};
+
+
+const clickChild = (item) => {
+  emits('click', item);
+};
+
+</script>
+<style lang="less" src="./index.less" scoped></style>
diff --git a/packages/tdesign-uniapp/example/src/components/trd-privacy/index.less b/packages/tdesign-uniapp/example/src/components/trd-privacy/index.less
new file mode 100644
index 000000000..ca069b104
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/components/trd-privacy/index.less
@@ -0,0 +1,137 @@
+/* components/privacy/privacy.wxss */
+.privacy_wrap {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  background-color: #fff;
+  color: #222;
+  font-size: 24rpx;
+}
+.privacy_safe_area {
+  width: 750rpx;
+  height: 1180rpx;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.privacy_top {
+  padding: 50rpx 40rpx;
+  position: relative;
+  overflow: hidden;
+}
+.privacy_btn_back::before {
+  content: '<<';
+}
+.privacy_title {
+  height: 100%;
+  font-size: 32rpx;
+  font-weight: 700;
+  text-align: center;
+  line-height: 60rpx;
+}
+.privacy_right {
+  height: 48rpx;
+  line-height: 48rpx;
+  text-align: right;
+}
+.privacy_content {
+  height: 790rpx;
+  padding: 0 40rpx;
+  overflow: auto;
+  line-height: 32rpx;
+}
+.privacy_bold {
+  font-weight: 700;
+  display: inline-block;
+  padding-bottom: 12rpx;
+}
+.privacy_normal {
+  text-indent: 2em;
+  display: inline-block;
+  padding-bottom: 12rpx;
+}
+.privacy_btn_confirm {
+  width: 150rpx;
+  height: 92rpx;
+  padding: 0 85rpx;
+  border-radius: 16rpx;
+  border: #ccc solid 2rpx;
+  background-color: #06c15f;
+  font-size: 32rpx;
+  text-align: center;
+  line-height: 92rpx;
+  color: #fff;
+  margin: 30rpx auto 0;
+  text-indent: 0;
+}
+.privacy_tips_win {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.75);
+  color: #222;
+  font-size: 28rpx;
+}
+.privacy_win_content {
+  width: 100vw;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 50rpx 40rpx calc(env(safe-area-inset-bottom) + 50rpx + var(--window-bottom, 0)) 40rpx;
+  text-indent: 2em;
+  animation: privacy_up 0.2s forwards;
+  transform: translateY(100%);
+}
+@keyframes privacy_up {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.privacy_line {
+  display: inline-block;
+  vertical-align: middle;
+}
+.privacy_url {
+  color: #576b95;
+  text-indent: 0;
+  display: inline;
+  vertical-align: middle;
+}
+.privacy_tips_content {
+  line-height: 40rpx;
+  vertical-align: middle;
+}
+.privacy_middle {
+  width: 650rpx;
+  left: 50%;
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+  border-radius: 24rpx;
+  animation: none;
+}
+
+.footer {
+  width: 100%;
+  margin-top: 30rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-indent: 0;
+}
+.t-design-button {
+  width: 300rpx;
+}
diff --git a/packages/tdesign-uniapp/example/src/components/trd-privacy/index.vue b/packages/tdesign-uniapp/example/src/components/trd-privacy/index.vue
new file mode 100644
index 000000000..1e08feb22
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/components/trd-privacy/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <view
+    v-if="privacy"
+    class="privacy_wrap"
+  >
+    <view class="privacy_safe_area">
+      <view class="privacy_top">
+        <view class="privacy_title">
+          {{ name }}服务声明
+        </view>
+        <!-- <view class="privacy_right">
+          发布日期：{{ date }}
+        </view>
+        <view class="privacy_right">
+          生效日期：{{ date }}
+        </view> -->
+      </view>
+      <view class="privacy_content">
+        <!-- <text class="privacy_bold">
+          引言
+        </text>
+        <text
+          :decode="true"
+          class="privacy_normal"
+        >
+          {{ name }}是由深圳市腾讯计算机系统有限公司（以下简称“我们”）提供的产品，我们的注册地为深圳市南山区粤海街道麻岭社区科技中一路腾讯大厦35层。
+        </text> -->
+        <text
+          :decode="true"
+          class="privacy_bold"
+        >
+          我们在此特别声明：\n1.本小程序产品功能的实现不涉及收集和处理用户（以下简称“您”）的任何个人信息。\n2.如果我们更新、改进或修改小程序产品功能，并因此导致我们需要处理您的个人信息的，我们将会依据适用法律的要求对本声明进行修订，并将修订后的内容通过弹框等形式通知您并获得您同意。
+        </text>
+        <!-- <text
+          :decode="true"
+          class="privacy_normal"
+        >
+          3.如果您对本声明有任何疑问或建议，您可以通过以下方式与我们取得联系：\n（1）将问题发送至Dataprivacy@tencent.com;\n（2）通过https://kf.qq.com/与我们联系；\n（3）将您的问题邮寄至下列地址：\n\n中国广东省深圳市南山区海天二路33号腾讯滨海大厦\n数据隐私保护部（收）\n邮编：518054\n\n我们将尽快审核所涉问题，并在15个工作日或法律法规规定的期限内予以反馈。
+        </text> -->
+      </view>
+      <view class="footer">
+        <TButton
+          class="t-design-button"
+          theme="primary"
+          @click="privacyConfirm"
+        >
+          我已知晓
+        </TButton>
+      </view>
+    </view>
+  </view>
+  <view
+    v-if="win"
+    class="privacy_tips_win"
+  >
+    <view
+      class="privacy_win_content"
+      :class="{
+        'privacy_middle': winStyle
+      }"
+    >
+      <view class="privacy_tips_content">
+        我们将严格按照<text
+          class="privacy_url"
+          @click="showPrivacyDetail"
+        >
+          《{{ name }}服务声明》
+        </text>向您提供服务，不会收集和处理您的个人信息。
+      </view>
+      <!-- <view class="privacy_tips_content">
+        如您对<text
+          class="privacy_url"
+          @click="showPrivacyDetail"
+        >
+          《{{ name }}服务声明》
+        </text>有任何疑问或建议，可以通过声明内的联系方式向我们反馈。
+      </view> -->
+      <view class="footer">
+        <TButton
+          class="t-design-button"
+          theme="primary"
+          @click="privacyConfirm"
+        >
+          我已知晓
+        </TButton>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import TButton from 'tdesign-uniapp/button/button.vue';
+
+defineProps<{
+  name: string;
+  date: string;
+  winStyle?: boolean
+}>();
+
+const win = ref(false);
+const privacy = ref(false);
+
+
+const showPrivacyDetail = () => {
+  win.value = false;
+  privacy.value = true;
+};
+
+const privacyConfirm = () => {
+  win.value = false;
+  privacy.value = false;
+  uni.setStorageSync('TIMIShowPrivacy', true);
+};
+
+const showPrivacyWin = () => {
+  win.value = true;
+};
+
+defineExpose({
+  showPrivacyWin,
+});
+
+const checkPrivacy = () => {
+  const TIMIShowPrivacy = uni.getStorageSync('TIMIShowPrivacy');
+  // #ifdef MP-WEIXIN
+  if (!TIMIShowPrivacy) {
+    win.value = true;
+  }
+  // #endif
+};
+onMounted(() => {
+  checkPrivacy();
+});
+</script>
+<style lang="less" src="./index.less"></style>
diff --git a/packages/tdesign-uniapp/example/src/env.d.ts b/packages/tdesign-uniapp/example/src/env.d.ts
new file mode 100644
index 000000000..a735ff239
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/packages/tdesign-uniapp/example/src/main.ts b/packages/tdesign-uniapp/example/src/main.ts
new file mode 100644
index 000000000..2e1e7dbd7
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/main.ts
@@ -0,0 +1,22 @@
+import { createSSRApp } from 'vue';
+import App from './App.vue';
+import './style/app.less';
+import DemoBaseMixin from './mixins/demo-base.js';
+
+import TDemo from 'tdesign-uniapp/demo/demo.vue';
+import TNavbar from 'tdesign-uniapp/navbar/navbar.vue';
+import TDemoHeader from 'tdesign-uniapp/demo-header/demo-header.vue';
+
+
+export function createApp() {
+  const app = createSSRApp(App);
+
+  app.component('t-demo', TDemo);
+  app.component('t-demo-header', TDemoHeader);
+  app.component('t-navbar', TNavbar);
+
+  app.mixin(DemoBaseMixin);
+  return {
+    app,
+  };
+}
diff --git a/packages/tdesign-uniapp/example/src/manifest.json b/packages/tdesign-uniapp/example/src/manifest.json
new file mode 100644
index 000000000..89747bb91
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/manifest.json
@@ -0,0 +1,126 @@
+{
+  "name": "TDesign UniApp",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "darkmode": true,
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "modules": {},
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {}
+    }
+  },
+  "quickapp": {},
+  "h5": {
+    "darkmode": true
+  },
+  "mp-weixin": {
+    "appid": "wx9713aa2e5d67f6bd",
+    "darkmode": true,
+    "setting": {
+      "urlCheck": false,
+      "scopeDataCheck": false,
+      "coverView": true,
+      "es6": true,
+      "postcss": true,
+      "compileHotReLoad": false,
+      "preloadBackgroundData": false,
+      "minified": true,
+      "autoAudits": false,
+      "newFeature": true,
+      "uglifyFileName": false,
+      "uploadWithSourceMap": true,
+      "useIsolateContext": true,
+      "nodeModules": true,
+      "enhance": false,
+      "useCompilerModule": true,
+      "userConfirmedUseCompilerModuleSwitch": false,
+      "showShadowRootInWxmlPanel": true,
+      "skylineRenderEnable": true,
+      "bigPackageSizeSupport": true
+    },
+    "lazyCodeLoading": "requiredComponents",
+    "usingComponents": true,
+    "rendererOptions": {
+      "skyline": {
+        "disableABTest": true,
+        "defaultDisplayBlock": true,
+        "defaultContentBox": true,
+        "sdkVersionBegin": "3.4.3",
+        "sdkVersionEnd": "15.255.255"
+      }
+    }
+  },
+  "mp-qq": {
+    "appid": "1112328122",
+    "setting": {
+      "urlCheck": false,
+      "ignoreDevUnusedFiles": false,
+      "ignoreUploadUnusedFiles": false,
+      "minify": true,
+      "minifyJS": true,
+      "minifyWXSS": true,
+      "minified": true,
+      "es6": true,
+      "enhance": false
+    },
+    "usingComponents": true,
+    "lazyCodeLoading": "requiredComponents",
+    "optimization": {
+      "subPackages": true
+    }
+  },
+  "mp-alipay": {
+    "darkmode": true,
+    "usingComponents": true,
+    "appid": "2021006103621888"
+  },
+  "mp-baidu": {
+    "darkmode": true,
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "darkmode": true,
+    "usingComponents": true
+  },
+  "mp-xhs": {
+    "appid": "69005f8c77e2b300015cb3aa",
+    "darkmode": true,
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3"
+}
diff --git a/packages/tdesign-uniapp/example/src/mixins/demo-base.js b/packages/tdesign-uniapp/example/src/mixins/demo-base.js
new file mode 100644
index 000000000..8a1052eae
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/mixins/demo-base.js
@@ -0,0 +1,45 @@
+export default {
+  computed: {
+    gCustomNavbarHeight() {
+      let result = 0;
+      // #ifdef H5 || APP-PLUS
+      result = 48;
+      // #endif
+      return result;
+    },
+    isH5() {
+      let result = false;
+      // #ifdef H5
+      result = true;
+      // #endif
+      return result;
+    },
+    isMP() {
+      let result = false;
+      // #ifdef MP
+      result = true;
+      // #endif
+      return result;
+    },
+    isMPAlipay() {
+      let result = false;
+      // #ifdef MP-ALIPAY
+      result = true;
+      // #endif
+      return result;
+    },
+  },
+  mounted() {
+    // 检查分享功能是否可用
+    // #ifdef MP-WEIXIN
+    if (typeof wx.showShareMenu === 'function') {
+      wx.showShareMenu({
+        success: () => {
+        },
+        fail: () => {
+        },
+      });
+    }
+    // #endif
+  },
+};
diff --git a/packages/tdesign-uniapp/example/src/mixins/skyline.js b/packages/tdesign-uniapp/example/src/mixins/skyline.js
new file mode 100644
index 000000000..7f98ea242
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/mixins/skyline.js
@@ -0,0 +1 @@
+export { default } from 'tdesign-uniapp/mixins/skyline.js';
diff --git a/packages/tdesign-uniapp/example/src/pages.json b/packages/tdesign-uniapp/example/src/pages.json
new file mode 100644
index 000000000..7d5373874
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages.json
@@ -0,0 +1,580 @@
+{
+  "pages": [
+    {
+      "path": "pages/home/home"
+    },
+    {
+      "path": "pages/home/navigate-fail/index"
+    },
+    {
+      "path": "pages-more/result/result-page"
+    },
+    {
+      "path": "pages-more/indexes/custom/index"
+    },
+    {
+      "path": "pages-more/indexes/base/index"
+    },
+    {
+      "path": "pages-more/side-bar/base/index"
+    },
+    {
+      "path": "pages-more/side-bar/switch/index"
+    },
+    {
+      "path": "pages-more/side-bar/with-icon/index"
+    },
+    {
+      "path": "pages-more/side-bar/custom/index"
+    },
+    {
+      "path": "pages-more/button/button"
+    },
+    {
+      "path": "pages-more/divider/divider"
+    },
+    {
+      "path": "pages-more/fab/fab"
+    },
+    {
+      "path": "pages-more/icon/icon"
+    },
+    {
+      "path": "pages-more/link/link"
+    },
+    {
+      "path": "pages-more/col/col"
+    },
+    {
+      "path": "pages-more/back-top/back-top"
+    },
+    {
+      "path": "pages-more/drawer/drawer"
+    },
+    {
+      "path": "pages-more/indexes/indexes"
+    },
+    {
+      "path": "pages-more/navbar/navbar"
+    },
+    {
+      "path": "pages-more/side-bar/side-bar"
+    },
+    {
+      "path": "pages-more/steps/steps"
+    },
+    {
+      "path": "pages-more/tab-bar/tab-bar"
+    },
+    {
+      "path": "pages-more/tabs/tabs"
+    },
+    {
+      "path": "pages-more/calendar/calendar"
+    },
+    {
+      "path": "pages-more/cascader/cascader"
+    },
+    {
+      "path": "pages-more/checkbox/checkbox"
+    },
+    {
+      "path": "pages-more/color-picker/color-picker"
+    },
+    {
+      "path": "pages-more/date-time-picker/date-time-picker"
+    },
+    {
+      "path": "pages-more/form/form"
+    },
+    {
+      "path": "pages-more/input/input"
+    },
+    {
+      "path": "pages-more/picker/picker"
+    },
+    {
+      "path": "pages-more/radio/radio"
+    },
+    {
+      "path": "pages-more/rate/rate"
+    },
+    {
+      "path": "pages-more/search/search"
+    },
+    {
+      "path": "pages-more/slider/slider"
+    },
+    {
+      "path": "pages-more/stepper/stepper"
+    },
+    {
+      "path": "pages-more/switch/switch"
+    },
+    {
+      "path": "pages-more/textarea/textarea"
+    },
+    {
+      "path": "pages-more/tree-select/tree-select"
+    },
+    {
+      "path": "pages-more/upload/upload"
+    },
+    {
+      "path": "pages-more/avatar/avatar"
+    },
+    {
+      "path": "pages-more/badge/badge"
+    },
+    {
+      "path": "pages-more/cell/cell"
+    },
+    {
+      "path": "pages-more/collapse/collapse"
+    },
+    {
+      "path": "pages-more/count-down/count-down"
+    },
+    {
+      "path": "pages-more/empty/empty"
+    },
+    {
+      "path": "pages-more/footer/footer"
+    },
+    {
+      "path": "pages-more/grid/grid"
+    },
+    {
+      "path": "pages-more/image/image"
+    },
+    {
+      "path": "pages-more/image-viewer/image-viewer"
+    },
+    {
+      "path": "pages-more/progress/progress"
+    },
+    {
+      "path": "pages-more/qrcode/qrcode"
+    },
+    {
+      "path": "pages-more/result/result"
+    },
+    {
+      "path": "pages-more/skeleton/skeleton"
+    },
+    {
+      "path": "pages-more/sticky/sticky"
+    },
+    {
+      "path": "pages-more/swiper/swiper"
+    },
+    {
+      "path": "pages-more/tag/tag"
+    },
+    {
+      "path": "pages-more/watermark/watermark"
+    },
+    {
+      "path": "pages-more/action-sheet/action-sheet"
+    },
+    {
+      "path": "pages-more/dialog/dialog"
+    },
+    {
+      "path": "pages-more/dropdown-menu/dropdown-menu"
+    },
+    {
+      "path": "pages-more/guide/guide"
+    },
+    {
+      "path": "pages-more/loading/loading"
+    },
+    {
+      "path": "pages-more/message/message"
+    },
+    {
+      "path": "pages-more/notice-bar/notice-bar"
+    },
+    {
+      "path": "pages-more/overlay/overlay"
+    },
+    {
+      "path": "pages-more/popup/popup"
+    },
+    {
+      "path": "pages-more/pull-down-refresh/pull-down-refresh"
+    },
+    {
+      "path": "pages-more/swipe-cell/swipe-cell"
+    },
+    {
+      "path": "pages-more/toast/toast"
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "pages-more/chat-list",
+      "pages": [
+        {
+          "path": "chat-list"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-message",
+      "pages": [
+        {
+          "path": "chat-message"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-sender",
+      "pages": [
+        {
+          "path": "chat-sender"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-markdown",
+      "pages": [
+        {
+          "path": "chat-markdown"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-content",
+      "pages": [
+        {
+          "path": "chat-content"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-thinking",
+      "pages": [
+        {
+          "path": "chat-thinking"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/attachments",
+      "pages": [
+        {
+          "path": "attachments"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-actionbar",
+      "pages": [
+        {
+          "path": "chat-actionbar"
+        }
+      ]
+    },
+    {
+      "root": "pages-more/chat-loading",
+      "pages": [
+        {
+          "path": "chat-loading"
+        }
+      ]
+    }
+  ],
+  "globalStyle": {
+    "pageOrientation": "portrait",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "TDesign UniApp",
+    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "custom"
+  },
+  "condition": {
+    "current": 0,
+    "list": [
+      {
+        "name": "button",
+        "pathName": "pages-more/button/button"
+      },
+      {
+        "name": "divider",
+        "pathName": "pages-more/divider/divider"
+      },
+      {
+        "name": "fab",
+        "pathName": "pages-more/fab/fab"
+      },
+      {
+        "name": "icon",
+        "pathName": "pages-more/icon/icon"
+      },
+      {
+        "name": "link",
+        "pathName": "pages-more/link/link"
+      },
+      {
+        "name": "layout",
+        "pathName": "pages-more/col/col"
+      },
+      {
+        "name": "back-top",
+        "pathName": "pages-more/back-top/back-top"
+      },
+      {
+        "name": "drawer",
+        "pathName": "pages-more/drawer/drawer"
+      },
+      {
+        "name": "indexes",
+        "pathName": "pages-more/indexes/indexes"
+      },
+      {
+        "name": "navbar",
+        "pathName": "pages-more/navbar/navbar"
+      },
+      {
+        "name": "side-bar",
+        "pathName": "pages-more/side-bar/side-bar"
+      },
+      {
+        "name": "steps",
+        "pathName": "pages-more/steps/steps"
+      },
+      {
+        "name": "tab-bar",
+        "pathName": "pages-more/tab-bar/tab-bar"
+      },
+      {
+        "name": "tabs",
+        "pathName": "pages-more/tabs/tabs"
+      },
+      {
+        "name": "calendar",
+        "pathName": "pages-more/calendar/calendar"
+      },
+      {
+        "name": "cascader",
+        "pathName": "pages-more/cascader/cascader"
+      },
+      {
+        "name": "checkbox",
+        "pathName": "pages-more/checkbox/checkbox"
+      },
+      {
+        "name": "color-picker",
+        "pathName": "pages-more/color-picker/color-picker"
+      },
+      {
+        "name": "date-time-picker",
+        "pathName": "pages-more/date-time-picker/date-time-picker"
+      },
+      {
+        "name": "form",
+        "pathName": "pages-more/form/form"
+      },
+      {
+        "name": "input",
+        "pathName": "pages-more/input/input"
+      },
+      {
+        "name": "picker",
+        "pathName": "pages-more/picker/picker"
+      },
+      {
+        "name": "radio",
+        "pathName": "pages-more/radio/radio"
+      },
+      {
+        "name": "rate",
+        "pathName": "pages-more/rate/rate"
+      },
+      {
+        "name": "search",
+        "pathName": "pages-more/search/search"
+      },
+      {
+        "name": "slider",
+        "pathName": "pages-more/slider/slider"
+      },
+      {
+        "name": "stepper",
+        "pathName": "pages-more/stepper/stepper"
+      },
+      {
+        "name": "switch",
+        "pathName": "pages-more/switch/switch"
+      },
+      {
+        "name": "textarea",
+        "pathName": "pages-more/textarea/textarea"
+      },
+      {
+        "name": "tree-select",
+        "pathName": "pages-more/tree-select/tree-select"
+      },
+      {
+        "name": "upload",
+        "pathName": "pages-more/upload/upload"
+      },
+      {
+        "name": "avatar",
+        "pathName": "pages-more/avatar/avatar"
+      },
+      {
+        "name": "badge",
+        "pathName": "pages-more/badge/badge"
+      },
+      {
+        "name": "cell",
+        "pathName": "pages-more/cell/cell"
+      },
+      {
+        "name": "collapse",
+        "pathName": "pages-more/collapse/collapse"
+      },
+      {
+        "name": "count-down",
+        "pathName": "pages-more/count-down/count-down"
+      },
+      {
+        "name": "empty",
+        "pathName": "pages-more/empty/empty"
+      },
+      {
+        "name": "footer",
+        "pathName": "pages-more/footer/footer"
+      },
+      {
+        "name": "grid",
+        "pathName": "pages-more/grid/grid"
+      },
+      {
+        "name": "image",
+        "pathName": "pages-more/image/image"
+      },
+      {
+        "name": "image-viewer",
+        "pathName": "pages-more/image-viewer/image-viewer"
+      },
+      {
+        "name": "progress",
+        "pathName": "pages-more/progress/progress"
+      },
+      {
+        "name": "q-r-code",
+        "pathName": "pages-more/qrcode/qrcode"
+      },
+      {
+        "name": "result",
+        "pathName": "pages-more/result/result"
+      },
+      {
+        "name": "skeleton",
+        "pathName": "pages-more/skeleton/skeleton"
+      },
+      {
+        "name": "sticky",
+        "pathName": "pages-more/sticky/sticky"
+      },
+      {
+        "name": "swiper",
+        "pathName": "pages-more/swiper/swiper"
+      },
+      {
+        "name": "tag",
+        "pathName": "pages-more/tag/tag"
+      },
+      {
+        "name": "watermark",
+        "pathName": "pages-more/watermark/watermark"
+      },
+      {
+        "name": "action-sheet",
+        "pathName": "pages-more/action-sheet/action-sheet"
+      },
+      {
+        "name": "dialog",
+        "pathName": "pages-more/dialog/dialog"
+      },
+      {
+        "name": "dropdown-menu",
+        "pathName": "pages-more/dropdown-menu/dropdown-menu"
+      },
+      {
+        "name": "guide",
+        "pathName": "pages-more/guide/guide"
+      },
+      {
+        "name": "loading",
+        "pathName": "pages-more/loading/loading"
+      },
+      {
+        "name": "message",
+        "pathName": "pages-more/message/message"
+      },
+      {
+        "name": "notice-bar",
+        "pathName": "pages-more/notice-bar/notice-bar"
+      },
+      {
+        "name": "overlay",
+        "pathName": "pages-more/overlay/overlay"
+      },
+      {
+        "name": "popup",
+        "pathName": "pages-more/popup/popup"
+      },
+      {
+        "name": "pull-down-refresh",
+        "pathName": "pages-more/pull-down-refresh/pull-down-refresh"
+      },
+      {
+        "name": "swipe-cell",
+        "pathName": "pages-more/swipe-cell/swipe-cell"
+      },
+      {
+        "name": "toast",
+        "pathName": "pages-more/toast/toast"
+      },
+      {
+        "name": "chat-list",
+        "pathName": "pages-more/chat-list/chat-list"
+      },
+      {
+        "name": "chat-message",
+        "pathName": "pages-more/chat-message/chat-message"
+      },
+      {
+        "name": "chat-sender",
+        "pathName": "pages-more/chat-sender/chat-sender"
+      },
+      {
+        "name": "chat-markdown",
+        "pathName": "pages-more/chat-markdown/chat-markdown"
+      },
+      {
+        "name": "chat-content",
+        "pathName": "pages-more/chat-content/chat-content"
+      },
+      {
+        "name": "chat-thinking",
+        "pathName": "pages-more/chat-thinking/chat-thinking"
+      },
+      {
+        "name": "attachments",
+        "pathName": "pages-more/attachments/attachments"
+      },
+      {
+        "name": "chat-actionbar",
+        "pathName": "pages-more/chat-actionbar/chat-actionbar"
+      },
+      {
+        "name": "chat-loading",
+        "pathName": "pages-more/chat-loading/chat-loading"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/base.json b/packages/tdesign-uniapp/example/src/pages/home/data/base.json
new file mode 100644
index 000000000..e41d1f475
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/base.json
@@ -0,0 +1,64 @@
+{
+  "base": {
+    "name": "基础",
+    "icon": "app",
+    "childArr": [
+      {
+        "name": "Button",
+        "label": "按钮"
+      },
+      {
+        "name": "Divider",
+        "label": "分割线"
+      },
+      {
+        "name": "Fab",
+        "label": "悬浮按钮"
+      },
+      {
+        "name": "Icon",
+        "label": "图标"
+      },
+      {
+        "name": "Link",
+        "label": "链接"
+      },
+      {
+        "name": "Layout",
+        "label": "布局",
+        "path": "/pages-more/col/col"
+      }
+    ]
+  },
+  "skylineBase": {
+    "name": "基础",
+    "icon": "app",
+    "childArr": [
+      {
+        "name": "Button",
+        "label": "按钮"
+      },
+      {
+        "name": "Divider",
+        "label": "分割线"
+      },
+      {
+        "name": "Fab",
+        "label": "悬浮按钮"
+      },
+      {
+        "name": "Icon",
+        "label": "图标"
+      },
+      {
+        "name": "Link",
+        "label": "链接"
+      },
+      {
+        "name": "Layout",
+        "label": "布局",
+        "path": "/pages-more/col/skyline/col"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/chat.json b/packages/tdesign-uniapp/example/src/pages/home/data/chat.json
new file mode 100644
index 000000000..17623a9e0
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/chat.json
@@ -0,0 +1,45 @@
+{
+  "chat": {
+    "name": "AI Chat 对话",
+    "icon": "chat",
+    "childArr": [
+      {
+        "name": "ChatList",
+        "label": "对话"
+      },
+      {
+        "name": "ChatMessage",
+        "label": "对话单元"
+      },
+      {
+        "name": "ChatSender",
+        "label": "对话输入框"
+      },
+      {
+        "name": "ChatMarkdown",
+        "label": "对话 Markdown"
+      },
+      {
+        "name": "ChatContent",
+        "label": "对话正文"
+      },
+      {
+        "name": "ChatThinking",
+        "label": "思考过程"
+      },
+      {
+        "name": "Attachments",
+        "label": "附件"
+      },
+      {
+        "name": "ChatActionbar",
+        "label": "对话操作栏"
+      },
+      {
+        "name": "ChatLoading",
+        "label": "加载中"
+      }
+    ]
+  },
+  "skylineChat": {}
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/display.json b/packages/tdesign-uniapp/example/src/pages/home/data/display.json
new file mode 100644
index 000000000..b3dc64563
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/display.json
@@ -0,0 +1,139 @@
+{
+  "display": {
+    "name": "数据展示",
+    "icon": "image",
+    "childArr": [
+      {
+        "name": "Avatar",
+        "label": "头像"
+      },
+      {
+        "name": "Badge",
+        "label": "徽标"
+      },
+      {
+        "name": "Cell",
+        "label": "单元格"
+      },
+      {
+        "name": "Collapse",
+        "label": "折叠面板"
+      },
+      {
+        "name": "CountDown",
+        "label": "倒计时"
+      },
+      {
+        "name": "Empty",
+        "label": "空状态"
+      },
+      {
+        "name": "Footer",
+        "label": "页脚"
+      },
+      {
+        "name": "Grid",
+        "label": "宫格"
+      },
+      {
+        "name": "Image",
+        "label": "图片"
+      },
+      {
+        "name": "ImageViewer",
+        "label": "图片预览"
+      },
+      {
+        "name": "Progress",
+        "label": "进度条"
+      },
+      {
+        "name": "QRCode",
+        "label": "二维码",
+        "path": "/pages-more/qrcode/qrcode"
+      },
+      {
+        "name": "Result",
+        "label": "结果"
+      },
+      {
+        "name": "Skeleton",
+        "label": "骨架屏"
+      },
+      {
+        "name": "Sticky",
+        "label": "吸顶"
+      },
+      {
+        "name": "Swiper",
+        "label": "轮播图"
+      },
+      {
+        "name": "Tag",
+        "label": "标签"
+      },
+      {
+        "name": "Watermark",
+        "label": "水印"
+      }
+    ]
+  },
+  "skylineDisplay": {
+    "name": "数据展示",
+    "icon": "image",
+    "childArr": [
+      {
+        "name": "Avatar",
+        "label": "头像"
+      },
+      {
+        "name": "Badge",
+        "label": "徽标"
+      },
+      {
+        "name": "Cell",
+        "label": "单元格"
+      },
+      {
+        "name": "CountDown",
+        "label": "倒计时"
+      },
+      {
+        "name": "Empty",
+        "label": "空状态"
+      },
+      {
+        "name": "Footer",
+        "label": "页脚"
+      },
+      {
+        "name": "Image",
+        "label": "图片"
+      },
+      {
+        "name": "ImageViewer",
+        "label": "图片预览"
+      },
+      {
+        "name": "Progress",
+        "label": "进度条"
+      },
+      {
+        "name": "Result",
+        "label": "结果"
+      },
+      {
+        "name": "Skeleton",
+        "label": "骨架屏"
+      },
+      {
+        "name": "Swiper",
+        "label": "轮播图"
+      },
+      {
+        "name": "Tag",
+        "label": "标签"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/form.json b/packages/tdesign-uniapp/example/src/pages/home/data/form.json
new file mode 100644
index 000000000..2402add71
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/form.json
@@ -0,0 +1,110 @@
+{
+  "form": {
+    "name": "输入",
+    "icon": "bulletpoint",
+    "childArr": [
+      {
+        "name": "Calendar",
+        "label": "日历"
+      },
+      {
+        "name": "Cascader",
+        "label": "级联选择器"
+      },
+      {
+        "name": "Checkbox",
+        "label": "多选框"
+      },
+      {
+        "name": "ColorPicker",
+        "label": "颜色选择器"
+      },
+      {
+        "name": "DateTimePicker",
+        "label": "时间选择器"
+      },
+      {
+        "name": "Form",
+        "label": "表单"
+      },
+      {
+        "name": "Input",
+        "label": "输入框"
+      },
+      {
+        "name": "Picker",
+        "label": "选择器"
+      },
+      {
+        "name": "Radio",
+        "label": "单选框"
+      },
+      {
+        "name": "Rate",
+        "label": "评分"
+      },
+      {
+        "name": "Search",
+        "label": "搜索框"
+      },
+      {
+        "name": "Slider",
+        "label": "滑动选择器"
+      },
+      {
+        "name": "Stepper",
+        "label": "步进器"
+      },
+      {
+        "name": "Switch",
+        "label": "开关"
+      },
+      {
+        "name": "Textarea",
+        "label": "多行文本框"
+      },
+      {
+        "name": "TreeSelect",
+        "label": "树形选择器"
+      },
+      {
+        "name": "Upload",
+        "label": "上传"
+      }
+    ]
+  },
+  "skylineForm": {
+    "name": "输入",
+    "icon": "bulletpoint",
+    "childArr": [
+      {
+        "name": "Checkbox",
+        "label": "多选框"
+      },
+      {
+        "name": "Input",
+        "label": "输入框"
+      },
+      {
+        "name": "Radio",
+        "label": "单选框"
+      },
+      {
+        "name": "Search",
+        "label": "搜索框"
+      },
+      {
+        "name": "Stepper",
+        "label": "步进器"
+      },
+      {
+        "name": "Switch",
+        "label": "开关"
+      },
+      {
+        "name": "Textarea",
+        "label": "多行文本框"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/index.ts b/packages/tdesign-uniapp/example/src/pages/home/data/index.ts
new file mode 100644
index 000000000..eef7e65e3
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/index.ts
@@ -0,0 +1,12 @@
+import { base, skylineBase } from './base.json';
+import { nav, skylineNav } from './nav.json';
+import { display, skylineDisplay } from './display.json';
+import { form, skylineForm } from './form.json';
+import { ux, skylineUx } from './ux.json';
+import { chat } from './chat.json';
+
+const list = [chat, base, nav, form, display, ux];
+
+const skylineList = [skylineBase, skylineNav, skylineForm, skylineDisplay, skylineUx];
+
+export { list, skylineList };
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/nav.json b/packages/tdesign-uniapp/example/src/pages/home/data/nav.json
new file mode 100644
index 000000000..8957dc960
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/nav.json
@@ -0,0 +1,66 @@
+{
+  "nav": {
+    "name": " 导航",
+    "icon": "view-module",
+    "childArr": [
+      {
+        "name": "BackTop",
+        "label": "返回顶部"
+      },
+      {
+        "name": "Drawer",
+        "label": "抽屉"
+      },
+      {
+        "name": "Indexes",
+        "label": "索引"
+      },
+      {
+        "name": "Navbar",
+        "label": "导航栏"
+      },
+      {
+        "name": "SideBar",
+        "label": "侧边栏"
+      },
+      {
+        "name": "Steps",
+        "label": "步骤条"
+      },
+      {
+        "name": "TabBar",
+        "label": "标签栏"
+      },
+      {
+        "name": "Tabs",
+        "label": "选项卡"
+      }
+    ]
+  },
+  "skylineNav": {
+    "name": " 导航",
+    "icon": "view-module",
+    "childArr": [
+      {
+        "name": "BackTop",
+        "label": "返回顶部"
+      },
+      {
+        "name": "Drawer",
+        "label": "抽屉"
+      },
+      {
+        "name": "Navbar",
+        "label": "导航栏"
+      },
+      {
+        "name": "Steps",
+        "label": "步骤条"
+      },
+      {
+        "name": "TabBar",
+        "label": "标签栏"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/data/ux.json b/packages/tdesign-uniapp/example/src/pages/home/data/ux.json
new file mode 100644
index 000000000..ad5aec3b9
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/data/ux.json
@@ -0,0 +1,78 @@
+{
+  "ux": {
+    "name": "反馈",
+    "icon": "chat",
+    "childArr": [
+      {
+        "name": "ActionSheet",
+        "label": "动作面板"
+      },
+      {
+        "name": "Dialog",
+        "label": "对话框"
+      },
+      {
+        "name": "DropdownMenu",
+        "label": "下拉菜单"
+      },
+      {
+        "name": "Guide",
+        "label": "引导"
+      },
+      {
+        "name": "Loading",
+        "label": "加载"
+      },
+      {
+        "name": "Message",
+        "label": "消息通知"
+      },
+      {
+        "name": "NoticeBar",
+        "label": "公告栏"
+      },
+      {
+        "name": "Overlay",
+        "label": "遮罩层"
+      },
+      {
+        "name": "Popup",
+        "label": "弹出层"
+      },
+      {
+        "name": "PullDownRefresh",
+        "label": "下拉刷新"
+      },
+      {
+        "name": "SwipeCell",
+        "label": "滑动操作"
+      },
+      {
+        "name": "Toast",
+        "label": "轻提示"
+      }
+    ]
+  },
+  "skylineUx": {
+    "name": "反馈",
+    "icon": "chat",
+    "childArr": [
+      {
+        "name": "Overlay",
+        "label": "遮罩层"
+      },
+      {
+        "name": "Popup",
+        "label": "弹出层"
+      },
+      {
+        "name": "Loading",
+        "label": "加载"
+      },
+      {
+        "name": "Toast",
+        "label": "轻提示"
+      }
+    ]
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/home.less b/packages/tdesign-uniapp/example/src/pages/home/home.less
new file mode 100644
index 000000000..dee015355
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/home.less
@@ -0,0 +1,56 @@
+@import 'tdesign-uniapp-raw/common/style/_variables.less';
+
+.main {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 16rpx * 2;
+  padding-right: 16rpx * 2;
+  padding-top: 24rpx * 2;
+  padding-bottom: 24rpx * 2;
+}
+
+.footer {
+  padding: 16rpx 32rpx;
+  text-align: center;
+}
+
+.show_privacy {
+  color: #576b95;
+  text-align: right;
+  line-height: 50rpx;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.title-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 8rpx * 2;
+  padding-right: 8rpx * 2;
+}
+
+.title-icon {
+  width: 148rpx * 2;
+  height: 40rpx * 2;
+}
+
+.desc {
+  color: @text-color-placeholder;
+  margin-top: 16rpx * 2;
+  font-size: 14rpx * 2;
+  font-weight: 400;
+  line-height: 22rpx * 2;
+  margin-bottom: 24rpx * 2;
+  padding-left: 8rpx * 2;
+  padding-right: 8rpx * 2;
+  display: flex;
+  justify-content: space-between;
+}
+
+.skyline-entry {
+  color: #0052d9;
+  font-size: 24rpx;
+  font-style: italic;
+  text-decoration: underline;
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/home.vue b/packages/tdesign-uniapp/example/src/pages/home/home.vue
new file mode 100644
index 000000000..a1d81ec33
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/home.vue
@@ -0,0 +1,184 @@
+<template>
+  <!-- #ifndef H5 -->
+  <!-- #ifndef MP-ALIPAY -->
+  <t-navbar title="TDesign UI" />
+  <!-- #endif -->
+  <!-- #endif -->
+  <view class="main">
+    <view class="title-wrap">
+      <image
+        class="title-icon"
+        mode="aspectFit"
+        :src="`https://image-1251917893.file.myqcloud.com/next-svr/images/2025/10/${theme === 'dark' ? 'TDesign-logo_dark' : 'TDesign-logo_light'}.png`"
+        aria-label="TDesign Logo"
+      />
+    </view>
+    <view class="desc">
+      TDesign 适配 uni-app 的组件库{{ isSkyline?' (skyline render)':'' }}
+      <text
+        v-if="!isSkyline && showTrySkyline"
+        class="skyline-entry"
+        @click="goSkyline"
+      >
+        try skyline
+      </text>
+    </view>
+    <PullDownList
+      v-for="item of list"
+      :key="item.name"
+      :name="item.name"
+      :icon="item.icon"
+      :child-arr="item.childArr"
+      @click="clickHandle"
+    />
+  </view>
+  <view class="footer">
+    <view
+      class="show_privacy"
+      @click="showPrivacyWin"
+    >
+      《TDesign组件库服务声明》
+    </view>
+    <TFooter text="该小程序仅演示示例，不收集个人信息。" />
+    <TFooter :text="`Copyright © 1998 - ${currentYear} All Rights Reserved`" />
+  </view>
+  <TrdPrivacy
+    ref="trdPrivacy"
+    name="TDesign组件库"
+    date="2023年11月14日"
+    :win-style="winStyle"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from 'tdesign-uniapp/mixins/theme-change';
+import TFooter from 'tdesign-uniapp/footer/footer.vue';
+
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+import { list as dataList, skylineList } from './data/index';
+import PullDownList from '../../components/pull-down-list/index.vue';
+import TrdPrivacy from '../../components/trd-privacy/index.vue';
+
+interface PageItem {
+  name: string;
+  icon: string;
+  childArr: ComponentItem[];
+}
+
+interface ComponentItem {
+  name: string;
+  label: string;
+}
+
+const list = ref<PageItem[]>([]);
+const currentYear = new Date().getFullYear();
+const isSkyline = ref(false);
+
+const showTrySkyline = ref(false);
+// #ifdef MP-WEIXIN
+showTrySkyline.value = false;
+// #endif
+
+const trdPrivacy = ref<any>(null);
+const { theme } = useTheme();
+const winStyle = ref(false);
+
+onLoad((options) => {
+  const { q, skyline: querySkyline } = options || {};
+
+  let compList: PageItem[] = [];
+  isSkyline.value = !!querySkyline;
+  if (querySkyline) {
+    compList = skylineList;
+  } else {
+    compList = dataList;
+  }
+
+  list.value = compList;
+
+  // 小程序跳转各个小程序组件库
+  if (q) {
+    const str = getQueryByUrl(decodeURIComponent(q));
+    uni.navigateTo({
+      url: `/pages/${str.page}/${str.page}`,
+    });
+  }
+});
+
+const showPrivacyWin = () => {
+  trdPrivacy.value?.showPrivacyWin();
+};
+
+const clickHandle = (item) => {
+  if (!item) {
+    console.error('clickHandle: item is undefined');
+    return;
+  }
+
+  let { name, path = '' } = item as {
+      name: string;
+      path?: string;
+    };
+
+  // 确保name存在
+  if (!name) {
+    console.error('clickHandle: name is undefined', item);
+    return;
+  }
+
+  if (!path) {
+    name = name.replace(/^[A-Z]/, match => `${match}`.toLocaleLowerCase());
+    name = name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+
+    path = `/pages-more/${name}/${isSkyline.value ? 'skyline/' : ''}${name}`;
+  }
+
+  uni.navigateTo({
+    url: path,
+    fail: () => {
+      uni.navigateTo({
+        url: '/pages/home/navigate-fail/index',
+      });
+    },
+  });
+};
+
+defineOptions({
+  onShareAppMessage() {
+    return {
+      title: 'TDesign UI',
+      path: '/pages/home/home',
+    };
+  },
+});
+
+
+const getQueryByUrl = (url: string) => {
+  const data: { page?: string } = {};
+  const queryArr = `${url}`.match(/([^=&#?]+)=[^&#]+/g) || [];
+  // 必须是合法字符串
+  if (queryArr.length) {
+    queryArr.forEach((para) => {
+      const d = para.split('=');
+      const val = decodeURIComponent(d[1]);
+      if (data[d[0]] !== undefined) {
+        data[d[0]] += `,${val}`;
+      } else {
+        data[d[0]] = val;
+      }
+    });
+  }
+  return data;
+};
+
+
+const goSkyline = () => {
+  uni.navigateTo({
+    url: '/pages/home/home?skyline=1',
+  });
+};
+
+</script>
+<style lang="less" scoped src="./home.less"></style>
diff --git a/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.less b/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.less
new file mode 100644
index 000000000..58cabdda9
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.less
@@ -0,0 +1,25 @@
+.demo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 500rpx * 2;
+
+  .fail-error {
+    margin-top: 24rpx * 2;
+    margin-bottom: 48rpx * 2;
+    width: 100%;
+    color: rgba(0, 0, 0, 0.4);
+    color: var(--td-text-color-placeholder);
+    font-size: 14rpx * 2;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .t-button--default {
+    width: 160rpx * 2;
+    height: 40rpx * 2;
+    color: var(--td-text-color-primary);
+    font-weight: 700;
+    font-size: 14rpx * 2;
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.vue b/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.vue
new file mode 100644
index 000000000..654203fbc
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/pages/home/navigate-fail/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <view class="demo">
+    <view class="container">
+      <t-icon
+        :name="failImage"
+        size="224rpx"
+        color="#DCDCDC"
+      />
+      <view class="fail-error">
+        页面加载错误
+      </view>
+      <t-button
+        class="fail-button"
+        @click="toHome"
+      >
+        回到首页
+      </t-button>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const failImage = ref('error-circle-filled');
+
+const toHome = () => {
+  uni.reLaunch({
+    url: '/pages/home/home',
+  });
+};
+</script>
+<style lang="less" src="./index.less"></style>
diff --git a/packages/tdesign-uniapp/example/src/shime-uni.d.ts b/packages/tdesign-uniapp/example/src/shime-uni.d.ts
new file mode 100644
index 000000000..4aaea8246
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/shime-uni.d.ts
@@ -0,0 +1,6 @@
+export {};
+
+declare module 'vue' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+  interface ComponentCustomOptions extends Hooks {}
+}
diff --git a/packages/tdesign-uniapp/example/src/style/app.less b/packages/tdesign-uniapp/example/src/style/app.less
new file mode 100644
index 000000000..0ad392936
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/style/app.less
@@ -0,0 +1,61 @@
+@import 'tdesign-uniapp-raw/common/style/_variables.less';
+@import 'tdesign-uniapp/common/style/theme/index.less';
+
+@font-face {
+  font-family: 'TCloudNumber';
+  src: url('data:font/ttf;charset=utf-8;base64,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NSEB0/5wAZD+cAGQ/nABkAIAgmiC/pSCaIL+/GgAAAAAAwBDAGAB0wJoAAMABwALAAABFSU1BRUFNQUVITUB0/5wAZD+cAGQ/nAB5miCaIJogmicaGgAAAAAABoBPgABAAAAAAAAACIARgABAAAAAAABAAwAgwABAAAAAAACAAcAoAABAAAAAAADAB8A6AABAAAAAAAEABQBMgABAAAAAAAFACEBiwABAAAAAAAGABQB1wABAAAAAAAIABUCGAABAAAAAAALABoCZAABAAAAAAANAJADoQABAAAAAAAOABoEaAABAAAAAAAQAAwEnQABAAAAAAARAAcEugADAAEECQAAAEQAAAADAAEECQABABgAaQADAAEECQACAA4AkAADAAEECQADAD4AqAADAAEECQAEACgBCAADAAEECQAFAEIBRwADAAEECQAGACgBrQADAAEECQAIACoB7AADAAEECQALADQCLgADAAEECQANASACfwADAAEECQAOADQEMgADAAEECQAQABgEgwADAAEECQARAA4EqgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMQAtAHAAcgBlAHMAZQBuAHQAIABUAEQAZQBzAGkAZwBuAABDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCBURGVzaWduAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAAVENsb3VkTnVtYmVyAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAAxAC4AMAAxADAAOwBVAEsAVwBOADsAVABDAGwAbwB1AGQATgB1AG0AYgBlAHIALQBSAGUAZwB1AGwAYQByAAAxLjAxMDtVS1dOO1RDbG91ZE51bWJlci1SZWd1bGFyAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAgAFIAZQBnAHUAbABhAHIAAFRDbG91ZE51bWJlciBSZWd1bGFyAABWAGUAcgBzAGkAbwBuACAAMQAuADAAMQAwADsARwBsAHkAcABoAHMAIAAzAC4AMQAuADEAIAAoADMAMQAzADUAKQAAVmVyc2lvbiAxLjAxMDtHbHlwaHMgMy4xLjEgKDMxMzUpAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAtAFIAZQBnAHUAbABhAHIAAFRDbG91ZE51bWJlci1SZWd1bGFyAABUAGUAbgBjAGUAbgB0ACAAVABEAGUAcwBpAGcAbgAgAE8AdABlAGEAbQAAVGVuY2VudCBURGVzaWduIE90ZWFtAABoAHQAdABwADoALwAvAHQAZABlAHMAaQBnAG4ALgB0AGUAbgBjAGUAbgB0AC4AYwBvAG0AAGh0dHA6Ly90ZGVzaWduLnRlbmNlbnQuY29tAABUAGgAaQBzACAARgBvAG4AdAAgAFMAbwBmAHQAdwBhAHIAZQAgAGkAcwAgAGwAaQBjAGUAbgBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAUwBJAEwAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALAAgAFYAZQByAHMAaQBvAG4AIAAxAC4AMQAuACAAVABoAGkAcwAgAGwAaQBjAGUAbgBzAGUAIABpAHMAIABhAHYAYQBpAGwAYQBiAGwAZQAgAHcAaQB0AGgAIABhACAARgBBAFEAIABhAHQAOgAgAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAVGhpcyBGb250IFNvZnR3YXJlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBTSUwgT3BlbiBGb250IExpY2Vuc2UsIFZlcnNpb24gMS4xLiBUaGlzIGxpY2Vuc2UgaXMgYXZhaWxhYmxlIHdpdGggYSBGQVEgYXQ6IGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAAVENsb3VkTnVtYmVyAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAACAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAEsAAAABAAIAAwAEAAUABgAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjAD4APwBAAEEAQgBeAF8AYABhAKMAqQCkAJMAwwCqAKIA8AC4ALYAtwDEALQAtQDFAIcAqwDGAL4AvwCYAJoAmQDvAKUAkgCcAKcAjwCUAJUAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwBKAAEABAAAAAIAAAAAAAAAAQAAAADeBipuAAAAANeCVUMAAAAA4YOP8w==')
+    format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+page {
+  background-color: var(--td-bg-color-page);
+
+  --bg-color-demo-desc: var(--td-text-color-secondary);
+  --bg-color-demo-title: var(--td-text-color-primary);
+  --bg-color-demo: var(--td-bg-color-container);
+  --bg-color-demo-secondary: var(--td-bg-color-container);
+  --td-navbar-bg-color: var(--td-bg-color-page);
+  --td-navbar-color: var(--td-text-color-primary);
+  --td-progress-circle-inner-bg-color: var(--bg-color-demo);
+}
+
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
+
+
+.demo {
+  padding-bottom: 56rpx;
+
+  &-navbar {
+    --td-navbar-bg-color: var(--td-bg-color-container);
+    --td-navbar-color: var(--td-text-color-primary);
+  }
+
+  &-title {
+    font-size: 48rpx;
+    font-weight: 700;
+    line-height: 64rpx;
+    margin: 0 32rpx 0;
+    padding-top: 48rpx;
+    color: var(--bg-color-demo-title);
+  }
+
+  &-desc {
+    font-size: 28rpx;
+    color: var(--bg-color-demo-desc);
+    margin: 16rpx 32rpx 0;
+    line-height: 44rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/example/src/uni.scss b/packages/tdesign-uniapp/example/src/uni.scss
new file mode 100644
index 000000000..a46a3535b
--- /dev/null
+++ b/packages/tdesign-uniapp/example/src/uni.scss
@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color: #333; // 基本色
+$uni-text-color-inverse: #fff; // 反色
+$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable: #c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color: #fff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color: #c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm: 12px;
+$uni-font-size-base: 14px;
+$uni-font-size-lg: 16;
+
+/* 图片尺寸 */
+$uni-img-size-sm: 20px;
+$uni-img-size-base: 26px;
+$uni-img-size-lg: 40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 20px;
+$uni-color-subtitle: #555; // 二级标题颜色
+$uni-font-size-subtitle: 18px;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 15px;
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/example/vite.config.ts b/packages/tdesign-uniapp/example/vite.config.ts
new file mode 100644
index 000000000..d9d793524
--- /dev/null
+++ b/packages/tdesign-uniapp/example/vite.config.ts
@@ -0,0 +1,68 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import {
+  genVersionMpVitePlugin,
+} from '@plugin-light/vite-plugin-gen-version';
+
+
+const diffPlugins: any[] = [];
+if (process.env.UNI_PLATFORM !== 'h5') {
+  diffPlugins.push(genVersionMpVitePlugin());
+}
+
+// import AutoImport from 'unplugin-auto-import/vite';
+// import Components from 'unplugin-vue-components/vite';
+// import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';
+
+
+const baseAlias = {
+  'tdesign-site': path.resolve(__dirname).replace(/\\/g, '/'),
+  packages: path.resolve(__dirname, '../').replace(/\\/g, '/'),
+  'tdesign-uniapp-raw': path.resolve(__dirname, './src/_tdesign-raw').replace(/\\/g, '/'),
+  'tdesign-uniapp': path.resolve(__dirname, './src/_tdesign').replace(/\\/g, '/'),
+  // TODO:
+  'tdesign-uniapp-chat': path.resolve(__dirname, './src/_tdesign').replace(/\\/g, '/'),
+};
+const ENV_PREFIX = ['VITE_', 'VUE_APP'];
+const root: string = process.cwd();
+
+
+export default ({ mode }) => {
+  const env = loadEnv(mode, root, ENV_PREFIX);
+  const vueAppBase = env.VUE_APP_PUBLICPATH;
+
+  const result = defineConfig({
+    plugins: [
+      uni(),
+      diffPlugins,
+
+      // auto-import 有兼容性问题，可尝试打开，并去掉 pages.json 中的 easycom 配置
+      // AutoImport({
+      //   resolvers: [TDesignResolver({
+      //     library: 'uniapp',
+      //   })],
+      // }),
+      // Components({
+      //   resolvers: [TDesignResolver({
+      //     library: 'uniapp',
+      //   })],
+      // }),
+    ],
+    resolve: {
+      alias: {
+        ...baseAlias,
+      },
+    },
+    base: vueAppBase || '/uniapp/mobile',
+    server: {
+      port: 11111,
+      hmr: true,
+      watch: {
+        usePolling: true,
+      },
+    },
+  });
+
+  return result;
+};
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
new file mode 100644
index 000000000..3abe43656
--- /dev/null
+++ b/packages/tdesign-uniapp/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "tdesign-uniapp",
+  "version": "0.0.0",
+  "private": "true",
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site\" dev\"",
+    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
+    "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-weixin\"",
+    "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-alipay\"",
+    "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-toutiao\"",
+    "dev:mp-lark": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-lark\"",
+    "dev:mp-xhs": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-xhs\"",
+    "dev:mp-qq": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-qq\"",
+    "dev:mp-kuaishou": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-kuaishou\"",
+    "dev:mp-jd": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-jd\"",
+    "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-baidu\"",
+    "dev:mp": "npm run dev:mp-weixin",
+    "dev:mp:pure": "pnpm --filter=\"./packages/example\" dev:mp-weixin",
+    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./packages/example\" build:h5",
+    "build:mp-weixin": "pnpm --filter=\"./packages/example\" build:mp-weixin",
+    "build:mp-alipay": "pnpm --filter=\"./packages/example\" build:mp-alipay",
+    "build:mp-toutiao": "pnpm --filter=\"./packages/example\" build:mp-toutiao",
+    "build:mp-lark": "pnpm --filter=\"./packages/example\" build:mp-lark",
+    "build:mp-xhs": "pnpm --filter=\"./packages/example\" build:mp-xhs",
+    "build:mp-qq": "pnpm --filter=\"./packages/example\" build:mp-qq",
+    "build:mp-kuaishou": "pnpm --filter=\"./packages/example\" build:mp-kuaishou",
+    "build:mp-jd": "pnpm --filter=\"./packages/example\" build:mp-jd",
+    "build:mp-baidu": "pnpm --filter=\"./packages/example\" build:mp-baidu",
+    "build:mp": "npm run build:mp-weixin",
+    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./packages/example\" build:h5",
+    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./packages/example\" build:h5",
+    "type-check": "vue-tsc --noEmit",
+    "init": "node packages/example/script/watch/init.js && node packages/example/script/pages/index.js",
+    "watch": "node packages/example/script/watch/watch.js",
+    "prepare": "npm run init && npm run release:prepare",
+    "release:prepare": "node packages/example/script/release/prepare.js",
+    "publish": "cd npm_dist && npm publish",
+    "commit": "git-cz"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@dcloudio/types": "^3.4.19",
+    "@stylistic/eslint-plugin-jsx": "3.1.0",
+    "@types/node": "^24.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "~5.35.0",
+    "@vue/runtime-core": "^3.4.21",
+    "@vue/tsconfig": "^0.7.0",
+    "concurrently": "^9.2.1",
+    "dotenv": "^17.2.3",
+    "echarts": "^6.0.0",
+    "eslint": "8.57.1",
+    "eslint-config-light": "latest",
+    "eslint-config-light-vue3": "latest",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-node": "0.3.9",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jest": "25",
+    "eslint-plugin-light": "latest",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.26.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-tailwindcss": "3.18.0",
+    "eslint-plugin-vue": "9.14.0",
+    "glob": "^11.0.3",
+    "husky": "^6.0.0",
+    "less": "^4.4.2",
+    "lint-staged": "^10.5.4",
+    "miniprogram-api-typings": "^4.1.0",
+    "postcss-less": "^6.0.0",
+    "postcss-rpx-transform": "^1.0.1",
+    "stylelint": "14.16.1",
+    "stylelint-config-common": "1.0.10",
+    "stylelint-config-standard": "^39.0.1",
+    "stylelint-less": "^3.0.1",
+    "stylelint-scss": "6.10.0",
+    "t-comm": "^2.0.26",
+    "tslib": "^2.3.1",
+    "typescript": "5.1",
+    "vite": "5.2.8",
+    "vue-tsc": "^1.0.24",
+    "zrender": "^6.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,js,vue}": [
+      "eslint --fix"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/shims-uni.d.ts b/packages/tdesign-uniapp/shims-uni.d.ts
new file mode 100644
index 000000000..9a8c66b04
--- /dev/null
+++ b/packages/tdesign-uniapp/shims-uni.d.ts
@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable import/no-unresolved */
+/// <reference types='@dcloudio/types' />
+import 'vue';
+
+declare module '@vue/runtime-core' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+
+  interface ComponentCustomOptions extends Hooks {
+
+  }
+}
diff --git a/packages/tdesign-uniapp/site/.env.intranet b/packages/tdesign-uniapp/site/.env.intranet
new file mode 100644
index 000000000..995fca4af
--- /dev/null
+++ b/packages/tdesign-uniapp/site/.env.intranet
@@ -0,0 +1 @@
+NODE_ENV=production
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/site/.env.preview b/packages/tdesign-uniapp/site/.env.preview
new file mode 100644
index 000000000..c0d665211
--- /dev/null
+++ b/packages/tdesign-uniapp/site/.env.preview
@@ -0,0 +1 @@
+NODE_ENV=development
diff --git a/packages/tdesign-uniapp/site/.env.production b/packages/tdesign-uniapp/site/.env.production
new file mode 100644
index 000000000..399be2a85
--- /dev/null
+++ b/packages/tdesign-uniapp/site/.env.production
@@ -0,0 +1 @@
+VUE_APP_PUBLICPATH = https://cdn.uwayfly.com/tdesign-uniapp
diff --git a/packages/tdesign-uniapp/site/docs.config.js b/packages/tdesign-uniapp/site/docs.config.js
new file mode 100644
index 000000000..15d100e25
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs.config.js
@@ -0,0 +1,626 @@
+export const docs = [
+  {
+    title: '开始',
+    titleEn: 'Start',
+    type: 'document', // 普通文档
+    children: [
+      {
+        title: '快速开始',
+        titleEn: 'Getting Started',
+        name: 'getting-started',
+        path: '/uniapp/getting-started',
+        component: () => import('@docs/getting-started.md'),
+        componentEn: () => import('@docs/getting-started.en-US.md'),
+      },
+      {
+        title: '更新日志',
+        titleEn: 'CHANGELOG',
+        name: 'changelog',
+        path: '/uniapp/changelog',
+        component: () => import('@/CHANGELOG.md'),
+      },
+      {
+        title: '组件概览',
+        titleEn: 'Overview',
+        name: 'overview',
+        path: '/uniapp/overview',
+        component: () => import('@docs/overview.md'),
+        componentEn: () => import('@docs/overview.en-US.md'),
+      },
+      {
+        title: '常见问题',
+        titleEn: 'FAQ',
+        name: 'faq',
+        path: '/uniapp/faq',
+        component: () => import('@docs/faq.md'),
+      },
+    ],
+  },
+  {
+    title: '全局配置',
+    titleEn: 'Global Config',
+    type: 'document',
+    children: [
+      {
+        title: '样式覆盖',
+        titleEn: 'Custom Style',
+        name: 'custom-style',
+        meta: { docType: 'explain' },
+        path: '/uniapp/custom-style',
+        component: () => import('@docs/custom-style.md'),
+      },
+      {
+        title: '自定义主题',
+        titleEn: 'Custom Theme',
+        name: 'custom-theme',
+        meta: { docType: 'explain' },
+        path: '/uniapp/custom-theme',
+        component: () => import('@docs/custom-theme.md'),
+      },
+      {
+        title: '深色模式',
+        titleEn: 'Dark Mode',
+        name: 'dark-mode',
+        meta: { docType: 'explain' },
+        path: '/uniapp/dark-mode',
+        component: () => import('@docs/dark-mode.md'),
+      },
+    ],
+  },
+  {
+    title: '高阶组件',
+    titleEn: 'Pro',
+    type: 'component',
+    children: [
+      {
+        title: 'AI Chat 对话',
+        titleEn: 'Chat',
+        name: 'chat',
+        path: '/uniapp-chat',
+        redirect: () => {
+          const isTDesignHost = window.location.host.includes('tdesign');
+          const baseUrl = isTDesignHost ? `//${window.location.host}` : 'https://uwayfly.com';
+          window.open(`${baseUrl}/uniapp-chat`, '_blank');
+        },
+      },
+    ],
+  },
+  {
+    title: '基础',
+    titleEn: 'Base',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'Button 按钮',
+        titleEn: 'Button',
+        name: 'button',
+        meta: { docType: 'base' },
+        path: '/uniapp/components/button',
+        component: () => import('@/button/README.md'),
+        componentEn: () => import('@/button/README.en-US.md'),
+      },
+      {
+        title: 'Divider 分割线',
+        titleEn: 'Divider',
+        name: 'divider',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/divider',
+        component: () => import('@/divider/README.md'),
+      },
+      {
+        title: 'Fab 悬浮按钮',
+        titleEn: 'Fab',
+        name: 'fab',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/fab',
+        component: () => import('@/fab/README.md'),
+      },
+      {
+        title: 'Icon 图标',
+        titleEn: 'Icon',
+        name: 'icon',
+        meta: { docType: 'base' },
+        path: '/uniapp/components/icon',
+        component: () => import('@/icon/README.md'),
+      },
+      {
+        title: 'Layout 布局',
+        titleEn: 'Layout',
+        name: 'layout',
+        meta: { docType: 'base' },
+        path: '/uniapp/components/layout',
+        component: () => import('@/col/README.md'),
+      },
+      {
+        title: 'Link 链接',
+        titleEn: 'Link',
+        name: 'link',
+        meta: { docType: 'base' },
+        path: '/uniapp/components/link',
+        component: () => import('@/link/README.md'),
+      },
+    ],
+  },
+  {
+    title: '导航',
+    titleEn: 'Navigation',
+    type: 'component',
+    children: [
+      {
+        title: 'BackTop 返回顶部',
+        titleEn: 'BackTop',
+        name: 'back-top',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/back-top',
+        component: () => import('@/back-top/README.md'),
+      },
+      {
+        title: 'Drawer 抽屉',
+        titleEn: 'Drawer',
+        name: 'drawer',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/drawer',
+        component: () => import('@/drawer/README.md'),
+      },
+      {
+        title: 'Indexes 索引',
+        titleEn: 'Indexes',
+        name: 'indexes',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/indexes',
+        component: () => import('@/indexes/README.md'),
+      },
+      {
+        title: 'Navbar 导航栏',
+        titleEn: 'Navbar',
+        name: 'navbar',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/navbar',
+        component: () => import('@/navbar/README.md'),
+      },
+      {
+        title: 'SideBar 侧边栏',
+        titleEn: 'SideBar',
+        name: 'sidebar',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/side-bar',
+        component: () => import('@/side-bar/README.md'),
+      },
+      {
+        title: 'Steps 步骤条',
+        titleEn: 'Steps',
+        name: 'steps',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/steps',
+        component: () => import('@/steps/README.md'),
+      },
+      {
+        title: 'TabBar 标签栏',
+        titleEn: 'TabBar',
+        name: 'tabbar',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/tab-bar',
+        component: () => import('@/tab-bar/README.md'),
+      },
+      {
+        title: 'Tabs 选项卡',
+        titleEn: 'Tabs',
+        name: 'tabs',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/tabs',
+        component: () => import('@/tabs/README.md'),
+      },
+    ],
+  },
+  {
+    title: '输入',
+    titleEn: 'Form',
+    type: 'component',
+    children: [
+      {
+        title: 'Calendar 日历',
+        titleEn: 'Calendar',
+        name: 'calendar',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/calendar',
+        component: () => import('@/calendar/README.md'),
+      },
+      {
+        title: 'Cascader 级联选择器',
+        titleEn: 'Cascader',
+        name: 'cascader',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/cascader',
+        component: () => import('@/cascader/README.md'),
+      },
+      {
+        title: 'Checkbox 多选框',
+        titleEn: 'Checkbox',
+        name: 'checkbox',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/checkbox',
+        component: () => import('@/checkbox/README.md'),
+      },
+      {
+        title: 'ColorPicker 颜色选择器',
+        titleEn: 'ColorPicker',
+        name: 'color-picker',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/color-picker',
+        component: () => import('@/color-picker/README.md'),
+      },
+      {
+        title: 'DateTimePicker 时间选择器',
+        titleEn: 'DateTimePicker',
+        name: 'dateTimePicker',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/date-time-picker',
+        component: () => import('@/date-time-picker/README.md'),
+      },
+      {
+        title: 'Form 表单',
+        titleEn: 'Form',
+        name: 'form',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/form',
+        component: () => import('@/form/README.md'),
+      },
+      {
+        title: 'Input 输入框',
+        titleEn: 'Input',
+        name: 'input',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/input',
+        component: () => import('@/input/README.md'),
+      },
+      {
+        title: 'Picker 选择器',
+        titleEn: 'Picker',
+        name: 'picker',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/picker',
+        component: () => import('@/picker/README.md'),
+      },
+      {
+        title: 'Radio 单选框',
+        titleEn: 'Radio',
+        name: 'radio',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/radio',
+        component: () => import('@/radio/README.md'),
+      },
+      {
+        title: 'Rate 评分',
+        titleEn: 'Rate',
+        name: 'rate',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/rate',
+        component: () => import('@/rate/README.md'),
+      },
+      {
+        title: 'Search 搜索框',
+        titleEn: 'Search',
+        name: 'search',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/search',
+        component: () => import('@/search/README.md'),
+      },
+      {
+        title: 'Slider 滑动选择器',
+        titleEn: 'Slider',
+        name: 'slider',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/slider',
+        component: () => import('@/slider/README.md'),
+      },
+      {
+        title: 'Stepper 步进器',
+        titleEn: 'Stepper',
+        name: 'stepper',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/stepper',
+        component: () => import('@/stepper/README.md'),
+      },
+      {
+        title: 'Switch 开关',
+        titleEn: 'Switch',
+        name: 'switch',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/switch',
+        component: () => import('@/switch/README.md'),
+      },
+      {
+        title: 'Textarea 多行文本框',
+        titleEn: 'Textarea',
+        name: 'textarea',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/textarea',
+        component: () => import('@/textarea/README.md'),
+      },
+      {
+        title: 'TreeSelect 树形选择',
+        titleEn: 'TreeSelect',
+        name: 'treeSelect',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/tree-select',
+        component: () => import('@/tree-select/README.md'),
+      },
+      {
+        title: 'Upload 上传',
+        titleEn: 'Upload',
+        name: 'upload',
+        meta: { docType: 'form' },
+        path: '/uniapp/components/upload',
+        component: () => import('@/upload/README.md'),
+      },
+    ],
+  },
+  {
+    title: '数据展示',
+    titleEn: 'Data Display',
+    type: 'component',
+    children: [
+      {
+        title: 'Avatar 头像',
+        titleEn: 'Avatar',
+        name: 'avatar',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/avatar',
+        component: () => import('@/avatar/README.md'),
+      },
+      {
+        title: 'Badge 徽标',
+        titleEn: 'Badge',
+        name: 'badge',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/badge',
+        component: () => import('@/badge/README.md'),
+      },
+      {
+        title: 'Cell 单元格',
+        titleEn: 'Cell',
+        name: 'cell',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/cell',
+        component: () => import('@/cell/README.md'),
+      },
+      {
+        title: 'Collapse 折叠面板',
+        titleEn: 'Collapse',
+        name: 'collapse',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/collapse',
+        component: () => import('@/collapse/README.md'),
+      },
+      {
+        title: 'CountDown 倒计时',
+        titleEn: 'CountDown',
+        name: 'countdown',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/count-down',
+        component: () => import('@/count-down/README.md'),
+      },
+      {
+        title: 'Empty 空状态',
+        titleEn: 'Empty',
+        name: 'empty',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/empty',
+        component: () => import('@/empty/README.md'),
+      },
+      {
+        title: 'Footer 页脚',
+        titleEn: 'Footer',
+        name: 'footer',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/footer',
+        component: () => import('@/footer/README.md'),
+      },
+      {
+        title: 'Image 图片',
+        titleEn: 'Image',
+        name: 'image',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/image',
+        component: () => import('@/image/README.md'),
+      },
+      {
+        title: 'Grid 宫格',
+        titleEn: 'Grid',
+        name: 'grid',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/grid',
+        component: () => import('@/grid/README.md'),
+      },
+      {
+        title: 'ImageViewer 图片预览',
+        titleEn: 'ImageViewer',
+        name: 'image-viewer',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/image-viewer',
+        component: () => import('@/image-viewer/README.md'),
+      },
+      {
+        title: 'Progress 进度条',
+        titleEn: 'Progress',
+        name: 'progress',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/progress',
+        component: () => import('@/progress/README.md'),
+      },
+      {
+        title: 'QRCode 二维码',
+        titleEn: 'QRCode',
+        name: 'qrcode',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/qrcode',
+        component: () => import('@/qrcode/README.md'),
+      },
+      {
+        title: 'Result 结果',
+        titleEn: 'Result',
+        name: 'result',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/result',
+        component: () => import('@/result/README.md'),
+      },
+      {
+        title: 'Skeleton 骨架屏',
+        titleEn: 'Skeleton',
+        name: 'skeleton',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/skeleton',
+        component: () => import('@/skeleton/README.md'),
+      },
+      {
+        title: 'Sticky 吸顶',
+        titleEn: 'Sticky',
+        name: 'sticky',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/sticky',
+        component: () => import('@/sticky/README.md'),
+      },
+      {
+        title: 'Swiper 轮播图',
+        titleEn: 'Swiper',
+        name: 'swiper',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/swiper',
+        component: () => import('@/swiper/README.md'),
+      },
+      {
+        title: 'Tag 标签',
+        titleEn: 'Tag',
+        name: 'tag',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/tag',
+        component: () => import('@/tag/README.md'),
+      },
+      {
+        title: 'Watermark 水印',
+        titleEn: 'Watermark',
+        name: 'watermark',
+        meta: { docType: 'data' },
+        path: '/uniapp/components/watermark',
+        component: () => import('@/watermark/README.md'),
+      },
+    ],
+  },
+  {
+    title: '反馈',
+    titleEn: 'Feedback',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'ActionSheet 动作面板',
+        titleEn: 'ActionSheet',
+        name: 'actionsheet',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/action-sheet',
+        component: () => import('@/action-sheet/README.md'),
+      },
+      {
+        title: 'Dialog 对话框',
+        titleEn: 'Dialog',
+        name: 'dialog',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/dialog',
+        component: () => import('@/dialog/README.md'),
+      },
+      {
+        title: 'DropdownMenu 下拉菜单',
+        titleEn: 'DropdownMenu',
+        name: 'dropdown-menu',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/dropdown-menu',
+        component: () => import('@/dropdown-menu/README.md'),
+      },
+      {
+        title: 'Guide 引导',
+        titleEn: 'Guide',
+        name: 'guide',
+        meta: { docType: 'navigation' },
+        path: '/uniapp/components/guide',
+        component: () => import('@/guide/README.md'),
+      },
+      {
+        title: 'Loading 加载',
+        titleEn: 'Loading',
+        name: 'loading',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/loading',
+        component: () => import('@/loading/README.md'),
+      },
+      {
+        title: 'Message 消息通知',
+        titleEn: 'Message',
+        name: 'message',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/message',
+        component: () => import('@/message/README.md'),
+      },
+      {
+        title: 'NoticeBar 公告栏',
+        titleEn: 'NoticeBar',
+        name: 'noticebar',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/notice-bar',
+        component: () => import('@/notice-bar/README.md'),
+      },
+      {
+        title: 'Overlay 遮罩层',
+        titleEn: 'Overlay',
+        name: 'overlay',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/overlay',
+        component: () => import('@/overlay/README.md'),
+      },
+      {
+        title: 'Popup 弹出层',
+        titleEn: 'Popup',
+        name: 'popup',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/popup',
+        component: () => import('@/popup/README.md'),
+      },
+      {
+        title: 'PullDownRefresh 下拉刷新',
+        titleEn: 'PullDownRefresh',
+        name: 'pullDownRefresh',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/pull-down-refresh',
+        component: () => import('@/pull-down-refresh/README.md'),
+      },
+      {
+        title: 'SwipeCell 滑动操作',
+        titleEn: 'SwipeCell',
+        name: 'swipeCell',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/swipe-cell',
+        component: () => import('@/swipe-cell/README.md'),
+      },
+      {
+        title: 'Toast 轻提示',
+        titleEn: 'Toast',
+        name: 'toast',
+        meta: { docType: 'message' },
+        path: '/uniapp/components/toast',
+        component: () => import('@/toast/README.md'),
+      },
+    ],
+  },
+];
+
+const enDocs = docs.map(doc => ({
+  ...doc,
+  title: doc.titleEn,
+  children: doc?.children?.map(child => ({
+    title: child.titleEn,
+    name: `${child.name}-en`,
+    path: `${child.path}-en`,
+    meta: { lang: 'en' },
+    component: child.componentEn || child.component,
+  })),
+}));
+
+export default { docs, enDocs };
diff --git a/packages/tdesign-uniapp/site/docs/custom-style.md b/packages/tdesign-uniapp/site/docs/custom-style.md
new file mode 100644
index 000000000..4f3df2fae
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/custom-style.md
@@ -0,0 +1,117 @@
+---
+title: 样式覆盖
+description: TDesign 提供了多种方式可以实现样式覆盖
+spline: explain
+---
+
+TDesign UniApp 提供了 4 种方式用于样式覆盖
+
+## 1 使用 Custom Style
+
+> TDesign 全部组件均支持 `custom-style` 属性。可传入 CSS 字符串，将会应用于组件的根元素。
+
+<!-- 注意与 [tdesign-miniprogram](https://tdesign.tencent.com/miniprogram/overview) 不同的是，不支持 `style` 属性，可将其替换为 `custom-style`。 -->
+
+### 开启 virtualHost
+
+在微信小程序基础库版本高于 2.19.2 的情况下，TDesign 会默认开启 `virtualHost` 属性。
+
+此时 `custom-style` 和 `style` 的效果是一致的，任选其一即可：
+
+```html
+<t-button style="color: red">填充按钮</t-button>
+
+<t-button custom-style="color: red">填充按钮</t-button>
+```
+
+渲染的结果如下：
+
+```html
+<button class="t-button" style="color: red">填充按钮</t-button>
+```
+
+### 关闭 virtualHost
+
+但在没有开启 `virtualHost` 的情况下，小程序使用的是 Shadow DOM 的渲染机制，自定义组件本身那个节点也会渲染成一个普通节点。
+
+使用 `style` 赋予的样式，将会被自定义组件本身那个节点劫持，导致无法正确传入组件内部，此时只能使用 `custom-style`：
+
+```html
+<t-button custom-style="color: red">填充按钮</t-button>
+```
+
+渲染的结果如下：
+
+```html
+<t-button>
+  <button class="t-button" style="color: red">填充按钮</t-button>
+<t-button>
+```
+
+## 2 解除样式隔离
+
+样式隔离相关文档：[微信官网文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)
+
+TDesign 全体组件均开启了 `addGlobalClass`，可以接受外部传入的样式。
+
+### 在页面中使用 TDesign
+
+```html
+<t-button theme="primary" >填充按钮</t-button>
+```
+
+```css
+.t-button--primary {
+  background-color: navy;
+}
+```
+
+### 在自定义组件中使用 TDesign
+
+> 需要在自定义组件的 options 中开启： `styleIsolation: 'shared'`
+
+```html
+<t-button theme="primary" >填充按钮</t-button>
+```
+
+对应的自定义组件：
+
+```js
+Component({
+  options: {
+    styleIsolation: 'shared'
+  }
+})
+```
+
+```css
+.t-button--primary {
+  background-color: navy;
+}
+```
+
+## 3 使用外部样式类
+
+外部样式类相关文档：[微信官网文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB)
+
+TDesign 在每个组件的内部都预置了许多外部样式类供开发者使用。
+
+**注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，所以最好加上 `!important`**
+
+```html
+<t-button t-class-loading="red-loading">填充按钮</t-button>
+```
+
+```css
+.red-loading {
+  color: red !important;
+}
+```
+
+**实现上，TDesign UniApp 将外部样式类都转成了 `props`**
+
+## 4 使用 CSS 变量
+
+TDesign 为所有组件预置了许多 CSS 变量，具体可以查看每个组件的 WXSS 文件。
+
+使用 CSS 变量的好处在于可以多页面复用，不需要重复修改。具体可以参考 [自定义主题](./custom-theme)
diff --git a/packages/tdesign-uniapp/site/docs/custom-theme.md b/packages/tdesign-uniapp/site/docs/custom-theme.md
new file mode 100644
index 000000000..bab175746
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/custom-theme.md
@@ -0,0 +1,63 @@
+---
+title: 自定义主题
+description: 如何使用 CSS Variables 自定义主题
+spline: explain
+---
+
+组件库通用的 Design Token 均使用 CSS Variables 声明，你可以在自己的项目中声明同名变量来覆盖他们的值。
+
+## 全局自定义
+
+TDesign UniApp 的 CSS Variables 全部定义可以在这里看到: [_variables.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less)
+
+如果你想改变主题色，主要改变这几个变量即可：
+
+```css
+@brand-color: var(--td-brand-color, #0052d9); // 主题色
+@success-color: var(--td-success-color, #00a870); // 成功
+@warning-color: var(--td-warning-color, #ed7b2f); // 警告
+@error-color: var(--td-error-color, #e34d59); // 失败
+```
+
+在 `App.vue` 文件添加下行代码即可：
+
+```css
+page {
+  --td-brand-color: navy; // 任何你想要的主题色
+}
+```
+
+> 当然，[_variables.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less) 里面都是通用的全局变量，都可以修改
+
+## 局部自定义
+
+在 TDesign UniApp 里，你也可以只给某个组件修改主题，下面以 `Rate` 举例：
+
+```css
+page {
+  --td-rate-selected-color: #ed7b2f; /* 选中的颜色 */
+  --td-rate-unselected-color: #e3e6eb; /* 未选中的颜色 */
+}
+```
+
+## 自定义 TabBar
+
+当然，有些组件可能不会被包裹在 `page` 里，比如自定义 `tab-bar`。
+
+此时，可以通过给组件增加 `t-class` 来实现：
+
+```html
+<t-tab-bar t-class="custom-tab-bar">
+  <t-tab-bar-item value="home" icon="home">home</t-tab-bar-item>
+</t-tab-bar>
+```
+
+对应的 `CSS` 可以这么定义：
+
+```css
+.custom-tab-bar {
+  --td-tab-bar-item-color: red;
+}
+```
+
+> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Variables，可以访问 [tab-bar-item.less](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/tab-bar-item/tab-bar-item.less)
diff --git a/packages/tdesign-uniapp/site/docs/dark-mode.md b/packages/tdesign-uniapp/site/docs/dark-mode.md
new file mode 100644
index 000000000..a82bcbcca
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/dark-mode.md
@@ -0,0 +1,95 @@
+---
+title: 深色模式
+description: 组件库提供了深色模式支持，可以点击官网右上角开关切换整体浅色与深色模式体验
+spline: design-mode
+---
+<!-- 
+<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>
+ 该特性于 1.3.0 上线，请留意版本。
+</div> -->
+
+## 使用之前
+
+使用之前，请确保你已阅读 [微信小程序深色模式适配文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html)。
+
+## 实现方案
+
+TDesign UniApp 基于 Design Token 变量和媒体查询 `prefers-color-scheme` 实现了深色模式。默认情况下，每个组件自带了组件级别 light 样式变量，无需手动引入。如需使用深色模式，请按照以下步骤操作。
+
+## 使用方式
+
+### 1. 修改配置
+
+在 `manifest.json` 中配置 `darkmode` 为 `true`，即表示当前平台已适配 DarkMode。
+
+```json
+{
+  "h5": {
+    "darkmode": true // 开启深色模式
+  },
+  "mp-weixin": {
+    "darkmode": true // 开启深色模式
+  }
+}
+```
+
+> ⚠️ 注意：如果你仍然在使用小程序原生导航栏，需要参考 [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html#%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE) 自行适配。
+
+### 2. 引入 Design Token 样式文件
+
+在 `main.ts` 中引入 Design Token 文件：
+
+```ts
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+### 3. 深色模式适配
+
+现在，在页面级别的样式文件中，所有的 CSS Variable 都已可用。请替换你的样式文件中原有的颜色值，以实现深色模式适配。
+
+```css
+/* 例如 */
+.text {
+  font-size: 28rpx;
+  color: var(--td-text-color-secondary); // 使用 CSS Variable
+}
+```
+
+> 💡Tips：所有的 [Design Token](https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/common/style/_variables.less) 可以在这里找到。
+
+### 4. 体验深色模式
+
+在微信开发者工具的调试中打开深色模式，请参见 [微信文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html#%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E8%B0%83%E8%AF%95)。
+
+## 特殊组件适配深色模式
+
+我们的全局 `CSS Variables` 声明在 `page` 标签选择器下，对非页面内容无效。目前已知两种场景：1. 基于`TabBar`组件的`custom-tab-bar` 组件，`TabBar` 的深色模式失效；2. `root-portal` 组件包裹的组件，在 `webview` 下其深色模式失效。
+
+为了处理这个问题，我们补充了一个同级类选择器：`.page` ，需要在对应的位置手动添加 `.page` 类名。
+
+```html
+// 开启虚拟节点
+<view class="page" >
+  <t-tab-bar  />
+</view>
+
+// 不开启虚拟节点
+<t-tab-bar class="page" />
+
+// root-portal 场景
+<root-portal>
+	<view class="page">
+	</view>
+</root-portal>
+```
+
+> 💡Tips：什么是虚拟节点请参考 [微信文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E8%99%9A%E6%8B%9F%E5%8C%96%E7%BB%84%E4%BB%B6%E8%8A%82%E7%82%B9)。
diff --git a/packages/tdesign-uniapp/site/docs/design/action-sheet.md b/packages/tdesign-uniapp/site/docs/design/action-sheet.md
new file mode 100644
index 000000000..597ad8e3c
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/action-sheet.md
@@ -0,0 +1,73 @@
+
+
+### 何时使用
+
+需要提供一组与当前场景操作相关的关联操作时使用。
+
+### 组件搭配使用
+
+##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-1.png" />
+  </div>
+
+
+### 常见用法
+##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-2.png" />
+  </div>
+
+<hr />
+
+##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-3.png" />
+  </div>
+
+
+
+### 推荐/慎用示例
+
+##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 动作面板中的操作项不建议用icon完成替代文字。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名                      | 何时使用                                                                                     |
+| :-------------------------- | :------------------------------------------------------------------------------------------- |
+| [抽屉](./drawer)            | 需要收折展示一组数量较多的菜单时使用。                                                       |
+| [对话框](./dialog)          | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。                         |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。                                         |
+| [选择器](./dropdown-menu)   | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/avatar.md b/packages/tdesign-uniapp/site/docs/design/avatar.md
new file mode 100644
index 000000000..f956c8dac
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/avatar.md
@@ -0,0 +1,61 @@
+
+
+### 何时使用
+
+作为一个用户信息展示，或用来代表某个/某些具体用户。
+
+### 组件搭配使用
+
+##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-1.png" />
+ </div>
+</div>
+<hr />
+
+##### 头像与[单元格](./cell) 组合使用，用于展示结构化的成员名称及信息，方便快速识别。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-2.png" />
+ </div>
+</div>
+
+<hr />
+
+##### 头像与[徽标](./badge) 组合使用，可作为消息提示或人员数量提示等。
+
+<div class="legend">
+ <div class="item">
+     <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-3.png" />
+ </div>
+</div>
+
+
+### 常见用法
+
+##### 多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-4.png" />
+</div>
+
+
+
+### 推荐/慎用示例
+
+##### 对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/avatar/avatar-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/back-top.md b/packages/tdesign-uniapp/site/docs/design/back-top.md
new file mode 100644
index 000000000..2a8a99bfb
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/back-top.md
@@ -0,0 +1,33 @@
+
+
+### 何时使用
+
+当页面内容过长，用户有快速返回到页面顶部的诉求时使用
+
+### 页面布局相关
+
+##### 常驻于页面的右下角，方便用户随时点击返回
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/back-top/back-top-1.png" />
+  </div>
+</div>
+
+<hr />
+
+### 常见用法
+
+##### 当用户滚动页面时，为了不影响到用户对内容的浏览体验，建议可将返回顶部按钮最小化或像右侧收起，当用户停止滚动时，再完全显示按钮
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/back-top/back-top-2.gif" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名            | 何时使用                                                    |
+| :---------------- | :---------------------------------------------------------- |
+| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/badge.md b/packages/tdesign-uniapp/site/docs/design/badge.md
new file mode 100644
index 000000000..7d9561050
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/badge.md
@@ -0,0 +1,68 @@
+
+
+### 何时使用
+
+当需要展示特定对象的状态变化或承载运营性质提示时使用。
+
+### 组件搭配使用
+
+##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-3.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标；当提示的信息需要精确显示数量时，应使用带数字的徽标。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-4.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-5.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 建议根据场景和信息类型定义最长字数，不宜出现过长的情况。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名        | 何时使用                                                                                                             |
+| :------------ | :------------------------------------------------------------------------------------------------------------------- |
+| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/button.md b/packages/tdesign-uniapp/site/docs/design/button.md
new file mode 100644
index 000000000..e95cbc664
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/button.md
@@ -0,0 +1,81 @@
+
+
+### 何时使用
+
+当前流程的结束或新流程的开启需要用户点击触发时使用。
+
+### 组件搭配使用
+
+##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-1.png" />
+    <em></em>
+  </div>
+</div>
+
+<hr />
+
+##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-2.png" />
+    <em></em>
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-3.png" />
+    <em></em>
+  </div>
+</div>
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-4.png" />
+    <em></em>
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-5.png" />
+    <em></em>
+  </div>
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-6.png" />
+    <em></em>
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 用户在使用主、次按钮时，需要表达主次关系，突出强调的最主要操作，其他操作使用次按钮，不建议同时使用多个主按钮。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-8.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名                 | 何时使用                                                    |
+| :--------------------- | :---------------------------------------------------------- |
+| [链接](./link)         | 当需要外链跳转或页面底部footer链接跳转时使用。              |
+| [悬浮按钮](./fab)      | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
+| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。      |
diff --git a/packages/tdesign-uniapp/site/docs/design/calendar.md b/packages/tdesign-uniapp/site/docs/design/calendar.md
new file mode 100644
index 000000000..3b975412c
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/calendar.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+需要在页面间跳转、返回，或需承载少量辅助功能时使用。
+
+### 组件搭配使用
+
+##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-1.png" />
+</div>
+
+### 推荐/慎用
+
+##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 区间选择尽量使用在较短时间的场景中，当涉及的时间通常在数月、数年的长度时，建议使用其它方式让用户输入。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名                           | 何时使用                               |
+| :------------------------------- | :------------------------------------- |
+| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/cascader.md b/packages/tdesign-uniapp/site/docs/design/cascader.md
new file mode 100644
index 000000000..ce9802c1a
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/cascader.md
@@ -0,0 +1,59 @@
+
+
+### 何时使用
+
+当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。
+
+
+### 组件搭配使用
+
+##### 级联选择器与[索引](./indexes)组合使用，当每个层级选项较多时，配合索引有利于用户快速找到目标选项。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cascader/cascader-1.png" />
+</div>
+
+
+### 常见用法
+
+##### 在表单中，级联选择器可放置于表单内容需要的顺序中，通常用于地址信息的选择和填写。
+<div class="legend">
+ <div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cascader/cascader-2.png" />
+ </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。
+
+<div class="legend">
+ <div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cascader/cascader-3.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+ </div>
+</div>
+
+<hr />
+
+##### 在多层级中，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cascader/cascader-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cascader/cascader-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名             | 何时使用                                                                                     |
+| :----------------- | :------------------------------------------------------------------------------------------- |
+| [选择器](./picker) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/cell.md b/packages/tdesign-uniapp/site/docs/design/cell.md
new file mode 100644
index 000000000..6697dc590
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/cell.md
@@ -0,0 +1,55 @@
+
+
+### 常见用法
+
+##### 常用作内容详情入口或功能入口的平铺陈列。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 常用作同类型同格式信息项平铺陈列。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-3.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 作为入口时，不建议承载过多过复杂的内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 作为入口时，不建议在一个单元格内承载其他操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名         | 何时使用                                                         |
+| :------------- | :--------------------------------------------------------------- |
+| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/checkbox.md b/packages/tdesign-uniapp/site/docs/design/checkbox.md
new file mode 100644
index 000000000..bd169a505
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/checkbox.md
@@ -0,0 +1,50 @@
+
+
+### 何时使用
+
+当用户需要从一组数据选择多个选项时使用。
+
+### 组件搭配使用
+
+##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-3.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+</div>
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-4.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+<hr />
+
+##### 在选项较多的场景下执行多选时，建议展示用户已选数量。
+
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-5.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+</div>
+
+### 相似组件
+
+| 组件名            | 何时使用                                 |
+| :---------------- | :--------------------------------------- |
+| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/collapse.md b/packages/tdesign-uniapp/site/docs/design/collapse.md
new file mode 100644
index 000000000..405873e99
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/collapse.md
@@ -0,0 +1,63 @@
+
+
+### 何时使用
+
+当信息较多，需要进行收纳时使用。
+
+### 常见用法
+
+##### 经常用于信息种类较多的页面，将相对次要的信息收纳起来，让用户能够关注到页面中的主要信息或流程。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/collapse/collapse-1.png" />
+</div>
+
+<hr />
+
+##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/collapse/collapse-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/collapse/collapse-3.png" />
+</div>
+
+
+
+### 推荐/慎用示例
+
+##### 当信息层级较多时，不建议嵌套折叠面板，层级过多时建议审视信息结构或使用其它交互方式展示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/collapse/collapse-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/collapse/collapse-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名                      | 何时使用                                             |
+| :-------------------------- | :--------------------------------------------------- |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/count-down.md b/packages/tdesign-uniapp/site/docs/design/count-down.md
new file mode 100644
index 000000000..94f0508f0
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/count-down.md
@@ -0,0 +1,50 @@
+
+
+### 何时使用
+
+当需要向用户提示剩余时间时使用。
+
+### 常见用法
+
+##### 在营销场景下，通过倒计时向用户展示运营活动开始倒计时或距活动结束的剩余时间，从而体现稀缺性吸引目标受众的注意力，勾起足够兴趣以此激励用户参与。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/count-down/count-down-1.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在一些工作流场景下，提示用户还剩余多少时间来完成某项任务或处理某些事项，强化时间概念。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/count-down/count-down-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 不建议在同一个页面滥用倒计时，若需要反复使用，建议用较为轻量的样式.
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/count-down/count-down-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+   <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/count-down/count-down-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名          | 何时使用                                                                                                             |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------- |
+| [标签](./tag)   | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 |
+| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。                                                               |
diff --git a/packages/tdesign-uniapp/site/docs/design/date-time-picker.md b/packages/tdesign-uniapp/site/docs/design/date-time-picker.md
new file mode 100644
index 000000000..2dd9102b2
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/date-time-picker.md
@@ -0,0 +1,42 @@
+
+
+### 何时使用
+
+在表单中需要输入单个日期或时间时使用。
+
+### 组件搭配使用
+
+##### 通常和[单元格](./Cell)搭配使用，点击后唤起时间选择器。
+
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/date-time-picker/date-time-picker-1.png" />
+ </div>
+
+### 常见用法
+
+##### 当需要输入时间区间时，通常使用两个时间选择器分别选择起、止时间。
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/date-time-picker/date-time-picker-2.png" />
+ </div>
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/date-time-picker/date-time-picker-3.png" />
+ </div>
+
+### 推荐/慎用示例
+
+##### 选择时间后，建议使用标准化格式在表单中书写日期和时间。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/date-time-picker/date-time-picker-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+
+### 何时使用
+| 组件名             | 何时使用                                           |
+| :----------------- | :------------------------------------------------- |
+| [日历](./Calendar) | 在表单中需要精确输入单个、多个、或区间日期时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/dialog.md b/packages/tdesign-uniapp/site/docs/design/dialog.md
new file mode 100644
index 000000000..d80c58691
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/dialog.md
@@ -0,0 +1,72 @@
+
+
+### 何时使用
+
+需要用户做一些决定，或提供完成某个任务需要的一些额外信息时使用。
+
+### 组件搭配使用
+
+##### 与输入类组合使用，用于帮助用户完成一些快捷的输入或选择；但不建议一个对话框内有多种不同的输入类组件。
+
+<div class="legend">
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-2.png" />
+  </div>
+
+</div>
+
+
+### 常见用法
+
+##### 用于较为重要的信息提示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-3.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于较为重要的信息提示，且需要用户决定。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-4.png" />
+    <em></em>
+  </div>
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-5.png" />
+    <em></em>
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 确认类对话框通常用于较危险操作的二次确认，建议对话框按钮文本的涉及需要清楚地表明操作后果，加强感知避免误操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dialog/dialog-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+| 组件名                | 何时使用                                                                                   |
+| :-------------------- | :----------------------------------------------------------------------------------------- |
+| [轻提示](./toast)     | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 |
+| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。           |
+
diff --git a/packages/tdesign-uniapp/site/docs/design/divider.md b/packages/tdesign-uniapp/site/docs/design/divider.md
new file mode 100644
index 000000000..268a317ec
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/divider.md
@@ -0,0 +1,53 @@
+
+
+### 何时使用
+
+为了区分内容与内容之间的分组、层级关系时可使用。
+
+### 与页面布局相关
+
+##### 通栏分割线：横向贯穿整个页面，一般为了区分更加独立性的内容信息，让信息分隔的更明显，更加独立性。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/divider/divider-1.png" />
+    <em></em>
+  </div>
+</div>
+
+<hr />
+
+##### 内嵌分割线：一般会在左侧或者右侧预留缺口，目的来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/divider/divider-2.png" />
+    <em></em>
+  </div>
+</div>
+<hr />
+
+##### 组合分割线：通栏分割线与内嵌分割线组合布局。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/divider/divider-3.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/divider/divider-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/divider/divider-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/drawer.md b/packages/tdesign-uniapp/site/docs/design/drawer.md
new file mode 100644
index 000000000..b76b64dde
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/drawer.md
@@ -0,0 +1,55 @@
+
+
+### 何时使用
+
+需要收折展示一组数量较多的菜单时使用
+
+### 组件搭配使用
+
+##### 抽屉与[按钮](./button)组合使用，通过按钮点击唤起抽屉。
+
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/drawer/drawer-1.png" />
+ </div>
+
+### 常见用法
+
+##### 在网站场景，通常用来收折展示整个网站的菜单导航。
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/drawer/drawer-2.png" />
+ </div>
+
+<hr />
+
+##### 在应用场景，通常用来承载某类相关性较强的或较为低频的，如个人中心、设置等场景。
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/drawer/drawer-3.png" />
+ </div>
+
+
+### 推荐/慎用示例
+
+##### 若抽屉内的菜单项较多，且菜单项之间的关联性存在差异时，建议对菜单项进行分组。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/drawer/drawer-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/drawer/drawer-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名                      | 何时使用                                                                                     |
+| :-------------------------- | :------------------------------------------------------------------------------------------- |
+| [动作面板](./action-sheet)  | 需要提供一组与当前场景操作相关的关联操作时使用。                                             |
+| [对话框](./dialog)          | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。                         |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。                                         |
+| [选择器](./dropdown-menu)   | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/dropdown-menu.md b/packages/tdesign-uniapp/site/docs/design/dropdown-menu.md
new file mode 100644
index 000000000..b00efdca2
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/dropdown-menu.md
@@ -0,0 +1,48 @@
+
+
+### 何时使用
+
+当内容较多时，需要通过筛选快速定位某一类内容时使用。
+
+### 常见用法
+
+##### 常用于单个维度筛选或多个维度复合筛选的场景，可进行单选或多选。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dropdown-menu/dropdown-menu-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dropdown-menu/dropdown-menu-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 在单选的筛选场景内，建议将用户选择项替换标题显示于菜单面板内。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dropdown-menu/dropdown-menu-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/dropdown-menu/dropdown-menu-4.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+</div>
+
+
+
+### 相似组件
+
+| 组件名               | 何时使用                                                                                       |
+| :------------------- | :--------------------------------------------------------------------------------------------- |
+| [选择器](./Cascader) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/empty.md b/packages/tdesign-uniapp/site/docs/design/empty.md
new file mode 100644
index 000000000..2f61bd1a7
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/empty.md
@@ -0,0 +1,44 @@
+
+
+### 何时使用
+
+当页面或模块数据为空时使用。
+
+### 与页面布局相关
+
+##### 用于整个页面或某个独立模块的状态展示，在页面、模块内居中。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/empty/empty-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/empty/empty-2.png" />
+  </div>
+</div>
+
+### 组件搭配使用
+
+##### 空状态与[步骤条](./steps)组合使用，通过步骤展示提示用户如何新建/添加。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/empty/empty-3.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 空状态与[按钮](./button)组合使用，引导用户直接新建/添加。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/empty/empty-4.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名           | 何时使用                                 |
+| :--------------- | :--------------------------------------- |
+| [结果](./result) | 当需要向用户展示操作后的结果反馈时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/fab.md b/packages/tdesign-uniapp/site/docs/design/fab.md
new file mode 100644
index 000000000..f3560afba
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/fab.md
@@ -0,0 +1,80 @@
+
+
+### 何时使用
+
+当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。
+
+### 与页面布局相关
+
+##### 为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-1.png" />
+    <em></em>
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-2.png" />
+    <em></em>
+  </div>
+</div>
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-3.png" />
+    <em></em>
+  </div>
+</div>
+
+
+### 组件搭配使用
+
+##### 悬浮按钮与[动作面板](./action-sheet)组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-4.png" />
+   <em></em>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/fab/fab-8.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                  | 何时使用                                               |
+| :---------------------- | :----------------------------------------------------- |
+| [按钮](./button)        | 当前流程的结束或新流程的开启需要用户点击触发时使用。   |
+| [返回顶部](./back-top ) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
+
diff --git a/packages/tdesign-uniapp/site/docs/design/footer.md b/packages/tdesign-uniapp/site/docs/design/footer.md
new file mode 100644
index 000000000..a76cd14c6
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/footer.md
@@ -0,0 +1,59 @@
+
+
+### 何时使用
+
+当页面底部需要放置一些补充信息和链接时使用。
+
+### 与页面布局相关
+
+##### 页脚通常位于网站每个页面底部或主体内容下方的区域。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-1.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-3.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载网站导航。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-4.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-5.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/footer/footer-6.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/grid.md b/packages/tdesign-uniapp/site/docs/design/grid.md
new file mode 100644
index 000000000..4951c1353
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/grid.md
@@ -0,0 +1,88 @@
+
+
+### 何时使用
+
+当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。
+
+### 组件搭配使用
+
+##### 可与徽标组合使用，可作为消息提示、或其它相关的数量提示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-1.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 通常用于金刚区、或底部标签栏等，在页面中较为醒目的位置承载主要的功能入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-3.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-4.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-5.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 当在金刚区使用宫格承载功能入口时，建议梳理功能的优先级，将金刚区控制在3行以内，一些相对次要的功能可通过左右滑动的方式收纳在第二屏。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-8.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/grid/grid-9.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名           | 何时使用                   |
+| :--------------- | :------------------------- |
+| [单元格](./cell) | 用于各个类别行的信息展示。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/image-viewer.md b/packages/tdesign-uniapp/site/docs/design/image-viewer.md
new file mode 100644
index 000000000..44796c611
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/image-viewer.md
@@ -0,0 +1,36 @@
+
+
+### 何时使用
+
+当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。
+
+### 组件搭配使用
+
+##### 图片预览与[图片](./image)组合使用，通过图片作为缩略图，点击后进行图片预览。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image-viewer/image-viewer-1.png" />
+</div>
+
+<hr />
+
+##### 当使用带删除操作的图片预览组件时，可与[动作面板](./action-sheet)组合使用，对删除操作进行二次确认。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image-viewer/image-viewer-2.png" />
+</div>
+
+### 推荐/慎用示例
+
+##### 在可点击进入详情的卡片入口中，不建议针对图片添加图片预览能力。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image-viewer/image-viewer-3.png" />
+   <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+### 相似组件
+
+| 组件名          | 何时使用                                                         |
+| :-------------- | :--------------------------------------------------------------- |
+| [图片](./image) | 当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/image.md b/packages/tdesign-uniapp/site/docs/design/image.md
new file mode 100644
index 000000000..4a8b6e0b1
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/image.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+当需要对图像内容进行陈列、展示，以便用户快速了解图像信息时使用。
+
+### 组件搭配使用
+
+##### 可使用[宫格](./grid)、[单元格](./cell)承载图片，作为某种功能、某类信息的入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 图片与[下拉刷新](./pull-down-refresh)组合使用，用于图片瀑布流时的内容更新。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-3.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 当图片仅为展示，不具备预览功能时，应避免图片尺寸过小，从而影响图像信息的浏览和获取。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名                     | 何时使用                                                                           |
+| :------------------------- | :--------------------------------------------------------------------------------- |
+| [图片预览](./image-viewer) | 当需要对展示的图片进行快速查看，以及在查看时存在放大、缩小、删除等操作诉求时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/indexes.md b/packages/tdesign-uniapp/site/docs/design/indexes.md
new file mode 100644
index 000000000..323bbdd49
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/indexes.md
@@ -0,0 +1,53 @@
+
+
+### 何时使用
+
+当数据项较多时，为方便用户快速找到目标数据项时使用。
+
+### 组件搭配使用
+
+##### 索引与[单选框](./radio)、[多选框](./checkbox)组合使用，在选择数据的场景配合索引有利于用户快速找到目标选项。
+
+<div class="legend">
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/indexes/indexes-1.png" />
+ </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 索引项需要跟数据项小标题保持一致。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/indexes/indexes-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/indexes/indexes-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 索引项排序应具备一定的逻辑相关性。
+
+<div class="legend">
+ <div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/indexes/indexes-4.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+ </div>
+
+ <div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/indexes/indexes-5.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+ </div>
+</div>
+
+### 相似组件
+
+| 组件名               | 何时使用                                                       |
+| :------------------- | :------------------------------------------------------------- |
+| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/input.md b/packages/tdesign-uniapp/site/docs/design/input.md
new file mode 100644
index 000000000..ed1df52fb
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/input.md
@@ -0,0 +1,72 @@
+
+
+### 何时使用
+
+需要进行文字输入，且需填写的字数较少时使用。
+
+### 组件搭配使用
+
+##### 呈现在单元格中，可与按钮组件相结合，点击按钮触发相关功能。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-1.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 通常使用在表单中进行文字填写，填写状态下可在右侧显示清空输入的按钮，供用户快速清空已输入的内容。
+
+<div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-2.png" />
+</div>
+
+<hr />
+
+##### 当需要进行较复杂的内容填写，如验证码等，可使用特定类型输入框，结合按钮、图形等辅助元素帮助用户完成流程。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-3.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-4.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 标签、占位符文本简明扼要地描述用户需要输入的内容，标签超过10个字时请考虑使用其它展示方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当需要输入较长的复杂内容时，建议使用多行文本框输入。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/input/input-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                   | 何时使用                                     |
+| :----------------------- | :------------------------------------------- |
+| [多行文本框](./textarea) | 需要进行文字输入，且需填写的字数较多时使用。 |
+| [搜索框](./search)       | 当需要从海量信息中准确提取准确的内容时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/link.md b/packages/tdesign-uniapp/site/docs/design/link.md
new file mode 100644
index 000000000..95047ad36
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/link.md
@@ -0,0 +1,44 @@
+
+
+### 何时使用
+
+当需要跳转至外链时使用。
+
+### 组件搭配使用
+
+##### 链接与[消息通知](./message)、[公告栏](./notice-bar)组合使用，在进行消息通知与提示的同时，提供解决方案或详情的跳转入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/link/link-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/link/link-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 在同一段文本中如使用多个链接，需要利用纯文本字符等将其区隔开。
+
+<div class="legend">
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/link/link-3.png" />
+   <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+ </div>
+
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/link/link-4.png" />
+   <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+ </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名           | 何时使用                                             |
+| :--------------- | :--------------------------------------------------- |
+| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/loading.md b/packages/tdesign-uniapp/site/docs/design/loading.md
new file mode 100644
index 000000000..9196ae3cc
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/loading.md
@@ -0,0 +1,58 @@
+
+
+### 何时使用
+
+当打开新页面或操作完成后，等待加载时使用。
+
+### 与页面布局相关
+
+##### 当展示整个页面、或模块的加载进度时，通常放置在页面、模块的正中间。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-2.png" />
+  </div>
+</div>
+
+
+### 组件搭配使用
+
+##### 在信息流页面中，可结合下拉刷新使用，对未展示出来的最新内容进行加载。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-3.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-4.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 当加载时间较长，尤其是超过10秒的场景中，推荐使用进度条，向用户明确展示当前任务的进展，避免等待时间过长带来焦急的负面体验。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/loading/loading-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                          | 何时使用                                                         |
+| :------------------------------ | :--------------------------------------------------------------- |
+| [进度条](./progress)            | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。 |
+| [下拉刷新](./pull-down-refresh) | 当需要对页面信息进行整体刷新或加载更多同类信息时使用。           |
diff --git a/packages/tdesign-uniapp/site/docs/design/message.md b/packages/tdesign-uniapp/site/docs/design/message.md
new file mode 100644
index 000000000..3ad20366c
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/message.md
@@ -0,0 +1,50 @@
+
+
+### 何时使用
+
+当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。
+
+### 与页面布局相关
+
+##### 通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/message/message-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/message/message-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/message/message-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/message/message-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                 | 何时使用                                                                                         |
+| :--------------------- | :----------------------------------------------------------------------------------------------- |
+| [轻提示](./toast)      | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。       |
+| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/navbar.md b/packages/tdesign-uniapp/site/docs/design/navbar.md
new file mode 100644
index 000000000..cf4c7f21a
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/navbar.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+需要在页面间跳转、返回，或需承载少量辅助功能时使用。
+
+### 组件搭配使用
+
+##### 带图标的导航栏与[抽屉](./drawer)、[动作面板](./action-sheet)组合使用，用于唤起一组操作或功能。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-1.png" />
+</div>
+
+<hr />
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-2.png" />
+</div>
+
+
+### 常见用法
+
+##### 通常用来承载页面标题和返回操作，点击跳转回到上一个打开的页面。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-3.png" />
+</div>
+
+<hr />
+
+##### 在应用内，通常用来承载搜索、扫码等功能性高频操作。
+
+<div class="legend">
+   <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-4.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-5.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在需要定位的场景，通常结合当前定位进行、所在城市等进行展示并提供切换的能力。
+<div class="legend">
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/navbar/navbar-6.png" />
+ </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/notice-bar.md b/packages/tdesign-uniapp/site/docs/design/notice-bar.md
new file mode 100644
index 000000000..a9e2831f4
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/notice-bar.md
@@ -0,0 +1,81 @@
+
+
+### 何时使用
+
+当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发
+
+### 页面布局相关
+
+##### 公告栏位于页面或模块的顶部，让用户能够快速关注到重要信息
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-2.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 经常用于系统状态的通知，如警示或错误信息的展示，告知用户具体的系统状态、出现原因、和解决方式
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-3.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 展示当前场景的重要公告，这类公告通常比较重要，需要用户务必关注
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-4.gif" />
+  </div>
+</div>
+
+<hr />
+
+##### 在营销场景，经常用于广告或促销信息的展示，提高用户转化率
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-5.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当需要同时展示多条公告时，通常使用可滚动的公告栏，依次展示多条公告信息
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-6.gif" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 可以同时展示多个公告栏，但不建议超过2个，过多的公告栏会占用过多屏幕空间、分散用户的注意力
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/notice-bar/notice-bar-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                | 何时使用                                                                                   |
+| :-------------------- | :----------------------------------------------------------------------------------------- |
+| [消息通知](./message) | 当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。           |
+| [轻提示](./toast)     | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 |
+
diff --git a/packages/tdesign-uniapp/site/docs/design/picker.md b/packages/tdesign-uniapp/site/docs/design/picker.md
new file mode 100644
index 000000000..b658eefa8
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/picker.md
@@ -0,0 +1,40 @@
+
+
+### 何时使用
+
+当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。
+
+### 推荐/慎用示例
+
+##### 选择器若为一组有层级关系的选项时，选项层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/picker/picker-1.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 选择器若为一组有层级关系的选项时，各层级选项的归属关系应具备逻辑相关性，数据层级由大到小，避免归属关系混乱。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/picker/picker-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/picker/picker-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                            | 何时使用                                                                 |
+| :-------------------------------- | :----------------------------------------------------------------------- |
+| [时间选择器](./date-time-picker ) | 在表单中需要输入单个日期或时间时使用。                                   |
+| [级联选择器](./Cascader)          | 当一组选项由递进层级构成，且每个层级有大量的选项需要用户逐级选择时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/popup.md b/packages/tdesign-uniapp/site/docs/design/popup.md
new file mode 100644
index 000000000..ae2165a8e
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/popup.md
@@ -0,0 +1,53 @@
+
+
+### 常见用法
+
+##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-1.png" />
+</div>
+
+<hr />
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-2.png" />
+</div>
+
+<hr />
+
+##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-3.png" />
+</div>
+
+<hr />
+
+##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-4.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-5.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/popup/popup-6.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/progress.md b/packages/tdesign-uniapp/site/docs/design/progress.md
new file mode 100644
index 000000000..36c528923
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/progress.md
@@ -0,0 +1,62 @@
+
+
+### 何时使用
+
+当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。
+
+### 与页面布局相关
+
+##### 当展示页面、模块的加载进度时，通常进度条放置在页面、模块的正中间。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-2.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 通常用于任务周期较长的场景中，配有文字或图标显示进度和状态。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-3.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当任务时间较短、或难以预估剩余时间时，通常弱化进度的百分比信息，如使用隐藏数值进度条、或微型的环形进度条。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-4.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-5.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 若任务需要等待的时间很长，可以提供大概的时间估计，让用户更有预期。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/progress/progress-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名            | 何时使用                                   |
+| :---------------- | :----------------------------------------- |
+| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/pull-down-refresh.md b/packages/tdesign-uniapp/site/docs/design/pull-down-refresh.md
new file mode 100644
index 000000000..137c8cca0
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/pull-down-refresh.md
@@ -0,0 +1,60 @@
+
+
+### 何时使用
+
+当需要对页面信息进行整体刷新或加载更多同类信息时使用。
+
+### 与页面布局相关
+
+##### 下拉刷新位于内容最上方；通常在页面最顶部或者选项卡、吸顶模块之下。
+
+<div class="legend">
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-2.png" />
+  </div>
+
+</div>
+
+<div class="legend">
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-3.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 在推荐型信息流页面使用下拉刷新，对页面所有信息进行整体更新。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-4.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在按时间排布型信息流页面使用下拉刷新，对未展示出来的最新内容进行加载。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-5.png" />
+    <em></em>
+  </div>
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/pull-downre-fresh/pull-downre-fresh-6.png" />
+    <em></em>
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名            | 何时使用                                   |
+| :---------------- | :----------------------------------------- |
+| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/radio.md b/packages/tdesign-uniapp/site/docs/design/radio.md
new file mode 100644
index 000000000..a8a64f2fb
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/radio.md
@@ -0,0 +1,57 @@
+
+
+### 何时使用
+
+当用户需要从一组数据选择一个选项时使用。
+
+### 组件搭配使用
+
+##### 单选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 带有详情信息的选项，建议就近展开相关内容，不太建议用单选框触发一个弹窗。
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+<hr />
+
+##### 不建议用单选框开启/关闭一个功能，建议使用开关组件。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/radio/radio-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名               | 何时使用                                 |
+| :------------------- | :--------------------------------------- |
+| [多选框](./checkbox) | 当用户需要从一组数据选择多个选项时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/rate.md b/packages/tdesign-uniapp/site/docs/design/rate.md
new file mode 100644
index 000000000..affb6df57
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/rate.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+当需要对某行为/事物进行简单的星级评定时使用。
+
+### 组件搭配使用
+
+##### 通常结合多行文本框、标签使用，常见于评论场景，用户对某事物进行星级评定后，可选择预设的文本标签、或在文本框中撰写内容来进行更详细的评价。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/rate/rate-1.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 在较为严谨的评论场景，通常结合辅助文字，帮助用户更好地理解每个星级的含义，避免个体的打分标准不统一。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/rate/rate-2.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 可结合业务场景自定义评分图标，如使用品牌的icon，增强品牌透出，但不建议使用过于复杂的图形作为评分图标。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/rate/rate-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/rate/rate-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在同一个评论场景中，评分机制应保持一致，不建议将半星、整星的评分机制混用。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/rate/rate-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/result.md b/packages/tdesign-uniapp/site/docs/design/result.md
new file mode 100644
index 000000000..10ee2f080
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/result.md
@@ -0,0 +1,54 @@
+
+
+### 何时使用
+
+当需要向用户展示操作后的结果反馈时使用。
+
+### 常见用法
+
+##### 任务本身在弹窗中进行或仅需要较为轻量的结果反馈时，可使用弹窗承载结果反馈。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/result/result-1.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当任务结束并给予反馈后，需要推荐其他内容、任务、商品等给用户时，通常使用页面承载结果和推荐。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/result/result-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当任务结果为失败时，通常会告知用户失败原因，甚至提供解决问题的操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/result/result-3.png" />
+  </div>
+</div>
+
+<hr />
+
+
+##### 当前操作结束后，若还存在一系列用户需关注的流程进度，通常会结合步骤条将流程展示于结果页。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/result/result-4.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名             | 何时使用                     |
+| :----------------- | :--------------------------- |
+| [空状态](./empty ) | 当页面或模块数据为空时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/search.md b/packages/tdesign-uniapp/site/docs/design/search.md
new file mode 100644
index 000000000..36de05945
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/search.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+当需要从海量信息中准确提取准确的内容时使用。
+
+### 与页面布局相关
+
+##### 位于页面或内容模块的最上方，通过搜索框、搜索icon等方式承载和触发功能。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/search/search-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/search/search-2.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 在可搜索内容类型较为单一的场景下，可直接在原页面激活搜索态进行搜索，并通过高亮命中字符的方式展示搜索结果，页面内容组织结构保持不变。
+
+<div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/search/search-3.png" />
+</div>
+
+<hr />
+
+##### 在可搜索内容类型较丰富的场景下，通过模态承载搜索态，并在新页面中按分类呈现搜索结果。
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/search/search-4.png" />
+</div>
+
+<hr />
+
+##### 在用户触发搜索后，对用户即将搜索的内容进行预判和推荐，并需要满足营销的诉求。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/search/search-5.png" />
+</div>
+
+
+### 相似组件
+
+| 组件名            | 何时使用                                     |
+| :---------------- | :------------------------------------------- |
+| [输入框](./Input) | 需要进行文字输入，且需填写的字数较少时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/side-bar.md b/packages/tdesign-uniapp/site/docs/design/side-bar.md
new file mode 100644
index 000000000..009678dd2
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/side-bar.md
@@ -0,0 +1,50 @@
+
+
+### 何时使用
+
+当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。
+
+### 组件搭配使用
+
+##### 侧边栏与徽标组合使用，用于展示品类的状态信息或营销情况。
+
+<div class="legend">
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/side-bar/side-bar-1.png" />
+ </div>
+</div>
+
+
+### 正确/慎用示例
+
+##### 建议文本简明扼要，若文本过长建议进行换行处理，尽量避免将文本进行截断。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/side-bar/side-bar-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/side-bar/side-bar-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 不建议仅用图标、emoji作为品类选项，避免表意不清晰。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/side-bar/side-bar-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名              | 何时使用                                                                      |
+| :------------------ | :---------------------------------------------------------------------------- |
+| [标签栏](./tab-bar) | 目标模块/视图需要从应用的任何地方直接进行访问时使用                           |
+| [选项卡](./tabs)    | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/skeleton.md b/packages/tdesign-uniapp/site/docs/design/skeleton.md
new file mode 100644
index 000000000..c034dfe20
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/skeleton.md
@@ -0,0 +1,27 @@
+
+
+### 何时使用
+
+当整个页面需要加载时使用
+
+### 推荐/慎用示例
+
+##### 建议骨架屏的元素构成和排布方式与页面自身保持一致
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/skeleton/skeleton-1.gif" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/skeleton/skeleton-2.gif" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名            | 何时使用                                   |
+| :---------------- | :----------------------------------------- |
+| [加载](./loading) | 当打开新页面或操作完成后，等待加载时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/slider.md b/packages/tdesign-uniapp/site/docs/design/slider.md
new file mode 100644
index 000000000..24a664854
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/slider.md
@@ -0,0 +1,59 @@
+
+
+### 何时使用
+
+当用户需要快捷地进行数值/程度选择时使用。
+
+### 组件搭配使用
+
+##### 滑动选择器与[单元格](./cell)组合使用，单元格作为承载滑动选择器的容器。
+
+<div class="legend">
+  <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/slider/slider-1.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 用于可量化的数值选择，需要精确到具体某个数值/区间。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/slider/slider-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于难以量化的对立数据，以此表示程度。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/slider/slider-3.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 当有多个刻度区间时，避免区间数值不一致，造成滑动调整不准确。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/slider/slider-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/slider/slider-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名              | 何时使用                 |
+| :------------------ | :----------------------- |
+| [步进器](./stepper) | 需要进行数量选择时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/stepper.md b/packages/tdesign-uniapp/site/docs/design/stepper.md
new file mode 100644
index 000000000..fe0c63c35
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/stepper.md
@@ -0,0 +1,50 @@
+
+
+### 何时使用
+
+需要进行数量选择时使用
+
+### 常见用法
+
+##### 通常用于数量选择，如选择人数、天数、商品数量等
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/stepper/stepper-1.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用户可通过“+”“-”按钮调整数值，或点击数字输入框来输入具体的数值
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/stepper/stepper-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 点击“+”“-”按钮时，数值增减的步长相同，不建议进行不同步长的变化
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/stepper/stepper-3.gif" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/stepper/stepper-4.gif" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                 | 何时使用                                     |
+| :--------------------- | :------------------------------------------- |
+| [滑动选择器](./slider) | 当用户需要快捷地进行数值/程度选择时使用。    |
+| [输入框](./input)      | 需要进行文字输入，且需填写的字数较少时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/steps.md b/packages/tdesign-uniapp/site/docs/design/steps.md
new file mode 100644
index 000000000..c0e7419c6
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/steps.md
@@ -0,0 +1,74 @@
+
+
+### 何时使用
+
+当需要展示较为复杂的线性流程时使用。
+
+### 与页面布局相关
+
+##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。
+<div class="legend">
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-1.png" />
+ </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 步骤不宜过多，过长的步骤建议优化流程或使用其它交互方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 每个小步骤建议尽量简洁清晰，以降低用户的理解和操作成本；若小步骤本身已经具有较高的复杂度，建议使用其它方式呈现。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 建议用简明的语言对步骤进行描述，描述文案不宜过长。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-6.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+<hr />
+
+##### 尽量避免嵌套步骤条。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/steps/steps-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名               | 何时使用                                                                      |
+| :------------------- | :---------------------------------------------------------------------------- |
+| [进度条](./progress) | 当有一项系统任务正在进行，需要向用户展示该任务的当前进度时使用。              |
+| [选项卡](./tabs)     | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/swipe-cell.md b/packages/tdesign-uniapp/site/docs/design/swipe-cell.md
new file mode 100644
index 000000000..b74e83efa
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/swipe-cell.md
@@ -0,0 +1,75 @@
+
+
+### 何时使用
+
+需要针对列表项目进行某项低频的辅助操作时使用。
+
+### 组件搭配使用
+
+##### 与[单元格](./cell)、[按钮](./button)组合使用，单元格作为承载滑动操作的容器，左右滑动后展示操作项的按钮。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-2.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 通常使用在对话列表、收藏列表、购物车等场景中，承载删除、收藏等辅助操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-3.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-4.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 通常左滑后展示删除按钮，若删除操作重要且无法撤回，可在滑动操作中对删除进行二次确认。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-5.png" />
+</div>
+
+
+### 推荐/慎用示例
+
+##### 左右滑动操作通常承载低频的辅助功能，不建议承载高频或过于复杂的功能。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-6.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+<hr />
+
+##### 按钮的顺序、颜色使用需要符合用户预期。
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-7.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+<hr />
+
+##### 左滑的操作数不建议超过4个，右滑不建议超过1个，操作过多时应改用其它交互方式。
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swipe-cell/swipe-cell-8.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+
+### 相似组件
+
+| 组件名           | 何时使用                                             |
+| :--------------- | :--------------------------------------------------- |
+| [按钮](./button) | 当前流程的结束或新流程的开启需要用户点击触发时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/swiper.md b/packages/tdesign-uniapp/site/docs/design/swiper.md
new file mode 100644
index 000000000..25c44deea
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/swiper.md
@@ -0,0 +1,40 @@
+
+
+### 何时使用
+
+当需要承载一组banner或一组图片时使用。
+
+### 常见用法
+
+##### 用于放置营销活动或承载平台广告等具有时效性的内容入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swiper/swiper-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swiper/swiper-2.png" />
+  </div>
+</div>
+
+<hr />
+
+ ##### 在图文详情页场景，用于当图片数量大于1时的折叠展示。
+<div class="legend">
+ <div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swiper/swiper-3.png" />
+ </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 索引项需要跟数据项小标题保持一致。
+
+<div class="legend">
+ <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/swiper/swiper-4.png" />
+   <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+ </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/switch.md b/packages/tdesign-uniapp/site/docs/design/switch.md
new file mode 100644
index 000000000..95ab608e6
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/switch.md
@@ -0,0 +1,31 @@
+
+
+### 何时使用
+
+当需要切换某个功能的开启、关闭时使用。
+
+### 推荐/慎用示例
+
+##### 开关状态的颜色使用建议符合颜色语义，尽量避免让开启、关闭状态的颜色产生混淆。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/switch/switch-1.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/switch/switch-2.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 若需结合文本描述开关状态，建议文案和开关状态保持一致，确保表意清晰。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/switch/switch-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/tab-bar.md b/packages/tdesign-uniapp/site/docs/design/tab-bar.md
new file mode 100644
index 000000000..9bfc0da40
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/tab-bar.md
@@ -0,0 +1,77 @@
+
+
+### 何时使用
+
+目标模块/视图需要从应用的任何地方直接进行访问时使用。
+
+### 组件搭配使用
+
+##### 标签栏与[徽标](./badge)组合使用，用于告知用户该模块/视图的状态变化。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-2.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 建议标签栏数量在2-5个之间；若多与5个，建议重新审视应用的信息架构，对信息架构进行优化。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 避免在同个状态下有不同颜色的文本和图标。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 文本是对标签的简要说明，不建议将文本进行截断或换行，所以应避免使用长文本。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+<hr />
+
+<div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tab-bar/tab-bar-8.png" />
+   <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+
+### 相似组件
+
+| 组件名               | 何时使用                                                                      |
+| :------------------- | :---------------------------------------------------------------------------- |
+| [选项卡](./tabs)     | 当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。 |
+| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。                |
diff --git a/packages/tdesign-uniapp/site/docs/design/tabs.md b/packages/tdesign-uniapp/site/docs/design/tabs.md
new file mode 100644
index 000000000..6be7389f7
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/tabs.md
@@ -0,0 +1,106 @@
+
+
+### 何时使用
+
+当内容/数据需要一定的分类纬度进行区分，便于用户快速作出选择并切换时可以使用。
+
+### 与页面布局相关
+
+##### 位于页面或模块的顶部，统领下方内容的切换，通常设置吸顶，方便用户快速切换。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-2.png" />
+  </div>
+</div>
+
+### 组件搭配使用
+
+##### 选项卡与[徽标](./badge)组合使用，用于展示户该分类的状态变化或营销信息。
+
+<div class="legend">
+  <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-3.png" />
+  </div>
+</div>
+
+
+### 常见用法
+
+##### 较常使用于以信息瀑布流为场景的应用，使用选项卡承载类目或状态，便于用户区分和切换。
+
+<div class="legend">
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-4.png" />
+  </div>
+
+ <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-5.png" />
+  </div>
+</div>
+
+<div class="legend">
+  <div class="item">
+   <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-6.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 不建议使用选项卡来实现功能模块间的切换。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-7.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-8.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 建议文本简明扼要，不建议将文本进行截断或换行；若需要使用较长文本，建议使用等距选项卡。
+
+<div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-9.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-10.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+<hr />
+
+##### 尽量避免使用多个选项卡进行嵌套，若使用，建议避免使用相同样式进行嵌套；一般情况下选项卡内的信息需要进一步分类，建议使用下拉菜单或标签进行选择过滤。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-11.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tabs/tabs-12.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名               | 何时使用                                                       |
+| :------------------- | :------------------------------------------------------------- |
+| [标签栏](./tab-bar)  | 当目标模块/视图需要从应用的任何地方直接进行访问时使用。        |
+| [侧边栏](./side-bar) | 当内容项数量较多，需要用户根据品类快速选择到目标内容项时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/tag.md b/packages/tdesign-uniapp/site/docs/design/tag.md
new file mode 100644
index 000000000..b42ac2bfe
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/tag.md
@@ -0,0 +1,86 @@
+
+
+### 何时使用
+
+当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。
+
+### 组件搭配使用
+
+##### 与[图片](./image)组合使用，图片作为内容、商品等对象的详情入口时，可通过添加标签来展示该对象的属性、状态、类别、营销情况等。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 与[下拉菜单](./dropdown-menu)组合使用，作为菜单面板下拉后的选项，供用户进行选择。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-3.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 常用于展示对象本身的属性、状态、类别、营销情况等信息，且仅作为展示使用。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-4.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-5.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 常用于内容数据基于某个维度或某些维度的检索、筛选。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-6.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-7.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 标签颜色和字体颜色在明度、色相上要避免难以区分，保证标签的可读性。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-8.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 标签文案需要经过概括和提炼，不建议过长。
+
+<div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tag/tag-9.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+</div>
+
+
+
+### 相似组件
+
+| 组件名          | 何时使用                                               |
+| :-------------- | :----------------------------------------------------- |
+| [徽标](./badge) | 当需要展示特定对象的状态变化或承载运营性质提示时使用。 |
diff --git a/packages/tdesign-uniapp/site/docs/design/textarea.md b/packages/tdesign-uniapp/site/docs/design/textarea.md
new file mode 100644
index 000000000..1d5b15da7
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/textarea.md
@@ -0,0 +1,59 @@
+
+
+### 何时使用
+
+需要进行文字输入，且需填写的字数较多时使用。
+
+### 常见用法
+
+##### 常见于表单、内容发布的场景中，用于输入较长的文本内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 尽量避免输入过于复杂的文本内容，考虑将内容拆分，让用户分步输入。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 建议根据待输入的内容决定多行文本框的高度。
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-5.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/textarea/textarea-6.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名            | 何时使用                                     |
+| :---------------- | :------------------------------------------- |
+| [输入框](./input) | 需要进行文字输入，且需填写的字数较少时使用。 |
+
diff --git a/packages/tdesign-uniapp/site/docs/design/toast.md b/packages/tdesign-uniapp/site/docs/design/toast.md
new file mode 100644
index 000000000..4c2f01078
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/toast.md
@@ -0,0 +1,51 @@
+
+
+### 何时使用
+
+当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。
+
+### 与页面布局相关
+
+##### 轻提示通常放置在页面正中间，一段时间后自动消失。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/toast/toast-1.png" />
+  </div>
+</div>
+
+
+### 组件搭配使用
+
+##### 轻提示经常和加载搭配使用，在页面内进行某项操作后，用作加载反馈。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/toast/toast-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 轻提示的文案内容通常不超过30个字，确保用户有充足的时间进行阅读，若需要提示较长的文本内容，建议使用其它交互方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/toast/toast-3.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/toast/toast-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名                 | 何时使用                                                                                               |
+| :--------------------- | :----------------------------------------------------------------------------------------------------- |
+| [消息通知](./message)  | 当需要对用户进行较轻量的反馈或提示，且不需要、或只需要少量用户交互时使用，可以自动消失或通过点击关闭。 |
+| [公告栏](./notice-bar) | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失。                       |
diff --git a/packages/tdesign-uniapp/site/docs/design/tree-select.md b/packages/tdesign-uniapp/site/docs/design/tree-select.md
new file mode 100644
index 000000000..eda240319
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/tree-select.md
@@ -0,0 +1,27 @@
+
+
+
+### 何时使用
+
+当一组选项由2-3个层级构成，且每个层级有大量的选项需要用户逐级选择时使用。
+
+
+### 推荐/慎用示例
+
+##### 级联选择器的层级不宜超过3层，层级过多时应调整数据结构或改用级联选择器。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/tree-select/tree-select-1.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名                   | 何时使用                                                                                       |
+| :----------------------- | :--------------------------------------------------------------------------------------------- |
+| [选择器](./picker)       | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。 |
+| [级联选择器](./cascader) | 当一组选项由递进层级构成，且有每个层级有大量的选项需要用户逐级选择使用时。                     |
diff --git a/packages/tdesign-uniapp/site/docs/design/upload.md b/packages/tdesign-uniapp/site/docs/design/upload.md
new file mode 100644
index 000000000..085e8de15
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/upload.md
@@ -0,0 +1,43 @@
+
+
+### 何时使用
+
+当需要进行图片上传时使用。
+
+### 组件搭配使用
+
+##### 通常用于图片上传，点击上传按钮可唤起[动作面板](./action-sheet)，供用户选择不同渠道进行新的上传。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/upload/upload-1.png" />
+</div>
+
+<hr />
+
+##### 点击已经上传的图片可跳转[图片预览](./image-viewer)，让用户对已上传的图片进行快速查看。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/upload/upload-2.png" />
+</div>
+
+
+
+### 推荐/慎用示例
+
+##### 若上传的文件有尺寸、格式、数量限制，推荐在文案中进行明确标识。
+
+<div class="item">
+  <img src="https://tdesign.gtimg.com/site/design/mobile-guide/upload/upload-3.png" />
+  <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+</div>
+
+<hr />
+
+##### 上传特定证件图片，特别是涉及到证件正反面时，推荐结合图示进行上传指引，更加直观。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/upload/upload-4.png" />
+    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
+  </div>
+</div>
diff --git a/packages/tdesign-uniapp/site/docs/design/watermark.md b/packages/tdesign-uniapp/site/docs/design/watermark.md
new file mode 100644
index 000000000..9f5fb0685
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/design/watermark.md
@@ -0,0 +1 @@
+### 何时使用
diff --git a/packages/tdesign-uniapp/site/docs/faq.md b/packages/tdesign-uniapp/site/docs/faq.md
new file mode 100644
index 000000000..9a86813a5
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/faq.md
@@ -0,0 +1,83 @@
+---
+title: 常见问题
+description: 看看有没有你想要的。
+spline: explain
+---
+
+## 写在前面
+
+TDesign UniApp 的实现原理，可以查看[这篇文章](https://juejin.cn/post/7571650164844068898)。
+
+尽管 TDesign UniApp 已尽最大可能让开发者减少心智负担，但实际上，受限于 [uniapp](https://github.com/dcloudio/uni-app) 自己的[问题](https://github.com/dcloudio/uni-app/issues)就比较多，加上各个平台差异很大，所以做 uniapp 项目前就应该想到会踩一些坑。不过，我还是尽量解答大家疑惑，给一些业务合适的解决方案。
+
+> 虽然 uniapp 仍存在一些问题，但不妨碍它是一个伟大的框架，节省了大量开发者的大量工作量（国内百花齐放的环境），使用条件编译，适配多平台而不增加包体积。理解 uniapp，成为 uniapp。从心里认可 uniapp 的实现方式和价值，是我做这个库的原因之一。
+
+### 外部样式类
+
+`tdesign-miniprogram` 中的 `externalClasses`，在 `tdesign-uniapp` 中被转成了 `props`。
+
+传参方式不变，都是 `t-class="xxx-class"`。使用的时候要在样式文件中增加 `:deep` 标记，否则会因为 `scoped` 而失败，如果是非页面级别组件，需要增加 `options: { styleIsolation: 'shared' }`。
+
+### 事件参数
+
+`tdesign-miniprogram` 中的事件参数，在 `tdesign-uniapp` 中都被去掉了 `detail` 一层。以 Picker 组件为例，在 `tdesign-miniprogram` 中，这样获取参数
+
+```js
+onPickerChange(e) {
+  console.log(e.detail.value);
+}
+```
+
+在 `tdesign-uniapp` 中，需要去掉 `.detail`，即
+
+```js
+onPickerChange(e) {
+  console.log(e.value);
+}
+```
+
+这样做是为了简化使用。`tdesign-uniapp` 中很多组件都采用了这种方式。
+
+### onPageScroll
+
+APP-PLUS 下，需要业务自己在页面中监听 `pageScroll` 事件，这是因为动态的监听不生效。这里给出一个最佳实践之一。
+
+```js
+// 页面 Vue 文件下，引入组件库提供的监听方法
+// 该方法内部会通过 event-bus，传递参数给对应的组件
+import { handlePageScroll } from 'tdesign-uniapp/mixins/page-scroll';
+
+export default {
+  onPageScroll(e) {
+    handlePageScroll(e);
+  },
+}
+```
+
+### slot 类型提示
+
+uniapp 给的脚手架工程配置有问题，`src/env.d.ts` 文件的 `vue` 声明不对，没有声明 `slot` 的类型。
+
+解决方案：
+
+1. 注释掉 `src/env.d.ts` 文件中 `vue` 的声明
+2. `tsconfig.json` 中配置 `"moduleResolution": "bundler"`
+
+<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/11/own_mike_XeC8BMxSQKPdc2GY.png" width="600" />
+
+<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/11/own_mike_Askm5PSWT8rMmh3G.png" width="600" />
+
+另外，它这个脚手架太老了，自己的 `tsconfig.json` 还飘红，升级下 `@vue/tsconfig` 可解决。
+
+这里有一个开箱即用的 uniapp Vue3 [脚手架项目](https://github.com/novlan1/tdesign-uniapp-demo-cli)，支持自动导入、类型提示等，你可以打开看看。
+
+### visible 受控
+
+下面几个组件在关闭时，需要父组件中设置 `visible` 为 `false`，否则无法再次开启。也就是 `visible` 只能是受控的。可以用 `v-model:visible` 语法糖，可参考对应组件示例。
+
+- picker
+- date-time-picker
+- color-picker
+- cascader
+- calendar
+- drawer
diff --git a/packages/tdesign-uniapp/site/docs/getting-started.en-US.md b/packages/tdesign-uniapp/site/docs/getting-started.en-US.md
new file mode 100644
index 000000000..065a81ddb
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/getting-started.en-US.md
@@ -0,0 +1,95 @@
+---
+title: Uni App
+description: TDesign MiniProgram is a UI component library for Uni App.
+spline: explain
+---
+
+## Preview
+
+Please use WeChat to scan the QR code to preview the TDesign MiniProgram example. ↓
+<br/>
+
+<img width="260" src="https://tdesign.gtimg.com/site/qrcode.jpeg" />
+
+
+## Before use
+
+Before using it, please make sure you have studied WeChat’s official [Simple Tutorial on Mini Programs](https://developers.weixin.qq.com/miniprogram/dev/framework/) and [Introduction to Custom Components](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/).
+
+## Installation
+
+### npm
+
+TDesign MiniProgram already supports using NPM to install third-party packages. For details, see [NPM Support](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
+
+```bash
+npm i tdesign-miniprogram -S --production
+```
+
+> After installation, npm needs to be built in WeChat developer tools: `tool -  build npm`.(If `NPM packages not found` appears during the build, please go to the `project.config.json` file to add the `packNpmManually` and `packNpmRelationList` configuration items. For details, see [NPM Support](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm))
+
+> After the build is successful, check the box `Compile JS to ES5`
+> <br/>
+><img width="200" src="https://tdesign.gtimg.com/miniprogram/docs/getting-started.png" />
+
+## Modify app.json
+
+Remove `"style": "v2"` in `app.json`.
+
+> Because [v2 configuration](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style) means enabling a new version of component styles, it will cause TDesign component styles to be disordered.
+
+## Modify tsconfig.json
+
+If you use `typescript` to develop, you need to modify `tsconfig.json` to specify `paths`
+
+```json
+{
+  "paths": {
+      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
+    }
+}
+```
+
+## Use components
+
+Taking the button component as an example, you only need to introduce the custom component corresponding to the button in the `JSON` file.
+
+```json
+{
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}
+```
+
+Then you can use the component directly in wxml.
+
+```html
+<t-button theme="primary">按钮</t-button>
+```
+
+## Preview in developer tools
+
+```bash
+# Install project dependencies
+npm install
+
+# compile
+npm run dev
+```
+
+Open [WeChat Developer Tools](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html) and add the `_example` directory to preview the example.
+
+## Base library version
+
+Minimum base library version `^2.12.0`
+
+### Correspondence between component and basic library versions
+
+| 组件   | API  | 最低基础库 | 描述 |
+| -- | -- | -- | -- | 
+| Upload | [wx.previewMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewMedia.html)                                   | 2.12.0     | -    |
+| Upload | [wx.chooseMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html)                                     | 2.10.0     | -    |
+| Upload | [wx.chooseMessageFile](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html)                         | 2.5.0      | -    |
+| Navbar | [wx.getMenuButtonBoundingClientRect](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) | 2.1.0      | -    |
+
diff --git a/packages/tdesign-uniapp/site/docs/getting-started.md b/packages/tdesign-uniapp/site/docs/getting-started.md
new file mode 100644
index 000000000..fb6b1b504
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/getting-started.md
@@ -0,0 +1,137 @@
+---
+title: Uni App
+description: TDesign UniApp 组件库。
+spline: explain
+---
+
+## 预览
+
+扫码查看 ↓
+
+<img src="https://cdn.uwayfly.com/tdesign-uniapp/tdesign-uniapp-qrcodes.png?a=3" width="600" />
+
+> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
+
+## 安装
+
+### NPM 方式
+
+```bash
+npm i tdesign-uniapp
+```
+
+### UNI_MODULES 方式
+
+已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
+
+## 使用
+
+1. 在 `main.ts` 中引入样式文件
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.css';
+```
+
+也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+
+```js
+import 'tdesign-uniapp/common/style/theme/index.less';
+```
+
+2. 在文件中使用
+
+```html
+<template>
+  <t-loading />
+</template>
+
+<script lang="ts" setup>
+import TLoading from 'tdesign-uniapp/loading/loading.vue';
+</script>
+```
+
+只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+
+## 自动导入
+
+在 `pages.json` 配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)，可实现自动导入。
+
+### CLI 模式
+
+使用 CLI 模式，即使用 `node_modules` 下的 `tdesign-uniapp` 时，配置如下。
+
+```json
+{
+  "easycom": {
+    "custom": {
+      "^t-(.*)": "tdesign-uniapp/$1/$1.vue"
+    }
+  }
+}
+```
+
+### UNI_MODULES 模式
+
+使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。
+
+```json
+{
+  "easycom": {
+    "custom": {
+      "^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
+    }
+  }
+}
+```
+
+## 编辑器提示
+
+安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+
+推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/tdesign-uniapp/global.d.ts`，即可实现该效果。
+
+## 平台兼容性
+
+| 平台         | Vue2 | Vue3 | H5  | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
+| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
+| **支持情况** | ✅    | ✅    | ✅   | ✅       | ✅   | ⚠️        | ✅          | ✅        |
+
+| 平台         | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 小红书小程序 | 京东小程序 |
+| ------------ | ------------ | ---------- | ---------- | ---------- | ------------ | ---------- |
+| **支持情况** | ✅            | ✅          | ✅          | ✅          | ✅            | ✅          |
+
+## 浏览器兼容性
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> iOS Safari| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |[<img src="https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png" alt="Android Browser" width="24px" height="24px" />]()<br/>Android Browser|
+| --------- | --------- | --------- | --------- | --------- |--------- |
+| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
+
+详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
+
+## 开发
+
+```bash
+# 安装项目依赖
+npm install
+
+# 执行组件编译
+npm run dev
+
+# 小程序
+npm run dev:mp
+```
+
+打开[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，把 `packages/demo/dist/dev` 目录添加进去就可以预览示例了。
+
+## 小程序基础库版本
+
+- 微信小程序：最低基础库版本`^2.12.0`
+
+### 组件与微信小程序基础库版本对应关系
+
+| 组件   | API | 最低基础库 | 描述 |
+| -- | -- | -- | -- | 
+| Upload | [wx.previewMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewMedia.html)                                   | 2.12.0     | -    |
+| Upload | [wx.chooseMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html)                                     | 2.10.0     | -    |
+| Upload | [wx.chooseMessageFile](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html)                         | 2.5.0      | -    |
+| Navbar | [wx.getMenuButtonBoundingClientRect](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) | 2.1.0      | -    |
diff --git a/packages/tdesign-uniapp/site/docs/overview.en-US.md b/packages/tdesign-uniapp/site/docs/overview.en-US.md
new file mode 100644
index 000000000..e2967e350
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/overview.en-US.md
@@ -0,0 +1,487 @@
+---
+title: Overview
+description: Component types will continue to be added according to business practices, please pay attention to the TDesign Mobile Vue update log。
+spline: explain
+---
+
+
+<h3>Base<em class="tag">6</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/button-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-button.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-button-dark.png" />
+      <p class="name">Button</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/divider-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-divider.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-divider-dark.png" />
+      <p class="name">Divider</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/fab-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-fab.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-fab-dark.png" />
+      <p class="name">Fab</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/icon-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-icon.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-icon-dark.png" />
+      <p class="name">Icon</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/layout-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-layout.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-layout-dark.png" />
+      <p class="name">Layout</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/link-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-link.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-link-dark.png" />
+      <p class="name">Link</p>
+    </a>
+  </div>
+</section>
+
+<h3>Navigation<em class="tag">8</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/back-top-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop-dark.png" />
+      <p class="name">BackTop</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/drawer-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-drawer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-drawer-dark.png" />
+      <p class="name">Drawer</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/indexes-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes-dark.png" />
+      <p class="name">Indexes</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/navbar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar-dark.png" />
+      <p class="name">Navbar</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/side-bar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-sidebar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-sidebar-dark.png" />
+      <p class="name">SideBar</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/steps-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-steps.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-steps-dark.png" />
+      <p class="name">Steps</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tab-bar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar-dark.png" />
+      <p class="name">TabBar</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tabs-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs-dark.png" />
+      <p class="name">Tabs</p>
+    </a>
+  </div>
+</section>
+
+<h3>Form<em class="tag">17</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/calendar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-calendar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-calendar-dark.png" />
+      <p class="name">Calendar</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/cascader-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-cascader.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-cascader-dark.png" />
+      <p class="name">Cascader</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/checkbox-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox-dark.png" />
+      <p class="name">CheckBox</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/color-picker">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-colorpicker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-colorpicker-dark.png" />
+      <p class="name">ColorPicker</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/date-time-picker-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker-dark.png" />
+      <p class="name">DateTimePicker</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/form-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-input.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-input-dark.png" />
+      <p class="name">Form</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/input-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-input.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-input-dark.png" />
+      <p class="name">Input</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/picker-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-picker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-picker-dark.png" />
+      <p class="name">Picker</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/radio-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-radio.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-radio-dark.png" />
+      <p class="name">Radio</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/rate-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-rate.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-rate-dark.png" />
+      <p class="name">Rate</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/search-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-search.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-search-dark.png" />
+      <p class="name">Search</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/slider-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-slider.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-slider-dark.png" />
+      <p class="name">Slider</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/stepper-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper-dark.png" />
+      <p class="name">Stepper</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/switch-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-switch.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-switch-dark.png" />
+      <p class="name">Switch</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/textarea-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea-dark.png" />
+      <p class="name">Textarea</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tree-select-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-treeselect.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-treeselect-dark.png" />
+      <p class="name">TreeSelect</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/upload-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-upload.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-upload-dark.png" />
+      <p class="name">Upload</p>
+    </a>
+  </div>
+</section>
+
+<h3>Data Display<em class="tag">18</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/avatar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar-dark.png" />
+      <p class="name">Avatar</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/badge-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-badge.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-badge-dark.png" />
+      <p class="name">Badge</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/cell-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-cell.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-cell-dark.png" />
+      <p class="name">Cell</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/collapse-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-collapse.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-collapse-dark.png" />
+      <p class="name">Collapse</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/count-down-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown-dark.png" />
+      <p class="name">CountDown</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/empty-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-empty-dark.png" />
+      <p class="name">Empty</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/footer-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-footer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-footer-dark.png" />
+      <p class="name">Footer</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/grid-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-grid.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-grid-dark.png" />
+      <p class="name">Grid</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/image-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-image.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-image-dark.png" />
+      <p class="name">Image</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/image-viewer-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-imageviewer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-imageviewer-dark.png" />
+      <p class="name">ImageViewer</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/progress-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-progress-dark.png" />
+      <p class="name">Progress</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/qrcode-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-qrcode.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-qrcode-dark.png" />
+      <p class="name">QRCode</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/result-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-result.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-result-dark.png" />
+      <p class="name">Result</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/skeleton-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton-dark.png" />
+      <p class="name">Skeleton</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/sticky-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky-dark.png" />
+      <p class="name">Sticky</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/swiper-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper-dark.png" />
+      <p class="name">Swiper</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tag-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tag.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tag-dark.png" />
+      <p class="name">Tag</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/watermark-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-watermark.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-watermark-dark.png" />
+      <p class="name">Watermark</p>
+    </a>
+  </div>
+</section>
+
+<h3>Feedback<em class="tag">10</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/action-sheet-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-actionsheet.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-actionsheet-dark.png" />
+      <p class="name">ActionSheet</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/dialog-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog-dark.png" />
+      <p class="name">Dialog</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/dropdown-menu-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-dropdownmenu.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-dropdownmenu-dark.png" />
+      <p class="name">DropdownMenu</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/guide">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-guide.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-guide-dark.png" />
+      <p class="name">Guide</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/loading-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-loading.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-loading-dark.png" />
+      <p class="name">Loading</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/message-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-message.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-message-dark.png" />
+      <p class="name">Message</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/notice-bar-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-noticebar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-noticebar-dark.png" />
+      <p class="name">NoticeBar</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/overlay-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-overlay.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-overlay-dark.png" />
+      <p class="name">Overlay</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/popup-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-popup.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-popup-dark.png" />
+      <p class="name">Popup</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/pull-down-refresh-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-pulldownrefresh.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-pulldownrefresh-dark.png" />
+      <p class="name">PullDownRefresh</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/swipe-cell-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell-dark.png" />
+      <p class="name">SwipeCell</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/toast-en">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-toast.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-toast-dark.png" />
+      <p class="name">Toast</p>
+    </a>
+  </div>
+</section>
diff --git a/packages/tdesign-uniapp/site/docs/overview.md b/packages/tdesign-uniapp/site/docs/overview.md
new file mode 100644
index 000000000..0edd8ca6d
--- /dev/null
+++ b/packages/tdesign-uniapp/site/docs/overview.md
@@ -0,0 +1,486 @@
+---
+title: 组件概览
+description: 将根据业务实践持续新增组件类型，敬请留意组件库更新日志。
+spline: explain
+---
+
+<h3>基础<em class="tag">6</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/button">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-button.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-button-dark.png" />
+      <p class="name">Button 按钮</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/divider">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-divider.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-divider-dark.png" />
+      <p class="name">Divider 分割线</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/fab">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-fab.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-fab-dark.png" />
+      <p class="name">Fab 悬浮按钮</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/icon">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-icon.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-icon-dark.png" />
+      <p class="name">Icon 图标</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/layout">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-layout.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-layout-dark.png" />
+      <p class="name">Layout 布局</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/link">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-link.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-link-dark.png" />
+      <p class="name">Link 链接</p>
+    </a>
+  </div>
+</section>
+
+<h3>导航<em class="tag">8</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/back-top">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop-dark.png" />
+      <p class="name">BackTop 返回顶部</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/drawer">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-drawer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-drawer-dark.png" />
+      <p class="name">Drawer 抽屉</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/indexes">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes-dark.png" />
+      <p class="name">Indexes 索引</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/navbar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar-dark.png" />
+      <p class="name">Navbar 导航条</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/side-bar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-sidebar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-sidebar-dark.png" />
+      <p class="name">SideBar 侧边导航栏</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/steps">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-steps.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-steps-dark.png" />
+      <p class="name">Steps 步骤条</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tab-bar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar-dark.png" />
+      <p class="name">TabBar 标签栏</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tabs">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs-dark.png" />
+      <p class="name">Tabs 选项卡</p>
+    </a>
+  </div>
+</section>
+
+<h3>输入<em class="tag">17</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/calendar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-calendar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-calendar-dark.png" />
+      <p class="name">Calendar 日历</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/cascader">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-cascader.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-cascader-dark.png" />
+      <p class="name">Cascader 级联选择器</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/checkbox">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox-dark.png" />
+      <p class="name">CheckBox 多选框</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/color-picker">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-colorpicker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-colorpicker-dark.png" />
+      <p class="name">ColorPicker 颜色选择器</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/date-time-picker">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker-dark.png" />
+      <p class="name">DateTimePicker 日期选择器</p>
+    </a>
+  </div>
+   <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/input">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-form.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-form-dark.png" />
+      <p class="name">Form 表单</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/input">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-input.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-input-dark.png" />
+      <p class="name">Input 输入框</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/picker">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-picker.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-picker-dark.png" />
+      <p class="name">Picker 选择器</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/radio">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-radio.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-radio-dark.png" />
+      <p class="name">Radio 单选框</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/rate">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-rate.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-rate-dark.png" />
+      <p class="name">Rate 评分</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/search">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-search.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-search-dark.png" />
+      <p class="name">Search 搜索框</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/slider">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-slider.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-slider-dark.png" />
+      <p class="name">Slider 滑动选择器</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/stepper">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper-dark.png" />
+      <p class="name">Stepper 步进器</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/switch">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-switch.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-switch-dark.png" />
+      <p class="name">Switch 开关</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/textarea">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea-dark.png" />
+      <p class="name">Textarea 多行文本框</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tree-select">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-treeselect.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-treeselect-dark.png" />
+      <p class="name">TreeSelect 树形选择</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/upload">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-upload.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-upload-dark.png" />
+      <p class="name">Upload 上传</p>
+    </a>
+  </div>
+</section>
+
+<h3>数据展示<em class="tag">18</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/avatar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar-dark.png" />
+      <p class="name">Avatar 头像</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/badge">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-badge.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-badge-dark.png" />
+      <p class="name">Badge 徽章</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/cell">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-cell.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-cell-dark.png" />
+      <p class="name">Cell 单元格</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/collapse">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-collapse.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-collapse-dark.png" />
+      <p class="name">Collapse 折叠面板</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/count-down">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown-dark.png" />
+      <p class="name">CountDown 倒计时</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/empty">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-empty-dark.png" />
+      <p class="name">Empty 空状态</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/footer">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-footer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-footer-dark.png" />
+      <p class="name">Footer 页脚</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/grid">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-grid.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-grid-dark.png" />
+      <p class="name">Grid 宫格</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/image">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-image.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-image-dark.png" />
+      <p class="name">Image 图片</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/image-viewer">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-imageviewer.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-imageviewer-dark.png" />
+      <p class="name">ImageViewer 图片预览</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/progress">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-progress.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-progress-dark.png" />
+      <p class="name">Progress 进度条</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/qrcode">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-qrcode.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-qrcode-dark.png" />
+      <p class="name">QRCode 二维码</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/result">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-result.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-result-dark.png" />
+      <p class="name">Result 结果</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/skeleton">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton-dark.png" />
+      <p class="name">Skeleton 骨架屏</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/sticky">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky-dark.png" />
+      <p class="name">Sticky 吸顶容器</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/swiper">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper-dark.png" />
+      <p class="name">Swiper 轮播图</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/tag">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tag.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tag-dark.png" />
+      <p class="name">Tag 标签</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/watermark">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-watermark.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-watermark-dark.png" />
+      <p class="name">Watermark 水印</p>
+    </a>
+  </div>
+</section>
+
+<h3>反馈<em class="tag">12</em></h3>
+<section class="image-group">
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/action-sheet">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-actionsheet.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-actionsheet-dark.png" />
+      <p class="name">ActionSheet 动作面板</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/dialog">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog-dark.png" />
+      <p class="name">Dialog 对话框</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/dropdown-menu">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-dropdownmenu.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-dropdownmenu-dark.png" />
+      <p class="name">DropdownMenu 下拉菜单</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/guide">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-guide.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-guide-dark.png" />
+      <p class="name">Guide 引导</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/loading">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-loading.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-loading-dark.png" />
+      <p class="name">Loading 加载</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/message">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-message.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-message-dark.png" />
+      <p class="name">Message 全局提示</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/notice-bar">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-noticebar.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-noticebar-dark.png" />
+      <p class="name">NoticeBar 消息提醒</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/overlay">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-overlay.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-overlay-dark.png" />
+      <p class="name">Overlay 遮罩层</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/popup">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-popup.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-popup-dark.png" />
+      <p class="name">Popup 弹出层</p>
+    </a>
+  </div>
+
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/pull-down-refresh">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-pulldownrefresh.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-pulldownrefresh-dark.png" />
+      <p class="name">PullDownRefresh 下拉刷新</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/swipe-cell">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell-dark.png" />
+      <p class="name">SwipeCell 滑动操作</p>
+    </a>
+  </div>
+  <div class="image-wrapper">
+    <a class="item" href="/tdesign-uniapp/components/toast">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-toast.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-toast-dark.png" />
+      <p class="name">Toast 轻提示</p>
+    </a>
+  </div>
+</section>
diff --git a/packages/tdesign-uniapp/site/index.html b/packages/tdesign-uniapp/site/index.html
new file mode 100644
index 000000000..aac60a8b0
--- /dev/null
+++ b/packages/tdesign-uniapp/site/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon"
+    href="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2025/10/own_mike_tYYDt364MCtSXHsn.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" href="/favicon.ico">
+  <title>TDesign</title>
+  <!--[if lte IE 9]>
+  <style>
+    #app {
+      display: none;
+    }
+  </style>
+  <![endif]-->
+  <style>
+    td-doc-phone {
+      --phone-body-height: 667px !important;
+    }
+  </style>
+</head>
+
+<body>
+  <!--[if lte IE 9]>
+    <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
+  <![endif]-->
+
+  <td-stats></td-stats>
+  <div id="app">
+    <app></app>
+  </div>
+  <script type="module" src="./web/main.ts"></script>
+</body>
+
+</html>
diff --git a/packages/tdesign-uniapp/site/mobile.html b/packages/tdesign-uniapp/site/mobile.html
new file mode 100644
index 000000000..8d0eb716b
--- /dev/null
+++ b/packages/tdesign-uniapp/site/mobile.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" href="/favicon.ico">
+  <title>TDesign</title>
+  <style>
+    body {
+      -webkit-font-smoothing: antialiased;
+    }
+  </style>
+  <!--[if lte IE 9]>
+  <style>
+    #app {
+      display: none;
+    }
+  </style>
+  <![endif]-->
+</head>
+
+<body>
+  <!--[if lte IE 9]>
+    <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
+  <![endif]-->
+  <div id="app">
+    <app></app>
+  </div>
+  <script type="module" src="./mobile/main.ts"></script>
+  <script>
+    !function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator();},b.src="https://tdesign.gtimg.com/js/touch-emulator.js",a.body.appendChild(b)}(document);
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/site/package.json b/packages/tdesign-uniapp/site/package.json
new file mode 100644
index 000000000..604e30f17
--- /dev/null
+++ b/packages/tdesign-uniapp/site/package.json
@@ -0,0 +1,136 @@
+{
+  "name": "tdesign-uniapp-site",
+  "private": "true",
+  "version": "0.0.1",
+  "description": "site of tdesign-uniapp",
+  "author": "novlan1",
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development vite",
+    "dev:debug": "cross-env NODE_ENV=development vite --debug",
+    "site": "vite build",
+    "build": "npm run site",
+    "site:preview": "vite build --mode preview",
+    "postsite:preview": "cp dist/index.html dist/404.html"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "keywords": [
+    "vue",
+    "uniapp",
+    "tdesign"
+  ],
+  "title": "tdesign-uniapp",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.16.5",
+    "@use-gesture/vanilla": "^10.3.0",
+    "@vueuse/core": "10.7.0",
+    "dayjs": "^1.10.7",
+    "lodash-es": "^4.17.21",
+    "tdesign-icons-vue-next": "^0.4.1",
+    "tinycolor2": "^1.6.0",
+    "validator": "^13.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": ">=7.13.0 <8.0.0",
+    "@babel/helper-module-imports": "7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.16.0",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-url": "^6.0.0",
+    "@soerenmartius/vue3-clipboard": "^0.1.1",
+    "@tdesign/site-components": "^0.17.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "18.8.0",
+    "@types/prismjs": "^1.16.2",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/validator": "^13.6.3",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "~5.34.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "@vue/babel-plugin-jsx": "1.1.1",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/runtime-core": "^3.2.41",
+    "@vue/shared": "3.3.8",
+    "@vue/test-utils": "2.4.1",
+    "autoprefixer": "^10.2.4",
+    "axios": "^1.7.2",
+    "camelcase": "~6.3.0",
+    "commitizen": "^4.2.3",
+    "concurrently": "^6.5.1",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.1.1",
+    "cz-conventional-changelog": "3.3.0",
+    "debug": "^4.3.1",
+    "dom-parser": "^0.1.6",
+    "esbuild": "^0.14.3",
+    "eslint": "^8.4.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^8.2.0",
+    "gray-matter": "^4.0.3",
+    "husky": "^6.0.0",
+    "jsdom": "^20.0.0",
+    "less": "^4.1.2",
+    "lint-staged": "^10.5.4",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.upperfirst": "^4.3.1",
+    "mockdate": "^3.0.5",
+    "postcss": "^8.2.1",
+    "prettier": "^3.4.2",
+    "prismjs": "^1.23.0",
+    "qrcode.vue": "^3.2.2",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^5.0.7",
+    "rollup": "^2.47.0",
+    "rollup-plugin-analyzer": "^3.3.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-esbuild": "^4.5.0",
+    "rollup-plugin-ignore-import": "^1.3.2",
+    "rollup-plugin-multi-input": "1.1.1",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-static-import": "^1.0.0",
+    "rollup-plugin-styles": "^3.14.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "rollup-pluginutils": "^2.8.2",
+    "tdesign-publish-cli": "^0.0.12",
+    "tdesign-site-components-uniapp": "0.17.3",
+    "tdesign-theme-generator": "^1.1.0",
+    "tdesign-uniapp-theme-generator": "^1.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "~4.7.2",
+    "vite": "^6.2.3",
+    "vite-plugin-tdoc": "^2.0.1",
+    "vitest": "^3.2.4",
+    "vue": "3.3.8",
+    "vue-eslint-parser": "^8.0.1",
+    "vue-router": "4.0.11",
+    "vue-tsc": "^0.40.0"
+  }
+}
diff --git a/packages/tdesign-uniapp/site/styles/mixins/index.less b/packages/tdesign-uniapp/site/styles/mixins/index.less
new file mode 100644
index 000000000..590996ffc
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/mixins/index.less
@@ -0,0 +1,16 @@
+@import './text.less';
+
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/site/styles/mixins/text.less b/packages/tdesign-uniapp/site/styles/mixins/text.less
new file mode 100644
index 000000000..e0b946570
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/mixins/text.less
@@ -0,0 +1,55 @@
+@import '../vars.less';
+
+.text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.primary-link() {
+  color: @link-color;
+
+  &:hover, &:focus {
+    color: @link-hover-color;
+  }
+  &:active {
+    color: @link-active-color;
+  }
+}
+
+.title-level-1() {
+  font-size: @title-level-1-size;
+  line-height: @title-level-1-line;
+  color: @title-level-1-color;
+}
+.title-level-2() {
+  font-size: @title-level-2-size;
+  line-height: @title-level-2-line;
+  color: @title-level-2-color;
+}
+.title-level-3() {
+  font-size: @title-level-3-size;
+  line-height: @title-level-3-line;
+  color: @title-level-3-color;
+}
+.title-level-4() {
+  font-size: @title-level-4-size;
+  line-height: @title-level-4-line;
+  color: @title-level-4-color;
+}
+
+.text-level-1() {
+  font-size: @text-level-1-size;
+  line-height: @text-level-1-line;
+  color: @text-level-1-color;
+}
+.text-level-2() {
+  font-size: @text-level-2-size;
+  line-height: @text-level-2-line;
+  color: @text-level-2-color;
+}
+.text-level-3() {
+  font-size: @text-level-3-size;
+  line-height: @text-level-3-line;
+  color: @text-level-3-color;
+}
diff --git a/packages/tdesign-uniapp/site/styles/mobile/components.less b/packages/tdesign-uniapp/site/styles/mobile/components.less
new file mode 100644
index 000000000..3776f76c6
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/mobile/components.less
@@ -0,0 +1,112 @@
+@import "../vars.less";
+@import "../mixins/index.less";
+
+.tdesign-mobile-demo-block {
+  .button-demo {
+
+    .t-button {
+      margin-bottom: 16px;
+    }
+  }
+
+  .tdesign-demo-iconfont {
+    .tdesign-demo-icon {
+      display: inline-block;
+      width: 25%;
+      text-align: center;
+
+      .t-icon {
+        color: inherit;
+        font-size: 28px;
+      }
+
+      p {
+        margin: 10px 0;
+        .text-ellipsis();
+      }
+    }
+  }
+
+  .cell-base {
+    background-color: #fbfbfb;
+  }
+
+  .tag-demo {
+    background-color: var(--bg-color-demo, #fff);
+    padding: 16px;
+    display: flex;
+
+    .t-tag+.t-tag {
+      margin-left: 16px;
+    }
+  }
+
+  .tag-demo+.tag-demo {
+    margin-top: 16px;
+  }
+
+  .segmented-control-demo {
+    background-color: #fff;
+    padding: 12px 16px;
+  }
+
+  .toast-demo,
+  .message-demo,
+  .dialog-demo,
+  .action-sheet-demo {
+    padding: 0 16px;
+
+    > .t-button + .t-button {
+      margin-top: 16px;
+    }
+  }
+
+  .slider-demo {
+    background-color: #fff;
+    padding: 12px 16px;
+  }
+
+  .stepper-demo {
+    background-color: #fff;
+    // max-height: 69px;
+  }
+
+  .stepper-demo+.stepper-demo {
+    margin-top: 16px;
+  }
+  .stepper-inline-demo .t-stepper{
+    padding: 12px 16px;
+  }
+
+  .stepper-pure-demo {
+    display: inline-block;
+  }
+
+  .step-demo {
+    background-color: #fff;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 40px;
+
+    .t-steps {
+      padding-bottom: 40px;
+    }
+  }
+
+  .step-demo+.step-demo {
+    margin-top: 16px;
+  }
+
+
+  .badge-demo {
+    display: flex;
+    margin-top: 28px;
+    margin-bottom: 24px;
+    margin-left: 16px;
+    align-items: center;
+
+    .badge-item {
+      margin-right: 48px;
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/site/styles/mobile/demo.less b/packages/tdesign-uniapp/site/styles/mobile/demo.less
new file mode 100644
index 000000000..4b9a027d9
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/mobile/demo.less
@@ -0,0 +1,61 @@
+.tdesign-mobile-demo {
+  background-color: #f6f6f6;
+  font-family: "PingFang SC";
+  padding-bottom: 28px;
+  box-sizing: border-box;
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    padding: 24px 16px 0;
+    color: var(--td-text-color-primary);
+  }
+
+  .summary {
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+    margin: 8px 16px 0;
+    line-height: 22px;
+  }
+
+  &-block {
+    margin: 32px 0 0;
+
+    &__header {
+      color: #000;
+      margin: 0 16px;
+    }
+
+    &__title {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 26px;
+      color: var(--td-text-color-primary);
+    }
+
+    &__summary {
+      margin-top: 8px;
+      font-size: 14px;
+      white-space: pre-line;
+      color: var(--td-text-color-secondary);
+      line-height: 22px;
+    }
+
+    &__slot {
+      margin-top: 16px;
+
+      &.with-padding {
+        margin: 16px 16px 0;
+      }
+    }
+  }
+}
+
+.tdesign-mobile-demo-block_notitle {
+  margin-top: 0px;
+
+  .tdesign-mobile-demo-block_subtitle {
+    margin-top: 24px;
+  }
+}
diff --git a/packages/tdesign-uniapp/site/styles/mobile/index.less b/packages/tdesign-uniapp/site/styles/mobile/index.less
new file mode 100644
index 000000000..62d6a3426
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/mobile/index.less
@@ -0,0 +1,152 @@
+@import '../vars.less';
+@import '../mixins/index.less';
+@import './components.less';
+@import './demo.less';
+
+
+:root[theme-mode="dark"] {
+  --bg-color-demo: #181818;
+  --bg-color-demo-secondary: #2c2c2c;
+  --bg-color-scroll: #434343;
+
+  body{
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-topnav {
+    background-color: var(--bg-color-demo);
+  }
+  .tdesign-demo-main .tdesign-mobile-demo {
+    background-color: var(--bg-color-demo);
+  }
+}
+
+  html::-webkit-scrollbar, body::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+    background: transparent;
+  }
+
+  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+    background: var(--bg-color-demo);
+  }
+
+  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 4px solid transparent;
+    background-clip: content-box;
+    background-color: var(--bg-color-scroll);
+  }
+  html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
+    width: 0;
+  }
+
+
+body {
+  background-color: #F6F6F6;
+  color: var(--bg-color-tab);
+}
+
+
+#app {
+  height: 100%;
+  z-index: 0;
+}
+
+.tdesign-demo-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.tdesign-demo-main {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+.tdesign-mobile-home {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 24px;
+  & p{
+    padding-top:16px;
+    opacity: 1;
+    color: rgba(0,0,0,0.4);
+    font-size: 14px;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    line-height: 22px;
+  }
+  &-navlink{
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding-left: 20px;
+  }
+  &-navs {
+    position: relative;
+    display: flex;
+    margin: 0 0 12px;
+    color: #323233;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 40px;
+    background: #f7f8fa;
+    & a {
+      text-decoration: none;
+      color: #323233
+    }
+  }
+  .tdesign-mobile-logo {
+    padding-bottom: 24px;
+    img {
+      width: 126px;
+    }
+  }
+  .t-collapse {
+    margin-bottom: 12px;
+    background-color: #fff;
+    &-panel {
+      &--active{
+        .t-collapse-panel__title {
+          color: rgba(0,0,0,0.4)
+        }
+      }
+      &__body {
+        padding: 0;
+        &-slot {
+          padding: 0;
+        }
+      }
+      &__content {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+
+.tdesign-demo-topnav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background-color: #fff;
+
+  &-title{
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--td-text-color-primary);
+  }
+  &__back{
+    position: absolute;
+    left: 16px;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--td-text-color-primary);
+  }
+}
+
+
diff --git a/packages/tdesign-uniapp/site/styles/vars.less b/packages/tdesign-uniapp/site/styles/vars.less
new file mode 100644
index 000000000..f4ef0efa1
--- /dev/null
+++ b/packages/tdesign-uniapp/site/styles/vars.less
@@ -0,0 +1,125 @@
+@prefix: tdesign;
+@primary-color: #0052d9;
+
+@primary-color-darken-1: darken(@primary-color, (43 - 35) * 1%);
+@primary-color-darken-2: darken(@primary-color, (43 - 27) * 1%);
+@primary-color-darken-3: darken(@primary-color, (43 - 19) * 1%);
+@primary-color-darken-4: darken(@primary-color, (43 - 11) * 1%);
+
+@primary-color-lighter-1: lighten(@primary-color, (51 - 43) * 1%);
+@primary-color-lighter-2: lighten(@primary-color, (59 - 43) * 1%);
+@primary-color-lighter-3: lighten(@primary-color, (67 - 43) * 1%);
+@primary-color-lighter-4: lighten(@primary-color, (75 - 43) * 1%);
+@primary-color-lighter-5: lighten(@primary-color, (83 - 43) * 1%);
+@primary-color-lighter-6: lighten(@primary-color, (91 - 43) * 1%);
+@primary-color-lighter-7: lighten(@primary-color, (96 - 43) * 1%);
+// @primary-color-lighter-6: hsl(217, 100, 91);
+
+// 状态色
+@success-color: #3ecc36;
+@error-color: #ff3e00;
+@warning-color: #ffa700;
+@info-color: #c7ddf3;
+
+@disabled-color: #c0c0c0;
+
+// 文字色
+@text-color: #333; // 黑 80%
+@text-color-lighter-1: #666; // 黑 60%
+@text-color-lighter-2: #999; // 黑 40%
+@text-color-lighter-3: #ccc; // 黑 20%
+
+// 文字色
+@text-color-white: #fff;
+@text-color-white-lighter-1: rgba(255, 255, 255, 0.8);
+@text-color-white-lighter-2: rgba(255, 255, 255, 0.6);
+@text-color-white-lighter-3: rgba(255, 255, 255, 0.4);
+
+@placeholder-color: #999;
+
+@font-size-base: 14px;
+@line-height-base: 1.5;
+@font-family:  "PingFang SC", -apple-system, "Helvetica Neue", Helvetica, BlinkMacSystemFont, "Microsoft YaHei", tahoma, Arial, "Open Sans", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
+
+/**
+ * 文字部分 
+ * size 大小，line 行高， color 颜色
+ */
+// 字体大小
+@font-size-small: 12px;
+@font-size: 14px;
+@font-size-large: 16px;
+@font-size-larger: 18px;
+// 行高
+@line-height-small: 30px;
+@line-height: 38px;
+@line-height-large: 48px;
+@line-height-larger: 60px;
+
+// 标题文字
+@title-level-1-size: 38px;
+@title-level-1-line: 53 / 38;
+@title-level-1-color: @text-color;
+@title-level-2-size: 20px;
+@title-level-2-line: 28 / 20;
+@title-level-2-color: @text-color;
+@title-level-3-size: 16px;
+@title-level-3-line: 22 / 16;
+@title-level-3-color: @text-color;
+@title-level-4-size: 16px;
+@title-level-4-line: 22 / 16;
+@title-level-4-color: @text-color-lighter-1;
+
+// 正常文字
+@text-level-1-size: 14px;
+@text-level-1-line: 20 / 14;
+@text-level-1-color: @text-color;
+@text-level-2-size: 14px;
+@text-level-2-line: 20 / 14;
+@text-level-2-color: @text-color-lighter-1;
+@text-level-3-size: 14px;
+@text-level-3-line: 20 / 14;
+@text-level-3-color: @text-color-lighter-2;
+
+// 小字
+@smalltext-level-1-size: 12px;
+@smalltext-level-1-line: 17 / 14;
+@smalltext-level-1-color: @text-color-lighter-1;
+@smalltext-level-2-size: 12px;
+@smalltext-level-2-line: 17 / 14;
+@smalltext-level-2-color: @text-color-lighter-2;
+
+@link-color: @primary-color;
+@link-hover-color: lighten(@primary-color, 20%);
+@link-active-color: darken(@primary-color, 20%);
+@link-decoration: none;
+@link-hover-decoration: none;
+
+// Shadow
+@shadow-level-1: 3px 3px 8px 2px rgba(0, 0, 0, 0.06);
+@shadow-level-2: 6px 6px 12px 6px rgba(0, 0, 0, 0.08);
+
+
+// border
+@border-color: #d9d9d9;
+@border-main: 1px solid @border-color;
+@border-color-2: lighten(@border-color, 5.9124%);
+@border-main-2: 1px solid @border-color-2;
+
+// rate
+@background-color-disabled: #e9e9e9;
+@background-color-active: #ffa700;
+
+@border-radius-percent: 0;
+
+@body-background: #ffffff;
+@component-background: #ffffff;
+
+// layout
+@layoutMargin: 10px;
+
+// header 
+@headerHeight: 81px;
+
+// footer
+@footerHeight: 160px;
diff --git a/packages/tdesign-uniapp/site/vite.config.ts b/packages/tdesign-uniapp/site/vite.config.ts
new file mode 100644
index 000000000..694594b48
--- /dev/null
+++ b/packages/tdesign-uniapp/site/vite.config.ts
@@ -0,0 +1,94 @@
+import * as path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { removeLastSlash } from 't-comm/es/slash/slash';
+
+// import changelog2Json from './web/plugins/changelog-to-json';
+import tdocPlugin from './web/plugins/plugin-tdoc';
+
+const resolvePath = r => path.resolve(__dirname, r);
+
+const publicPathMap = {
+  preview: '/',
+  production: '/uniapp/',
+};
+
+const isCustomElement = tag => tag.startsWith('td-');
+
+// Rollup 4+ 的 tree-shaking 策略调整, 这里是为了让样式在站点构建正常
+const disableTreeShakingPlugin = paths => ({
+  name: 'disable-treeshake',
+  transform(code, id) {
+    for (const path of paths) {
+      if (id.includes(path)) {
+        return { code, map: null, moduleSideEffects: 'no-treeshake' };
+      }
+    }
+  },
+});
+
+const root: string = process.cwd();
+const ENV_PREFIX = ['VITE_', 'VUE_APP'];
+
+export default ({ mode }) => {
+  const env = loadEnv(mode, root, ENV_PREFIX);
+  const vueAppBase = env.VUE_APP_PUBLICPATH;
+  const experimentalConfig = vueAppBase ? {
+    experimental: {
+      renderBuiltUrl(filename: string, { hostId, hostType, type }: {
+        hostId: string;
+        hostType: string;
+        type: string;
+      }) {
+        console.log('[experimental] ', hostType, hostId, type, filename);
+
+        return `${removeLastSlash(vueAppBase)}/${filename}`;
+      },
+    },
+  } : {};
+
+
+  const result = defineConfig({
+    base: publicPathMap[mode],
+    ...experimentalConfig,
+    root: '.',
+    resolve: {
+      alias: {
+        '@': resolvePath('../components'),
+        '@docs': resolvePath('./docs'),
+      },
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 18000,
+      open: '/',
+      https: false as any,
+    },
+    build: {
+      outDir: './dist',
+      rollupOptions: {
+        input: {
+          sites: 'index.html',
+        },
+      },
+    },
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement,
+          },
+        },
+      }),
+      vueJsx({
+        isCustomElement,
+      }),
+      tdocPlugin(mode),
+      // changelog2Json(),
+      disableTreeShakingPlugin(['style/', 'toast/']),
+    ],
+  });
+
+  return result;
+};
diff --git a/packages/tdesign-uniapp/site/web/app.vue b/packages/tdesign-uniapp/site/web/app.vue
new file mode 100644
index 000000000..e916d51a2
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/app.vue
@@ -0,0 +1,149 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <td-doc-layout>
+    <td-header
+      slot="header"
+      platform="mobile"
+      framework="uniapp"
+    >
+      <td-doc-search
+        slot="search"
+        ref="tdDocSearch"
+      />
+    </td-header>
+    <td-doc-aside
+      ref="tdDocAside"
+      title="Uni App"
+    >
+      <!-- <td-select ref="tdSelect" :value="version" slot="extra"></td-select> -->
+    </td-doc-aside>
+
+    <router-view
+      :style="contentStyle"
+      :doc-type="docType"
+      @loaded="contentLoaded"
+    />
+  </td-doc-layout>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import packageJson from '../../components/package.json';
+import siteConfig from '../docs.config';
+import { filterVersions, sortDocs } from './utils';
+
+const registryUrl =  'https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/npm/versions/tdesign-mobile-vue';
+const currentVersion = packageJson.version.replace(/\./g, '_');
+
+// eslint-disable-next-line light/json-parse-try-catch
+const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+
+const docsMap = {
+  zh: sortDocs(docs),
+  en: sortDocs(enDocs),
+};
+
+export default defineComponent({
+  data() {
+    return {
+      docType: '',
+      loaded: false,
+      version: currentVersion,
+    };
+  },
+
+  computed: {
+    contentStyle() {
+      const { loaded } = this;
+      return { visibility: loaded ? 'visible' : 'hidden' };
+    },
+  },
+
+  watch: {
+    $route(route) {
+      this.$refs.tdDocAside.routerList = docsMap[route.meta.lang || 'zh'];
+      if (!route.meta.docType) return;
+      this.docType = route.meta.docType;
+    },
+  },
+
+  mounted() {
+    this.docType = this.$route.meta.docType;
+    this.$refs.tdDocSearch.docsearchInfo = { indexName: 'tdesign_doc_vue_mobile' };
+    this.$refs.tdDocAside.routerList = docsMap[this.$route?.meta?.lang || 'zh'];
+    this.$refs.tdDocAside.onchange = ({ detail }) => {
+      if (this.$route.path === detail) return;
+      this.loaded = false;
+      this.$router.push({ path: detail });
+      window.scrollTo(0, 0);
+    };
+    // this.$refs.tdSelect.onchange = ({ detail }) => {
+    //   const { value: version } = detail;
+    //   if (version === currentVersion) return;
+
+    //   const historyUrl = `https://${version}-tdesign-mobile-vue.surge.sh`;
+    //   window.open(historyUrl, '_blank');
+    // };
+    // this.initHistoryVersions();
+    this.initThemeGenerator();
+  },
+
+  methods: {
+    initHistoryVersions() {
+      fetch(registryUrl)
+        .then(res => res.json())
+        .then((res) => {
+          const options = [];
+          const versions = filterVersions(Object.keys(res.versions));
+
+          versions.forEach((v) => {
+            options.unshift({ label: v, value: v.replace(/\./g, '_') });
+          });
+
+          if (this.version !== options[0].value) {
+            this.version = options[0].value;
+          }
+
+          this.$refs.tdSelect.options = options;
+        });
+    },
+    initThemeGenerator() {
+      const generator = document.createElement('td-theme-generator');
+      generator.setAttribute('device', 'uniapp');
+      document.body.appendChild(generator);
+    },
+    contentLoaded(callback) {
+      requestAnimationFrame(() => {
+        this.loaded = true;
+        callback();
+      });
+    },
+  },
+});
+</script>
+
+<style lang="less">
+div[slot='action'] {
+  display: inline-flex;
+  column-gap: 8px;
+}
+
+.action-online {
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  transition: all 0.2s linear;
+  cursor: pointer;
+  border-radius: 3px;
+  color: var(--text-secondary);
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
+  }
+}
+</style>
diff --git a/packages/tdesign-uniapp/site/web/main.ts b/packages/tdesign-uniapp/site/web/main.ts
new file mode 100644
index 000000000..d9bbe989d
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/main.ts
@@ -0,0 +1,24 @@
+import { createApp } from 'vue';
+
+// @ts-ignore
+// import TDesign from '@/index';
+// import 'tdesign-mobile-vue/style/index.js';
+
+import { registerLocaleChange } from 'tdesign-site-components-uniapp';
+import 'tdesign-site-components-uniapp/lib/styles/prism-theme-dark.less';
+import 'tdesign-site-components-uniapp/lib/styles/prism-theme.less';
+import 'tdesign-site-components-uniapp/lib/styles/style.css';
+
+import 'tdesign-uniapp-theme-generator';
+
+import App from './app.vue';
+import router from './router';
+import Stackblitz from './stackblitz/index.vue';
+
+registerLocaleChange();
+
+const app = createApp(App);
+
+app.component('Stackblitz', Stackblitz);
+
+app.use(router).mount('#app');
diff --git a/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/components.ts b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/components.ts
new file mode 100644
index 000000000..cd019ed10
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/components.ts
@@ -0,0 +1,166 @@
+/**
+ * 不符合帕斯卡命名规范的组件映射
+ */
+export const NON_PASCAL_CASE_NAMES: Record<string, string> = {
+  qrcode: 'QRCode',
+};
+
+export const WEB_COMPONENT_MAP: Record<string, string[]> = {
+  affix: ['Affix'],
+  alert: ['Alert'],
+  anchor: ['Anchor', 'AnchorItem', 'AnchorTarget'],
+  'auto-complete': ['AutoComplete', 'HighlightOption'],
+  avatar: ['Avatar', 'AvatarGroup'],
+  'back-top': ['BackTop'],
+  badge: ['Badge'],
+  breadcrumb: ['Breadcrumb', 'BreadcrumbItem'],
+  button: ['Button'],
+  calendar: ['Calendar'],
+  card: ['Card'],
+  cascader: ['Cascader', 'CascaderPanel'],
+  checkbox: ['Checkbox', 'CheckboxGroup'],
+  collapse: ['Collapse', 'CollapsePanel'],
+  'color-picker': ['ColorPicker', 'ColorPickerPanel'],
+  comment: ['Comment'],
+  'config-provider': ['ConfigProvider'],
+  'date-picker': [
+    'DatePicker',
+    'DatePickerPanel',
+    'DateRangePicker',
+    'DateRangePickerPanel',
+  ],
+  descriptions: ['Descriptions', 'DescriptionsItem'],
+  dialog: ['Dialog', 'DialogPlugin'],
+  divider: ['Divider'],
+  drawer: ['Drawer', 'DrawerPlugin'],
+  dropdown: ['Dropdown', 'DropdownItem', 'DropdownMenu'],
+  empty: ['Empty'],
+  form: ['Form', 'FormItem', 'FormList'],
+  grid: ['Row', 'Col'],
+  guide: ['Guide'],
+  icon: ['Icon'],
+  image: ['Image'],
+  'image-viewer': ['ImageViewer'],
+  input: ['Input', 'InputGroup'],
+  'input-adornment': ['InputAdornment'],
+  'input-number': ['InputNumber'],
+  layout: ['Layout', 'Aside', 'Content', 'Footer', 'Header'],
+  link: ['Link'],
+  list: ['List', 'ListItem', 'ListItemMeta'],
+  loading: ['Loading', 'LoadingPlugin'],
+  menu: ['Menu', 'MenuGroup', 'MenuItem', 'HeadMenu', 'Submenu'],
+  message: ['Message', 'MessagePlugin'],
+  notification: ['Notification', 'NotifyPlugin'],
+  pagination: ['Pagination', 'PaginationMini'],
+  popconfirm: ['Popconfirm'],
+  popup: ['Popup'],
+  progress: ['Progress'],
+  qrcode: ['QRCode'],
+  radio: ['Radio', 'RadioButton', 'RadioGroup'],
+  'range-input': ['RangeInput', 'RangeInputPopup'],
+  rate: ['Rate'],
+  select: ['Select', 'Option', 'OptionGroup'],
+  'select-input': ['SelectInput'],
+  skeleton: ['Skeleton'],
+  slider: ['Slider', 'SliderButton'],
+  space: ['Space'],
+  statistic: ['Statistic'],
+  steps: ['Steps', 'StepItem'],
+  'sticky-tool': ['StickyTool', 'StickyItem'],
+  switch: ['Switch'],
+  swiper: ['Swiper', 'SwiperItem'],
+  table: ['Table', 'BaseTable', 'EnhancedTable', 'PrimaryTable'],
+  tabs: ['Tabs', 'TabPanel'],
+  tag: ['Tag', 'CheckTag', 'CheckTagGroup'],
+  'tag-input': ['TagInput'],
+  textarea: ['Textarea'],
+  'time-picker': ['TimePicker', 'TimePickerPanel', 'TimeRangePicker'],
+  timeline: ['Timeline', 'TimelineItem'],
+  tooltip: ['Tooltip', 'TooltipLite'],
+  transfer: ['Transfer'],
+  tree: ['Tree'],
+  'tree-select': ['TreeSelect'],
+  typography: ['Typography', 'Text', 'Title', 'Paragraph'],
+  upload: ['Upload'],
+  watermark: ['Watermark'],
+};
+
+export const MOBILE_COMPONENT_MAP: Record<string, string[]> = {
+  'action-sheet': ['ActionSheet'],
+  avatar: ['Avatar', 'AvatarGroup'],
+  'back-top': ['BackTop'],
+  badge: ['Badge'],
+  button: ['Button'],
+  calendar: ['Calendar'],
+  cascader: ['Cascader'],
+  cell: ['Cell', 'CellGroup'],
+  checkbox: ['Checkbox', 'CheckboxGroup'],
+  collapse: ['Collapse', 'CollapsePanel'],
+  'color-picker': ['ColorPicker'],
+  'config-provider': ['ConfigProvider'],
+  'count-down': ['CountDown'],
+  'date-time-picker': ['DateTimePicker'],
+  dialog: ['Dialog', 'DialogPlugin'],
+  divider: ['Divider'],
+  drawer: ['Drawer'],
+  'dropdown-menu': ['DropdownMenu', 'DropdownItem'],
+  empty: ['Empty'],
+  fab: ['Fab'],
+  footer: ['Footer'],
+  form: ['Form', 'FormItem'],
+  grid: ['Grid', 'GridItem'],
+  guide: ['Guide'],
+  icon: ['Icon'],
+  image: ['Image'],
+  'image-viewer': ['ImageViewer'],
+  indexes: ['Indexes', 'IndexesAnchor'],
+  input: ['Input'],
+  layout: ['Row', 'Col'],
+  link: ['Link'],
+  list: ['List'],
+  loading: ['Loading', 'LoadingPlugin'],
+  message: ['Message', 'MessagePlugin'],
+  navbar: ['Navbar'],
+  'notice-bar': ['NoticeBar'],
+  overlay: ['Overlay'],
+  picker: ['Picker'],
+  popover: ['Popover'],
+  popup: ['Popup'],
+  progress: ['Progress'],
+  'pull-down-refresh': ['PullDownRefresh'],
+  qrcode: ['QRCode'],
+  radio: ['Radio', 'RadioGroup'],
+  rate: ['Rate'],
+  result: ['Result'],
+  search: ['Search'],
+  'side-bar': ['SideBar', 'SideBarItem'],
+  skeleton: ['Skeleton'],
+  slider: ['Slider'],
+  stepper: ['Stepper'],
+  steps: ['Steps', 'StepItem'],
+  sticky: ['Sticky'],
+  'swipe-cell': ['SwipeCell'],
+  swiper: ['Swiper', 'SwiperItem'],
+  switch: ['Switch'],
+  'tab-bar': ['TabBar', 'TabBarItem'],
+  table: ['Table'],
+  tabs: ['Tabs', 'TabPanel'],
+  tag: ['Tag', 'CheckTag'],
+  textarea: ['Textarea'],
+  toast: ['Toast'],
+  'tree-select': ['TreeSelect'],
+  upload: ['Upload'],
+};
+
+export const CHAT_COMPONENT_MAP: Record<string, string[]> = {
+  chat: [
+    'Chat',
+    'ChatItem',
+    'ChatInput',
+    'ChatContent',
+    'ChatReasoning',
+    'ChatAction',
+    'ChatLoading',
+    'ChatSender',
+  ],
+};
diff --git a/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/index.ts b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/index.ts
new file mode 100644
index 000000000..7c9123287
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/index.ts
@@ -0,0 +1,194 @@
+/* eslint-disable no-console */
+/* eslint-disable no-use-before-define */
+import { promises } from 'fs';
+import { mapToParentName } from './libs';
+import type { ComponentLog, ComponentLogMap, LogItem, Logs, LogType, Platform, VersionLog } from './types';
+
+export const LOG_TYPES = ['🚨 Breaking Changes', '🚀 Features', '🐞 Bug Fixes'] as const;
+
+let targetPlatform: Platform = 'web';
+
+export default async function generateChangelogJson(changelogPath: string, platform: Platform) {
+  try {
+    const logMd = await promises.readFile(changelogPath, 'utf-8');
+    targetPlatform = platform;
+    const detailedLogs = parseMd2Json(logMd);
+    const compMap = formatJson2CompMap(detailedLogs);
+    console.log('\x1b[32m%s\x1b[0m', '✅ Sync CHANGELOG.md to changelog.json');
+    return compMap;
+  } catch (error) {
+    console.error('\x1b[31m%s\x1b[0m', '❌ Fail to generate changelog.json', '\x1b[33m', error);
+    return {};
+  }
+}
+
+/**
+ * 将整份 Markdown 先根据版本号拆分
+ */
+function parseMd2Json(logMd: string) {
+  const headerRegex = /^\s*##\s*🌈\s*(\d+\.\d+\.\d+)\s+`(\d{4}-\d{2}-\d{2})`\s*$/gm;
+  const matches = Array.from(logMd.matchAll(headerRegex));
+
+  const logs = matches.map((match, i) => {
+    const version = match[1];
+    const date = match[2];
+
+    const start = match.index + match[0].length;
+    const end = i < matches.length - 1 ? matches[i + 1].index : logMd.length;
+    const log = logMd.slice(start, end).trim();
+
+    return {
+      version,
+      date,
+      log: parseLogByType(log),
+    };
+  });
+
+  return logs;
+}
+
+/**
+ * 进一步根据指定的变更类型拆分
+ */
+function parseLogByType(logBlock: string) {
+  const logs: Logs = {};
+
+  LOG_TYPES.forEach((type) => {
+    const typeRegex = new RegExp(`### ${type}\\r?\\n([\\s\\S]+?)(?=### |$)`, 'g');
+    const matches = Array.from(logBlock.matchAll(typeRegex));
+
+    if (matches.length > 0) {
+      const logBlock = matches.map((match) => match[1]).join('\n');
+      const entries = extractLogEntries(logBlock);
+      logs[type] = groupLogByComponent(entries);
+    }
+  });
+
+  return logs;
+}
+
+/**
+ * 获取每种变更类型里面的每一段日志
+ * - case 1: 单独一行 -> 作为一条
+ * - case 2: 存在父子列表 -> 使用换行符，合并为一条
+ */
+function extractLogEntries(logBlock: string) {
+  const lines = logBlock.split('\n').filter((line) => line.trim() !== '');
+  const logs: string[] = [];
+
+  let currEntry = '';
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    // 跳过空行
+    if (!line) continue;
+
+    // 是否为子项（短横线前面有空格）
+    const isChildEntry = /^\s+-/.test(lines[i]);
+
+    // 是否为父项（直接以短横线开头）
+    const isParentEntry = line.startsWith('-') && !isChildEntry;
+
+    if (isParentEntry) {
+      // 如果是父项，保存之前的日志
+      if (currEntry) {
+        logs.push(currEntry.trim());
+      }
+      // 开始新项，去掉开头的 -
+      currEntry = line.substring(1).trim();
+    } else if (isChildEntry) {
+      // 如果是子项，添加到当前项中
+      const childContent = line.replace(/^\s*-\s*/, '').trim();
+      currEntry += `\n${childContent}`;
+    }
+  }
+
+  // 处理最后一项
+  logs.push(currEntry.trim());
+  return logs;
+}
+
+/**
+ * 根据每一条日志提及的组件名，将其归类
+ */
+function groupLogByComponent(entries: string[]) {
+  const logs: LogItem[] = [];
+
+  entries.forEach((entry) => {
+    const nameRegex = /`([^`]+)`:/;
+    const match = entry.match(nameRegex);
+    if (!match) return;
+
+    const rawName = match[1];
+    const compName = mapToParentName(rawName, targetPlatform);
+    if (!compName) return;
+
+    // 当前日志为父组件，去掉前缀
+    if (rawName === compName) {
+      const logWithoutPrefix = entry.replace(nameRegex, '').trim();
+      const lines = logWithoutPrefix.split('\n').map((line) => line.trim());
+      const isGroupedLog = lines[0].startsWith('@');
+      // 首行存在 @用户名 -> 同一个PR
+      if (isGroupedLog) {
+        // 整体插入，渲染为列表
+        logs.push({ component: compName, description: logWithoutPrefix });
+      } else {
+        // 每一行渲染为单独的日志项
+        lines.forEach((line) => {
+          logs.push({ component: compName, description: line });
+        });
+      }
+    } else {
+      // 子组件保留前缀，且整体插入
+      logs.push({ component: compName, description: entry });
+    }
+  });
+
+  return logs;
+}
+
+/**
+ * 将解析后的日志 JSON 转换为以组件名作为 key 的映射格式
+ */
+function formatJson2CompMap(logJson: VersionLog[]) {
+  const compMap: ComponentLogMap = {};
+
+  logJson.forEach((entry) => {
+    const { version, date, log } = entry;
+
+    (Object.keys(log) as LogType[]).forEach((type) => {
+      log[type]?.forEach((item: LogItem) => {
+        const { component, description } = item;
+
+        if (!compMap[component]) {
+          compMap[component] = [];
+        }
+
+        // 查找当前组件的版本记录
+        let versionEntry = compMap[component].find(
+          (v) => v.version === version
+        );
+
+        if (!versionEntry) {
+          versionEntry = {
+            version,
+            date,
+          } as ComponentLog;
+          compMap[component].push(versionEntry);
+        }
+
+        if (!versionEntry[type]) {
+          versionEntry[type] = [];
+        }
+        versionEntry[type].push(description);
+      });
+    });
+  });
+
+  // 按组件名字母顺序排序
+  const sortedCompMap = Object.keys(compMap)
+    .sort((a, b) => a.localeCompare(b))
+    .reduce((acc, key) => ({ ...acc, [key]: compMap[key] }), {});
+
+  return sortedCompMap as ComponentLogMap;
+}
diff --git a/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/libs.ts b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/libs.ts
new file mode 100644
index 000000000..a40ccb1e9
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/libs.ts
@@ -0,0 +1,23 @@
+import { MOBILE_COMPONENT_MAP, NON_PASCAL_CASE_NAMES, WEB_COMPONENT_MAP } from './components';
+import type { Platform } from './types';
+
+export const convert2PascalCase = (name: string) => name
+  .split('-')
+  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+  .join('');
+
+export const COMPONENT_MAPS = {
+  web: WEB_COMPONENT_MAP,
+  mobile: MOBILE_COMPONENT_MAP,
+};
+
+export const mapToParentName = (name: string, platform: Platform) => {
+  const targetMap = COMPONENT_MAPS[platform];
+
+  const found = Object.entries(targetMap).find(([_, values]) => values.includes(name));
+
+  // 返回父组件名
+  if (found) return NON_PASCAL_CASE_NAMES[found[0]] || convert2PascalCase(found[0]);
+
+  return null;
+};
diff --git a/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/types.ts b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/types.ts
new file mode 100644
index 000000000..f7ec876be
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json-core/types.ts
@@ -0,0 +1,29 @@
+import { LOG_TYPES } from '.';
+
+export type Platform = 'web' | 'mobile';
+
+export type LogType = typeof LOG_TYPES[number];
+
+type LogMetadata = {
+  version: string;
+  date: string;
+};
+
+export type LogItem = {
+  component: string;
+  description: string;
+};
+
+export type Logs = {
+  [K in LogType]?: LogItem[];
+};
+
+export type VersionLog = LogMetadata & {
+  log: Logs;
+};
+
+export type ComponentLog = LogMetadata & {
+  [K in LogType]?: string[];
+};
+
+export type ComponentLogMap = Record<string, ComponentLog[]>;
diff --git a/packages/tdesign-uniapp/site/web/plugins/changelog-to-json/index.js b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json/index.js
new file mode 100644
index 000000000..5e48e3d9a
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/changelog-to-json/index.js
@@ -0,0 +1,32 @@
+import { promises } from 'fs';
+import path from 'path';
+
+import generateChangelogJson from '../changelog-to-json-core';
+
+const outputPath = path.resolve(__dirname, '../../../../_site/changelog.json');
+const changelogPath = path.resolve(__dirname, '../../../../CHANGELOG.md');
+
+export default function changelog2Json() {
+  let config;
+  return {
+    name: 'changelog-to-json',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(server) {
+      // 开发模式时拦截请求
+      server.middlewares.use('/changelog.json', async (_, res) => {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(json));
+      });
+    },
+    async closeBundle() {
+      // 生产构建时写入物理文件
+      if (config.env.PROD || config.env.MODE === 'preview') {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        await promises.writeFile(outputPath, JSON.stringify(json));
+      }
+    },
+  };
+}
diff --git a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/demo.js b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/demo.js
new file mode 100644
index 000000000..4413037bc
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/demo.js
@@ -0,0 +1,42 @@
+/* eslint-disable */
+import path from 'path';
+
+export default function renderDemo(md, container) {
+  md.use(container, 'demo', {
+    validate(params) {
+      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+    },
+    render(tokens, idx) {
+      if (tokens[idx].nesting === 1) {
+        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+        const [, demoPath, componentName = ''] = match;
+        const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, '');
+        const demoName = path.basename(demoPath).trim();
+        const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
+
+        const tpl = `
+          <td-doc-demo
+            :code="${demoCodeDefName}"
+            language="markup"
+            show-code
+            mode="open"
+            demo-name="${demoName}"
+            component-name="${componentName}"
+          >
+          <div slot="action">
+            <Stackblitz demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
+          </div>
+          </td-doc-demo>
+        `;
+
+        // eslint-disable-next-line no-param-reassign
+        tokens.tttpl = tpl;
+
+        return `<div class="tdesign-demo-wrapper tdesign-demo-item--${componentName}-${demoName} tdesign-demo-item--${componentName}">`;
+      }
+      if (tokens.tttpl) return `${tokens.tttpl || ''}</div>`;
+
+      return '';
+    },
+  });
+}
diff --git a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/index.js b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/index.js
new file mode 100644
index 000000000..f174b4384
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/index.js
@@ -0,0 +1,38 @@
+import vue from '@vitejs/plugin-vue';
+import vitePluginTdoc from 'vite-plugin-tdoc';
+
+import getTransforms from './transforms';
+import renderDemo from './demo';
+
+export default (mode) =>
+  vitePluginTdoc({
+    plugins: [
+      vue({
+        include: [/\.md$/],
+        ssr: false,
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => tag.startsWith('td-'),
+          },
+        },
+      }),
+    ],
+    transforms: getTransforms(mode), // 解析markdown 数据
+    markdown: {
+      anchor: {
+        tabIndex: false,
+        config: (anchor) => ({
+          permalink: anchor.permalink.linkInsideHeader({ symbol: '' }),
+        }),
+      },
+      toc: {
+        listClass: 'tdesign-toc_list',
+        itemClass: 'tdesign-toc_list_item',
+        linkClass: 'tdesign-toc_list_item_a',
+        containerClass: 'tdesign-toc_container',
+      },
+      container(md, container) {
+        renderDemo(md, container);
+      },
+    },
+  });
diff --git a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
new file mode 100644
index 000000000..4f9d832b8
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
@@ -0,0 +1,212 @@
+/* eslint-disable */
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import camelCase from 'camelcase';
+
+import testCoverage from '../../test-coverage';
+
+const DEFAULT_TABS = [
+  { tab: 'demo', name: '示例' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: '指南' },
+];
+
+const DEFAULT_EN_TABS = [
+  { tab: 'demo', name: 'DEMO' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: 'Guideline' },
+];
+
+
+function getMobilePrefix(mode) {
+  if (mode === 'preview') {
+    return 'https://uwayfly.com/tdesign-uniapp/mobile';
+  }
+  if (process.env.NODE_ENV === 'development') {
+    return 'http://localhost:11111/tdesign-uniapp/mobile';
+  }
+  return '/tdesign-uniapp/mobile';
+}
+
+export default function mdToVue(options) {
+  const mdSegment = customRender(options);
+  const { demoCodesDefsStr, demoCodeInstallStr } = options;
+
+  let coverage = {};
+  if (mdSegment.isComponent) {
+    coverage = testCoverage[camelCase(mdSegment.componentName)] || {};
+  }
+
+  // removed badge
+  const sfc = `
+    <template>
+      <td-doc-content ref="tdDocContent" page-status="hidden" platform="mobile">
+        ${
+          mdSegment.tdDocHeader
+            ? `
+          <td-doc-header
+            slot="doc-header"
+            ref="tdDocHeader"
+            platform="mobile"
+            spline="${mdSegment.spline}"
+            component-name="${mdSegment.isComponent ? mdSegment.componentName : ''}"
+          >
+          </td-doc-header>`
+            : ''
+        }
+        ${
+          mdSegment.isComponent
+            ? `
+          <td-doc-tabs ref="tdDocTabs" :tab="tab"></td-doc-tabs>
+          <div v-show="tab === 'demo'">
+            <div name="DEMO">${mdSegment.demoMd}</div>
+
+            <td-doc-phone ref="tdDocPhone">
+              <iframe src="${mdSegment.mobileUrl}" frameborder="0" width="100%" height="100%" style="border-radius: 0 0 6px 6px;"></iframe>
+            </td-doc-phone>
+
+          </div>
+          <div v-show="tab === 'api'" name="API">${mdSegment.apiMd}</div>
+          <div v-show="tab === 'design'" name="DESIGN">${mdSegment.designMd}</div>
+        `
+            : `<div name="DOC" class="${mdSegment.docClass}">${mdSegment.docMd}</div>`
+        }
+        <div style="margin-top: 48px;">
+          <td-doc-history time="${mdSegment.lastUpdated}"></td-doc-history>
+        </div>
+        <td-doc-footer slot="doc-footer" platform="mobile"></td-doc-footer>
+      </td-doc-content>
+    </template>
+
+    <script>
+      import { defineComponent } from 'vue';
+      import Prismjs from 'prismjs';
+      import 'prismjs/components/prism-bash.js';
+      ${demoCodesDefsStr}
+
+      export default defineComponent({
+        data() {
+          return {
+            ${demoCodeInstallStr}
+          };
+        },
+
+        computed: {
+          tab: {
+            get() {
+              return this.$route.query.tab || 'demo';
+            },
+            set(v) {
+              if (this.$route.query.tab !== v)
+                this.$router.push({ query: { tab: v } });
+            }
+          },
+        },
+
+        mounted() {
+          const { tdDocContent, tdDocHeader, tdDocTabs, tdDocPhone } = this.$refs;
+          const completeUrl = '${mdSegment.mobileUrl}';
+
+          if (tdDocHeader) {
+            tdDocHeader.docInfo = {
+              title: \`${mdSegment.title}\`,
+              desc: \`${mdSegment.description}\`,
+            };
+          }
+
+          if (tdDocTabs) {
+            tdDocTabs.tabs = ${JSON.stringify(mdSegment.tdDocTabs)};
+            tdDocTabs.onchange = ({ detail: currentTab }) => this.tab = currentTab;
+          }
+
+          if (tdDocPhone) {
+            tdDocPhone.qrcodeUrl = completeUrl;
+          }
+
+          Prismjs.highlightAll();
+
+          this.$emit('loaded', () => {
+            tdDocContent.pageStatus = 'show';
+          });
+        },
+      });
+    </script>
+  `;
+
+  return sfc;
+}
+
+// 解析 markdown 内容
+function customRender({ source, file, md, mode }) {
+  const { content, data } = matter(source);
+  const isEn = file.endsWith('en-US.md');
+  // md top data
+  const pageData = {
+    spline: '',
+    toc: false,
+    title: '',
+    description: '',
+    isComponent: false,
+    tdDocHeader: true,
+    tdDocTabs: !isEn ? DEFAULT_TABS : DEFAULT_EN_TABS,
+    apiFlag: /#+\s*API/i,
+    docClass: '',
+    lastUpdated: Math.round(fs.statSync(file).mtimeMs),
+    ...data,
+  };
+
+  // md filename
+  const reg = file.match(/tdesign\/(\S*)(?=\/\S*.md)/);
+  // const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+  const componentName = reg && reg[1];
+
+  // split md
+  let [demoMd = '', apiMd = ''] = content.split(pageData.apiFlag);
+
+  const mdSegment = {
+    ...pageData,
+    componentName,
+    docMd: '<td-doc-empty></td-doc-empty>',
+    demoMd: '<td-doc-empty></td-doc-empty>',
+    apiMd: '<td-doc-empty></td-doc-empty>',
+    designMd: '<td-doc-empty></td-doc-empty>',
+  };
+
+  // fix table | render error
+  apiMd = apiMd.replace(/`[^`]+`/g, (str) => str.replace(/\|/g, '\\|'));
+
+  if (pageData.isComponent) {
+    mdSegment.demoMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${demoMd.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+    mdSegment.apiMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${apiMd.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+  } else {
+    mdSegment.docMd = md.render.call(
+      md,
+      `${pageData.toc ? '[toc]\n' : ''}${content.replace(/<!--[\s\S]+?-->/g, '')}`,
+    ).html;
+  }
+
+  // 移动端路由地址
+  const prefix = getMobilePrefix(mode);
+  mdSegment.mobileUrl = `${prefix}#/pages-more/${componentName}/${componentName}`;
+
+  // 设计指南内容 不展示 design Tab 则不解析
+  if (pageData.isComponent && pageData.tdDocTabs.some((item) => item.tab === 'design')) {
+    const designDocPath = path.resolve(__dirname, `../../../docs/design/${componentName}.md`);
+
+    if (fs.existsSync(designDocPath)) {
+      const designMd = fs.readFileSync(designDocPath, 'utf-8');
+      mdSegment.designMd = md.render.call(md, `${pageData.toc ? '[toc]\n' : ''}${designMd}`).html;
+    } else {
+      // console.log(`[vite-plugin-tdoc]: 未找到 ${designDocPath} 文件`);
+    }
+  }
+
+  return mdSegment;
+}
diff --git a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/transforms.js b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/transforms.js
new file mode 100644
index 000000000..94e79d5d2
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/transforms.js
@@ -0,0 +1,77 @@
+import path from 'path';
+import fs from 'fs';
+
+import mdToVue from './md-to-vue';
+
+let demoCodesImports = {};
+
+export default (mode) => ({
+  before({ source, file }) {
+    const resourceDir = path.dirname(file);
+    const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+    const fileName = reg && reg[0];
+    const componentName = reg && reg[1];
+    const localeName = reg && reg[2];
+    demoCodesImports = {};
+
+    // 统一换成 common 文档内容
+    if (fileName && source.includes(':: BASE_DOC ::')) {
+      const localeDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${componentName}.md`);
+      let baseDoc = '';
+      if (fs.existsSync(localeDocPath)) {
+        // 优先载入语言版本
+        baseDoc = fs.readFileSync(localeDocPath, 'utf-8');
+      } else if (fs.existsSync(defaultDocPath)) {
+        // 回退中文默认版本
+        baseDoc = fs.readFileSync(defaultDocPath, 'utf-8');
+      } else {
+        console.error(`未找到 ${defaultDocPath} 文件`);
+      }
+
+      source = source.replace(':: BASE_DOC ::', baseDoc);
+    }
+
+    // 替换成对应 demo 文件
+    source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
+      const defaultDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}/index.vue`);
+      const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}.${localeName}.vue`);
+      // const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
+      // localeDemo 优先级最高
+      if (fs.existsSync(localeDemoPath)) return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`;
+
+      if (!fs.existsSync(defaultDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`);
+        return '\n<h3>DEMO (🚧建设中）...</h3>';
+      }
+
+      return `\n::: demo _example/${demoFileName} ${componentName}\n:::\n`;
+    });
+
+    source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
+      const demoPathOnlyLetters = relativeDemoPath.replace(/[^a-zA-Z\d]/g, '');
+      const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
+      demoCodesImports[demoCodeDefName] = `import ${demoCodeDefName} from './${relativeDemoPath}/index.vue?raw';`;
+    });
+
+    return source;
+  },
+  render({ source, file, md }) {
+    const demoCodesDefsStr = Object.keys(demoCodesImports)
+      .map(key => demoCodesImports[key])
+      .join(';\n');
+
+    const demoCodeInstallStr = Object.keys(demoCodesImports).join(',');
+
+    const sfc = mdToVue({
+      md,
+      file,
+      source,
+      demoCodesDefsStr,
+      demoCodeInstallStr,
+      mode,
+    });
+
+    return sfc;
+  },
+});
diff --git a/packages/tdesign-uniapp/site/web/router.ts b/packages/tdesign-uniapp/site/web/router.ts
new file mode 100644
index 000000000..6d11f9d66
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/router.ts
@@ -0,0 +1,68 @@
+import {
+  type RouteRecordRaw,
+  createRouter,
+  createWebHistory,
+  type RouterOptions } from 'vue-router';
+import config from '../docs.config';
+import { sortDocs, type DocType } from './utils';
+
+const docs = sortDocs(config.docs as unknown as DocType[]);
+const enDocs = sortDocs(config.enDocs as unknown as DocType[]);
+
+function getDocsRoutes(docs: any[], type: string): RouteRecordRaw[] {
+  let docsRoutes: Array<RouteRecordRaw> = [];
+  let docRoute;
+
+  docs.forEach((item) => {
+    const docType = item.type || type;
+    if (docType === type) {
+      const { children } = item;
+      if (children) {
+        docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType));
+      } else {
+        docRoute = { ...item };
+        docsRoutes.push(docRoute);
+      }
+    }
+  });
+  return docsRoutes;
+}
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/uniapp/overview',
+  },
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/uniapp/overview',
+  },
+  ...getDocsRoutes(docs, 'document'),
+  ...getDocsRoutes(docs, 'component'),
+  ...getDocsRoutes(enDocs, 'document'),
+  ...getDocsRoutes(enDocs, 'component'),
+];
+
+const routerConfig: RouterOptions = {
+  routes,
+  history: createWebHistory('/'),
+};
+
+const router = createRouter(routerConfig);
+
+router.beforeEach((to, from, next) => {
+  if (to.name !== from.name) {
+    // @ts-ignore
+    window.NProgress?.start();
+  }
+  next();
+});
+
+router.afterEach(() => {
+  // @ts-ignore
+  window.NProgress?.done();
+  // @ts-ignore
+  document.querySelector('td-stats')?.track?.();
+});
+
+export default router;
diff --git a/packages/tdesign-uniapp/site/web/stackblitz/content.ts b/packages/tdesign-uniapp/site/web/stackblitz/content.ts
new file mode 100644
index 000000000..ad0484914
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/stackblitz/content.ts
@@ -0,0 +1,237 @@
+import orgPkg from '../../../components/package.json';
+
+export const HTML_CONTENT = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+`;
+
+export const MAN_JS_CONTENT = `
+import 'tdesign-uniapp/common/style/theme/index.css';
+
+import {
+  createSSRApp,
+} from 'vue';
+import App from './App.vue';
+
+
+
+export function createApp() {
+  const app = createSSRApp(App);
+  return {
+    app,
+  };
+}
+`;
+
+export const MANIFEST_JSON_CONTENT = JSON.stringify({
+  name: 'TDesign UniApp',
+  appid: '',
+  description: '',
+  versionName: '1.0.0',
+  versionCode: '100',
+  transformPx: false,
+  'app-plus': {
+    usingComponents: true,
+    nvueStyleCompiler: 'uni-app',
+    compilerVersion: 3,
+    splashscreen: {
+      alwaysShowBeforeRender: true,
+      waiting: true,
+      autoclose: true,
+      delay: 0,
+    },
+    modules: {},
+    distribute: {
+      android: {
+        permissions: [
+          '<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
+          '<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
+          '<uses-permission android:name="android.permission.VIBRATE"/>',
+          '<uses-permission android:name="android.permission.READ_LOGS"/>',
+          '<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
+          '<uses-feature android:name="android.hardware.camera.autofocus"/>',
+          '<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
+          '<uses-permission android:name="android.permission.CAMERA"/>',
+          '<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
+          '<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
+          '<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
+          '<uses-permission android:name="android.permission.WAKE_LOCK"/>',
+          '<uses-permission android:name="android.permission.FLASHLIGHT"/>',
+          '<uses-feature android:name="android.hardware.camera"/>',
+          '<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
+        ],
+      },
+      ios: {},
+      sdkConfigs: {},
+    },
+  },
+  quickapp: {},
+  'mp-weixin': {
+    appid: '',
+    setting: {
+      urlCheck: false,
+    },
+    usingComponents: true,
+  },
+  'mp-alipay': {
+    usingComponents: true,
+  },
+  'mp-baidu': {
+    usingComponents: true,
+  },
+  'mp-toutiao': {
+    usingComponents: true,
+  },
+  uniStatistics: {
+    enable: false,
+  },
+  vueVersion: '3',
+}, null, 2);
+
+export const PAGES_JSON_CONTENT = JSON.stringify({
+  pages: [
+    {
+      path: 'pages/index/index',
+      style: {
+        navigationBarTitleText: 'TDesign UniApp',
+      },
+    },
+  ],
+  globalStyle: {
+    navigationBarTextStyle: 'black',
+    navigationBarTitleText: 'uni-app',
+    navigationBarBackgroundColor: '#F8F8F8',
+    backgroundColor: '#F8F8F8',
+  },
+}, null, 2);
+
+export const APP_VUE_CONTENT = `
+<script>
+export default {
+  onLaunch() {
+    console.log('App Launch');
+  },
+  onShow() {
+    console.log('App Show');
+  },
+  onHide() {
+    console.log('App Hide');
+  },
+};
+</script>
+
+<style>
+/*每个页面公共css */
+</style>
+`;
+
+
+export const STACKBLITZ_RZ = `
+  {
+    "installDependencies": false,
+    "startCommand": "pnpm install && pnpm run dev:h5"
+  }
+`;
+
+export const VITE_CONFIG_CONTENT = `
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+
+export default defineConfig({
+  plugins: [
+    uni(),
+  ],
+});
+`;
+
+export const PACKAGE_JSON_CONTENT = JSON.stringify(
+  {
+    name: 'tdesign-uniapp-demo',
+    author: 'novlan1',
+    version: orgPkg.version,
+    scripts: {
+      'dev:custom': 'uni -p',
+      'dev:h5': 'uni',
+      'dev:h5:ssr': 'uni --ssr',
+      'dev:mp-alipay': 'uni -p mp-alipay',
+      'dev:mp-baidu': 'uni -p mp-baidu',
+      'dev:mp-jd': 'uni -p mp-jd',
+      'dev:mp-kuaishou': 'uni -p mp-kuaishou',
+      'dev:mp-lark': 'uni -p mp-lark',
+      'dev:mp-qq': 'uni -p mp-qq',
+      'dev:mp-toutiao': 'uni -p mp-toutiao',
+      'dev:mp-harmony': 'uni -p mp-harmony',
+      'dev:mp-weixin': 'uni -p mp-weixin',
+      'dev:mp-xhs': 'uni -p mp-xhs',
+      'dev:quickapp-webview': 'uni -p quickapp-webview',
+      'dev:quickapp-webview-huawei': 'uni -p quickapp-webview-huawei',
+      'dev:quickapp-webview-union': 'uni -p quickapp-webview-union',
+      'build:custom': 'uni build -p',
+      'build:h5': 'uni build',
+      'build:h5:ssr': 'uni build --ssr',
+      'build:mp-alipay': 'uni build -p mp-alipay',
+      'build:mp-baidu': 'uni build -p mp-baidu',
+      'build:mp-jd': 'uni build -p mp-jd',
+      'build:mp-kuaishou': 'uni build -p mp-kuaishou',
+      'build:mp-lark': 'uni build -p mp-lark',
+      'build:mp-qq': 'uni build -p mp-qq',
+      'build:mp-toutiao': 'uni build -p mp-toutiao',
+      'build:mp-harmony': 'uni build -p mp-harmony',
+      'build:mp-weixin': 'uni build -p mp-weixin',
+      'build:mp-xhs': 'uni build -p mp-xhs',
+      'build:quickapp-webview': 'uni build -p quickapp-webview',
+      'build:quickapp-webview-huawei': 'uni build -p quickapp-webview-huawei',
+      'build:quickapp-webview-union': 'uni build -p quickapp-webview-union',
+    },
+    dependencies: {
+      '@dcloudio/uni-app': '3.0.0-4070620250821001',
+      '@dcloudio/uni-app-harmony': '3.0.0-4070620250821001',
+      '@dcloudio/uni-app-plus': '3.0.0-4070620250821001',
+      '@dcloudio/uni-components': '3.0.0-4070620250821001',
+      '@dcloudio/uni-h5': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-alipay': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-baidu': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-harmony': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-jd': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-kuaishou': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-lark': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-qq': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-toutiao': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-weixin': '3.0.0-4070620250821001',
+      '@dcloudio/uni-mp-xhs': '3.0.0-4070620250821001',
+      '@dcloudio/uni-quickapp-webview': '3.0.0-4070620250821001',
+      'tdesign-uniapp': orgPkg.version,
+      vue: '^3.4.21',
+      'vue-router': '4.5.1',
+    },
+    devDependencies: {
+      '@dcloudio/types': '^3.4.8',
+      '@dcloudio/uni-automator': '3.0.0-4070620250821001',
+      '@dcloudio/uni-cli-shared': '3.0.0-4070620250821001',
+      '@dcloudio/uni-stacktracey': '3.0.0-4070620250821001',
+      '@dcloudio/vite-plugin-uni': '3.0.0-4070620250821001',
+      '@vue/runtime-core': '^3.4.21',
+      vite: '5.2.8',
+    },
+  },
+  null,
+  2,
+);
diff --git a/packages/tdesign-uniapp/site/web/stackblitz/index.vue b/packages/tdesign-uniapp/site/web/stackblitz/index.vue
new file mode 100644
index 000000000..00efa5b86
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/stackblitz/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <td-tooltip trigger-type="hover">
+    <form
+      ref="formRef"
+      method="post"
+      action="https://stackblitz.com/run"
+      target="_blank"
+      @click="submit"
+    >
+      <input
+        type="hidden"
+        name="project[files][src/pages/index/index.vue]"
+        :value="code"
+      >
+      <input
+        type="hidden"
+        name="project[files][index.html]"
+        :value="HTML_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/main.js]"
+        :value="MAN_JS_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/App.vue]"
+        :value="APP_VUE_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/pages.json]"
+        :value="PAGES_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][src/manifest.json]"
+        :value="MANIFEST_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][package.json]"
+        :value="PACKAGE_JSON_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][vite.config.js]"
+        :value="VITE_CONFIG_CONTENT"
+      >
+      <input
+        type="hidden"
+        name="project[files][.stackblitzrc]"
+        :value="STACKBLITZ_RZ"
+      >
+      <input
+        type="hidden"
+        name="project[template]"
+        value="node"
+      >
+
+      <div class="action-online">
+        <svg
+          viewBox="0 0 28 28"
+          height="20"
+        >
+          <path
+            fill="currentColor"
+            d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
+          />
+        </svg>
+      </div>
+    </form>
+    <span slot="content">在 Stackblitz 中打开</span>
+  </td-tooltip>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import {
+  HTML_CONTENT,
+  MAN_JS_CONTENT,
+  MANIFEST_JSON_CONTENT,
+  PAGES_JSON_CONTENT,
+  APP_VUE_CONTENT,
+  STACKBLITZ_RZ,
+  VITE_CONFIG_CONTENT,
+  PACKAGE_JSON_CONTENT,
+} from './content';
+
+export default defineComponent({
+  name: 'Stackblitz',
+  props: {
+    code: String,
+    demoName: String,
+    componentName: String,
+  },
+
+  setup() {
+    const data = {
+      HTML_CONTENT,
+      MAN_JS_CONTENT,
+      MANIFEST_JSON_CONTENT,
+      PAGES_JSON_CONTENT,
+      APP_VUE_CONTENT,
+      STACKBLITZ_RZ,
+      VITE_CONFIG_CONTENT,
+      PACKAGE_JSON_CONTENT,
+    };
+    const match = window.location.hostname.match(/preview-pr-(\d+)-tdesign-mobile-vue.surge.sh/);
+    if (match) {
+      let packageJSON = {};
+      try {
+        packageJSON = JSON.parse(PACKAGE_JSON_CONTENT);
+      } catch (e) {
+      }
+
+      packageJSON.dependencies['tdesign-mobile-vue'] = `https://pkg.pr.new/Tencent/tdesign-mobile-vue/tdesign-mobile-vue@${match[1]}`;
+      data.PACKAGE_JSON_CONTENT = JSON.stringify(packageJSON, null, 2);
+    }
+    const formRef = ref(null);
+
+    const submit = () => {
+      formRef.value.submit();
+    };
+
+    return { ...data, formRef, submit };
+  },
+});
+</script>
diff --git a/packages/tdesign-uniapp/site/web/test-coverage.js b/packages/tdesign-uniapp/site/web/test-coverage.js
new file mode 100644
index 000000000..3ae43ce91
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/test-coverage.js
@@ -0,0 +1,69 @@
+module.exports = {
+  util: { statements: '48.86%', branches: '71.42%', functions: '22.22%', lines: '48.86%' },
+  actionSheet: { statements: '85.39%', branches: '89.33%', functions: '94.28%', lines: '85.39%' },
+  avatar: { statements: '95.21%', branches: '93.75%', functions: '76.92%', lines: '95.21%' },
+  backTop: { statements: '88.99%', branches: '80%', functions: '75%', lines: '88.99%' },
+  badge: { statements: '99.27%', branches: '89.79%', functions: '100%', lines: '99.27%' },
+  button: { statements: '100%', branches: '96.29%', functions: '100%', lines: '100%' },
+  calendar: { statements: '69.24%', branches: '75.78%', functions: '50%', lines: '69.24%' },
+  cascader: { statements: '83.72%', branches: '77.1%', functions: '64.28%', lines: '83.72%' },
+  cell: { statements: '100%', branches: '84.37%', functions: '100%', lines: '100%' },
+  checkbox: { statements: '99.18%', branches: '87.96%', functions: '92.85%', lines: '99.18%' },
+  collapse: { statements: '88.88%', branches: '86.2%', functions: '100%', lines: '88.88%' },
+  colorPicker: { statements: '99.41%', branches: '95.18%', functions: '100%', lines: '99.41%' },
+  configProvider: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  countDown: { statements: '94.56%', branches: '89.47%', functions: '71.42%', lines: '94.56%' },
+  dateTimePicker: { statements: '98.82%', branches: '94.84%', functions: '93.33%', lines: '98.82%' },
+  dialog: { statements: '90.25%', branches: '85.29%', functions: '79.31%', lines: '90.25%' },
+  divider: { statements: '94.64%', branches: '90.9%', functions: '80%', lines: '94.64%' },
+  drawer: { statements: '100%', branches: '96.96%', functions: '100%', lines: '100%' },
+  dropdownMenu: { statements: '94.51%', branches: '71.53%', functions: '90.62%', lines: '94.51%' },
+  empty: { statements: '94.54%', branches: '91.66%', functions: '75%', lines: '94.54%' },
+  fab: { statements: '68.64%', branches: '61.9%', functions: '53.84%', lines: '68.64%' },
+  footer: { statements: '95.08%', branches: '94.11%', functions: '85.71%', lines: '95.08%' },
+  form: { statements: '89.94%', branches: '80.86%', functions: '90.74%', lines: '89.94%' },
+  grid: { statements: '97.63%', branches: '89.58%', functions: '100%', lines: '97.63%' },
+  guide: { statements: '82.74%', branches: '69.81%', functions: '87.09%', lines: '82.74%' },
+  hooks: { statements: '77.42%', branches: '85.64%', functions: '76.08%', lines: '77.42%' },
+  icon: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  image: { statements: '92.3%', branches: '95.12%', functions: '87.5%', lines: '92.3%' },
+  imageViewer: { statements: '60.13%', branches: '72.09%', functions: '36.84%', lines: '60.13%' },
+  indexes: { statements: '95.98%', branches: '85.18%', functions: '100%', lines: '95.98%' },
+  input: { statements: '94.53%', branches: '85.52%', functions: '92.59%', lines: '94.53%' },
+  layout: { statements: '89.21%', branches: '71.42%', functions: '75%', lines: '89.21%' },
+  link: { statements: '100%', branches: '96%', functions: '100%', lines: '100%' },
+  list: { statements: '100%', branches: '87.5%', functions: '100%', lines: '100%' },
+  loading: { statements: '97.86%', branches: '87.5%', functions: '100%', lines: '97.86%' },
+  locale: { statements: '0%', branches: '0%', functions: '0%', lines: '0%' },
+  message: { statements: '63.11%', branches: '65.45%', functions: '68.75%', lines: '63.11%' },
+  navbar: { statements: '95.79%', branches: '94.11%', functions: '87.5%', lines: '95.79%' },
+  noticeBar: { statements: '98.78%', branches: '92.42%', functions: '95%', lines: '98.78%' },
+  overlay: { statements: '97.46%', branches: '90.9%', functions: '100%', lines: '97.46%' },
+  picker: { statements: '85.62%', branches: '78.57%', functions: '90%', lines: '85.62%' },
+  popover: { statements: '70.93%', branches: '71.42%', functions: '42.85%', lines: '70.93%' },
+  popup: { statements: '98.92%', branches: '92.85%', functions: '100%', lines: '98.92%' },
+  progress: { statements: '97.23%', branches: '83.33%', functions: '100%', lines: '97.23%' },
+  pullDownRefresh: { statements: '93.7%', branches: '73.52%', functions: '94.11%', lines: '93.7%' },
+  qrcode: { statements: '98.59%', branches: '76%', functions: '100%', lines: '98.59%' },
+  radio: { statements: '98.12%', branches: '89.04%', functions: '100%', lines: '98.12%' },
+  rate: { statements: '92.42%', branches: '82.5%', functions: '84%', lines: '92.42%' },
+  result: { statements: '94.25%', branches: '91.66%', functions: '88.88%', lines: '94.25%' },
+  search: { statements: '84.06%', branches: '76.31%', functions: '76.19%', lines: '84.06%' },
+  sideBar: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  skeleton: { statements: '93.28%', branches: '81.08%', functions: '90.9%', lines: '93.28%' },
+  slider: { statements: '87.12%', branches: '69.09%', functions: '93.1%', lines: '87.12%' },
+  stepper: { statements: '97.26%', branches: '83.72%', functions: '87.5%', lines: '97.26%' },
+  steps: { statements: '99.23%', branches: '86.2%', functions: '100%', lines: '99.23%' },
+  sticky: { statements: '84.81%', branches: '84.61%', functions: '100%', lines: '84.81%' },
+  swipeCell: { statements: '70.37%', branches: '62.63%', functions: '60.52%', lines: '70.37%' },
+  swiper: { statements: '94.17%', branches: '79.23%', functions: '91.66%', lines: '94.17%' },
+  switch: { statements: '92.8%', branches: '88.57%', functions: '87.5%', lines: '92.8%' },
+  tabBar: { statements: '86.48%', branches: '81.03%', functions: '88.88%', lines: '86.48%' },
+  table: { statements: '94.42%', branches: '68.11%', functions: '84.21%', lines: '94.42%' },
+  tabs: { statements: '97.31%', branches: '79.06%', functions: '100%', lines: '97.31%' },
+  tag: { statements: '98.33%', branches: '92.72%', functions: '93.75%', lines: '98.33%' },
+  textarea: { statements: '91.83%', branches: '79.48%', functions: '92.3%', lines: '91.83%' },
+  toast: { statements: '98.06%', branches: '88.88%', functions: '100%', lines: '98.06%' },
+  treeSelect: { statements: '100%', branches: '91.66%', functions: '95.45%', lines: '100%' },
+  upload: { statements: '95.38%', branches: '81.48%', functions: '71.42%', lines: '95.38%' },
+};
diff --git a/packages/tdesign-uniapp/site/web/utils.ts b/packages/tdesign-uniapp/site/web/utils.ts
new file mode 100644
index 000000000..3f75bd4ab
--- /dev/null
+++ b/packages/tdesign-uniapp/site/web/utils.ts
@@ -0,0 +1,63 @@
+export interface DocType {
+  title: string;
+  titleEn?: string;
+  type: string;
+  children: DocType[];
+}
+
+export function sortDocs(docs: DocType[]): DocType[] {
+  const innerDocs: DocType[] = [];
+  docs.forEach((item: DocType) => {
+    let { children } = item;
+    if (item.type === 'component') {
+      children = item.children.sort((a: any, b: any) => {
+        const nameA = a.name.toUpperCase();
+        const nameB = b.name.toUpperCase();
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+    }
+    if (children) {
+      item.children = sortDocs(children);
+    }
+    innerDocs.push(item);
+  });
+  return innerDocs;
+}
+
+function compareVersion(version1, version2) {
+  const v1 = version1.split('.');
+  const v2 = version2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10);
+    const num2 = parseInt(v2[i], 10);
+
+    if (num1 > num2) {
+      return 1;
+    }
+    if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+function filterStableVersions(versionList) {
+  return versionList.filter(version => !version.includes('-'));
+}
+
+// 过滤小版本 + 版本号排序
+export function filterVersions(versions) {
+  return filterStableVersions(versions).sort(compareVersion);
+}
diff --git a/packages/tdesign-uniapp/tsconfig.eslint.json b/packages/tdesign-uniapp/tsconfig.eslint.json
new file mode 100644
index 000000000..cc154b06f
--- /dev/null
+++ b/packages/tdesign-uniapp/tsconfig.eslint.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "./**/*.d.ts",
+    "./types/**/*.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx",
+    "./**/*.vue",
+    ".eslintrc.js"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 4eb67ef7f..36f2d04e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "resolveJsonModule": true,
     "experimentalDecorators": true,
     "target": "es6",
     "lib": ["es6", "dom", "ES2016.Array.Include"],

From 003d5de262b7477bd9a93fd366b51ae7b7291adb Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 00:18:44 +0800
Subject: [PATCH 02/26] chore: update project config

---
 package.json                                  |  2 +-
 packages/tdesign-uniapp-chat/package.json     | 36 ++-------------
 .../site/web/plugins/plugin-tdoc/md-to-vue.js |  9 ++--
 .../example/script/watch/config.js            |  6 +--
 .../example/script/watch/watch.js             |  3 +-
 packages/tdesign-uniapp/package.json          | 46 +++++++++----------
 .../site/web/plugins/plugin-tdoc/md-to-vue.js |  8 ++--
 7 files changed, 42 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index 72abe6683..284c03679 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "start": "npm run dev",
     "dev": "cross-env NODE_ENV=development gulp dev --gulpfile script/gulpfile.js --cwd ./",
     "uniapp": "pnpm -C packages/tdesign-uniapp",
-    "uniapp:chat": "pnpm -C packages/tdesign-uniapp",
+    "uniapp:chat": "pnpm -C packages/tdesign-uniapp-chat",
     "build": "cross-env NODE_ENV=production gulp build --gulpfile script/gulpfile.js --cwd ./",
     "build:dist": "gulp --gulpfile script/gulpfile.dist.js --cwd ./",
     "build:example": "gulp --gulpfile script/gulpfile.example.js --cwd ./",
diff --git a/packages/tdesign-uniapp-chat/package.json b/packages/tdesign-uniapp-chat/package.json
index 490f65050..02d063efe 100644
--- a/packages/tdesign-uniapp-chat/package.json
+++ b/packages/tdesign-uniapp-chat/package.json
@@ -11,39 +11,11 @@
     "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
   },
   "scripts": {
-    "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:h5\" \"pnpm --filter=\"./packages/site\" dev\"",
-    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
-    "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-weixin\"",
-    "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-alipay\"",
-    "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-toutiao\"",
-    "dev:mp-lark": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-lark\"",
-    "dev:mp-xhs": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-xhs\"",
-    "dev:mp-qq": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-qq\"",
-    "dev:mp-kuaishou": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-kuaishou\"",
-    "dev:mp-jd": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-jd\"",
-    "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/demo\" dev:mp-baidu\"",
-    "dev:mp": "npm run dev:mp-weixin",
-    "dev:mp:pure": "pnpm --filter=\"./packages/demo\" dev:mp-weixin",
-    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./packages/demo\" build:h5",
-    "build:mp-weixin": "pnpm --filter=\"./packages/demo\" build:mp-weixin",
-    "build:mp-alipay": "pnpm --filter=\"./packages/demo\" build:mp-alipay",
-    "build:mp-toutiao": "pnpm --filter=\"./packages/demo\" build:mp-toutiao",
-    "build:mp-lark": "pnpm --filter=\"./packages/demo\" build:mp-lark",
-    "build:mp-xhs": "pnpm --filter=\"./packages/demo\" build:mp-xhs",
-    "build:mp-qq": "pnpm --filter=\"./packages/demo\" build:mp-qq",
-    "build:mp-kuaishou": "pnpm --filter=\"./packages/demo\" build:mp-kuaishou",
-    "build:mp-jd": "pnpm --filter=\"./packages/demo\" build:mp-jd",
-    "build:mp-baidu": "pnpm --filter=\"./packages/demo\" build:mp-baidu",
-    "build:mp": "npm run build:mp-weixin",
-    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./packages/demo\" build:h5",
-    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./packages/demo\" build:h5",
+    "build": "pnpm --filter=\"./site\" build",
+    "preview": "pnpm --filter=\"./site\" run site:preview",
+    "preview:chat": "pnpm --filter=\"./site\" run site:preview",
     "type-check": "vue-tsc --noEmit",
-    "init": "node packages/demo/script/watch/init.js && node packages/demo/script/pages/index.js",
-    "watch": "node packages/demo/script/watch/watch.js",
-    "prepare": "npm run init && npm run release:prepare",
-    "release:prepare": "node packages/demo/script/release/prepare.js",
-    "publish": "cd npm_dist && npm publish",
-    "commit": "git-cz"
+    "publish": "cd npm_dist && npm publish"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
diff --git a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
index 0df525ec2..3aa2b4aec 100644
--- a/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
+++ b/packages/tdesign-uniapp-chat/site/web/plugins/plugin-tdoc/md-to-vue.js
@@ -21,14 +21,15 @@ const DEFAULT_EN_TABS = [
 
 function getMobilePrefix(mode) {
   if (mode === 'preview') {
-    return '/mobile';
+    return 'https://tdesign.tencent.com/uniapp/mobile';
   }
   if (process.env.NODE_ENV === 'development') {
-    return 'http://localhost:11111/tdesign-uniapp/mobile';
+    return 'http://localhost:11111/uniapp/mobile';
   }
-  return '/tdesign-uniapp/mobile';
+  return '/uniapp/mobile';
 }
 
+
 export default function mdToVue(options) {
   const mdSegment = customRender(options);
   const { demoCodesDefsStr, demoCodeInstallStr } = options;
@@ -157,7 +158,7 @@ function customRender({ source, file, md, mode }) {
   };
 
   // md filename
-  const reg = file.match(/tdesign-uniapp-chat\/(\S*)(?=\/\S*.md)/);
+  const reg = file.match(/tdesign-uniapp-chat\/components\/(\S*)(?=\/\S*.md)/);
   // const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
   const componentName = reg && reg[1];
 
diff --git a/packages/tdesign-uniapp/example/script/watch/config.js b/packages/tdesign-uniapp/example/script/watch/config.js
index 1f8b68546..3fa622b6e 100644
--- a/packages/tdesign-uniapp/example/script/watch/config.js
+++ b/packages/tdesign-uniapp/example/script/watch/config.js
@@ -5,12 +5,12 @@ const config = {
   rawTargetDir: path.resolve(__dirname, '../../src/_tdesign-raw'),
   rawTargetDirInApp: path.resolve(__dirname, '../../../tdesign-app/tdesign-uniapp-raw'),
 
-  sourceDir: path.resolve(__dirname, '../../../tdesign'),
+  sourceDir: path.resolve(__dirname, '../../../components'),
   chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
 
-  sourceGlob: path.resolve(__dirname, '../../../tdesign/**/*'),
+  sourceGlob: path.resolve(__dirname, '../../../components/**/*'),
   chatSourceGlob: path.resolve(__dirname, '../../../tdesign-uniapp-chat/**/*'),
-  baseAndChatSourceGlob: path.resolve(__dirname, '../../../{tdesign,tdesign-uniapp-chat}/**/*'),
+  baseAndChatSourceGlob: path.resolve(__dirname, '../../../../{tdesign-uniapp,tdesign-uniapp-chat}/**/*'),
 
   demoDir: path.resolve(__dirname, '../../src/pages-more'),
 
diff --git a/packages/tdesign-uniapp/example/script/watch/watch.js b/packages/tdesign-uniapp/example/script/watch/watch.js
index 7295f4d23..77f6f0fb6 100644
--- a/packages/tdesign-uniapp/example/script/watch/watch.js
+++ b/packages/tdesign-uniapp/example/script/watch/watch.js
@@ -31,7 +31,8 @@ async function main() {
   watch(config.baseAndChatSourceGlob, async (e) => {
     const { event, history, base } = e || {};
 
-    if (event !== 'unlink' && history?.[0]) {
+    if (event !== 'unlink' && history?.[0]
+       && (history[0].includes('tdesign-uniapp/components') || history[0].includes('tdesign-uniapp-chat/components'))) {
       const filePath = history[0];
       let relativePath = path.relative(base, filePath);
       console.log('relativePath', relativePath);
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index 3abe43656..ee46565d7 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -12,31 +12,31 @@
   },
   "scripts": {
     "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site\" dev\"",
-    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
-    "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-weixin\"",
-    "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-alipay\"",
-    "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-toutiao\"",
-    "dev:mp-lark": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-lark\"",
-    "dev:mp-xhs": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-xhs\"",
-    "dev:mp-qq": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-qq\"",
-    "dev:mp-kuaishou": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-kuaishou\"",
-    "dev:mp-jd": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-jd\"",
-    "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./packages/example\" dev:mp-baidu\"",
+    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
+    "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-weixin\"",
+    "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-alipay\"",
+    "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-toutiao\"",
+    "dev:mp-lark": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-lark\"",
+    "dev:mp-xhs": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-xhs\"",
+    "dev:mp-qq": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-qq\"",
+    "dev:mp-kuaishou": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-kuaishou\"",
+    "dev:mp-jd": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-jd\"",
+    "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-baidu\"",
     "dev:mp": "npm run dev:mp-weixin",
-    "dev:mp:pure": "pnpm --filter=\"./packages/example\" dev:mp-weixin",
-    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./packages/example\" build:h5",
-    "build:mp-weixin": "pnpm --filter=\"./packages/example\" build:mp-weixin",
-    "build:mp-alipay": "pnpm --filter=\"./packages/example\" build:mp-alipay",
-    "build:mp-toutiao": "pnpm --filter=\"./packages/example\" build:mp-toutiao",
-    "build:mp-lark": "pnpm --filter=\"./packages/example\" build:mp-lark",
-    "build:mp-xhs": "pnpm --filter=\"./packages/example\" build:mp-xhs",
-    "build:mp-qq": "pnpm --filter=\"./packages/example\" build:mp-qq",
-    "build:mp-kuaishou": "pnpm --filter=\"./packages/example\" build:mp-kuaishou",
-    "build:mp-jd": "pnpm --filter=\"./packages/example\" build:mp-jd",
-    "build:mp-baidu": "pnpm --filter=\"./packages/example\" build:mp-baidu",
+    "dev:mp:pure": "pnpm --filter=\"./example\" dev:mp-weixin",
+    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./example\" build:h5",
+    "build:mp-weixin": "pnpm --filter=\"./example\" build:mp-weixin",
+    "build:mp-alipay": "pnpm --filter=\"./example\" build:mp-alipay",
+    "build:mp-toutiao": "pnpm --filter=\"./example\" build:mp-toutiao",
+    "build:mp-lark": "pnpm --filter=\"./example\" build:mp-lark",
+    "build:mp-xhs": "pnpm --filter=\"./example\" build:mp-xhs",
+    "build:mp-qq": "pnpm --filter=\"./example\" build:mp-qq",
+    "build:mp-kuaishou": "pnpm --filter=\"./example\" build:mp-kuaishou",
+    "build:mp-jd": "pnpm --filter=\"./example\" build:mp-jd",
+    "build:mp-baidu": "pnpm --filter=\"./example\" build:mp-baidu",
     "build:mp": "npm run build:mp-weixin",
-    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./packages/example\" build:h5",
-    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./packages/example\" build:h5",
+    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./example\" build:h5",
+    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./example\" build:h5",
     "type-check": "vue-tsc --noEmit",
     "init": "node packages/example/script/watch/init.js && node packages/example/script/pages/index.js",
     "watch": "node packages/example/script/watch/watch.js",
diff --git a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
index 4f9d832b8..b587394f9 100644
--- a/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
+++ b/packages/tdesign-uniapp/site/web/plugins/plugin-tdoc/md-to-vue.js
@@ -21,12 +21,12 @@ const DEFAULT_EN_TABS = [
 
 function getMobilePrefix(mode) {
   if (mode === 'preview') {
-    return 'https://uwayfly.com/tdesign-uniapp/mobile';
+    return 'https://tdesign.tencent.com/uniapp/mobile';
   }
   if (process.env.NODE_ENV === 'development') {
-    return 'http://localhost:11111/tdesign-uniapp/mobile';
+    return 'http://localhost:11111/uniapp/mobile';
   }
-  return '/tdesign-uniapp/mobile';
+  return '/uniapp/mobile';
 }
 
 export default function mdToVue(options) {
@@ -157,7 +157,7 @@ function customRender({ source, file, md, mode }) {
   };
 
   // md filename
-  const reg = file.match(/tdesign\/(\S*)(?=\/\S*.md)/);
+  const reg = file.match(/tdesign-uniapp\/components\/(\S*)(?=\/\S*.md)/);
   // const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
   const componentName = reg && reg[1];
 

From f2b9d6b2512ef041aeef9763cbb98efd71d73e3e Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 22:15:13 +0800
Subject: [PATCH 03/26] chore: update typo

---
 .github/workflows/typos-config.toml               | 11 ++++++++++-
 packages/tdesign-uniapp-chat/components/README.md | 14 +++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml
index 11c02cb2b..d2c2bca2b 100644
--- a/.github/workflows/typos-config.toml
+++ b/.github/workflows/typos-config.toml
@@ -9,4 +9,13 @@ nd = "nd"
 loosing = "loosing"
 
 [files]
-extend-exclude = ["CHANGELOG*.md", "changelog.json", "echarts.js"]
+extend-exclude = [
+  "CHANGELOG*.md", 
+  "changelog.json", 
+  "echarts.js",
+  "packages/tdesign-app/common/uni.css",
+  "packages/tdesign-app/uni_modules/**/*",
+  "packages/tdesign-uniapp/components/npm/**/*",
+  "packages/tdesign-uniapp-chat/components/npm/**/*",
+  "packages/tdesign-uniapp-chat/chat-list/_example/ec-canvas/echarts.js"
+]
diff --git a/packages/tdesign-uniapp-chat/components/README.md b/packages/tdesign-uniapp-chat/components/README.md
index ef0b45ec9..acc0881be 100644
--- a/packages/tdesign-uniapp-chat/components/README.md
+++ b/packages/tdesign-uniapp-chat/components/README.md
@@ -6,19 +6,19 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/novlan1/tdesign-uniapp/blob/develop/LICENSE">
-    <img src="https://img.shields.io/npm/l/tdesign-uniapp.svg?sanitize=true" alt="License">
+  <a href="https://github.com/novlan1/tdesign-uniapp-chat/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-uniapp-chat.svg?sanitize=true" alt="License">
   </a>
-  <a href="https://www.npmjs.com/package/tdesign-uniapp">
-    <img src="https://img.shields.io/npm/v/tdesign-uniapp.svg?sanitize=true" alt="Version">
+  <a href="https://www.npmjs.com/package/tdesign-uniapp-chat">
+    <img src="https://img.shields.io/npm/v/tdesign-uniapp-chat.svg?sanitize=true" alt="Version">
   </a>
   <a href="https://www.npmjs.com/package/tdesign-uniapp-chat">
     <img src="https://img.shields.io/npm/dm/tdesign-uniapp-chat" alt="Downloads">
   </a>
-  <a href="https://pkg.pr.new/~/novlan1/tdesign-uniapp">
-    <img src="https://pkg.pr.new/badge/novlan1/tdesign-uniapp?style=flat&color=000&logoSize=auto" alt="Downloads">
+  <a href="https://pkg.pr.new/~/novlan1/tdesign-uniapp-chat">
+    <img src="https://pkg.pr.new/badge/novlan1/tdesign-uniapp-chat?style=flat&color=000&logoSize=auto" alt="Downloads">
   </a>
-  <a href="https://deepwiki.com/novlan1/tdesign-uniapp">
+  <a href="https://deepwiki.com/novlan1/tdesign-uniapp-chat">
     <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki">
   </a>
 </p>

From 741722160d973724ca179cb57a4f01133342e390 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 22:16:05 +0800
Subject: [PATCH 04/26] chore: update typo

---
 .github/workflows/typos-config.toml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml
index d2c2bca2b..8516b3e93 100644
--- a/.github/workflows/typos-config.toml
+++ b/.github/workflows/typos-config.toml
@@ -13,9 +13,6 @@ extend-exclude = [
   "CHANGELOG*.md", 
   "changelog.json", 
   "echarts.js",
-  "packages/tdesign-app/common/uni.css",
-  "packages/tdesign-app/uni_modules/**/*",
   "packages/tdesign-uniapp/components/npm/**/*",
   "packages/tdesign-uniapp-chat/components/npm/**/*",
-  "packages/tdesign-uniapp-chat/chat-list/_example/ec-canvas/echarts.js"
 ]

From bd9e383ffca4b4ce666e650ae5af6e0e541c10f3 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 22:26:54 +0800
Subject: [PATCH 05/26] chore: remove useless deps and update script

---
 .../tdesign-uniapp-chat/site/package.json     |  3 +-
 .../tdesign-uniapp/components/package.json    | 47 -------------------
 packages/tdesign-uniapp/package.json          | 14 +++---
 packages/tdesign-uniapp/site/package.json     |  3 +-
 4 files changed, 9 insertions(+), 58 deletions(-)

diff --git a/packages/tdesign-uniapp-chat/site/package.json b/packages/tdesign-uniapp-chat/site/package.json
index eb52dcf69..b952083d8 100644
--- a/packages/tdesign-uniapp-chat/site/package.json
+++ b/packages/tdesign-uniapp-chat/site/package.json
@@ -81,7 +81,6 @@
     "commitizen": "^4.2.3",
     "concurrently": "^6.5.1",
     "cross-env": "^7.0.3",
-    "cypress": "^9.1.1",
     "cz-conventional-changelog": "3.3.0",
     "debug": "^4.3.1",
     "dom-parser": "^0.1.6",
@@ -133,4 +132,4 @@
     "vue-router": "4.0.11",
     "vue-tsc": "^0.40.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/package.json b/packages/tdesign-uniapp/components/package.json
index b1c301191..c718ca320 100644
--- a/packages/tdesign-uniapp/components/package.json
+++ b/packages/tdesign-uniapp/components/package.json
@@ -448,52 +448,5 @@
     "postinstall": "node ./script/postinstall",
     "publish": "node ../example/script/release/publish-tdesign-uniapp.js"
   },
-  "devDependencies": {
-    "@dcloudio/types": "^3.4.8",
-    "@dcloudio/uni-app": "3.0.0-4030620241128001",
-    "@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
-    "@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
-    "@dcloudio/uni-automator": "3.0.0-4030620241128001",
-    "@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
-    "@dcloudio/uni-components": "3.0.0-4030620241128001",
-    "@dcloudio/uni-h5": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
-    "@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
-    "@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
-    "@stylistic/eslint-plugin-jsx": "3.1.0",
-    "@types/node": "^24.2.0",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "@vue/runtime-core": "^3.4.21",
-    "@vue/tsconfig": "^0.7.0",
-    "eslint": "8.57.1",
-    "eslint-config-light": "latest",
-    "eslint-config-light-vue3": "latest",
-    "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-node": "0.3.9",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "25",
-    "eslint-plugin-light": "latest",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-tailwindcss": "3.18.0",
-    "eslint-plugin-vue": "9.14.0",
-    "prismjs": "^1.30.0",
-    "typescript": "~4.7.2",
-    "vite": "5.2.8",
-    "vue": "^3.4.21",
-    "vue-i18n": "^9.1.9",
-    "vue-tsc": "^1.0.24"
-  },
   "license": "MIT"
 }
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index ee46565d7..3ae2d4903 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site\" dev\"",
-    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./packages/site-chat\" dev\"",
+    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site-chat\" dev\"",
     "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-weixin\"",
     "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-alipay\"",
     "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-toutiao\"",
@@ -24,7 +24,7 @@
     "dev:mp-baidu": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-baidu\"",
     "dev:mp": "npm run dev:mp-weixin",
     "dev:mp:pure": "pnpm --filter=\"./example\" dev:mp-weixin",
-    "build": "pnpm --filter=\"./packages/site\" build && pnpm --filter=\"./example\" build:h5",
+    "build": "pnpm --filter=\"./site\" build && pnpm --filter=\"./example\" build:h5",
     "build:mp-weixin": "pnpm --filter=\"./example\" build:mp-weixin",
     "build:mp-alipay": "pnpm --filter=\"./example\" build:mp-alipay",
     "build:mp-toutiao": "pnpm --filter=\"./example\" build:mp-toutiao",
@@ -35,13 +35,13 @@
     "build:mp-jd": "pnpm --filter=\"./example\" build:mp-jd",
     "build:mp-baidu": "pnpm --filter=\"./example\" build:mp-baidu",
     "build:mp": "npm run build:mp-weixin",
-    "preview": "pnpm --filter=\"./packages/site\" run site:preview && pnpm --filter=\"./example\" build:h5",
-    "preview:chat": "pnpm --filter=\"./packages/site-chat\" run site:preview && pnpm --filter=\"./example\" build:h5",
+    "preview": "pnpm --filter=\"./site\" run site:preview && pnpm --filter=\"./example\" build:h5",
+    "preview:chat": "pnpm --filter=\"./site-chat\" run site:preview && pnpm --filter=\"./example\" build:h5",
     "type-check": "vue-tsc --noEmit",
-    "init": "node packages/example/script/watch/init.js && node packages/example/script/pages/index.js",
-    "watch": "node packages/example/script/watch/watch.js",
+    "init": "node ./example/script/watch/init.js && node ./example/script/pages/index.js",
+    "watch": "node ./example/script/watch/watch.js",
     "prepare": "npm run init && npm run release:prepare",
-    "release:prepare": "node packages/example/script/release/prepare.js",
+    "release:prepare": "node ./example/script/release/prepare.js",
     "publish": "cd npm_dist && npm publish",
     "commit": "git-cz"
   },
diff --git a/packages/tdesign-uniapp/site/package.json b/packages/tdesign-uniapp/site/package.json
index 604e30f17..0439a95c2 100644
--- a/packages/tdesign-uniapp/site/package.json
+++ b/packages/tdesign-uniapp/site/package.json
@@ -81,7 +81,6 @@
     "commitizen": "^4.2.3",
     "concurrently": "^6.5.1",
     "cross-env": "^7.0.3",
-    "cypress": "^9.1.1",
     "cz-conventional-changelog": "3.3.0",
     "debug": "^4.3.1",
     "dom-parser": "^0.1.6",
@@ -133,4 +132,4 @@
     "vue-router": "4.0.11",
     "vue-tsc": "^0.40.0"
   }
-}
+}
\ No newline at end of file

From 1a4abfa5e94b94fad6535c5f515f3a5e5bb1c6e6 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 22:44:29 +0800
Subject: [PATCH 06/26] chore: add app package

---
 .github/workflows/typos-config.toml           |    2 +
 .gitignore                                    |   10 +
 packages/tdesign-uniapp/app/App.vue           |  134 ++
 packages/tdesign-uniapp/app/README.md         |    5 +
 packages/tdesign-uniapp/app/common/uni.css    | 1458 +++++++++++++++++
 packages/tdesign-uniapp/app/index.html        |   22 +
 packages/tdesign-uniapp/app/main.js           |   31 +
 packages/tdesign-uniapp/app/manifest.json     |  229 +++
 .../tdesign-uniapp/app/mixins/demo-base.js    |   32 +
 packages/tdesign-uniapp/app/mixins/skyline.js |    1 +
 packages/tdesign-uniapp/app/package.json      |  129 ++
 packages/tdesign-uniapp/app/pages.json        |  475 ++++++
 .../tdesign-uniapp/app/static/customicons.css |   20 +
 .../tdesign-uniapp/app/static/customicons.ttf |  Bin 0 -> 2416 bytes
 .../app/static/logo-tdesign.png               |  Bin 0 -> 127137 bytes
 packages/tdesign-uniapp/app/static/uni.ttf    |  Bin 0 -> 26164 bytes
 packages/tdesign-uniapp/app/store/counter.js  |   18 +
 packages/tdesign-uniapp/app/store/index.js    |  142 ++
 packages/tdesign-uniapp/app/style/app.less    |   60 +
 packages/tdesign-uniapp/app/template.h5.html  |   61 +
 packages/tdesign-uniapp/app/uni.scss          |   76 +
 .../app/uni_modules/uni-scss/changelog.md     |    8 +
 .../app/uni_modules/uni-scss/index.scss       |    1 +
 .../app/uni_modules/uni-scss/package.json     |   82 +
 .../app/uni_modules/uni-scss/readme.md        |    4 +
 .../uni_modules/uni-scss/styles/index.scss    |    7 +
 .../uni-scss/styles/setting/_border.scss      |    3 +
 .../uni-scss/styles/setting/_color.scss       |   66 +
 .../uni-scss/styles/setting/_radius.scss      |   55 +
 .../uni-scss/styles/setting/_space.scss       |   56 +
 .../uni-scss/styles/setting/_styles.scss      |  167 ++
 .../uni-scss/styles/setting/_text.scss        |   24 +
 .../uni-scss/styles/setting/_variables.scss   |  146 ++
 .../uni-scss/styles/tools/functions.scss      |   19 +
 .../app/uni_modules/uni-scss/theme.scss       |   31 +
 .../app/uni_modules/uni-scss/variables.scss   |   62 +
 packages/tdesign-uniapp/app/vite.config.js    |   14 +
 37 files changed, 3650 insertions(+)
 create mode 100644 packages/tdesign-uniapp/app/App.vue
 create mode 100644 packages/tdesign-uniapp/app/README.md
 create mode 100644 packages/tdesign-uniapp/app/common/uni.css
 create mode 100644 packages/tdesign-uniapp/app/index.html
 create mode 100644 packages/tdesign-uniapp/app/main.js
 create mode 100644 packages/tdesign-uniapp/app/manifest.json
 create mode 100644 packages/tdesign-uniapp/app/mixins/demo-base.js
 create mode 100644 packages/tdesign-uniapp/app/mixins/skyline.js
 create mode 100644 packages/tdesign-uniapp/app/package.json
 create mode 100644 packages/tdesign-uniapp/app/pages.json
 create mode 100644 packages/tdesign-uniapp/app/static/customicons.css
 create mode 100644 packages/tdesign-uniapp/app/static/customicons.ttf
 create mode 100644 packages/tdesign-uniapp/app/static/logo-tdesign.png
 create mode 100644 packages/tdesign-uniapp/app/static/uni.ttf
 create mode 100644 packages/tdesign-uniapp/app/store/counter.js
 create mode 100644 packages/tdesign-uniapp/app/store/index.js
 create mode 100644 packages/tdesign-uniapp/app/style/app.less
 create mode 100644 packages/tdesign-uniapp/app/template.h5.html
 create mode 100644 packages/tdesign-uniapp/app/uni.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/changelog.md
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/index.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/package.json
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/readme.md
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/index.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_border.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_color.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_radius.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_space.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_styles.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_text.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_variables.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/tools/functions.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/theme.scss
 create mode 100644 packages/tdesign-uniapp/app/uni_modules/uni-scss/variables.scss
 create mode 100644 packages/tdesign-uniapp/app/vite.config.js

diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml
index 8516b3e93..d9f4fbd83 100644
--- a/.github/workflows/typos-config.toml
+++ b/.github/workflows/typos-config.toml
@@ -15,4 +15,6 @@ extend-exclude = [
   "echarts.js",
   "packages/tdesign-uniapp/components/npm/**/*",
   "packages/tdesign-uniapp-chat/components/npm/**/*",
+  "packages/tdesign-uniapp/app/common/uni.css",
+  "packages/tdesign-uniapp/app/uni_modules/**/*",
 ]
diff --git a/.gitignore b/.gitignore
index 886d7061a..a5df1dab2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,12 +16,22 @@ packages/tdesign-miniprogram/test/e2e
 packages/tdesign-miniprogram/test/unit
 packages/tdesign-miniprogram/test/unit-virtualHost
 
+# about uniapp 
 packages/tdesign-uniapp/example/src/_tdesign
 packages/tdesign-uniapp/example/src/_tdesign-raw/
 packages/tdesign-uniapp/example/src/pages-more/
 packages/tdesign-uniapp/npm_dist/
 packages/tdesign-uniapp-chat/npm_dist/
 
+# about app of uniapp
+packages/tdesign-uniapp/app/uni_modules/tdesign-uniapp/
+packages/tdesign-uniapp/app/unpackage/
+packages/tdesign-uniapp/app/pages-more/
+packages/tdesign-uniapp/app/pages/
+packages/tdesign-uniapp/app/components/
+packages/tdesign-uniapp/app/tdesign-uniapp-raw/
+
+
 .DS_Store
 node_modules
 package-lock.json
diff --git a/packages/tdesign-uniapp/app/App.vue b/packages/tdesign-uniapp/app/App.vue
new file mode 100644
index 000000000..426aedae2
--- /dev/null
+++ b/packages/tdesign-uniapp/app/App.vue
@@ -0,0 +1,134 @@
+<script>
+/* eslint-disable import/no-unresolved */
+
+import {
+  mapMutations,
+} from 'vuex';
+import {
+  version,
+} from './package.json';
+
+export default {
+  onLaunch() {
+    // #ifdef H5
+    console.log(
+      `%c hello uniapp %c v${version} `,
+      'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
+      'background:#007aff ;padding: 1px; border-radius: 0 3px 3px 0;  color: #fff; font-weight: bold;',
+    );
+    // #endif
+    // 线上示例使用
+    // console.log('%c uni-app官方团队诚邀优秀前 端工程师加盟，一起打造更卓越的uni-app & uniCloud，欢迎投递简历到 hr2013@dcloud.io', 'color: red');
+    console.log('App Launch');
+    // #ifdef APP-PLUS
+    // App平台检测升级，服务端代码是通过uniCloud的云函数实现的，详情可参考：https://ext.dcloud.net.cn/plugin?id=4542
+
+    // 一键登录预登陆，可以显著提高登录速度
+    uni.preLogin({
+      provider: 'univerify',
+      success: (res) => {
+        // 成功
+        this.setUniverifyErrorMsg();
+        console.log('preLogin success: ', res);
+      },
+      fail: (res) => {
+        this.setUniverifyLogin(false);
+        this.setUniverifyErrorMsg(res.errMsg);
+        // 失败
+        console.log('preLogin fail res: ', res);
+      },
+    });
+    // #endif
+  },
+  onShow() {
+    console.log('App Show');
+  },
+  onHide() {
+    console.log('App Hide');
+  },
+  globalData: {
+    test: '',
+  },
+  methods: {
+    ...mapMutations(['setUniverifyErrorMsg', 'setUniverifyLogin']),
+  },
+};
+</script>
+
+<style lang="scss">
+	@import '@/uni_modules/uni-scss/index.scss';
+	/* #ifndef APP-PLUS-NVUE */
+	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
+	@import './common/uni.css';
+	@import '@/static/customicons.css';
+	/* H5 兼容 pc 所需 */
+	/* #ifdef H5 */
+	@media screen and (min-width: 768px) {
+		body {
+			overflow-y: scroll;
+		}
+	}
+
+	/* 顶栏通栏样式 */
+	/* .uni-top-window {
+    left: 0;
+    right: 0;
+	} */
+
+	uni-page-body {
+		background-color: #F5F5F5 !important;
+		min-height: 100% !important;
+		height: auto !important;
+	}
+
+	.uni-top-window uni-tabbar .uni-tabbar {
+		background-color: #fff !important;
+	}
+
+	.uni-app--showleftwindow .hideOnPc {
+		display: none !important;
+	}
+
+	/* #endif */
+
+	/* 以下样式用于 hello uni-app 演示所需 */
+	page {
+		background-color: #efeff4;
+		height: 100%;
+		font-size: 28rpx;
+		/* line-height: 1.8; */
+	}
+
+	.fix-pc-padding {
+		padding: 0 50px;
+	}
+
+	.uni-header-logo {
+		padding: 30rpx;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 10rpx;
+	}
+
+	.uni-header-image {
+		width: 100px;
+		height: 100px;
+	}
+
+	.uni-hello-text {
+		color: #7A7E83;
+	}
+
+	.uni-hello-addfile {
+		text-align: center;
+		line-height: 300rpx;
+		background: #FFF;
+		padding: 50rpx;
+		margin-top: 10px;
+		font-size: 38rpx;
+		color: #808080;
+	}
+
+	/* #endif*/
+</style>
diff --git a/packages/tdesign-uniapp/app/README.md b/packages/tdesign-uniapp/app/README.md
new file mode 100644
index 000000000..cc0aa3324
--- /dev/null
+++ b/packages/tdesign-uniapp/app/README.md
@@ -0,0 +1,5 @@
+# TDesign UniApp
+
+用来调试和发布 App 端。
+
+用 HBuilderX 打开，`uni_modules/tdesign-app` 可以从 `npm run init` 命令复制而来，也可从插件市场下载 `tdesign-uniapp` 导入进来。调试方法可参考[官方文档](https://uniapp.dcloud.net.cn/tutorial/run/installSimulator.html#run-app-android-emulator)。
diff --git a/packages/tdesign-uniapp/app/common/uni.css b/packages/tdesign-uniapp/app/common/uni.css
new file mode 100644
index 000000000..f46f7feb5
--- /dev/null
+++ b/packages/tdesign-uniapp/app/common/uni.css
@@ -0,0 +1,1458 @@
+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('~@/static/uni.ttf') format('truetype');
+}
+
+/* #ifdef H5 */
+.fix-left-window {
+	padding-left: var(--window-left);
+}
+.pc-hide {
+	display: none !important;
+}
+/* #endif */
+
+/*通用 */
+
+/* view{
+	font-size:28rpx;
+	line-height:1.8;
+} */
+progress, checkbox-group{
+	width: 100%;
+}
+form {
+	width: 100%;
+}
+.uni-flex {
+	display: flex;
+	flex-direction: row;
+}
+.uni-flex-item {
+	flex: 1;
+}
+.uni-row {
+	flex-direction: row;
+}
+.uni-column {
+	flex-direction: column;
+}
+.uni-link{
+	color:#576B95;
+	font-size:26rpx;
+}
+.uni-center{
+	text-align:center;
+}
+.uni-inline-item{
+	display: flex;
+	flex-direction: row;
+	align-items:center;
+}
+.uni-inline-item text{
+	margin-right: 20rpx;
+}
+.uni-inline-item text:last-child{
+	margin-right: 0rpx;
+	margin-left: 20rpx;
+}
+
+/* page */
+.common-page-head{
+	padding:35rpx;
+	text-align: center;
+}
+.common-page-head-title {
+	display: inline-block;
+	padding: 0 40rpx;
+	font-size: 30rpx;
+	height: 88rpx;
+	line-height: 88rpx;
+	color: #BEBEBE;
+	box-sizing: border-box;
+	border-bottom: 2rpx solid #D8D8D8;
+}
+
+.uni-padding-wrap{
+	/* width:690rpx; */
+	padding:0 30rpx;
+}
+.uni-word {
+	text-align: center;
+	padding:200rpx 100rpx;
+}
+.uni-title {
+	font-size:30rpx;
+	font-weight:500;
+	padding:20rpx 0;
+	line-height:1.5;
+}
+.uni-text{
+	font-size:28rpx;
+}
+.uni-title text{
+	font-size:24rpx;
+	color:#888;
+}
+
+.uni-text-gray{
+	color: #ccc;
+}
+.uni-text-small {
+	font-size:24rpx;
+}
+.uni-common-mb{
+	margin-bottom:30rpx;
+}
+.uni-common-pb{
+	padding-bottom:30rpx;
+}
+.uni-common-pl{
+	padding-left:30rpx;
+}
+.uni-common-mt{
+	margin-top:30rpx;
+}
+/* 背景色 */
+.uni-bg-red{
+	background:#F76260; color:#FFF;
+}
+.uni-bg-green{
+	background:#09BB07; color:#FFF;
+}
+.uni-bg-blue{
+	background:#007AFF; color:#FFF;
+}
+/* 标题 */
+.uni-h1 {font-size: 80rpx; font-weight:700;}
+.uni-h2 {font-size: 60rpx; font-weight:700;}
+.uni-h3 {font-size: 48rpx; font-weight:700;}
+.uni-h4 {font-size: 36rpx; font-weight:700;}
+.uni-h5 {font-size: 28rpx; color: #8f8f94;}
+.uni-h6 {font-size: 24rpx; color: #8f8f94;}
+.uni-bold{font-weight:bold;}
+
+/* 文本溢出隐藏 */
+.uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
+
+/* 竖向百分百按钮 */
+.uni-btn-v{
+	padding:10rpx 0;
+}
+.uni-btn-v button{margin:20rpx 0;}
+
+/* 表单 */
+.uni-form-item{
+	display:flex;
+	width:100%;
+	padding:10rpx 0;
+}
+.uni-form-item .title{
+	padding:10rpx 25rpx;
+}
+.uni-label {
+	width: 210rpx;
+	word-wrap: break-word;
+	word-break: break-all;
+	text-indent:20rpx;
+}
+.uni-input {
+	height: 50rpx;
+	padding: 15rpx 25rpx;
+	line-height:50rpx;
+	font-size:28rpx;
+	background:#FFF;
+	flex: 1;
+}
+radio-group, checkbox-group{
+	width:100%;
+}
+radio-group label, checkbox-group label{
+	padding-right:20rpx;
+}
+.uni-form-item .with-fun{
+	display:flex;
+	flex-wrap:nowrap;
+	background:#FFFFFF;
+}
+.uni-form-item .with-fun .uni-icon{
+	width:40px;
+	height:80rpx;
+	line-height:80rpx;
+	flex-shrink:0;
+}
+
+/* loadmore */
+.uni-loadmore{
+	height:80rpx;
+	line-height:80rpx;
+	text-align:center;
+	padding-bottom:30rpx;
+}
+/*数字角标*/
+/* .uni-badge,
+.uni-badge-default {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: rgba(0, 0, 0, .15);
+} */
+.uni-badge.uni-badge-inverted {
+	padding: 0 5px 0 0;
+	color: #929292;
+	background-color: transparent
+}
+.uni-badge-primary {
+	color: #fff;
+	background-color: #007aff
+}
+.uni-badge-blue.uni-badge-inverted,
+.uni-badge-primary.uni-badge-inverted {
+	color: #007aff;
+	background-color: transparent
+}
+.uni-badge-green,
+.uni-badge-success {
+	color: #fff;
+	background-color: #4cd964;
+}
+.uni-badge-green.uni-badge-inverted,
+.uni-badge-success.uni-badge-inverted {
+	color: #4cd964;
+	background-color: transparent
+}
+.uni-badge-warning,
+.uni-badge-yellow {
+	color: #fff;
+	background-color: #f0ad4e
+}
+.uni-badge-warning.uni-badge-inverted,
+.uni-badge-yellow.uni-badge-inverted {
+	color: #f0ad4e;
+	background-color: transparent
+}
+.uni-badge-danger,
+.uni-badge-red {
+	color: #fff;
+	background-color: #dd524d
+}
+.uni-badge-danger.uni-badge-inverted,
+.uni-badge-red.uni-badge-inverted {
+	color: #dd524d;
+	background-color: transparent
+}
+.uni-badge-purple,
+.uni-badge-royal {
+	color: #fff;
+	background-color: #8a6de9
+}
+.uni-badge-purple.uni-badge-inverted,
+.uni-badge-royal.uni-badge-inverted {
+	color: #8a6de9;
+	background-color: transparent
+}
+
+/*折叠面板 */
+.uni-collapse-content {
+	height: 0;
+	width: 100%;
+	overflow: hidden;
+}
+.uni-collapse-content.uni-active {
+	height: auto;
+}
+
+/*卡片视图 */
+.uni-card {
+	background: #fff;
+	border-radius: 8rpx;
+	margin:20rpx 0;
+	position: relative;
+	/* box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3); */
+}
+.uni-card-content {
+	font-size: 30rpx;
+}
+.uni-card-content.image-view{
+    width: 100%;
+    margin: 0;
+}
+.uni-card-content-inner {
+	position: relative;
+	padding: 30rpx;
+}
+.uni-card-footer,
+.uni-card-header {
+	position: relative;
+	display: flex;
+	min-height: 50rpx;
+	padding: 20rpx 30rpx;
+	justify-content: space-between;
+	align-items: center;
+}
+.uni-card-header {
+	font-size: 36rpx;
+}
+.uni-card-footer {
+	color: #6d6d72;
+}
+.uni-card-footer:before,
+.uni-card-header:after {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 2rpx;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+.uni-card-header:after {
+	top: auto;
+	bottom: 0;
+}
+.uni-card-media {
+	justify-content: flex-start;
+}
+.uni-card-media-logo {
+	height: 84rpx;
+	width: 84rpx;
+	margin-right: 20rpx;
+}
+.uni-card-media-body {
+	height: 84rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+.uni-card-media-text-top {
+	line-height: 36rpx;
+	font-size: 34rpx;
+}
+.uni-card-media-text-bottom {
+	line-height: 30rpx;
+	font-size: 28rpx;
+	color: #8f8f94;
+}
+.uni-card-link {
+	color: #007AFF;
+}
+
+/* 列表 */
+.uni-list {
+	background-color: #FFFFFF;
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.uni-list:after {
+	position: absolute;
+	z-index: 10;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+/* .uni-list::before {
+	position: absolute;
+	z-index: 10;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+} */
+.uni-list-cell {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+.uni-list-cell-hover {
+	background-color: #eee;
+}
+.uni-list-cell-pd {
+	padding: 22rpx 30rpx;
+}
+.uni-list-cell-left {
+    white-space: nowrap;
+	font-size:28rpx;
+	padding: 0 30rpx;
+}
+.uni-list-cell-db,
+.uni-list-cell-right {
+	flex: 1;
+}
+.uni-list-cell::after {
+	position: absolute;
+	z-index: 3;
+	right: 0;
+	bottom: 0;
+	left: 30rpx;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+.uni-list .uni-list-cell:last-child::after {
+	height: 0rpx;
+}
+.uni-list-cell-last.uni-list-cell::after {
+	height: 0rpx;
+}
+.uni-list-cell-divider {
+	position: relative;
+	display: flex;
+	color: #999;
+	background-color: #f7f7f7;
+	padding:15rpx 20rpx;
+}
+.uni-list-cell-divider::before {
+	position: absolute;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+.uni-list-cell-divider::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0rpx;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+.uni-list-cell-navigate {
+	font-size:30rpx;
+	padding: 22rpx 30rpx;
+	line-height: 48rpx;
+	position: relative;
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	flex: 1;
+	justify-content: space-between;
+	align-items: center;
+}
+.uni-list-cell-navigate {
+	padding-right: 36rpx;
+}
+.uni-navigate-badge {
+	padding-right: 50rpx;
+}
+.uni-list-cell-navigate.uni-navigate-right:after {
+	font-family: uniicons;
+	content: '\e583';
+	position: absolute;
+	right: 24rpx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+.uni-list-cell-navigate.uni-navigate-bottom:after {
+	font-family: uniicons;
+	content: '\e581';
+	position: absolute;
+	right: 24rpx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+.uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
+	font-family: uniicons;
+	content: '\e580';
+	position: absolute;
+	right: 24rpx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+.uni-collapse.uni-list-cell {
+	flex-direction: column;
+}
+.uni-list-cell-navigate.uni-active {
+	background: #eee;
+}
+.uni-list.uni-collapse {
+	box-sizing: border-box;
+	height: 0;
+	overflow: hidden;
+}
+.uni-collapse .uni-list-cell {
+	padding-left: 20rpx;
+}
+.uni-collapse .uni-list-cell::after {
+	left: 52rpx;
+}
+.uni-list.uni-active {
+	height: auto;
+}
+
+/* 三行列表 */
+.uni-triplex-row {
+	display: flex;
+	flex: 1;
+	width: 100%;
+	box-sizing: border-box;
+	flex-direction: row;
+	padding: 22rpx 30rpx;
+}
+.uni-triplex-right,
+.uni-triplex-left {
+	display: flex;
+	flex-direction: column;
+}
+.uni-triplex-left {
+	width: 84%;
+}
+.uni-triplex-left .uni-title{
+	padding:8rpx 0;
+}
+.uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
+.uni-triplex-right {
+	width: 16%;
+	text-align: right;
+}
+
+/* 图文列表 */
+.uni-media-list {
+	padding: 22rpx 30rpx;
+	box-sizing: border-box;
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+}
+.uni-navigate-right.uni-media-list {
+	padding-right: 74rpx;
+}
+.uni-pull-right {
+	flex-direction: row-reverse;
+}
+.uni-pull-right>.uni-media-list-logo {
+	margin-right: 0rpx;
+	margin-left: 20rpx;
+}
+.uni-media-list-logo {
+	height: 84rpx;
+	width: 84rpx;
+	margin-right: 20rpx;
+}
+.uni-media-list-logo image {
+	height: 100%;
+	width: 100%;
+}
+.uni-media-list-body {
+	height: 84rpx;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+	overflow: hidden;
+}
+.uni-media-list-text-top {
+	width: 100%;
+	line-height: 36rpx;
+	font-size: 30rpx;
+}
+.uni-media-list-text-bottom {
+	width: 100%;
+	line-height: 30rpx;
+	font-size: 26rpx;
+	color: #8f8f94;
+}
+
+/* 九宫格 */
+.uni-grid-9 {
+	background: #f2f2f2;
+	width: 750rpx;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	border-top: 2rpx solid #eee;
+}
+.uni-grid-9-item {
+	width: 250rpx;
+	height: 200rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-bottom: 2rpx solid;
+	border-right: 2rpx solid;
+	border-color: #eee;
+	box-sizing: border-box;
+}
+.no-border-right {
+	border-right: none;
+}
+.uni-grid-9-image {
+	width: 100rpx;
+	height: 100rpx;
+}
+.uni-grid-9-text {
+	width: 250rpx;
+	line-height: 4rpx;
+	height: 40rpx;
+	text-align: center;
+	font-size: 30rpx;
+}
+.uni-grid-9-item-hover {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+/* 上传 */
+.uni-uploader {
+	flex: 1;
+	flex-direction: column;
+}
+.uni-uploader-head {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+.uni-uploader-info {
+	color: #B2B2B2;
+}
+.uni-uploader-body {
+	margin-top: 16rpx;
+}
+.uni-uploader__files {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.uni-uploader__file {
+	margin: 10rpx;
+	width: 210rpx;
+	height: 210rpx;
+}
+.uni-uploader__img {
+	display: block;
+	width: 210rpx;
+	height: 210rpx;
+}
+.uni-uploader__input-box {
+	position: relative;
+	margin:10rpx;
+	width: 208rpx;
+	height: 208rpx;
+	border: 2rpx solid #D9D9D9;
+}
+.uni-uploader__input-box:before,
+.uni-uploader__input-box:after {
+	content: " ";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	background-color: #D9D9D9;
+}
+.uni-uploader__input-box:before {
+	width: 4rpx;
+	height: 79rpx;
+}
+.uni-uploader__input-box:after {
+	width: 79rpx;
+	height: 4rpx;
+}
+.uni-uploader__input-box:active {
+	border-color: #999999;
+}
+.uni-uploader__input-box:active:before,
+.uni-uploader__input-box:active:after {
+	background-color: #999999;
+}
+.uni-uploader__input {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+
+/*问题反馈*/
+.feedback-title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20rpx;
+	color: #8f8f94;
+	font-size: 28rpx;
+}
+.feedback-star-view.feedback-title {
+	justify-content: flex-start;
+	margin: 0;
+}
+.feedback-quick {
+	position: relative;
+	padding-right: 40rpx;
+}
+.feedback-quick:after {
+	font-family: uniicons;
+	font-size: 40rpx;
+	content: '\e581';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+.feedback-body {
+	background: #fff;
+}
+.feedback-textare {
+	height: 200rpx;
+	font-size: 34rpx;
+	line-height: 50rpx;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 20rpx 30rpx 0;
+}
+.feedback-input {
+	font-size: 34rpx;
+	height: 50rpx;
+	min-height: 50rpx;
+	padding: 15rpx 20rpx;
+	line-height: 50rpx;
+}
+.feedback-uploader {
+	padding: 22rpx 20rpx;
+}
+.feedback-star {
+	font-family: uniicons;
+	font-size: 40rpx;
+	margin-left: 6rpx;
+}
+.feedback-star-view {
+	margin-left: 20rpx;
+}
+.feedback-star:after {
+	content: '\e408';
+}
+.feedback-star.active {
+	color: #FFB400;
+}
+.feedback-star.active:after {
+	content: '\e438';
+}
+.feedback-submit {
+	background: #007AFF;
+	color: #FFFFFF;
+	margin: 20rpx;
+}
+
+/* input group */
+.uni-input-group {
+	position: relative;
+	padding: 0;
+	border: 0;
+	background-color: #fff;
+}
+
+.uni-input-group:before {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 2rpx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-group:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 2rpx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	font-size:28rpx;
+	padding: 22rpx 30rpx;
+	justify-content: space-between;
+}
+
+.uni-input-group .uni-input-row:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 30rpx;
+	height: 2rpx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row label {
+	line-height: 70rpx;
+}
+
+/* textarea */
+.uni-textarea{
+	width:100%;
+	background:#FFF;
+}
+.uni-textarea textarea{
+	width:96%;
+	padding:18rpx 2%;
+	line-height:1.6;
+	font-size:28rpx;
+	height:150rpx;
+}
+
+/* tab bar */
+.uni-tab-bar {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	overflow: hidden;
+	height: 100%;
+}
+
+.uni-tab-bar .list {
+	width: 750rpx;
+	height: 100%;
+}
+
+.uni-swiper-tab {
+	width: 100%;
+	white-space: nowrap;
+	line-height: 100rpx;
+	height: 100rpx;
+	border-bottom: 1px solid #c8c7cc;
+}
+
+.swiper-tab-list {
+	font-size: 30rpx;
+	width: 150rpx;
+	display: inline-block;
+	text-align: center;
+	color: #555;
+}
+
+.uni-tab-bar .active {
+	color: #007AFF;
+}
+
+.uni-tab-bar .swiper-box {
+	flex: 1;
+	width: 100%;
+	height: calc(100% - 100rpx);
+}
+
+.uni-tab-bar-loading{
+	padding:20rpx 0;
+}
+
+/* comment */
+.uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
+.uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}
+.uni-comment-face{width:70rpx; height:70rpx; border-radius:100%; margin-right:20rpx; flex-shrink:0; overflow:hidden;}
+.uni-comment-face image{width:100%; border-radius:100%;}
+.uni-comment-body{width:100%;}
+.uni-comment-top{line-height:1.5em; justify-content:space-between;}
+.uni-comment-top text{color:#0A98D5; font-size:24rpx;}
+.uni-comment-date{line-height:38rpx; flex-direction:row; justify-content:space-between; display:flex !important; flex-grow:1;}
+.uni-comment-date view{color:#666666; font-size:24rpx; line-height:38rpx;}
+.uni-comment-content{line-height:1.6em; font-size:28rpx; padding:8rpx 0;}
+.uni-comment-replay-btn{background:#FFF; font-size:24rpx; line-height:28rpx; padding:5rpx 20rpx; border-radius:30rpx; color:#333 !important; margin:0 10rpx;}
+
+/* swiper msg */
+.uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
+.uni-swiper-msg-icon{width:50rpx; margin-right:20rpx;}
+.uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
+.uni-swiper-msg swiper{width:100%; height:50rpx;}
+.uni-swiper-msg swiper-item{line-height:50rpx;}
+
+/* product */
+.uni-product-list {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.uni-product {
+    padding: 20rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.image-view {
+    height: 330rpx;
+    width: 330rpx;
+	margin:12rpx 0;
+}
+
+.uni-product-image {
+    height: 330rpx;
+    width: 330rpx;
+}
+
+.uni-product-title {
+    width: 300rpx;
+    word-break: break-all;
+    display: -webkit-box;
+    overflow: hidden;
+	line-height:1.5;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.uni-product-price {
+	margin-top:10rpx;
+    font-size: 28rpx;
+	line-height:1.5;
+    position: relative;
+}
+
+.uni-product-price-original {
+    color: #e80080;
+}
+
+.uni-product-price-favour {
+    color: #888888;
+    text-decoration: line-through;
+    margin-left: 10rpx;
+}
+
+.uni-product-tip {
+    position: absolute;
+    right: 10rpx;
+    background-color: #ff3333;
+    color: #ffffff;
+    padding: 0 10rpx;
+    border-radius: 5rpx;
+}
+
+/* timeline */
+.uni-timeline {
+		margin: 35rpx 0;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+
+
+	.uni-timeline-item {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		padding-bottom: 20rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+
+	}
+
+	.uni-timeline-item .uni-timeline-item-keynode {
+		width: 160rpx;
+		flex-shrink: 0;
+		box-sizing: border-box;
+		padding-right: 20rpx;
+		text-align: right;
+		line-height: 65rpx;
+	}
+
+	.uni-timeline-item .uni-timeline-item-divider {
+		flex-shrink: 0;
+		position: relative;
+		width: 30rpx;
+		height: 30rpx;
+		top: 15rpx;
+		border-radius: 50%;
+		background-color: #bbb;
+	}
+
+
+
+	.uni-timeline-item-divider::before,
+	.uni-timeline-item-divider::after {
+		position: absolute;
+		left: 15rpx;
+		width: 1rpx;
+		height: 100vh;
+		content: '';
+		background: inherit;
+	}
+
+	.uni-timeline-item-divider::before {
+		bottom: 100%;
+	}
+
+	.uni-timeline-item-divider::after {
+		top: 100%;
+	}
+
+
+	.uni-timeline-last-item .uni-timeline-item-divider:after {
+		display: none;
+	}
+
+	.uni-timeline-first-item .uni-timeline-item-divider:before {
+		display: none;
+	}
+
+	.uni-timeline-item .uni-timeline-item-content {
+		padding-left: 20rpx;
+	}
+
+	.uni-timeline-last-item .bottom-border::after{
+		display: none;
+	}
+
+	.uni-timeline-item-content .datetime{
+		color: #CCCCCC;
+	}
+
+	/* 自定义节点颜色 */
+	.uni-timeline-last-item .uni-timeline-item-divider{
+		background-color: #1AAD19;
+	}
+
+
+/* uni-icon */
+
+.uni-icon {
+	font-family: uniicons;
+	font-size: 24px;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.uni-icon.uni-active {
+	color: #007aff;
+}
+
+.uni-icon-contact:before {
+	content: '\e100';
+}
+
+.uni-icon-person:before {
+	content: '\e101';
+}
+
+.uni-icon-personadd:before {
+	content: '\e102';
+}
+
+.uni-icon-contact-filled:before {
+	content: '\e130';
+}
+
+.uni-icon-person-filled:before {
+	content: '\e131';
+}
+
+.uni-icon-personadd-filled:before {
+	content: '\e132';
+}
+
+.uni-icon-phone:before {
+	content: '\e200';
+}
+
+.uni-icon-email:before {
+	content: '\e201';
+}
+
+.uni-icon-chatbubble:before {
+	content: '\e202';
+}
+
+.uni-icon-chatboxes:before {
+	content: '\e203';
+}
+
+.uni-icon-phone-filled:before {
+	content: '\e230';
+}
+
+.uni-icon-email-filled:before {
+	content: '\e231';
+}
+
+.uni-icon-chatbubble-filled:before {
+	content: '\e232';
+}
+
+.uni-icon-chatboxes-filled:before {
+	content: '\e233';
+}
+
+.uni-icon-weibo:before {
+	content: '\e260';
+}
+
+.uni-icon-weixin:before {
+	content: '\e261';
+}
+
+.uni-icon-pengyouquan:before {
+	content: '\e262';
+}
+
+.uni-icon-chat:before {
+	content: '\e263';
+}
+
+.uni-icon-qq:before {
+	content: '\e264';
+}
+
+.uni-icon-videocam:before {
+	content: '\e300';
+}
+
+.uni-icon-camera:before {
+	content: '\e301';
+}
+
+.uni-icon-mic:before {
+	content: '\e302';
+}
+
+.uni-icon-location:before {
+	content: '\e303';
+}
+
+.uni-icon-mic-filled:before,
+.uni-icon-speech:before {
+	content: '\e332';
+}
+
+.uni-icon-location-filled:before {
+	content: '\e333';
+}
+
+.uni-icon-micoff:before {
+	content: '\e360';
+}
+
+.uni-icon-image:before {
+	content: '\e363';
+}
+
+.uni-icon-map:before {
+	content: '\e364';
+}
+
+.uni-icon-compose:before {
+	content: '\e400';
+}
+
+.uni-icon-trash:before {
+	content: '\e401';
+}
+
+.uni-icon-upload:before {
+	content: '\e402';
+}
+
+.uni-icon-download:before {
+	content: '\e403';
+}
+
+.uni-icon-close:before {
+	content: '\e404';
+}
+
+.uni-icon-redo:before {
+	content: '\e405';
+}
+
+.uni-icon-undo:before {
+	content: '\e406';
+}
+
+.uni-icon-refresh:before {
+	content: '\e407';
+}
+
+.uni-icon-star:before {
+	content: '\e408';
+}
+
+.uni-icon-plus:before {
+	content: '\e409';
+}
+
+.uni-icon-minus:before {
+	content: '\e410';
+}
+
+.uni-icon-circle:before,
+.uni-icon-checkbox:before {
+	content: '\e411';
+}
+
+.uni-icon-close-filled:before,
+.uni-icon-clear:before {
+	content: '\e434';
+}
+
+.uni-icon-refresh-filled:before {
+	content: '\e437';
+}
+
+.uni-icon-star-filled:before {
+	content: '\e438';
+}
+
+.uni-icon-plus-filled:before {
+	content: '\e439';
+}
+
+.uni-icon-minus-filled:before {
+	content: '\e440';
+}
+
+.uni-icon-circle-filled:before {
+	content: '\e441';
+}
+
+.uni-icon-checkbox-filled:before {
+	content: '\e442';
+}
+
+.uni-icon-closeempty:before {
+	content: '\e460';
+}
+
+.uni-icon-refreshempty:before {
+	content: '\e461';
+}
+
+.uni-icon-reload:before {
+	content: '\e462';
+}
+
+.uni-icon-starhalf:before {
+	content: '\e463';
+}
+
+.uni-icon-spinner:before {
+	content: '\e464';
+}
+
+.uni-icon-spinner-cycle:before {
+	content: '\e465';
+}
+
+.uni-icon-search:before {
+	content: '\e466';
+}
+
+.uni-icon-plusempty:before {
+	content: '\e468';
+}
+
+.uni-icon-forward:before {
+	content: '\e470';
+}
+
+.uni-icon-back:before,
+.uni-icon-left-nav:before {
+	content: '\e471';
+}
+
+.uni-icon-checkmarkempty:before {
+	content: '\e472';
+}
+
+.uni-icon-home:before {
+	content: '\e500';
+}
+
+.uni-icon-navigate:before {
+	content: '\e501';
+}
+
+.uni-icon-gear:before {
+	content: '\e502';
+}
+
+.uni-icon-paperplane:before {
+	content: '\e503';
+}
+
+.uni-icon-info:before {
+	content: '\e504';
+}
+
+.uni-icon-help:before {
+	content: '\e505';
+}
+
+.uni-icon-locked:before {
+	content: '\e506';
+}
+
+.uni-icon-more:before {
+	content: '\e507';
+}
+
+.uni-icon-flag:before {
+	content: '\e508';
+}
+
+.uni-icon-home-filled:before {
+	content: '\e530';
+}
+
+.uni-icon-gear-filled:before {
+	content: '\e532';
+}
+
+.uni-icon-info-filled:before {
+	content: '\e534';
+}
+
+.uni-icon-help-filled:before {
+	content: '\e535';
+}
+
+.uni-icon-more-filled:before {
+	content: '\e537';
+}
+
+.uni-icon-settings:before {
+	content: '\e560';
+}
+
+.uni-icon-list:before {
+	content: '\e562';
+}
+
+.uni-icon-bars:before {
+	content: '\e563';
+}
+
+.uni-icon-loop:before {
+	content: '\e565';
+}
+
+.uni-icon-paperclip:before {
+	content: '\e567';
+}
+
+.uni-icon-eye:before {
+	content: '\e568';
+}
+
+.uni-icon-arrowup:before {
+	content: '\e580';
+}
+
+.uni-icon-arrowdown:before {
+	content: '\e581';
+}
+
+.uni-icon-arrowleft:before {
+	content: '\e582';
+}
+
+.uni-icon-arrowright:before {
+	content: '\e583';
+}
+
+.uni-icon-arrowthinup:before {
+	content: '\e584';
+}
+
+.uni-icon-arrowthindown:before {
+	content: '\e585';
+}
+
+.uni-icon-arrowthinleft:before {
+	content: '\e586';
+}
+
+.uni-icon-arrowthinright:before {
+	content: '\e587';
+}
+
+.uni-icon-pulldown:before {
+	content: '\e588';
+}
+
+.uni-icon-scan:before {
+    content: "\e612";
+}
+
+/* 分界线 */
+.uni-divider{
+    height: 110rpx;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+    position: relative;
+}
+.uni-divider__content{
+    font-size: 28rpx;
+    color: #999;
+    padding: 0 20rpx;
+    position: relative;
+    z-index: 101;
+    background: #F4F5F6;
+}
+.uni-divider__line{
+    background-color: #CCCCCC;
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    z-index: 100;
+    top: 50%;
+    left: 0;
+    transform: translateY(50%);
+}
+
+.left-win-active text{
+	color: #007AFF !important;
+}
diff --git a/packages/tdesign-uniapp/app/index.html b/packages/tdesign-uniapp/app/index.html
new file mode 100644
index 000000000..208afd9c1
--- /dev/null
+++ b/packages/tdesign-uniapp/app/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+	<script src="/static/web/image-resize-3.0.1.min.js"></script>
+	<script src="/static/web/quill-1.3.7.min.js"></script>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/packages/tdesign-uniapp/app/main.js b/packages/tdesign-uniapp/app/main.js
new file mode 100644
index 000000000..c81eec61a
--- /dev/null
+++ b/packages/tdesign-uniapp/app/main.js
@@ -0,0 +1,31 @@
+/* eslint-disable import/no-unresolved */
+import App from './App';
+import store from './store';
+import './style/app.less';
+import DemoBaseMixin from './mixins/demo-base.js';
+
+
+import {
+  createSSRApp,
+} from 'vue';
+import * as Pinia from 'pinia';
+import Vuex from 'vuex';
+
+export function createApp() {
+  const app = createSSRApp(App);
+  app.use(store);
+  app.use(Pinia.createPinia());
+  app.config.globalProperties.$adpid = '1111111111';
+  app.config.globalProperties.$backgroundAudioData = {
+    playing: false,
+    playTime: 0,
+    formattedPlayTime: '00:00:00',
+  };
+
+  app.mixin(DemoBaseMixin);
+  return {
+    app,
+    Vuex, // 如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex
+    Pinia, // 此处必须将 Pinia 返回
+  };
+}
diff --git a/packages/tdesign-uniapp/app/manifest.json b/packages/tdesign-uniapp/app/manifest.json
new file mode 100644
index 000000000..45c294211
--- /dev/null
+++ b/packages/tdesign-uniapp/app/manifest.json
@@ -0,0 +1,229 @@
+{
+    "name": "TDesign UniApp",
+    "appid": "__UNI__4771450",
+    "description": "应用描述",
+    "versionName": "1.0.0",
+    "versionCode": "100",
+    "transformPx": false,
+    "app-plus": {
+        "usingComponents": true,
+        "nvueCompiler": "uni-app",
+        "nvueStyleCompiler": "uni-app",
+        "compilerVersion": 3,
+        "nvueLaunchMode": "fast",
+        "splashscreen": {
+            "alwaysShowBeforeRender": true,
+            "waiting": true,
+            "autoclose": true,
+            "delay": 0
+        },
+        "modules": {
+            "OAuth": {},
+            "Payment": {},
+            "Push": {},
+            "Share": {},
+            "Speech": {},
+            "VideoPlayer": {}
+        },
+        "distribute": {
+            "android": {
+                "permissions": [
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
+                    "<uses-permission android:name=\"android.permission.INTERNET\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_SMS\"/>",
+                    "<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
+                    "<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
+                    "<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
+                ]
+            },
+            "ios": {
+                "UIBackgroundModes": [
+                    "audio"
+                ],
+                "urlschemewhitelist": [
+                    "baidumap",
+                    "iosamap"
+                ],
+                "dSYMs": false
+            },
+            "sdkConfigs": {
+                "speech": {}
+            },
+            "orientation": [
+                "portrait-primary"
+            ],
+            "icons": {
+                "android": {
+                    "hdpi": "/static/logo-tdesign.png",
+                    "xhdpi": "/static/logo-tdesign.png",
+                    "xxhdpi": "/static/logo-tdesign.png",
+                    "xxxhdpi": "/static/logo-tdesign.png"
+                },
+                "ios": {
+                    "appstore": "",
+                    "iphone": {
+                        "app@2x": "/static/logo-tdesign.png",
+                        "app@3x": "/static/logo-tdesign.png",
+                        "spotlight@2x": "/static/logo-tdesign.png",
+                        "spotlight@3x": "/static/logo-tdesign.png",
+                        "settings@2x": "/static/logo-tdesign.png",
+                        "settings@3x": "/static/logo-tdesign.png",
+                        "notification@2x": "/static/logo-tdesign.png",
+                        "notification@3x": "/static/logo-tdesign.png"
+                    },
+                    "ipad": {
+                        "app": "/static/logo-tdesign.png",
+                        "app@2x": "/static/logo-tdesign.png",
+                        "proapp@2x": "/static/logo-tdesign.png",
+                        "spotlight": "/static/logo-tdesign.png",
+                        "spotlight@2x": "/static/logo-tdesign.png",
+                        "settings": "/static/logo-tdesign.png",
+                        "settings@2x": "/static/logo-tdesign.png",
+                        "notification": "/static/logo-tdesign.png",
+                        "notification@2x": "/static/logo-tdesign.png"
+                    }
+                }
+            }
+        },
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "quickapp": {},
+    "quickapp-native": {
+        "icon": "/static/logo-tdesign.png",
+        "package": "com.example.demo",
+        "features": [
+            {
+                "name": "system.clipboard"
+            }
+        ]
+    },
+    "quickapp-webview": {
+        "icon": "/static/logo-tdesign.png",
+        "package": "com.example.demo",
+        "minPlatformVersion": 1070,
+        "versionName": "1.0.0",
+        "versionCode": 100
+    },
+    "mp-weixin": {
+        "appid": "",
+        "setting": {
+            "urlCheck": false
+        },
+        "usingComponents": true,
+        "permission": {
+            "scope.userLocation": {
+                "desc": "演示定位能力"
+            }
+        },
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "mp-alipay": {
+        "usingComponents": true,
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "mp-baidu": {
+        "usingComponents": true,
+        "uniStatistics": {
+            "enable": true
+        },
+        "dynamicLib": {
+            "editorLib": {
+                "provider": "swan-editor"
+            }
+        }
+    },
+    "mp-toutiao": {
+        "usingComponents": true,
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "mp-jd": {
+        "usingComponents": true,
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "h5": {
+        "template": "template.h5.html",
+        "router": {
+            "mode": "history",
+            "base": ""
+        },
+        "sdkConfigs": {
+            "maps": {
+                "qqmap": {
+                    "key": "TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU"
+                }
+            }
+        },
+        "async": {
+            "timeout": 20000
+        },
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "vueVersion": "3",
+    "mp-kuaishou": {
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "mp-lark": {
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "mp-qq": {
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "quickapp-webview-huawei": {
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "quickapp-webview-union": {
+        "uniStatistics": {
+            "enable": true
+        }
+    },
+    "uniStatistics": {
+        "version": "2",
+        "enable": true
+    }
+}
diff --git a/packages/tdesign-uniapp/app/mixins/demo-base.js b/packages/tdesign-uniapp/app/mixins/demo-base.js
new file mode 100644
index 000000000..f321205b1
--- /dev/null
+++ b/packages/tdesign-uniapp/app/mixins/demo-base.js
@@ -0,0 +1,32 @@
+export default {
+  computed: {
+    gCustomNavbarHeight() {
+      let result = 0;
+      // #ifdef H5 || APP-PLUS
+      result = 48;
+      // #endif
+      return result;
+    },
+    isH5() {
+      let result = false;
+      // #ifdef H5
+      result = true;
+      // #endif
+      return result;
+    },
+    isMP() {
+      let result = false;
+      // #ifdef MP
+      result = true;
+      // #endif
+      return result;
+    },
+    isMPAlipay() {
+      let result = false;
+      // #ifdef MP-ALIPAY
+      result = true;
+      // #endif
+      return result;
+    },
+  },
+};
diff --git a/packages/tdesign-uniapp/app/mixins/skyline.js b/packages/tdesign-uniapp/app/mixins/skyline.js
new file mode 100644
index 000000000..7f98ea242
--- /dev/null
+++ b/packages/tdesign-uniapp/app/mixins/skyline.js
@@ -0,0 +1 @@
+export { default } from 'tdesign-uniapp/mixins/skyline.js';
diff --git a/packages/tdesign-uniapp/app/package.json b/packages/tdesign-uniapp/app/package.json
new file mode 100644
index 000000000..81cd8a537
--- /dev/null
+++ b/packages/tdesign-uniapp/app/package.json
@@ -0,0 +1,129 @@
+{
+  "id": "tdesign-uniapp",
+  "name": "tdesign-uniapp",
+  "displayName": "tdesign-uniapp 示例工程",
+  "version": "3.4.9",
+  "description": "tdesign-uniapp 示例工程",
+  "scripts": {},
+  "repository": "https://github.com/novlan1/tdesign-uniapp.git",
+  "keywords": [
+    "tdesign-uniapp",
+    "uni-app"
+  ],
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+  },
+  "homepage": "https://uwayfly.com/tdesign-uniapp/",
+  "dependencies": {},
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "uniapp-template-project",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "√",
+        "aliyun": "√",
+        "alipay": "x"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "√",
+            "jd": "√",
+            "harmony": "√",
+            "qq": "√",
+            "lark": "√"
+          },
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  },
+  "uni-app": {
+    "scripts": {
+      "mp-dingtalk": {
+        "title": "钉钉小程序",
+        "env": {
+          "UNI_PLATFORM": "mp-alipay"
+        },
+        "define": {
+          "MP-DINGTALK": true
+        }
+      },
+      "hello-uniapp-demo": {
+        "title": "hello-uniapp 演示网站",
+        "env": {
+          "UNI_PLATFORM": "h5"
+        },
+        "define": {
+          "H5-DEMO": true
+        }
+      }
+    }
+  },
+  "engines": {
+    "HBuilderX": "^3.1.0",
+    "uni-app": "^4.03",
+    "uni-app-x": ""
+  }
+}
diff --git a/packages/tdesign-uniapp/app/pages.json b/packages/tdesign-uniapp/app/pages.json
new file mode 100644
index 000000000..fc86ccbc2
--- /dev/null
+++ b/packages/tdesign-uniapp/app/pages.json
@@ -0,0 +1,475 @@
+{
+	"pages": [
+		{
+			"path": "pages/home/home"
+		},
+		{
+			"path": "pages/home/navigate-fail/index"
+		},
+		{
+			"path": "pages-more/result/result-page"
+		},
+		{
+			"path": "pages-more/indexes/custom/index"
+		},
+		{
+			"path": "pages-more/indexes/base/index"
+		},
+		{
+			"path": "pages-more/side-bar/base/index"
+		},
+		{
+			"path": "pages-more/side-bar/switch/index"
+		},
+		{
+			"path": "pages-more/side-bar/with-icon/index"
+		},
+		{
+			"path": "pages-more/side-bar/custom/index"
+		},
+		{
+			"path": "pages-more/button/button"
+		},
+		{
+			"path": "pages-more/divider/divider"
+		},
+		{
+			"path": "pages-more/fab/fab"
+		},
+		{
+			"path": "pages-more/icon/icon"
+		},
+		{
+			"path": "pages-more/link/link"
+		},
+		{
+			"path": "pages-more/col/col"
+		},
+		{
+			"path": "pages-more/back-top/back-top"
+		},
+		{
+			"path": "pages-more/drawer/drawer"
+		},
+		{
+			"path": "pages-more/indexes/indexes"
+		},
+		{
+			"path": "pages-more/navbar/navbar"
+		},
+		{
+			"path": "pages-more/side-bar/side-bar"
+		},
+		{
+			"path": "pages-more/steps/steps"
+		},
+		{
+			"path": "pages-more/tab-bar/tab-bar"
+		},
+		{
+			"path": "pages-more/tabs/tabs"
+		},
+		{
+			"path": "pages-more/calendar/calendar"
+		},
+		{
+			"path": "pages-more/cascader/cascader"
+		},
+		{
+			"path": "pages-more/checkbox/checkbox"
+		},
+		{
+			"path": "pages-more/color-picker/color-picker"
+		},
+		{
+			"path": "pages-more/date-time-picker/date-time-picker"
+		},
+		{
+			"path": "pages-more/form/form"
+		},
+		{
+			"path": "pages-more/input/input"
+		},
+		{
+			"path": "pages-more/picker/picker"
+		},
+		{
+			"path": "pages-more/radio/radio"
+		},
+		{
+			"path": "pages-more/rate/rate"
+		},
+		{
+			"path": "pages-more/search/search"
+		},
+		{
+			"path": "pages-more/slider/slider"
+		},
+		{
+			"path": "pages-more/stepper/stepper"
+		},
+		{
+			"path": "pages-more/switch/switch"
+		},
+		{
+			"path": "pages-more/textarea/textarea"
+		},
+		{
+			"path": "pages-more/tree-select/tree-select"
+		},
+		{
+			"path": "pages-more/upload/upload"
+		},
+		{
+			"path": "pages-more/avatar/avatar"
+		},
+		{
+			"path": "pages-more/badge/badge"
+		},
+		{
+			"path": "pages-more/cell/cell"
+		},
+		{
+			"path": "pages-more/collapse/collapse"
+		},
+		{
+			"path": "pages-more/count-down/count-down"
+		},
+		{
+			"path": "pages-more/empty/empty"
+		},
+		{
+			"path": "pages-more/footer/footer"
+		},
+		{
+			"path": "pages-more/grid/grid"
+		},
+		{
+			"path": "pages-more/image/image"
+		},
+		{
+			"path": "pages-more/image-viewer/image-viewer"
+		},
+		{
+			"path": "pages-more/progress/progress"
+		},
+		{
+			"path": "pages-more/qrcode/qrcode"
+		},
+		{
+			"path": "pages-more/result/result"
+		},
+		{
+			"path": "pages-more/skeleton/skeleton"
+		},
+		{
+			"path": "pages-more/sticky/sticky"
+		},
+		{
+			"path": "pages-more/swiper/swiper"
+		},
+		{
+			"path": "pages-more/tag/tag"
+		},
+		{
+			"path": "pages-more/watermark/watermark"
+		},
+		{
+			"path": "pages-more/action-sheet/action-sheet"
+		},
+		{
+			"path": "pages-more/dialog/dialog"
+		},
+		{
+			"path": "pages-more/dropdown-menu/dropdown-menu"
+		},
+		{
+			"path": "pages-more/guide/guide"
+		},
+		{
+			"path": "pages-more/loading/loading"
+		},
+		{
+			"path": "pages-more/message/message"
+		},
+		{
+			"path": "pages-more/notice-bar/notice-bar"
+		},
+		{
+			"path": "pages-more/overlay/overlay"
+		},
+		{
+			"path": "pages-more/popup/popup"
+		},
+		{
+			"path": "pages-more/pull-down-refresh/pull-down-refresh"
+		},
+		{
+			"path": "pages-more/swipe-cell/swipe-cell"
+		},
+		{
+			"path": "pages-more/toast/toast"
+		}
+	],
+	"globalStyle": {
+		"pageOrientation": "portrait",
+		"navigationBarTitleText": "TDesign UniApp",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8",
+		"navigationStyle": "custom"
+	},
+	"condition": {
+		"current": 0,
+		"list": [
+			{
+				"name": "button",
+				"pathName": "pages-more/button/button"
+			},
+			{
+				"name": "divider",
+				"pathName": "pages-more/divider/divider"
+			},
+			{
+				"name": "fab",
+				"pathName": "pages-more/fab/fab"
+			},
+			{
+				"name": "icon",
+				"pathName": "pages-more/icon/icon"
+			},
+			{
+				"name": "link",
+				"pathName": "pages-more/link/link"
+			},
+			{
+				"name": "layout",
+				"pathName": "pages-more/col/col"
+			},
+			{
+				"name": "back-top",
+				"pathName": "pages-more/back-top/back-top"
+			},
+			{
+				"name": "drawer",
+				"pathName": "pages-more/drawer/drawer"
+			},
+			{
+				"name": "indexes",
+				"pathName": "pages-more/indexes/indexes"
+			},
+			{
+				"name": "navbar",
+				"pathName": "pages-more/navbar/navbar"
+			},
+			{
+				"name": "side-bar",
+				"pathName": "pages-more/side-bar/side-bar"
+			},
+			{
+				"name": "steps",
+				"pathName": "pages-more/steps/steps"
+			},
+			{
+				"name": "tab-bar",
+				"pathName": "pages-more/tab-bar/tab-bar"
+			},
+			{
+				"name": "tabs",
+				"pathName": "pages-more/tabs/tabs"
+			},
+			{
+				"name": "calendar",
+				"pathName": "pages-more/calendar/calendar"
+			},
+			{
+				"name": "cascader",
+				"pathName": "pages-more/cascader/cascader"
+			},
+			{
+				"name": "checkbox",
+				"pathName": "pages-more/checkbox/checkbox"
+			},
+			{
+				"name": "color-picker",
+				"pathName": "pages-more/color-picker/color-picker"
+			},
+			{
+				"name": "date-time-picker",
+				"pathName": "pages-more/date-time-picker/date-time-picker"
+			},
+			{
+				"name": "form",
+				"pathName": "pages-more/form/form"
+			},
+			{
+				"name": "input",
+				"pathName": "pages-more/input/input"
+			},
+			{
+				"name": "picker",
+				"pathName": "pages-more/picker/picker"
+			},
+			{
+				"name": "radio",
+				"pathName": "pages-more/radio/radio"
+			},
+			{
+				"name": "rate",
+				"pathName": "pages-more/rate/rate"
+			},
+			{
+				"name": "search",
+				"pathName": "pages-more/search/search"
+			},
+			{
+				"name": "slider",
+				"pathName": "pages-more/slider/slider"
+			},
+			{
+				"name": "stepper",
+				"pathName": "pages-more/stepper/stepper"
+			},
+			{
+				"name": "switch",
+				"pathName": "pages-more/switch/switch"
+			},
+			{
+				"name": "textarea",
+				"pathName": "pages-more/textarea/textarea"
+			},
+			{
+				"name": "tree-select",
+				"pathName": "pages-more/tree-select/tree-select"
+			},
+			{
+				"name": "upload",
+				"pathName": "pages-more/upload/upload"
+			},
+			{
+				"name": "avatar",
+				"pathName": "pages-more/avatar/avatar"
+			},
+			{
+				"name": "badge",
+				"pathName": "pages-more/badge/badge"
+			},
+			{
+				"name": "cell",
+				"pathName": "pages-more/cell/cell"
+			},
+			{
+				"name": "collapse",
+				"pathName": "pages-more/collapse/collapse"
+			},
+			{
+				"name": "count-down",
+				"pathName": "pages-more/count-down/count-down"
+			},
+			{
+				"name": "empty",
+				"pathName": "pages-more/empty/empty"
+			},
+			{
+				"name": "footer",
+				"pathName": "pages-more/footer/footer"
+			},
+			{
+				"name": "grid",
+				"pathName": "pages-more/grid/grid"
+			},
+			{
+				"name": "image",
+				"pathName": "pages-more/image/image"
+			},
+			{
+				"name": "image-viewer",
+				"pathName": "pages-more/image-viewer/image-viewer"
+			},
+			{
+				"name": "progress",
+				"pathName": "pages-more/progress/progress"
+			},
+			{
+				"name": "q-r-code",
+				"pathName": "pages-more/qrcode/qrcode"
+			},
+			{
+				"name": "result",
+				"pathName": "pages-more/result/result"
+			},
+			{
+				"name": "skeleton",
+				"pathName": "pages-more/skeleton/skeleton"
+			},
+			{
+				"name": "sticky",
+				"pathName": "pages-more/sticky/sticky"
+			},
+			{
+				"name": "swiper",
+				"pathName": "pages-more/swiper/swiper"
+			},
+			{
+				"name": "tag",
+				"pathName": "pages-more/tag/tag"
+			},
+			{
+				"name": "watermark",
+				"pathName": "pages-more/watermark/watermark"
+			},
+			{
+				"name": "action-sheet",
+				"pathName": "pages-more/action-sheet/action-sheet"
+			},
+			{
+				"name": "dialog",
+				"pathName": "pages-more/dialog/dialog"
+			},
+			{
+				"name": "dropdown-menu",
+				"pathName": "pages-more/dropdown-menu/dropdown-menu"
+			},
+			{
+				"name": "guide",
+				"pathName": "pages-more/guide/guide"
+			},
+			{
+				"name": "loading",
+				"pathName": "pages-more/loading/loading"
+			},
+			{
+				"name": "message",
+				"pathName": "pages-more/message/message"
+			},
+			{
+				"name": "notice-bar",
+				"pathName": "pages-more/notice-bar/notice-bar"
+			},
+			{
+				"name": "overlay",
+				"pathName": "pages-more/overlay/overlay"
+			},
+			{
+				"name": "popup",
+				"pathName": "pages-more/popup/popup"
+			},
+			{
+				"name": "pull-down-refresh",
+				"pathName": "pages-more/pull-down-refresh/pull-down-refresh"
+			},
+			{
+				"name": "swipe-cell",
+				"pathName": "pages-more/swipe-cell/swipe-cell"
+			},
+			{
+				"name": "toast",
+				"pathName": "pages-more/toast/toast"
+			}
+		]
+	},
+	"easycom": {
+		"custom": {
+			"^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
+		}
+	}
+}
diff --git a/packages/tdesign-uniapp/app/static/customicons.css b/packages/tdesign-uniapp/app/static/customicons.css
new file mode 100644
index 000000000..14c111961
--- /dev/null
+++ b/packages/tdesign-uniapp/app/static/customicons.css
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "customicons"; /* Project id 2878519 */
+  src:url('/static/customicons.ttf') format('truetype');
+}
+
+.customicons {
+  font-family: "customicons" !important;
+}
+
+.youxi:before {
+  content: "\e60e";
+}
+
+.wenjian:before {
+  content: "\e60f";
+}
+
+.zhuanfa:before {
+  content: "\e610";
+}
diff --git a/packages/tdesign-uniapp/app/static/customicons.ttf b/packages/tdesign-uniapp/app/static/customicons.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..a3c8ab9f22d18d5d605503eda314e5d2a31fdfc0
GIT binary patch
literal 2416
zcmd^A%WoS+82@H>?IgD2#K~q|hdkDH>bQB>&f0O>=25F@5|GlQX`8fENObGiPEx<*
zIHl>yDoB8U!lAtvAt9k$df<Y}AqXKZATCr~cu7dfp<Fm{YixeA-l)*_KVWue<~P6Z
zG4p*hJ4=j+>{KC<B6Am(Ppj`8y+y>1gT1(TA*@aKU;Z8A_c6Yj%<0Ab$%Pq=pKvad
z-A@0oKRQn&-bGc{Qu=Do+{0<;!iM5&AR2xX-va&;wQns~zS&B(8f^c>xHVfy>O!2V
zuzd$(TTZ`OWbJet@*^0lc|DhE{bb?+k@a&TAyX`DmiI><szgm)kY6CIU98k9^qK^(
zwVK2@^PeIa4A>vrzUh9wW#VtLONPQPcgH{GfcG%HCo!>rVIv8K7)wAe(G9W~W6s*}
z5MlL3;c^>AXo`e0v-20pnbpgA>V(Zx`M)vCu4i=kuX|?D<5C8Ok=0}+EcYWmqwucq
z9k>tcJ$p<VgQY+g5$p@fx%A8`?e01ET8(^=_%l_Y#@G0?2z)}Gsd{e+cy!$7kRc*=
z*|a$imRk>@N7UdY3K%*@M)z9zF77#b3%z<I0{6stEdTf7FcJ_m(}1k(IqQ|@bg!je
z`AOSrtyg0Yh(4t%_Mgat6Zr@ya*%pxhLV(}Eo4@6D{iI3B|Div&>!fxHdq^cAvWrY
zjm5{}(W73UQ-HKbh-#b|iyQiGC8|vcP=ZB(`A1^`pS7F$eO6f+XC1Pl#U~jwSS-Z6
zoYdm6fFb2Ts4UG+2aoy3eJ4h)WHMJqPWZ<C$AZ(dOAOz^{GIGcbz*U#zu!GL)H$#+
z&^a{d?(ZL1oKR!YOINC2Cp>+ggv;Y`8Ne>v?K0a?dV7a@d%xnHstS*S!80>UHNq5P
zcT^Cf-6E!7v@~-j7+e|8elTC7!G#HLb7P0n=yWzJ9gWT2iG@K%Yp-64j#evA{TmZG
zWJPwUm;la=mS?v1K>SNwq9YWdlSr<&p0z19Zlu(!^)Mr=JSzZ7)T_mjuz=s|>kl!c
zB@l~)Q)H`{IH*LH!r`TeI(%*{!Lr8Sps0GoVXsi(ZM7mhk8cX!KdH!FU9!mAbI=zO
zP#q6W0#>gAiixoIV3!-P``)ng_~q*Du3#5l{`J@HiH~s`$rPj0xaF>5@3G|gDTd`t
z2}&<h<Q8THC)76@yN?+7x$xmk@W&~%GnZ^d1OY@+KO8*B9)>`saAq1brJKoCUtp5O
z;^K01ht1M-_H0vw)#X+iuR9#q9aYKR<`5;DCw%I1?(O?_+2N4wrR4G}CnNsOmL?^|
z?r41nJAO^`vqW__v>3uGEQc3DyKNq9yhk|YJmP6uSZGw-E=vQP_BpOMS9fi$j;5~R
zmD%KpS-b3(?Z^BHZ8{R|>1<(-tEK86+@Y}Cr!9vT!UsEbw=A*jY1`o&ywm0}zN$9*
z)x4>Q+QHOsI)0nBn^>R*ddb8hc%O+S-~kg`@aNM^Yz04QVjB(OyQ}-O!($Prh)GSD
zCqQqSm{BWzW@3Sy^o5B<@ZXwP0{+Rw7E);6#8&VJCbrQEYc{c+0xUUQO6ld)s(Ni(
zT~8MB=|aAI*q={jwz7KZaCq3Sq)MCXg}gcviX2jNseGz*=w|aqMk|-oYPwX&sk88x
z%4Q2{u~gVdCCj0;a=Cai9Om<IK9nrvXqrltBAv=;S4pL7w2gKhS5blTls4M(bK~>S
z&fu!b!m{+7^jYf_XqRXcdfcZ<BltWc&sohuD{p8%yP8e>oHN+IGM+T-)9_ZH9MG(}
zz7$rH1y-?vT($u}Noa>?&9ExsItb%AjOS24WW<@{KiqoZ|NR#gi3v<(60?v^AJ&GW
i+l8&0>&^ObY<MK{Mk>FtuIC+Gpxs*A((`E@KK=o#Msw}}

literal 0
HcmV?d00001

diff --git a/packages/tdesign-uniapp/app/static/logo-tdesign.png b/packages/tdesign-uniapp/app/static/logo-tdesign.png
new file mode 100644
index 0000000000000000000000000000000000000000..266d7ddde3266dfae8f3f119e929a81f802cf30d
GIT binary patch
literal 127137
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
C6cTU%

literal 0
HcmV?d00001

diff --git a/packages/tdesign-uniapp/app/static/uni.ttf b/packages/tdesign-uniapp/app/static/uni.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..60a1968d08cc6056c70b5402b2effac43c6f96a3
GIT binary patch
literal 26164
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

literal 0
HcmV?d00001

diff --git a/packages/tdesign-uniapp/app/store/counter.js b/packages/tdesign-uniapp/app/store/counter.js
new file mode 100644
index 000000000..c16908831
--- /dev/null
+++ b/packages/tdesign-uniapp/app/store/counter.js
@@ -0,0 +1,18 @@
+/* eslint-disable import/no-unresolved */
+import { defineStore } from 'pinia';
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    count: 0,
+  }),
+  getters: {
+    doubleCount: state => state.count * 2,
+  },
+  actions: {
+    increment() {
+      this.count += 1;
+    },
+    decrement() {
+      this.count -= 1;
+    },
+  },
+});
diff --git a/packages/tdesign-uniapp/app/store/index.js b/packages/tdesign-uniapp/app/store/index.js
new file mode 100644
index 000000000..d4d96b741
--- /dev/null
+++ b/packages/tdesign-uniapp/app/store/index.js
@@ -0,0 +1,142 @@
+/* eslint-disable import/no-unresolved */
+
+import { createStore } from 'vuex';
+const store = createStore({
+  state: {
+    hasLogin: false,
+    isUniverifyLogin: false,
+    loginProvider: '',
+    openid: null,
+    testvuex: false,
+    colorIndex: 0,
+    colorList: ['#FF0000', '#00FF00', '#0000FF'],
+    noMatchLeftWindow: true,
+    active: 'componentPage',
+    leftWinActive: '/pages/component/view/view',
+    activeOpen: '',
+    menu: [],
+    univerifyErrorMsg: '',
+    // vuex测试例使用
+    username: 'foo',
+    sex: '男',
+    age: 10,
+  },
+  mutations: {
+    login(state, provider) {
+      state.hasLogin = true;
+      state.loginProvider = provider;
+    },
+    logout(state) {
+      state.hasLogin = false;
+      state.openid = null;
+    },
+    setOpenid(state, openid) {
+      state.openid = openid;
+    },
+    setTestTrue(state) {
+      state.testvuex = true;
+    },
+    setTestFalse(state) {
+      state.testvuex = false;
+    },
+    setColorIndex(state, index) {
+      state.colorIndex = index;
+    },
+    setMatchLeftWindow(state, matchLeftWindow) {
+      state.noMatchLeftWindow = !matchLeftWindow;
+    },
+    setActive(state, tabPage) {
+      state.active = tabPage;
+    },
+    setLeftWinActive(state, leftWinActive) {
+      state.leftWinActive = leftWinActive;
+    },
+    setActiveOpen(state, activeOpen) {
+      state.activeOpen = activeOpen;
+    },
+    setMenu(state, menu) {
+      state.menu = menu;
+    },
+    setUniverifyLogin(state, payload) {
+      typeof payload !== 'boolean' ? payload = !!payload : '';
+      state.isUniverifyLogin = payload;
+    },
+    setUniverifyErrorMsg(state, payload = '') {
+      state.univerifyErrorMsg = payload;
+    },
+    // vuex测试例使用
+    increment(state) {
+      state.age += 1;
+    },
+    incrementTen(state, payload) {
+      state.age += payload.amount;
+    },
+    resetAge(state) {
+      state.age = 10;
+    },
+  },
+  getters: {
+    currentColor(state) {
+      return state.colorList[state.colorIndex];
+    },
+    // vuex测试例使用
+    doubleAge(state) {
+      return state.age * 2;
+    },
+  },
+  actions: {
+    // vuex测试例使用
+    incrementAsync(context, payload) {
+      context.commit('incrementTen', payload);
+    },
+    // lazy loading openid
+    async getUserOpenId({
+      commit,
+      state,
+    }) {
+      return await new Promise((resolve, reject) => {
+        if (state.openid) {
+          resolve(state.openid);
+        } else {
+          uni.login({
+            success: () => {
+              commit('login');
+              setTimeout(() => { // 模拟异步请求服务器获取 openid
+                const openid = '123456789';
+                console.log(`uni.request mock openid[${openid}]`);
+                commit('setOpenid', openid);
+                resolve(openid);
+              }, 1000);
+            },
+            fail: (err) => {
+              console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err);
+              reject(err);
+            },
+          });
+        }
+      });
+    },
+    getPhoneNumber(_, univerifyInfo) {
+      return new Promise((resolve, reject) => {
+        uni.request({
+          url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/univerify-login',
+          method: 'POST',
+          data: univerifyInfo,
+          success: (res) => {
+            const { data } = res;
+            if (data.success) {
+              resolve(data.phoneNumber);
+            } else {
+              reject(res);
+            }
+          },
+          fail: (err) => {
+            reject(err);
+          },
+        });
+      });
+    },
+  },
+});
+
+export default store;
diff --git a/packages/tdesign-uniapp/app/style/app.less b/packages/tdesign-uniapp/app/style/app.less
new file mode 100644
index 000000000..a1b3bf85e
--- /dev/null
+++ b/packages/tdesign-uniapp/app/style/app.less
@@ -0,0 +1,60 @@
+@import 'tdesign-uniapp-raw/common/style/_variables.less';
+@import 'tdesign-uniapp/common/style/theme/index.less';
+
+@font-face {
+  font-family: 'TCloudNumber';
+  src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTZcMD6UAAB/UAAAAHEdERUYAKQBRAAAftAAAAB5PUy8yaSQEaAAAAVgAAABgY21hcHhknPwAAALcAAACFmdhc3D//wADAAAfrAAAAAhnbHlm71OdawAABYwAABNoaGVhZBwlK2YAAADcAAAANmhoZWEIYAOBAAABFAAAACRobXR4hAYRwgAAAbgAAAEkbG9jYbX8u2YAAAT0AAAAmG1heHAAwgB3AAABOAAAACBuYW1lQleYFwAAGPQAAAYAcG9zdAz/DUMAAB70AAAAuAABAAAAAQKPg0b06l8PPPUACwPoAAAAANeCVUMAAAAA4YOP8wAe/xAD4gOsAAAACAACAAAAAAAAAAEAAAO0/xQAyAQlAAAAAAPiAAEAAAAAAAAAAAAAAAAAAABHAAEAAABLAFgACgAAAAAAAQACAB4ABgAAAGQAAAAAAAAABAHkAZAABQAAAooCWAAAAEsCigJYAAABXgAyATMAAAAAAAAAAAAAAACAAAADAAAAQAAAAAAAAAAAVUtXTgDAACAiZQO0/xQAyAO0AOwAAAABAAAAAAIAAsgAAAAgAAECTgBuAAAAAAFNAAAA8AAAARgAUAHgAF8CFgArA0gAQwL4ADgBGABQAU4AOAFOADgB4AA1AhYAQwEYADcCFgBDARgAUAHgAB4CFgA+AhYAbwIWACsCFgAuAhYAJgIWADECFgAxAhYATwIWAC4CFgAuARgAUAEYACgCFgBDAhYAQwIWAEMCFgA5AvgALwFOAC8B4AAeAU4ALwIWADsCFgBDAU4AIAFOAHMBTgAgAhYAQwEYAFAB4AAsAhYAQwIWAEMBGABQAeAAKwIWADcCFgBLAhYAQwEYADwBGAA8ARgANwHgAFAB4ABQAeAAUAIWAJMCFgAeBCUAQwHgAIgB4ACIAhYALwIWAEMCFgBDAhYAQwIWAEMC+AAgAhYARwBDAEMAQwBDAAAAAwAAAAMAAAAcAAEAAAAAARAAAwABAAAAHAAEAPQAAAA4ACAABAAYACMAQABfAH4AoQCsALEAtwC7AL8A1wD3IBogHiAiICYgMCA6IgIiDyISIhoiHiIrIkgiYCJl//8AAAAgACUAWwB7AKAAqwCxALcAuwC/ANcA9yAYIBwgIiAmIDAgOSICIg8iESIaIh4iKyJIImAiZP///+P/4v/I/60AAP+C/37/ef92/3P/XP894B3gHOAZ4BbgDeAF3j7eMt4x3ireJ94b3f/d6N3lAAEAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADACwAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAMEBQYABwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIyQlJicAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoKSorAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7AAAAAAAAAEgAAEUvSUoAAEBCQQBGAAAAAAAyLC5EAEcALTE8AwAAAAAAAAA4OTU2NAAAAAAAPj8AAAAwNzo9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkAGQAZABkAHgAjACwAQwBZgF0AZgBvAHeAfIB/gIMAhgCJgJYAmgCmgLIAuIDEgNIA1gDpAPaA+wEAAQWBCoEQAR2BOgE+gUKBRwFMAU8BYIFkAXWBfAGBAYgBjQGUAZcBnoGsAbKBuQG8gcABwwHIAc0B0YHVAdwB/AIAggUCF4IeAiQCJ4IugkWCTIJYAl6CZgJtAAKAG7/EAHkA6wAAwAHAAsAFwAdACcAKwAxAD0ASAAABSERIQEVMzUHIzUzJxUzNTMVIzUjFTM1JxUjFTM1JxUzFSMVMzUzNScjNTMnFTM1IzUnFTMVIxUzNSM1MzUDFTMHFTM1IzczNQHk/ooBdv7hxCd2dk8oJ3YnxCedxMROTnZOdicnTsROdU1OxE5OxFNTxHhSJvAEnPzbhYVeN/NCGzdehYWQTih2RycrJ1InSCsoeyhTmCcsJycsJ/yKJzgnJzgnAAAAAAIAUAAAAMgCyAADAAcAABMDIwMTFSM1yAhoCHh4Asj+KAHY/bB4eAACAF8B2AGBAsgAAwAHAAATMzcjFzM3I19aHniqWh54Adjw8PAAAAAABAArAAAB6wLIAAMABwALAA8AAAEVITUFFSE1EwMjEyEDIxMB6/5UAZj+VOBkaGQBNGRoZAIAaGjUaGgBnP04Asj9OALIAAAABQBD//oDBgLOAA8AEwAfAC8AOwAAAD4BNTQuASMiDgEVFB4BMwEjATMCJjU0NjMyFhUUBiMAPgE1NC4BIyIOARUUHgEzLgE1NDYzMhYVFAYjAQhHKipHKipHKipHKgHEaP5laEQmJhsbJiYbAbdHKipHKipHKipHKhsmJhsbJiYbAZgqRyoqRyoqRyoqRyoBMP04AfImGxsmJhsbJv4IKkcqKkcqKkcqKkcqWiYbGyYmGxsmAAAAAAMAOAAAAsgCyAARACEAOwAAEj4BMzIeARUUDgEHASMBLgE1HgIzMj4BNTQuASMiDgEVAA4BIyIuATU0PgEzFSIOARUUHgEzMj4BJzOnMVMxMVMxIjslATl4/okYGmgVJBQUJBUVJBQUJBUBjESWZU6GUE+HTjJXMzNXMkZmKxJoAkRTMTFTMShIMwv+mwGWGUEjFCQVFSQUFCQVFSQU/uuhXT5pPTxoPmghOSAhOSI4b08AAAEAUAHYAMgCyAADAAATMzcjUFoeeAHY8AAAAAABADj/wwEWAwYAFAAAEg4BFRQeARczJy4CNTQ+ATc2NyOFMB0dMCloFB0gFRUgHQoKaAKzd4dRUYd2UzRKYHlKSnpjSBoZAAABADj/wwEWAwYAFAAAEhceAhUUDgEPATM+AjU0LgEnI0IKHSAVFSAdFGgpMB0dMCloAu0aSGN6Skp5YEo0U3aHUVGHd1MAAAABADUAtAGrAjAAEQAANzMnFzcnNycHNyMXJwcXBxc3w1oCYy1mZi1jAloCYy1mZi1jtHQ8Tjg4Tj11dT1OODhOPAAAAAEAQwCdAdMCLQALAAATFTMVMzUzNSM1IxVDlGiUlGgBmWiUlGiUlAABADf/iADXAHgAAwAAFzM3IzdaRnh48AABAEMBMQHTAZkAAwAAEyE1IUMBkP5wATFoAAAAAQBQAAAAyAB4AAMAADsBNSNQeHh4AAAAAQAe/8MBwgMGAAMAAAEjATMBwmj+xGkDBvy9AAIAPv/6AdgCzgARAB8AAAE0LgEjIg4BFREUHgEzMj4BNSMUBiMiJjURNDYzMhYVAdg3Xjg4Xjc3Xjg4XjdoOyoqOzsqKjsCATheNzdeOP7GOF43N144KkBAKgE6KkBAKgAAAAABAG8AAAFlAs8ABQAAExU3ETMRb45oAkFuSP3lAs8AAAEAKwAAAegCzgAdAAATNjc+ATMyFx4BFRQHASE1IxM2NTQmJyYjIgYHBgejAxAQLhkhHBUYE/7HAb36yyYvKzZBM1weIAUCBhwXFRgTEC4ZIRz+QWIBIjZBM1weJi8rLDgAAAABAC7/+QHeAsgAHAAAAR4CFRQOASMiJic3HgEzMjY1NCYrASc3IzUhFQEXN1s1O2U8S3YTZAo/JzBERDBZOcD0AYEBsAU+YDg8ZTtcRhslMEQwMEQ55GJSAAAAAAEAJgAAAfICyAAOAAAhMzUzNSM1IxUjEyMDFSEBQGhKSmik5m3vARp5YsXFAe39/k0AAAABADH/9QHwAsQAHgAAEzM2MzIWFRQGIyImJwceATMyPgE1NC4BIyIHNzM1IU9wISoyR0cyJz8NZhh2Sz5qPj5qPiQeHtv+0wE6GkcyMkctJCREVj5qPj5qPgqrYgAAAAACADH/+QHpAsgAFQAhAAAABxMjAwYHBhUUHgEzMj4BNTQmJyYjAiY1NDYzMhYVFAYjAQIWiXSrEwcLO2U8PGU7OzIzPDBERDAwREQwAbECARn+oCodJiY8ZTs7ZTw8ZR0e/rBEMDBERDAwRAABAE8AAAH3AsgABQAAMyMTITUh9HHj/ukBqAJkZAAAAAMALv/1AeYC0wAbACcAMwAAEgYVFB4BMzI+ATU0Jic+ATU0LgEjIg4BFRQWFzYmNTQ2MzIWFRQGIwImNTQ2MzIWFRQGI1krO2U8PGU7KyUfIjdeODheNyIfYjs7Kio7OyowREQwMEREMAFXVzI7ZDo6ZDsyVx4cTSs3XTY2XTcrTRwyOSkpOTkpKTn+tkIvL0JCLy9CAAAAAgAuAAAB5gLTABUAIQAAADcDMxM2NzY1NC4BIyIOARUUFhcWMxIWFRQGIyImNTQ2MwEVFol0qxAKCztlPDxlOzsyMzwwREQwMEREMAEbAv7jAWQiJSclPGU7O2U8PGUdHgFQRDAwREQwMEQAAgBQAL4AyAImAAMABwAAEzM1IxEzNSNQeHh4eAGueP6YeAAAAgAo/4gAyAImAAMABwAAExUjNQMzNyPIeChaRngCJnh4/WLwAAAAAAIAQwBgAdMCaAADAAcAAAEFNSURJTUFAdP+cAGQ/nABkAIA0GjQ/fjQaNAAAgBDAMgB0wIAAAMABwAAEyE1IREhNSFDAZD+cAGQ/nABmGj+yGgAAAIAQwBgAdMCaAADAAcAAAEVJTUFFQU1AdP+cAGQ/nABmGjQaNBo0GgAAAAAAgA5AAAB3wLOABsAHwAAEzY3PgEzMhceARUWDwEzNzYnNCYnJiMiBgcGBwEVIzWhAxAQLhogHBUYARSSeG8oAi8rNkEzXB4hBQEPeAIGHBcVGBMQLhkhHM+UNUIzXB4mLys2OP5yeHgAAAAAAgAv//cCxQLIADsASQAAABYVFAYHDgE3PgI3Ni4BBw4CBwYeARcWNjcHDgEnLgI3PgIzMh4BBw4CBwYnDgEnLgI3PgEzDgEWFxY2NzU+ATcmBgcB5TQPDg4HDhkpGgQEIUo4OmxPDxEPPTQ/4EkSVtNQSGQjFxh1nVVVdjUICjtOJzsZC0QqJSgDEhdmOVoLBw8RGw8IEQUeLg0CIi0oGDYoJiUBATtYLCtCJQEBO2pESnJHCQsbEWgYEgkIX6RpbplNRXRGW4FDBQYmGhMMCkNgNURYvi8hAwMbJAEVPBsHJh0AAQAv/8MBHwMGAAcAAAEVIxEzFSMRAR94ePADBmj9jWgDQwAAAQAe/8MBwgMGAAMAAAUBIwEBwv7EaAE7PQND/L0AAAABAC//wwEfAwYABwAABSM1MxEjNTMBH/B4ePA9aAJzaAAAAAACADsBlAHbAsgAAwAHAAATMwMjEzMTI9donGicaJxoAsj+zAE0/swAAQBDAAAB0wBoAAMAADMhNSFDAZD+cGgAAQAg/8MBLgMGAC4AAAQmJyY2PwE0LgEjMj4BNScuATc+ATM1IgYHDgIVFA4BIxUyHgEVFB4BFx4BMzUBCioLCAIEAhwkDQ0kHAIEAggMKSQ3Px0dGwYVHQsLHRUGGx0dPzcNJiMYWi8aJzEVFTEnGi9aGCMnMBkjIk5JNRYeD2gPHxY1SU4iIxkwAAABAHMAAADbAsgAAwAAExEjEdtoAsj9OALIAAAAAQAg/8MBLgMGAC4AABY2Nz4CNTQ+ATM1Ii4BNTQuAScuASMVMhYXFgYPARQeATMiDgEVFx4BBw4BIxVXPx0dGwYVHQsLHRUGGx0dPzckKQwIAgQCHCQNDSQcAgQCCAsqJD0ZIyJOSTUWHw9oDx4WNUlOIiMZMCcjGFovGicxFRUxJxovWhgjJjAAAAABAEMBEQHTAbgADQAAEiIHFTYyFxYyNzUGIifdZTU1ZS4uZjQ0Zi4BuCBoICAfH2gfHwAAAgBQ/4gAyAI+AAMABwAAEzMTIxMVIzVYaAh4eHgBTv46ArZ4eAAAAAIALABgAbUCaAAFAAsAABsBIwMTMxsBIwMTM5RoaGhoaFFoaGhoaAFk/vwBBAEE/vz+/AEEAQQAAgBDAMgB0wIAAAMABwAAASE1ITERIxEB0/5wAZB4AZho/sgBOAAAAAIAQwBgAdMCaAADAA8AACUhNSEBFTMVMzUzNSM1IxUB0/5wAZD+cJRolJRoYGgBHmiCgmiCggAAAQBQASgAyAGgAAMAABMVIzXIeAGgeHgAAgArAGABtAJoAAUACwAAARMDIxMDIxMDIxMDAUxoaGhoaFFoaGhoaAJo/vz+/AEEAQT+/P78AQQBBAAAAgA3/3AB3QI+ABsAHwAAJQYHDgEjIicuATUmPwEjBwYXFBYXFjMyNjc2NwE1MxUBdQMQEC4aIBwVGAEUknhvKAIvKzZBM1weIQX+8Xg4HBcVGBMQLhkhHM+UNUIzXB4mLys2OAGOeHgAAAAAAQBLAKUBywIlAAsAAAEnBycHFwcXNxc3JwHLSXd3SXZ2SXd3SXYB3El2dkl3d0l2dkl3AAMAQwCOAdMCPAADAAcACwAAEyE1ISUVIzUTFSM1QwGQ/nABBHh4eAExaKN4eP7KeHgAAAABADwB2ADcAsgAAwAAEyMHM9xaRngCyPAAAAAAAQA8AdgA3ALIAAMAABMzNyM8WkZ4AdjwAAAAAAEAN/+IANcAeAADAAAXMzcjN1pGeHjwAAIAUAHYAZACyAADAAcAABMjBzM3Iwcz8FpGeMhaRngCyPDw8AAAAAACAFAB2AGQAsgAAwAHAAATMzcjBzM3I/BaRnjIWkZ4Adjw8PAAAAAAAgBQ/4gBkAB4AAMABwAAFzM3IxczNyNQWkZ4eFpGeHjw8PAAAQCTAOwBgwHcAAMAAAEVIzUBg/AB3PDwAAAAAAQAHgAAAfgAeAADAAcACwAPAAA7ATUjFTM1IxczNSMXMzUjHnh4eHixeHixeHh4eHh4eHh4AAAABwBD//oD4gLOAA8AEwAfAC8AOwBLAFcAAAA+ATU0LgEjIg4BFRQeATMBIwEzAiY1NDYzMhYVFAYjAD4BNTQuASMiDgEVFB4BMy4BNTQ2MzIWFRQGIwQ+ATU0LgEjIg4BFRQeATMuATU0NjMyFhUUBiMBCEcqKkcqKkcqKkcqAcRo/mVoRCYmGxsmJhsBt0cqKkcqKkcqKkcqGyYmGxsmJhsBBkcqKkcqKkcqKkcqGyYmGxsmJhsBmCpHKipHKipHKipHKgEw/TgB8iYbGyYmGxsm/ggqRyoqRyoqRyoqRypaJhsbJiYbGyZaKkcqKkcqKkcqKkcqWiYbGyYmGxsmAAEAiABgAVgCaAAFAAAbASMDEzPwaGhoaGgBZP78AQQBBAAAAAEAiABgAVgCaAAFAAAbAQMjEwPwaGhoaGgCaP78/vwBBAEEAAIALwAAAecCyAAiADIAADIuATU0PgEzMhYXNTQuASMiDgEHIz4CMzIeARURFRQOASMmHgEzMj4BNTQuASMiDgEVz2U7O2U8IDoaHzYfHDEgBWkFPWA5PGU7O2U8dB82Hx82Hx82Hx82HztlPDxlOxEQVR82HxkrGzdbNTtlPP7yAjxlO702Hx82Hx82Hx82HwAAAAADAEMAAAHTAsgAAwAHAAsAAAEVITUhESMRIxEjEQHT/nABkGjAaALIaGj9OALI/TgCyAAAAQBDAAAB0wLIAAsAABM1IRUhFwchFSE1N0MBkP7oyMgBGP5wyAJgaGj8/Gho/AAAAQBDATEB0wGZAAMAABMhNSFDAZD+cAExaAAAAAMAQwAAAdMCyAADAAcACwAAAQMjEwMTIwMzFSM1AdN4aHiAPGg8NHQCyP04Asj+a/7NATNoaAAABAAgAGAC2AJoAA8AHwAvAD8AADYuATU0PgEzMh4BFRQOASM+AjU0LgEjIg4BFRQeATMWLgE1ND4BMzIeARUUDgEjPgI1NC4BIyIOARUUHgEzs1w3N1w2NVw2Nlw1GisaGisaGi0aGi0a8lw3N1w2NVw2Nlw1GisaGisaGi0aGi0aYEd4RkV3R0d3RUZ4R2grSCopSCoqSCkqSCtoR3hGRXdHR3dFRnhHaCtIKilIKipIKSpIKwAAAAMARwAAAc8CyAADAAcACwAAAQcjNzMDIxsBByM3Ac8M0AxoUGhQJAzQDALIaGj9OALI/aBoaAAAAgBDAKkB0wIgAA0AGwAAEiIHFTYyFxYyNzUGIicGIgcVNjIXFjI3NQYiJ91lNTVlLi5mNDRmLi5lNTVlLi5mNDRmLgIgIGggIB8faB8fsCBoICAfH2gfHwAAAAADAEMAYAHTAmgAAwAHAAsAABMhNSERITUhFzMTI0MBkP5wAZD+cCR40HgBmGj+yGjQAggAAwBDAGAB0wJoAAMABwALAAABBTUlESU1BREhNSEB0/5wAZD+cAGQ/nABkAIAgmiC/pSCaIL+/GgAAAAAAwBDAGAB0wJoAAMABwALAAABFSU1BRUFNQUVITUB0/5wAZD+cAGQ/nAB5miCaIJogmicaGgAAAAAABoBPgABAAAAAAAAACIARgABAAAAAAABAAwAgwABAAAAAAACAAcAoAABAAAAAAADAB8A6AABAAAAAAAEABQBMgABAAAAAAAFACEBiwABAAAAAAAGABQB1wABAAAAAAAIABUCGAABAAAAAAALABoCZAABAAAAAAANAJADoQABAAAAAAAOABoEaAABAAAAAAAQAAwEnQABAAAAAAARAAcEugADAAEECQAAAEQAAAADAAEECQABABgAaQADAAEECQACAA4AkAADAAEECQADAD4AqAADAAEECQAEACgBCAADAAEECQAFAEIBRwADAAEECQAGACgBrQADAAEECQAIACoB7AADAAEECQALADQCLgADAAEECQANASACfwADAAEECQAOADQEMgADAAEECQAQABgEgwADAAEECQARAA4EqgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMQAtAHAAcgBlAHMAZQBuAHQAIABUAEQAZQBzAGkAZwBuAABDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCBURGVzaWduAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAAVENsb3VkTnVtYmVyAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAAxAC4AMAAxADAAOwBVAEsAVwBOADsAVABDAGwAbwB1AGQATgB1AG0AYgBlAHIALQBSAGUAZwB1AGwAYQByAAAxLjAxMDtVS1dOO1RDbG91ZE51bWJlci1SZWd1bGFyAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAgAFIAZQBnAHUAbABhAHIAAFRDbG91ZE51bWJlciBSZWd1bGFyAABWAGUAcgBzAGkAbwBuACAAMQAuADAAMQAwADsARwBsAHkAcABoAHMAIAAzAC4AMQAuADEAIAAoADMAMQAzADUAKQAAVmVyc2lvbiAxLjAxMDtHbHlwaHMgMy4xLjEgKDMxMzUpAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAtAFIAZQBnAHUAbABhAHIAAFRDbG91ZE51bWJlci1SZWd1bGFyAABUAGUAbgBjAGUAbgB0ACAAVABEAGUAcwBpAGcAbgAgAE8AdABlAGEAbQAAVGVuY2VudCBURGVzaWduIE90ZWFtAABoAHQAdABwADoALwAvAHQAZABlAHMAaQBnAG4ALgB0AGUAbgBjAGUAbgB0AC4AYwBvAG0AAGh0dHA6Ly90ZGVzaWduLnRlbmNlbnQuY29tAABUAGgAaQBzACAARgBvAG4AdAAgAFMAbwBmAHQAdwBhAHIAZQAgAGkAcwAgAGwAaQBjAGUAbgBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAUwBJAEwAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALAAgAFYAZQByAHMAaQBvAG4AIAAxAC4AMQAuACAAVABoAGkAcwAgAGwAaQBjAGUAbgBzAGUAIABpAHMAIABhAHYAYQBpAGwAYQBiAGwAZQAgAHcAaQB0AGgAIABhACAARgBBAFEAIABhAHQAOgAgAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAVGhpcyBGb250IFNvZnR3YXJlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBTSUwgT3BlbiBGb250IExpY2Vuc2UsIFZlcnNpb24gMS4xLiBUaGlzIGxpY2Vuc2UgaXMgYXZhaWxhYmxlIHdpdGggYSBGQVEgYXQ6IGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAABUAEMAbABvAHUAZABOAHUAbQBiAGUAcgAAVENsb3VkTnVtYmVyAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAACAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAEsAAAABAAIAAwAEAAUABgAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjAD4APwBAAEEAQgBeAF8AYABhAKMAqQCkAJMAwwCqAKIA8AC4ALYAtwDEALQAtQDFAIcAqwDGAL4AvwCYAJoAmQDvAKUAkgCcAKcAjwCUAJUAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwBKAAEABAAAAAIAAAAAAAAAAQAAAADeBipuAAAAANeCVUMAAAAA4YOP8w==')
+    format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+page {
+  background-color: var(--td-bg-color-page);
+
+  --bg-color-demo-desc: var(--td-text-color-secondary);
+  --bg-color-demo-title: var(--td-text-color-primary);
+  --bg-color-demo: var(--td-bg-color-container);
+  --bg-color-demo-secondary: var(--td-bg-color-container);
+  --td-navbar-bg-color: var(--td-bg-color-page);
+  --td-navbar-color: var(--td-text-color-primary);
+  --td-progress-circle-inner-bg-color: var(--bg-color-demo);
+}
+
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
+
+
+.demo {
+  padding-bottom: 56rpx;
+
+  &-navbar {
+    --td-navbar-bg-color: var(--td-bg-color-container);
+    --td-navbar-color: var(--td-text-color-primary);
+  }
+
+  &-title {
+    font-size: 48rpx;
+    font-weight: 700;
+    line-height: 64rpx;
+    margin: 48rpx 32rpx 0;
+    color: var(--bg-color-demo-title);
+  }
+
+  &-desc {
+    font-size: 28rpx;
+    color: var(--bg-color-demo-desc);
+    margin: 16rpx 32rpx 0;
+    line-height: 44rpx;
+  }
+}
diff --git a/packages/tdesign-uniapp/app/template.h5.html b/packages/tdesign-uniapp/app/template.h5.html
new file mode 100644
index 000000000..6fe7061f1
--- /dev/null
+++ b/packages/tdesign-uniapp/app/template.h5.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+		<title>
+			<%= htmlWebpackPlugin.options.title %>
+		</title>
+		<!-- 正式发布的时候使用，开发期间不启用。↓ -->
+        <!-- <script src="/h5/touch-emulator.js"></script>
+		<script>
+            TouchEmulator();
+			if (document.documentElement.clientWidth > 1024) {
+				window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;
+			}
+		</script>
+        <style>
+            ::-webkit-scrollbar{
+                display: none;
+            }
+        </style>
+        <script>
+            var _hmt = _hmt || [];
+            (function() {
+                var hm = document.createElement("script");
+                hm.src = "https://hm.baidu.com/hm.js?";// 百度统计key
+                var s = document.getElementsByTagName("script")[0];
+                s.parentNode.insertBefore(hm, s);
+            })();
+        </script> -->
+        <!-- 正式发布的时候使用，开发期间不启用。↑ -->
+		<script>
+			// document.addEventListener('DOMContentLoaded', function() {
+			// 	document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
+			// })
+		</script>
+		<script src="<%= BASE_URL %>static/web/image-resize-3.0.1.min.js"></script>
+		<script src="<%= BASE_URL %>static/web/quill-1.3.7.min.js"></script>
+		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+	</head>
+	<body>
+		<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
+		<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
+		<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
+		<noscript>
+			<strong>Please enable JavaScript to continue.</strong>
+		</noscript>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+		<script>
+			/*BAIDU_STAT*/
+		</script>
+	</body>
+</html>
diff --git a/packages/tdesign-uniapp/app/uni.scss b/packages/tdesign-uniapp/app/uni.scss
new file mode 100644
index 000000000..99b792fe8
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni.scss
@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#e5e5e5;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/changelog.md b/packages/tdesign-uniapp/app/uni_modules/uni-scss/changelog.md
new file mode 100644
index 000000000..a58bab79c
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/changelog.md
@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/index.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/index.scss
new file mode 100644
index 000000000..5d43f7fa4
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/index.scss
@@ -0,0 +1 @@
+@import './styles/index.scss';
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/package.json b/packages/tdesign-uniapp/app/uni_modules/uni-scss/package.json
new file mode 100644
index 000000000..4db034b15
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/package.json
@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/readme.md b/packages/tdesign-uniapp/app/uni_modules/uni-scss/readme.md
new file mode 100644
index 000000000..8fa518a69
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/readme.md
@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/index.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/index.scss
new file mode 100644
index 000000000..2106dd1a5
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/index.scss
@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_border.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_border.scss
new file mode 100644
index 000000000..781df6489
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_border.scss
@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_color.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_color.scss
new file mode 100644
index 000000000..595f5edea
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_color.scss
@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_radius.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_radius.scss
new file mode 100644
index 000000000..8672a693a
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_radius.scss
@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_space.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_space.scss
new file mode 100644
index 000000000..9c3b17bd6
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_space.scss
@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_styles.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_styles.scss
new file mode 100644
index 000000000..6f882c855
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_styles.scss
@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_text.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_text.scss
new file mode 100644
index 000000000..0a89590bd
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_text.scss
@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_variables.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_variables.scss
new file mode 100644
index 000000000..5fb5d9b94
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/setting/_variables.scss
@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/tools/functions.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/tools/functions.scss
new file mode 100644
index 000000000..a71beeb2c
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/styles/tools/functions.scss
@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/theme.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/theme.scss
new file mode 100644
index 000000000..20cdf5ebd
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/theme.scss
@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
diff --git a/packages/tdesign-uniapp/app/uni_modules/uni-scss/variables.scss b/packages/tdesign-uniapp/app/uni_modules/uni-scss/variables.scss
new file mode 100644
index 000000000..49a89b6ff
--- /dev/null
+++ b/packages/tdesign-uniapp/app/uni_modules/uni-scss/variables.scss
@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);
diff --git a/packages/tdesign-uniapp/app/vite.config.js b/packages/tdesign-uniapp/app/vite.config.js
new file mode 100644
index 000000000..6a3faf8dd
--- /dev/null
+++ b/packages/tdesign-uniapp/app/vite.config.js
@@ -0,0 +1,14 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import path from 'path'; // 用于解析路径
+
+export default defineConfig({
+  plugins: [uni()],
+  resolve: {
+    alias: {
+      'tdesign-uniapp': path.resolve(__dirname, './uni_modules/tdesign-uniapp/components'),
+      'tdesign-uniapp-raw': path.resolve(__dirname, './tdesign-uniapp-raw'),
+    },
+  },
+});

From bec4aeec3671e617487be5d6a1f0046c4825dc20 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 22:47:23 +0800
Subject: [PATCH 07/26] chore: update init script

---
 packages/tdesign-uniapp/example/script/release/less.js |  8 ++++----
 packages/tdesign-uniapp/example/script/watch/config.js | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/tdesign-uniapp/example/script/release/less.js b/packages/tdesign-uniapp/example/script/release/less.js
index 7c1c66573..d86362508 100644
--- a/packages/tdesign-uniapp/example/script/release/less.js
+++ b/packages/tdesign-uniapp/example/script/release/less.js
@@ -36,10 +36,10 @@ async function processLess(inputFile, rawOutputFile, rawOutputFileInApp) {
     const cssResult = await less.render(lessCode, {
       // 设置导入路径
       paths: [
-        path.join(__dirname, '../../../tdesign/common'),
-        path.join(__dirname, '../../../tdesign/common/style'),
-        path.join(__dirname, '../../../tdesign/common/style/mixins'),
-        path.join(__dirname, '../../../tdesign/common/style/theme'),
+        path.join(__dirname, '../../../components/common'),
+        path.join(__dirname, '../../../components/common/style'),
+        path.join(__dirname, '../../../components/common/style/mixins'),
+        path.join(__dirname, '../../../components/common/style/theme'),
       ],
     });
 
diff --git a/packages/tdesign-uniapp/example/script/watch/config.js b/packages/tdesign-uniapp/example/script/watch/config.js
index 3fa622b6e..5d97b151b 100644
--- a/packages/tdesign-uniapp/example/script/watch/config.js
+++ b/packages/tdesign-uniapp/example/script/watch/config.js
@@ -3,7 +3,7 @@ const path = require('path');
 const config = {
   targetDir: path.resolve(__dirname, '../../src/_tdesign'),
   rawTargetDir: path.resolve(__dirname, '../../src/_tdesign-raw'),
-  rawTargetDirInApp: path.resolve(__dirname, '../../../tdesign-app/tdesign-uniapp-raw'),
+  rawTargetDirInApp: path.resolve(__dirname, '../../../app/tdesign-uniapp-raw'),
 
   sourceDir: path.resolve(__dirname, '../../../components'),
   chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
@@ -19,10 +19,10 @@ const config = {
   demoPagesGlob: path.resolve(__dirname, '../../src/pages/**/*'),
   demoComponentsGlob: path.resolve(__dirname, '../../src/components/**/*'),
 
-  appDir: path.resolve(__dirname, '../../../tdesign-app'),
-  appPagesMoreDir: path.resolve(__dirname, '../../../tdesign-app/pages-more'),
-  appComponentsDir: path.resolve(__dirname, '../../../tdesign-app/components'),
-  appPagesDir: path.resolve(__dirname, '../../../tdesign-app/pages'),
+  appDir: path.resolve(__dirname, '../../../app'),
+  appPagesMoreDir: path.resolve(__dirname, '../../../app/pages-more'),
+  appComponentsDir: path.resolve(__dirname, '../../../app/components'),
+  appPagesDir: path.resolve(__dirname, '../../../app/pages'),
 };
 
 

From 2e8c456caed448d7832c06ad5aa9a8f34e8afb28 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 23:06:13 +0800
Subject: [PATCH 08/26] chore: remove useless script

---
 .../example/script/deploy/cdn.js              | 73 -------------------
 .../example/script/deploy/local.env.js        |  8 --
 .../example/script/deploy/mine-doc.js         | 35 ---------
 .../example/script/deploy/publish.sh          | 32 --------
 4 files changed, 148 deletions(-)
 delete mode 100644 packages/tdesign-uniapp/example/script/deploy/cdn.js
 delete mode 100644 packages/tdesign-uniapp/example/script/deploy/local.env.js
 delete mode 100644 packages/tdesign-uniapp/example/script/deploy/mine-doc.js
 delete mode 100644 packages/tdesign-uniapp/example/script/deploy/publish.sh

diff --git a/packages/tdesign-uniapp/example/script/deploy/cdn.js b/packages/tdesign-uniapp/example/script/deploy/cdn.js
deleted file mode 100644
index 79b700454..000000000
--- a/packages/tdesign-uniapp/example/script/deploy/cdn.js
+++ /dev/null
@@ -1,73 +0,0 @@
-const { uploadCOSFileAndPurgeUrlCache } = require('t-comm');
-const glob = require('glob');
-const path = require('path');
-const fs = require('fs');
-
-require('./local.env')();
-const args = process.argv.slice(2);
-
-
-const COS_CONFIG = {
-  bucket: 'mike-1255355338',
-  region: 'ap-guangzhou',
-  secretId: args[0] || process.env.COS_SECRET_ID,
-  secretKey: args[1] || process.env.COS_SECRET_KEY,
-  isChat: args[2] == 1,
-};
-
-const CONFIG = {
-  UNIAPP_SITE_GLOB: './packages/site/dist/**/*',
-  UNIAPP_CHAT_SITE_GLOB: './packages/site-chat/dist/**/*',
-
-  UNIAPP_PREFIX: 'tdesign-uniapp',
-  UNIAPP_CHAT_PREFIX: 'tdesign-uniapp-chat',
-
-  UNIAPP_SITE_PACKAGE_NAME: 'site',
-  UNIAPP_CHAT_SITE_PACKAGE_NAME: 'site-chat',
-};
-
-
-async function uploadCdn() {
-  const list = glob.sync(COS_CONFIG.isChat ? CONFIG.UNIAPP_SITE_GLOB
-    : CONFIG.UNIAPP_CHAT_SITE_GLOB, {
-    ignore: '**/*.html',
-    nodir: true,
-  });
-
-  const files = list.map((item) => {
-    const filePath = path.resolve(process.cwd(), item);
-    const key =  `${COS_CONFIG.isChat
-      ? CONFIG.UNIAPP_PREFIX
-      : CONFIG.UNIAPP_CHAT_PREFIX}/${path.relative(path.resolve(
-      process.cwd(),
-      `./packages/${COS_CONFIG.isChat
-        ? CONFIG.UNIAPP_SITE_PACKAGE_NAME
-        : CONFIG.UNIAPP_CHAT_SITE_PACKAGE_NAME}/dist`,
-    ), item)}`;
-
-    return {
-      key,
-      path: filePath,
-    };
-  });
-
-  for (const item of files) {
-    uploadCOSFileAndPurgeUrlCache({
-      ...COS_CONFIG,
-
-      files: [item],
-
-      area: 'mainland',
-      useEO: false,
-    }).then((res) => {
-      console.log('[uploadResult] res: ', res);
-
-      fs.unlinkSync(item.path);
-    })
-      .catch((e) => {
-        console.log('uploadCOSFileAndPurgeUrlCache.err: ', e);
-      });
-  }
-}
-
-uploadCdn();
diff --git a/packages/tdesign-uniapp/example/script/deploy/local.env.js b/packages/tdesign-uniapp/example/script/deploy/local.env.js
deleted file mode 100644
index baba9f85e..000000000
--- a/packages/tdesign-uniapp/example/script/deploy/local.env.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const path = require('path');
-
-function readLocalEnv() {
-  const configPath =  path.resolve(process.cwd(), './.env.local');
-  require('dotenv').config({ path: configPath });
-}
-
-module.exports = readLocalEnv;
diff --git a/packages/tdesign-uniapp/example/script/deploy/mine-doc.js b/packages/tdesign-uniapp/example/script/deploy/mine-doc.js
deleted file mode 100644
index 55e570ba6..000000000
--- a/packages/tdesign-uniapp/example/script/deploy/mine-doc.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const path = require('path');
-
-const { execCommand } = require('t-comm');
-
-require('./local.env')();
-
-const args = process.argv.slice(2);
-const isChat = args[2] == 1;
-
-const DEPLOY_CONFIG = {
-  publishBash: path.resolve(__dirname, './publish.sh'),
-  distDir: isChat ? './packages/site-chat/dist/' : './packages/site/dist/',
-  hostTargetDir: isChat ? '/usr/share/nginx/html/tdesign-uniapp-chat/' : '/usr/share/nginx/html/tdesign-uniapp/',
-  hostName: args[0] || process.env.HOST_NAME,
-  hostPwd: args[1] || process.env.HOST_PWD,
-  HOST_PORT: 22,
-  root: process.cwd(),
-};
-
-async function main() {
-  console.log('[DEPLOY_CONFIG]', DEPLOY_CONFIG);
-
-
-  if (!DEPLOY_CONFIG.hostPwd || !DEPLOY_CONFIG.hostName) {
-    throw new Error('缺少环境变量');
-  }
-
-  execCommand(
-    `sh ${DEPLOY_CONFIG.publishBash} ${DEPLOY_CONFIG.distDir} ${DEPLOY_CONFIG.hostTargetDir} ${DEPLOY_CONFIG.hostName} ${DEPLOY_CONFIG.hostPwd} ${DEPLOY_CONFIG.HOST_PORT}`,
-    DEPLOY_CONFIG.root,
-    'inherit',
-  );
-}
-
-main();
diff --git a/packages/tdesign-uniapp/example/script/deploy/publish.sh b/packages/tdesign-uniapp/example/script/deploy/publish.sh
deleted file mode 100644
index c778c941a..000000000
--- a/packages/tdesign-uniapp/example/script/deploy/publish.sh
+++ /dev/null
@@ -1,32 +0,0 @@
-#!/bin/sh
-set -e
-
-SOURCE_DIR_OR_FILE=$1
-TARGET_DIR=$2
-HOST_NAME=$3
-HOST_PWD=$4
-
-# - 符号：如果变量未定义，使用提供的值
-HOST_PORT=${5-36000}
-
-
-SOURCE_FILES=
-
-if [ -f "$SOURCE_DIR_OR_FILE" ]; then
-  SOURCE_FILES="$SOURCE_DIR_OR_FILE"
-elif [ -d "$SOURCE_DIR_OR_FILE" ]; then
-  SOURCE_FILES="$SOURCE_DIR_OR_FILE/*"
-else
-  echo "ERROR: SOURCE_DIR_OR_FILE 不为目录或文件"
-  exit 1
-fi
-
-expect -c "
-        set timeout 1200;
-        spawn bash -c \"scp -P $HOST_PORT -r $SOURCE_FILES root@$HOST_NAME:$TARGET_DIR\"
-        expect {
-                \"*yes/no*\" {send \"yes\r\"; exp_continue}
-                \"*password*\" {send \"$HOST_PWD\r\";}
-                \"*Password*\" {send \"$HOST_PWD\r\";}
-               }
-expect eof;"

From ed352cc5f7a60424f8e9aff3db1ff0158d5df447 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 23:06:56 +0800
Subject: [PATCH 09/26] chore: update release:script

---
 .../tdesign-uniapp/example/script/release/config.js  | 12 ++++++------
 .../tdesign-uniapp/example/script/release/prepare.js |  2 +-
 .../example/script/release/publish-tdesign-uniapp.js |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/tdesign-uniapp/example/script/release/config.js b/packages/tdesign-uniapp/example/script/release/config.js
index b43644936..4cc1bcf33 100644
--- a/packages/tdesign-uniapp/example/script/release/config.js
+++ b/packages/tdesign-uniapp/example/script/release/config.js
@@ -1,13 +1,13 @@
 const path = require('path');
 
 const config = {
-  targetDir: path.resolve(__dirname, '../../../../npm_dist'),
-  sourceDir: path.resolve(__dirname, '../../../tdesign'),
-  sourceGlob: path.resolve(__dirname, '../../../tdesign/**/*'),
+  targetDir: path.resolve(__dirname, '../../../npm_dist'),
+  sourceDir: path.resolve(__dirname, '../../../components'),
+  sourceGlob: path.resolve(__dirname, '../../../components/**/*'),
 
-  chatTargetDir: path.resolve(__dirname, '../../../../npm_dist_chat'),
-  chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
-  chatSourceGlob: path.resolve(__dirname, '../../../tdesign-uniapp-chat/**/*'),
+  chatTargetDir: path.resolve(__dirname, '../../../../tdesign-uniapp-chat/npm_dist'),
+  chatSourceDir: path.resolve(__dirname, '../../../../tdesign-uniapp-chat/components'),
+  chatSourceGlob: path.resolve(__dirname, '../../../../tdesign-uniapp-chat/components/**/*'),
 
   demoDir: path.resolve(__dirname, '../../src/pages-more'),
 };
diff --git a/packages/tdesign-uniapp/example/script/release/prepare.js b/packages/tdesign-uniapp/example/script/release/prepare.js
index 06ceb0ec0..120f2c8a4 100644
--- a/packages/tdesign-uniapp/example/script/release/prepare.js
+++ b/packages/tdesign-uniapp/example/script/release/prepare.js
@@ -38,7 +38,7 @@ async function prepareOne({
     ignore: '**/{node_modules,_example}/**/*',
     nodir: true,
     dot: true,
-  });
+  }).filter(item => !item.includes('_example') && !item.includes('node_modules'));
 
   for (const item of list) {
     const relativePath = path.relative(sourceDir, item);
diff --git a/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
index 45e8a04c0..60a29230d 100644
--- a/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
+++ b/packages/tdesign-uniapp/example/script/release/publish-tdesign-uniapp.js
@@ -1,7 +1,7 @@
 const { publishCore } = require('./publish-core');
 const path = require('path');
 
-const PUBLISH_DIR = path.resolve(__dirname, '../../../../npm_dist_chat');
+const PUBLISH_DIR = path.resolve(__dirname, '../../../../tdesign-uniapp-chat/npm_dist');
 
 console.log('[PUBLISH_DIR]', PUBLISH_DIR);
 

From 268f33add36256adc9a62cfce26b064f8eb203bc Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Wed, 19 Nov 2025 23:25:54 +0800
Subject: [PATCH 10/26] chore: update pnpm-workspace

---
 pnpm-workspace.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f10aa3331..660cb08ea 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,5 @@
 packages:
   - packages/**
+  - '!**/npm_dist/**'
+  - '!**/_tdesign*/**'
+  - '!**/uni_modules/**'

From 88c63e66ae8bd4daabcf90d47b7edaec61d2c364 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 00:42:55 +0800
Subject: [PATCH 11/26] chore: update uniapp config

---
 .gitignore                                    |  2 +-
 packages/tdesign-uniapp-chat/package.json     |  6 +--
 .../tdesign-uniapp-chat/site/vite.config.ts   |  2 +-
 packages/tdesign-uniapp-chat/site/web/app.vue |  2 +-
 .../site/web/stackblitz/content.ts            |  5 ++-
 .../tdesign-uniapp-chat/tsconfig.eslint.json  |  2 +-
 packages/tdesign-uniapp-chat/tsconfig.json    | 40 -------------------
 .../example/script/release/less.js            | 10 ++---
 .../example/script/watch/config.js            |  4 +-
 .../example/script/watch/init.js              |  2 +-
 packages/tdesign-uniapp/package.json          |  3 +-
 11 files changed, 20 insertions(+), 58 deletions(-)
 delete mode 100644 packages/tdesign-uniapp-chat/tsconfig.json

diff --git a/.gitignore b/.gitignore
index a5df1dab2..329222bc5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,7 @@ packages/tdesign-uniapp/npm_dist/
 packages/tdesign-uniapp-chat/npm_dist/
 
 # about app of uniapp
-packages/tdesign-uniapp/app/uni_modules/tdesign-uniapp/
+packages/tdesign-uniapp/app/uni_modules/tdesign-uniapp*/
 packages/tdesign-uniapp/app/unpackage/
 packages/tdesign-uniapp/app/pages-more/
 packages/tdesign-uniapp/app/pages/
diff --git a/packages/tdesign-uniapp-chat/package.json b/packages/tdesign-uniapp-chat/package.json
index 02d063efe..e9cb067d3 100644
--- a/packages/tdesign-uniapp-chat/package.json
+++ b/packages/tdesign-uniapp-chat/package.json
@@ -11,9 +11,9 @@
     "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
   },
   "scripts": {
-    "build": "pnpm --filter=\"./site\" build",
-    "preview": "pnpm --filter=\"./site\" run site:preview",
-    "preview:chat": "pnpm --filter=\"./site\" run site:preview",
+    "site": "pnpm --filter=\"./site\" build",
+    "site:dev": "pnpm --filter=\"./site\" run dev",
+    "site:preview": "pnpm --filter=\"./site\" run site:preview",
     "type-check": "vue-tsc --noEmit",
     "publish": "cd npm_dist && npm publish"
   },
diff --git a/packages/tdesign-uniapp-chat/site/vite.config.ts b/packages/tdesign-uniapp-chat/site/vite.config.ts
index 1f766b712..a9600352a 100644
--- a/packages/tdesign-uniapp-chat/site/vite.config.ts
+++ b/packages/tdesign-uniapp-chat/site/vite.config.ts
@@ -55,7 +55,7 @@ export default ({ mode }) => {
     root: '.',
     resolve: {
       alias: {
-        '@': resolvePath('../tdesign-uniapp-chat'),
+        '@': resolvePath('../components'),
         '@docs': resolvePath('./docs'),
       },
     },
diff --git a/packages/tdesign-uniapp-chat/site/web/app.vue b/packages/tdesign-uniapp-chat/site/web/app.vue
index 33573fab4..0d053a2c6 100644
--- a/packages/tdesign-uniapp-chat/site/web/app.vue
+++ b/packages/tdesign-uniapp-chat/site/web/app.vue
@@ -28,7 +28,7 @@
 
 <script>
 import { defineComponent } from 'vue';
-import packageJson from '../../tdesign/package.json';
+import packageJson from '../../components/package.json';
 import siteConfig from '../docs.config';
 import { filterVersions, sortDocs } from './utils';
 
diff --git a/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts b/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
index 6bb7dd015..20aa12a49 100644
--- a/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
+++ b/packages/tdesign-uniapp-chat/site/web/stackblitz/content.ts
@@ -1,4 +1,4 @@
-import orgPkg from '../../../tdesign/package.json';
+import orgPkg from '../../../components/package.json';
 
 export const HTML_CONTENT = `
 <!DOCTYPE html>
@@ -218,7 +218,8 @@ export const PACKAGE_JSON_CONTENT = JSON.stringify(
       '@dcloudio/uni-mp-weixin': '3.0.0-4070620250821001',
       '@dcloudio/uni-mp-xhs': '3.0.0-4070620250821001',
       '@dcloudio/uni-quickapp-webview': '3.0.0-4070620250821001',
-      'tdesign-uniapp': orgPkg.version,
+      'tdesign-uniapp': 'latest',
+      'tdesign-uniapp-chat': orgPkg.version,
       vue: '^3.4.21',
       'vue-router': '4.5.1',
     },
diff --git a/packages/tdesign-uniapp-chat/tsconfig.eslint.json b/packages/tdesign-uniapp-chat/tsconfig.eslint.json
index 14e544d39..7c497d936 100644
--- a/packages/tdesign-uniapp-chat/tsconfig.eslint.json
+++ b/packages/tdesign-uniapp-chat/tsconfig.eslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../../tsconfig.json",
   "include": [
     "**/*.ts",
     "**/*.js",
diff --git a/packages/tdesign-uniapp-chat/tsconfig.json b/packages/tdesign-uniapp-chat/tsconfig.json
deleted file mode 100644
index b82fdd8fc..000000000
--- a/packages/tdesign-uniapp-chat/tsconfig.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": true,
-    "baseUrl": ".",
-    "allowJs": true,
-    "paths": {
-      "tdesign-uniapp/*": [
-        "packages/tdesign/*"
-      ],
-      "tdesign-site/*": [
-        "packages/demo/*"
-      ],
-      "tdesign-uniapp-chat/*": [
-        "packages/tdesign-uniapp-chat/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "types": [
-      "@dcloudio/types",
-      "node",
-      "miniprogram-api-typings"
-    ],
-    "noImplicitAny": false,
-  },
-  "include": [
-    "packages/**/*.ts",
-    "packages/**/*.d.ts",
-    "packages/**/*.tsx",
-    "packages/**/*.vue",
-    "./*.ts",
-    "./types/*.ts"
-  ],
-  "exclude": [
-    "packages/tdesign-app/uni_modules/uni-upgrade-center-app/**/*.ts"
-  ]
-}
diff --git a/packages/tdesign-uniapp/example/script/release/less.js b/packages/tdesign-uniapp/example/script/release/less.js
index d86362508..f8668b9e9 100644
--- a/packages/tdesign-uniapp/example/script/release/less.js
+++ b/packages/tdesign-uniapp/example/script/release/less.js
@@ -6,11 +6,11 @@ const rpxTransform = require('postcss-rpx-transform');
 
 const CONFIG = {
   whiteList: [
-    path.resolve(process.cwd(), 'packages/tdesign/common/style/theme/index.less'),
-    path.resolve(process.cwd(), 'packages/tdesign/common/style/base.less'),
-    path.resolve(process.cwd(), 'packages/tdesign/common/style/_variables.less'),
-    path.resolve(process.cwd(), 'packages/tdesign/common/style/mixins/'),
-    path.resolve(process.cwd(), 'packages/tdesign/common/style/theme/raw/'),
+    path.resolve(__dirname, '../../../components/common/style/theme/index.less'),
+    path.resolve(__dirname, '../../../components/common/style/base.less'),
+    path.resolve(__dirname, '../../../components/common/style/_variables.less'),
+    path.resolve(__dirname, '../../../components/common/style/mixins/'),
+    path.resolve(__dirname, '../../../components/common/style/theme/raw/'),
   ],
 };
 
diff --git a/packages/tdesign-uniapp/example/script/watch/config.js b/packages/tdesign-uniapp/example/script/watch/config.js
index 5d97b151b..26dc9b411 100644
--- a/packages/tdesign-uniapp/example/script/watch/config.js
+++ b/packages/tdesign-uniapp/example/script/watch/config.js
@@ -6,10 +6,10 @@ const config = {
   rawTargetDirInApp: path.resolve(__dirname, '../../../app/tdesign-uniapp-raw'),
 
   sourceDir: path.resolve(__dirname, '../../../components'),
-  chatSourceDir: path.resolve(__dirname, '../../../tdesign-uniapp-chat'),
+  chatSourceDir: path.resolve(__dirname, '../../../../tdesign-uniapp-chat/components'),
 
   sourceGlob: path.resolve(__dirname, '../../../components/**/*'),
-  chatSourceGlob: path.resolve(__dirname, '../../../tdesign-uniapp-chat/**/*'),
+  chatSourceGlob: path.resolve(__dirname, '../../../../tdesign-uniapp-chat/components/**/*'),
   baseAndChatSourceGlob: path.resolve(__dirname, '../../../../{tdesign-uniapp,tdesign-uniapp-chat}/**/*'),
 
   demoDir: path.resolve(__dirname, '../../src/pages-more'),
diff --git a/packages/tdesign-uniapp/example/script/watch/init.js b/packages/tdesign-uniapp/example/script/watch/init.js
index f1a866262..391f956ba 100644
--- a/packages/tdesign-uniapp/example/script/watch/init.js
+++ b/packages/tdesign-uniapp/example/script/watch/init.js
@@ -13,7 +13,7 @@ async function copyOneProject({
   const list = glob.sync(globMode, {
     ignore: '**/node_modules/**/*',
     nodir: true,
-  });
+  }).filter(item => !item.includes('node_modules'));
 
   for (const item of list) {
     const relativePath = path.relative(sourceDir, item);
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index 3ae2d4903..b85091b2e 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site\" dev\"",
-    "dev:chat": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site-chat\" dev\"",
+    "dev:h5": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\"",
     "dev:mp-weixin": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-weixin\"",
     "dev:mp-alipay": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-alipay\"",
     "dev:mp-toutiao": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:mp-toutiao\"",
@@ -35,6 +35,7 @@
     "build:mp-jd": "pnpm --filter=\"./example\" build:mp-jd",
     "build:mp-baidu": "pnpm --filter=\"./example\" build:mp-baidu",
     "build:mp": "npm run build:mp-weixin",
+    "site:dev": "pnpm --filter=\"./site\" run dev",
     "preview": "pnpm --filter=\"./site\" run site:preview && pnpm --filter=\"./example\" build:h5",
     "preview:chat": "pnpm --filter=\"./site-chat\" run site:preview && pnpm --filter=\"./example\" build:h5",
     "type-check": "vue-tsc --noEmit",

From d6b048159990a33adb98e8a7d23f67af0d6ad23e Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 00:52:49 +0800
Subject: [PATCH 12/26] chore: update license

---
 packages/tdesign-uniapp-chat/components/LICENSE      | 2 +-
 packages/tdesign-uniapp-chat/components/package.json | 6 +++---
 packages/tdesign-uniapp-chat/package.json            | 4 ++--
 packages/tdesign-uniapp-chat/site/package.json       | 4 ++--
 packages/tdesign-uniapp/app/package.json             | 6 +++---
 packages/tdesign-uniapp/components/LICENSE           | 2 +-
 packages/tdesign-uniapp/components/package.json      | 4 ++--
 packages/tdesign-uniapp/package.json                 | 4 ++--
 packages/tdesign-uniapp/site/package.json            | 4 ++--
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/tdesign-uniapp-chat/components/LICENSE b/packages/tdesign-uniapp-chat/components/LICENSE
index bce416bd7..789cbde93 100644
--- a/packages/tdesign-uniapp-chat/components/LICENSE
+++ b/packages/tdesign-uniapp-chat/components/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-present novlan1
+Copyright (c) 2021-present TDesign
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/packages/tdesign-uniapp-chat/components/package.json b/packages/tdesign-uniapp-chat/components/package.json
index 8cfabbf71..f05fb3763 100644
--- a/packages/tdesign-uniapp-chat/components/package.json
+++ b/packages/tdesign-uniapp-chat/components/package.json
@@ -62,11 +62,11 @@
   ],
   "homepage": "https://uwayfly.com/tdesign-uniapp-chat/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "dev:custom": "uni -p",
@@ -154,4 +154,4 @@
     "tdesign-uniapp": "latest"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp-chat/package.json b/packages/tdesign-uniapp-chat/package.json
index e9cb067d3..b9800a38e 100644
--- a/packages/tdesign-uniapp-chat/package.json
+++ b/packages/tdesign-uniapp-chat/package.json
@@ -4,11 +4,11 @@
   "private": "true",
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "site": "pnpm --filter=\"./site\" build",
diff --git a/packages/tdesign-uniapp-chat/site/package.json b/packages/tdesign-uniapp-chat/site/package.json
index b952083d8..eac33960f 100644
--- a/packages/tdesign-uniapp-chat/site/package.json
+++ b/packages/tdesign-uniapp-chat/site/package.json
@@ -6,11 +6,11 @@
   "author": "novlan1",
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development vite",
diff --git a/packages/tdesign-uniapp/app/package.json b/packages/tdesign-uniapp/app/package.json
index 81cd8a537..77e421f34 100644
--- a/packages/tdesign-uniapp/app/package.json
+++ b/packages/tdesign-uniapp/app/package.json
@@ -5,7 +5,7 @@
   "version": "3.4.9",
   "description": "tdesign-uniapp 示例工程",
   "scripts": {},
-  "repository": "https://github.com/novlan1/tdesign-uniapp.git",
+  "repository": "https://github.com/Tencent/tdesign-miniprogram.git",
   "keywords": [
     "tdesign-uniapp",
     "uni-app"
@@ -13,7 +13,7 @@
   "author": "",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "dependencies": {},
@@ -126,4 +126,4 @@
     "uni-app": "^4.03",
     "uni-app-x": ""
   }
-}
+}
\ No newline at end of file
diff --git a/packages/tdesign-uniapp/components/LICENSE b/packages/tdesign-uniapp/components/LICENSE
index bce416bd7..789cbde93 100644
--- a/packages/tdesign-uniapp/components/LICENSE
+++ b/packages/tdesign-uniapp/components/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-present novlan1
+Copyright (c) 2021-present TDesign
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/packages/tdesign-uniapp/components/package.json b/packages/tdesign-uniapp/components/package.json
index c718ca320..168e261ee 100644
--- a/packages/tdesign-uniapp/components/package.json
+++ b/packages/tdesign-uniapp/components/package.json
@@ -407,11 +407,11 @@
   ],
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "dev:custom": "uni -p",
diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index b85091b2e..cb28b6056 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -4,11 +4,11 @@
   "private": "true",
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "dev": "concurrently \"npm run watch\" \"pnpm --filter=\"./example\" dev:h5\" \"pnpm --filter=\"./site\" dev\"",
diff --git a/packages/tdesign-uniapp/site/package.json b/packages/tdesign-uniapp/site/package.json
index 0439a95c2..5420b2961 100644
--- a/packages/tdesign-uniapp/site/package.json
+++ b/packages/tdesign-uniapp/site/package.json
@@ -6,11 +6,11 @@
   "author": "novlan1",
   "homepage": "https://uwayfly.com/tdesign-uniapp/",
   "bugs": {
-    "url": "https://github.com/novlan1/tdesign-uniapp/issues"
+    "url": "https://github.com/Tencent/tdesign-miniprogram/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novlan1/tdesign-uniapp.git"
+    "url": "git+https://github.com/Tencent/tdesign-miniprogram.git"
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development vite",

From 1bd3cc74603f38b4692d76bd80272d2b3ac477e2 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 01:14:50 +0800
Subject: [PATCH 13/26] chore: test

---
 .github/workflows/preview-site-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/preview-site-publish.yml b/.github/workflows/preview-site-publish.yml
index 6f6afbbc0..0548b2609 100644
--- a/.github/workflows/preview-site-publish.yml
+++ b/.github/workflows/preview-site-publish.yml
@@ -122,7 +122,7 @@ jobs:
                   const preview_text = `[${tdesign[component].status}](${tdesign[component].report_url})`;
                   let package_name = component;
                   if (component === "tdesign-miniprogram-chat") {
-                    package_name = "@tdesign-miniprogram/chat";
+                    package_name = "@tdesign-miniprogram/chat1";
                   }
 
                   return `| ${package_name} | ${preview_text} | `;

From c855bd249075ffc034b35c703f53f1fec13bb2e1 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 01:21:03 +0800
Subject: [PATCH 14/26] ci: update ci

---
 .github/workflows/pr-compressed-size.yml   | 6 +++++-
 .github/workflows/preview-site-publish.yml | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index 0886ec814..b956a0213 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -11,8 +11,12 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: recursive
+      - uses: ./.github/actions/install-dep
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          install-script: 'npm install --force'
           pattern: './packages/tdesign-miniprogram/miniprogram_dist/**/*.{js,wxs,wxml,json}'
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          pattern: './packages/{tdesign-uniapp,tdesign-uniapp-chat}/npm_dist/**/*.{js,ts,vue,less,css}'
diff --git a/.github/workflows/preview-site-publish.yml b/.github/workflows/preview-site-publish.yml
index 0548b2609..6f6afbbc0 100644
--- a/.github/workflows/preview-site-publish.yml
+++ b/.github/workflows/preview-site-publish.yml
@@ -122,7 +122,7 @@ jobs:
                   const preview_text = `[${tdesign[component].status}](${tdesign[component].report_url})`;
                   let package_name = component;
                   if (component === "tdesign-miniprogram-chat") {
-                    package_name = "@tdesign-miniprogram/chat1";
+                    package_name = "@tdesign-miniprogram/chat";
                   }
 
                   return `| ${package_name} | ${preview_text} | `;

From 380e9a612eeb72b7d685ccb56477cc25ee86a9a8 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 01:26:32 +0800
Subject: [PATCH 15/26] ci: update ci

---
 .github/workflows/pr-compressed-size.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index b956a0213..aa4492296 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -11,12 +11,13 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - uses: ./.github/actions/install-dep
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          install-script: 'npm install --force'
           pattern: './packages/tdesign-miniprogram/miniprogram_dist/**/*.{js,wxs,wxml,json}'
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          install-script: 'pnpm install --force'
           pattern: './packages/{tdesign-uniapp,tdesign-uniapp-chat}/npm_dist/**/*.{js,ts,vue,less,css}'

From 65cdfb777eff023deacedae2de15f0997486ea77 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 01:30:55 +0800
Subject: [PATCH 16/26] ci: update ci

---
 .github/workflows/pr-compressed-size.yml | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index aa4492296..0cadc14bd 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -16,8 +16,16 @@ jobs:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           install-script: 'npm install --force'
           pattern: './packages/tdesign-miniprogram/miniprogram_dist/**/*.{js,wxs,wxml,json}'
+          comment-key: miniprogram
+
+      - name: Install pnpm
+        run: npm install -g pnpm@9
+      
+      - name: Install dependencies
+        run: pnpm install
+
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          install-script: 'pnpm install --force'
           pattern: './packages/{tdesign-uniapp,tdesign-uniapp-chat}/npm_dist/**/*.{js,ts,vue,less,css}'
+          comment-key: uniapp

From 7e5ef4395426ee7b07c7dbb1b97fd8be5f4f0c7b Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 01:37:29 +0800
Subject: [PATCH 17/26] ci: update ci

---
 .github/workflows/pr-compressed-size.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index 0cadc14bd..ea3018ba8 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,5 +27,11 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          pattern: './packages/{tdesign-uniapp,tdesign-uniapp-chat}/npm_dist/**/*.{js,ts,vue,less,css}'
+          pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
+
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
+          comment-key: uniapp-chat
\ No newline at end of file

From 55e6d90dc07acac551ccc4ac4984a4839d1d89c4 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:10:56 +0800
Subject: [PATCH 18/26] chore: update script

---
 packages/tdesign-uniapp/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index cb28b6056..d7ec2b914 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -41,7 +41,7 @@
     "type-check": "vue-tsc --noEmit",
     "init": "node ./example/script/watch/init.js && node ./example/script/pages/index.js",
     "watch": "node ./example/script/watch/watch.js",
-    "prepare": "npm run init && npm run release:prepare",
+    "postinstall": "npm run init && npm run release:prepare",
     "release:prepare": "node ./example/script/release/prepare.js",
     "publish": "cd npm_dist && npm publish",
     "commit": "git-cz"

From fff843936b195fc497bee28091fcdf3e29792ed8 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:20:14 +0800
Subject: [PATCH 19/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index ea3018ba8..d04a8b75f 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,11 +27,13 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          build-script: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          build-script: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp-chat
\ No newline at end of file

From 3c5cf4bdd7aaa02c93add71b13cec8bb56a2f007 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:24:57 +0800
Subject: [PATCH 20/26] ci: update compress ci

---
 packages/tdesign-uniapp/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tdesign-uniapp/package.json b/packages/tdesign-uniapp/package.json
index d7ec2b914..cb28b6056 100644
--- a/packages/tdesign-uniapp/package.json
+++ b/packages/tdesign-uniapp/package.json
@@ -41,7 +41,7 @@
     "type-check": "vue-tsc --noEmit",
     "init": "node ./example/script/watch/init.js && node ./example/script/pages/index.js",
     "watch": "node ./example/script/watch/watch.js",
-    "postinstall": "npm run init && npm run release:prepare",
+    "prepare": "npm run init && npm run release:prepare",
     "release:prepare": "node ./example/script/release/prepare.js",
     "publish": "cd npm_dist && npm publish",
     "commit": "git-cz"

From d20c819d048593f5a7639c01af5da64bc7400543 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:25:08 +0800
Subject: [PATCH 21/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index d04a8b75f..517683060 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,13 +27,13 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          build-script: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
+          postinstall: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          build-script: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
+          postinstall: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp-chat
\ No newline at end of file

From dcf67ce41f2b9ac381acc527632cb2378b245d68 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:33:17 +0800
Subject: [PATCH 22/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 2 --
 package.json                             | 3 ++-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index 517683060..ea3018ba8 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,13 +27,11 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          postinstall: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          postinstall: "pnpm run uniapp -- run init && pnpm run uniapp -- run release:prepare"
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp-chat
\ No newline at end of file
diff --git a/package.json b/package.json
index 284c03679..24893452f 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "generate": "gulp generate --gulpfile script/gulpfile.js --cwd ./",
     "changelog": "node script/generate-changelog.js",
     "robot": "publish-cli robot-msg",
-    "qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode"
+    "qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode",
+    "postinstall": "pnpm -C packages/tdesign-uniapp run init && pnpm -C packages/tdesign-uniapp run release:prepare"
   },
   "author": "tdesign",
   "license": "MIT",

From dbcb4ac6c155d601f0881ee5745c675ef9b011fb Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:37:51 +0800
Subject: [PATCH 23/26] ci: update compress ci

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 24893452f..5327d0cab 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "changelog": "node script/generate-changelog.js",
     "robot": "publish-cli robot-msg",
     "qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode",
-    "postinstall": "pnpm -C packages/tdesign-uniapp run init && pnpm -C packages/tdesign-uniapp run release:prepare"
+    "postinstall": "cd packages/tdesign-uniapp && npm run release:prepare"
   },
   "author": "tdesign",
   "license": "MIT",

From 690b6e8a12ae5fa4b47431f947e4629ff7328d14 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:43:51 +0800
Subject: [PATCH 24/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 2 ++
 package.json                             | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index ea3018ba8..593f8eb91 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,6 +27,7 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          build-script: "build:uniapp"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
@@ -34,4 +35,5 @@ jobs:
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
+          build-script: "build:uniapp:chat"
           comment-key: uniapp-chat
\ No newline at end of file
diff --git a/package.json b/package.json
index 5327d0cab..16b6a7705 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "changelog": "node script/generate-changelog.js",
     "robot": "publish-cli robot-msg",
     "qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode",
-    "postinstall": "cd packages/tdesign-uniapp && npm run release:prepare"
+    "build:uniapp": "pnpm -C packages/tdesign-uniapp run release:prepare",
+    "build:uniapp:chat": "pnpm -C packages/tdesign-uniapp run release:prepare"
   },
   "author": "tdesign",
   "license": "MIT",

From f08f555e0c0cf17cb79e9655d78980008a54b5cb Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 09:57:32 +0800
Subject: [PATCH 25/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index 593f8eb91..a660cde2f 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,7 +27,7 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          build-script: "build:uniapp"
+          build-script: "build:uniapp || true"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
@@ -35,5 +35,5 @@ jobs:
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
-          build-script: "build:uniapp:chat"
+          build-script: "build:uniapp:chat || true"
           comment-key: uniapp-chat
\ No newline at end of file

From 5c44c54bbd1b8134f724a3976d6578f12c56b35b Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 20 Nov 2025 10:04:14 +0800
Subject: [PATCH 26/26] ci: update compress ci

---
 .github/workflows/pr-compressed-size.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/pr-compressed-size.yml b/.github/workflows/pr-compressed-size.yml
index a660cde2f..ea3018ba8 100644
--- a/.github/workflows/pr-compressed-size.yml
+++ b/.github/workflows/pr-compressed-size.yml
@@ -27,7 +27,6 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          build-script: "build:uniapp || true"
           pattern: './packages/tdesign-uniapp/npm_dist/**/*.{js,ts,vue,less,css}'
           comment-key: uniapp
 
@@ -35,5 +34,4 @@ jobs:
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           pattern: './packages/tdesign-uniapp-chat/npm_dist/**/*.{js,ts,vue,less,css}'
-          build-script: "build:uniapp:chat || true"
           comment-key: uniapp-chat
\ No newline at end of file